/* New Partners — styles (v10, mobile-first).
   Base rules are for phones; min-width queries add tablet (30rem) / desktop (48rem, 64rem).
   Built by build.py into /assets/styles.<hash>.css (fonts + grain resolved there).
   Motion: phones animate transform + opacity (r4 adds short, modest blurs that are removed when they finish:
   the hero intro/exit and Approach lines mid-arrival); no backdrop-filter or SVG paint animations on phones;
   desktop adds the richer draw-ins. Reduced motion / no JS: static, fully visible. */

/* ---------- Fonts (self-hosted, SIL OFL 1.1; subset to Latin basics, axes trimmed) ---------- */
@font-face {
  font-family: "Newsreader";
  src: url("newsreader.9b4d641201.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00B7, U+00D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2192, U+2197;
}
@font-face {
  font-family: "Inter";
  src: url("inter.77c8c56589.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00B7, U+00D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2192, U+2197;
}

/* ---------- Tokens ---------- */
:root {
  --font-serif: "Newsreader", "Times New Roman", Times, serif;
  --font-sans: "Inter", "Helvetica Neue", Arial, Helvetica, sans-serif;

  --color-bg: #ffffff;
  --color-surface: #f3f4f5;
  --color-surface-edge: #fafafa;
  --color-footer: #f2f2f2;
  --color-ink: #000c1f;
  --color-ink-secondary: rgba(0, 12, 31, 0.68);
  --color-ink-tertiary: rgba(0, 12, 31, 0.60);
  --color-ink-tile: rgba(0, 12, 31, 0.88);
  --color-ink-faded: rgba(0, 12, 31, 0.60);
  --color-accent: #002664;
  --color-accent-ink: #ffffff;
  --color-accent-muted: #b39c80;
  --color-sand-ink: #7d6648;
  --color-rule-strong: rgba(0, 12, 31, 0.20);
  --color-focus: #004ac3;
  --color-glow: rgba(0, 38, 100, 0.05);
  --color-card: #ffffff;
  --color-card-edge: rgba(0, 12, 31, 0.08);
  --tile-bg: #f0f2f5;

  /* grain: one 80px tiled PNG shown at 40px (crisp on 2x screens; inlined, ~3.7 KB); no SVG filter, no blend mode */
  --grain-image: url("data:image/png;base64,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");
  --grain-size: 40px;
  --grain-opacity: 0.038;
  --grain-opacity-tile: 0.06;

  --text-hero: clamp(3rem, 1.6rem + 6.2vw, 6rem);   /* r4: fuller on tablets; 96px at 1440 as before */
  --text-hero-sub: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem);
  --text-section-display: clamp(2.375rem, 1.6rem + 3.2vw, 4rem);
  --text-statement: 1.375rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-label: 0.75rem;
  --text-wordmark: 1.25rem;
  --text-card-title: clamp(1.625rem, 1.15rem + 1.2vw, 2.375rem);
  --text-tile-title: clamp(1.8rem, 1.3rem + 1.35vw, 2.625rem);
  --text-tile-title-lg: clamp(2.125rem, 1.5rem + 2.2vw, 3.5rem);
  --text-tile-line: clamp(1.125rem, 0.75rem + 0.95vw, 1.3125rem);
  --text-tile-line-lg: clamp(1.125rem, 0.6rem + 1.2vw, 1.4375rem);

  --leading-tight: 1.02;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --tracking-hero: -0.045em;
  --tracking-serif: -0.02em;
  --tracking-body: -0.01em;
  --tracking-label: 0.12em;

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
  --space-section: clamp(5rem, 3rem + 6vw, 9rem);

  --container: 87rem;
  --page-inset: clamp(0.75rem, -0.3rem + 3.5vw, 3.5rem);
  --gutter: clamp(1.25rem, 0.8rem + 1.5vw, 2rem);
  --grid-gap: 0.75rem;
  --radius-panel: clamp(1.25rem, 0.5rem + 2.5vw, 2rem);
  --radius-pill: 999px;
  --tile-radius: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
  --tile-pad: clamp(1.25rem, 0.9rem + 1vw, 2rem);
  --tile-row: clamp(13rem, 10rem + 6vw, 17rem);
  --header-h: 3.5rem;            /* 56px bar on phones */
  --mark-height: clamp(4.5rem, 2.6rem + 6.8vw, 9.25rem);

  /* motion: short and responsive (Mr B: "fast") */
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-art: 360ms;
  --rise: 12px;
  --stagger: 0ms;          /* phones: tiles stack and trigger one by one */
}
@media (min-width: 30.01rem) {
  :root { --text-wordmark: 1.5rem; --header-h: 4.5rem; --grid-gap: 1.25rem; --stagger: 150ms;
          --text-statement: clamp(2.25rem, 1.2rem + 2.6vw, 3rem); }   /* r7: was clamp(2rem, 1.3rem + 1.8vw, 2.75rem) */
}
@media (min-width: 48.01rem) { :root { --dur-art: 520ms; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  position: relative;
  display: flow-root;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-body);
  font-feature-settings: "ss01" off, "cv11" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body::after {                  /* page grain: static, painted once (no blend, never animated) */
  content: "";
  position: absolute; inset: 0; z-index: 100;
  pointer-events: none;
  background: var(--grain-image) repeat;
  background-size: var(--grain-size);
  opacity: var(--grain-opacity);
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 110;
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent); color: var(--color-accent-ink);
  border-radius: var(--radius-pill); text-decoration: none; font-weight: 500;
}
.skip-link:focus { top: var(--space-4); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Sticky header (outside the panel, pulled over its top edge) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  height: var(--header-h);
  margin: var(--space-4) var(--page-inset) calc(-1 * var(--header-h) - var(--space-4));
  padding: 0 var(--gutter);
}
.site-header::before {        /* scrolled state: frosted "liquid glass" bar, full-bleed, never see-through */
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: calc(-1 * var(--space-4) - env(safe-area-inset-top, 0px)); bottom: 0;
  left: calc(-1 * var(--page-inset)); right: calc(-1 * var(--page-inset));
  background: rgba(250, 250, 251, 0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 -1px 0 rgba(15, 20, 36, 0.06), 0 10px 24px -18px rgba(15, 20, 36, 0.22);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header::before { background: rgba(255, 255, 255, 0.95); }
}
.site-header.is-scrolled::before, html:not(.js) .site-header::before { opacity: 1; }
.site-header { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }

.wordmark {
  display: inline-flex; align-items: baseline; gap: 0.4em;
  font-family: var(--font-serif);
  font-size: var(--text-wordmark);
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  letter-spacing: var(--tracking-serif);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-ink);
  transform-origin: 0 50%;
  transition: transform var(--dur) var(--ease);
}
/* Wordmark (Oct 21): inline SVG outlines, A7 language. Height sized so it sits beside "Inquiries ↗" at 360px. */
.wordmark:has(.wordmark__svg) { align-items: center; }
.wordmark__svg {
  display: block; overflow: visible; flex: none;
  height: clamp(0.875rem, 0.26rem + 3vw, 1.25rem); width: auto;   /* header wordmark preset D7: Inter Tight 700, -0.01em (tools/wordmark_header.py) */
  transition: opacity var(--dur-fast) ease;
}
a.wordmark:hover .wordmark__svg { opacity: .82; }
.wordmark__sep { color: var(--color-ink-tertiary); }
.wordmark__ai { color: var(--color-ink-secondary); transition: color var(--dur) var(--ease-cubic); }
a.wordmark:hover .wordmark__ai { color: var(--color-ink); }
.site-header.is-scrolled .wordmark { transform: scale(.86); }
@media (min-width: 30.01rem) { .site-header.is-scrolled .wordmark { transform: none; } }

/* Nav: phones show only "Inquiries ↗" */
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--space-2); }
.site-nav li:not(:last-child) { display: none; }
@media (min-width: 30.01rem) { .site-nav li:not(:last-child) { display: list-item; } }
.site-nav a {
  position: relative;
  display: inline-flex; align-items: center; min-height: 2.75rem;   /* 44px tap target */
  padding: 0 var(--space-4);
  font-size: var(--text-small); font-weight: 500;
  text-decoration: none;
  color: var(--color-ink);
  border-radius: var(--radius-pill);
  touch-action: manipulation;
  transition: color var(--dur) var(--ease-cubic), opacity var(--dur-fast) linear;
}
.u-link { position: relative; text-decoration: none; }
.u-link::after {
  content: ""; position: absolute;
  left: var(--u-inset, 0); right: var(--u-inset, 0); bottom: var(--u-bottom, 0);
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 500ms var(--ease-cubic);
}
.u-link:hover::after, .u-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.site-nav .u-link { --u-inset: var(--space-4); --u-bottom: 0.7rem; }
.site-nav a.nav-inquiries { color: var(--color-ink-secondary); gap: 0.3em; }
.site-nav a.nav-inquiries:hover, .site-nav a.nav-inquiries:focus-visible { color: var(--color-ink); }
.site-nav .nav-inquiries::after { right: calc(var(--space-4) + 1.1em); background: var(--color-accent-muted); }
.nav-inquiries__arrow { width: 0.95em; height: 0.95em; flex: none; transition: transform var(--dur) var(--ease-cubic); }
.nav-inquiries:hover .nav-inquiries__arrow { transform: translate(1.5px, -1.5px); }
.site-nav a:active { color: var(--color-ink); opacity: .55; transition: none; }      /* instant tap feedback */

