/* ===========================================================================
   RIPPLE — Idea Matters, Ripple Identity System
   ---------------------------------------------------------------------------
   The page is a still surface. Everything that moves, you moved.

   COLOUR      55% Idea Paper · 25% Matter Black · 15% Ripple Blue · Coral for
               decisions only. Supporting colours used sparingly.
   TYPE        Inter for everything structural. EB Garamond italic for the
               brand line, pull quotes, and moments of reflection.
   MOTION      SEED (hold the dot) -> EXPAND (release with soft acceleration)
               -> SETTLE (resolve into the mark or the message).
               Gentle ease-out. Nothing loops. Restraint is the point.
   =========================================================================== */

:root {
    /* Brand colour system — exact values from the ripple identity. */
    --ink: #0B0D0E;
    --soft-ink: #202326;
    --paper: #F4F0E8;
    --white: #FFFFFF;
    --blue: #3157FF;
    --coral: #FF6A57;
    --lilac: #DDD8FF;
    --mist: #DDE4E8;
    --gray: #6E6E6A;
    --alert: #C2452F;   /* Signal Coral, darkened to pass AA as body text */
    --line: #D5D0C7;
    --line-dark: rgba(244, 240, 232, .16);

    /* Type scale — Headline 60/64, Section 32/36, Body 18/28, Caption 11/16. */
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --serif: "EB Garamond", Georgia, serif;
    --fs-display: clamp(2.6rem, 5.6vw, 5rem);
    --fs-headline: clamp(2.1rem, 4.1vw, 3.75rem);
    --fs-section: clamp(1.5rem, 2.1vw, 2rem);
    --fs-lead: clamp(1.2rem, 1.55vw, 1.5rem);
    --fs-body: clamp(1.0625rem, .35vw + 1rem, 1.125rem);
    --fs-caption: .6875rem;

    /* Motion identity. One impulse, one expansion, one settle. */
    --seed: 140ms;
    --expand: 520ms;
    --settle: 900ms;
    --ripple: 1400ms;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);
    --ease-in: cubic-bezier(.55, 0, 1, .45);

    /* Space. "Space is part of the idea." */
    --pad: clamp(1.35rem, 5vw, 6.5rem);
    --gap: clamp(3.5rem, 9vw, 9rem);
    --bleed: clamp(4.5rem, 9vw, 8.5rem);
    --radius: 22px;
}

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

/* ---------------------------------------------------------------- scroll --
   The native scrollbar restyled, not replaced. A JS-drawn bar would cost
   keyboard scrolling, OS scroll settings, and drag behaviour for the sake of
   a few pixels. `scrollbar-gutter` reserves the space on every page, so
   moving between a short page and a long one never shifts the layout.

   Ink on paper at rest, Ripple Blue while you are actually dragging it. */
html {
    scrollbar-color: color-mix(in srgb, var(--ink) 26%, transparent) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}
::-webkit-scrollbar { height: 12px; width: 12px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ink) 26%, transparent);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 999px;
    transition: background var(--seed) linear;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 48%, transparent); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--blue); background-clip: padding-box; }

html {
    -webkit-text-size-adjust: 100%;
    background: var(--paper);
    scroll-behavior: smooth;
}

body {
    background: transparent;
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--fs-body);
    font-synthesis-weight: none;
    letter-spacing: -.011em;
    line-height: 1.556;
    margin: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.rp-locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; letter-spacing: inherit; }
button { color: inherit; }
canvas { display: block; }
img, svg { max-width: 100%; }
::selection { background: var(--blue); color: var(--paper); }
:focus-visible { border-radius: 4px; outline: 2px solid var(--blue); outline-offset: 4px; }

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-headline); line-height: 1.066; }
h2 { font-size: var(--fs-headline); line-height: 1.08; }
h3 { font-size: var(--fs-section); line-height: 1.125; }
p { margin: 0; text-wrap: pretty; }

/* Editorial accent — warmth and reflection, never structure. */
em, .rp-serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.005em; }

.rp-caption {
    color: var(--gray);
    font-size: var(--fs-caption);
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.45;
    margin: 0;
    text-transform: uppercase;
}
.rp-caption--blue { color: var(--blue); }
.rp-caption--coral { align-items: center; color: var(--soft-ink); display: inline-flex; gap: .5rem; }
.rp-caption--coral::before { background: var(--coral); border-radius: 50%; content: ""; flex: none; height: 7px; width: 7px; }

.rp-lead { color: var(--soft-ink); font-size: var(--fs-lead); line-height: 1.42; letter-spacing: -.018em; }
.rp-muted { color: var(--gray); }
.rp-pad { padding-inline: var(--pad); }
.rp-section { padding-block: var(--bleed); }
.rp-rule { background: var(--line); border: 0; height: 1px; margin: 0; }
.rp-skip { background: var(--ink); color: var(--paper); left: 1rem; padding: .8rem 1.1rem; position: fixed; top: -6rem; z-index: 300; }
.rp-skip:focus { top: 1rem; }

/* ---------------------------------------------------------------- surface --
   The water. A fixed canvas behind every page; ripples are injected by
   pointer, click, scroll impulse, and section arrival, then decay to nothing. */
