/* ============================================================
   Flowing Cursor — intro + landing
   ============================================================ */

:root {
  --ink: var(--sc-ink);
  --paper: var(--sc-bg);

  /* circle geometry, driven from JS */
  --cx: 50%;
  --cy: 50%;
  --r: 0px;

  /* ============================================================
     design tokens — "Sunset Coral"
     Three layers: raw palette -> semantic roles -> short aliases
     used throughout the sheet. Only ever author against the
     semantic layer; the aliases exist so selectors stay terse.
     ============================================================ */

  /* --- 1. raw palette ------------------------------------- */
  --sc-bg:            #f8f4f1;  /* warm off-white, reads as neutral */
  --sc-bg-alt:        #fff9f6;  /* the lighter warm paper           */
  --sc-white:         #ffffff;
  --sc-surface-warm:  #fbede8;  /* blush surface tint               */

  --sc-coral:         #ff5c52;  /* the one loud colour              */
  --sc-coral-hover:   #e94a42;  /* pressed / hovered coral          */
  --sc-coral-soft:    #ffd8d1;  /* pale coral surface               */
  --sc-coral-muted:   #f3a397;  /* desaturated coral                */
  --sc-coral-wash:    #fff1ed;  /* coral washed into the paper      */

  --sc-deep-red:      #9f302c;  /* coral pushed dark — status text  */
  --sc-burgundy:      #6f2628;  /* secondary dark accent            */

  --sc-ink:           #171514;  /* near-black headings              */
  --sc-ink-2:         #665f5b;  /* body copy                        */
  --sc-ink-3:         #948b86;  /* muted labels                     */

  --sc-border:        #e7ddd8;  /* warm hairline — cards, dividers  */
  --sc-border-soft:   #f0e6e1;  /* the faintest warm rule           */
  --sc-border-strong: #d9ceca;  /* outlined controls                */

  /* --- 2. semantic roles ---------------------------------- */
  --color-background:     var(--sc-bg);
  --color-background-alt: var(--sc-bg-alt);
  --color-surface:        var(--sc-white);
  --color-surface-warm:   var(--sc-surface-warm);

  --color-primary:        var(--sc-coral);
  --color-primary-hover:  var(--sc-coral-hover);
  --color-primary-soft:   var(--sc-coral-soft);
  --color-primary-muted:  var(--sc-coral-muted);
  --color-accent-soft:    var(--sc-coral-wash);
  --color-on-primary:     var(--sc-white);
  --color-primary-rgb:    255, 92, 82;

  --color-deep:           var(--sc-burgundy);
  --color-deep-red:       var(--sc-deep-red);

  --color-text:           var(--sc-ink);
  --color-text-secondary: var(--sc-ink-2);
  --color-text-muted:     var(--sc-ink-3);
  --color-text-faint:     #a89f9a;   /* placeholders only */

  --color-border:         var(--sc-border);
  --color-border-soft:    var(--sc-border-soft);
  --color-border-strong:  var(--sc-border-strong);

  --color-shadow-rgb:     60, 30, 20;  /* warm, never blue-grey */

  /* success stays green so a sent form never reads as an error
     sitting next to the coral error state */
  --color-ok:             #3f6f57;
  --color-ok-rgb:         63, 111, 87;

  /* --- 3. short aliases used across the sheet -------------- */
  --bg:        var(--color-background);
  --card:      var(--color-surface);
  --warm:      var(--color-background-alt);
  --text:      var(--color-text);
  --text-2:    var(--color-text-secondary);
  --muted:     var(--color-text-muted);

  --accent:    var(--color-primary);
  --accent-rgb: var(--color-primary-rgb);
  --accent-sf: var(--color-accent-soft);

  --deep:      var(--color-deep);
  --blush:     var(--color-primary-soft);
  --mauve:     var(--color-primary-muted);

  --line:      var(--color-border);
  --line-2:    var(--color-border-strong);

  --r-xl: 26px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;

  --shell: 1400px;
  --gap: 18px;

  --shadow-sm: 0 1px 2px rgba(var(--color-shadow-rgb), .04);
  --shadow-md: 0 2px 6px rgba(var(--color-shadow-rgb), .05), 0 8px 30px -14px rgba(var(--color-shadow-rgb), .16);
  --shadow-lg: 0 4px 12px rgba(var(--color-shadow-rgb), .06), 0 30px 70px -34px rgba(var(--color-shadow-rgb), .26);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--ink);
}

/* The viewport is the only scroll container — never <body>.
   A body with a non-visible overflow becomes a scroll box of its own; since it
   is exactly as tall as its content it can never scroll, and overscroll-behavior
   then forbids the gesture from chaining out to the viewport. A trackpad latches
   onto that dead box and nothing moves. */
html {
  overflow: hidden;            /* locked until the intro is dismissed */
  overscroll-behavior: none;   /* no back-swipe / pull-to-refresh */
}

body {
  font-family: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* once the intro is done the document scrolls normally */
html.is-open, body.is-open {
  height: auto;
  background: var(--bg);
}

html.is-open {
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;

  /* swipe / wheel only — no scrollbar furniture */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html.is-open::-webkit-scrollbar { width: 0; height: 0; display: none; }

body.is-open { overflow: visible; }

::selection { background: var(--accent); color: var(--color-on-primary); }

/* readable by assistive tech and crawlers, invisible on screen */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   intro
   ============================================================ */

#intro {
  position: fixed;
  inset: 0;
  touch-action: none;
  user-select: none;
  cursor: grab;
  z-index: 60;
}

#intro.is-dragging { cursor: grabbing; }

.layer { position: absolute; inset: 0; display: grid; place-items: center; }
.layer--base { background: var(--ink); color: var(--paper); }

.layer--reveal {
  background: var(--paper);
  color: var(--ink);
  clip-path: circle(var(--r) at var(--cx) var(--cy));
  will-change: clip-path;
}

.hint {
  font-size: clamp(.85rem, 2.6vw, 1.05rem);
  letter-spacing: .42em;
  text-transform: uppercase;
  text-indent: .42em;
  font-weight: 400;
  white-space: nowrap;
  animation: breathe 3.2s ease-in-out infinite;
}

#intro.is-dragging .hint { animation: none; }

@keyframes breathe {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

#intro.is-done {
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease 60ms;
}

/* ============================================================
   boot — the beat between the reveal and the site
   ============================================================ */

/* Sits above the intro so it takes over the moment the circle has swallowed
   the screen. Its ground is the same paper the reveal ends on, so the handover
   is invisible: the black goes, the dot arrives, nothing flashes. */
#boot {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: grid;
  place-items: center;
  background: var(--color-background);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .5s ease, visibility 0s linear .5s;
}

#boot.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .18s ease, visibility 0s;
}

/* A hairline ring on a warm track with one coral arc turning through it.
   Nothing else — the point is to be quiet for two seconds, not to perform. */