/* ---------- Hero panel ---------- */
.panel {
  position: relative; isolation: isolate; overflow: hidden;
  margin: var(--space-4) var(--page-inset) 0;
  padding-top: var(--header-h);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-edge) 100%);
  display: flex; flex-direction: column;
}
@media (min-width: 30.01rem) { .panel { min-height: min(42rem, calc(100svh - var(--space-8))); } }
.panel::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -40%; width: 140%; height: 90%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--color-glow), transparent);
}
.hero {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  padding: var(--space-12) var(--gutter) var(--space-16);
}
@media (min-width: 30.01rem) { .hero { padding-bottom: calc(var(--space-12) + var(--space-16)); } }
.hero__title {
  max-width: 18ch;
  font-family: var(--font-serif);
  font-size: var(--text-hero);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-hero);
  text-wrap: balance;
}
.hero__lead {
  margin-top: var(--space-6);
  max-width: 34rem;
  font-size: var(--text-hero-sub);
  line-height: var(--leading-snug);
  letter-spacing: -0.006em;
  color: var(--color-ink-faded);
  text-wrap: balance;
}

/* ---------- Page wrapper (normal flow; v10: no footer curtain) ---------- */
.page { padding-bottom: var(--space-section); }

/* ---------- Bento ---------- */
.bento { margin: var(--space-4) var(--page-inset) 0; }
@media (min-width: 30.01rem) { .bento { margin-top: var(--space-6); } }
.bento__heading {
  max-width: 20ch;
  margin: var(--space-12) 0 var(--space-10);
  padding-inline: var(--space-1);
  font-family: var(--font-serif);
  font-size: var(--text-section-display);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}
@media (min-width: 30.01rem) { .bento__heading { margin: var(--space-16) 0 var(--space-12); } }
.bento__heading-ink { display: block; }