.rp-surface { height: 100%; inset: 0; pointer-events: none; position: fixed; width: 100%; z-index: -2; }
.rp-grain {
    inset: 0; mix-blend-mode: multiply; opacity: .5; pointer-events: none;
    position: fixed; z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------- cursor --
   The brand dot follows you. The ring only appears when something can be
   acted on — the mark's own logic, applied to the pointer. */
.rp-dot {
    height: 56px; left: 0; opacity: 0; pointer-events: none; position: fixed; top: 0;
    transform: translate3d(calc(var(--px, -100px) - 28px), calc(var(--py, -100px) - 28px), 0);
    transition: opacity 200ms linear; width: 56px; z-index: 260;
}
.rp-dot.is-on { opacity: 1; }
.rp-dot i {
    background: var(--coral); border-radius: 50%; height: 9px; left: 50%; position: absolute;
    top: 50%; transform: translate(-50%, -50%) scale(var(--ds, 1)); transition: transform var(--expand) var(--ease-out); width: 9px;
}
.rp-dot svg { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.rp-dot circle {
    fill: none; stroke: var(--blue); stroke-width: 2;
    transform: scale(var(--rs, 0)); transform-origin: center;
    transition: transform var(--expand) var(--ease-out), opacity var(--expand) var(--ease-out);
    opacity: var(--ro, 0);
}
.rp-dot.is-hot { --ds: .55; --rs: 1; --ro: 1; }

.rp-progress { height: 2px; inset: 0 0 auto; pointer-events: none; position: fixed; z-index: 250; }
.rp-progress span { background: var(--blue); display: block; height: 100%; transform: scaleX(var(--progress, 0)); transform-origin: left; }

/* ------------------------------------------------------------- transition --
   Leaving a page is one more ripple: it expands from where you clicked. */
.rp-transit {
    background: var(--blue); clip-path: circle(0% at var(--tx, 50%) var(--ty, 50%));
    inset: 0; pointer-events: none; position: fixed;
    transition: clip-path 620ms var(--ease-soft); z-index: 240;
}
html.rp-leaving .rp-transit { clip-path: circle(142% at var(--tx, 50%) var(--ty, 50%)); }
html.rp-arriving .rp-transit { clip-path: circle(142% at var(--tx, 50%) var(--ty, 50%)); transition: none; }
html.rp-arriving.rp-open .rp-transit { clip-path: circle(0% at var(--tx, 50%) var(--ty, 50%)); transition: clip-path 720ms var(--ease-out); }

/* ------------------------------------------------------------------- nav -- */
.rp-nav {
    align-items: center; display: flex; gap: clamp(1rem, 3vw, 2.75rem);
    inset: 0 0 auto; padding: 1.15rem var(--pad); position: fixed; z-index: 200;
    transition: background var(--expand) var(--ease-soft), box-shadow var(--expand) var(--ease-soft), padding var(--expand) var(--ease-soft);
}
body.rp-scrolled .rp-nav { backdrop-filter: blur(14px) saturate(1.4); background: color-mix(in srgb, var(--paper) 82%, transparent); box-shadow: 0 1px 0 var(--line); padding-block: .8rem; }
body.rp-dark-nav .rp-nav { color: var(--paper); }
body.rp-dark-nav.rp-scrolled .rp-nav { background: color-mix(in srgb, var(--ink) 78%, transparent); box-shadow: 0 1px 0 var(--line-dark); }

.rp-lockup { align-items: center; display: inline-flex; gap: .6rem; margin-right: auto; }
.rp-mark { display: block; height: 34px; width: 34px; }
.rp-mark canvas { height: 100%; width: 100%; }
.rp-wordmark { font-size: 1.28rem; font-weight: 400; letter-spacing: -.035em; line-height: 1; white-space: nowrap; }
.rp-wordmark b { font-weight: 700; }
.rp-lockup--lg .rp-mark { height: 56px; width: 56px; }
.rp-lockup--lg .rp-wordmark { font-size: 2rem; }

.rp-nav-links { display: flex; gap: clamp(1rem, 2.2vw, 2.1rem); }
.rp-nav-links a { font-size: .9375rem; font-weight: 500; letter-spacing: -.012em; padding-block: .2rem; position: relative; }
.rp-nav-links a::after {
    background: currentColor; bottom: 0; content: ""; height: 1px; left: 0; position: absolute;
    transform: scaleX(0); transform-origin: right; transition: transform var(--expand) var(--ease-out); width: 100%;
}
.rp-nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
/* You are here. Weight and a persistent rule, not colour alone — the nav
   inverts over dark sections, where a blue would drop below contrast. */
.rp-nav-links a[aria-current="page"] { font-weight: 600; }
.rp-nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.rp-menu nav a[aria-current="page"] { color: var(--blue); }
.rp-pill[aria-current="page"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); }

/* The pill from the identity: blue, generous radius, one clear action. */
.rp-pill {
    background: var(--blue); border: 0; border-radius: 999px; color: var(--white); cursor: pointer;
    display: inline-block; font-size: .9375rem; font-weight: 600; letter-spacing: -.012em;
    overflow: hidden; padding: .72rem 1.35rem; position: relative;
    transition: transform var(--expand) var(--ease-out), box-shadow var(--expand) var(--ease-out);
}
.rp-pill::before {
    background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), color-mix(in srgb, var(--white) 26%, transparent), transparent 62%);
    content: ""; inset: 0; opacity: 0; position: absolute; transition: opacity var(--expand) var(--ease-out);
}
.rp-pill:hover { box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--blue) 70%, transparent); transform: translateY(-1px); }
.rp-pill:hover::before { opacity: 1; }
.rp-pill:active { transform: translateY(0) scale(.985); }
.rp-pill > * { position: relative; }
.rp-pill--ghost { background: transparent; border: 1.5px solid currentColor; color: inherit; }
.rp-pill--coral { background: var(--coral); color: var(--ink); }
.rp-pill--paper { background: var(--paper); color: var(--ink); }
.rp-pill--lg { font-size: 1.0625rem; padding: 1rem 1.75rem; }

.rp-burger { background: none; border: 0; cursor: pointer; display: none; height: 44px; padding: 0; position: relative; width: 44px; }
.rp-burger i { background: currentColor; height: 1.5px; left: 50%; position: absolute; top: 50%; transition: transform var(--expand) var(--ease-out); width: 20px; }
.rp-burger i:first-child { transform: translate(-50%, -5px); }
.rp-burger i:last-child { transform: translate(-50%, 4px); }
.rp-burger[aria-expanded="true"] i:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.rp-burger[aria-expanded="true"] i:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

