/* ==========================================================================
   Juan Martinez — Portfolio
   Dark editorial gallery. Every project rendered as live UI, not images.
   ========================================================================== */

:root {
  /* ---- Primitive tokens (Google palette) ---- */
  --g-blue-50: #e8f0fe;  --g-blue-100: #d3e3fd; --g-blue-600: #1a73e8; --g-blue-700: #0b57d0; --g-blue-800: #0842a0;
  --g-green-50: #e6f4ea; --g-green-100: #c4eed0; --g-green-700: #137333; --g-green-800: #0d652d;
  --g-yellow-50: #fef7e0; --g-yellow-100: #feefc3; --g-yellow-800: #b06000;
  --g-red-50: #fce8e6;   --g-red-100: #fad2cf;  --g-red-700: #c5221f;  --g-red-800: #a50e0e;
  --g-purple-50: #f3e8fd; --g-purple-100: #e9d2fd; --g-purple-700: #7627bb;
  --g-cyan-50: #e4f7fb;  --g-cyan-700: #007b83;
  --g-grey-0: #ffffff; --g-grey-50: #f8f9fa; --g-grey-100: #f1f3f4; --g-grey-200: #e8eaed; --g-grey-300: #dadce0;
  --g-grey-500: #80868b; --g-grey-700: #5f6368; --g-grey-900: #1f1f1f;
  --g-navy-900: #1b2233; --g-ink-900: #1c1c1f;

  --radius-sm: 12px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px;
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 40px; --space-5: 64px; --space-6: 96px;
  --shadow-1: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
  --shadow-2: 0 20px 50px rgba(0, 0, 0, 0.08);

  /* ---- Semantic tokens ---- */
  --bg: #ffffff;
  --bg-2: #f4f4f2;
  --bg-3: #e9e9e6;
  --fg: #0a0a0c;
  --fg-2: #6b6b6b;
  --muted: #767676;
  --line: rgba(0, 0, 0, 0.08);
  --line-2: rgba(0, 0, 0, 0.14);
  --blue: var(--ink);
  --blue-soft: var(--bg-2);
  --ink: #0a0a0c;
  --primary: var(--ink);
  --primary-hover: #2a2a2e;
  --on-primary: #fff;

  --tint-blue: var(--g-blue-50);     --on-tint-blue: var(--g-blue-700);
  --tint-green: var(--g-green-50);   --on-tint-green: var(--g-green-700);
  --tint-yellow: var(--g-yellow-50); --on-tint-yellow: var(--g-yellow-800);
  --tint-red: var(--g-red-50);       --on-tint-red: var(--g-red-700);
  --tint-purple: var(--g-purple-50); --on-tint-purple: var(--g-purple-700);
  --tint-cyan: var(--g-cyan-50);     --on-tint-cyan: var(--g-cyan-700);
  --tint-grey: var(--g-grey-100);    --on-tint-grey: var(--g-grey-900);

  --chrome: var(--g-blue-600);
  --dj: #0b9bd7;
  --davi: #e30613;

  --serif: "Google Sans Flex", "Google Sans", "Helvetica Neue", Arial, sans-serif;
  --display: "Google Sans Flex", "Google Sans", "Helvetica Neue", Arial, sans-serif;
  --sans: "Google Sans Flex", "Google Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Google Sans Code", "SFMono-Regular", Menlo, monospace;
  --roboto: "Roboto", "Google Sans Flex", Arial, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --gutter: clamp(20px, 4vw, 64px);
  --max: 1440px;

  /* ---- Component tokens ---- */
  --btn-bg: var(--primary); --btn-fg: var(--on-primary); --btn-bg-hover: var(--primary-hover); --btn-radius: var(--radius-pill);
  --card-bg: var(--bg-2); --card-radius: var(--radius-lg);
  --pane-radius: var(--radius-xl);
  --chip-bg: var(--bg-2); --chip-fg: var(--fg);
}

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

html {
  background: var(--bg);
  color: var(--fg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-optical-sizing: auto;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body::before {
  /* grain disabled in light theme */
  display: none;
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

::selection {
  background: var(--blue-soft);
  color: var(--blue);
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.serif {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  display: inline-block;
  padding: 0.02em 0.32em;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue) !important;
  line-height: 1.15;
}

.mono {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 12px;
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--line-2);
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--gutter);
  color: var(--fg);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}

.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.82);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
}

@media (prefers-reduced-transparency: reduce) {
  .nav {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .nav {
    background: #fff;
    border-bottom-color: var(--fg);
  }
  .pcard,
  .card,
  .pane,
  .chip {
    outline: 1px solid var(--line-2);
  }
}

.nav__brand {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.nav__brand::before {
  content: "🧔🏻";
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-2);
  font-size: 17px;
}

.nav__brand span {
  color: var(--muted);
  font-weight: 400;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 0.95rem;
  font-weight: 500;
}

.nav__links a:last-child {
  background: var(--blue);
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  transition: background 0.2s, box-shadow 0.2s;
}

.nav__links a:last-child::after {
  display: none;
}

.nav__links a:active {
  opacity: 0.7;
  transition: opacity 80ms ease-out;
}

.nav__links a:last-child:active {
  transform: scale(0.97);
  opacity: 1;
  transition: transform 80ms ease-out;
}

.nav__links a:focus-visible,
.btn:focus-visible,
.pcard:focus-visible,
.chip:focus-visible,
.pause:focus-visible,
.scroll-cue:focus-visible,
.clients a:focus-visible,
.site-footer a:focus-visible {
  outline: 3px solid rgba(11, 87, 208, 0.45);
  outline-offset: 3px;
  border-radius: var(--radius-pill);
}

.pcard:focus-visible {
  border-radius: var(--pane-radius);
}

.nav__links a:last-child:hover {
  background: #0842a0;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
}

@media (max-width: 600px) {
  .nav__brand span {
    display: none;
  }
  .nav__links {
    gap: 18px;
  }
}

.nav__links a {
  position: relative;
  padding: 4px 0;
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}

.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* --------------------------------------------------------------------------
   Hero (home)
   -------------------------------------------------------------------------- */

.hero {
  min-height: 0;
  display: grid;
  justify-items: center;
  text-align: center;
  padding-block: 170px 40px;
  position: relative;
  overflow: clip;
}

.hero__title {
  text-align: center;
  font-size: clamp(2.8rem, 7vw, 6.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 0 0 28px;
  max-width: 16ch;
}

.hero__title .serif {
  font-size: 0.96em;
}

.hero__title .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.hero__title .w > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.7s var(--ease);
}

.is-ready .hero__title .w > span {
  transform: none;
}

.hero__row {
  display: grid;
  justify-items: center;
  gap: 28px;
}

.hero__lede {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.45;
  color: var(--fg-2);
  max-width: 46ch;
  margin: 0;
}

.hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: var(--btn-radius);
  font-size: 1rem;
  font-weight: 500;
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.btn:hover {
  background: var(--btn-bg-hover);
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
}

.btn:active {
  transform: scale(0.97);
  transition: transform 80ms ease-out;
}

.btn--tonal {
  background: var(--bg-2);
  color: var(--fg);
}

.btn--tonal:hover {
  background: var(--bg-3);
  box-shadow: none;
}

.hero__glow {
  position: absolute;
  left: 50%;
  top: 40%;
  width: min(1100px, 120vw);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(168, 199, 250, 0.55), rgba(232, 240, 254, 0.35) 40%, rgba(255, 255, 255, 0) 70%);
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
}

.rotator {
  display: inline-grid;
  vertical-align: baseline;
  overflow: hidden;
  padding-inline: 0.42em;
  transition: background 0.4s;
}

.rotator > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  white-space: nowrap;
  transition: transform 0.45s var(--ease), opacity 0.35s;
}

.rotator > span.out {
  transform: translateY(-110%);
  opacity: 0;
}

.rotator > span.in {
  transform: translateY(110%);
  opacity: 0;
  transition: none;
}

.rotator svg {
  width: 0.78em;
  height: 0.78em;
}

.rotator--blue { background: var(--tint-blue); color: var(--on-tint-blue) !important; }
.rotator--green { background: var(--tint-green); color: var(--on-tint-green) !important; }
.rotator--yellow { background: var(--tint-yellow); color: var(--on-tint-yellow) !important; }
.rotator--red { background: var(--tint-red); color: var(--on-tint-red) !important; }

.pause {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--bg-2);
  color: var(--fg);
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  margin-left: 0.25em;
  transition: background 0.2s;
}

.pause:hover {
  background: var(--bg-3);
}

.pause:active {
  transform: scale(0.94);
  transition: transform 80ms ease-out;
}

.pause svg {
  width: 16px;
  height: 16px;
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--fg);
}

.scroll-cue svg {
  width: 14px;
  height: 14px;
  animation: nudge 1.6s ease-in-out infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg { animation: none; }
}