.bento__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
}
@media (min-width: 30.01rem) {
  .bento__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: var(--tile-row); }
  .tile--wash  { grid-column: 1 / -1; grid-row: span 2; }
  .tile--waves { grid-column: 1 / -1; }
  .tile--rings { grid-column: 1 / span 3; }
  .tile--dots  { grid-column: 4 / span 3; }
}
@media (min-width: 64.01rem) {
  .bento__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tile--wash  { grid-column: 1 / span 6; grid-row: span 2; }
  .tile--waves { grid-column: 7 / span 6; }
  .tile--rings { grid-column: 7 / span 3; }
  .tile--dots  { grid-column: 10 / span 3; }
}

.tile {
  --scrim: rgba(240, 242, 245, 0.92);
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 12.5rem;
  padding: var(--tile-pad);
  border-radius: var(--tile-radius);
  background: var(--tile-bg);
  display: flex; flex-direction: column; justify-content: space-between;
}
.tile--wash { --scrim: rgba(237, 240, 244, 0.9); min-height: 17rem; background: #edf0f4; }
@media (min-width: 30.01rem) { .tile, .tile--wash { min-height: 0; } }
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--grain-image) repeat;
  background-size: var(--grain-size);
  opacity: var(--grain-opacity-tile);
}
.tile::before {          /* scrim behind the subtext (AA over the art) */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 140% 64% at 0% 100%, var(--scrim) 0%, var(--scrim) 38%, transparent 100%);
}
@media (min-width: 30.01rem) {
  .tile::before { background: radial-gradient(ellipse 85% 62% at 0% 100%, var(--scrim) 0%, var(--scrim) 30%, transparent 100%); }
  .tile--wash::before { background: radial-gradient(ellipse 100% 58% at 0% 100%, var(--scrim) 0%, var(--scrim) 42%, transparent 100%); }
}
.tile__visual { position: absolute; inset: 0; z-index: -2; overflow: hidden; border-radius: inherit; }
.tile__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tile__title {
  font-family: var(--font-serif);
  font-size: var(--text-tile-title);
  font-weight: 500;
  font-variation-settings: "opsz" 48;
  letter-spacing: var(--tracking-serif);
  line-height: 1.05;
}
.tile--wash .tile__title { font-size: var(--text-tile-title-lg); }
.tile__line {
  margin-top: auto;
  padding-top: var(--space-6);
  max-width: 32ch;
  font-size: var(--text-tile-line);
  font-weight: 450;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--color-ink-tile);
  text-wrap: balance;
}
.tile--wash .tile__line { font-size: var(--text-tile-line-lg); max-width: 30ch; }
.tile__line::before {
  content: ""; display: block;
  width: 1.5rem; height: 1px; margin-bottom: var(--space-3);
  background: currentColor; opacity: 0.5;
}

/* Discretion wash. Phones: static soft gradients (no filter, no animation) — cheap to paint.
   Desktop: the blurred, slowly drifting version (paused off-screen / in hidden tabs). */
.tile__wash {
  position: absolute; inset: -10%;
  background:
    radial-gradient(closest-side at 70% 66%, rgba(0, 38, 100, 0.62), rgba(0, 38, 100, 0.22) 55%, transparent),
    radial-gradient(closest-side at 86% 34%, rgba(0, 38, 100, 0.26), transparent),
    radial-gradient(closest-side at 44% 86%, rgba(179, 156, 128, 0.70), rgba(179, 156, 128, 0.2) 55%, transparent),
    radial-gradient(closest-side at 58% 50%, rgba(120, 140, 170, 0.32), transparent),
    radial-gradient(closest-side at 22% 22%, rgba(255, 255, 255, 1), rgba(255, 255, 255, .6) 50%, transparent);
}
@media (min-width: 48.01rem) {
  .tile__wash {
    inset: -25%;
    background:
      radial-gradient(34% 30% at 70% 68%, rgba(0, 38, 100, 0.85), transparent 70%),
      radial-gradient(20% 22% at 84% 40%, rgba(0, 38, 100, 0.40), transparent 70%),
      radial-gradient(30% 26% at 46% 84%, rgba(179, 156, 128, 0.95), transparent 72%),
      radial-gradient(22% 20% at 58% 52%, rgba(120, 140, 170, 0.45), transparent 70%),
      radial-gradient(46% 40% at 20% 22%, rgba(255, 255, 255, 1), transparent 72%);
    filter: blur(38px) saturate(1.1);
    transform-origin: 60% 60%;
  }
}
@media (min-width: 48.01rem) and (prefers-reduced-motion: no-preference) {
  .tile__wash { animation: np-drift 24s ease-in-out infinite alternate; }
  .tile--wash { will-change: transform; }   /* own layer: keeps the drifting wash clipped to the rounded tile */
  .tile--wash.is-offscreen .tile__wash, html.is-tab-hidden .tile__wash { animation-play-state: paused; }
}
@keyframes np-drift {
  from { transform: translate3d(-5%, -3%, 0) rotate(-4deg) scale(1.04); }
  to   { transform: translate3d(5%, 4%, 0) rotate(6deg) scale(1.14); }
}

/* ---------- Approach ---------- */
.section {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-section) var(--gutter) 0;
  text-align: center;
}
#approach { scroll-margin-top: var(--header-h); }
.section__label {
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-tertiary);
}
.section__statement {
  margin: var(--space-6) auto 0;
  max-width: 68rem;                     /* r7: was 58rem (60px lines at 1440) */
  font-family: var(--font-serif);
  font-size: var(--text-statement);
  font-weight: 500;                     /* r5: medium (the self-hosted Newsreader file already spans wght 400–500) */
  font-variation-settings: "opsz" 36;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-serif);
}
.section__line { position: relative; display: block; text-wrap: balance; }
.section__ph { display: inline-block; max-width: 100%; text-wrap: balance; }   /* r5: phrases */
.section__line + .section__line { margin-top: var(--ap-gap, 0.9em); }
@media (min-width: 30.01rem) { .section { --ap-gap: 0.95em; } }   /* r6: was 0.6em, room for the separator */
/* r6: a short sand hairline between statements, centred in the gap. r7: it hangs under its OWN statement
   (::after) so it can draw in right after that statement inks; the last one is wider and closes the list. */