.boot__ring {
  width: 28px; height: 28px;
  border-radius: 999px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  opacity: 0;
  transition: opacity .3s ease .06s;
}

#boot.is-on .boot__ring {
  opacity: 1;
  animation: bootSpin .75s linear infinite;
}

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

/* ============================================================
   landing shell
   ============================================================ */

#landing {
  position: relative;
  z-index: 1;
  background: var(--bg);
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease;
  padding-bottom: 26px;
}

body.is-open #landing { opacity: 1; visibility: visible; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(16px, 3.2vw, 34px);
}

section.shell { margin-bottom: var(--gap); }

.card {
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.card--white { background: var(--card); }
.card--warm  { background: var(--warm); }

/* ---------- type ---------- */

.eyebrow {
  color: var(--accent);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: -.005em;
  margin-bottom: .85rem;
}

.h2 {
  font-size: clamp(1.24rem, 1.62vw, 1.55rem);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -.022em;
}

.h2--sm { font-size: clamp(1.16rem, 1.5vw, 1.42rem); }

.body {
  font-size: .885rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  font-weight: 600;
  font-size: .87rem;
  color: var(--text);
  border-radius: 999px;
  position: relative;
  transition: transform .5s var(--ease), background-color .35s ease, color .35s ease, box-shadow .45s var(--ease);
  will-change: transform;
}

.btn span { position: relative; z-index: 1; }

.btn--solid {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: 1px solid var(--color-primary);
  padding: .72rem 1.35rem .72rem 1.5rem;
  box-shadow: 0 8px 30px -14px rgba(var(--color-primary-rgb), .45);
  overflow: hidden;
}

.btn--solid::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-primary-hover);
  opacity: 0;
  transition: opacity .4s ease;
}

.btn--solid:hover::before { opacity: 1; }
.btn--solid:hover { box-shadow: 0 12px 34px -14px rgba(var(--color-primary-rgb), .55); }

.btn--lg { padding: .95rem 1.5rem .95rem 1.75rem; font-size: .96rem; }

.btn--ghost {
  border: 1px solid var(--color-border-strong);
  padding: .45rem .5rem .45rem 1.1rem;
  background: transparent;
}

.btn--ghost:hover { background: var(--color-accent-soft); box-shadow: var(--shadow-sm); }

.btn--plain { color: var(--text-2); }
.btn--plain:hover { color: var(--text); }
.btn--sm { font-size: .82rem; gap: .6rem; }

/* icon pucks */
.ico {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 999px;
  flex: none;
  position: relative;
  z-index: 1;
  transition: transform .55s var(--ease), background-color .35s ease, border-color .35s ease;
}

.ico svg {
  width: 15px; height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .45s var(--ease);
}

.ico--solid  { background: var(--accent); color: var(--color-on-primary); }
.ico--light  { background: rgba(255, 255, 255, .22); color: var(--color-on-primary); }
.ico--outline{ border: 1px solid var(--line-2); color: var(--text); }
.ico--sm     { width: 24px; height: 24px; }
.ico--sm svg { width: 12px; height: 12px; }

.btn:hover .ico--outline { background: var(--accent); border-color: var(--accent); color: var(--color-on-primary); }
.btn:hover .ico--light   { background: rgba(255, 255, 255, .34); }
.btn:hover .ico svg      { transform: translateX(2px); }
.btn:active { transform: scale(.97); }

/* ============================================================
   header
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-block: 14px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color .4s ease, padding .4s var(--ease), background-color .4s ease;
}

.nav.is-stuck { padding-block: 9px; border-bottom-color: var(--line); }

.nav__in { display: flex; align-items: center; gap: 1.5rem; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  font-size: 1.14rem;
  letter-spacing: -.03em;
  text-decoration: none;
  color: var(--text);
  transition: transform .5s var(--ease);
  will-change: transform;
}

/* sized in em so the footer's smaller wordmark scales the mark with it */
.brand__mark {
  flex: none;
  display: block;
  width: auto;
  height: 1.62em;
}

/* the dot hangs off the wordmark, not off the whole lockup — otherwise the
   taller mark would drag it up above the cap height */
.brand__name {
  position: relative;
  padding-right: 9px;
}

.brand__dot {
  position: absolute;
  top: -1px; right: 0;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--accent);
  animation: dotPulse 2.6s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5); }
  50%      { transform: scale(1.18); box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0); }
}

.nav__links { margin-left: auto; display: flex; gap: 2.1rem; }

.nav__links a,
.foot__nav a,
.foot__social a:not(.foot__top) {
  text-decoration: none;
  color: var(--text-2);
  font-size: .85rem;
  font-weight: 600;
  overflow: hidden;
  display: inline-block;
  position: relative;
}

.nav__links a span,
.foot__nav a span,
.foot__social a span { display: inline-block; transition: transform .45s var(--ease), color .3s ease; }

.nav__links a::after,
.foot__nav a::after,
.foot__social a:not(.foot__top)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}

.nav__links a:hover::after,
.foot__nav a:hover::after,
.foot__social a:not(.foot__top):hover::after { transform: scaleX(1); transform-origin: left; }

.nav__links a:hover span,
.foot__nav a:hover span,
.foot__social a:hover span { color: var(--text); transform: translateY(-1px); }

.nav__cta { margin-left: -.95rem; }   /* pull back the 1.5rem row gap so the pair reads as one group */

/* the WhatsApp glyph is a solid mark, unlike the stroked arrows elsewhere */
.nav__wa .ico svg { fill: currentColor; stroke: none; }

/* burger */
.burger {
  display: none;
  place-content: center;
  place-items: center;
  width: 40px; height: 40px;   /* square, so border-radius makes a circle not an ellipse */
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  position: relative;
  margin-left: auto;
}

.burger span {
  position: absolute;
  left: 50%;
  margin-left: -9px;
  width: 18px; height: 1.6px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .45s var(--ease), opacity .3s ease;
}

