/* Avery — tokens, then layout top to bottom.
   Visual spec from Figma node 2167:3832; motion values lifted from propy.com/avery. */

:root {
  /* 1px up to a 1440px window, then proportional to the window width (capped at 2.2x) */
  --u: min(max(1px, calc(100vw / 1440)), 2.2px);
  --white: #fff;
  --ink: #434552;          /* primary/800 */
  --ink-hover: #30323c;
  --slate: #7c7f95;        /* primary/500 */
  --mist: #aaacba;         /* primary/300 */
  --sky-bg: #eff6ff;
  --lilac-bg: #e4e6fe;
  --grey-bg: #f6f7f8;
  --pink: #df6bfe;
  --violet: #8765ff;
  --sky: #38a6fb;

  --serif: "Playfair Display", Georgia, serif;
  --mono: "Roboto Mono", ui-monospace, monospace;
  --grotesk: "Space Grotesk", system-ui, sans-serif;
  --sans: "Roboto", system-ui, sans-serif;

  --radius: calc(20 * var(--u));
  --gutter: calc(24 * var(--u));
  --wrap: calc(1392 * var(--u));
  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  background: var(--sky-bg);   /* the page ends on the celeste contact block: fills Safari's bottom bar / overscroll (body is celeste too) */
}
body {
  margin: 0;
  background: var(--sky-bg);                  /* same celeste as html and the last block: nothing white below the footer */
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main {
  padding-top: calc(60 * var(--u));           /* room for the fixed header */
  background: var(--white);                   /* the white page; only the contact block at its end is celeste */
}
img, video { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; padding: 0; background: none; cursor: pointer; }

/* ---------- Type ---------- */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(calc(36 * var(--u)), 4.1667vw, calc(60 * var(--u)));
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.display--white { color: var(--white); }
.title {
  font-family: var(--serif);
  font-size: clamp(calc(30 * var(--u)), 3.0556vw, calc(44 * var(--u)));
  line-height: 1.0909;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  font-family: var(--grotesk);
  font-size: calc(14 * var(--u));
  line-height: calc(24 * var(--u));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}
.eyebrow--lg { line-height: calc(57 * var(--u)); justify-content: center; text-align: center; }
.eyebrow--tall { line-height: calc(57 * var(--u)); }

/* Long arrows (⟶ ⟵) drawn inline so they don't depend on a fallback font */
.arrow {
  display: inline-block;
  width: 1.5em;
  height: 0.33em;
  margin-left: 0.05em;
  vertical-align: 0.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.arrow--left { transform: scaleX(-1); margin: 0 0.05em 0 0; }
.mono {
  font-family: var(--mono);
  font-weight: 300;
  font-size: calc(16 * var(--u));
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #000002;
}

/* ---------- Primitives ---------- */
.card { border-radius: var(--radius); }
.card--blue { background: var(--sky-bg); }
.card--pink { background: rgba(223, 107, 254, 0.08); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(200 * var(--u));
  height: calc(44 * var(--u));
  padding: 0 calc(16 * var(--u));
  border-radius: calc(4 * var(--u));
  background: var(--ink);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(12 * var(--u));
  line-height: calc(20 * var(--u));
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.btn:hover { background: var(--ink-hover); }
.btn:focus-visible, .play:focus-visible, .team__btn:focus-visible, .modal__close:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: calc(3 * var(--u));
}

/* Header — fixed, white, no shadow (as on Propy). The CTA fades in once the page has scrolled. */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1300;
  height: calc(60 * var(--u));
  background: var(--white);
}
.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(calc(1440 * var(--u)), 100%);
  height: 100%;
  margin-inline: auto;
  padding: 0 var(--gutter);
}
.header__logo { display: block; }
.header__cta {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-weight: 400;
  font-size: calc(14 * var(--u));
  line-height: 1;
  color: #27282a;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-ui);
}
.header.is-scrolled .header__cta { opacity: 1; pointer-events: auto; }
.header__cta .arrow { vertical-align: 0.02em; stroke-width: 3.6; }