/* ------------------------------------------------------------------ menu -- */
.rp-menu {
    background: var(--paper); display: grid; grid-template-rows: auto 1fr auto; inset: 0;
    opacity: 0; padding: 6.5rem var(--pad) 2rem; pointer-events: none; position: fixed;
    transition: opacity 320ms var(--ease-soft), visibility 320ms; visibility: hidden; z-index: 190;
}
.rp-menu.is-open { opacity: 1; pointer-events: auto; visibility: visible; }
.rp-menu-mark { height: min(78vh, 78vw); opacity: .5; pointer-events: none; position: absolute; right: -14%; top: 50%; transform: translateY(-50%); width: min(78vh, 78vw); }
.rp-menu > *:not(canvas) { position: relative; }
.rp-menu nav { align-self: center; display: flex; flex-direction: column; }
.rp-menu nav a {
    align-items: baseline; border-top: 1px solid var(--line); display: block; padding: clamp(.7rem, 1.8vw, 1.15rem) 0;
    transition: color var(--expand) var(--ease-out), padding-left var(--expand) var(--ease-out);
}
.rp-menu nav a:last-child { border-bottom: 1px solid var(--line); }
.rp-menu nav a:hover { color: var(--blue); padding-left: .75rem; }
.rp-menu nav span { font-size: clamp(1.9rem, 5.5vw, 3.6rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
.rp-menu-foot { align-items: center; display: flex; justify-content: space-between; }
.rp-menu-foot a:hover { color: var(--blue); }

/* ---------------------------------------------------------------- footer -- */
.rp-footer { border-top: 1px solid var(--line); margin-top: var(--bleed); padding: clamp(3.5rem, 7vw, 6rem) var(--pad) 2rem; position: relative; }
.rp-footer-line { align-items: end; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.rp-brandline { color: var(--ink); font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 3rem); font-style: italic; letter-spacing: -.02em; line-height: 1; }
.rp-footer-grid { display: grid; gap: 2.5rem clamp(1.5rem, 4vw, 4rem); grid-template-columns: repeat(4, minmax(0, 1fr)); padding: clamp(2.5rem, 5vw, 4rem) 0; }
.rp-footer-grid > div { display: flex; flex-direction: column; gap: .55rem; }
.rp-footer-grid .rp-caption { margin-bottom: .5rem; }
.rp-link { color: var(--soft-ink); font-size: .9375rem; transition: color var(--seed) linear; width: fit-content; }
.rp-link:not(.rp-link--static):hover { color: var(--blue); }
.rp-link--static { color: var(--gray); }
.rp-footer-bottom { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 1rem; justify-content: space-between; padding-top: 1.5rem; }

/* ----------------------------------------------------------- ripple switch --
   The OS setting is honoured by default; this makes it a choice anyone can
   make on the page and keep. Styled as a real switch, not a link. */
.rp-to-top { align-items: center; display: inline-flex; gap: .5rem; transition: color var(--seed) linear; }
.rp-to-top:hover { color: var(--blue); }
.rp-to-top span { transition: transform var(--expand) var(--ease-out); }
.rp-to-top:hover span { transform: translateY(-3px); }

.rp-switch { align-items: center; background: none; border: 0; color: inherit; cursor: pointer; display: inline-flex; font: inherit; gap: .55rem; letter-spacing: inherit; padding: .25rem 0; text-transform: inherit; }
.rp-switch-track { background: var(--line); border-radius: 999px; display: block; flex: none; height: 14px; padding: 2px; position: relative; transition: background var(--expand) var(--ease-out); width: 26px; }
.rp-switch-track i { background: var(--white); border-radius: 50%; display: block; height: 10px; transition: transform var(--expand) var(--ease-out); width: 10px; }
.rp-switch[aria-checked="true"] .rp-switch-track { background: var(--blue); }
.rp-switch[aria-checked="true"] .rp-switch-track i { transform: translateX(12px); }
.rp-switch:hover { color: var(--blue); }
.rp-switch:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

/* ------------------------------------------------------- entrance pattern --
   Everything arrives the way the mark does: seed, expand, settle. Never loops,
   never travels further than it needs to. Stagger stays under 500ms total. */
.rp-in { opacity: 0; transform: translateY(18px) scale(.988); transition: opacity var(--settle) var(--ease-out), transform var(--settle) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.rp-in.is-in { opacity: 1; transform: none; }
/* The line is masked only while it rises. Once it has settled the mask is
   released — EB Garamond's italic descenders hang well below the baseline and
   a permanent clip slices them flat. */
.rp-rise { display: block; overflow: hidden; padding-bottom: .08em; }
.rp-rise > span { display: block; transform: translateY(105%); transition: transform var(--ripple) var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.is-in .rp-rise > span, .rp-rise.is-in > span { transform: none; }
.rp-rise.is-settled { overflow: visible; }

/* =============================================================== SECTIONS == */

.rp-page { min-height: 60svh; position: relative; }

/* Section headers share one shape: a caption, a rule, a headline. */
.rp-head { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); padding-top: clamp(1.5rem, 3vw, 2.5rem); position: relative; }
.rp-head::before { background: var(--line); content: ""; height: 1px; inset: 0 0 auto; position: absolute; }
.rp-head-copy { align-items: start; display: grid; gap: 1.25rem clamp(1.5rem, 4vw, 4rem); grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.rp-head-copy h2 { max-width: 16ch; }
.rp-head-copy p:not(.rp-caption) { color: var(--gray); max-width: 44ch; padding-top: .4rem; }
.rp-head--single .rp-head-copy { grid-template-columns: minmax(0, 1fr); }

/* -------------------------------------------------------------------- hero --
   CROP: the mark runs past the frame. FOCUS: the coral dot is the only warm
   thing on the page. BREATHE: nothing else competes. */
.rp-hero { align-items: center; display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); min-height: 100svh; padding: clamp(7rem, 14vh, 11rem) var(--pad) clamp(3rem, 7vh, 6rem); position: relative; }
.rp-hero-copy { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.25rem); }
.rp-hero h1 { font-size: var(--fs-display); letter-spacing: -.042em; line-height: .95; max-width: 13ch; }
.rp-hero h1 .rp-rise > span { display: block; }
.rp-hero-sub { color: var(--soft-ink); font-size: var(--fs-lead); letter-spacing: -.018em; line-height: 1.45; max-width: 34ch; }
.rp-hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.rp-hero-stage { align-self: stretch; display: grid; place-items: center; position: relative; }
.rp-hero-stage canvas { height: min(84vh, 46vw); width: min(84vh, 46vw); }
.rp-hero-hint { align-items: center; bottom: clamp(1.5rem, 4vh, 3rem); color: var(--gray); display: flex; gap: .6rem; left: var(--pad); position: absolute; }
.rp-hero-hint i { background: var(--coral); border-radius: 50%; height: 7px; width: 7px; }
.rp-hero-hint span { font-size: var(--fs-caption); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* ---------------------------------------------------------------- marquee --
   One pass of the brand's supporting lines. It moves because you scroll. */
.rp-marquee { border-block: 1px solid var(--line); overflow: hidden; padding: 1.15rem 0 1.4rem; }
.rp-marquee-track { display: flex; gap: 3rem; transform: translate3d(var(--shift, 0px), 0, 0); white-space: nowrap; width: max-content; }
.rp-marquee span { align-items: center; color: var(--soft-ink); display: inline-flex; font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.6rem); font-style: italic; gap: 3rem; letter-spacing: -.015em; line-height: 1.5; }
.rp-marquee span::after { background: var(--coral); border-radius: 50%; content: ""; height: 8px; width: 8px; }

/* ---------------------------------------------------------------- anatomy --
   The mark, explained. The reason the rest of the site behaves as it does. */
.rp-anatomy { align-items: center; display: grid; gap: clamp(2.5rem, 6vw, 5rem); grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.rp-anatomy-stage { aspect-ratio: 1; justify-self: center; position: relative; width: min(100%, 25rem); }
.rp-anatomy-stage canvas { height: 100%; width: 100%; }
.rp-anatomy-list { display: flex; flex-direction: column; }
.rp-anatomy-list > div { border-top: 1px solid var(--line); display: grid; gap: .35rem 1.5rem; grid-template-columns: 3.5rem minmax(0, 1fr); padding: clamp(1.35rem, 2.5vw, 2rem) 0; transition: opacity var(--expand) var(--ease-out); }
.rp-anatomy-list > div:last-child { border-bottom: 1px solid var(--line); }
.rp-anatomy-list h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); grid-column: 2; }
.rp-anatomy-list p { color: var(--gray); grid-column: 2; }
.rp-anatomy-list .rp-caption { grid-column: 1; padding-top: .35rem; }
.rp-anatomy.is-focused .rp-anatomy-list > div { opacity: .32; }
.rp-anatomy.is-focused .rp-anatomy-list > div.is-active { opacity: 1; }

/* ----------------------------------------------------------------- stages --
   Originate / Test / Compound. Three rows, each with its own contour. */
.rp-stages { display: flex; flex-direction: column; }
.rp-stage { border-top: 1px solid var(--line); display: grid; gap: clamp(1.25rem, 3vw, 3rem); grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, .6fr) 8.5rem; padding: clamp(2rem, 4vw, 3.5rem) 0; position: relative; }
.rp-stages > .rp-stage:last-child { border-bottom: 1px solid var(--line); }
.rp-stage::after { background: var(--blue); content: ""; inset: -1px 0 auto; height: 1px; opacity: .45; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform var(--ripple) var(--ease-out); }
.rp-stage.is-in::after { transform: scaleX(1); }
.rp-stage-name { display: flex; flex-direction: column; gap: .6rem; }
.rp-stage-name h3 { font-size: clamp(1.75rem, 3vw, 2.6rem); letter-spacing: -.038em; }
.rp-stage-name .rp-caption { color: var(--blue); }
.rp-stage-body { display: flex; flex-direction: column; gap: 1.25rem; }
.rp-stage-body > p:first-child { color: var(--ink); font-family: var(--serif); font-size: clamp(1.2rem, 1.7vw, 1.5rem); font-style: italic; letter-spacing: -.01em; line-height: 1.32; }
.rp-stage-body > p + p { color: var(--gray); }
.rp-stage-facets { display: flex; flex-direction: column; gap: .4rem; }
.rp-stage-facets span { color: var(--gray); font-size: .875rem; text-wrap: nowrap; }
.rp-stage-ring { align-self: center; aspect-ratio: 1; height: auto; justify-self: end; width: 100%; }
.rp-stage:hover .rp-stage-ring { transform: scale(1.04); }
.rp-stage-ring { transition: transform var(--expand) var(--ease-out); }