/* offset symmetrically from the true centre instead of absolute tops */
.burger span:nth-child(1) { top: 50%; margin-top: -3.8px; }
.burger span:nth-child(2) { top: 50%; margin-top: 2.2px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.menu {
  display: none;
  flex-direction: column;
  gap: .25rem;
  padding: .4rem clamp(16px, 3.2vw, 34px) 1.1rem;
  overflow: hidden;
  max-height: 0;
  transition: max-height .55s var(--ease);
}

.menu a {
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -.02em;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

.menu__cta { color: var(--accent) !important; border-bottom: 0 !important; }
.nav.is-menu .menu { max-height: 520px; }
.nav.is-menu .menu a { opacity: 1; transform: none; }
.nav.is-menu .menu a:nth-child(1) { transition-delay: .06s; }
.nav.is-menu .menu a:nth-child(2) { transition-delay: .12s; }
.nav.is-menu .menu a:nth-child(3) { transition-delay: .18s; }
.nav.is-menu .menu a:nth-child(4) { transition-delay: .24s; }
.nav.is-menu .menu a:nth-child(5) { transition-delay: .30s; }
.nav.is-menu .menu a:nth-child(6) { transition-delay: .36s; }

/* ============================================================
   hero
   ============================================================ */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  align-items: start;
  column-gap: clamp(20px, 3vw, 48px);
  padding-top: clamp(28px, 4.5vw, 58px);
  padding-bottom: clamp(18px, 2.4vw, 30px);
}

.hero__copy { padding-top: clamp(6px, 2vw, 34px); position: relative; z-index: 2; }

.hero__title {
  font-size: clamp(2.3rem, 4.45vw, 4.05rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.042em;
  margin-bottom: 1.5rem;
}

.ln { display: block; overflow: hidden; padding-bottom: .06em; }
.ln > span { display: block; }
.fullstop { color: var(--accent); font-style: normal; }

.lede {
  font-size: .95rem;
  line-height: 1.68;
  color: var(--text-2);
  font-weight: 500;
  max-width: 27rem;
  margin-bottom: 1.8rem;
}

.hero__actions { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.8rem); flex-wrap: wrap; }

/* ---------- hero playground ---------- */

.play {
  position: relative;
  aspect-ratio: 630 / 500;
  margin-top: clamp(-10px, -1vw, 0px);
  z-index: 1;

  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(112% 86% at 50% -10%, var(--color-surface) 0%, var(--color-background-alt) 62%, var(--color-surface-warm) 100%);
  box-shadow: var(--shadow-md);
  overflow: hidden;

  /* the spheres are dragged, so the canvas must own the gesture */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.play__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.play__hint {
  position: absolute;
  left: 50%;
  bottom: clamp(9px, 1.5vw, 15px);
  transform: translateX(-50%);
  font-size: .72rem;
  letter-spacing: .045em;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .5s var(--ease);
}

/* out of the way while a circle is in the sling, and gone for good once fired */
.play.is-holding .play__hint,
.play.is-played .play__hint { opacity: 0; }

/* ---------- flow diagram (retired — markup lives in retired-flow-diagram.html) ---------- */

.flow {
  position: relative;
  width: 122%;
  margin-left: -22%;
  aspect-ratio: 630 / 400;
  margin-top: clamp(-10px, -1vw, 0px);
  z-index: 1;
}

.flow__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

.flow__trunks .trunk,
.flow__feeders path {
  stroke-dasharray: var(--len, 700);
  stroke-dashoffset: var(--len, 700);
}

.is-lit .flow__trunks .trunk,
.is-lit .flow__feeders path {
  animation: draw 1.5s var(--ease) forwards;
}

.is-lit .flow__trunks .trunk:nth-child(1) { animation-delay: .10s; }
.is-lit .flow__trunks .trunk:nth-child(2) { animation-delay: .20s; }
.is-lit .flow__trunks .trunk:nth-child(3) { animation-delay: .30s; }
.is-lit .flow__trunks .trunk:nth-child(4) { animation-delay: .40s; }
.is-lit .flow__trunks .trunk:nth-child(5) { animation-delay: .50s; }
.is-lit .flow__feeders path { animation-delay: .7s; animation-duration: 1s; }

@keyframes draw { to { stroke-dashoffset: 0; } }

.flow__pulses path {
  stroke-dasharray: 26 var(--len, 700);
  stroke-dashoffset: var(--len, 700);
  opacity: 0;
}

.is-lit .flow__pulses path {
  opacity: .95;
  animation: pulseRun 3.4s linear infinite;
}

.is-lit .flow__pulses path:nth-child(1) { animation-delay: 1.0s; }
.is-lit .flow__pulses path:nth-child(2) { animation-delay: 1.5s; }
.is-lit .flow__pulses path:nth-child(3) { animation-delay: 1.9s; }
.is-lit .flow__pulses path:nth-child(4) { animation-delay: 2.4s; }
.is-lit .flow__pulses path:nth-child(5) { animation-delay: 2.9s; }

@keyframes pulseRun { to { stroke-dashoffset: -26; } }

.flow__seeds circle { opacity: 0; }
.is-lit .flow__seeds circle { animation: popIn .5s var(--ease) forwards; }
.is-lit .flow__seeds circle:nth-child(1) { animation-delay: .85s; }
.is-lit .flow__seeds circle:nth-child(2) { animation-delay: .95s; }
.is-lit .flow__seeds circle:nth-child(3) { animation-delay: 1.05s; }
.is-lit .flow__seeds circle:nth-child(4) { animation-delay: 1.12s; }
.is-lit .flow__seeds circle:nth-child(5) { animation-delay: 1.2s; }
.is-lit .flow__seeds circle:nth-child(6) { animation-delay: 1.28s; }

@keyframes popIn { from { opacity: 0; } to { opacity: 1; } }

.flow__node, .flow__halo, .flow__ring { transform-origin: 537px 172px; }
.flow__node { opacity: 0; transform: scale(.2); }
.flow__halo { opacity: 0; }

.is-lit .flow__node {
  animation: nodeIn .8s var(--ease) .45s forwards, nodeBeat 3s ease-in-out 1.4s infinite;
}
.is-lit .flow__halo { animation: fadeIn .9s ease .6s forwards, haloBeat 3s ease-in-out 1.4s infinite; }

@keyframes nodeIn  { to { opacity: 1; transform: scale(1); } }
@keyframes fadeIn  { to { opacity: 1; } }
@keyframes nodeBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes haloBeat { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

.flow__ring { opacity: 0; }
.is-lit .flow__ring    { animation: ripple 3s var(--ease-io) 1.3s infinite; }
.is-lit .flow__ring--2 { animation-delay: 2.8s; }

@keyframes ripple {
  0%   { opacity: .6; transform: scale(.8); }
  70%  { opacity: 0;  transform: scale(3.4); }
  100% { opacity: 0;  transform: scale(3.4); }
}

.flow__spray circle { opacity: 0; transform-box: fill-box; transform-origin: center; }
.is-lit .flow__spray circle { animation: sprayFloat 4.4s ease-in-out infinite; }
.is-lit .flow__spray circle:nth-child(1) { animation-delay: 1.4s; }
.is-lit .flow__spray circle:nth-child(2) { animation-delay: 1.6s; }
.is-lit .flow__spray circle:nth-child(3) { animation-delay: 1.8s; }
.is-lit .flow__spray circle:nth-child(4) { animation-delay: 2.0s; }
.is-lit .flow__spray circle:nth-child(5) { animation-delay: 2.2s; }
.is-lit .flow__spray circle:nth-child(6) { animation-delay: 2.4s; }
.is-lit .flow__spray circle:nth-child(7) { animation-delay: 2.6s; }
.is-lit .flow__spray circle:nth-child(8) { animation-delay: 2.8s; }
.is-lit .flow__spray circle:nth-child(9) { animation-delay: 1.5s; }
.is-lit .flow__spray circle:nth-child(10){ animation-delay: 2.1s; }
.is-lit .flow__spray circle:nth-child(11){ animation-delay: 2.7s; }
.is-lit .flow__spray circle:nth-child(12){ animation-delay: 1.9s; }

@keyframes sprayFloat {
  0%   { opacity: 0;   transform: translateX(-6px) scale(.4); }
  25%  { opacity: .85; }
  70%  { opacity: .5;  }
  100% { opacity: 0;   transform: translateX(10px) scale(1.1); }
}

/* pills */
.chip {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%) translateY(14px);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  white-space: nowrap;
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .5rem 1rem .5rem .85rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: -.01em;
  box-shadow: 0 1px 2px rgba(var(--color-shadow-rgb), .04), 0 10px 24px -18px rgba(var(--color-shadow-rgb), .34);
  opacity: 0;
  transition: box-shadow .45s var(--ease), border-color .35s ease;
  cursor: default;
}

.chip i {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--accent);
  flex: none;
}

.is-lit .chip {
  animation: chipIn .9s var(--ease) forwards, chipBob 6s ease-in-out infinite;
  animation-delay: var(--d), calc(var(--d) + 1s);
}

@keyframes chipIn {
  from { opacity: 0; transform: translate(-50%, -50%) translateY(16px) scale(.94); }
  to   { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); }
}