/* Shared two-up row: hero, feature blocks, photos */
.hero, .split {
  display: flex;
  gap: calc(20 * var(--u));
  width: min(var(--wrap), 100% - var(--gutter) * 2);
  margin-inline: auto;
}
.hero {
  --gap: calc(22 * var(--u));
  gap: var(--gap);
  /* viewport - fixed header - bottom frame (same size as the side margins) */
  height: calc(100vh - 60 * var(--u) - var(--gutter));
  height: calc(100svh - 60 * var(--u) - var(--gutter));
  min-height: calc(520 * var(--u));
}
.split { --gap: calc(20 * var(--u)); }
.hero > *, .split > * { flex: 0 0 calc((100% - var(--gap)) / 2); min-width: 0; }
.split { height: calc(575 * var(--u)); margin-top: calc(20 * var(--u)); }
.split--reverse, .split--photos { margin-top: calc(20 * var(--u)); }

/* ---------- Hero ---------- */
.hero__media {
  position: relative;
  height: 100%;
  border-radius: var(--radius);
}
.hero__tint {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background-image: linear-gradient(128.69deg, rgba(58, 157, 250, 0.8) 13.5%, rgba(178, 149, 254, 0.8) 60.13%);
}
.hero__video, .hero__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  mix-blend-mode: overlay;
}
.hero__still { opacity: 0; pointer-events: none; }
.hero__still.is-on { opacity: 1; }
.hero__video.is-hidden { opacity: 0; }
/* phones: the tint is already in the pixels (tools/bake_hero.py), so nothing is blended while the video plays */
.hero--baked .hero__tint { display: none; }
.hero--baked .hero__video, .hero--baked .hero__still { mix-blend-mode: normal; }
.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(40 * var(--u));
  padding: calc(60 * var(--u));
  height: 100%;
}
.hero__copy .display { max-width: calc(543 * var(--u)); }
.hero__copy .btn { align-self: flex-start; }

/* ---------- Quote ---------- */
.quote {
  width: min(calc(1156 * var(--u)), 100% - var(--gutter) * 2);
  margin: 0 auto;
  padding: calc(130 * var(--u)) 0 0;
  text-align: center;
}
.quote .eyebrow { margin-top: 0; }

/* ---------- Press ---------- */
.press {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  width: min(calc(1440 * var(--u)), 100%);
  margin: 0 auto;
  /* logos sit close under the attribution, with 80px of air at the sides; 110 + the 20 row gap = 130 below, same as above the quote */
  padding: calc(48 * var(--u)) calc(80 * var(--u)) calc(110 * var(--u));
}
.press img { width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); object-fit: cover; flex: none; }

/* ---------- Feature text cards ---------- */
.feature-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(60 * var(--u)) calc(44 * var(--u));
}
.feature-text .display { max-width: calc(564 * var(--u)); }
.feature-text__top { display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.avatars { position: relative; width: calc(148 * var(--u)); height: calc(90 * var(--u)); mix-blend-mode: luminosity; }
.avatars img { position: absolute; top: 0; width: calc(80 * var(--u)); height: calc(80 * var(--u)); border-radius: 50%; }
/* Figma leaves this one at its default fit: the whole portrait, squeezed into the circle */
.avatars .avatars__b { left: calc(72 * var(--u)); top: calc(4 * var(--u)); width: calc(72 * var(--u)); height: calc(72 * var(--u)); object-fit: fill; }
.avatars__a { left: 0; object-fit: cover; border: calc(4 * var(--u)) solid var(--grey-bg); }

/* ---------- Image tiles with play button ---------- */
.tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* Violet tile uses a violet-tinted copy of the dither (alpha = darkness), so no screen layer */
.tile--violet::after { content: none; }
/* The pink tile uses Propy's pre-coloured pixel art, so no screen layer */
.tile--pink { background: rgba(223, 107, 254, 0.08); }
.tile--pink::after { content: none; }
.tile--pink .tile__img { object-position: center bottom; }

.play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: calc(120 * var(--u));
  height: calc(120 * var(--u));
  border-radius: 50%;
  background: var(--ink);
  transition: background-color 0.2s var(--ease-ui), transform 0.16s ease-out;
}
.play:hover, .tile:hover .play { background: var(--ink-hover); }
.play:active { transform: scale(0.96); }