/* ------------------------------------------------------------ territories --
   The Method reads as horizontal rows because it is a sequence — one thing
   after another. These are three places the same shift shows up, all at once,
   so they divide vertically instead. Same type system, opposite grain. */
.rp-territories { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rp-territory { display: flex; flex-direction: column; gap: 1rem; padding: clamp(2rem, 3.5vw, 3rem) clamp(1.25rem, 2.5vw, 2.5rem) 0; }
.rp-territory + .rp-territory { border-left: 1px solid var(--line); }
.rp-territory:first-child { padding-left: 0; }
.rp-territory:last-child { padding-right: 0; }
.rp-territory h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: -.038em; }
.rp-territory-line { color: var(--ink); font-family: var(--serif); font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-style: italic; letter-spacing: -.01em; line-height: 1.34; }
.rp-territory ul { display: flex; flex-direction: column; list-style: none; margin: auto 0 0; padding: 1.75rem 0 0; }
.rp-territory li { border-top: 1px solid var(--line); color: var(--gray); font-size: .9375rem; padding: .7rem 0; }
.rp-territory li:first-child { border-top-color: var(--ink); }

/* --------------------------------------------------------------- compare --
   Not a sequence and not parallel territories — three alternatives, read by
   someone working out which one is them. So it compares along shared axes,
   which is what a table is actually for. */
.rp-compare-scroll { margin-top: clamp(2.5rem, 5vw, 4rem); overflow-x: auto; }
.rp-compare { border-collapse: collapse; table-layout: fixed; width: 100%; }
.rp-compare-axis { width: clamp(8rem, 12vw, 11rem); }
.rp-compare th, .rp-compare td { text-align: left; vertical-align: top; }
.rp-compare thead th { border-bottom: 1px solid var(--ink); padding: 0 clamp(1rem, 2.4vw, 2.5rem) 1.25rem 0; }
.rp-compare thead .rp-caption { display: block; margin-bottom: .5rem; }
.rp-compare thead strong { display: block; font-size: clamp(1.5rem, 2.5vw, 2.1rem); font-weight: 700; letter-spacing: -.038em; line-height: 1.05; }
.rp-compare tbody th { border-bottom: 1px solid var(--line); color: var(--gray); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .14em; padding: 1.6rem 1.5rem 1.6rem 0; text-transform: uppercase; }
.rp-compare tbody td { border-bottom: 1px solid var(--line); color: var(--soft-ink); padding: 1.6rem clamp(1rem, 2.4vw, 2.5rem) 1.6rem 0; }
.rp-compare tbody tr:last-child th, .rp-compare tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------------- work --
   Each venture keeps its own contour: same identity, different rhythm. */
.rp-work-grid { display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rp-card {
    background: var(--white); border-radius: var(--radius); color: var(--ink); display: flex; flex-direction: column;
    gap: 1.25rem; min-height: clamp(19rem, 29vw, 25rem); overflow: hidden; padding: clamp(1.5rem, 2.4vw, 2.25rem); position: relative;
    transition: transform var(--expand) var(--ease-out), box-shadow var(--expand) var(--ease-out), background var(--expand) var(--ease-out);
}
.rp-card canvas { height: 128%; pointer-events: none; position: absolute; right: -22%; top: -14%; width: 128%; }
.rp-card > * { position: relative; }
.rp-card:hover { box-shadow: 0 22px 50px -30px rgba(11, 13, 14, .4); transform: translateY(-4px); }
.rp-card-top { align-items: center; display: flex; justify-content: space-between; }
.rp-card-signal { color: var(--soft-ink); font-family: var(--serif); font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-style: italic; letter-spacing: -.01em; line-height: 1.3; max-width: 22ch; }
.rp-card-main { display: flex; flex-direction: column; gap: .6rem; margin-top: auto; }
.rp-card-main h3 { font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -.04em; }
.rp-card-main p { color: var(--gray); max-width: 34ch; }
.rp-card-foot { align-items: end; display: flex; justify-content: space-between; gap: 1rem; }
.rp-card-foot strong { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: -.035em; }
.rp-card-go { align-items: center; background: var(--paper); border-radius: 999px; display: inline-flex; font-size: .875rem; font-weight: 600; gap: .5rem; padding: .5rem .9rem; transition: background var(--expand) var(--ease-out), color var(--expand) var(--ease-out); }
.rp-card:hover .rp-card-go { background: var(--blue); color: var(--white); }

/* ------------------------------------------------------------------ field --
   The 15%. Ripple Blue, full bleed, white contours running past the frame,
   one conviction. This is the only place the brand raises its voice. */
.rp-field { align-items: center; background: var(--blue); color: var(--white); display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); margin-top: var(--bleed); overflow: hidden; padding: clamp(5rem, 10vw, 9rem) var(--pad); position: relative; }
.rp-field-stage { aspect-ratio: 1; position: relative; width: 100%; }
.rp-field-stage canvas { height: 165%; left: -55%; position: absolute; top: -32%; width: 155%; }
.rp-field-copy { position: relative; }
.rp-field h2 { font-size: clamp(2.2rem, 4.4vw, 3.9rem); letter-spacing: -.042em; line-height: 1.02; max-width: 17ch; }
.rp-field p { color: var(--white); margin-top: 1.75rem; max-width: 46ch; opacity: .96; }
.rp-field .rp-caption { color: var(--white); margin-bottom: 1.5rem; opacity: .92; }

/* ----------------------------------------------------------------- record --
   The 25%. Matter Black, the numbers, nothing decorative. */