@keyframes chipBob {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-6px); }
}

.chip:hover {
  border-color: rgba(var(--accent-rgb), .45);
  box-shadow: 0 2px 6px rgba(var(--color-shadow-rgb), .05), 0 16px 30px -18px rgba(var(--accent-rgb), .7);
}

/* ---------- trust bar ---------- */

.trust { grid-column: 1 / -1; margin-top: clamp(4px, 1.5vw, 18px); }

/* the pull quote that replaced the client logo row */
.quote {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  max-width: 44rem;
  margin: 0;
}

.quote__mark {
  flex: none;
  width: 17px; height: 17px;
  margin-top: .3em;
  fill: var(--color-primary);
}

.quote p {
  font-size: clamp(.95rem, 1.3vw, 1.14rem);
  line-height: 1.52;
  font-weight: 600;
  letter-spacing: -.018em;
  color: var(--color-text);
}

.quote em { font-style: normal; color: var(--color-text-secondary); }

.trust__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.scroller {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: var(--color-text-secondary);
  font-size: .78rem;
  font-weight: 600;
  transition: color .35s ease, transform .5s var(--ease);
  will-change: transform;
}

.scroller:hover { color: var(--text); }
.scroller .ico svg { animation: nudge 2.2s ease-in-out infinite; }

@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* ============================================================
   services
   ============================================================ */

.svc {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 3.05fr);
  gap: clamp(20px, 2.6vw, 40px);
  padding: clamp(24px, 3vw, 40px) clamp(20px, 2.6vw, 36px);
}

.svc__head { display: flex; flex-direction: column; align-items: flex-start; }
.svc__head .h2 { margin-bottom: auto; padding-bottom: 1.6rem; }

.svc__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.svc__item {
  padding: 0 clamp(10px, 1.15vw, 19px);
  border-left: 1px solid var(--line);
  transition: transform .55s var(--ease);
}

.svc__item:first-child { border-left: 0; padding-left: 0; }
.svc__item:hover { transform: translateY(-4px); }

.bubble {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 999px;
  background: var(--color-surface-warm);
  color: var(--color-primary);
  margin-bottom: 1.4rem;
  transition: background-color .4s ease, color .4s ease, transform .55s var(--ease);
}

.bubble svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.bubble--sm { width: 36px; height: 36px; margin-bottom: 0; }
.bubble--sm svg { width: 16px; height: 16px; }

.svc__item:hover .bubble,
.stat:hover .bubble { background: var(--accent); color: var(--color-on-primary); transform: rotate(-8deg) scale(1.06); }

.svc__item h3 {
  font-size: .93rem;
  font-weight: 700;
  letter-spacing: -.015em;
  margin-bottom: .85rem;
}

.svc__item p { font-size: .8rem; line-height: 1.68; color: var(--color-text-secondary); font-weight: 500; }

/* ============================================================
   work
   ============================================================ */

.work {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 2.14fr) minmax(0, .76fr);
  gap: clamp(16px, 2vw, 26px);
  padding: clamp(22px, 2.6vw, 34px) clamp(20px, 2.4vw, 30px);
  align-items: start;
}

.work__copy { display: flex; flex-direction: column; align-items: flex-start; position: relative; padding-top: .4rem; }
.work__copy .h2 { margin-bottom: 1rem; }
.work__copy .body { margin-bottom: 1.8rem; max-width: 20rem; }

.work__deco { width: 108%; margin-top: auto; margin-left: -6%; opacity: .95; color: var(--accent); }
.work__dots circle, .cta__dots circle { animation: twinkle 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.work__dots circle:nth-child(2n) { animation-delay: .7s; }
.work__dots circle:nth-child(3n) { animation-delay: 1.4s; }
.cta__dots circle:nth-child(2n)  { animation-delay: .9s; }
.cta__dots circle:nth-child(3n)  { animation-delay: 1.8s; }

@keyframes twinkle {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.25); }
}

/* browser mockup */
.mock {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  transform-style: preserve-3d;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
  will-change: transform;
}

.mock:hover { box-shadow: var(--shadow-lg); }

.mock__bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .8rem;
  background: var(--color-background);
  border-bottom: 1px solid var(--line);
}

.mock__dots { display: flex; gap: 5px; }
.mock__dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--color-border-strong); }
.mock__dots i:nth-child(1) { background: var(--color-primary-muted); }

.mock__url {
  margin-inline: auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .2rem .8rem;
  font-size: .64rem;
  color: var(--muted);
  font-weight: 500;
  max-width: 70%;
}

.mock__url b {
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock__url svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }

/* showcase */
.show { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px); }

.show__screen {
  position: relative;
  aspect-ratio: 1280 / 663;
  background: var(--color-background);
  overflow: hidden;
}

.show__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transform: scale(1.028);
  transition: opacity .7s var(--ease), transform 1.1s var(--ease);
}

.show__img.is-on { opacity: 1; transform: none; }

.show__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(12px, 1.6vw, 22px);
  padding-inline: 2px;
}

.show__text { min-width: 0; }

.show__name {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: .4rem;
}

.show__desc {
  font-size: .82rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 32rem;
  font-weight: 500;
}

.show__act { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 16px); flex: none; }
.show__link { flex: none; white-space: nowrap; }

.show__nav { display: flex; align-items: center; gap: 8px; }

.show__count { font-size: .7rem; font-weight: 600; color: var(--muted); letter-spacing: .04em; min-width: 3.4rem; text-align: center; }
.show__count b { color: var(--text); font-weight: 700; }

.show__note {
  flex-basis: 100%;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: -.2rem;
}

.show__note[hidden] { display: none; }

.show__note::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--accent);
  flex: none;
}

.rnd {
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .5s var(--ease);
}