.section__line::after {
  content: ""; position: absolute; left: 50%; bottom: calc(var(--ap-gap, 0.9em) * -0.5);
  width: 1.5rem; height: 1px; margin-left: -0.75rem;
  background: var(--color-accent-muted); opacity: .9;
}
.section__line--4::after { bottom: -0.45em; width: 2.75rem; margin-left: -1.375rem; opacity: 1; }
@media (min-width: 48.01rem) { .section__line { white-space: nowrap; } }

/* ---------- Footer (normal flow) ---------- */
.site-footer {
  position: relative;
  background: var(--color-footer);
  font-weight: 450;
  line-height: 1.4;
  scroll-margin-top: var(--space-8);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-12) var(--gutter) var(--space-8);
}
.site-footer__brand { display: flex; overflow: visible; line-height: 1; }
.footer-contact { margin-top: var(--space-10); }
.footer-legal { margin-top: var(--space-10); font-size: var(--text-small); color: var(--color-ink-secondary); }
@media (min-width: 48.01rem) {
  .site-footer__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto;
    column-gap: 1.25rem; min-height: 24rem;
    padding: var(--space-16) var(--gutter) var(--space-10);
  }
  .site-footer__brand { grid-column: 1 / span 7; grid-row: 1; align-self: end; }
  .footer-contact { grid-column: 8 / span 5; grid-row: 1; align-self: end; margin-top: 0; }
  .footer-legal { grid-column: 1 / span 7; grid-row: 2; margin-top: var(--space-6); }
}
.footer-mark { display: inline-block; overflow: visible; line-height: 1; color: var(--color-ink); text-decoration: none; border-radius: 2px; transition: opacity var(--dur-fast) ease; }
.footer-mark:hover { opacity: 0.86; }
.footer-mark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; }
.np-mark { overflow: visible; display: block; height: calc(var(--mark-height) * var(--mark-scale, 1)); width: auto; max-width: 100%; }
.np-mark__accent { fill: var(--color-accent-muted); }
.np-mark__soft { fill: rgba(0, 12, 31, 0.55); }