.clients {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 44px;
  padding: 56px 0 8px;
}

.clients a,
.clients > div {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--fg-2);
  min-width: 120px;
  transition: transform 0.4s var(--ease);
}

.clients a:hover {
  transform: translateY(-3px);
}

.clients img {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  object-fit: contain;
  background: var(--bg-2);
  padding: 8px;
}

.clients b {
  display: block;
  color: var(--fg);
  font-weight: 500;
}

@media (max-width: 800px) {
  .hero__glow {
  position: absolute;
  left: 50%;
  top: 40%;
  width: min(1100px, 120vw);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(168, 199, 250, 0.55), rgba(232, 240, 254, 0.35) 40%, rgba(255, 255, 255, 0) 70%);
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
}

.rotator {
  display: inline-grid;
  vertical-align: baseline;
  overflow: hidden;
  padding-inline: 0.42em;
  transition: background 0.4s;
}

.rotator > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  white-space: nowrap;
  transition: transform 0.45s var(--ease), opacity 0.35s;
}

.rotator > span.out {
  transform: translateY(-110%);
  opacity: 0;
}

.rotator > span.in {
  transform: translateY(110%);
  opacity: 0;
  transition: none;
}

.rotator svg {
  width: 0.78em;
  height: 0.78em;
}

.rotator--blue { background: var(--tint-blue); color: var(--on-tint-blue) !important; }
.rotator--green { background: var(--tint-green); color: var(--on-tint-green) !important; }
.rotator--yellow { background: var(--tint-yellow); color: var(--on-tint-yellow) !important; }
.rotator--red { background: var(--tint-red); color: var(--on-tint-red) !important; }

.pause {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--bg-2);
  color: var(--fg);
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  margin-left: 0.25em;
  transition: background 0.2s;
}

.pause:hover {
  background: var(--bg-3);
}

.pause:active {
  transform: scale(0.94);
  transition: transform 80ms ease-out;
}

.pause svg {
  width: 16px;
  height: 16px;
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--fg);
}

.scroll-cue svg {
  width: 14px;
  height: 14px;
  animation: nudge 1.6s ease-in-out infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg { animation: none; }
}

.clients {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 44px;
  padding: 56px 0 8px;
}

.clients a,
.clients > div {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--fg-2);
  min-width: 120px;
  transition: transform 0.4s var(--ease);
}

.clients a:hover {
  transform: translateY(-3px);
}

.clients img {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  object-fit: contain;
  background: var(--bg-2);
  padding: 8px;
}

.clients b {
  display: block;
  color: var(--fg);
  font-weight: 500;
}

.hero__visual {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .hero__row {
    grid-template-columns: 1fr;
  }
  .hero__meta {
    justify-content: flex-start;
  }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {
  padding-block: clamp(80px, 12vw, 160px);
}

.section__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: clamp(32px, 5vw, 64px);
}

.section__title {
  font-size: clamp(2rem, 4.5vw, 4.5rem);
  letter-spacing: -0.035em;
  line-height: 1;
  font-weight: 500;
  margin: 0;
}

.section__title .serif {
  font-size: 0.92em;
}

/* --------------------------------------------------------------------------
   Project cards (home)
   -------------------------------------------------------------------------- */

.pgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.pcard {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: var(--pane-radius);
  overflow: hidden;
  background: var(--tint-grey);
  color: var(--fg);
  min-height: 520px;
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
  isolation: isolate;
}

.pcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

.pcard:active {
  transform: translateY(-1px) scale(0.995);
  transition: transform 90ms ease-out;
}

.pcard--wide {
  grid-column: 1 / -1;
  grid-template-columns: 0.9fr 1.1fr;
  grid-template-rows: none;
  min-height: 560px;
}

.pcard--blue { background: var(--tint-blue); }
.pcard--green { background: var(--tint-green); }
.pcard--yellow { background: var(--tint-yellow); }
.pcard--red { background: var(--tint-red); }
.pcard--dark { background: var(--g-ink-900); color: #f3f0ea; }
.pcard--dark .pcard__desc { color: #b9b6af; }

.pcard__text {
  padding: clamp(28px, 4vw, 48px);
  display: grid;
  align-content: start;
  gap: 12px;
  z-index: 1;
}

.pcard__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--fg-2);
}