.rp-record { background: var(--ink); color: var(--paper); overflow: hidden; padding: clamp(5rem, 10vw, 9rem) var(--pad); position: relative; }
.rp-record canvas { height: 190%; left: 50%; opacity: .55; pointer-events: none; position: absolute; top: -45%; transform: translateX(-50%); width: min(150%, 1500px); }
.rp-record > * { position: relative; }
.rp-record .rp-head::before { background: var(--line-dark); }
.rp-record-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(3rem, 6vw, 5rem); }
.rp-record-grid > div { border-top: 1px solid var(--line-dark); display: flex; flex-direction: column; gap: .5rem; padding-top: 1.35rem; }
.rp-record-grid strong { display: block; font-size: clamp(2.75rem, 6vw, 4.5rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.rp-record-grid span { color: color-mix(in srgb, var(--paper) 55%, transparent); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.rp-record-note { border-top: 1px solid var(--line-dark); color: color-mix(in srgb, var(--paper) 88%, transparent); font-family: var(--serif); font-size: clamp(1.4rem, 2.8vw, 2.2rem); font-style: italic; letter-spacing: -.015em; line-height: 1.28; margin-top: clamp(3rem, 6vw, 5rem); max-width: 30ch; padding-top: 2rem; }

/* ------------------------------------------------------------------ split --
   Section copy holds the left column while the list scrolls past it on the
   right. Same shape as the contact page, so the two read as one system. */
.rp-split { align-items: start; display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
.rp-split-copy { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 7.5rem; }
.rp-split-copy h2 { max-width: 12ch; }
.rp-split-copy > p:not(.rp-caption) { color: var(--gray); max-width: 34ch; }
.rp-split-copy .rp-text-link { margin-top: .5rem; }

/* ------------------------------------------------------------------ notes -- */
.rp-notes { display: flex; flex-direction: column; }
.rp-note { align-items: center; border-top: 1px solid var(--line); display: grid; gap: 1rem clamp(1.5rem, 3vw, 3rem); grid-template-columns: 9rem minmax(0, 1fr) minmax(0, .9fr) 3rem; padding: clamp(1.5rem, 3vw, 2.5rem) 0; transition: padding-left var(--expand) var(--ease-out); }
.rp-notes > .rp-note:last-child { border-bottom: 1px solid var(--line); }
.rp-note:hover { padding-left: .75rem; }
.rp-note h3 { font-size: clamp(1.35rem, 2.4vw, 2rem); letter-spacing: -.032em; transition: color var(--expand) var(--ease-out); }
.rp-note:hover h3 { color: var(--blue); }
.rp-note p { color: var(--gray); }
.rp-note b { color: var(--blue); font-size: 1.25rem; justify-self: end; opacity: 0; transition: opacity var(--expand) var(--ease-out), transform var(--expand) var(--ease-out); transform: translateX(-8px); }
.rp-notes--compact .rp-note { align-items: start; gap: .5rem clamp(1rem, 2vw, 2rem); grid-template-columns: 8.75rem minmax(0, 1fr) 1.5rem; }
.rp-notes--compact .rp-note > .rp-caption { grid-column: 1; grid-row: 1; padding-top: .4rem; }
.rp-notes--compact .rp-note h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); grid-column: 2; grid-row: 1; }
.rp-notes--compact .rp-note > p { grid-column: 2; grid-row: 2; }
.rp-notes--compact .rp-note b { align-self: center; grid-column: 3; grid-row: 1 / span 2; }
.rp-note:hover b { opacity: 1; transform: none; }

/* -------------------------------------------------------------------- cta -- */
.rp-cta { align-items: center; display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); padding: clamp(5rem, 10vw, 9rem) var(--pad); position: relative; }
.rp-cta-copy { display: flex; flex-direction: column; gap: 1.75rem; }
.rp-cta h2 { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -.042em; line-height: 1; max-width: 15ch; }
.rp-cta p { color: var(--gray); max-width: 40ch; }
.rp-cta-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.rp-cta-stage { aspect-ratio: 1; position: relative; }
.rp-cta-stage canvas { height: 100%; width: 100%; }
.rp-text-link { align-items: center; display: inline-flex; font-size: .9375rem; font-weight: 600; gap: .5rem; position: relative; width: fit-content; }
.rp-text-link::after { background: currentColor; bottom: -3px; content: ""; height: 1px; left: 0; position: absolute; transition: transform var(--expand) var(--ease-out); transform-origin: left; width: 100%; }
.rp-text-link:hover::after { transform: scaleX(.3); }
.rp-text-link span { transition: transform var(--expand) var(--ease-out); }
.rp-text-link:hover span { transform: translate(3px, -3px); }

/* ========================================================= INTERIOR PAGES == */

.rp-interior { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); padding: clamp(9rem, 18vh, 13rem) var(--pad) clamp(3rem, 6vw, 5rem); }
.rp-interior-copy { display: flex; flex-direction: column; gap: 1.5rem; }
.rp-interior h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); letter-spacing: -.042em; line-height: .98; max-width: 15ch; }
.rp-interior-copy > p:not(.rp-caption) { color: var(--gray); font-size: var(--fs-lead); letter-spacing: -.018em; line-height: 1.45; max-width: 40ch; }
.rp-interior-stage { align-self: center; aspect-ratio: 1; justify-self: end; width: min(100%, 26rem); }
.rp-interior-stage canvas { height: 100%; width: 100%; }
.rp-interior-meta { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 1rem; padding-top: 1.5rem; }
/* Contact has no diagram beside it — the form is the thing to reach, so the
   header gives up its second column and most of its height. */
.rp-interior--compact { grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(1.75rem, 3vw, 2.75rem); padding-top: clamp(7rem, 12vh, 9rem); }
.rp-interior--compact .rp-interior-copy { gap: 1.25rem; }

.rp-back { align-items: center; display: inline-flex; gap: .5rem; left: clamp(.6rem, 1.4vw, 1.5rem); position: fixed; top: 50%; transform: rotate(180deg) translateY(50%); transform-origin: center; writing-mode: vertical-rl; z-index: 150; }
.rp-back span { color: var(--gray); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: color var(--seed) linear; }
.rp-back:hover span { color: var(--blue); }