.contact-card {
  background: var(--color-card);
  border: 1px solid var(--color-card-edge);
  border-radius: var(--tile-radius);
  padding: calc(var(--tile-pad) + 0.25rem) var(--tile-pad) var(--tile-pad);
}
.contact-card__heading {
  font-family: var(--font-serif);
  font-size: var(--text-card-title);
  font-weight: 400;
  font-variation-settings: "opsz" 48;
  letter-spacing: var(--tracking-serif);
  line-height: 1.05;
}
.footer-form { margin-top: calc(var(--space-12) - 0.6875rem); }
@media (min-width: 48.01rem) { .footer-form { margin-top: calc(var(--space-16) - 0.6875rem); } }
.footer-form__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.footer-form__input {
  flex: 1; min-width: 0; min-height: 2.75rem;            /* 44px tap target */
  padding: 0; border: 0; margin: 0;
  background: transparent;
  font: inherit; font-size: max(1rem, 1em);              /* ≥16px: no iOS focus zoom */
  color: var(--color-ink); letter-spacing: inherit;
  outline: none;
}
.footer-form__input::placeholder { color: var(--color-ink-tertiary); opacity: 1; }
.footer-form__input:disabled { color: var(--color-ink-secondary); }
.footer-form__button {
  position: relative; flex-shrink: 0;
  padding: 0; border: 0; margin: 0;
  background: none;
  font: inherit; letter-spacing: inherit;
  color: var(--color-ink);
  cursor: pointer;
  border-radius: 2px;
  touch-action: manipulation;
  transition: color var(--dur-fast) ease;
}
.footer-form__button::before { content: ""; position: absolute; inset: 50% -0.5rem auto; height: 2.75rem; transform: translateY(-50%); }  /* 44px hit area */
.footer-form__arrow { display: inline-block; width: 0.95em; height: 0.95em; vertical-align: -0.1em; margin-left: 0.2em; transition: transform var(--dur) var(--ease-cubic); }
.footer-form__button:hover:not(:disabled) { color: var(--color-sand-ink); }
.footer-form__button:hover:not(:disabled) .footer-form__arrow { transform: translateX(3px); }
.footer-form__button:active:not(:disabled) { color: var(--color-sand-ink); transition: none; }
.footer-form__button:active:not(:disabled) .footer-form__arrow { transform: translateX(4px); transition: none; }
.footer-form__button:focus-visible { outline: 2px solid var(--color-sand-ink); outline-offset: 4px; color: var(--color-sand-ink); }
.footer-form__button:disabled { cursor: default; }
.footer-form__rule {
  height: 1px;
  background: var(--color-rule-strong);
  transform-origin: 0 50%;
  transition: background-color var(--dur) var(--ease-cubic), transform var(--dur) var(--ease-cubic);
}
.footer-form__field:focus-within .footer-form__rule { background: var(--color-sand-ink); transform: scaleY(2); }
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.footer-form__status { margin-top: var(--space-3); font-size: var(--text-small); color: var(--color-ink-secondary); }
.footer-form__status:empty { display: none; }
.footer-form[data-state="error"] .footer-form__status { color: #9b1c1c; }
.footer-form[data-state="error"] .footer-form__rule { background: #9b1c1c; }
.footer-form[data-state="success"] .footer-form__field { display: none; }
.footer-form[data-state="success"] .footer-form__status {
  margin-top: 0; padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-rule-strong);
  font-size: var(--text-body); color: var(--color-ink);
}
.footer-form__turnstile { margin-top: var(--space-3); }
.footer-form__turnstile:empty { display: none; }

/* =====================================================================
   Motion — everything below is armed only with motion allowed; scroll-linked
   pieces only once app.js adds .js-motion (after first paint).
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Page load: short, transform + opacity only */
  .site-header > * { animation: np-fade var(--dur) var(--ease) both; }   /* children, not the header: an opacity animation on the header would make it a backdrop root and switch off the glass blur */
  .hero__title { animation: np-rise 420ms var(--ease) both; }
  .hero__lead  { animation: np-rise 420ms var(--ease) 80ms both; }

  /* Generic reveal: fade + slight rise */
  .js-motion [data-reveal] {
    opacity: 0;
    transform: translateY(var(--rise));
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .js-motion [data-reveal].is-visible { opacity: 1; transform: none; }
  .footer-contact[data-reveal] { --reveal-delay: 80ms; }

  /* Heading: readable from the start (40% ink), rises 12px into place */
  .js-motion .bento__heading[data-reveal] { opacity: .4; }
  .js-motion .bento__heading[data-reveal].is-visible { opacity: 1; }

  /* Bento entrance: Discretion leads, then Long horizons, Capital, Judgment (--stagger apart;
     phones: 0, each tile triggers as it enters). Art draws in with its tile. */
  .bento__grid > .tile:nth-child(1) { --reveal-delay: 0ms; }
  .bento__grid > .tile:nth-child(2) { --reveal-delay: calc(var(--stagger) * 1); }
  .bento__grid > .tile:nth-child(3) { --reveal-delay: calc(var(--stagger) * 2); }
  .bento__grid > .tile:nth-child(4) { --reveal-delay: calc(var(--stagger) * 3); }
  .js-motion .tile .tile__visual {
    opacity: 0;
    transition: opacity var(--dur-art) var(--ease);
    transition-delay: calc(var(--reveal-delay, 0ms) + 60ms);
  }
  .js-motion .tile.is-visible .tile__visual { opacity: 1; }

  /* Bento settle: app.js scrubs --settle 0→1 (scale .97 → 1) */
  .js-motion .bento { --settle: 0; }
  .js-motion .bento__grid { transform: scale(calc(0.97 + 0.03 * var(--settle))); transform-origin: 50% 0; transition: transform 240ms var(--ease); }
  /* once settled, drop the transform entirely (frees the layer; also avoids a Chrome rounded-clip glitch) */
  .js-motion .bento.is-settled .bento__grid, .js-motion .bento.is-settled .tile__svg { transform: none; transition: none; }

  /* Approach (r7): ONE STATEMENT AT A TIME as you scroll, both ways. app.js writes one --p (0→1) per statement from
     its own position: 0 while its top is below 85% of the viewport height, 1 by 71% — the same band for every
     statement, and the statements sit ~15% of a viewport apart, so they arrive one after another (1, 2, 3, 4) and
     each is full ink well before the middle of the screen. Inside a statement phrase 1 runs over p 0→.7 and
     phrase 2 over .3→1: hidden (opacity 0, 24px lower, ≤4px blur only while mid-arrival) → full ink. Its divider
     draws in after it (p .6→1). Scrolling back down un-inks them in reverse. On load with the section already on
     screen they play in one by one. Transforms/opacity only: no layout shift. html.ap-pending holds the first paint. */
  .js-motion [data-line] { --p: 0; }
  .js-motion [data-line] .section__ph { --q: clamp(0, calc(var(--p) / 0.7), 1); }
  .js-motion [data-line] .section__ph + .section__ph { --q: clamp(0, calc((var(--p) - 0.3) / 0.7), 1); }
  .js-motion [data-line] .section__ph {
    opacity: var(--q);
    transform: translate3d(0, calc((1 - var(--q)) * 24px), 0);
    transition: transform 220ms var(--ease), opacity 220ms var(--ease), filter 220ms var(--ease);
  }
  .js-motion [data-line].is-active .section__ph { will-change: transform, opacity, filter; filter: blur(calc((1 - var(--q)) * 4px)); }
  .js-motion .section__line::after {
    transform: scaleX(clamp(0, calc((var(--p) - 0.6) / 0.4), 1));
    transition: transform 220ms var(--ease);
  }
  .ap-pending .section__ph { opacity: 0; transform: translate3d(0, 24px, 0); animation: hero-failsafe 900ms var(--ease-soft) 2400ms forwards; }
  .ap-pending .section__line::after { transform: scaleX(0); animation: hero-failsafe 900ms var(--ease-soft) 2500ms forwards; }
}
/* Desktop-only extras (filters and SVG paint animations stay off phones) */
@media (prefers-reduced-motion: no-preference) and (min-width: 48.01rem) and (hover: hover) {
  .js-motion .bento .tile__svg { transform: translateY(calc((1 - var(--settle)) * 10px)); transition: transform 240ms var(--ease); }
  /* richer draw-ins on desktop */
  .js-motion .tile--waves .tile__visual, .js-motion .tile--rings .tile__visual, .js-motion .tile--dots .tile__visual { opacity: 1; transform: none; }
  .js-motion .tile--waves polyline { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-art) var(--ease); transition-delay: calc(var(--reveal-delay) + var(--i, 0ms)); }
  .js-motion .tile--waves.is-visible polyline { stroke-dashoffset: 0; }
  .js-motion .tile--rings circle { transform-box: view-box; transform-origin: 330px 300px; transform: scale(.86); opacity: 0;
    transition: transform var(--dur-art) var(--ease), opacity var(--dur-art) var(--ease); transition-delay: calc(var(--reveal-delay) + var(--i, 0ms)); }
  .js-motion .tile--rings.is-visible circle { transform: none; opacity: 1; }
  .js-motion .tile--dots .tile__svg { clip-path: circle(0% at 72% 78%); transition: clip-path calc(var(--dur-art) * 1.4) var(--ease); transition-delay: calc(var(--reveal-delay) + 60ms); }
  .js-motion .tile--dots.is-visible .tile__svg { clip-path: circle(150% at 72% 78%); }
  .js-motion .tile--waves polyline:nth-child(1) { --i: 0ms; }
  .js-motion .tile--waves polyline:nth-child(2) { --i: 10ms; }
  .js-motion .tile--waves polyline:nth-child(3) { --i: 20ms; }
  .js-motion .tile--waves polyline:nth-child(4) { --i: 30ms; }
  .js-motion .tile--waves polyline:nth-child(5) { --i: 40ms; }
  .js-motion .tile--waves polyline:nth-child(6) { --i: 50ms; }
  .js-motion .tile--waves polyline:nth-child(7) { --i: 60ms; }
  .js-motion .tile--waves polyline:nth-child(8) { --i: 70ms; }
  .js-motion .tile--waves polyline:nth-child(9) { --i: 80ms; }
  .js-motion .tile--waves polyline:nth-child(10) { --i: 90ms; }
  .js-motion .tile--waves polyline:nth-child(11) { --i: 100ms; }
  .js-motion .tile--waves polyline:nth-child(12) { --i: 110ms; }
  .js-motion .tile--waves polyline:nth-child(13) { --i: 120ms; }
  .js-motion .tile--waves polyline:nth-child(14) { --i: 130ms; }
  .js-motion .tile--waves polyline:nth-child(15) { --i: 140ms; }
  .js-motion .tile--waves polyline:nth-child(16) { --i: 150ms; }
  .js-motion .tile--waves polyline:nth-child(17) { --i: 160ms; }
  .js-motion .tile--waves polyline:nth-child(18) { --i: 170ms; }
  .js-motion .tile--waves polyline:nth-child(19) { --i: 180ms; }
  .js-motion .tile--waves polyline:nth-child(20) { --i: 190ms; }
  .js-motion .tile--waves polyline:nth-child(21) { --i: 200ms; }
  .js-motion .tile--waves polyline:nth-child(22) { --i: 210ms; }
  .js-motion .tile--waves polyline:nth-child(23) { --i: 220ms; }
  .js-motion .tile--waves polyline:nth-child(24) { --i: 230ms; }
  .js-motion .tile--waves polyline:nth-child(25) { --i: 240ms; }
  .js-motion .tile--waves polyline:nth-child(26) { --i: 250ms; }
  .js-motion .tile--waves polyline:nth-child(27) { --i: 260ms; }
  .js-motion .tile--waves polyline:nth-child(28) { --i: 270ms; }
  .js-motion .tile--waves polyline:nth-child(29) { --i: 280ms; }
  .js-motion .tile--waves polyline:nth-child(30) { --i: 290ms; }
  .js-motion .tile--rings circle:nth-child(1) { --i: 0ms; }
  .js-motion .tile--rings circle:nth-child(2) { --i: 25ms; }
  .js-motion .tile--rings circle:nth-child(3) { --i: 50ms; }
  .js-motion .tile--rings circle:nth-child(4) { --i: 75ms; }
  .js-motion .tile--rings circle:nth-child(5) { --i: 100ms; }
  .js-motion .tile--rings circle:nth-child(6) { --i: 125ms; }
  .js-motion .tile--rings circle:nth-child(7) { --i: 150ms; }
  .js-motion .tile--rings circle:nth-child(8) { --i: 175ms; }
  .js-motion .tile--rings circle:nth-child(9) { --i: 200ms; }
  .js-motion .tile--rings circle:nth-child(10) { --i: 225ms; }
  .js-motion .tile--rings circle:nth-child(11) { --i: 250ms; }
  .js-motion .tile--rings circle:nth-child(12) { --i: 275ms; }
  .js-motion .tile--rings circle:nth-child(13) { --i: 300ms; }
  .js-motion .tile--rings circle:nth-child(14) { --i: 325ms; }
  .js-motion .tile--rings circle:nth-child(15) { --i: 350ms; }
  .js-motion .tile--rings circle:nth-child(16) { --i: 375ms; }
  .js-motion .tile--rings circle:nth-child(17) { --i: 400ms; }
  .js-motion .tile--rings circle:nth-child(18) { --i: 425ms; }
  .js-motion .tile--rings circle:nth-child(19) { --i: 450ms; }
}
@keyframes np-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes np-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =====================================================================
   r2 (shipped Oct 21, Mr B): P2 hero reveal · P3 phone rhythm · P5 Inquiries arrival · P6 form states ·
   P7 focus/a11y · P8 phone tile art · P9 A7 signature. (P4 thumb dock was not shipped.)
   transform / opacity / clip-path only; reduced motion: static (global kill switch above
   plus explicit fallbacks below).
   ===================================================================== */