/* Dither "noise" on the two image tiles. Propy punches the picture with a repeating-radial-gradient mask whose period is
   ~0.0003px: Chrome turns that into per-pixel noise, but Safari/iOS renders it fully transparent (the tiles came out blank).
   So the noise is a real 128px random-dot alpha texture instead. Static on purpose (no flicker). */
.halftone {
  position: absolute;
  inset: 0;
  -webkit-mask: url("assets/img/noise.png") 0 0 / 128px 128px repeat;
  mask: url("assets/img/noise.png") 0 0 / 128px 128px repeat;
}
}

/* ---------- Chat marquee ---------- */
.chat { margin-top: calc(20 * var(--u)); padding-top: calc(120 * var(--u)); }
.chat__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(20 * var(--u));
  margin-bottom: calc(120 * var(--u));
}
.chat__head > img { margin-bottom: calc(60 * var(--u)); }
.chat__head .eyebrow--lg { line-height: calc(17 * var(--u)); }
.chat__head .display { text-wrap: balance; }

.marquee { overflow: hidden; width: 100%; }
.marquee + .marquee { margin-top: calc(23 * var(--u)); }
.marquee__track {
  display: flex;
  width: fit-content;
  transform: translate3d(var(--x, 0px), 0, 0);
  transition: transform 0.1s linear;
  will-change: transform;
}
.marquee__set { display: flex; gap: calc(24 * var(--u)); padding-right: calc(24 * var(--u)); flex: none; }

.msg {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: none;
  width: calc(385 * var(--u));
  height: calc(280 * var(--u));
  padding: calc(34 * var(--u)) calc(29 * var(--u));
  border-radius: var(--radius);
  color: #333;
}
.msg--wide { width: calc(440 * var(--u)); padding-inline: calc(24 * var(--u)); }
.msg--blue { background: var(--sky-bg); }
.msg--lilac { background: var(--lilac-bg); }
.msg--grey { background: var(--grey-bg); }
.msg__kind {
  font-family: var(--grotesk);
  font-weight: 500;
  font-size: calc(12 * var(--u));
  line-height: calc(15 * var(--u));
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.msg__q {
  font-family: var(--serif);
  font-size: calc(44 * var(--u));
  line-height: calc(48 * var(--u));
  letter-spacing: -0.02em;
}
.c-pink { color: var(--pink); }
.c-violet { color: var(--violet); }
.c-sky { color: var(--sky); }

/* ---------- Phone ---------- */
.phone-card {
  position: relative;
  display: flex;
  align-items: center;
  width: min(calc(1392 * var(--u)), 100% - var(--gutter) * 2);
  height: calc(575 * var(--u));
  margin: calc(20 * var(--u)) auto 0;
  padding: calc(60 * var(--u)) clamp(calc(24 * var(--u)), 9.7vw, calc(140 * var(--u)));
  overflow: hidden;
}
.phone {
  position: absolute;
  top: calc(69 * var(--u));
  right: calc(126 * var(--u));
  width: calc(432 * var(--u));
  height: calc(887 * var(--u));
}
.phone__body { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone__screen { position: absolute; left: calc(15.6 * var(--u)); top: calc(12.6 * var(--u)); width: calc(397.9 * var(--u)); height: calc(859.3 * var(--u)); object-fit: cover; }

.bubble {
  position: absolute;
  color: var(--white);
  font-family: -apple-system, "SF Pro", "SF Pro Text", system-ui, "Helvetica Neue", sans-serif;
}
.bubble__shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.bubble__tail { position: absolute; bottom: 0; }
.bubble p { position: absolute; margin: 0; white-space: nowrap; }
.bubble--person { left: calc(238.7 * var(--u)); top: calc(271.7 * var(--u)); width: calc(205 * var(--u)); height: calc(54 * var(--u)); transform-origin: 100% 100%; }
.bubble--person .bubble__tail { right: calc(-6.7 * var(--u)); width: calc(26.9 * var(--u)); height: calc(18.8 * var(--u)); }
.bubble--person p { left: calc(18.8 * var(--u)); right: calc(18.8 * var(--u)); top: calc(11.4 * var(--u)); font-size: calc(22.9 * var(--u)); line-height: calc(29.6 * var(--u)); }
.bubble--friend { left: calc(-70.3 * var(--u)); top: calc(178.6 * var(--u)); width: calc(403 * var(--u)); height: calc(86 * var(--u)); transform-origin: 0 100%; }
.bubble--friend .bubble__tail { left: calc(-7 * var(--u)); width: calc(27.8 * var(--u)); height: calc(19.4 * var(--u)); }
.bubble--friend p { left: calc(19.5 * var(--u)); right: calc(19.5 * var(--u)); top: calc(9.7 * var(--u)); font-size: calc(23.6 * var(--u)); line-height: calc(30.6 * var(--u)); white-space: normal; }

/* ---------- Photo pair ---------- */
.photo { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--ink); }
.photo img { position: absolute; top: -124.76%; width: 202.71%; max-width: none; height: auto; }
.photo--left img { left: 0; }
.photo--right img { left: -102.71%; }
/* Right-hand photo: the hero's blue -> violet gradient multiplied over the photo (option C), plus a deep violet fall-off at the bottom for the text.
   Layers, bottom to top: photo (0), brand tint (1), bottom scrim (2), copy (3). */
.photo--right { isolation: isolate; }
.photo--right > img { z-index: 0; }
.photo--right::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  mix-blend-mode: multiply;
  background: linear-gradient(135deg, rgba(58, 157, 250, 0.85) 0%, rgba(135, 101, 255, 0.9) 55%, rgba(178, 149, 254, 0.8) 100%);
  pointer-events: none;
}
.photo--right::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(20, 10, 60, 0.55) 0%, rgba(20, 10, 60, 0) 65%);
  pointer-events: none;
}
.photo__copy {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(40 * var(--u));
  padding: calc(60 * var(--u)) calc(44 * var(--u));
}
.photo__copy .display { max-width: calc(560 * var(--u)); }
.social { position: relative; width: calc(177.5 * var(--u)); height: calc(48 * var(--u)); }
.social img { position: static; width: 100%; height: 100%; }
.social a { position: absolute; top: 0; width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; }
.social a:nth-of-type(1) { left: 0; }
.social a:nth-of-type(2) { left: calc(64.7 * var(--u)); }
.social a:nth-of-type(3) { left: calc(129.5 * var(--u)); }