.rnd svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
.rnd:hover { background: var(--accent); border-color: var(--accent); color: var(--color-on-primary); }
.rnd[data-show-next]:hover svg { transform: translateX(2px); }
.rnd[data-show-prev]:hover svg { transform: translateX(-2px); }
.rnd:active { transform: scale(.93); }

/* live / demo tag */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  border-radius: 999px;
  padding: .18rem .5rem .18rem .44rem;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.tag::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}

.tag--live { color: var(--deep); background: var(--blush); }
.tag--live::before { background: var(--accent); animation: pip 2.4s ease-in-out infinite; }
.tag--demo { color: var(--color-text-secondary); background: rgba(148, 139, 134, .2); }
.tag--demo::before { background: var(--color-text-muted); }

@keyframes pip {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5); }
  60%      { opacity: .55; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0); }
}

/* project picker */
.stack { list-style: none; display: grid; gap: clamp(8px, .9vw, 11px); align-content: start; }

.proj {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 200 / 84;
  cursor: pointer;
  isolation: isolate;
  text-align: left;
  font: inherit;
  color: var(--color-on-primary);
  background: var(--color-text);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
  will-change: transform;
}

.proj__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  transition: transform 1.1s var(--ease), filter .6s ease;
}

.proj__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  filter: brightness(.82) saturate(1.02);
  transition: filter .5s ease;
}

.proj:hover .proj__art img,
.proj.is-on .proj__art img { filter: none; }

.proj::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(15, 11, 10, .1) 0%, rgba(15, 11, 10, .5) 46%, rgba(15, 11, 10, .92) 100%);
  transition: opacity .5s ease;
}

.proj:hover { transform: translateY(-3px) scale(1.012); box-shadow: var(--shadow-md); }
.proj:hover .proj__art { transform: scale(1.07); }
.proj:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.proj.is-on { box-shadow: 0 0 0 2px var(--accent), var(--shadow-md); }
.proj.is-on .proj__go { opacity: 1; transform: none; background: var(--accent); }

.proj__tag {
  position: absolute;
  left: clamp(9px, 1.1vw, 12px);
  top: clamp(8px, 1vw, 11px);
  z-index: 1;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
}

.proj__meta {
  position: absolute;
  left: clamp(10px, 1.4vw, 16px);
  right: 44px;
  bottom: clamp(9px, 1.2vw, 14px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--color-on-primary);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
  transition: transform .55s var(--ease);
}

.proj:hover .proj__meta { transform: translateY(-2px); }
.proj__meta b { font-size: .82rem; font-weight: 700; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj__meta i { font-style: normal; font-size: .64rem; font-weight: 500; opacity: .78; }

.proj__go {
  position: absolute;
  top: clamp(8px, 1.2vw, 12px);
  right: clamp(8px, 1.2vw, 12px);
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
  color: var(--color-on-primary);
  opacity: 0;
  transform: translate(4px, -4px) scale(.8);
  transition: opacity .45s ease, transform .55s var(--ease), background-color .35s ease;
}

.proj:hover .proj__go { opacity: 1; transform: none; background: var(--accent); }
.proj__go svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   process
   ============================================================ */

.proc {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 3.05fr);
  gap: clamp(20px, 3vw, 46px);
  padding: clamp(24px, 3vw, 38px) clamp(20px, 2.6vw, 36px);
}

.proc__copy .h2 { margin-bottom: 1rem; }
.proc__copy .body { max-width: 18rem; font-size: .8rem; }

/* --p is the scroll progress of the rail (0 -> 1), written by landing.js.
   ::before is the dotted track, ::after the accent line drawn over it.

   --rail-a / --rail-z / --rail-cross are measured from the real circles by
   landing.js, so the track starts and stops dead on the first and last one
   whatever the column width works out to. The fallbacks below are the same
   numbers the grid produces, for the frame before the script has run. */
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 20px);
  position: relative;
  padding-top: 4px;
  --p: 0;
}

.steps::before,
.steps::after {
  content: "";
  position: absolute;
  left: var(--rail-a, 20px);
  right: var(--rail-z, 20px);
  top: var(--rail-cross, 24px);
  height: 1px;
  transform-origin: left;
}

.steps::before {
  background: repeating-linear-gradient(90deg, var(--line-2) 0 5px, transparent 5px 11px);
}

/* the drawn line — the transition is what makes the fill trail the scroll */
.steps::after {
  background: var(--accent);
  transform: scaleX(var(--p));
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

.step { position: relative; padding-right: 6px; }

.step__num {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--card);
  border: 1.5px solid var(--color-border-strong);
  color: var(--color-text-secondary);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
  transition:
    background-color .45s var(--ease),
    border-color .45s var(--ease),
    color .45s var(--ease),
    transform .55s var(--ease),
    box-shadow .5s ease;
}

/* the dot the line has just reached */
.step.is-on .step__num {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--color-on-primary);
  transform: scale(1.06);
  box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .12);
}

.step:hover .step__num { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .14); }

.step h3 {
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: -.015em;
  margin-bottom: .7rem;
  color: var(--color-text-secondary);
  transition: color .45s var(--ease);
}

.step.is-on h3 { color: var(--text); }
.step p { font-size: .76rem; line-height: 1.66; color: var(--color-text-secondary); font-weight: 500; }

/* little arrow markers along the rail */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 16.5px;
  right: -4px;
  width: 7px; height: 7px;
  border-top: 1.4px solid var(--accent);
  border-right: 1.4px solid var(--accent);
  transform: rotate(45deg) scale(0);
  transition: transform .5s var(--ease);
}

.step.is-on:not(:last-child)::after { transform: rotate(45deg) scale(1); }

/* ============================================================
   about
   ============================================================ */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(18px, 2.6vw, 34px);
  padding: clamp(20px, 2.4vw, 28px);
  align-items: start;
}

.about__copy { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(6px, 1.4vw, 18px) 0 0 clamp(6px, 1vw, 14px); }
.about__copy .h2 { margin-bottom: 1rem; max-width: 22rem; }
.about__copy .body { font-size: .82rem; max-width: 34rem; }
.about__copy .body + .body { margin-top: .85rem; }
.about__copy .btn { margin-top: 1.5rem; }

/* how we work — pulled from the guiding principles on the board */
.ways {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 18px) clamp(14px, 2vw, 26px);
  margin-top: clamp(18px, 2.2vw, 26px);
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--color-border-soft);
  width: 100%;
}

.way { display: flex; flex-direction: column; gap: .3rem; }

.way b {
  position: relative;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: -.01em;
  padding-left: 1rem;
}

.way b::before {
  content: "";
  position: absolute;
  left: 0;
  top: .48em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.way span { font-size: .74rem; line-height: 1.55; color: var(--color-text-secondary); padding-left: 1rem; }

/* the whiteboard photo */
.about__shot {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--warm);
  box-shadow: var(--shadow-md);
  align-self: start;
}

.about__board {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1448 / 1086;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
  will-change: transform;
}