/* ---------- Hero intro (r4, Oct 22 · Mr B: slower, softer): the H1 comes in from a blur — blur(10px) → sharp,
   opacity 0 → 1, rising 14px — over ~2.2s (transform 2.4s) with a soft ease-in-out; the sub-line follows. html.hero-pending is
   baked by build.py; app.js waits for the fonts (max 1200ms) so the type never sharpens on the fallback face,
   then swaps to .hero-go. After the intro the filter is `none` (no lingering filter layer on iOS).
   JS off: a CSS failsafe completes it. Reduced motion: static.
   Scroll (app.js, rAF, read-then-write): as the hero scrolls away the H1 softly fades, blurs (≤6px) and lifts,
   and comes back when scrolling up; --hq is 0 at rest, where the class (and so the filter) is removed. ---------- */
:root { --ease-soft: cubic-bezier(.16, 1, .3, 1); --ease-blur: cubic-bezier(.33, 0, .2, 1); }
@media (prefers-reduced-motion: no-preference) {
  .hero__title, .hero__lead { animation: none; }
  .panel::before { animation: np-fade 900ms var(--ease) both; }
  .hero-pending .hero__title {
    opacity: 0.02; filter: blur(10px); transform: translate3d(0, 14px, 0);   /* 0.02, not 0: the first paint stays an LCP candidate */
    animation: hero-failsafe 1600ms var(--ease-blur) 2400ms forwards;
  }
  .hero-go:not(.hero-done) .hero__title { will-change: opacity, filter, transform; }
  .hero-go:not(.hero-done) .hero__title { transition: opacity 2000ms var(--ease-blur), filter 2200ms var(--ease-blur), transform 2400ms var(--ease-blur); }
  .hero-pending .hero__lead { opacity: 0; transform: translate3d(0, 6px, 0); animation: hero-failsafe 900ms var(--ease-soft) 2900ms forwards; }
  .hero__lead { transition: opacity 1200ms var(--ease-blur) 1200ms, transform 1400ms var(--ease-blur) 1200ms; }
  /* scroll-linked exit (after the intro); a short damping keeps it smooth between frames */
  .hero-done .hero__title { transition: opacity 120ms linear, filter 120ms linear, transform 120ms linear; }
  .hero-done .hero__title.is-hscroll {
    will-change: opacity, filter, transform;
    opacity: calc(1 - 0.82 * var(--hq, 0));
    filter: blur(calc(var(--hq, 0) * 6px));
    transform: translate3d(0, calc(var(--hq, 0) * -26px), 0);
  }
}
@keyframes hero-failsafe { to { opacity: 1; transform: none; filter: none; } }
/* r6: with scripting off nothing waits for JS, so the H1 and Approach are static from the first paint and no
   failsafe animation leaves a computed blur(0px) filter behind. (Older browsers without the query keep the failsafe.) */