/* ---------- Team ---------- */
/* On desktop the track slides sideways as the page scrolls (Propy: translate3d + `transition: transform .1s linear`),
   and the arrows push it further. Below calc(861 * var(--u)) it is a plain scroll-snap strip. */
.team {
  width: min(calc(1442 * var(--u)), 100%);
  margin-inline: auto;
  padding: calc(120 * var(--u)) 0;
  padding-left: clamp(calc(24 * var(--u)), 11.1vw, calc(160 * var(--u)));
  overflow-x: clip;
}
.team__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(32 * var(--u));
  padding-right: clamp(calc(24 * var(--u)), 11.1vw, calc(160 * var(--u)));
  margin-bottom: calc(85 * var(--u));
}
.team__head .title { max-width: calc(848 * var(--u)); margin-top: calc(4 * var(--u)); }
.team__nav { display: flex; gap: calc(8 * var(--u)); flex: none; }
.team__btn { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; transition: opacity 0.2s var(--ease-ui), transform 0.16s ease-out; }
.team__btn:first-child img { transform: scaleX(-1); }
.team__btn:active:not(:disabled) { transform: scale(0.94); }
.team__btn:disabled { opacity: 0.4; cursor: default; }

.team__viewport { position: relative; }
.team__track {
  display: flex;
  align-items: flex-start;
  gap: calc(32 * var(--u));
  width: max-content;
  padding-right: clamp(calc(24 * var(--u)), 11.1vw, calc(160 * var(--u)));
  transform: translate3d(var(--x, 0px), 0, 0);
  transition: transform 0.1s linear;
  will-change: transform;
}
.team__track.is-stepping { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }

.member { flex: none; width: calc(180 * var(--u)); text-align: center; }
.member__img { width: calc(180 * var(--u)); height: calc(191 * var(--u)); margin-bottom: calc(16 * var(--u)); border-radius: calc(8 * var(--u)); object-fit: cover; }
.member__name {
  font-family: var(--grotesk);
  font-weight: 500;
  font-size: calc(12 * var(--u));
  line-height: calc(15 * var(--u));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.member__name span { display: block; font-weight: 400; color: var(--slate); }

/* ---------- Contact + footer ---------- */
.contact { background: var(--sky-bg); }
.contact__inner {
  display: flex;
  flex-direction: column;
  gap: calc(120 * var(--u));
  width: min(calc(1442 * var(--u)), 100%);
  min-height: calc(900 * var(--u));
  margin-inline: auto;
  padding: calc(120 * var(--u)) clamp(calc(24 * var(--u)), 11.1vw, calc(160 * var(--u)));
}
.contact__copy { display: flex; flex-direction: column; gap: calc(4 * var(--u)); max-width: calc(983 * var(--u)); }
.contact__copy .btn { margin-top: calc(56 * var(--u)); }
.contact__copy .title { color: #000; }   /* propy.com/avery sets this heading in pure black */

.footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(48 * var(--u)) calc(80 * var(--u));
  flex-wrap: wrap;
  width: min(calc(1110 * var(--u)), 100%);
}
.footer__cols { display: flex; flex-wrap: wrap; gap: calc(32 * var(--u)) calc(66 * var(--u)); }
.footer__cols div { display: flex; flex-direction: column; gap: calc(5 * var(--u)); }
.footer h3 {
  margin: 0;
  font-family: var(--grotesk);
  font-weight: 400;
  font-size: calc(12 * var(--u));
  line-height: calc(57 * var(--u));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}
.footer a, .footer__legal p {
  font-family: var(--grotesk);
  font-size: calc(14 * var(--u));
  letter-spacing: -0.01em;
  color: var(--mist);
}
.footer a { transition: color 0.2s ease-in-out; }
.footer a:hover { color: var(--slate); }
.footer__legal { display: flex; flex-direction: column; align-items: flex-end; gap: calc(26 * var(--u)); text-align: right; }
/* Legal block: real links, and a darker grey than the column links (#aaacba on #eff6ff is only ~2:1; this is ~4.6:1) */
.footer__legal-text { display: flex; flex-direction: column; align-items: inherit; gap: 0; }
/* every row (copyright included) is the same height so the rhythm is even: 14px text x 1.4 + 7px padding = ~27px pitch */
.footer__legal-text p, .footer__legal-text a { color: #6a6d84; line-height: 1.4; padding-block: calc(3.5 * var(--u)); }
.footer__legal-text a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out; }
.footer__legal-text a:hover { color: var(--ink); text-decoration-color: currentColor; }
/* desktop keeps Terms / Privacy / Cookies stacked; on phones they share one row (see the 860px block) */
.footer__legal-links { display: contents; }

/* ---------- Video modal ---------- */
.modal {
  width: min(calc(960 * var(--u)), 92vw);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.modal::backdrop { background: rgba(31, 32, 40, 0.72); backdrop-filter: blur(calc(6 * var(--u))); }
.modal[open] { animation: modal-in 0.25s ease-out; }
.modal__frame { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.modal__frame iframe { width: 100%; height: 100%; border: 0; }
.modal__close { position: absolute; top: calc(-44 * var(--u)); right: 0; width: calc(36 * var(--u)); height: calc(36 * var(--u)); font-size: calc(32 * var(--u)); line-height: 1; color: var(--white); }
@keyframes modal-in { from { opacity: 0; transform: scale(0.97); } }

/* ---------- Reveal on scroll ----------
   Propy: blocks start at `opacity: 0; transform: translateY(calc(40 * var(--u)))` and ease in (~0.65s) once they pass 55% of the viewport. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(calc(24 * var(--u)));
    transition: opacity 0.45s ease-out, transform 0.45s ease-out;
  }
  .js .reveal.is-in { opacity: 1; transform: none; }
}
/* Mobile hero paragraph: hidden on first paint, fades in from below once the visitor scrolls */
@media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
  .js .reveal-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.45s ease-out, transform 0.45s ease-out;
  }
  .js .reveal-scroll.is-in { opacity: 1; transform: none; }
}

/* ---------- Typewriter heading (contact) ----------
   Same caret as Propy: a "|" with a 1s step-end blink that stays after the text is typed. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.typed__rest { opacity: 0; }
.typed.is-typing .typed__shown::after {
  content: "|";
  position: absolute;
  animation: blink 1s step-end infinite;
}
.typed__shown { position: relative; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .typed.is-typing .typed__shown::after { animation: none; }
  .marquee__track, .team__track, .play, .header__cta { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .press { flex-wrap: wrap; justify-content: center; gap: calc(28 * var(--u)) calc(48 * var(--u)); padding: calc(32 * var(--u)) var(--gutter) calc(110 * var(--u)); }
  .msg__q { font-size: calc(36 * var(--u)); line-height: calc(40 * var(--u)); }
}

/* Phones and small tablets — follows propy.com/avery on mobile: one column, centred, 48px display type.
   (--u is 1px below 1440px, so plain px is fine in this block.) */
@media (max-width: 860px) {
  /* Title size follows the text column: the widest hero line ("faster when Avery's", ~9.2em) has to fit, so the hero reads 3 + 3 + 3 words. */
  :root { --gutter: 20px; --fs: clamp(28px, calc((100vw - 2 * var(--gutter)) / 9.5), 48px); }

  .display { font-size: var(--fs); line-height: 1; }
  .title { font-size: var(--fs); line-height: 1; }   /* same size as the display headings */
  .eyebrow--lg, .eyebrow--tall { line-height: 1.6; }

  /* Hero: media, heading, full-width button, copy (Propy: 400x540 media, 20px gaps, 12px copy) */
  .hero, .split { --gap: 16px; gap: var(--gap); flex-direction: column; height: auto; min-height: 0; }
  .hero > *, .split > * { flex: none; width: 100%; }
  .hero__tint { background-image: linear-gradient(137.7deg, rgb(58, 157, 250), rgb(178, 149, 254)); opacity: 0.8; }
  /* The photo takes whatever the screen has left, so the button always sits fully on the first screen with the same margin
     as the sides: viewport - header(60) - gap(40) - title (measured by JS: 3 or 4 lines) - gap(40) - button(44) - bottom margin. */
  .hero__media {
    --hero-rest: calc(60px + 40px + var(--hero-title, calc(3 * var(--fs))) + 40px + 44px + var(--gutter));
    height: clamp(260px, calc(100vh - var(--hero-rest)), 640px);
    height: clamp(260px, calc(100svh - var(--hero-rest)), 640px);
  }
  .hero__copy {
    height: auto;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    padding: 4px 0 0;   /* 16px row gap + 4 + the heading's 20px margin = Propy's 40px under the photo */
    background: none;
    text-align: center;
  }
  .hero__copy .display { order: 1; max-width: none; margin-block: 20px; letter-spacing: normal; }   /* Propy sets the mobile hero title with normal tracking */
  .hero__copy .btn { order: 2; align-self: stretch; width: 100%; }
  .hero__copy .mono { order: 3; font-size: 12px; letter-spacing: -0.03em; line-height: 1.3; }

  .quote { padding: 64px 0 0; }
  .quote .eyebrow { margin-top: 12px; }
  .press { flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 30px; padding: 72px var(--gutter) 48px; }   /* 48 + 16 row gap = 64 below, same as above the quote */
  .press img { width: calc(var(--w) * var(--u) * 0.84); height: calc(var(--h) * var(--u) * 0.84); }

  /* Feature rows: text card first, tile joined underneath with no gap (Propy). Every box keeps the pink tile's size. */
  .split { --box-h: max(calc((100vw - var(--gutter) * 2) * 575 / 685), 400px); margin-top: 16px; }
  .split > * { height: var(--box-h); }
  /* the text card is as tall as its content, title right under the label (Propy); tiles and photos keep the pink tile's size */
  .split > .feature-text { height: auto; min-height: 0; justify-content: flex-start; gap: 36px; padding: 32px 20px; }
  .split:not(.split--photos) { --gap: 0px; }
  .split--reverse { flex-direction: column-reverse; }
  .split:not(.split--photos) > .feature-text { border-radius: 20px 20px 0 0; }
  .split:not(.split--photos) > .tile { border-radius: 0 0 20px 20px; }
  .split .display .arrow { display: none; }

  .chat { padding-top: 72px; }
  .chat__head { margin-bottom: 56px; padding-inline: var(--gutter); }
  .chat__head > img { margin-bottom: 40px; }
  .marquee + .marquee { margin-top: 16px; }

  /* Phone: heading centred on top, phone art scaled to the card (JS sets --ps) */
  .phone-card {
    /* 40px top + 3-line heading + 40px gap, then just enough handset to show the chat (~500px of the 887px art at scale
       card/720) and cut the empty black screen below it: bigger phone, same top position */
    height: calc(80px + 3 * var(--fs) + (100vw - var(--gutter) * 2) * 0.69);
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    padding: 40px 20px 0;
  }
  .phone {
    right: 50%;
    top: calc(80px + 3 * var(--fs));
    transform-origin: top center;
    transform: translateX(50%) scale(var(--ps, 1));
  }

  /* Photos: two full-width crops of the same portrait, top and bottom (Propy), copy centred on the lower one */
  .photo img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
  .split--photos { --gap: 8px; }
  .split--photos > * { height: auto; aspect-ratio: 864 / 542; }
  .photo--left img { object-position: 50% 24%; }   /* hair to chin */
  .photo--right img { left: 0; object-position: 50% 92%; }   /* jacket, stripes, croissant */
  .photo__copy { align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 20px; }
  .photo__copy .display { font-size: clamp(22px, 6.4vw, 30px); max-width: none; }

  /* Team: centred heading, carousel, arrows underneath */
  .team { display: flex; flex-direction: column; padding: 72px 0 24px; overflow-x: visible; }
  .team__head { display: contents; }
  .team__head > div:first-child { order: 1; margin-bottom: 40px; padding: 0 var(--gutter); text-align: center; }
  .team__head .eyebrow { justify-content: center; }
  .team__head .title { max-width: none; }
  .team__viewport {
    order: 2;
    overflow-x: auto;
    overflow-y: hidden;
    padding-left: var(--gutter);
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--gutter);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .team__viewport::-webkit-scrollbar { display: none; }
  .team__track { transform: none !important; transition: none; gap: 24px; padding-right: var(--gutter); }
  .member { scroll-snap-align: start; }
  .team__nav { order: 3; align-self: center; margin-top: 40px; }

  /* Contact: everything centred, social row + logo + legal instead of link columns */
  .contact__inner { gap: 64px; min-height: 0; padding: 44px var(--gutter) 40px; align-items: center; text-align: center; }
  .contact__copy { align-items: center; width: 100%; max-width: none; }
  .contact__copy .eyebrow { justify-content: center; }
  .contact__copy .btn { align-self: stretch; width: 100%; margin-top: 56px; }
  .footer { width: 100%; flex-direction: column; align-items: center; gap: 28px; }
  .footer__cols { display: none; }
  .footer .footer__social { display: flex; }   /* beats the desktop `display: none` declared later in the file */
  .footer__legal { align-items: center; text-align: center; gap: 14px; }
  .footer__legal-text p, .footer__legal-text a { font-size: 15px; }   /* 15 x 1.4 + 7 = 28px rows, which is also the touch target height */
  .footer .only-mobile { display: block; }
  .footer__legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; }
}

@media (max-width: 480px) {
  .eyebrow { font-size: 12px; }
  .msg { width: 300px; height: 260px; padding: 28px 22px; }
  .msg--wide { width: 320px; padding-inline: 22px; }
  .msg__q { font-size: 30px; line-height: 34px; }
  .play { width: 88px; height: 88px; }
  .play img { width: 36px; height: 36px; }
  .header__cta { font-size: 13px; }
}

/* Intrinsic icon sizes follow the scale too */
.header__logo img { width: calc(24 * var(--u)); height: auto; }
.eyebrow > img { width: calc(15 * var(--u)); height: auto; }
.chat__head > img { width: calc(80 * var(--u)); height: auto; }
.play img { width: calc(48 * var(--u)); height: auto; }
.team__btn img { width: calc(44 * var(--u)); height: auto; }

/* Mobile-only footer pieces (shown inside the 860px block) */
.footer__social { display: none; align-items: center; justify-content: center; gap: 22px; }
.footer__social a { display: block; color: #6f7289; transition: color 0.2s ease-in-out; }
.footer__social a:hover { color: var(--ink); }
.footer__social svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.only-mobile { display: none; }