.about__shot:hover .about__board { transform: scale(1.035); }

.stats {
  list-style: none;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px) clamp(10px, 1.6vw, 20px);
  align-content: center;
  margin-top: clamp(6px, 1vw, 12px);
  padding: clamp(18px, 2.2vw, 26px) clamp(4px, 1vw, 14px) clamp(4px, .8vw, 10px);
  border-top: 1px solid var(--color-border-soft);
}

.stat {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: .85rem;
  align-items: center;
  transition: transform .5s var(--ease);
}

.stat:hover { transform: translateY(-3px); }
.stat .bubble { grid-row: 1 / 3; }
.stat b { font-size: clamp(1.15rem, 1.7vw, 1.42rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.stat__label { font-style: normal; font-size: .74rem; color: var(--color-text-secondary); font-weight: 500; }

/* ============================================================
   reviews
   ============================================================ */

.revs {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(22px, 2.8vw, 34px) clamp(20px, 2.6vw, 34px);
}

.revs::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 140% at 12% 50%, rgba(var(--accent-rgb), .06) 0%, rgba(var(--accent-rgb), 0) 60%);
  pointer-events: none;
}

.revs__head { position: relative; z-index: 1; text-align: center; }
.revs__head .eyebrow { margin-bottom: .55rem; }

.stars { display: inline-flex; gap: 2px; color: var(--accent); }
.stars svg { width: 13px; height: 13px; fill: currentColor; }

/* the deck — the live card sits centre, its neighbours peek in from the sides */
.revs__view {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: min(880px, 100%);
  margin-inline: auto;
  padding: 10px 0 14px;
  touch-action: pan-y;
  cursor: grab;
}

.revs__view:active { cursor: grabbing; }

.revs__track { list-style: none; display: grid; }

.rev {
  grid-area: 1 / 1;
  justify-self: center;
  display: flex;
  width: min(620px, 78%);
  transition: transform .7s var(--ease), opacity .6s var(--ease);
  will-change: transform;
}

.rev.is-on   { transform: none; opacity: 1; z-index: 3; }
.rev.is-prev { transform: translateX(-58%) scale(.92) rotate(-2deg); opacity: .55; z-index: 2; }
.rev.is-next { transform: translateX(58%) scale(.92) rotate(2deg);   opacity: .55; z-index: 2; }
.rev.is-far  { transform: scale(.84); opacity: 0; z-index: 1; pointer-events: none; }

.rev.is-prev .rev__card, .rev.is-next .rev__card { cursor: pointer; }
.rev.is-prev:hover, .rev.is-next:hover { opacity: .78; }

/* the review card */
.rev__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(.75rem, 1.2vw, 1rem);
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 2.2vw, 26px);
  box-shadow: var(--shadow-sm);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
  will-change: transform;
}

.rev.is-on .rev__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.rev__text {
  font-size: clamp(.9rem, 1.15vw, 1rem);
  line-height: 1.7;
  font-weight: 500;
  color: var(--text-2);
}

.rev__who { display: flex; align-items: center; gap: .75rem; margin-top: auto; }

.ava {
  position: relative;
  flex: none;
  width: 38px; height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.ava b { font-size: .78rem; font-weight: 800; letter-spacing: -.01em; color: var(--color-on-primary); position: relative; z-index: 1; }

.ava::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 70% at 30% 25%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 60%);
}