/* --------------------------------------------------------- work index/case -- */
.rp-index { display: flex; flex-direction: column; }
.rp-index-row { align-items: center; border-top: 1px solid var(--line); display: grid; gap: 1rem clamp(1.5rem, 3vw, 3rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 7rem 3rem; padding: clamp(1.5rem, 3vw, 2.5rem) 0; position: relative; transition: padding-left var(--expand) var(--ease-out); }
.rp-index > .rp-index-row:last-child { border-bottom: 1px solid var(--line); }
.rp-index-row:hover { padding-left: .75rem; }
.rp-index-row h2 { font-size: clamp(1.75rem, 3.2vw, 2.75rem); letter-spacing: -.04em; transition: color var(--expand) var(--ease-out); }
.rp-index-row:hover h2 { color: var(--blue); }
.rp-index-row p { color: var(--gray); }
.rp-index-row strong { font-size: 1.35rem; font-weight: 600; letter-spacing: -.03em; }
.rp-index-row b { color: var(--blue); justify-self: end; opacity: 0; transform: translateX(-8px); transition: opacity var(--expand) var(--ease-out), transform var(--expand) var(--ease-out); }
.rp-index-row:hover b { opacity: 1; transform: none; }

.rp-case-hero { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); padding: clamp(9rem, 18vh, 13rem) var(--pad) clamp(3rem, 6vw, 5rem); }
.rp-case-hero h1 { font-size: clamp(3.5rem, 9vw, 7rem); letter-spacing: -.05em; line-height: .9; }
.rp-case-meta { color: var(--gray); display: flex; flex-wrap: wrap; gap: 1.5rem; }
.rp-case-signal { border-left: 2px solid var(--coral); margin-top: 1rem; padding-left: 1.25rem; }
.rp-case-signal strong { display: block; font-family: var(--serif); font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-style: italic; font-weight: 400; letter-spacing: -.015em; line-height: 1.28; margin-top: .5rem; }
.rp-case-body { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
.rp-case-body h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.032em; line-height: 1.14; max-width: 26ch; }
.rp-metrics { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rp-metrics > div { border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .4rem; padding-top: 1.15rem; }
.rp-metrics strong { font-size: clamp(1.9rem, 3.6vw, 2.75rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.rp-role { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.rp-role li { border-top: 1px solid var(--line); padding: 1.15rem 0; }
.rp-role li:last-child { border-bottom: 1px solid var(--line); }
.rp-role strong { font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: -.028em; }

/* -------------------------------------------------------------- article -- */
.rp-article-head { display: flex; flex-direction: column; gap: 1.5rem; margin: 0 auto; max-width: 46rem; padding: clamp(9rem, 18vh, 13rem) var(--pad) clamp(2rem, 4vw, 3rem); }
.rp-article-head h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); letter-spacing: -.042em; line-height: 1.02; }
.rp-article-head > p:not(.rp-caption) { color: var(--gray); font-size: var(--fs-lead); letter-spacing: -.018em; line-height: 1.45; }
.rp-article-body { border-top: 1px solid var(--line); margin: 0 auto; max-width: 46rem; padding: clamp(2.5rem, 5vw, 4rem) var(--pad) 0; }
.rp-article-body p { font-size: 1.1875rem; line-height: 1.68; margin-bottom: 1.6em; }
.rp-article-body p:first-child { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-style: italic; letter-spacing: -.015em; line-height: 1.36; }

/* ---------------------------------------------------------------- legal -- */
.rp-legal { margin: 0 auto; max-width: 46rem; padding: clamp(9rem, 18vh, 13rem) var(--pad) 0; }
.rp-legal h1 { font-size: clamp(2.4rem, 5.4vw, 3.5rem); letter-spacing: -.042em; margin-bottom: 1rem; }
.rp-legal h2 { font-size: var(--fs-section); margin: 2.75rem 0 .75rem; }
.rp-legal p { color: var(--soft-ink); margin-bottom: 1rem; }
.rp-legal a { color: var(--blue); text-decoration: underline; text-underline-offset: .2em; }

/* ------------------------------------------------------------- composer --
   "Start a conversation" is the call to action everywhere on this site, so
   the contact form is a message rather than a survey: addressed to someone,
   written in a body, and sent. The copy stays put on the left while you
   write, so the ask is still visible when you answer it. */
.rp-contact { align-items: start; display: grid; gap: clamp(2.5rem, 5vw, 5rem); grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); padding: clamp(9rem, 18vh, 13rem) var(--pad) clamp(4rem, 8vw, 7rem); }
.rp-contact-copy { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 7.5rem; }
.rp-contact-copy h1 { font-size: clamp(2.6rem, 5vw, 4.5rem); letter-spacing: -.042em; line-height: .98; }
.rp-contact-copy > p:not(.rp-caption) { color: var(--gray); font-size: var(--fs-lead); letter-spacing: -.018em; line-height: 1.45; max-width: 32ch; }
.rp-contact-note { border-top: 1px solid var(--line); font-size: .9375rem !important; letter-spacing: normal !important; margin-top: .75rem; padding-top: 1.25rem; }

.rp-compose { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 30px 80px -46px rgba(11, 13, 14, .55), 0 12px 32px -28px rgba(11, 13, 14, .35); display: flex; flex-direction: column; justify-self: end; max-width: 43rem; overflow: hidden; width: 100%; }
.rp-compose-head { align-items: center; background: color-mix(in srgb, var(--paper) 22%, var(--white)); border-bottom: 1px solid var(--line); display: flex; min-height: 3rem; padding: .7rem clamp(1.1rem, 2vw, 1.6rem); }
.rp-compose-title { align-items: center; display: inline-flex; gap: .65rem; }
.rp-compose-title i { background: var(--coral); border-radius: 50%; flex: none; height: 8px; width: 8px; }
.rp-compose-title span, .rp-compose-status { color: var(--gray); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.rp-compose-status { align-items: center; display: inline-flex; gap: .4rem; margin-left: auto; opacity: 0; transition: opacity var(--expand) var(--ease-out); }
.rp-compose-status::before { content: "✓"; font-size: .625rem; letter-spacing: 0; }
.rp-compose-status.is-on { opacity: 1; }
.rp-compose-alert { background: color-mix(in srgb, var(--coral) 10%, var(--white)); border: 0; border-bottom: 1px solid var(--line); border-left: 3px solid var(--alert); color: var(--soft-ink); display: grid; font-size: .875rem; gap: .1rem; outline: 0; padding: .85rem clamp(1.1rem, 2vw, 1.6rem); }
.rp-compose-alert strong { font-weight: 600; }
.rp-compose-alert span { color: var(--gray); }

/* One addressed line per row, the way a mail header reads. */
.rp-compose-row { border-bottom: 1px solid var(--line); display: grid; gap: 0 1rem; grid-template-columns: 5.75rem minmax(0, 1fr); min-height: 3.375rem; padding: 0 clamp(1.1rem, 2vw, 1.6rem); position: relative; }
.rp-compose-row::before { background: var(--blue); content: ""; inset: 0 auto 0 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform var(--expand) var(--ease-out); width: 2px; }
.rp-compose-row:focus-within::before { transform: scaleX(1); }
.rp-compose-row[aria-invalid="true"]::before, .rp-compose-row:has(input[aria-invalid="true"])::before { background: var(--alert); transform: scaleX(1); }
.rp-compose-row--recipient { background: color-mix(in srgb, var(--paper) 18%, var(--white)); }
.rp-compose-label { align-self: center; color: var(--gray); font-size: .8125rem; font-weight: 500; padding-block: .75rem; }
.rp-compose-static { align-items: center; align-self: center; display: flex; gap: .65rem; padding-block: .6rem; }
.rp-compose-recipient { align-items: baseline; display: flex; flex-wrap: wrap; gap: .15rem .65rem; min-width: 0; }
.rp-compose-recipient strong { font-size: .9375rem; font-weight: 600; }
.rp-compose-recipient a { color: var(--gray); font-size: .8125rem; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .18em; transition: color var(--seed) linear, text-decoration-color var(--seed) linear; }
.rp-compose-recipient a:hover { color: var(--blue); text-decoration-color: currentColor; }
.rp-compose-sender { align-items: baseline; align-self: center; display: flex; flex-wrap: wrap; gap: .15rem .65rem; min-width: 0; width: 100%; }
.rp-compose-sender-field { display: block; min-width: 0; }
.rp-compose-sender-field:first-child { flex: 0 1 auto; max-width: 13rem; }
.rp-compose-sender-field:last-child { flex: 1 1 13rem; }
.rp-compose-sender input[aria-invalid="true"] { box-shadow: inset 0 -1px var(--alert); }
.rp-compose-errors { display: flex; flex-wrap: wrap; gap: .2rem 1rem; grid-column: 2; padding-bottom: .7rem; }
.rp-compose-row input { background: none; border: 0; color: var(--ink); font-size: 1rem; outline: none; padding-block: .75rem; width: 100%; }
.rp-compose-row input:not(:focus) { text-overflow: ellipsis; }
.rp-compose-sender input { padding-inline: 0; }
.rp-compose-sender-field:first-child input { field-sizing: content; font-size: .9375rem; font-weight: 600; max-width: min(100%, 13rem); min-width: 4.75rem; width: auto; }
.rp-compose-sender-field:first-child input:placeholder-shown { font-weight: 400; }
.rp-compose-sender-field:last-child input { color: var(--gray); font-size: .8125rem; }
.rp-compose-sender-field:last-child input:focus { color: var(--ink); }
.rp-compose-row input[aria-invalid="true"]::placeholder, .rp-compose-body textarea[aria-invalid="true"]::placeholder { color: var(--alert); }
.rp-compose-row input::placeholder { color: var(--gray); opacity: 1; }
.rp-compose-row:focus-within > .rp-compose-label { color: var(--blue); }
.rp-compose-row > .rp-error { grid-column: 2; padding-bottom: .7rem; }

/* Options behave like recipient chips: pick one, keep the row one line tall. */
.rp-chips { display: flex; flex-wrap: wrap; gap: .45rem; padding-block: .5rem .25rem; }
.rp-chip-note { color: var(--gray); font-size: .8125rem; grid-column: 2; line-height: 1.4; min-height: 1.15rem; padding-bottom: .55rem; }
.rp-chip { cursor: pointer; position: relative; }
.rp-chip input { height: 0; opacity: 0; position: absolute; width: 0; }
.rp-chip > span { align-items: center; background: color-mix(in srgb, var(--paper) 86%, var(--white)); border: 1px solid color-mix(in srgb, var(--line) 62%, transparent); border-radius: 999px; display: inline-flex; font-size: .875rem; min-height: 2.375rem; padding: .42rem .85rem; transition: background var(--seed) linear, color var(--seed) linear, border-color var(--seed) linear, box-shadow var(--seed) linear; }
.rp-chip > span > i { display: inline-block; font-size: .6875rem; font-style: normal; font-weight: 700; opacity: 0; overflow: hidden; transition: opacity var(--seed) linear, width var(--seed) var(--ease-out); width: 0; }
.rp-chip:hover > span { border-color: color-mix(in srgb, var(--ink) 24%, var(--line)); }
.rp-chip input:checked + span { background: color-mix(in srgb, var(--blue) 9%, var(--white)); border-color: color-mix(in srgb, var(--blue) 58%, var(--line)); box-shadow: 0 4px 12px -10px var(--blue); color: var(--blue); font-weight: 600; }
.rp-chip input:checked + span > i { margin-right: .35rem; opacity: 1; width: .65rem; }
.rp-chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

.rp-compose-body { display: flex; flex-direction: column; padding: 0 clamp(1.1rem, 2vw, 1.6rem); position: relative; transition: background var(--expand) var(--ease-out); }
.rp-compose-body::before { background: var(--blue); content: ""; inset: 0 auto 0 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform var(--expand) var(--ease-out); width: 2px; }
.rp-compose-body:focus-within { background: color-mix(in srgb, var(--blue) 2.5%, var(--white)); }
.rp-compose-body:focus-within::before { transform: scaleX(1); }
.rp-compose-body:has(textarea[aria-invalid="true"])::before { background: var(--alert); transform: scaleX(1); }
.rp-compose-body-head { align-items: baseline; display: flex; flex-wrap: wrap; gap: .25rem .85rem; justify-content: space-between; padding-top: .85rem; }
.rp-compose-body-head > span { color: var(--gray); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.rp-compose-body-head p { color: var(--gray); font-size: .8125rem; }
.rp-compose-body textarea { background: none; border: 0; color: var(--ink); font-family: inherit; font-size: 1.0625rem; line-height: 1.62; min-height: 9rem; outline: none; overflow: auto; padding: .65rem 0 .9rem; resize: vertical; width: 100%; }
.rp-compose.is-enhanced .rp-compose-body textarea { overflow: hidden; resize: none; }
.rp-compose-body textarea::placeholder { color: var(--gray); opacity: 1; }
.rp-compose-body .rp-error { padding-bottom: .8rem; }
.rp-compose-body-meta { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; padding-bottom: .8rem; }
.rp-compose-private { align-items: center; color: var(--gray); display: inline-flex; font-size: .75rem; gap: .4rem; }
.rp-compose-private i { background: var(--line); border-radius: 50%; height: 5px; width: 5px; }
.rp-compose-count { color: var(--gray); font-size: .75rem; min-height: 1.2em; }
.rp-compose-count.is-short { color: var(--alert); }
.rp-compose-verify { border-top: 1px solid var(--line); padding: 1rem clamp(1.1rem, 2vw, 1.6rem); }
.rp-compose-verify .rp-error { display: block; padding-top: .5rem; }
.rp-compose-foot { align-items: center; background: color-mix(in srgb, var(--paper) 18%, var(--white)); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; padding: .75rem clamp(1.1rem, 2vw, 1.6rem); }
.rp-compose-send { align-items: center; display: flex; gap: .85rem; }
.rp-compose-submit { align-items: center; display: inline-flex; gap: .55rem; min-height: 2.75rem; padding: .68rem 1.35rem; }
.rp-compose-submit > span:last-child { font-size: .8125rem; transition: transform var(--expand) var(--ease-out); }
.rp-compose-submit:hover > span:last-child { transform: translate(3px, -3px); }
.rp-compose-submit:disabled { cursor: wait; opacity: .62; transform: none; }
.rp-compose-shortcut { color: var(--gray); font-size: .8125rem; }
.rp-compose-shortcut kbd { background: var(--white); border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 1px 0 var(--line); font-family: inherit; font-size: .75rem; padding: .1rem .35rem; }
.rp-compose-foot p { align-items: center; color: var(--gray); display: flex; font-size: .8125rem; gap: .4rem; }
.rp-compose-foot .rp-text-link { color: var(--soft-ink); font-size: .8125rem; }
.rp-compose-foot .rp-text-link:hover { color: var(--blue); }
.rp-compose-sent { display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(2rem, 4vw, 3rem) clamp(1.1rem, 2vw, 1.6rem) clamp(2.5rem, 5vw, 3.5rem); }
.rp-compose-sent h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); letter-spacing: -.042em; }
.rp-compose-sent p { color: var(--gray); max-width: 42ch; }

.rp-error { color: var(--alert); font-family: var(--sans); font-size: .875rem; font-style: normal; font-weight: 500; letter-spacing: -.011em; }
.rp-visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

/* ------------------------------------------------------------------ 404 -- */
.rp-missing { align-items: center; display: flex; flex-direction: column; gap: 1.5rem; justify-content: center; min-height: 100svh; padding: 6rem var(--pad); position: relative; text-align: center; }
.rp-missing canvas { height: min(70vh, 70vw); left: 50%; opacity: .35; position: absolute; top: 50%; transform: translate(-50%, -50%); width: min(70vh, 70vw); }
.rp-missing > * { position: relative; }
.rp-missing h1 { font-size: clamp(2.4rem, 6.5vw, 4.5rem); letter-spacing: -.045em; line-height: 1; }
.rp-missing p:not(.rp-caption) { color: var(--gray); max-width: 38ch; }

/* ============================================================ RESPONSIVE == */

@media (max-width: 1080px) {
    .rp-nav-links { display: none; }
    .rp-burger { display: block; }
    .rp-hero { grid-template-columns: 1fr; }
    .rp-hero-copy { max-width: none; }
    .rp-hero-stage { order: -1; }
    .rp-hero-stage canvas { height: min(46vh, 78vw); width: min(46vh, 78vw); }
    .rp-anatomy, .rp-cta, .rp-interior, .rp-case-hero { grid-template-columns: 1fr; }
    .rp-territories { grid-template-columns: minmax(0, 1fr); }
    .rp-territory { padding: clamp(1.75rem, 3vw, 2.5rem) 0 0; }
    .rp-territory + .rp-territory { border-left: 0; border-top: 1px solid var(--line); }
    .rp-territory ul { padding-bottom: 1.5rem; }
    .rp-interior-stage { justify-self: start; width: min(100%, 18rem); }
    .rp-cta-stage { display: none; }
    .rp-field { grid-template-columns: 1fr; }
    /* The diagram is the point of the row, so it stays — it just moves up
       beside the stage name where the association is unmistakable. */
    .rp-stage { grid-template-columns: minmax(0, 1fr) 5rem; gap: 1.25rem clamp(1rem, 4vw, 2rem); }
    .rp-stage-name { grid-column: 1; grid-row: 1; }
    .rp-stage-ring { align-self: start; grid-column: 2; grid-row: 1; }
    .rp-stage-body, .rp-stage-facets { grid-column: 1 / -1; }
    .rp-back { display: none; }
    .rp-contact { grid-template-columns: minmax(0, 1fr); }
    .rp-contact-copy { max-width: 46rem; position: static; }
    .rp-compose { justify-self: stretch; max-width: 46rem; }
    .rp-case-body { grid-template-columns: 1fr; }
    .rp-split { grid-template-columns: minmax(0, 1fr); }
    .rp-split-copy { position: static; }
    .rp-head-copy { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    /* Stacked by axis, so the comparison survives: one question at a time,
       with all three answers under it. The head is hidden visually but stays
       in the accessibility tree, so cells keep their column headers. */
    .rp-compare, .rp-compare tbody, .rp-compare tr, .rp-compare th, .rp-compare td { display: block; }
    .rp-compare colgroup { display: none; }
    .rp-compare thead { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
    .rp-compare tbody tr { border-top: 1px solid var(--ink); margin-top: 2rem; padding-top: 1.25rem; }
    .rp-compare tbody tr:first-child { margin-top: 0; }
    .rp-compare tbody th { border: 0; padding: 0 0 1rem; }
    .rp-compare tbody td { border: 0; padding: 0 0 1.1rem; }
    .rp-compare tbody td::before { color: var(--blue); content: attr(data-mode); display: block; font-size: var(--fs-caption); font-weight: 700; letter-spacing: .14em; margin-bottom: .25rem; text-transform: uppercase; }
}

@media (max-width: 760px) {
    :root { --radius: 18px; }
    /* The header CTA lives in the menu at this width — it is the first thing
       under the burger — so the bar stays a lockup and one control. */
    .rp-nav > .rp-pill { display: none; }
    .rp-nav { gap: 1rem; }
    .rp-wordmark { font-size: 1.15rem; }
    .rp-mark { height: 30px; width: 30px; }
    .rp-work-grid, .rp-record-grid, .rp-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rp-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rp-head, .rp-head-copy, .rp-note, .rp-index-row { grid-template-columns: 1fr; }
    .rp-notes--compact .rp-note { grid-template-columns: 1fr; }
    .rp-notes--compact .rp-note > .rp-caption, .rp-notes--compact .rp-note h3, .rp-notes--compact .rp-note > p { grid-column: 1; grid-row: auto; }
    .rp-note b, .rp-index-row b { display: none; }
    .rp-footer-line { align-items: start; flex-direction: column; }
    .rp-footer-bottom { align-items: start; flex-direction: column; gap: .5rem; }
    .rp-field-stage { display: none; }
    .rp-card canvas { opacity: .8; }
    .rp-menu-mark { opacity: .28; right: -30%; }
}

@media (max-width: 620px) {
    /* Keep the address gutter on phone-sized composers. Choice rows become
       full width so their controls retain comfortable tap targets. */
    .rp-compose-row { gap: 0 .75rem; grid-template-columns: 4.25rem minmax(0, 1fr); }
    .rp-compose-label { padding-block: .8rem; }
    .rp-compose-row input { padding-block: .8rem; }
    .rp-compose-sender input { padding-block: .625rem; }
    .rp-compose-errors { flex-direction: column; }
    .rp-compose-row--choice { grid-template-columns: minmax(0, 1fr); padding-block: .45rem; }
    .rp-compose-row--choice > .rp-compose-label { padding-block: .35rem 0; }
    .rp-compose-row--choice > .rp-error, .rp-compose-row--choice > .rp-chip-note { grid-column: 1; }
    .rp-chips { padding-block: .4rem .5rem; }
    .rp-chip > span { min-height: 2.75rem; }
    .rp-compose-body-meta { align-items: flex-start; flex-direction: column; }
    .rp-compose-foot { align-items: stretch; flex-direction: column; }
    .rp-compose-send { justify-content: space-between; width: 100%; }
    .rp-compose-submit { justify-content: center; }
    .rp-work-grid { grid-template-columns: minmax(0, 1fr); }
    .rp-card-foot { align-items: flex-start; flex-direction: column; gap: 1.25rem; }
    .rp-footer-grid { grid-template-columns: minmax(0, 1fr); }
    .rp-marquee span { font-size: 1.1rem; gap: 2rem; }
}

/* No keyboard, no keyboard shortcut. */
@media (pointer: coarse) { .rp-dot, .rp-compose-shortcut { display: none; } }

/* ---------------------------------------------------------------------------
   Reduced motion. The surface stops simulating, the mark renders once, and
   every entrance resolves immediately. The design still reads — because the
   design was never carried by the motion. */
/* Ripples off — the visitor's choice. Deliberately narrow: it stops the water
   and the cursor, and leaves section reveals alone. The block below, driven by
   the OS setting, is the one that stops everything. */
html[data-ripples-off] .rp-surface,
html[data-ripples-off] .rp-dot { display: none; }
/* The hero promises the page reacts to you. With the water off it doesn't,
   so the promise goes too. */
html[data-ripples-off] .rp-hero-hint { display: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .rp-in { opacity: 1; transform: none; }
    .rp-rise > span { transform: none !important; }
    .rp-rise { overflow: visible; }
    .rp-transit, .rp-dot { display: none; }
    .rp-stage::after { transform: scaleX(1); }
    .rp-marquee-track { transform: none !important; }
}