@media (scripting: none) {
  .hero-pending .hero__title, .hero-pending .hero__lead, .ap-pending .section__ph,
  .ap-pending .section__line::after { opacity: 1; filter: none; transform: none; animation: none; }
}
@keyframes r2-soft-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- P3 · Type & rhythm (phones): calmer first screen, fuller H1, larger Approach ---------- */
@media (max-width: 30rem) {
  .panel { min-height: 68svh; }
  .hero { padding-top: var(--space-8); padding-bottom: calc(var(--space-12) + var(--space-4)); }
  .hero__title { font-size: min(15.4vw, 3.875rem); max-width: 5.6em; line-height: 0.98; letter-spacing: -0.04em; }  /* r4: was min(12.6vw, 3.125rem) */
  .hero__lead { margin-top: var(--space-8); font-size: 1rem; }
  .bento__heading { margin: var(--space-16) 0 var(--space-8); }
  /* r7: as large as keeps every statement at two balanced lines: 38.2px at 390, 34.9 at 360, 42.5 at 430 (r6: 32.8) */
  .section__statement { font-size: min(calc((100vw - 2.5rem) * 0.109), 2.75rem); line-height: 1.16; }
  .section { --ap-gap: 1.05em; }   /* r5: 1em of plain gap; r6: the separator sits in the middle */
  .section__ph { display: block; }   /* r6: every statement sets as two lines, broken at the phrase */
  .section__label { font-size: 0.8125rem; }
  .section { padding-top: calc(var(--space-section) + var(--space-4)); }
}
/* r7: small tablets (481–704px) where a statement cannot hold one line at the tablet size: set two-line phrases
   like phones, at the phone ratio, so all four stay consistent (no lone wrapped statement). */
@media (min-width: 30.01rem) and (max-width: 44rem) {
  .section__statement { font-size: min(calc((100vw - 3rem) * 0.109), 2.75rem); line-height: 1.16; }
  .section__ph { display: block; }
}
@media (min-width: 44.01rem) and (max-width: 48rem) { .section__line { white-space: nowrap; } }
@media (min-width: 48.01rem) {
  .section__statement { font-size: clamp(2.25rem, 0.6rem + 3.6vw, 3.75rem); }   /* r7: 60px at 1440, 46.5 at 1024 (r6: 51.7 at 1440) */
  .section__label { margin-bottom: var(--space-3); font-size: 0.8125rem; }
}

/* ---------- P5 · Inquiries arrival cue: the card's rule draws in sand, a soft edge glows once ---------- */
.contact-card { position: relative; }
.contact-card::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 1px solid var(--color-sand-ink); opacity: 0;
}
.footer-form__rule { position: relative; }
.footer-form__rule::after {
  content: ""; position: absolute; inset: 0; background: var(--color-sand-ink);
  transform: scaleX(0); transform-origin: 0 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .contact-card.is-arriving::after { animation: r2-glow 1400ms var(--ease) both; }
  .contact-card.is-arriving .footer-form__rule::after { animation: r2-draw 700ms var(--ease) 120ms both; }
}
.footer-form__field:focus-within .footer-form__rule::after { transform: scaleX(1); }
@keyframes r2-glow { 0% { opacity: 0; } 30% { opacity: .55; } 100% { opacity: 0; } }
@keyframes r2-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- P6 · Form states: quiet Send until typed, pending shimmer, success tick, error nudge ---------- */
.footer-form__input:placeholder-shown + .footer-form__button:not(:focus-visible) { color: var(--color-ink-tertiary); }
.footer-form__button { transition: color var(--dur) var(--ease-cubic); }
.footer-form__rule { position: relative; overflow: hidden; }
.footer-form[data-state="pending"] .footer-form__rule { background: var(--color-rule-strong); }
.footer-form[data-state="pending"] .footer-form__rule::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 32%;
  background: linear-gradient(90deg, transparent, var(--color-accent) 50%, transparent);
  animation: r2-shimmer 1.1s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes r2-shimmer { from { transform: translateX(-100%); } to { transform: translateX(320%); } }