.ava--1 { background: linear-gradient(140deg, #9f302c, #4f1a1b); }
.ava--2 { background: linear-gradient(140deg, #c2554c, #6f2628); }
.ava--3 { background: linear-gradient(140deg, #a2968f, #4c4340); }
.ava--4 { background: linear-gradient(140deg, #7d635c, #2a201d); }

.rev__id { display: flex; flex-direction: column; gap: 2px; }
.rev__id b { font-size: .82rem; font-weight: 700; letter-spacing: -.012em; }
.rev__id i { font-style: normal; font-size: .7rem; font-weight: 500; color: var(--muted); }

/* controls — avatar icons pick a review, arrows step through */
.revs__ctrl {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.7rem, 1.4vw, 1.2rem);
}

.faces { list-style: none; display: flex; align-items: center; gap: 8px; }

.face {
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .5s var(--ease);
}

.face .ava { width: 34px; height: 34px; opacity: .45; transition: opacity .4s ease, box-shadow .4s ease; }
.face .ava b { font-size: .66rem; }
.face:hover { transform: translateY(-2px); }
.face:hover .ava { opacity: .8; }
.face.is-on .ava { opacity: 1; box-shadow: 0 0 0 2px var(--warm), 0 0 0 3.5px var(--accent); }
.face:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.revs__nav { display: flex; align-items: center; gap: .55rem; }

.revs__btn {
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .5s var(--ease);
  will-change: transform;
}

.revs__btn > svg:not(.revs__prog) { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
.revs__btn:hover { background: var(--accent); border-color: var(--accent); color: var(--color-on-primary); }
.revs__btn:hover > svg:not(.revs__prog) { transform: translateX(2px); }
.revs__btn[data-rev-prev]:hover > svg { transform: translateX(-2px); }
.revs__btn:active { transform: scale(.93); }

.revs__prog {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  transform: rotate(-90deg);
  pointer-events: none;
}

.revs__prog circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-dasharray: 129;
  stroke-dashoffset: 129;
}

.revs.is-playing .revs__prog circle { animation: ring 7s linear infinite; }
.revs__btn--next:hover .revs__prog circle { stroke: var(--color-on-primary); }

@keyframes ring { from { stroke-dashoffset: 129; } to { stroke-dashoffset: 0; } }

/* ============================================================
   cta
   ============================================================ */

.cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(26px, 3.2vw, 42px) clamp(22px, 2.8vw, 40px);
}

.cta__copy { position: relative; z-index: 2; }
.cta__copy .h2 { margin-bottom: .6rem; }
.cta__copy .body { font-size: .82rem; }

.cta__deco {
  color: var(--accent);
  position: absolute;
  left: 30%;
  right: 0;
  top: 50%;
  width: 74%;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
}

.cta .btn { position: relative; z-index: 2; justify-self: start; }

/* ============================================================
   enquiry — studio details + brief form
   ============================================================ */

.reach {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.28fr);
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(24px, 3vw, 38px) clamp(20px, 2.6vw, 34px);
  align-items: start;
}

.reach::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(52% 120% at 88% 8%, rgba(var(--accent-rgb), .07) 0%, rgba(var(--accent-rgb), 0) 62%);
  pointer-events: none;
}

.reach__info { position: relative; z-index: 1; }
.reach__info .h2 { margin-bottom: .7rem; }
.reach__info .body { margin-bottom: 1.6rem; max-width: 24rem; }

.info { list-style: none; display: grid; gap: clamp(10px, 1.2vw, 14px); margin-bottom: 1.5rem; }

.info li {
  display: flex;
  align-items: center;
  gap: .8rem;
  border-radius: var(--r-sm);
  transition: background-color .3s ease, transform .45s var(--ease);
}

/* rows that actually go somewhere get the affordance; Hours does not */
.info__row:has(a) { cursor: pointer; position: relative; margin-inline: -.55rem; padding: .3rem .55rem; }
.info__row:has(a):hover { background: var(--color-accent-soft); transform: translateX(2px); }

/* stretch the link over the row so the whole strip is clickable, not just the text */
.info__row a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.info__row:has(a):focus-within { background: var(--color-accent-soft); }
.info__row a:focus-visible::after { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.info__ico {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--line);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease), background-color .35s ease, color .35s ease;
}

.info__ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* the WhatsApp mark only reads at this size as a solid glyph */
.info__ico--wa svg { fill: currentColor; stroke: none; width: 16px; height: 16px; }
.info li:hover .info__ico { transform: translateY(-2px) rotate(-6deg); background: var(--accent); color: var(--color-on-primary); }

.info__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.info__txt i { font-style: normal; font-size: .64rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.info__txt a, .info__txt b { font-size: .85rem; font-weight: 600; letter-spacing: -.012em; color: var(--text); text-decoration: none; }
.info__txt a { transition: color .3s ease; }
.info__txt a:hover { color: var(--accent); }

.reach__social { display: flex; flex-wrap: wrap; gap: .5rem; }

.reach__social a {
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: .4rem .9rem;
  font-size: .74rem;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  background: transparent;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .5s var(--ease);
  will-change: transform;
}

.reach__social a:hover { background: var(--color-surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* form */
.form {
  position: relative;
  z-index: 1;
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 2.2vw, 26px);
  box-shadow: var(--shadow-md);
}

.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 16px); }

.field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.field--wide { grid-column: 1 / -1; }

.field__lab {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-2);
}

.field__lab em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: .7rem; }

.field__in {
  width: 100%;
  font: inherit;
  font-size: .86rem;
  font-weight: 500;
  color: var(--text);
  background: var(--warm);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .7rem .85rem;
  transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
  appearance: none;
}

.field__in::placeholder { color: var(--color-text-faint); font-weight: 500; }
.field__in:hover { border-color: var(--line-2); }

.field__in:focus {
  outline: none;
  background: var(--color-surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .13);
}

/* only flag a field the visitor actually typed something wrong into —
   an empty required field should not turn red the moment the form resets */
.field__in:not(:placeholder-shown):user-invalid { border-color: var(--color-deep-red); }

.field__area { resize: vertical; min-height: 6.5rem; line-height: 1.6; }

.field__sel { position: relative; display: block; }
.field__sel select { cursor: pointer; padding-right: 2.2rem; }

.field__sel svg {
  position: absolute;
  right: .8rem; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.field__chips { display: flex; flex-wrap: wrap; gap: 6px; }

.pill {
  border: 1px solid var(--line-2);
  background: var(--warm);
  border-radius: 999px;
  padding: .46rem .85rem;
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .45s var(--ease);
}

.pill:hover { border-color: var(--accent); color: var(--text); }
.pill.is-on { background: var(--accent); border-color: var(--accent); color: var(--color-on-primary); box-shadow: 0 8px 22px -14px rgba(var(--color-primary-rgb), .5); }
.pill:active { transform: scale(.96); }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.2rem;
  margin-top: clamp(14px, 1.8vw, 20px);
}

.form__foot .btn { cursor: pointer; border: 0; }

/* the submit button carries its own state, so the outcome is visible right
   where the click happened rather than only in the strip below */
.btn.is-busy { cursor: progress; opacity: .78; }
.btn.is-busy .ico svg { animation: btnSpin .9s linear infinite; }
.btn.is-done,
.btn.is-done:hover { background: var(--color-ok); border-color: var(--color-ok); }
.btn.is-done::before { opacity: 0; }

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

@media (prefers-reduced-motion: reduce) {
  .btn.is-busy .ico svg { animation: none; }
}

.form__note { font-size: .74rem; font-weight: 500; color: var(--muted); }
.form__note a { color: var(--text-2); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line-2); }
.form__note a:hover { color: var(--accent); border-color: var(--accent); }

.form__msg {
  margin-top: 1rem;
  border-radius: var(--r-sm);
  padding: .7rem .9rem;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.5;
  background: var(--color-accent-soft);
  color: var(--color-deep-red);
  border: 1px solid rgba(var(--color-primary-rgb), .28);
  opacity: 1;
  transition: opacity .5s ease;
}

/* the success note fades itself out a few seconds after a send */
.form__msg.is-fading { opacity: 0; }

.form__msg[hidden] { display: none; }
/* success keeps a green so it never reads as an error next to the coral */
.form__msg.is-ok { background: rgba(var(--color-ok-rgb), .1); color: var(--color-ok); border-color: rgba(var(--color-ok-rgb), .22); }
.form.is-sending { opacity: .72; pointer-events: none; }

/* ============================================================
   brief modal
   ============================================================ */

.modal {
  border: 0;
  padding: 0;
  margin: auto;              /* the global reset drops the dialog's centring */
  background: transparent;
  max-width: min(680px, calc(100vw - 24px));
  width: 100%;
  max-height: calc(100dvh - 32px);
  overflow: visible;
  color: var(--text);
}

.modal::backdrop { background: rgba(35, 22, 18, .52); backdrop-filter: blur(3px); }

/* freeze the page behind an open dialog */
html:has(.modal[open]) { overflow: hidden; }

.modal__panel {
  position: relative;
  background: var(--warm);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(22px, 3vw, 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal[open] .modal__panel { animation: modalIn .5s var(--ease) both; }

@keyframes modalIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.modal .eyebrow { margin-bottom: .5rem; }
.modal__body { margin: .6rem 0 1.2rem; font-size: .82rem; }
.modal .form { box-shadow: none; }

.modal__x {
  position: absolute;
  top: clamp(14px, 1.8vw, 18px);
  right: clamp(14px, 1.8vw, 18px);
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--color-surface);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .5s var(--ease);
}

.modal__x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.modal__x:hover { background: var(--accent); border-color: var(--accent); color: var(--color-on-primary); transform: rotate(90deg); }

/* ============================================================
   footer
   ============================================================ */

.foot {
  display: flex;
  flex-wrap: wrap;          /* so the legal line takes a row of its own */
  align-items: center;
  gap: 1.5rem;
  padding-block: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--line);
  margin-top: 8px;
}

.brand--sm { font-size: .92rem; }
.foot__nav { margin-inline: auto; display: flex; gap: 2rem; }
.foot__social { display: flex; align-items: center; gap: 1.5rem; }

.foot__legal {
  width: 100%;
  order: 4;
  margin: 0;
  padding-top: .9rem;
  border-top: 1px solid var(--color-border-soft);
  font-size: .72rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.foot__top {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--text);
  text-decoration: none;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .5s var(--ease);
  will-change: transform;
}