.pcard--dark .pcard__eyebrow { color: #b9b6af; }

.pcard__eyebrow img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.pcard__title {
  font-size: clamp(1.6rem, 2.4vw, 2.3rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-weight: 500;
  margin: 0;
}

.pcard__desc {
  margin: 0;
  color: var(--fg-2);
  max-width: 42ch;
  font-size: 1rem;
  letter-spacing: 0;
}

.pcard__link {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--on-tint-blue);
}

.pcard--dark .pcard__link { color: #a8c7fa; }

.pcard__link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.4s var(--ease);
}

.pcard:hover .pcard__link svg {
  transform: translateX(4px);
}

.pcard__media {
  position: relative;
  overflow: hidden;
  min-height: 260px;
}

.pcard__media img {
  position: absolute;
  left: 8%;
  top: 6%;
  width: 104%;
  height: auto;
  border-radius: 14px 0 0 0;
  transition: transform 0.8s var(--ease);
}

.pcard:hover .pcard__media img {
  transform: translateY(-6px);
}

.pcard--wide .pcard__media img {
  left: 4%;
  top: 10%;
  width: 100%;
}

.pcard__media .placeholder {
  position: absolute;
  inset: 12% 8% 0 8%;
  border-radius: 20px 20px 0 0;
  aspect-ratio: auto;
}

@media (max-width: 900px) {
  .pgrid {
    grid-template-columns: 1fr;
  }
  .pcard,
  .pcard--wide {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: 0;
  }
  .pcard__media {
    min-height: 220px;
  }
}

/* --------------------------------------------------------------------------
   Case-study hero (centered, chips)
   -------------------------------------------------------------------------- */

.case-hero {
  text-align: center;
  display: grid;
  justify-items: center;
}

.case-hero__title {
  text-align: center;
  margin-inline: auto;
}

.case-hero__lede {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   CTA band + footer (shared)
   -------------------------------------------------------------------------- */

.cta-band__inner {
  background: var(--tint-blue);
  border-radius: var(--pane-radius);
  padding: clamp(40px, 7vw, 96px) clamp(24px, 5vw, 72px);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 16px;
}

.cta-band__inner .section__title {
  font-size: clamp(2.2rem, 5vw, 4.6rem);
}

.cta-band__inner p.lede {
  color: var(--fg-2);
  /* 44ch broke this copy over four lines with a one-word orphan; the band has the
     width to spare and 52ch still lands inside a comfortable measure */
  max-width: 52ch;
  margin: 0;
  font-size: 1.1rem;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  padding: 32px 0 40px;
  font-size: 0.9rem;
  color: var(--fg-2);
}

.site-footer nav {
  display: flex;
  gap: 24px;
}

.site-footer a:hover {
  color: var(--fg);
}

.next-card {
  margin-top: clamp(40px, 8vw, 96px);
  min-height: 0;
}

.next-card .pcard__text {
  gap: 8px;
}

.next-card .pcard__media {
  min-height: 300px;
}

/* --------------------------------------------------------------------------
   About strip (home) + About page
   -------------------------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
}

.about__text {
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0;
}

.about__text .serif {
  display: inline;
  padding: 0;
  background: none;
  color: var(--fg-2) !important;
  font-weight: 400;
}

.about__facts {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  align-self: start;
}

.about__fact {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}

.about__fact span:first-child {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 3px;
}

@media (max-width: 900px) {
  .about {
    grid-template-columns: 1fr;
  }
}

/* chips marquee */
.marquee {
  overflow: hidden;
  padding-block: 18px;
  /* the rows read as part of whatever sits above them without this */
  margin-block: var(--space-2xl);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  gap: 12px;
  width: max-content;
  /* --speed is px per second; JS derives the duration from it and the measured
     repeat width so the pace holds however many copies the row needs */
  --speed: 45;
  animation: marquee 40s linear infinite;
}

/* A hero's bottom padding is one step smaller than a section's, so a row directly
   under one needs extra lead to sit evenly between the hero and what follows. After
   a section the plain margin already balances, and adding lead there just pushed the
   section above off centre. */
.case-hero + .marquee { margin-top: var(--space-3xl); }

.marquee--reverse .marquee__track {
  animation-direction: reverse;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee {
  /* --shift is the exact width of one repeat, measured in JS; the 50% fallback
     is what a no-script page gets, same as before */
  to {
    transform: translateX(calc(-1 * var(--shift, 50%)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--bg-2);
  font-size: 0.95rem;
  white-space: nowrap;
}

.chip--hi {
  background: var(--blue-soft);
  color: var(--blue);
}

/* timeline */
.timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 40px;
}

.timeline__item {
  border-left: 1px solid var(--line-2);
  padding: 0 0 0 14px;
  min-height: 150px;
  position: relative;
}

.timeline__bar {
  height: 6px;
  border-radius: 3px;
  margin-bottom: 14px;
}

.timeline__role {
  font-weight: 500;
  font-size: 0.95rem;
}

.timeline__company {
  color: var(--muted);
  font-size: 0.8rem;
}

.timeline__date {
  position: absolute;
  bottom: 0;
  left: 14px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

@media (max-width: 800px) {
  .timeline {
    grid-template-columns: 1fr;
  }
  .timeline__item {
    min-height: 0;
    padding-bottom: 28px;
  }
}

.cards3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.card {
  background: var(--card-bg);
  border: 1px solid transparent;
  border-radius: var(--card-radius);
  padding: 28px;
}

.card h3 {
  margin: 0 0 12px;
  font-size: 1.15rem;
  font-weight: 500;
}

.card p {
  margin: 0;
  color: var(--fg-2);
  font-size: 0.95rem;
}

.card--light {
  background: var(--blue-soft);
  color: var(--fg);
}

.card--light p {
  color: #3c4043;
}

@media (max-width: 800px) {
  .cards3 {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Case-study layout
   -------------------------------------------------------------------------- */

.case-hero {
  padding: 160px 0 60px;
}

.case-hero__title {
  font-size: clamp(2.6rem, 7vw, 7.5rem);
  letter-spacing: -0.045em;
  line-height: 0.95;
  font-weight: 500;
  margin: 0 0 28px;
  max-width: 16ch;
}

.case-hero__title .serif {
  font-size: 0.94em;
}

.case-hero__lede {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  color: var(--fg-2);
  max-width: 48ch;
  margin: 0;
  line-height: 1.4;
}

.stage-wrap {
  border-radius: 32px;
  border: 0;
  background: var(--bg-2);
  overflow: hidden;
  position: relative;
  min-height: 420px;
  isolation: isolate;
}

.stage-wrap--pad {
  padding: clamp(24px, 5vw, 72px);
}

.prose {
  max-width: 64ch;
}

.prose p {
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  line-height: 1.5;
  color: var(--fg-2);
  margin: 0 0 1.2em;
}

.prose p strong {
  color: var(--fg);
  font-weight: 500;
}

.prose h2,
.h2 {
  font-size: clamp(1.9rem, 3.6vw, 3.4rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  font-weight: 500;
  margin: 0 0 28px;
  max-width: 22ch;
}

.h2 .serif,
.prose h2 .serif {
  font-size: 0.94em;
}

.accent--blue { color: var(--on-tint-blue); }
.accent--green { color: var(--on-tint-green); }
.accent--yellow { color: var(--on-tint-yellow); }
.accent--red { color: var(--on-tint-red); }
.accent--purple { color: var(--on-tint-purple); }
.accent--cyan { color: var(--on-tint-cyan); }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.two-col--sticky > :first-child {
  position: sticky;
  top: 120px;
}

@media (max-width: 900px) {
  .two-col {
    grid-template-columns: 1fr;
  }
  .two-col--sticky > :first-child {
    position: static;
  }
}

/* tinted panes (Chrome case) */
.pane {
  border-radius: var(--pane-radius);
  padding: clamp(32px, 6vw, 88px) clamp(24px, 5vw, 72px);
  color: #1f1f1f;
  margin-block: 24px;
}

.pane--green { background: var(--tint-green); }
.pane--blue { background: var(--tint-blue); }
.pane--purple { background: var(--tint-purple); }
.pane--pink { background: var(--tint-red); }
.pane--yellow { background: var(--tint-yellow); }
.pane--grey { background: var(--tint-grey); }
.pane--dark { background: #1c1c1f; color: #f3f0ea; }
.pane--navy { background: #1b2233; color: #f3f0ea; }
.pane--dark .prose p, .pane--navy .prose p { color: #b9b6af; }
.pane--dark .prose p strong, .pane--navy .prose p strong { color: #f3f0ea; }
.pane--dark .card, .pane--navy .card { background: rgba(255, 255, 255, 0.06); color: #f3f0ea; }
.pane--dark .card p, .pane--navy .card p { color: #b9b6af; }
.pane--navy .proc__row p, .pane--navy .proc__row span { color: #b9b6af; }
.pane--navy .proc__row p strong, .pane--navy .proc__row b { color: #f3f0ea; }
.pane--navy .heur p { color: #b9b6af; }
.pane--navy .heur div { border-color: rgba(255, 255, 255, 0.16); }
.pane--navy .h2 { color: #f3f0ea; }
.pane--navy .mono, .pane--navy .eyebrow { color: #9aa0a6; }

.pane .h2 {
  color: inherit;
  text-align: center;
  margin-inline: auto;
}

.pane .prose {
  margin-inline: auto;
  text-align: center;
}

.pane .prose p {
  color: rgba(31, 31, 31, 0.72);
}

.pane .prose p strong {
  color: #1f1f1f;
}

.pane--dark .prose p,
.pane--navy .prose p {
  color: #b9b6af;
}

.pane--dark .prose p strong,
.pane--navy .prose p strong {
  color: #f3f0ea;
}

.pane--dark .dim,
.pane--navy .dim {
  color: #b9b6af;
}

.pane--dark .dim strong,
.pane--navy .dim strong,
.pane--dark .lit,
.pane--navy .lit {
  color: #f3f0ea;
}

/* stats grid */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (max-width: 560px) {
  .stats,
  .stats--4 {
    grid-template-columns: 1fr;
  }
}

/* closing note */
.closing {
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.5;
  color: var(--fg-2);
}

.closing .serif {
  display: inline;
  padding: 0;
  background: none;
  color: var(--fg) !important;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Reveal  (html.static = QA mode: no motion, everything visible)
   -------------------------------------------------------------------------- */

.static *,
.static *::before,
.static *::after {
  transition: none !important;
  animation: none !important;
}

.static .hero {
  min-height: 0;
}

.static [data-reveal] {
  opacity: 1;
  transform: none;
}

.static .hero__title .w > span,
.static .hero__specimens > * {
  transform: none;
  opacity: 1;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

[data-reveal].in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 0;
    transform: none;
    transition: opacity 0.2s ease;
  }
  [data-reveal].in {
    opacity: 1;
  }
  .pcard:hover,
  .pcard:active,
  .btn:active,
  .clients a:hover {
    transform: none;
  }
  .pcard:hover .pcard__media img {
    transform: none;
  }
  .hero__title .w > span {
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   LIVE UI SPECIMENS
   Everything below reproduces product UI in code.
   ========================================================================== */

.stage {
  font-family: var(--sans);
  color: #1f1f1f;
}

/* ---------- iMessage bubbles ---------- */
.bubble {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 20px;
  font-size: 15px;
  background: #e9e9eb;
  color: #1f1f1f;
  position: relative;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}

.bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -3px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-radius: 0 0 12px 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  mask: radial-gradient(circle at 0 0, transparent 8px, #000 8.5px);
}

.bubble--blue {
  background: #1b8bff;
  color: #fff;
}

.bubble--blue::after {
  left: auto;
  right: -3px;
  transform: scaleX(-1);
}

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

.dj-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}

.dj-market__row {
  display: grid;
  grid-template-columns: 1fr 44px 36px 44px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid #f0f0f0;
  text-align: right;
}

.dj-market__row > :first-child {
  text-align: left;
}

.dj-market__row.neg > span:not(.dj-badge) { color: #c8231a; }
.dj-market__row.pos > span:not(.dj-badge) { color: #1c7a2e; }

/* before / after slider */
.ba {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #fff;
  user-select: none;
}

.ba input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  z-index: 4;
  margin: 0;
}

.ba__label {
  position: absolute;
  top: 12px;
  z-index: 5;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 5px 10px;
  border-radius: 999px;
}

/* heuristics */
.heur {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.heur div {
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 20px;
}

.heur small {
  display: block;
  color: #d93025;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.heur b {
  display: block;
  font-weight: 500;
  margin-bottom: 6px;
}

.heur p {
  margin: 0;
  color: var(--fg-2);
  font-size: 0.9rem;
}

@media (max-width: 700px) {
  .heur {
    grid-template-columns: 1fr;
  }
}

/* process rows */
.proc {
  border-top: 1px solid var(--line);
}

.proc__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}

.proc__row span {
  color: var(--muted);
  font-size: 0.9rem;
}

.proc__row b {
  display: block;
  font-weight: 500;
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.proc__row p {
  margin: 0;
  color: var(--fg-2);
  font-size: 0.95rem;
}

.proc__row p strong {
  color: var(--fg);
  font-weight: 500;
}

@media (max-width: 700px) {
  .proc__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* type specimen (Davivienda app) */
.type-spec {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: center;
  font-family: var(--roboto);
}

.type-spec .big {
  font-size: 220px;
  line-height: 0.8;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.08);
}
.pane--navy .type-spec p, .pane--navy .type-spec { color: #b9b6af; }
.pane--navy .type-spec p[style*="color:var(--fg)"] { color: #f3f0ea !important; }

.type-spec p {
  margin: 0 0 12px;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--fg-2);
}

.type-spec .cond {
  font-family: "Roboto Condensed", var(--roboto);
  font-weight: 700;
}

@media (max-width: 700px) {
  .icon-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .type-spec {
    grid-template-columns: 1fr;
  }
  .type-spec .big {
    font-size: 140px;
  }
}

/* placeholder frame until an export exists */
.placeholder {
  width: 100%;
  border-radius: 24px;
  background: var(--ph, #e8eaed);
  display: grid;
  place-items: center;
  color: rgba(0, 0, 0, 0.35);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  aspect-ratio: var(--ar, 16 / 10);
  margin-inline: auto;
}

/* figma exports */
.shot {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}

.shots {
  display: grid;
  gap: 16px;
}

.shots > div {
  display: grid;
  gap: 16px;
}

.shots img {
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* the key-screens spread stays in its paired rows at every size: each pair shares
   a 1090px source height, so proportional columns keep them the same height */
@media (max-width: 700px) {
  .shots, .shots > div { gap: var(--sp-2); }
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 40px; }
.mt-6 { margin-top: 64px; }
.center { text-align: center; }
.abs { position: absolute; }
.flex { display: flex; }
.wrapflex { flex-wrap: wrap; }
.hide-sm { display: initial; }

@media (max-width: 700px) {
  .hide-sm { display: none !important; }
}

.cta-band .serif {
  background: #fff;
}

/* ==========================================================================
   v3 — cinematic home: view transitions, scroll-driven stage, stacked work,
   type marquee, manifesto. Native CSS scroll timelines with @supports fallbacks.
   ========================================================================== */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.45s;
  animation-timing-function: var(--ease);
}

::view-transition-group(*) {
  animation-duration: 0.55s;
  animation-timing-function: var(--ease);
}

/* ---- type marquee ---- */
.tm {
  overflow: hidden;
  padding: clamp(48px, 8vw, 120px) 0 0;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.tm__track {
  display: flex;
  gap: 0.5em;
  width: max-content;
  font-size: clamp(3rem, 8.5vw, 9rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 500;
  white-space: nowrap;
  --speed: 25;
  animation: marquee 60s linear infinite;
}

.tm__track span {
  padding-right: 0.5em;
}

.tm:hover .tm__track { animation-play-state: paused; }

/* ---- stacked work ---- */
.stack {
  display: grid;
  timeline-scope: --c2, --c3, --c4, --c5;
}

.stack__item {
  position: sticky;
  top: calc(84px + var(--i, 0) * 12px);
  padding-bottom: 24px;
}

.stack__item:nth-child(2) { view-timeline-name: --c2; }
.stack__item:nth-child(3) { view-timeline-name: --c3; }
.stack__item:nth-child(4) { view-timeline-name: --c4; }
.stack__item:nth-child(5) { view-timeline-name: --c5; }

.stack .pcard {
  --card-h: min(72vh, 680px);
  grid-template-columns: 0.85fr 1.15fr;
  grid-template-rows: none;
  min-height: var(--card-h);
  transform-origin: 50% 0%;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 20px 60px rgba(0, 0, 0, 0.06);
}

.stack .pcard:hover {
  transform: none;
}

.stack .pcard__text {
  padding: clamp(28px, 4vw, 56px);
  align-content: space-between;
}

.stack .pcard__title {
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  letter-spacing: -0.03em;
  max-width: 12ch;
}

.stack .pcard__media {
  min-height: 320px;
}

.stack .pcard__media img {
  left: 6%;
  top: 8%;
  width: 100%;
}

.metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 12px;
}

.metrics div {
  display: grid;
  gap: 2px;
}

.metrics b {
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  font-weight: 500;
}

.metrics span {
  font-size: 0.8rem;
  color: var(--fg-2);
}

.pcard--dark .metrics span { color: #b9b6af; }

@supports (animation-timeline: view()) {
  .stack__item:nth-child(1) .pcard { animation: recede linear both; animation-timeline: --c2; animation-range: entry 0% entry 100%; }
  .stack__item:nth-child(2) .pcard { animation: recede linear both; animation-timeline: --c3; animation-range: entry 0% entry 100%; }
  .stack__item:nth-child(3) .pcard { animation: recede linear both; animation-timeline: --c4; animation-range: entry 0% entry 100%; }
  .stack__item:nth-child(4) .pcard { animation: recede linear both; animation-timeline: --c5; animation-range: entry 0% entry 100%; }
}

@keyframes recede {
  to { transform: scale(0.94) translateY(-10px); }
}

@media (max-width: 900px) {
  .stack__item { position: static; padding-bottom: 20px; }
  .stack .pcard { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 0; }
  .stack .stack__item .pcard { animation: none !important; }
  .stack .pcard__media { min-height: 240px; }
}

/* ---- manifesto (dark, scroll-lit text) ---- */
.manifesto {
  background: var(--g-ink-900);
  color: #f3f0ea;
  padding: var(--band-pad) 0;
  /* symmetric: the band had a generous lead-in but butted straight onto whatever
     followed, so the same break read as tight on the way out */
  margin-block: var(--band-gap);
}

.manifesto__text {
  font-size: clamp(1.7rem, 3.6vw, 3.4rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 500;
  max-width: 26ch;
  margin: 0 0 clamp(48px, 7vw, 96px);
  color: rgba(255, 255, 255, 0.28);
}

@supports (animation-timeline: view()) {
  .manifesto__text {
    background: linear-gradient(90deg, #fff 50%, rgba(255, 255, 255, 0.22) 50%);
    background-size: 220% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: lit linear both;
    animation-timeline: view();
    animation-range: entry 30% cover 65%;
  }
}

@supports not (animation-timeline: view()) {
  .manifesto__text { color: #f3f0ea; }
}

@keyframes lit {
  to { background-position: 0% 0; }
}

.manifesto .stats {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 900px) {
  .manifesto .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---- case page: images settle in on scroll ---- */
@supports (animation-timeline: view()) {
  .stage-wrap .shot,
  .pane > .shot,
  .shots img {
    animation: settle-img linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

@keyframes settle-img {
  from { transform: translateY(28px) scale(0.985); opacity: 0.6; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .stack .pcard, .manifesto__text, .stage-wrap .shot, .pane > .shot, .shots img {
    animation: none !important;
  }
  .manifesto__text { color: #f3f0ea; background: none; -webkit-text-fill-color: initial; }
  .tm__track { animation: none; }
  ::view-transition-group(*), ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.01s; }
}


/* ==========================================================================
   Neutral umbrella (studio-style): ink + white, italic serif accents,
   heavy tight display type. Project pages keep their own tints.
   ========================================================================== */

body { font-family: var(--sans); font-optical-sizing: auto; }

h1, h2, h3, .hero__title, .section__title, .case-hero__title, .h2, .pcard__title, .next__title, .contact__title, .work__title, .manifesto__text, .tm__track {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.03em;
}

.hero__title { font-weight: 500; letter-spacing: -0.035em; line-height: 1.02; max-width: 15ch; }

/* italic serif accents replace the Google pill, titles only */
.serif,
.section__title .serif,
.h2 .serif,
.case-hero__title .serif,
.hero__title .serif,
.cta-band .serif {
  font-family: var(--display);
  font-style: normal;
  font-weight: inherit;
  background: none;
  padding: 0;
  color: var(--fg-2) !important;
  letter-spacing: -0.03em;
  font-size: 1em;
  line-height: inherit;
}
.manifesto .serif, .pcard--dark .serif { color: #b9b6af !important; }

.rotator, .rotator--blue, .rotator--green, .rotator--yellow, .rotator--red {
  background: none;
  color: inherit !important;
  padding-inline: 0.06em;
}
.rotator svg { display: none; }

.about__text .serif, .closing .serif { font-family: var(--sans); font-style: normal; font-size: 1em; }

/* labels: small tracked caps in the sans, no mono */
.mono, .eyebrow, .meta-chips .chip small, .timeline__date, .placeholder, .footer, .work__meta, .work__num, .hero__meta {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
}
.eyebrow::before { display: none; }

/* nav: plain text links, no avatar, no filled pill */
.nav { background: rgba(255, 255, 255, 0.78); }
.nav__brand { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; font-size: 1rem; }
.nav__brand::before { display: none; }
.nav__brand span { display: none; }
.nav__links { font-weight: 400; font-size: 0.9rem; color: var(--fg-2); }
.nav__links a:hover { color: var(--fg); }
.nav__links a:last-child { background: none; color: var(--fg-2); padding: 4px 0; border-radius: 0; box-shadow: none; }
.nav__links a:last-child:hover { background: none; color: var(--fg); box-shadow: none; }
.nav__links a:last-child::after { display: block; }
.nav__links a:last-child:active { transform: none; opacity: 0.6; }

/* buttons: ink pills */
.btn { background: var(--ink); color: #fff; font-weight: 500; }
.btn:hover { background: #2a2a2e; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); }
.btn--tonal { background: var(--bg-2); color: var(--fg); }
.btn--tonal:hover { background: var(--bg-3); box-shadow: none; }
.nav__links a:focus-visible, .btn:focus-visible, .pcard:focus-visible, .chip:focus-visible, .pause:focus-visible, .scroll-cue:focus-visible, .clients a:focus-visible, .site-footer a:focus-visible { outline-color: rgba(10, 10, 12, 0.35); }

/* hero: warm neutral glow, inline picture chips inside the headline */
.hero__glow {
  background: radial-gradient(ellipse at center, rgba(240, 236, 228, 0.9), rgba(246, 244, 240, 0.5) 40%, rgba(255, 255, 255, 0) 70%);
}
.pause { background: var(--bg-2); }


/* small-caps strip instead of the outlined type marquee */
/* Uneven padding on purpose: the hero above contributes --space-xl of its own and
   the work section below contributes --space-2xl, so matching those two makes the
   white either side of the strip come out the same. */
.tm { padding: var(--space-2xl) 0 var(--space-xl); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.tm__track { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-2); gap: 0; animation-duration: 45s; }
.tm__track span { padding: 0 2.2em; position: relative; }
.tm__track span::after { content: "•"; position: absolute; right: -0.35em; color: var(--muted); }

/* cards: neutral surfaces, the project images carry the color */
.pcard, .pcard--blue, .pcard--green, .pcard--yellow, .pcard--red, .pcard--purple, .pcard--cyan { background: var(--bg-2); color: var(--fg); }
.pcard--dark { background: var(--ink); color: #f3f0ea; }
.pcard__eyebrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.68rem; font-weight: 500; }
.pcard__eyebrow img { border-radius: 6px; width: 22px; height: 22px; }
.stack .pcard { box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 24px 60px rgba(0, 0, 0, 0.07); }
.pcard__media img { border-radius: 12px 0 0 0; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12); }

/* chips, cards, cta, footer */
.chip--hi { background: var(--ink); color: #fff; }
.card--light { background: var(--bg-2); color: var(--fg); }
.card--light p { color: var(--fg-2); }
.accent--blue { color: var(--fg); }
.cta-band__inner { background: var(--bg-2); }
.manifesto { background: var(--ink); }
.timeline__item[style*="border-right"] { border-right-color: var(--ink) !important; }
::selection { background: var(--ink); color: #fff; }


/* ---- final pass ---- */
.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  transition: top 0.2s;
}
.skip:focus { top: 16px; }

.avail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 24px;
}
.avail i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1e8e3e;
  box-shadow: 0 0 0 4px rgba(30, 142, 62, 0.18);
}

.cta-band__inner .note { margin: 0; }

.notfound { min-height: 70vh; display: grid; place-content: center; text-align: center; gap: 16px; padding: 160px 0 80px; }

.card--wine { background: #3a1e20; border-color: transparent; color: #f3f0ea; }
.card--wine p { color: #d9c8c9; }

/* ==========================================================================
   Case studies v2: editorial hero, numbered sections, hairline numbers,
   reflection block. Tinted panes stay as the showcase moments.
   ========================================================================== */
.case-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.5fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
  justify-items: start;
  text-align: left;
  padding: 148px 0 clamp(32px, 5vw, 56px);
}
.case-hero__kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; }
.case-hero__kicker img { width: 28px; height: 28px; border-radius: 7px; }
.case-hero__title { text-align: left; margin: 0 0 24px; max-width: 13ch; font-size: clamp(2.6rem, 6.4vw, 6.6rem); }
.case-hero__lede { margin: 0; max-width: 44ch; }
.facts { margin: 0; width: 100%; border-top: 1px solid var(--line-2); }
.facts div { display: grid; grid-template-columns: 84px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-2); align-items: baseline; }
.facts dt { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); }
.facts dd { margin: 0; font-size: 0.95rem; font-weight: 500; }

.eyebrow b { font-weight: 500; color: var(--fg); margin-right: 12px; }

.sec {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.sec .eyebrow { margin: 0 0 20px; }
.sec .h2 { margin: 0; max-width: none; font-size: clamp(1.8rem, 3.2vw, 3rem); }
.sec .prose { max-width: 46ch; }
.sec .prose p:last-child { margin-bottom: 0; }
.sec .prose p { font-size: clamp(1rem, 1.2vw, 1.15rem); }
.pane .eyebrow { justify-content: center; margin: 0 0 20px; color: inherit; opacity: 0.7; }
.pane .eyebrow b { color: inherit; }
.pane--dark .eyebrow, .pane--navy .eyebrow { opacity: 1; }
.pane--left .h2, .pane--left .prose { text-align: left; margin-inline: 0; }
.pane--left .eyebrow { justify-content: flex-start; }

.numbers { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-2); }
.numbers--2 { grid-template-columns: repeat(2, 1fr); }
.numbers > div { display: grid; gap: 6px; padding: 28px 24px 32px 0; border-bottom: 1px solid var(--line-2); }
.numbers b { font-family: var(--display); font-size: clamp(2.4rem, 4.6vw, 4.4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.numbers span { font-size: 0.9rem; color: var(--fg-2); }
.numbers--light { border-color: rgba(255, 255, 255, 0.18); }
.numbers--light > div { border-color: rgba(255, 255, 255, 0.18); }
.numbers--light span { color: #b9b6af; }
.pane .numbers { border-color: rgba(0, 0, 0, 0.12); }
.pane .numbers > div { border-color: rgba(0, 0, 0, 0.12); }
.pane .numbers span { color: rgba(31, 31, 31, 0.72); }

.reflect {
  display: grid;
  grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr);
  gap: clamp(24px, 5vw, 80px);
  border-top: 1px solid var(--line-2);
  padding-top: clamp(32px, 5vw, 56px);
  margin-top: clamp(48px, 7vw, 96px);
}
.reflect .eyebrow { margin: 0; }
.reflect .closing {
  text-align: left; margin: 0; max-width: 40ch;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.35; letter-spacing: -0.02em;
}
.reflect .closing + .closing { margin-top: 1.2em; }

@media (max-width: 800px) {
  .case-hero { grid-template-columns: 1fr; padding-top: 120px; }
  .sec, .reflect { grid-template-columns: 1fr; align-items: start; }
  .numbers { grid-template-columns: repeat(2, 1fr); }
}

/* case studies read narrower: compositions hold together, more of each section fits a viewport */
.case .wrap { --max: 1120px; }
.case .pane { --px: clamp(24px, 4vw, 56px); padding: clamp(28px, 5vw, 64px) var(--px); }
.case .stage-wrap--pad { padding: clamp(24px, 4vw, 56px); }
/* Several exports are cropped mid-content in Figma. Those edges must meet the
   container edge, otherwise the crop reads as a broken image instead of a bleed. */
.case .pane { --py: clamp(28px, 5vw, 64px); overflow: hidden; }
.case .stage-wrap--pad { --px: clamp(24px, 4vw, 56px); --py: clamp(24px, 4vw, 56px); }
.case .two-col .pane .shot { transform: none; }

.bleed-r, .bleed-l, .bleed-x { max-width: none !important; }
.bleed-r { width: calc(100% + var(--px, 0px)); margin: 0 calc(-1 * var(--px, 0px)) 0 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.bleed-l { width: calc(100% + var(--px, 0px)); margin: 0 0 0 calc(-1 * var(--px, 0px)); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.bleed-x { width: calc(100% + 2 * var(--px, 0px)); margin-inline: calc(-1 * var(--px, 0px)); }
.bleed-b { margin-bottom: calc(-1 * var(--py, 0px)) !important; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.bleed-t { margin-top: calc(-1 * var(--py, 0px)) !important; }
.shots.bleed-x > div > img:first-child { border-start-start-radius: 0; border-end-start-radius: 0; }
.shots.bleed-x > div > img:last-child { border-start-end-radius: 0; border-end-end-radius: 0; }

/* stacked work cards on small screens: the shot sits inside the card instead of bleeding off it */
@media (max-width: 900px) {
}
.section__head .mono { white-space: nowrap; }

/* ==========================================================================
   TYPE SCALE
   One fluid scale for the whole site. Every step interpolates between a
   375px-viewport minimum and a 1440px maximum, so nothing is set twice.
   px values in the comments are the 1440px maximum.
   Ratio tightens at reading sizes and opens up at display sizes, the way
   Material 3, Polaris and Carbon all handle it.
   ========================================================================== */
:root {
  --fs-label-sm:    0.6875rem;                                       /* 11 */
  --fs-label:       0.8125rem;                                       /* 13 */
  --fs-body-sm:     0.9375rem;                                       /* 15 */
  --fs-body:        1.0625rem;                                       /* 17 */
  --fs-body-lg:     clamp(1.0625rem, 0.996rem + 0.282vw, 1.25rem);   /* 17 → 20 */
  --fs-title:       clamp(1.1875rem, 1.077rem + 0.470vw, 1.5rem);    /* 19 → 24 */
  --fs-headline-sm: clamp(1.5rem,    1.324rem + 0.751vw, 2rem);      /* 24 → 32 */
  --fs-headline:    clamp(1.75rem,   1.442rem + 1.315vw, 2.625rem);  /* 28 → 42 */
  --fs-display-sm:  clamp(2rem,      1.516rem + 2.066vw, 3.375rem);  /* 32 → 54 */
  --fs-display:     clamp(2.5rem,    1.796rem + 3.005vw, 4.5rem);    /* 40 → 72 */
  --fs-display-lg:  clamp(2.75rem,   1.694rem + 4.507vw, 5.75rem);   /* 44 → 92 */

  --lh-display:  1.05;
  --lh-headline: 1.12;
  --lh-title:    1.25;
  --lh-body-lg:  1.45;
  --lh-body:     1.55;

  --ls-display:    -0.035em;
  --ls-display-sm: -0.03em;
  --ls-headline:   -0.025em;
  --ls-title:      -0.015em;
  --ls-caps:        0.12em;
}

/* ---- Display: page openers ---- */
.hero__title,
.case-hero__title,
.next__title {
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

/* ---- Display: section openers ---- */
.section__title,
.cta-band__inner .section__title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

/* ---- Display small: the workhorse heading ---- */
.h2,
.prose h2,
.pane .h2,
.manifesto__text,
.work__title,
.stack .pcard__title,
.numbers b,
.stat__num {
  font-size: var(--fs-display-sm);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-display-sm);
}
.numbers b,
.stat__num { line-height: 1; }

/* ---- Headline: sub-heads inside a section or pane ---- */
.sec .h2,
.h2--sm,
.about__text {
  font-size: var(--fs-headline);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline);
}

.pcard__title,
.pane-h3 {
  font-size: var(--fs-headline-sm);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline);
}

/* ---- Title: pull statements and large card headings ---- */
.reflect .closing,
.pull {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}

/* ---- Body ---- */
.hero__lede,
.case-hero__lede,
.cta-band__inner p.lede,
.prose p,
.closing,
.card h3,
.metrics b {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
}
.card h3 { line-height: var(--lh-title); }

.sec .prose p,
.nav__brand {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.nav__brand { line-height: 1.2; }

.card p,
.chip,
.nav__links,
.stat__label,
.numbers span,
.site-footer,
.facts dd,
.body-sm {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}
.facts dd { line-height: var(--lh-title); }

.metrics span { font-size: var(--fs-label); }

/* ---- Labels: tracked caps ---- */
.mono,
.eyebrow,
.meta-chips .chip small,
.timeline__date,
.placeholder,
.footer,
.work__meta,
.work__num,
.hero__meta,
.facts dt,
.pcard__eyebrow,
.tm__track {
  font-size: var(--fs-label-sm);
  letter-spacing: var(--ls-caps);
  line-height: 1.4;
}

/* ---- Decorative emoji, two sizes only ---- */
.ico    { font-size: 1.5rem; line-height: 1; display: inline-block; }
.ico-lg { font-size: 3.5rem; line-height: 1; display: block; }

/* ==========================================================================
   HERO
   Two defects fixed here:
   1. Both reveal masks clipped descenders (the g in "Digital", the y in
      "by"). The masks now carry vertical padding, pulled back with negative
      margins so layout is unchanged, and the slide distance grows to match.
   2. The headline gained a third line whenever the rotating word was long,
      shifting everything below it. The rotator now reserves the width of its
      longest word, so the line count never changes.
   ========================================================================== */
.hero__title .w {
  padding-block: 0.16em 0.26em;
  margin-block: -0.16em -0.26em;
}

.hero__title .w > span { transform: translateY(150%); }
.is-ready .hero__title .w > span { transform: none; }

/* The rotator carries both `serif` and `rotator`, and `.hero__title .serif`
   sets `padding: 0` at (0,2,0), which outranks a bare `.rotator` no matter
   where it sits in the file. Match that specificity or the mask clips. */
.hero__title .rotator {
  padding-block: 0.16em 0.26em;
  margin-block: -0.16em -0.26em;
}

.rotator > span.out { transform: translateY(-150%); }
.rotator > span.in  { transform: translateY(150%); }

/* invisible longest-word sizer: holds the grid cell open so the headline
   keeps the same line count and width for every word */
.rotator > [data-sizer] {
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero__title .w > span { transform: none; }
}

/* centre each word inside the reserved box, whatever its length */
.rotator > span { justify-content: center; }

/* reflection eyebrow sits on the first line of the text, not centred against it */
.reflect { align-items: start; }

/* Desktop hero holds two lines: the measured widths are 814px for line one and
   1057px for line two at the 96px cap, so the title needs ~20ch, not 16ch.
   The explicit break keeps "built to be" off line one, which would otherwise
   fit inside the wider measure. Below 800px it wraps naturally. */
.hero__title { max-width: 20ch; }

@media (max-width: 800px) {
  .hero__break { display: none; }
}

/* Above the breakpoint both the shortest and longest phrase fit line two on
   their own (787px and 1057px against a 1104px measure), so the reservation is
   dropped and the line re-centres naturally. Below it the phrases no longer fit
   alike, so the sizer goes back to pinning the line count. */
@media (min-width: 801px) {
  .rotator > [data-sizer] { display: none; }
}

/* ==========================================================================
   SPACING SCALE
   Two families, both on a 4px grid.

   --sp-*     static steps for component internals (gaps, card padding, chips)
   --space-*  fluid steps for layout rhythm, interpolating 375px → 1440px

   Every section, pane, card and grid gap below draws from these. Nothing in
   the layout sets a raw pixel value any more.
   ========================================================================== */
:root {
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  40px;
  --sp-8:  48px;
  --sp-9:  64px;
  --sp-10: 80px;
  --sp-11: 96px;
  --sp-12: 128px;

  --space-sm:  clamp(16px, 13.18px + 0.751vw, 24px);   /* 16 → 24 */
  --space-md:  clamp(24px, 21.18px + 0.751vw, 32px);   /* 24 → 32 */
  --space-lg:  clamp(28px, 20.96px + 1.878vw, 48px);   /* 28 → 48 */
  --space-xl:  clamp(32px, 20.73px + 3.005vw, 64px);   /* 32 → 64 */
  --space-2xl: clamp(48px, 31.10px + 4.507vw, 96px);   /* 48 → 96 */
  --space-3xl: clamp(64px, 41.46px + 6.009vw, 128px);  /* 64 → 128 */
  --space-4xl: clamp(80px, 51.83px + 7.512vw, 160px);  /* 80 → 160 */

  /* full-bleed bands (home manifesto, about overview): their own inner padding
     and the white lead-in either side of them */
  --band-pad: var(--space-4xl);
  --band-gap: var(--space-3xl);

  --gutter: clamp(20px, 4.51px + 4.131vw, 64px);       /* 20 → 64 */
  --nav-h: 76px;
}

/* ---- Page rhythm ---- */
.section        { padding-block: var(--space-2xl); }
.hero           { padding-block: calc(var(--nav-h) + var(--space-2xl)) var(--space-xl); }
.case-hero      { padding-block: calc(var(--nav-h) + var(--space-2xl)) var(--space-xl); }
.manifesto      { padding-block: var(--band-pad); margin-block: var(--band-gap); }
/* padding, not margin: as a margin this collapsed with the bottom margin of a
   preceding marquee, so the home page closed on half the gap the about page had */
.cta-band       { padding-top: var(--space-2xl); }
.next-card      { margin-top: var(--space-2xl); }
.site-footer    { padding: var(--sp-6) 0 var(--sp-7); gap: var(--sp-4) var(--sp-6); }
.section__head  { margin-bottom: var(--space-xl); gap: var(--sp-5); }

/* ---- Surfaces ---- */
.pane                  { padding: var(--space-2xl) var(--space-xl); margin-block: var(--sp-5); }
.case .pane            { --px: var(--space-lg); --py: var(--space-xl);
                         padding: var(--space-xl) var(--space-lg); }
.stage-wrap--pad       { padding: var(--space-xl); }
.case .stage-wrap--pad { --px: var(--space-lg); --py: var(--space-lg);
                         padding: var(--space-lg); }
.cta-band__inner       { padding: var(--space-2xl) var(--space-xl); gap: var(--sp-4); }
.card                  { padding: var(--sp-6); }
.card h3               { margin: 0 0 var(--sp-3); }
.chip                  { padding: var(--sp-3) var(--sp-4); gap: var(--sp-2); }

/* ---- Grids ---- */
.cards3, .stats, .two-col.stats { gap: var(--sp-3); }
.two-col        { gap: var(--space-2xl); }
.sec            { gap: var(--space-2xl); margin-bottom: var(--space-xl); }
.reflect        { gap: var(--space-2xl); padding-top: var(--space-xl); margin-top: var(--space-2xl); }
.metrics        { gap: var(--sp-2) var(--sp-6); margin-top: var(--sp-3); }
.numbers > div  { padding: var(--sp-6) var(--sp-5) var(--sp-6) 0; gap: var(--sp-2); }
.facts div      { padding: var(--sp-3) 0; gap: var(--sp-4); }
.shots, .shots > div { gap: var(--sp-4); }

/* ---- Stack utilities, aligned to the static steps ---- */
.mt-1 { margin-top: var(--sp-2); }
.mt-2 { margin-top: var(--sp-4); }
.mt-3 { margin-top: var(--sp-5); }
.mt-4 { margin-top: var(--sp-7); }
.mt-6 { margin-top: var(--sp-9); }

/* ==========================================================================
   HERO MOTION WITHOUT MASKS
   The word reveal and the rotator swap both used `overflow: hidden` as a
   clip, which meant every glyph had to fit a box one line-height tall. It
   never did: at 92px with a 1.05 line height the box is 96.6px while the
   font's ascent plus descent is ~107px, so descenders and the overshoot on
   round letters were shaved off. Padding the clip box worked but was fragile,
   one competing selector re-zeroed it and the clipping came back.

   Both animations now fade and rise instead of sliding out from behind a
   clip, so there is no clip box at all and nothing can be cut. This also
   matches the reveal used everywhere else on the site.
   ========================================================================== */
.hero__title .w {
  overflow: visible;
  padding-block: 0;
  margin-block: 0;
}

.hero__title .w > span {
  transform: translateY(0.28em);
  opacity: 0;
  transition: transform 0.7s var(--ease), opacity 0.5s var(--ease);
}

.is-ready .hero__title .w > span,
.static .hero__title .w > span {
  transform: none;
  opacity: 1;
}

.hero__title .rotator {
  overflow: visible;
  padding-block: 0;
  margin-block: 0;
}

.rotator > span.out { transform: translateY(-0.3em); opacity: 0; }
.rotator > span.in  { transform: translateY(0.3em);  opacity: 0; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__title .w > span { transform: none; opacity: 1; transition: opacity 0.2s ease; }
}

/* Rotator swap timing. The outgoing word leaves in 180ms, which is when the
   JS replaces it, so the grid cell resizes while nothing is on screen. The
   incoming word then fades up from rest. */
.rotator > span {
  transition: transform 0.34s var(--ease), opacity 0.3s var(--ease);
}
.rotator > span.out {
  transform: translateY(-0.22em);
  opacity: 0;
  transition: transform 0.18s ease-in, opacity 0.18s ease-in;
}
.rotator > span.in {
  transform: translateY(0.22em);
  opacity: 0;
  transition: none;
}

/* The headline is centred, so a change in the rotating word's width moves
   "built to be" too. JS locks and animates that width so the line glides
   instead of snapping. */
.rotator { transition: background 0.4s; }   /* width is animated in JS, see main.js */

/* ==========================================================================
   SUPER APP: design-system foundations
   ========================================================================== */
/* icon set: one outlined family on a 20px grid, shown as small tiles */
.icon-set {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: var(--sp-2);
  max-width: 900px;
}
.icon-set img {
  width: 100%;
  height: auto;          /* the height attribute would otherwise pin 20px and collapse the padded box */
  aspect-ratio: 1;
  padding: 14px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  object-fit: contain;
}
@media (max-width: 640px) { .icon-set { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); } }

/* the old app, five screens in a row */
.old-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-3);
}
@media (max-width: 900px) { .old-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .old-strip { grid-template-columns: repeat(2, 1fr); } }

/* chips inside a dark pane keep dark text on their light pill; the pane's light
   text colour was inheriting into them and hiding the labels */
.pane--navy .chip, .pane--dark .chip { color: var(--fg); }

/* ---- Super App: sections lifted from the original composition ---- */
.grid-phones { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; gap: var(--space-2xl); margin-bottom: var(--space-xl); }
.grid-phones img { width: 100%; height: auto; }
.product-screens { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; max-width: 1100px; margin-inline: auto; }
.product-screens > div { display: grid; gap: var(--sp-4); }
.product-screens > div:last-child { padding-top: var(--sp-9); }   /* the second column starts lower, as composed */
.product-screens img { width: 100%; height: auto; border-radius: 16px; }
.summary-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); }
.summary-grid figure { margin: 0; }
.summary-grid img { width: 100%; height: auto; }
.summary-grid figcaption { font-size: var(--fs-label); color: var(--fg-2); text-align: center; margin-top: var(--sp-2); }
.pane--navy .old-strip { margin-inline: auto; max-width: 1000px; }
@media (max-width: 900px) { .summary-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  .grid-phones { gap: var(--sp-4); }
  .product-screens { grid-template-columns: 1fr; }
  .product-screens > div:last-child { padding-top: 0; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Super App principal colours: five product families, each a shade ramp beside
   a swatch carrying the family's icon, measured from the original composition */
.families { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-8) var(--sp-6); }
.family { display: flex; gap: 14px; align-items: stretch; }
.shades { display: grid; grid-template-rows: repeat(5, 1fr); gap: 6px; width: 22px; }
.shades i { display: block; border-radius: 5px; }
.swatch { width: 134px; aspect-ratio: 1; border-radius: 18px; display: grid; place-items: center; }
.swatch img { width: 44px; height: 44px; }
@media (max-width: 640px) { .families { gap: var(--sp-6) var(--sp-8); } .swatch { width: 112px; } }

/* iF award mark, built in type so it stays crisp at any density and sits on the fact row it belongs to */
.if-mark {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; margin-right: var(--sp-2);
  border-radius: 5px; background: #EC2830; color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: -0.03em; line-height: 1;
  vertical-align: -6px;
}
.facts dd:has(.if-mark) { display: flex; align-items: center; gap: var(--sp-2); }
.facts dd:has(.if-mark) .if-mark { margin-right: 0; vertical-align: 0; flex: none; }

/* Super App: app icon before/after above "The change", profile icons above "Profiles",
   both lifted from the original composition */
.app-swap { display: flex; align-items: center; justify-content: center; gap: var(--sp-6); margin: 0 0 var(--sp-6); }
.app-swap img { width: 72px; height: auto; border-radius: 18px; }
.app-swap__dots { width: 26px; height: 26px; border-radius: 50%; border: 3px dotted rgba(255, 255, 255, 0.45); }
.pf-icons { display: flex; gap: var(--sp-3); margin: 0 0 var(--sp-5); }
.pf-icons span { width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); display: grid; place-items: center; }
.pf-icons img { width: 22px; height: 22px; }

/* the type marquee track is 2000px+ wide by design; clip it at its own box so the
   document never gains a horizontal scroll on phones */
.tm { overflow: hidden; }

/* section headers on small screens: the meta line drops under the title instead of colliding with it */
@media (max-width: 640px) {
  .section__head { flex-wrap: wrap; align-items: start; }
  .section__head .mono { white-space: normal; }
}

/* ==========================================================================
   MOBILE + TABLET PASS (verified on iPhone 390, iPad 820 and 1180 via device
   emulation). Everything here refines, none of it changes desktop.
   ========================================================================== */

/* component wall: the default bleed spans exactly the pane's outer width at
   every size, so the composition's own cut cards land on the pane's rounded
   edge and read as intentional. No phone override; the wrapper is inert. */
.wall-scroll { display: contents; }

/* colour families: two per row on a phone instead of a single column with a
   third of the pane empty */
@media (max-width: 640px) {
  .families { justify-content: flex-start; gap: var(--sp-5) var(--sp-4); }
  .shades { width: 18px; gap: 5px; }
  .swatch { width: 100px; border-radius: 14px; }
  .swatch img { width: 36px; height: 36px; }
}

/* nav: comfortable tap targets on touch screens, tighter fit on narrow phones */
@media (max-width: 800px) {
  .nav__links a { padding: 10px 4px; margin: -10px 0; }
}
@media (max-width: 420px) {
  .nav { padding-inline: 16px; }
  .nav__brand { font-size: 0.875rem; white-space: nowrap; }
  .nav__links { gap: 12px; font-size: var(--fs-label); }
}

/* hover transforms stick on touch screens after a tap; only offer them to a real pointer */
@media (hover: none) {
  .pcard:hover, .pcard:active { transform: none; }
  .pcard:hover .pcard__media img { transform: none; }
}

/* ---- Dow Jones token strip, built in code (replaces token-pills.webp) ----
   A centred row of token chips that runs past both pane edges and fades out,
   the way the original export did. Text stays crisp at any density. */
.token-strip {
  display: flex;                 /* a flex container centres an overflowing row symmetrically */
  justify-content: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.token-strip__row {
  display: flex;
  gap: var(--sp-4);
  flex: none;
  padding-block: var(--sp-1);
}
.token {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 9px;
  border-radius: 999px;
  background: #FDFCFA; color: #3E3E3E;
  font-family: var(--sans); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0;
  white-space: nowrap;
}
.token i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
@media (max-width: 640px) {
  .token-strip { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  .token-strip__row { gap: var(--sp-3); }
}

/* product screens: a ground a clear step darker than the screen bodies, and an
   alpha-aware shadow so each screen reads as an object on the stage */
/* the screens contain both white cards and the app's own #E7E7E7 background, so
   the stage sits clearly below both and the shadow does the separating */
.product-screens { background: #d5d8df !important; }
.product-screens img {
  filter: drop-shadow(0 2px 3px rgba(16, 20, 32, 0.13)) drop-shadow(0 18px 40px rgba(16, 20, 32, 0.20));
}

/* an aside next to body copy: quieter than the text it follows, and plainly not
   an eyebrow (those are tracked caps and label a section, not a remark) */
.note {
  font-family: var(--sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-2);
  margin: var(--sp-3) 0 0;
}
.pane--navy .note, .pane--dark .note { color: #b9b6af; }

/* the oversized quote marks are decoration: zero line-height keeps them out of
   the line box, so every line of the quote sits on the same even rhythm */
/* line-height:0 keeps the oversized glyph from inflating its line box. It was an
   inline-block of zero width pulled left by a negative margin, meant to hang
   outside the measure: the opening mark painted straight over the W instead, and
   inline-block baselines floated the closing one up onto the line above. A plain
   inline with its own advance sits on the baseline and clears both. */
.about__text .qmark {
  font-size: 1.4em;
  line-height: 0;
  color: var(--muted);
  display: inline;
}

/* ==========================================================================
   HOME WORK CARDS ON SMALL SCREENS
   The five hero compositions run from 0.51 to 1.93 in aspect ratio, so sizing
   them by width alone gave every card a different media height. Each card now
   gets one identical framed panel with the composition centred inside it, and
   a hairline plus shadow so it is obvious where a card starts and ends.
   ========================================================================== */
@media (max-width: 900px) {
  .stack__item { padding-bottom: var(--sp-6); }
  .stack .pcard {
    border: 1px solid var(--line-2);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.07);
  }
  .stack .pcard__media {
    aspect-ratio: 4 / 3;
    min-height: 0;
    padding: var(--sp-5);
    display: grid;
    place-items: center;
    background: rgba(10, 10, 12, 0.045);
    border-top: 1px solid var(--line-2);
  }
  .stack .pcard--dark .pcard__media {
    background: rgba(255, 255, 255, 0.06);
    border-top-color: rgba(255, 255, 255, 0.14);
  }
  .stack .pcard__media img,
  .stack .pcard__media .placeholder {
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
  }
}


/* Pane headings sit centred in a 1024px pane but were capped at a 22ch measure,
   using only 73% of it and wrapping a line early. A wider measure for display
   type fills the pane while keeping a comfortable line length. */
.pane .h2 { max-width: 26ch; }
@media (max-width: 700px) { .pane .h2 { max-width: 100%; } }


/* ==========================================================================
   VALUES ROW (about)
   It belongs to the Overview block above it, so it drops the marquee's own top
   margin and sits on the section's rhythm instead. Its pill colour lives with the
   dark band it now sits inside, further down.
   ========================================================================== */
.marquee--values { margin-top: 0; }


/* ==========================================================================
   HOME WORK CARDS ON DESKTOP
   The compositions run from 0.51 to 1.93 in aspect ratio and were all absolutely
   positioned at one offset with width:100%, so each landed differently: Chrome
   floated with 204px of dead space under it, the Super App lost 872px off the
   bottom, and four of the five were clipped 45px on the right. Same fix as the
   phone layout — one padded frame per card, composition centred and whole.
   ========================================================================== */
@media (min-width: 901px) {
  /* The panel takes the card's height outright. Left to stretch, its height would
     come from the image, so the image's own max-height would have nothing definite
     to resolve against and a tall composition would grow the card instead of
     fitting inside it. */
  .stack .pcard__media {
    --pad: clamp(24px, 2.6vw, 40px);
    height: var(--card-h);
    padding: var(--pad);
    display: grid;
    place-items: center;
  }
  .stack .pcard__media img {
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    max-width: 100%;
    /* an absolute cap, not 100%: the row sizing this item is auto, so a percentage
       is cyclic and Chrome drops it — the Super App composition then ran 1322px
       tall inside a 648px panel */
    max-height: calc(var(--card-h) - var(--pad) * 2);
    object-fit: contain;
    border-radius: 0;
    /* the compositions carry their own shadows; this one traced the element box,
       which read as a pale plate behind the artwork once the box was inset */
    box-shadow: none;
  }
  /* A composition cropped flush at its own edges has to reach the panel's edges
     too, or the cut floats in the middle of the card and reads as broken. It fills
     the width and bleeds off the bottom, which is how it was exported. */
  .stack .pcard--bleed .pcard__media { padding: var(--pad) 0 0; }
  .stack .pcard--bleed .pcard__media img { width: 100%; max-height: none; }
}


/* ==========================================================================
   ABOUT: DARK OVERVIEW BAND
   The page ran one flat white from the hero to the footer. The Overview block
   and the values row already grouped with it become a single dark band, on the
   same ink the home manifesto and the case-study panes use.
   ========================================================================== */
.band--dark {
  /* same ink, padding and lead-in as the home manifesto, so the two full-bleed
     bands read as one device rather than two near-misses */
  background: var(--ink);
  color: #f3f0ea;
  padding-block: var(--band-pad);
  margin-block: var(--band-gap);
  /* flow-root so the row margins inside stay inside instead of collapsing through
     the band and landing in the white either side of it */
  display: flow-root;
}
/* the band owns the vertical padding; the section inside would otherwise stack
   its own on top and push the content into the middle of a very tall box */
.band--dark > .section { padding-block: 0; }
.band--dark .marquee--values { margin: var(--space-2xl) 0 0; }

.band--dark .card {
  background: rgba(255, 255, 255, 0.06);
  color: #f3f0ea;
}
.band--dark .card p { color: #b9b6af; }
.band--dark .accent--blue { color: #fff; }
/* the same translucent white as the cards and the manifesto's stat blocks — the
   warm pill was borrowed from the light layout and read as a stray colour here */
.band--dark .chip {
  background: rgba(255, 255, 255, 0.1);
  color: #f3f0ea;
}


/* ==========================================================================
   PULL QUOTE
   A standalone quote wants more air around it than a working section, so it
   lands alone on screen and reads as a pause rather than another block. Same
   token the full-bleed bands use, one step above the section rhythm.
   ========================================================================== */
.section--quote { padding-block: var(--band-pad); }


/* The pause control sits inside the headline, so its 44px box was part of the
   line's advance and text-align pushed the second line left by half of it. A
   negative margin of exactly its own footprint takes it back out of the
   measurement: the words centre against the line above, and the button hangs
   off the end where it was drawn anyway. */
/* Only where the hanging button has room: below this it would be pushed past the
   viewport edge and clipped, and a half-visible control is worse than a headline
   that sits 22px off centre. */
@media (min-width: 601px) {
  .hero__title .pause { margin-right: calc(-44px - 0.25em); }
}


/* The about hero is followed by the chip row, which sits 210px below the lede,
   while the nav left only 112px above the avatar — the block read as sitting
   high. Case-study heroes keep the shared value: theirs is followed by the meta
   row at 64px, so the same increase would unbalance them the other way. */
.hero--profile { padding-top: calc(var(--nav-h) + var(--space-4xl)); }


/* ==========================================================================
   NAV BRAND: THE MEMOJI IS BACK
   A neutral-palette pass had switched the avatar off; it returns as the mark
   beside the name, and on a phone it is the whole brand — the name is what
   goes, since the memoji is what people recognise and it leaves the links room.
   ========================================================================== */
.nav__brand::before {
  content: "🧔🏻";
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-2);
  font-size: 17px;
}
/* An earlier layer styles any span in the brand as a grey 400-weight subtitle and
   then hides it — written for a subtitle that no longer exists. Wrapping the name
   in a span inherited both, so it needs display, weight and colour back. */
.nav__brand .nav__name {
  display: inline;
  font-weight: 500;
  color: var(--fg);
}

@media (max-width: 640px) {
  .nav__brand .nav__name { display: none; }
}