.footer-form[data-state="pending"] .footer-form__button { color: var(--color-ink-tertiary); }
.footer-form__status { animation: r2-soft-in 280ms var(--ease) both; }
.footer-form[data-state="success"] .footer-form__status { display: flex; align-items: center; gap: 0.6em; }
.footer-form[data-state="success"] .footer-form__status::before {
  content: ""; flex: none; width: 0.42em; height: 0.78em; margin: -0.2em 0.15em 0 0.1em;
  border: solid var(--color-sand-ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
  animation: r2-tick 420ms var(--ease) 120ms both;
}
@keyframes r2-tick { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0 0 0 0); } }
.footer-form[data-state="error"] .footer-form__row { animation: r2-nudge 360ms var(--ease-cubic) both; }
@keyframes r2-nudge { 0%,100% { transform: none; } 25% { transform: translateX(-3px); } 60% { transform: translateX(2px); } }

/* ---------- P7 · Focus, keyboard and a11y: one focus language, Approach marked current ---------- */
:root { --focus-w: 2px; }
:focus-visible { outline: var(--focus-w) solid var(--color-focus); outline-offset: 3px; border-radius: 6px; }
.footer-form__button:focus-visible { outline-color: var(--color-focus); color: var(--color-ink); }
.footer-form__input:focus-visible { outline: none; }          /* the 2px sand rule is the indicator */
.site-nav a:focus-visible { outline-offset: -2px; border-radius: var(--radius-pill); }
.site-nav a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; opacity: .35; }
.skip-link { transition: transform var(--dur) var(--ease); top: var(--space-4); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
@media (forced-colors: active) {
  .tile, .contact-card, .panel { border: 1px solid CanvasText; }
  .footer-form__rule { background: CanvasText; }
}
@media (prefers-contrast: more) {
  :root { --color-ink-faded: rgba(0, 12, 31, .78); --color-ink-tertiary: rgba(0, 12, 31, .74); --color-ink-secondary: rgba(0, 12, 31, .82); }
}

/* ---------- P8 · Tile art on phones: clearer Discretion wash with a light drift; art draws in ---------- */
@media (max-width: 48rem) {
  .tile__wash {
    inset: -18%;
    background:
      radial-gradient(closest-side at 60% 56%, rgba(0, 38, 100, 0.70), rgba(0, 38, 100, 0.24) 50%, transparent),
      radial-gradient(closest-side at 88% 30%, rgba(0, 38, 100, 0.30), transparent),
      radial-gradient(closest-side at 80% 74%, rgba(179, 156, 128, 0.95), rgba(179, 156, 128, 0.3) 55%, transparent),
      radial-gradient(closest-side at 56% 46%, rgba(140, 158, 186, 0.30), transparent),
      radial-gradient(closest-side at 18% 18%, #fff, rgba(255, 255, 255, .75) 45%, transparent);
  }
}
@media (max-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .tile__wash { animation: r2-drift-m 18s ease-in-out infinite alternate; }
  .tile--wash.is-offscreen .tile__wash, .is-tab-hidden .tile__wash { animation-play-state: paused; }
  /* r3 fixes: tile art enters on the compositor (opacity/transform, no per-frame clip-path paint);
     the drift is promoted and waits until its tile has been revealed */
  .tile__wash { will-change: transform; }
  .tile--wash:not(.is-visible) .tile__wash { animation-play-state: paused; }
  .js-motion .tile--waves .tile__svg { opacity: 0; transform: translate3d(-5%, 0, 0);
    transition: opacity 900ms var(--ease-soft) 80ms, transform 1200ms var(--ease-soft) 80ms; }
  .js-motion .tile--rings .tile__svg { transform: scale(.92); transform-origin: 82% 94%; transition: transform 1200ms var(--ease-soft) 60ms; }
  .js-motion .tile--dots .tile__svg { opacity: 0; transform: scale(.94); transform-origin: 72% 78%;
    transition: opacity 900ms var(--ease-soft) 60ms, transform 1200ms var(--ease-soft) 60ms; }
  .js-motion .tile--waves.is-visible .tile__svg, .js-motion .tile--rings.is-visible .tile__svg,
  .js-motion .tile--dots.is-visible .tile__svg { opacity: 1; transform: none; }
}
@keyframes r2-drift-m {
  from { transform: translate3d(-4%, -2%, 0) scale(1.02); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.08); }
}

/* ---------- P9 · Mark A7 signature: slash draws, AI settles; phones: mark spans the column ---------- */
.footer-mark--a7 .np-mark path { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  /* r3 fix: the slash slides in along its own angle (opacity/transform), no clip-path repaint of the full-width mark */
  .js-motion .footer-mark--a7 .np-mark path:nth-child(2) { opacity: 0; transform: translate3d(8%, -10%, 0);
    transition: opacity 700ms var(--ease-soft) 140ms, transform 1000ms var(--ease-soft) 140ms; }
  .js-motion .footer-mark--a7 .np-mark path:nth-child(3) { opacity: 0; transform: translateY(6%);
    transition: opacity 800ms var(--ease-soft) 380ms, transform 1000ms var(--ease-soft) 380ms; }
  .js-motion .site-footer__brand.is-visible .np-mark path:nth-child(2),
  .js-motion .site-footer__brand.is-visible .np-mark path:nth-child(3) { transform: none; opacity: 1; }
  .js-motion .site-footer__brand[data-reveal] { transform: none; }  /* NP itself stays put; only fades */
}
@media (max-width: 48rem) {
  .footer-mark { display: block; width: 100%; }
  .np-mark { width: 100%; height: auto; }
  .footer-contact { margin-top: var(--space-8); }
}
@media (min-width: 48.01rem) {
  .contact-card { padding: calc(var(--tile-pad) + 0.5rem) calc(var(--tile-pad) + 0.25rem) calc(var(--tile-pad) + 0.25rem); }
  .footer-form__input, .footer-form__button { font-size: 1.0625rem; }
}