.foot__top svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
.foot__top:hover { background: var(--accent); border-color: var(--accent); color: var(--color-on-primary); }
.foot__top:hover svg { transform: translateY(-2px); }

/* ============================================================
   reveal-on-scroll primitives
   ============================================================ */

[data-anim="up"] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .9s var(--ease);
}

[data-anim="mask"] {
  transform: translateY(105%);
  transition: transform 1s var(--ease);
}

[data-anim="card"] {
  opacity: 0;
  transform: translateY(28px) scale(.985);
  transition: opacity .9s var(--ease), transform 1s var(--ease);
}

.is-in[data-anim="up"],
.is-in[data-anim="card"] { opacity: 1; transform: none; }
.is-in[data-anim="mask"] { transform: none; }

[data-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .9s var(--ease);
}

[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger].is-in > *:nth-child(1) { transition-delay: .05s; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: .14s; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: .23s; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: .32s; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: .41s; }

/* ============================================================
   responsive
   ============================================================ */

@media (max-width: 1180px) {
  .work { grid-template-columns: minmax(0, .9fr) minmax(0, 1.9fr); }
  .work__copy { grid-row: span 1; }
  .stack { grid-column: 1 / -1; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; row-gap: clamp(14px, 3vw, 28px); }
  .hero__copy { max-width: none; }
  .lede { max-width: 34rem; }
  .flow { width: 100%; margin-left: 0; max-width: 660px; margin-inline: auto; }
  .play { max-width: 660px; margin-inline: auto; width: 100%; }
  .svc { grid-template-columns: 1fr; }
  .svc__head .h2 { padding-bottom: 1.1rem; }
  .svc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px) 0; }
  .svc__item:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .proc { grid-template-columns: 1fr; }
  .proc__copy .body { max-width: 34rem; }
  .reach { grid-template-columns: 1fr; }
  .reach__info .body { max-width: none; }
}

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .burger { display: grid; margin-left: 0; }

  /* the pill stays a pill on a phone — it just gets tighter, and the row
     closes up so brand + pill + burger all fit inside 390px */
  .nav__in { gap: .6rem; }
  .nav__wa { margin-left: auto; padding: .35rem .38rem .35rem .85rem; gap: .5rem; font-size: .8rem; }
  .nav__wa .ico { width: 26px; height: 26px; }
  .nav__wa .ico svg { width: 13px; height: 13px; }
  .brand { font-size: 1.02rem; }
  .menu { display: flex; }

  .work { grid-template-columns: 1fr; }
  .work__deco { display: none; }
  .work__copy .body { max-width: none; }
  /* Stacked, a full-width thumbnail just repeats the preview above it. Lay the
     picker out as one scrollable row instead: small cards, swipe sideways. */
  .stack {
    min-width: 0;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: clamp(178px, 58vw, 260px);
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .stack::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .stack > li { scroll-snap-align: start; }
  .stack .proj { aspect-ratio: 200 / 84; }

  .steps { grid-template-columns: 1fr; gap: 0; padding-left: 4px; }
  .steps::before,
  .steps::after {
    left: var(--rail-cross, 24px); right: auto;
    top: var(--rail-a, 24px); bottom: var(--rail-z, 24px);
    height: auto; width: 1px;
    transform-origin: top;
  }
  .steps::before {
    background: repeating-linear-gradient(180deg, var(--line-2) 0 5px, transparent 5px 11px);
    transform: none;
  }
  .steps::after { transform: scaleY(var(--p)); }
  .step.is-on .step__num { transform: scale(1.04); }
  .step { display: grid; grid-template-columns: 40px 1fr; column-gap: 1.1rem; padding-bottom: 1.6rem; }
  .step__num { grid-row: 1 / 3; margin-bottom: 0; }
  .step:not(:last-child)::after { display: none; }

  .about { grid-template-columns: 1fr; }
  .about__copy { padding-left: 0; }
  .about__copy .h2 { max-width: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cta { grid-template-columns: 1fr; }
  .cta__deco { display: none; }

  .foot { justify-content: space-between; }
  /* the burger menu already carries these links on a phone — a second copy in
     the footer is just a wall of repeats */
  .foot__nav { display: none; }
  .foot__legal { padding-top: .8rem; font-size: .68rem; }
}

@media (max-width: 720px) {
  :root { --r-xl: 20px; --gap: 12px; }

  .hero { padding-top: clamp(10px, 2.4vw, 20px); }
  .hero__copy { padding-top: 0; }
  .hero__title { letter-spacing: -.035em; }
  .hero__actions { gap: 1rem; }
  .flow { aspect-ratio: 630 / 440; }
  .play { aspect-ratio: 630 / 570; }
  .play__hint { font-size: .68rem; }
  .chip { font-size: .68rem; padding: .38rem .7rem .38rem .6rem; gap: .4rem; }
  .chip i { width: 6px; height: 6px; }

  .trust__row { flex-direction: column; align-items: flex-start; gap: 1.2rem; }

  /* both of these read as slabs at full desktop padding on a narrow screen */
  .show__link,
  .work__copy .btn--solid {
    padding: .52rem .5rem .52rem .95rem;
    font-size: .8rem;
    gap: .45rem;
  }
  .show__link .ico,
  .work__copy .btn--solid .ico { width: 24px; height: 24px; }
  .show__link .ico svg,
  .work__copy .btn--solid .ico svg { width: 12px; height: 12px; }
  .logo { font-size: .92rem; }

  .svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
  .svc__item { border-left: 0; padding-left: 0; padding-right: 8px; }

  .revs__ctrl { flex-wrap: wrap; }
  .rev { width: 84%; }
  .rev.is-prev { transform: translateX(-58%) scale(.88) rotate(-2deg); opacity: .38; }
  .rev.is-next { transform: translateX(58%) scale(.88) rotate(2deg); opacity: .38; }
  .form__grid { grid-template-columns: 1fr; }

  .foot { gap: 1rem; }
  .foot__social { gap: 1.1rem; width: 100%; justify-content: space-between; }
}

@media (max-width: 520px) {
  .svc__grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .ways { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; align-items: flex-start; }
  .show__foot { flex-direction: column; align-items: flex-start; }
  .show__act { width: 100%; justify-content: space-between; }
  .show__link { flex: none; }
  .faces { gap: 6px; }
  .face .ava { width: 30px; height: 30px; }
  .rev { width: 90%; }
  .rev.is-prev { transform: translateX(-56%) scale(.86) rotate(-2deg); opacity: .3; }
  .rev.is-next { transform: translateX(56%) scale(.86) rotate(2deg); opacity: .3; }
  .form__foot .btn { width: 100%; justify-content: center; }
  .form__note { width: 100%; }
}

/* ============================================================
   reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .hint { animation: none; opacity: .8; }
  #boot.is-on .boot__ring { animation: bootFade 1.6s ease-in-out infinite; }
  @keyframes bootFade { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
  .form__msg { transition: none; }
  [data-anim], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  html.is-open, body.is-open { scroll-behavior: auto; }
}