/* Matt Munz portfolio, site stylesheet.
   Consolidated from portfolio.css + v4.css (Sept 2026). Rules are grouped by component; within a group,
   source order still matters where selectors of equal specificity set the same property.
   Colors: warm off-white paper (--bg), dark neutral ink (--ink), a berry-magenta accent (--accent). */

/* ======================================================================
   Foundations
   Tokens, element defaults and shared type.
   ====================================================================== */

:root {
  --bg: #f6f3f7;
  --ink: #221c2e;
  --muted: #6b6172;
  --line: #d3d2dc;
  --accent: #c2367c;
  --violet: #8a5fd6; --sea-teal: #4fa9b8; --sun-gold: #e2a86c; --night-plum: #2a1d3a; /* the shared palette: pink and violet lead, teal and gold support */
  /* One size for every page's main headline (home, Experience, About, Résumé, Contact). */
  --page-title: clamp(1.9rem,4.2vw,3.75rem);
  font-family: 'Proxima Nova','Source Sans 3',sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  --font-site: 'Proxima Nova','Source Sans 3',sans-serif;

  /* Tunable values, dialed in live via the dev tweak panel (dev-tweaks.js, Alt+Shift+T on localhost). */
  --space-section: 0px;       /* offset added to each section heading's own top spacing */
  --card-ratio-featured: 2.65; /* Selected Work image aspect-ratio */
  --card-ratio-more: 1.6;     /* More Work thumbnail aspect-ratio */
  --logo-brightness: .28;     /* monotone client-logo darkness at rest */
  --logo-opacity: .78;        /* monotone client-logo opacity at rest */
  --wave-speed: 1;            /* multiplier on the idle logo-wall float/tilt speed */
  --wave-amplitude: 1;        /* multiplier on the idle logo-wall float/tilt amplitude */
  --wall-curve: 130;          /* degrees the client-logo wall wraps around the viewer */
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}
img {
  display: block;
  max-width: 100%;
}
nav a:hover {
  color: var(--accent);
}
.eyebrow {
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 24px;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  font-size: clamp(3.1rem,6.5vw,6.1rem);
  line-height: 1.04;
  margin-bottom: 30px;
}
h1 em,
h2 em {
  font-style: normal;
  color: var(--muted);
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 35px;
  padding: calc(50px + var(--space-section)) 0 30px;
}
h2 {
  font-size: clamp(1.9rem,3vw,2.8rem);
  line-height: 1.14;
  margin-bottom: 0;
}
.section-heading>p {
  font-size: .96rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
.project-number {
  position: absolute;
  z-index: 1;
  left: 19px;
  top: 18px;
  color: #fff;
  font-size: .8rem;
  letter-spacing: .1em;
}
footer p {
  font-size: .8rem;
  color: var(--muted);
  margin: 7px 0;
}
footer nav {
  display: flex;
  gap: 14px;
  flex-direction: column;
  font-size: .8rem;
}
.back {
  display: inline-block;
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 35px;
}
.section-number {
  font-size: .75rem;
  color: var(--accent);
  padding-top: 6px;
}
@media (max-width:700px) {
  .section-heading {
    align-items: start;
    flex-direction: column;
    gap: 18px;
  }
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    transform: none !important;
  }
}
button {
  font: inherit;
  cursor: pointer;
}
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
@media (prefers-reduced-motion:reduce) {
  * {
    transition: none !important;
  }
}
@media print {
  body {
    background: white;
    color: black;
  }
}
body,
button {
  font-family: var(--font-site);
}
h1 em,
h2 em,
.hero h1 em {
  font-weight: 800;
}
#work>.section-heading,
#more>.section-heading {
  display: block;
}
#work>.section-heading>p,
#more>.section-heading>p {
  margin: 15px 0 0;
  max-width: 58ch;
  line-height: 1.55;
}
#work>.section-heading {
  border-top: 1px solid var(--line);
  padding-top: 23px;
  padding-bottom: 20px;
}
#work>.section-heading h2 {
  font-size: 1.9rem;
}
#work>.section-heading>p {
  margin-top: 8px;
  font-size: .88rem;
}
@media (max-width:560px) {
  #work>.section-heading {
    padding-top: 19px;
    padding-bottom: 17px;
  }
  #work>.section-heading h2 {
    font-size: 1.6rem;
  }
  #work>.section-heading>p {
    font-size: .8rem;
    max-width: 35ch;
  }
}
#work {
  position: relative;
}
#work::before {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
  left: -3vw;
  right: -3vw;
  top: -30px;
  height: 225px;
  background: radial-gradient(ellipse at 30% 48%,#d3d1e53d 0%,#dbdaeb20 48%,transparent 74%);
  border-radius: 50%;
}
html {
  scroll-padding-top: 100px;
}
@media (max-width:600px) {
  html {
    scroll-padding-top: 86px;
  }
}
#more>.section-heading {
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  display: block;
  padding: calc(26px + var(--space-section)) 0 28px;
}
#more>.section-heading h2 {
  font-size: clamp(25px,2.7vw,34px);
  line-height: 1.15;
  margin: 0;
}
@media (max-width:750px) {
  #more>.section-heading h2 {
    font-size: 27px;
  }
}
#more>.section-heading>p {
  margin: 7px 0 0;
  max-width: none;
  font-size: 14px;
  line-height: 1.5;
}

/* ======================================================================
   Header
   Primary navigation and identity.
   ====================================================================== */

.nav,
main,
footer {
  max-width: 1400px;
  margin: auto;
  padding-left: 5vw;
  padding-right: 5vw;
}

/* Foundations, continued: these must follow the rules above. */
footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding-top: 35px;
  padding-bottom: 25px;
}
@media (max-width:700px) {
  footer {
    grid-template-columns: 1fr;
  }
}

/* Header, continued: these must follow the rules above. */
.nav {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  border-bottom: 1px solid var(--line);
}
.identity {
  display: flex;
  gap: 14px;
  align-items: center;
}
.identity img {
  filter: grayscale(1) brightness(0);
  width: 38px;
}
.identity b {
  font-size: 1.1rem;
}
/* Cut-out headshot beside the name, standing on the header's bottom rule. */
.nav .identity {
  align-self: stretch;
  align-items: flex-end;
}
.nav .identity b {
  align-self: center;
}
.identity img.identity-avatar {
  width: auto;
  height: min(70px,calc(100% - 8px));
  flex: none;
  border-radius: 0;
  object-fit: contain;
  object-position: bottom;
  filter: none;
  box-shadow: none;
  margin-bottom: 0;
}
@media (max-width:700px) {
  .identity img.identity-avatar {
    height: min(58px,calc(100% - 8px));
  }
}
.nav nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: .86rem;
}
@media (max-width:700px) {
  .nav {
    height: 75px;
  }
  .nav nav {
    gap: 14px;
    font-size: .76rem;
  }
  .nav .identity {
    gap: 8px;
  }
  .identity b {
    font-size: .95rem;
  }
  .identity img {
    width: 30px;
  }
}
@media (max-width:500px) {
  .nav nav {
    gap: 10px;
    font-size: .72rem;
  }
}
.nav nav a[aria-current=page] {
  color: var(--accent);
  position: relative;
}
.nav nav a[aria-current=page]::after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}
body>.nav {
  height: 82px;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgb(246 243 247 / .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body>.nav nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: .82rem;
}
body>.nav nav>a {
  position: relative;
  padding: 10px 0;
  line-height: 1.2;
  white-space: nowrap;
}
body>.nav nav>a[aria-current=page] {
  border-bottom: 0;
}
body>.nav nav>a:not(.nav-resume)[aria-current=page]:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}
body>.nav nav>a.nav-resume {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #bab6c8;
  padding: 10px 13px;
  margin-left: 6px;
  background: #e3e2ee;
  color: #403250;
  transition: background .2s,border-color .2s;
}
.nav-resume svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body>.nav nav>a.nav-resume:hover {
  background: #d7d4e8;
  border-color: #847ca2;
}
body>.nav nav>a.nav-resume[aria-current=page] {
  background: #d7d3e8;
  border-color: #79719a;
}
@media (max-width:600px) {
  body>.nav {
    height: 72px;
  }
  body>.nav nav {
    gap: 13px;
    font-size: .72rem;
  }
  body>.nav nav>a.nav-resume {
    padding: 8px 9px;
    margin-left: 0;
    gap: 5px;
  }
  .nav-resume svg {
    width: 14px;
    height: 14px;
  }
  body>.nav .identity b {
    display: none;
  }
}
@media (max-width:760px) {
  body>.nav nav {
    gap: 12px;
  }
}
@media (max-width:440px) {
  body>.nav nav {
    gap: 9px;
    font-size: .66rem;
  }
  body>.nav nav>a.nav-resume {
    padding: 8px;
  }
  .nav-resume svg {
    display: none;
  }
}

/* ======================================================================
   Home hero
   Introduction, actions and the Heirloom device demo over the drafted floor plan.
   ====================================================================== */

.hero-bottom {
  justify-content: space-between;
  margin: 30px 0 42px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.hero-bottom p {
  max-width: 690px;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  margin-bottom: 0;
}
@media (max-width:700px) {
  .hero-bottom {
    margin: 23px 0 30px;
    flex-wrap: wrap;
  }
  .hero-bottom p {
    font-size: 1.08rem;
  }
}
.hero h1 em {
  color: #7c778c;
}
.hero-work-button {
  display: inline-flex;
  align-items: center;
  flex: none;
  overflow: hidden;
  gap: 18px;
  background: var(--ink);
  color: #f6f3f7;
  box-shadow: none;
  padding: 15px 21px;
  border: 0;
  transition: background .25s,transform .3s;
  align-self: flex-start;
}
.hero-work-label {
  white-space: nowrap;
  font-size: .88rem;
  padding: 0;
}
.hero-work-arrow {
  display: grid;
  place-items: center;
  transition: background .3s,color .3s;
  overflow: hidden;
  background: none;
  color: inherit;
  width: 20px;
  align-self: center;
  border: 0;
}
.hero-work-arrow svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .45s cubic-bezier(.2,.75,.2,1);
  width: 19px;
  height: 19px;
}
.hero-work-button:hover svg {
  transform: translateY(3px);
}
@media (prefers-reduced-motion:reduce) {
  .hero-work-button:hover svg {
    transform: none;
  }
}
.hero-work-button:hover {
  background: #473954;
  border-color: transparent;
  box-shadow: none;
  transform: translateY(-1px);
}
.hero-work-button:hover .hero-work-arrow {
  background: none;
  color: inherit;
}
.hero-work-button:active {
  transform: translateY(0);
}
@media (prefers-reduced-motion:reduce) {
  .hero-work-button:hover {
    transform: none;
  }
}
.hero-bottom {
  flex-direction: column;
}
.hero-intro {
  display: grid;
  align-items: center;
  grid-template-columns: 1.12fr 1fr;
  gap: 35px;
  padding-top: 32px; /* room between the header and the top of the phone */
  padding-bottom: 20px;
  min-height: 0;
}
.hero-copy {
  position: relative;
  z-index: 1;
}
.hero-copy .eyebrow {
  letter-spacing: .11em;
  font-size: .6rem;
  margin-bottom: 14px;
}
.hero-copy h1 em {
  color: #79748c;
}
.hero-copy .hero-bottom {
  margin: 0;
  gap: 18px;
}
.hero-demo {
  min-width: 0;
  width: 100%;
  max-width: none;
  margin: 0;
}
.demo-stage {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1500px;
  height: clamp(250px,35vh,325px);
}
.demo-stage:before {
  content: '';
  position: absolute;
  z-index: -1;
  background: radial-gradient(ellipse at 38% 42%,#cfcfd199,transparent 63%),radial-gradient(ellipse at 77% 70%,#d6d2cc70,transparent 56%);
  inset: 8% 5% 0%;
  filter: blur(22px);
}
.demo-orbit {
  position: absolute;
  height: 100px;
  border: 1px solid #c4c1d280;
  border-radius: 50%;
  z-index: -1;
  bottom: 18px;
  transform: rotate(-16deg);
  width: 94%;
  display: none;
}
.demo-phone {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: default;
  pointer-events: none;
  border-radius: 0;
  transition: none;
  filter: drop-shadow(5px 14px 10px #1a1d1b26);
  transform-style: flat;
  margin: 0;
  width: clamp(110px,14.5vh,138px);
  max-width: none;
}
.demo-phone video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12%/6%;
  background: #0a090b;
  box-shadow: 0 22px 30px -16px #141a1670,0 2px 4px #17191850;
  pointer-events: none;
}
.phone-caption {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: .59rem;
  letter-spacing: .055em;
  margin: 18px 12px 0;
  color: #686378;
  display: none;
}
.demo-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  padding: 0 14%;
  font-size: .59rem;
  gap: 10px;
}
#demo-motion {
  border: 0;
  background: none;
  color: var(--ink);
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: .6rem;
  padding: 4px;
}
@media (max-width:900px) {
  .hero-copy {
    max-width: 650px;
  }
}
.device-shell {
  position: relative;
  background: none;
  border: 0;
  border-radius: 18.5% / 8.95%;
  box-shadow: none;
  overflow: hidden;
  backface-visibility: visible;
  transform: none;
  padding: 0;
}
.device-screen {
  position: relative;
  isolation: isolate;
  border: 0;
  background: #050506;
  border-radius: inherit;
  overflow: hidden;
  transform: none;
}
.demo-phone .device-screen video {
  pointer-events: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width:500px) {
  .phone-caption {
    font-size: .5rem;
    margin-top: 12px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .demo-phone-back,
  .demo-phone-back:hover {
    transform: rotate(-15deg) !important;
  }
}
.hero {
  padding: 18px 0 0;
}
.hero-copy .hero-bottom p {
  font-size: 1rem;
  line-height: 1.5;
  max-width: 41ch;
}
.hero-copy .hero-work-button {
  padding: 11px 17px;
}
.hero-copy .hero-work-label {
  font-size: .78rem;
}
.demo-phone-back,
.demo-phone-back:hover {
  left: 18%;
  top: 9px;
  transform: rotateX(6deg) rotateY(18deg) rotateZ(-20deg);
}
@media (max-width:900px) {
  .hero-intro {
    grid-template-columns: 1.12fr 1fr;
    gap: 15px;
    padding-bottom: 20px;
  }
  .hero-copy .hero-bottom p {
    font-size: .9rem;
  }
  .hero-copy .eyebrow {
    font-size: .53rem;
  }
  .demo-stage {
    height: 280px;
  }
  .demo-phone {
    width: 116px;
  }
  .demo-phone-back,
  .demo-phone-back:hover {
    left: 10%;
    top: 5px;
  }
  .demo-caption {
    padding: 0;
    font-size: .54rem;
  }
}
@media (max-width:560px) {
  .hero {
    padding-top: 20px;
  }
  .hero-intro {
    grid-template-columns: 1.4fr 1fr;
    gap: 9px;
    padding-top: 0;
    padding-bottom: 22px;
  }
  .hero-copy .eyebrow {
    font-size: .64rem; /* readable on a phone (was 8px) */
    letter-spacing: .065em;
    line-height: 1.4;
    margin-bottom: 12px;
  }
  .hero-copy .hero-bottom p {
    font-size: .8rem;
    line-height: 1.5;
  }
  .hero-copy .hero-bottom {
    gap: 15px;
  }
  .hero-copy .hero-work-button {
    padding: 10px 12px;
    gap: 7px;
  }
  .hero-copy .hero-work-label {
    font-size: .65rem;
  }
  .hero-work-arrow svg {
    width: 14px;
    height: 14px;
  }
  .demo-stage {
    height: 245px;
  }
  .demo-phone {
    width: 85px;
  }
  .demo-phone-back,
  .demo-phone-back:hover {
    left: 0;
    top: 16px;
    transform: rotateY(12deg) rotateZ(-16deg);
  }
  .demo-caption {
    justify-content: flex-end;
    padding: 0;
  }
}
.single-demo .demo-stage {
  height: clamp(295px,39vh,355px);
  perspective: 1000px;
}
.single-demo .demo-phone-back,
.single-demo .demo-phone-back:hover {
  max-width: none;
  left: 50%;
  right: auto;
  will-change: transform;
  transform: translateX(-50%) translateY(var(--phone-rise,0px)) rotateX(var(--phone-x,-7deg)) rotateY(var(--phone-y,-20deg)) rotateZ(var(--phone-z,15deg));
  width: clamp(185px,23vh,215px);
}
.single-demo .demo-caption {
  font-size: .61rem;
  position: absolute;
  padding: 0;
  right: 0;
  top: 0;
  justify-content: flex-end;
}
@media (max-width:900px) {
  .single-demo .demo-stage {
    height: 310px;
  }
}
@media (max-width:560px) {
  .single-demo .demo-stage {
    height: 250px;
  }
  .single-demo .demo-phone-back,
  .single-demo .demo-phone-back:hover {
    left: 50%;
  }
}
@media (prefers-reduced-motion:reduce) {
  .single-demo .demo-phone-back,
  .single-demo .demo-phone-back:hover {
    will-change: auto;
    transform: translateX(-50%) rotateX(var(--phone-x,-7deg)) rotateY(var(--phone-y,-20deg)) rotateZ(var(--phone-z,15deg)) !important;
  }
}
.hero:has(.single-demo),
.hero:has(.single-demo) .hero-intro {
  overflow: visible;
}
.single-demo {
  position: relative;
  z-index: 2;
}
.single-demo .demo-phone-back,
.single-demo .demo-phone-back:hover {
  top: 12px;
}
@media (max-width:900px) {
  .single-demo .demo-phone-back,
  .single-demo .demo-phone-back:hover {
    width: 185px;
  }
}
@media (max-width:560px) {
  .single-demo .demo-phone-back,
  .single-demo .demo-phone-back:hover {
    width: 132px;
    top: 22px;
  }
  .single-demo .demo-caption {
    right: 0;
    top: -10px;
  }
}
.single-demo .device-shell,
.single-demo .device-screen {
  width: 100%;
  padding: 0;
  border: 0;
  transform: none;
}
.single-demo .device-screen video {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  transform: none;
}
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.hero-copy .hero-actions .hero-work-button {
  margin: 0;
}
.hero-all-work {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 17px;
  border: 1px solid #b8b4c5;
  color: #443653;
  background: transparent;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background .2s,border-color .2s;
}
.hero-all-work svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s;
}
.hero-all-work:hover {
  background: #dedbec;
  border-color: #817999;
}
.hero-all-work:hover svg {
  transform: translateX(3px);
}
.hero-all-work:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
@media (max-width:560px) {
  .hero-all-work {
    font-size: .65rem;
    padding: 10px 12px;
    gap: 7px;
  }
  .hero-all-work svg {
    width: 14px;
    height: 14px;
  }
}
.hero-copy .hero-actions .hero-work-button,
.hero-copy .hero-all-work {
  gap: 0;
  padding: 10px 15px;
}
@media (max-width:560px) {
  .hero-copy .hero-actions .hero-work-button,
  .hero-copy .hero-all-work {
    padding: 9px 12px;
  }
}
.single-demo .hero-blueprint {
  position: absolute;
  width: 125%;
  max-width: 670px;
  height: auto;
  left: 50%;
  top: 49%;
  transform: translate(-50%,-42%);
  z-index: -1;
  pointer-events: none;
  overflow: visible;
  stroke: url(#blueprint-fade);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: blueprint-breathe 14s ease-in-out infinite;
}
@keyframes blueprint-breathe {
  0%, 100% { opacity: 0; }
  20%, 65% { opacity: .65; }
  85% { opacity: .2; }
}
@media (max-width:560px) {
  .single-demo .hero-blueprint {
    width: 160%;
    top: 55%;
    opacity: .5;
  }
}
@media (prefers-reduced-motion:reduce) {
  .single-demo .hero-blueprint {
    animation: none;
    opacity: .3;
    transform: translate(-50%,-42%) !important;
  }
}
.single-demo .hero-blueprint.blueprint-plan {
  left: 50%;
  height: auto;
  stroke-width: .85;
  z-index: -1;
  transform: translate(-50%,-44%) translateY(var(--plan-drift,0px)) perspective(1100px) rotateX(var(--plan-tilt,32deg)) rotateZ(var(--plan-turn,-13deg));
  transform-origin: 50% 48%;
  will-change: transform;
  animation: none;
  opacity: .5;
  stroke: #537fa4;
  color: #537fa4;
  width: 150%;
  max-width: 770px;
  pointer-events: none;
  top: 33%;
}
.blueprint-plan .plan-grid {
  opacity: .14;
  stroke-width: .45;
}
.blueprint-plan .plan-walls {
  stroke-width: 1.4;
  opacity: .9;
}
.blueprint-plan .plan-openings {
  opacity: .8;
  stroke-width: .8;
}
.blueprint-plan .plan-furniture {
  opacity: .65;
  stroke-width: .7;
}
.blueprint-plan .plan-dimensions {
  opacity: .55;
  stroke-width: .55;
}
.blueprint-plan .plan-labels {
  opacity: .65;
}
@media (prefers-reduced-motion:reduce) {
  .single-demo .hero-blueprint.blueprint-plan {
    transform: translate(-50%,-44%) perspective(1100px) rotateX(32deg) rotateZ(-13deg) !important;
    will-change: auto;
  }
}
.phone-project-note {
  position: absolute;
  left: 0;
  bottom: 25px;
  max-width: 145px;
  color: #564f66;
  pointer-events: none;
}
.phone-project-note:before {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: #8f89af;
  margin-bottom: 9px;
}
.phone-project-note>span {
  display: block;
  font-size: .66rem;
  font-weight: 600;
  line-height: 1.3;
}
.phone-project-note>small {
  display: block;
  font-size: .57rem;
  line-height: 1.4;
  color: var(--muted);
  margin-top: 4px;
}
@media (max-width:900px) {
  .phone-project-note {
    left: 0;
    bottom: 0;
    max-width: 110px;
  }
}
@media (max-width:560px) {
  .phone-project-note {
    bottom: -45px;
    left: 0;
    max-width: 100px;
  }
  .phone-project-note>span {
    font-size: .56rem;
  }
  .phone-project-note>small {
    font-size: .5rem;
  }
  .phone-project-note:before {
    margin-bottom: 6px;
    width: 15px;
  }
}
.blueprint-plan .plan-ink {
  animation: none;
  clip-path: none;
}
.blueprint-plan .plan-trace {
  stroke-width: 1.9;
  opacity: .85;
  stroke: #2f648f;
}
.blueprint-plan .plan-trace path {
  stroke-dasharray: 140 860;
  stroke-dashoffset: 0;
  animation: plan-perimeter-trace 14s linear infinite;
}
@keyframes plan-perimeter-trace {
  to { stroke-dashoffset: -1000; }
}
@media (prefers-reduced-motion:reduce) {
  .blueprint-plan .plan-trace path {
    animation: none;
    stroke-dasharray: none;
  }
  .blueprint-plan .plan-trace {
    opacity: .3;
  }
}
.single-demo .phone-project-note {
  left: auto;
  max-width: 135px;
  padding: 10px 0 10px 12px;
  top: 55%;
  bottom: auto;
  transform: translateY(-50%);
  right: 0;
  background: none;
  border: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease,visibility .3s;
  z-index: 4;
  pointer-events: auto;
}
.single-demo .phone-project-note:before {
  display: none;
}
.single-demo .phone-project-note>span {
  font-size: .67rem;
  color: #48395d;
}
.single-demo .phone-project-note>small {
  font-size: .56rem;
  line-height: 1.5;
  margin-top: 5px;
}
@media (max-width:900px) {
  .single-demo .phone-project-note {
    max-width: 105px;
    top: 55%;
    right: -5px;
  }
}
@media (max-width:560px) {
  .single-demo .phone-project-note {
    max-width: 125px;
    padding: 6px 0 6px 8px;
    top: auto;
    bottom: -58px;
    right: 0;
    transform: none;
  }
  .single-demo .phone-project-note>span {
    font-size: .57rem;
  }
  .single-demo .phone-project-note>small {
    font-size: .49rem;
  }
  .single-demo .hero-blueprint.blueprint-plan {
    width: 190%;
    max-width: none;
  }
}
@media (min-width:561px) {
  .single-demo .phone-project-note {
    top: 62%;
  }
}
.single-demo .phone-project-note {
  padding-left: 0;
}
.single-demo:has(.demo-stage:hover) .phone-project-note,
.single-demo:focus-within .phone-project-note {
  opacity: 1;
  visibility: visible;
}
@media (hover:none) {
  .single-demo .phone-project-note {
    opacity: 1;
    visibility: visible;
  }
}
@media (prefers-reduced-motion:reduce) {
  .single-demo .phone-project-note {
    transition: none;
  }
}
.single-demo .demo-phone,
.single-demo .demo-phone:hover {
  pointer-events: auto;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  transform-style: preserve-3d;
  filter: none;
  overflow: visible;
}
.single-demo .demo-phone.is-dragging {
  cursor: grabbing;
}
.single-demo .demo-phone:focus-visible {
  outline: 2px solid #776d8e;
  outline-offset: 8px;
  border-radius: 18% / 9%;
}
.single-demo .device-shell {
  transform-style: preserve-3d;
  overflow: visible;
  isolation: auto;
  backface-visibility: visible;
}
.single-demo .device-screen {
  transform: translateZ(.3px);
  backface-visibility: hidden;
}
.single-demo .device-depth {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transform: translateZ(calc(-1 * var(--device-depth,21px) * var(--depth-step)));
  background: linear-gradient(115deg,#6b6e70 0%,#303335 13%,hsl(210 4% var(--edge-light)) 45%,#151719 75%,#44484b 100%);
  box-shadow: inset 0 0 0 .6px #92959770;
  backface-visibility: visible;
}
.single-demo .device-rear {
  background: linear-gradient(130deg,#373a3d,#181b1d);
  box-shadow: inset 0 0 0 1px #75727a,2px 4px 3px rgb(20 22 21 / .12),var(--phone-shadow-x,10px) var(--phone-shadow-y,21px) var(--phone-shadow-blur,14px) rgb(20 22 21 / var(--phone-shadow-alpha,.24));
}
.hero-title-line {
  display: block;
}
@media (prefers-reduced-motion:no-preference) {
  .single-demo .demo-phone {
    animation: phone-arrival 2100ms cubic-bezier(.22,.68,.16,1) both,phone-arrival-bank 2300ms cubic-bezier(.22,.8,.25,1) both;
  }
  .hero-copy>.eyebrow,
  .hero-copy .hero-title-line,
  .hero-copy .hero-bottom>p,
  .hero-copy .hero-actions>a {
    mask-image: linear-gradient(90deg,#000 29%,rgb(0 0 0 / .94) 38%,rgb(0 0 0 / .5) 50%,rgb(0 0 0 / .06) 62%,transparent 71%);
    mask-size: 350% 100%;
    mask-repeat: no-repeat;
    animation: hero-wipe 1550ms cubic-bezier(.2,.65,.22,1) both,hero-slide 1550ms cubic-bezier(.2,.65,.22,1) both;
  }
  /* The wipe trails the phone as it crosses the copy (roughly 150-400ms into its arrival). */
  .hero-copy>.eyebrow {
    animation-delay: 120ms;
  }
  .hero-copy .hero-title-line:first-child {
    animation-delay: 190ms;
  }
  .hero-copy .hero-title-line:nth-child(2) {
    animation-delay: 270ms;
  }
  .hero-copy .hero-bottom>p {
    animation-delay: 370ms;
  }
  .hero-copy .hero-actions>a:first-child {
    animation-delay: 460ms;
  }
  .hero-copy .hero-actions>a:nth-child(2) {
    animation-delay: 520ms;
  }
  .hero-copy:focus-within .eyebrow,
  .hero-copy:focus-within .hero-title-line,
  .hero-copy:focus-within .hero-bottom>p,
  .hero-copy:focus-within .hero-actions>a {
    animation: none;
    mask-image: none;
  }
  .single-demo .demo-phone.is-dragging {
    animation: none;
  }
  /* Held in the opening pose until the page has settled (hero-demos.js lifts it), so the first, fastest stretch of
     the flight never shares the main thread with the page's start-up work. */
  html.intro-hold .single-demo .demo-phone,
  html.intro-hold .hero-copy>.eyebrow,
  html.intro-hold .hero-copy .hero-title-line,
  html.intro-hold .hero-copy .hero-bottom>p,
  html.intro-hold .hero-copy .hero-actions>a,
  html.intro-hold .blueprint-plan,
  html.intro-hold .blueprint-plan *,
  html.intro-hold .single-demo .hero-blueprint.blueprint-plan,
  html.intro-hold .single-demo .blueprint-plan * {
    animation-play-state: paused;
  }
}
@keyframes phone-arrival {
  from { translate: calc(-78vw - 240px) -46px -150px; }
  to { translate: 0 0 0; }
}
@keyframes phone-arrival-bank {
  from { rotate: -10deg; }
  to { rotate: 0deg; }
}
@keyframes hero-wipe {
  from { mask-position: 100% 0; }
  to { mask-position: 0 0; }
}
/* Fade and slide live apart from the mask so they run on the compositor and stay smooth while the
   blueprint draws; the slide is horizontal only, travelling with the phone. */
@keyframes hero-slide {
  from { opacity: .2; translate: -18px 0; }
  to { opacity: 1; translate: 0 0; }
}
.single-demo:has(.phone-project-note:hover) .phone-project-note {
  opacity: 1;
  visibility: visible;
}
.phone-project-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-top: 7px;
  font-size: .62rem;
  font-weight: 650;
  color: #3b2453;
  text-decoration: underline;
  text-decoration-color: #a19aaf;
  text-underline-offset: 4px;
  transition: color .2s ease,text-decoration-color .2s ease;
}
.phone-project-link:hover {
  color: #231431;
  text-decoration-color: currentColor;
}
.phone-project-link:focus-visible {
  outline: 2px solid #776d8e;
  outline-offset: 4px;
  border-radius: 3px;
}
@media (hover:none) {
  .phone-project-link {
    min-height: 44px;
  }
}
/* The sheet eases into its tilt from a little flatter and closer as the phone lands, settling onto the scroll-driven
   pose (the keyframe reads the same --plan-* values, and the end state is the rule above, so nothing jumps). */
@media (prefers-reduced-motion:no-preference) {
  .single-demo .hero-blueprint.blueprint-plan {
    animation: blueprint-settle 2600ms cubic-bezier(.2,.62,.22,1) backwards;
  }
}
@keyframes blueprint-settle {
  from {
    transform: translate(-50%,-44%) translateY(var(--plan-drift,0px)) perspective(1100px) rotateX(calc(var(--plan-tilt,32deg) - 10deg)) rotateZ(calc(var(--plan-turn,-13deg) + 3deg));
    scale: 1.05;
  }
}
@media (prefers-reduced-motion:no-preference) {
  .hero-copy .hero-actions>a {
    mask-image: none;
    animation-name: hero-button-arrival;
    animation-duration: 850ms;
    animation-timing-function: cubic-bezier(.22,1,.36,1);
  }
}
@keyframes hero-button-arrival {
  from { opacity: 0; translate: -14px 0; scale: .98; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
/* The drafting itself (hero-demos.js times each stroke through --draw-delay and --draw-time; every pen shares the one
   easing here, which the script mirrors to time the ticks): the grid fades up from the first frame, every line is a pen
   stroke drawn by its dash offset alone (a 1-on, 2-off dash at pathLength 1, so an undrawn line has no stray cap dot),
   and the lettering sets last. Lines carry no opacity animation, which would lift each one onto a layer of its own. */
@media (prefers-reduced-motion:no-preference) {
  .blueprint-plan .plan-grid {
    animation: blueprint-grid 900ms cubic-bezier(.3,0,.25,1) backwards;
  }
  .blueprint-plan .plan-draw-line {
    animation: blueprint-draft var(--draw-time,500ms) var(--draw-ease,ease) var(--draw-delay,950ms) backwards;
    stroke-dasharray: 1 2;
    stroke-dashoffset: 0;
  }
  .blueprint-plan .plan-ink text {
    animation: blueprint-lettering 550ms cubic-bezier(.25,.6,.3,1) var(--draw-delay,2150ms) backwards;
  }
  .blueprint-plan .plan-trace {
    display: none;
  }
}
@keyframes blueprint-grid {
  from { opacity: 0; }
}
@keyframes blueprint-draft {
  from { stroke-dashoffset: 1.002; }
}
@keyframes blueprint-lettering {
  from { opacity: 0; }
}
@media (prefers-reduced-motion:no-preference) {
  .blueprint-plan:not(.blueprint-ready) {
    visibility: hidden;
  }
}
/* After the plan has drawn (hero-demos.js adds .blueprint-drawn), its finished animations are dropped for the same
   end state, so the 300-odd strokes stop holding animations of their own. They keep their dash, which at offset 0 is
   the whole line: dropping it as well redrew every closed shape's start corner, a visible pop. */
.blueprint-plan.blueprint-drawn .plan-draw-line {
  animation: none;
}
.blueprint-plan.blueprint-drawn .plan-ink text {
  animation: none;
  opacity: 1;
}

/* ======================================================================
   Selected work
   Two-column featured stories.
   ====================================================================== */

.featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px 30px;
}
.feature {
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: border-color .35s,box-shadow .45s,transform .45s cubic-bezier(.22,1,.36,1);
}
.feature-image {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  background: #202b2e;
  aspect-ratio: var(--card-ratio-featured);
}
.feature-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
  z-index: 2;
}
.feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.feature:hover img {
  transform: scale(1.035);
}
.read-story {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 8px 13px;
  border-radius: 4px;
  background: #f6f3f7ef;
  color: #2c2532;
  font-size: .75rem;
  z-index: 1;
  transform: translateY(5px);
  opacity: 0;
  transition: opacity .3s,transform .4s;
}
.feature:hover .read-story,
.feature:focus-visible .read-story {
  opacity: 1;
  transform: none;
}
.feature-meta {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin: 19px 0 12px;
  color: var(--muted);
  font-size: .72rem;
}
.feature-meta span:last-child {
  white-space: nowrap;
}
@media (max-width:700px) {
  .featured {
    gap: 35px;
    grid-template-columns: 1fr;
  }
  .read-story {
    opacity: 1;
    transform: none;
  }
}
.feature-tags {
  margin-top: auto;
  margin-bottom: 14px;
}
.feature-image .project-number,
.feature-image .read-story {
  z-index: 3;
}
@media (max-width:560px) {
  .featured {
    gap: 28px;
  }
}
.work-title-highlight {
  padding: 0 .055em;
  margin: 0 -.055em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(#e8a3c6,#e8a3c6);
  background-repeat: no-repeat;
  background-position: 0 65%;
  background-size: 0% 94%;
  transition: background-size .48s cubic-bezier(.22,1,.36,1);
  color: inherit;
}
@media (prefers-reduced-motion:reduce) {
  .work-title-highlight {
    transition: none;
  }
}
.mini-project .work-title-highlight {
  background: none;
  padding: 0;
  margin: 0;
}
.feature .feature-image {
  aspect-ratio: var(--card-ratio-featured);
  border-radius: 8px;
  overflow: hidden;
}
.feature .project-number {
  top: 12px;
  left: 16px;
  font-size: .7rem;
  text-shadow: 0 1px 8px #0009;
}
.feature .read-story {
  display: none;
}
.feature-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 0 0;
}
.feature .feature-meta {
  margin: 0 0 13px;
  align-items: baseline;
  margin-bottom: 12px;
  gap: 18px;
}
.feature .feature-meta span:first-child {
  font-weight: 600;
  color: #5a5065;
}
.feature .feature-meta span:last-child {
  white-space: normal;
  text-align: right;
}
.feature .work-title-highlight {
  background: none;
  transition: background-size .48s cubic-bezier(.22,1,.36,1);
  padding: 0 .055em;
  margin: 0 -.055em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-repeat: no-repeat;
  background-position: 0 65%;
  background-size: 0% 94%;
  background-image: linear-gradient(var(--photo-highlight,#c1aaf7),var(--photo-highlight,#c1aaf7));
}
.feature-content>p {
  font-size: .93rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 51ch;
}
@media (max-width:680px) {
  .feature .feature-image {
    aspect-ratio: 2.3;
  }
  .feature-content>p {
    font-size: .9rem;
  }
}
.feature,
.feature:hover {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
.feature .role>.feature-action {
  display: inline-flex;
  width: auto;
  border: 1px solid #332341;
  transform: none;
  align-self: center;
  position: relative;
  isolation: isolate;
  flex: none;
  gap: 0;
  overflow: hidden;
  font-size: var(--card-meta);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  height: auto;
  min-height: 38px;
  padding: 10px 16px;
  box-shadow: none;
  white-space: nowrap;
}
.feature:hover .role>.feature-action,
.feature:focus-visible .role>.feature-action {
  transform: none;
}
@media (max-width:680px) {
  .feature-content {
    padding: 18px 0 0;
  }
}
.feature[href="case.html?project=25"] .feature-image:after {
  display: none;
}
.feature[href="case.html?project=25"] .project-number {
  color: #332341;
  text-shadow: none;
}
.feature-action svg {
  width: 17px;
  height: 17px;
  flex: none;
  transition: transform .3s;
}
.feature:hover .feature-action svg {
  transform: translate(1px,-1px);
}
.feature .feature-content>.feature-meta,
.feature .feature-content>h3,
.feature .feature-content>p,
.feature .feature-content>.feature-tags {
  transition: transform 380ms cubic-bezier(.22,1,.36,1);
}
#work>.selected-work-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  padding: calc(30px + var(--space-section)) 0 26px;
  max-width: 58%;
  border-top: 0;
}
#work .selected-work-title {
  display: flex;
  align-items: center;
  gap: 14px;
}
#work .selected-work-title h2 {
  font-size: clamp(1.7rem,2.8vw,2.35rem);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -.035em;
}
#work .selected-work-count {
  align-self: center;
}
#work>.selected-work-heading>p {
  font-size: .9rem;
  line-height: 1.5;
  max-width: 42ch;
  margin: 0;
  color: var(--muted);
}
@media (max-width:560px) {
  #work>.selected-work-heading {
    max-width: 68%;
    padding: 24px 0 24px;
    gap: 9px;
  }
  #work .selected-work-title {
    gap: 10px;
  }
  #work .selected-work-title h2 {
    font-size: 1.65rem;
  }
  #work>.selected-work-heading>p {
    font-size: .8rem;
  }
}
@media (hover:hover) {
  .feature:hover .work-title-highlight {
    background-size: 100% 94%;
  }
}
.feature:focus-visible .work-title-highlight {
  background-size: 100% 94%;
}
@media (prefers-reduced-motion:reduce) {
  .feature .work-title-highlight {
    transition: none;
  }
}
.feature .feature-content {
  position: relative;
  isolation: isolate;
  padding-top: 16px;
}
#work .selected-work-count,
.feature .feature-image .project-number {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #d8b5c6;
  background: #f4f1e8;
  color: #933866;
  font-size: .84rem;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  text-shadow: none;
  backdrop-filter: none;
}
.feature .feature-image .project-number {
  top: 14px;
  left: 14px;
  z-index: 6;
  opacity: 1;
  pointer-events: none;
  border: 2px solid #fff;
  box-shadow: 0 3px 12px #1e132938,0 0 0 1px #3323411a;
  letter-spacing: 0;
  background: var(--photo-badge,#45315b);
  color: #fff;
  border-color: #fff;
}
@media (max-width:560px) {
  #work .selected-work-count,
  .feature .feature-image .project-number {
    width: 32px;
    min-width: 32px;
    height: 32px;
    font-size: .74rem;
  }
  .feature .feature-image .project-number {
    top: 10px;
    left: 10px;
  }
}
.feature .feature-tags {
  margin-bottom: 0;
  align-items: center;
  margin-top: 0;
  gap: 16px 26px;
}
@media (max-width:560px) {
  .feature .feature-content {
    padding-top: 14px;
  }
}
.feature .role>.feature-action::after {
  content: '';
  position: absolute;
  pointer-events: none;
  inset: -45% auto -45% -65%;
  transform: skewX(-22deg) translateX(0);
  opacity: 0;
  left: -90%;
  width: 70%;
  background: linear-gradient(90deg,transparent 0%,rgb(255 255 235 / .012) 18%,rgb(255 255 235 / .035) 36%,rgb(255 255 235 / .065) 50%,rgb(255 255 235 / .035) 64%,rgb(255 255 235 / .012) 82%,transparent 100%);
}
@media (prefers-reduced-motion:reduce) {
  .feature .role>.feature-action::after {
    display: none;
    animation: none !important;
  }
}
.feature .feature-image .project-number {
  width: 46px;
  min-width: 46px;
  height: 46px;
  font-size: 1rem;
  font-weight: 800;
}
@media (max-width:560px) {
  .feature .feature-image .project-number {
    width: 39px;
    min-width: 39px;
    height: 39px;
    font-size: .9rem;
  }
}
@media (hover:hover) {
  .feature:hover .feature-action::after {
    animation: project-action-sweep 1200ms cubic-bezier(.45,0,.25,1) 80ms both;
  }
}
.feature:focus-visible .feature-action::after {
  animation: project-action-sweep 1200ms cubic-bezier(.45,0,.25,1) both;
}
@keyframes project-action-sweep {
  0% { transform: skewX(-22deg) translateX(0); opacity: 0; }
  25% { opacity: .8; }
  65% { opacity: .8; }
  100% { transform: skewX(-22deg) translateX(310%); opacity: 0; }
}
@media (hover:hover) {
  .feature:hover .feature-action::after {
    animation-delay: 0ms;
  }
}
.feature:focus-visible .feature-action::after {
  animation-delay: 0ms;
}
@keyframes tag-current {
  from { transform: rotate(-24deg); }
  to { transform: rotate(336deg); }
}
.feature .feature-meta,
.feature .feature-meta span:last-child {
  font-size: var(--card-meta);
  line-height: 1.4;
  color: var(--card-muted);
  letter-spacing: 0;
  font-weight: 500;
}
@media (max-width:560px) {
  .feature .feature-tags {
    gap: 16px 22px;
  }
}
@media (min-width:701px) {
  @supports (grid-template-rows:subgrid) {
    .featured {
      align-items: stretch;
      row-gap: 0;
    }
    .featured>.feature {
      display: grid;
      grid-row: span 6;
      grid-template-rows: subgrid;
      row-gap: 0;
      min-width: 0;
    }
    .featured>.feature>.feature-image {
      align-self: start;
      width: 100%;
    }
    .featured>.feature>.feature-content {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      row-gap: 0;
      min-width: 0;
    }
    .feature .feature-meta,
    .feature h3,
    .feature .feature-content>p {
      align-self: start;
    }
    .feature .feature-tags {
      align-self: start;
    }
  }
}
/* One palette for every project tile: the same dark ink-purple used for pill icons (--tag-ink)
   for badges, and a matching light purple wash for the headline highlight. */
.feature,
.mini-project {
  --photo-badge: #45315b;
  --photo-highlight: #c1aaf7;
}
.featured>.feature,
.featured>.feature:hover {
  padding-bottom: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.featured {
  column-gap: 44px;
}
/* Three across once there's room for it. */
@media (min-width:1180px) {
  .featured {
    grid-template-columns: repeat(3,minmax(0,1fr));
    column-gap: 36px;
  }
}
.featured>.feature>.feature-image {
  border-radius: 10px;
  overflow: hidden;
}
.featured>.feature>.feature-content {
  padding: 22px 8px 0;
}
@media (min-width:701px) {
  .featured>.feature {
    margin-bottom: 64px;
  }
}
@media (max-width:700px) {
  .featured {
    row-gap: 48px;
    column-gap: 0;
  }
  .featured>.feature {
    margin-bottom: 0;
  }
  .featured>.feature>.feature-content {
    padding: 19px 4px 0;
  }
}
.has-liquid-headline {
  position: relative;
  isolation: isolate;
}
.feature .has-liquid-headline .work-title-highlight {
  position: relative;
  z-index: 1;
  background: none !important;
}
.headline-ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 0;
}
@media (prefers-reduced-motion:reduce) {
  .headline-ink {
    transition: none;
  }
}
.feature .feature-content>h3 {
  max-width: none;
  text-wrap: balance;
}
@media (max-width:500px) {
  .feature .headline-break {
    display: none;
  }
}
.feature .feature-meta>span:first-child {
  color: var(--ink);
  font-weight: 600;
}
@keyframes image-soft-light { /* the strip's right edge on the image's, across to its left edge on the image's */
  from { transform: translateX(-61.5385%); }
  to { transform: none; }
}

/* ======================================================================
   Industries
   Client logo field and confidentiality note.
   ====================================================================== */

.industry-focus {
  margin-top: 40px;
  border-block: 1px solid var(--line);
  padding: 26px 0 22px;
}
.focus-heading {
  text-align: center;
}
.focus-heading .eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-site);
  color: var(--accent);
  margin-bottom: 13px;
  font-size: .72rem;
  line-height: 1.4;
  letter-spacing: .13em;
  font-weight: 600;
}
.focus-heading #focus-title {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
  font-family: var(--font-site);
  font-weight: 800;
  font-size: clamp(1.25rem,2vw,1.65rem);
  line-height: 1.2;
  letter-spacing: -.035em;
  color: var(--ink);
  gap: 10px 22px;
}
.focus-heading #focus-title span {
  display: flex;
  align-items: center;
  gap: 22px;
}
.focus-heading #focus-title span:before {
  content: '';
  border-radius: 50%;
  width: 4px;
  height: 4px;
  background: var(--accent);
  opacity: .65;
}
.focus-logo-grid {
  align-items: center;
  justify-items: center;
  display: grid;
  max-width: 1000px;
  grid-template-columns: repeat(6,minmax(0,1fr));
  grid-auto-rows: 64px;
  gap: 22px 34px;
  margin: 34px auto 30px;
  padding: 0 20px;
}
.focus-logo {
  width: 100%;
  display: grid;
  place-items: center;
  min-width: 0;
}
.focus-logo img {
  display: block;
  object-fit: contain;
  width: 82px;
  height: 25px;
  max-width: 100%;
}
.confidentiality-note {
  position: relative;
  text-align: center;
  max-width: 620px;
  margin: 22px auto 0;
}
.confidentiality-note:before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - 22px);
  width: 44px;
  height: 1px;
  background: var(--line);
  display: none;
}
@media (max-width:500px) {
  .industry-focus {
    margin-top: 30px;
  }
}
.focus-logo .focus-boa {
  width: 105px;
  height: 22px;
}
.focus-logo .focus-hsbc {
  width: 83px;
  height: 23px;
}
.focus-logo .focus-toyota {
  width: 49px;
  height: 39px;
}
.focus-logo .focus-suntrust {
  width: 77px;
  height: 31px;
}
.focus-logo .focus-google {
  width: 80px;
  height: 28px;
}
.focus-logo .focus-exxon {
  width: 92px;
  height: 24px;
}
.focus-logo .focus-harris {
  width: 81px;
  height: 25px;
}
.focus-logo .focus-nba {
  width: 43px;
  height: 43px;
}
.focus-logo .focus-citizens {
  width: 102px;
  height: 26px;
}
.focus-logo .focus-ama {
  width: 75px;
  height: 31px;
}
.focus-logo .focus-verizon {
  width: 74px;
  height: 22px;
}
.focus-logo .focus-weatherford {
  width: 69px;
  height: 39px;
}
.focus-logo .focus-microsoft {
  width: 85px;
  height: 24px;
}
.focus-logo .focus-trane {
  width: 83px;
  height: 27px;
}
.focus-logo .focus-reuters {
  width: 81px;
  height: 25px;
}
.focus-logo .focus-davita {
  width: 78px;
  height: 30px;
}
.focus-logo,
.focus-logo:nth-child(10) {
  grid-column: auto;
  height: 64px;
}
.focus-logo:nth-child(13) {
  grid-column: 2;
}
@media (max-width:800px) {
  .focus-logo-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 20px 28px;
    padding: 0 12px;
    max-width: 620px;
  }
  .focus-logo:nth-child(13) {
    grid-column: auto;
  }
}
@media (max-width:420px) {
  .focus-logo-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px 20px;
    padding: 0;
  }
  .focus-logo:last-child {
    grid-column: 2;
  }
}
@media (max-width:900px) {
  .industry-focus {
    margin-top: 20px;
  }
}
main>.industry-focus {
  margin: 45px 0 12px;
  border-top: 0;
  padding-top: 30px;
  border-bottom: 0;
  padding-bottom: 12px;
}
.focus-logo img,
.focus-logo .focus-hsbc {
  filter: brightness(0);
  opacity: .57;
  mix-blend-mode: normal;
}
@media (max-width:500px) {
  .focus-heading #focus-title {
    font-size: 1rem;
    gap: 8px 12px;
  }
  .focus-heading #focus-title span {
    gap: 12px;
  }
}
.confidentiality-note>span {
  display: block;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.015em;
  text-transform: none;
  color: #40334e;
  margin-bottom: 12px;
}
.confidentiality-note p {
  margin: 0;
  color: #6f6978;
  text-wrap: pretty;
}
@media (max-width:500px) {
  .confidentiality-note {
    padding-inline: 12px;
  }
}
.logo-motion-stage {
  perspective: 1100px;
  position: relative;
  padding: 8px 0 12px;
  isolation: isolate;
}
.logo-motion-stage .focus-logo-grid {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center;
  will-change: transform;
}
.logo-motion-stage .focus-logo {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  position: relative;
  overflow: visible;
}
.logo-motion-stage .focus-logo img {
  opacity: var(--logo-presence,.60);
  filter: grayscale(1) brightness(0);
  transform: scale(1);
  transform-origin: center;
  pointer-events: none;
  transition: transform .48s cubic-bezier(.22,1,.36,1),filter .45s ease,opacity .3s ease;
}
@media (prefers-reduced-motion:reduce),(pointer:coarse) {
  .logo-motion-stage .focus-logo-grid {
    will-change: auto;
    transform: none !important;
  }
  .logo-motion-stage .focus-logo {
    transform: none !important;
  }
}
.logo-motion-stage:before {
  content: '';
  position: absolute;
  inset: 21% 13% 12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse,#3023401b,transparent 70%);
  filter: blur(18px);
  transform: translate(var(--shadow-x,0px),var(--shadow-y,12px)) scale(var(--shadow-scale,1));
  pointer-events: none;
}
.logo-motion-stage .focus-logo:is(:hover,.is-hot) img {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}
/* While the cursor tilts the field, the hovered logo comes from logo-motion.js, not :hover. */
.logo-motion-stage.is-tracking .focus-logo-grid { pointer-events: none; }
@media (prefers-reduced-motion:reduce) {
  .logo-motion-stage:before {
    transform: none;
  }
}
.confidentiality-note {
  padding: 12px 20px 30px;
}
main>.industry-focus::after {
  content: '';
  display: block;
  width: min(360px,64%);
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg,transparent,#bbb7cd 25%,#bbb7cd 75%,transparent);
}
@media (max-width:500px) {
  .confidentiality-note {
    max-width: 100%;
    margin-top: 16px;
    padding: 10px 8px 26px;
  }
  .confidentiality-note>span {
    font-size: 17px;
  }
}
.logo-motion-stage::before {
  display: none;
}
.logo-motion-stage,
.logo-motion-stage .focus-logo-grid,
.logo-motion-stage .focus-logo {
  box-shadow: none;
  text-shadow: none;
}
@media (hover:hover) and (pointer:fine) {
  .logo-motion-stage .focus-logo:is(:hover,.is-hot) {
    z-index: 2;
  }
  .logo-motion-stage .focus-logo:is(:hover,.is-hot) img {
    transform: none;
    transition: filter .35s ease,opacity .25s ease;
  }
}
@media (prefers-reduced-motion:reduce) {
  .logo-motion-stage .focus-logo img,
  .logo-motion-stage .focus-logo:hover img {
    transition: none;
    transform: none;
  }
}

/* ======================================================================
   More work
   Filters and three-column project cards.
   ====================================================================== */

.more-section {
  padding-top: 20px;
}
.more-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
}
.work-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.work-filters button {
  border: 1px solid var(--line);
  background: none;
  color: var(--muted);
  padding: 7px 15px;
  font-size: .78rem;
}
.work-filters button[aria-pressed=true] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
#more-count {
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}
.more-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
}
.mini-project {
  padding: 0;
  text-align: left;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  position: relative;
}
.mini-photo {
  position: relative;
  height: 150px;
  overflow: hidden;
}
.mini-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s;
}
.mini-project:hover img {
  transform: scale(1.035);
}
.mini-body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.mini-body p {
  font-size: .84rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 18px;
}
.mini-body small {
  font-size: .66rem;
  color: var(--muted);
  margin-top: auto;
  padding-right: 18px;
}
@media (max-width:800px) {
  .more-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width:500px) {
  .more-grid {
    gap: 12px;
  }
  .mini-photo {
    height: 105px;
  }
  .mini-body p {
    font-size: .76rem;
  }
  .mini-body small {
    font-size: .6rem;
  }
  .more-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .work-filters {
    gap: 6px;
  }
  .work-filters button {
    padding: 6px 11px;
    font-size: .72rem;
  }
}
.mini-tags {
  margin-top: auto;
  padding-right: 17px;
  min-height: 26px;
}
@media (max-width:500px) {
  .mini-tags {
    padding-right: 12px;
  }
}
#more-grid {
  position: relative;
  overflow-anchor: none;
  align-content: start;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 36px 24px;
}
@media (hover:hover) and (pointer:fine) {
  #more-grid:not(.is-rearranging) .mini-project:hover {
    z-index: 1;
  }
}
.mini-open svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 14px;
  height: 14px;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.mini-project .mini-tags {
  min-height: 38px;
  grid-template-columns: 1fr;
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 22px;
  padding: 0 0 18px;
  border-bottom: 0;
}
@media (hover:hover) {
  #more-grid .mini-project:hover .mini-photo>img {
    transform: none;
  }
}
.mini-project:hover .mini-open,
.mini-project:focus-visible .mini-open {
  translate: none;
  background: #332147;
  color: #fff;
  border: 0;
  box-shadow: 0 3px 8px #30213e14;
}
.mini-project:hover .mini-open svg {
  transform: translate(1px,-1px);
}
@media (prefers-reduced-motion:reduce) {
  .mini-project:hover .mini-open svg {
    transform: none;
  }
}
#more-grid>.mini-project[hidden] {
  display: none !important;
}
.mini-body>.mini-card-footer {
  display: flex;
  flex-direction: column;
  margin: 8px -20px -20px;
  flex: 0 0 auto;
  margin-top: auto;
  padding: 0;
  gap: 0;
  border-top: 1px solid #d8d6e3;
  justify-content: flex-start;
  background: #f3f2f9;
  border-top-color: #dbd9e5;
}
.mini-project .mini-card-footer .mini-tags {
  border: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  min-height: 82px;
  align-items: stretch;
}
.mini-card-footer .mini-open {
  position: static;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #45315b;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
  line-height: 1;
}
.mini-project .mini-card-footer .mini-open {
  align-self: stretch;
  justify-content: space-between;
  margin: 0;
  border: 0;
  border-radius: 0;
  height: auto;
  font-weight: 600;
  padding: 13px 18px;
  letter-spacing: .005em;
  min-height: 48px;
  font-size: 12px;
}
.mini-project:hover .mini-card-footer .mini-open,
.mini-project:focus-visible .mini-card-footer .mini-open {
  border-top: 1px solid #d8d6e3;
  translate: none;
}
@media (max-width:500px) {
  .mini-project .mini-card-footer .mini-tags {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}
.mini-card-footer .mini-open svg {
  width: 15px;
  height: 15px;
  opacity: .7;
  transition: opacity .25s,transform .35s cubic-bezier(.22,1,.36,1);
}
.mini-project:hover .mini-card-footer .mini-open svg {
  opacity: 1;
  transform: translate(2px,-2px);
}
@media (prefers-reduced-motion:reduce) {
  .mini-project:hover .mini-card-footer .mini-open svg {
    transform: none;
  }
}
#more.more-section {
  padding-top: 8px;
}
#more .more-toolbar {
  margin-bottom: 34px;
  justify-content: flex-start;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
@media (max-width:500px) {
  #more .more-toolbar {
    flex-direction: row;
    gap: 12px;
  }
  #more-count {
    border: 0;
    padding-left: 0;
  }
}
.mini-body .mini-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: var(--card-meta,13px);
  line-height: 1.4;
}
.mini-body .mini-meta+h3 {
  margin-top: 0;
}
/* The card's surface is its own layer (::before), so it can grow past the card while the
   content keeps its size and position. Card backgrounds appear only on hover/focus. */
#more-grid .mini-project {
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
  transform: none;
  --tile-image-inset: 12px;
  --card-grow: 8px;
}
#more-grid .mini-project::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  transition: inset .75s cubic-bezier(.4,0,.2,1),border-radius .75s cubic-bezier(.4,0,.2,1),background-color .75s cubic-bezier(.4,0,.2,1),border-color .75s cubic-bezier(.4,0,.2,1),box-shadow .75s cubic-bezier(.4,0,.2,1);
}
#more-grid .mini-project:hover::before,
#more-grid .mini-project:focus-visible::before {
  inset: calc(-1px - var(--card-grow));
  border-radius: calc(14px + var(--card-grow));
  background: #fffefa;
  border-color: #d6d3e4;
}
@media (hover:hover) and (pointer:fine) {
  #more-grid .mini-project:hover::before {
    border-color: #a9a4b1;
    box-shadow: 0 22px 34px -18px #2a1e3545,0 7px 14px -8px #2a1e3526;
  }
}
@media (prefers-reduced-motion:reduce) {
  #more-grid .mini-project::before {
    transition: none;
  }
}
#more-grid .mini-photo {
  width: 100%;
  height: auto;
  aspect-ratio: var(--card-ratio-more);
  flex: none;
  overflow: visible;
  isolation: isolate;
  border-radius: 0;
}
#more-grid .mini-body {
  padding: 18px 4px 4px;
  min-width: 0;
}
#more-grid .mini-body h3 {
  font-size: clamp(21px,1.9vw,27px);
  line-height: 1.18;
  letter-spacing: -.025em;
  text-wrap: balance;
  margin-bottom: 14px;
}
#more-grid .mini-body>p {
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 22px;
}
#more-grid .mini-body>.mini-card-footer {
  margin: auto 0 0;
  padding: 0;
  gap: 18px;
  background: transparent;
  border: 0;
}
#more-grid .mini-card-footer .mini-tags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-height: 0;
  background: none;
  position: relative;
  column-gap: 24px;
}
#more-grid .mini-card-footer .mini-open {
  background: transparent;
  border: 0;
  border-top: 1px solid #d6d3e4;
  border-radius: 0;
  padding: 14px 0 0;
  min-height: 0;
  color: #463c53;
  font-size: 12px;
}
#more-grid .mini-project:hover .mini-open,
#more-grid .mini-project:focus-visible .mini-open {
  background: transparent;
  color: var(--photo-badge);
  border-top-color: #d6d3e4;
}
@media (max-width:800px) {
  #more-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 24px 16px;
  }
}
@media (max-width:520px) {
  #more-grid {
    grid-template-columns: minmax(0,1fr);
    gap: 28px;
  }
  #more-grid .mini-project {
    padding: 8px;
    --tile-image-inset: 8px;
  }
  #more-grid .mini-body {
    padding-top: 16px;
  }
}
#more-grid .mini-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 10px;
  object-fit: cover;
  transform: none;
  transition: width .5s cubic-bezier(.22,1,.36,1),height .5s cubic-bezier(.22,1,.36,1),left .5s cubic-bezier(.22,1,.36,1),top .5s cubic-bezier(.22,1,.36,1),border-radius .5s ease;
}
@media (prefers-reduced-motion:reduce) {
  #more-grid .mini-photo img {
    transition: none;
  }
}
#more-grid .mini-card-footer .mini-tags::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: -18px;
  width: 1px;
  background: #d6d3e4;
  pointer-events: none;
}
#more-grid .mini-card-footer .mini-open svg {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: 8px;
  flex: 0 0 20px;
  border-radius: 50%;
  background: #e3e1ed;
  color: #493b5c;
  opacity: 1;
  stroke-width: 1.8;
  transform: rotate(0deg);
  transform-origin: center;
  transition: background .25s ease,color .25s ease,transform .45s cubic-bezier(.22,1,.36,1);
}
#more-grid .mini-project:hover .mini-open svg,
#more-grid .mini-project:focus-visible .mini-open svg {
  background: var(--photo-badge,#45315b);
  color: #fff;
  opacity: 1;
  transform: rotate(45deg);
}
#more-grid .mini-project .mini-photo img,
#more-grid .mini-project:hover .mini-photo img,
#more-grid .mini-project:focus-visible .mini-photo img {
  scale: none;
  translate: none;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: none;
  border-radius: 0;
  transform: none !important;
  transition: none;
}
@media (prefers-reduced-motion:reduce) {
  #more-grid .mini-photo {
    transition: none;
  }
  #more-grid .mini-card-footer .mini-open svg {
    transition: none;
  }
}
/* The photo surface is fixed at full card width; only the crop window grows on hover.
   Same timing in both directions, with a soft start and a long settle. */
#more-grid .mini-project .mini-photo {
  --photo-bleed: calc(var(--tile-image-inset) + var(--card-grow));
  --photo-out: calc(var(--photo-bleed) + 1px); /* one pixel past the bleed, so on hover the photo meets the panel's border exactly */
  width: calc(100% + var(--photo-out) * 2);
  margin: calc(-1 * var(--photo-out)) calc(-1 * var(--photo-out)) calc(-.25 * var(--card-grow));
  aspect-ratio: var(--card-ratio-more);
  height: auto;
  isolation: isolate;
  border-radius: 0;
  overflow: hidden;
  clip-path: inset(var(--photo-out) var(--photo-out) calc(.25 * var(--card-grow)) var(--photo-out) round 12px 12px 12px 12px); /* the same four-value form at rest and on hover, so every browser (Safari included) animates between them instead of snapping */
  will-change: clip-path;
  transition: clip-path .75s cubic-bezier(.4,0,.2,1);
}
#more-grid .mini-project:hover .mini-photo,
#more-grid .mini-project:focus-visible .mini-photo {
  clip-path: inset(0px 0px calc(.25 * var(--card-grow)) 0px round calc(13px + var(--card-grow)) calc(13px + var(--card-grow)) 0px 0px);
}
@media (prefers-reduced-motion:reduce) {
  #more-grid .mini-project .mini-photo {
    transition: none;
    will-change: auto;
  }
}

/* ======================================================================
   Project tags
   Type and domain pills, pictograms and tones.
   ====================================================================== */

.project-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 15px;
  row-gap: 13px;
}
.project-pill,
.domain-pill {
  display: inline-flex;
  align-items: center;
  background: none !important;
  --tag-ink: #45315b;
  --tag-wash: #e1deec;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: .7rem;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
}
.project-pill:before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 6px;
  flex-shrink: 0;
  display: none;
}
.pill-icon {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  flex-basis: 14px;
  margin-right: 5px;
}
.project-pill .pill-icon {
  box-sizing: content-box;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  padding: 7px;
  margin-right: 8px;
  border-radius: 50%;
  stroke-width: 1.7;
}
.domain-pill .pill-icon {
  box-sizing: content-box;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  padding: 7px;
  margin-right: 8px;
  border-radius: 50%;
  opacity: 1;
  stroke-width: 1.7;
}
.project-pill,
.domain-pill {
  color: var(--tag-ink);
}
.project-pill .pill-icon,
.domain-pill .pill-icon {
  color: var(--tag-ink);
  background: var(--tag-wash);
  box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--tag-ink) 7%,transparent);
}
.project-tags .tag-material {
  position: relative;
  isolation: isolate;
  place-items: center;
  vertical-align: middle;
  animation: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  padding: 0;
  margin-right: 12px;
  background: none;
  border: 0;
  border-radius: 0 !important;
  box-shadow: none;
  overflow: visible;
  transform: none;
  width: 40px;
  height: 40px;
  flex-basis: 40px;
}
.project-tags .tag-material .pill-icon {
  z-index: 1;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  position: static;
  stroke-width: 1.8;
  filter: none;
  transform: none;
  opacity: 1;
  display: block;
  flex: none;
  color: #4c3c5f;
}
.tag-material:before {
  content: '';
  position: absolute;
  inset: -36%;
  z-index: 0;
  background: radial-gradient(ellipse at 25% 25%,#7864ff,transparent 45%),repeating-linear-gradient(164deg,#30004e,#7000c5 25%,#c886fb 38%,#30004e 55%);
  filter: blur(2px);
  animation: tag-current 20s linear infinite;
  animation-play-state: paused;
}
.tag-material:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(ellipse 27% 15% at 30% 17%,#ffffffe0,transparent 95%),radial-gradient(ellipse at 40% 32%,transparent 25%,#00152622 55%,#001329aa 100%);
  box-shadow: inset 0 1px 2px #ffffffaa;
}
.tag-material.is-visible:before {
  animation-play-state: running;
}
@media (prefers-reduced-motion:reduce) {
  .tag-material:before {
    animation: none;
  }
}
.project-tags .tag-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
  gap: 4px;
}
.project-tags .tag-copy small {
  line-height: 1.2;
  color: #7f7a85;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .025em;
}
.project-tags .project-pill,
.project-tags .domain-pill {
  align-items: center;
  color: #4b3d59;
  font-weight: 600;
}
.feature .feature-tags .project-pill,
.feature .feature-tags .domain-pill,
.mini-project .project-pill,
.mini-project .domain-pill {
  font-size: var(--card-meta);
  line-height: 1.35;
  font-weight: 600;
  color: var(--card-strong);
}
.feature .tag-copy,
.mini-project .tag-copy {
  gap: 4px;
}
.mini-project .mini-tags .project-pill,
.mini-project .mini-tags .domain-pill {
  display: flex;
  gap: 0;
  min-width: 0;
  flex: 1 1 120px;
  align-items: center;
  font-size: 13px;
}
.mini-project .mini-tags .tag-copy {
  grid-template-columns: 72px minmax(0,1fr);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.mini-project .mini-tags .tag-material {
  box-shadow: 0 2px 5px -2px #3e2f4e30;
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  margin-right: 9px;
}
@media (max-width:400px) {
  .mini-project .mini-tags .tag-copy {
    grid-template-columns: 1fr;
  }
}
.mini-project .mini-tags .tag-copy small {
  font-size: 10px;
  color: #817c87;
  line-height: 1.2;
}
.mini-project .mini-tags .pill-icon {
  width: 16px;
  height: 16px;
}
.mini-project .mini-card-footer .project-pill,
.mini-project .mini-card-footer .domain-pill {
  min-width: 0;
  color: #3d304d;
  gap: 12px;
  position: relative;
  font-size: 12px;
  line-height: 1.4;
  justify-content: space-between;
  display: grid;
  grid-template-columns: minmax(0,1fr) 40px;
  grid-template-rows: 12px minmax(40px,auto);
  column-gap: 12px;
  row-gap: 8px;
  min-height: 88px;
  padding: 14px 15px;
  align-items: center;
}
.mini-project .mini-card-footer .domain-pill {
  border-left: 1px solid #d8d6e3;
}
.mini-project .mini-card-footer .tag-copy {
  min-width: 0;
  order: 0;
  flex: 1;
  text-align: left;
  gap: 0;
  align-items: flex-start;
  justify-content: center;
  align-self: center;
  display: contents;
}
.mini-project .mini-card-footer .tag-copy small {
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: .07em;
  color: #7e7887;
  font-weight: 500;
  left: 15px;
  top: 10px;
  position: static;
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
  margin: 0;
  line-height: 12px;
}
@media (max-width:500px) {
  .mini-project .mini-card-footer .domain-pill {
    border-left: 0;
    border-top: 1px solid #e0dfea;
  }
}
.mini-project .mini-card-footer .domain-pill {
  border-left-color: #dddbe6;
}
.mini-project .mini-card-footer .tag-copy>span {
  font-weight: 600;
  text-wrap: pretty;
  font-size: 14px;
  margin: 0;
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  display: block;
  line-height: 1.35;
}
.mini-project .mini-card-footer .tag-material {
  order: 1;
  flex: 0 0 28px;
  padding: 0;
  border: 0;
  border-radius: 0 !important;
  background: none;
  box-shadow: none;
  overflow: visible;
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  margin: 0;
}
.mini-project .mini-card-footer .tag-material:before,
.mini-project .mini-card-footer .tag-material:after {
  display: none;
  animation: none;
}
.mini-project .mini-card-footer .tag-material .pill-icon {
  filter: none;
  background: none;
  box-shadow: none;
  stroke-width: 1.8;
  color: #4c3c5f;
  width: 40px;
  height: 40px;
}
.project-tags .tag-copy>span {
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
}
.feature .project-tags .tag-copy>span {
  font-size: 16px;
}
.project-tags .tag-material::before,
.project-tags .tag-material::after {
  display: none;
}
.project-tags .tag-material .pill-icon {
  width: 40px;
  height: 40px;
}
#small-detail .project-detail-heading .project-tags {
  column-gap: 44px;
  padding: 0;
  margin: 20px 0 0;
}
@media (max-width:620px) {
  #small-detail .project-detail-heading .project-tags {
    column-gap: 32px;
  }
}
#small-detail .project-tags .tag-copy small,
#case-content .project-tags .tag-copy small {
  font-size: var(--project-label);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0;
}
#small-detail .project-tags .tag-copy>span,
#case-content .project-tags .tag-copy>span {
  font-size: var(--project-body);
  line-height: 1.4;
  font-weight: 600;
}
#small-detail .project-detail-heading .project-tags {
  row-gap: 16px;
}
#small-detail .project-detail-heading .tag-copy {
  gap: 4px;
}
.feature .project-tags .tag-material .pill-icon,
.mini-project .mini-card-footer .tag-material .pill-icon {
  transition: color .3s ease;
}
.feature:hover .project-tags .tag-material .pill-icon,
.feature:focus-visible .project-tags .tag-material .pill-icon,
.mini-project:hover .mini-card-footer .tag-material .pill-icon,
.mini-project:focus-visible .mini-card-footer .tag-material .pill-icon {
  color: var(--photo-badge,#45315b);
}
@media (prefers-reduced-motion:reduce) {
  .feature .project-tags .tag-material .pill-icon,
  .mini-project .mini-card-footer .tag-material .pill-icon {
    transition: none;
  }
}
#more-grid .mini-card-footer .project-pill,
#more-grid .mini-card-footer .domain-pill {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
#more-grid .mini-card-footer .tag-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  order: 1;
  min-width: 0;
  align-items: flex-start;
  align-self: center;
  text-align: left;
  justify-content: center;
}
#more-grid .mini-card-footer .tag-copy small {
  position: static;
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: #7e7887;
}
#more-grid .mini-card-footer .tag-copy>span {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
}
#more-grid .mini-card-footer .tag-material {
  order: 0;
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  margin: 0;
  align-self: center;
  justify-self: start;
}
#more-grid .mini-card-footer .tag-material .pill-icon {
  width: 29px;
  height: 29px;
}
#more-grid .mini-card-footer .tag-copy small,
#more-grid .mini-card-footer .tag-copy>span {
  align-self: flex-start;
  justify-self: start;
  text-align: left;
  margin: 0;
  padding: 0;
  width: auto;
  grid-column: auto;
  grid-row: auto;
}

/* ======================================================================
   Image treatments
   Near-grayscale preview, liquid reveal and ambient light.
   ====================================================================== */

.liquid-surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}
.feature-image.liquid-active>img,
.mini-photo.liquid-active>img {
  transform: none !important;
}

/* Selected work, continued: these must follow the rules above. */
@media (prefers-reduced-motion:reduce) {
  .feature .feature-content>.feature-meta,
  .feature .feature-content>h3,
  .feature .feature-content>p,
  .feature .feature-content>.feature-tags {
    transition: none;
    transform: none !important;
  }
}

/* Image treatments, continued: these must follow the rules above. */
.illustrated-photo {
  position: relative;
}
.illustrated-photo img.photo-illustration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: opacity .8s ease;
}
@media (hover:none),(prefers-reduced-motion:reduce) {
  .illustrated-photo .photo-illustration {
    display: none;
  }
}
/* Raw photos stay hidden until illustrations.js has placed their neutral-toned version. */
.toning-images :is(.feature-image, .mini-photo) img[data-illustrated="pending"],
.toning-images :is(.feature-image, .mini-photo) img:not([data-illustrated]) {
  opacity: 0;
}
/* A faint band of light that slides slowly across each image. The band is a wide strip moved with transform, on
   its own layer, so it never repaints the image or its colour glow beneath (sliding a background-position did,
   every frame). It sits just above the glow so the glow isn't lifted onto a layer of its own either. */
.has-image-ambience>.image-ambience {
  position: absolute;
  inset: 0;
  display: block !important;
  overflow: hidden;
  pointer-events: none;
  z-index: 7;
  border: 0 !important;
  border-radius: inherit;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  background: none;
  opacity: 1;
}
.has-image-ambience>.image-ambience::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 260%;
  background: linear-gradient(110deg,transparent 25%,rgb(255 249 226 / .065) 45%,rgb(255 255 255 / .025) 55%,transparent 75%);
  animation: image-soft-light 24s ease-in-out infinite alternate;
  animation-delay: var(--ambient-delay,0s);
  animation-play-state: paused;
}
.has-image-ambience.ambient-visible>.image-ambience::before {
  animation-play-state: running;
}
@media (prefers-reduced-motion:reduce) {
  .has-image-ambience>.image-ambience {
    display: none !important;
  }
  .has-image-ambience>.image-ambience::before {
    animation: none;
  }
}

/* ======================================================================
   Closing paths
   Experience and Approach invitations at the end of the home page.
   ====================================================================== */

.next-chapter {
  margin-top: 68px;
  padding: 46px 0 40px;
  border-top: 1px solid var(--line);
}
.next-intro {
  display: grid;
  gap: 15px;
  margin-bottom: 30px;
}
.next-intro .eyebrow {
  margin: 0;
}
.next-intro h2 {
  font-size: clamp(2rem,3.4vw,3rem);
  line-height: 1.1;
}
.next-paths {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
}
.next-paths>a {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px 30px 24px;
  border-radius: 10px;
  border: 1px solid #d2cfe0;
  transition: transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
}
.next-paths>a:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -22px #2b1d3870;
}
.career-path {
  background: #30223d;
  color: #f5f3e9;
}
.approach-path {
  background: #e2e1ee;
  color: #32273e;
}
.path-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 27px;
}
.path-top>span {
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: .72;
}
.path-top svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: transform .35s;
}
.next-paths>a:hover .path-top svg {
  transform: translate(2px,-2px);
}
.next-paths h3 {
  font-size: clamp(1.55rem,2.5vw,2.2rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  margin: 0 0 14px;
  max-width: 22ch;
}
.next-paths p {
  font-size: .92rem;
  line-height: 1.6;
  margin: 0 0 25px;
  max-width: 43ch;
  color: #524c69;
}
.career-path p {
  color: #beb8cb;
}
/* Career rail: one continuous line from 2005 to today, fading past the present.
   Past chapters are quiet rings; today is the filled accent. On hover the rail draws in. */
.career-mini {
  --dot: 9px;
  --rail: #5e506e;
  --lit: #db99ba;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 0;
  margin: 7px 0 28px;
  padding-top: calc(var(--dot) + 14px);
}
.career-mini::before,
.career-mini::after {
  content: '';
  position: absolute;
  top: calc(var(--dot) / 2 - .5px);
  left: calc(var(--dot) / 2);
  height: 1px;
  pointer-events: none;
}
.career-mini::before {
  width: calc(75% + 34px);
  background: linear-gradient(90deg,var(--rail) calc(100% - 34px),transparent);
}
.career-mini::after {
  width: 75%;
  background: var(--lit);
  opacity: .85;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s cubic-bezier(.4,0,.2,1);
}
.career-path:hover .career-mini::after,
.career-path:focus-visible .career-mini::after {
  transform: scaleX(1);
}
.career-mini>span {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: .61rem;
  color: #afa7bc;
}
.career-mini>span::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: calc(-1 * var(--dot) - 14px);
  left: 0;
  width: var(--dot);
  height: var(--dot);
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid #968ba6;
  background: #30223d;
  transition: border-color .35s ease,background-color .35s ease;
}
.career-mini>span:nth-child(2)::before { transition-delay: .22s; }
.career-mini>span:nth-child(3)::before { transition-delay: .5s; }
.career-path:hover .career-mini>span::before,
.career-path:focus-visible .career-mini>span::before {
  border-color: var(--lit);
}
.career-mini>span:last-child::before {
  border-color: var(--lit);
  background: var(--lit);
  box-shadow: 0 0 0 4px #db99ba29;
}
.career-mini b {
  font-size: .78rem;
  font-weight: 600;
  color: #e8e9db;
}
.career-mini>span:last-child b {
  color: var(--lit);
}
@media (prefers-reduced-motion:reduce) {
  .career-mini::after,
  .career-mini>span::before {
    transition: none;
  }
}
.path-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .8rem;
  font-weight: 600;
  border-top: 1px solid #c5c2d6;
  padding-top: 24px;
  margin-top: auto;
  gap: 25px;
}
.career-path .path-action {
  border-color: #554865;
  color: #e9a8c9;
}
.path-action>span {
  transition: transform .3s;
}
.next-paths>a:hover .path-action>span {
  transform: translateX(4px);
}
@media (max-width:700px) {
  .next-paths {
    gap: 14px;
  }
  .next-paths>a {
    padding: 24px 24px 20px;
  }
  .next-paths .path-action {
    padding-top: 20px;
  }
  .next-chapter {
    margin-top: 45px;
    padding-top: 32px;
  }
}
@media (max-width:500px) {
  .next-paths {
    grid-template-columns: 1fr;
  }
  .next-paths h3 {
    font-size: 1.8rem;
    max-width: 23ch;
  }
  .next-chapter {
    padding-bottom: 28px;
  }
}

/* ======================================================================
   Project pages
   Case studies and detail pages: introduction, facts, imagery, pagination.
   ====================================================================== */

.case-hero {
  padding: 35px 0;
}
.case-hero h1 {
  font-size: clamp(2.5rem,5vw,4.5rem);
  max-width: 1000px;
}
.case-outcome {
  font-size: 1.25rem;
  line-height: 1.5;
  max-width: 780px;
  color: var(--muted);
}
.case-facts {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 30px;
  border-top: 1px solid var(--line);
  padding-top: 25px;
  margin-top: 32px;
}
.case-facts div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-facts span {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.case-facts b {
  font-size: .92rem;
  font-weight: 500;
}
.case-image {
  margin: 0 0 30px;
}
.case-image img {
  width: 100%;
  max-height: 470px;
  object-fit: cover;
  border-radius: 5px;
}
.case-image figcaption {
  color: var(--muted);
  font-size: .68rem;
  margin-top: 10px;
}
.case-body {
  max-width: 1050px;
  margin: auto;
}
.case-body section {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 35px;
  padding: 35px 0;
  border-bottom: 1px solid var(--line);
}
.case-body h2 {
  font-size: 1.8rem;
  margin-bottom: 19px;
}
.case-body p,
.case-body li {
  font-size: 1.07rem;
  line-height: 1.7;
  color: var(--muted);
}
.case-body p {
  margin-bottom: 0;
}
.case-body ol {
  padding-left: 20px;
  margin-bottom: 0;
}
.case-body li {
  padding-left: 8px;
  margin-bottom: 10px;
}
@media (max-width:700px) {
  .case-facts {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .case-body section {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 25px 0;
  }
  .case-hero {
    padding-top: 25px;
  }
  .case-image img {
    height: 250px;
  }
}
#small-detail h1 {
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -.035em;
}
#small-detail h2 {
  font-size: 1.4rem;
  margin-bottom: 15px;
}
.detail-summary {
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--muted);
}
.detail-photo {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 5px;
}
.detail-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  border-block: 1px solid var(--line);
  padding: 20px 0;
  margin: 25px 0;
}
.detail-facts dt {
  font-size: .68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.detail-facts dd {
  margin: 7px 0 0;
  font-size: .88rem;
}
.resume-page>section:not(.case-hero) {
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
@media (max-width:500px) {
  .detail-facts {
    gap: 15px;
  }
  .detail-photo {
    height: 200px;
  }
}
.project-detail-heading {
  padding: 30px 40px 25px;
}
.project-detail-heading .eyebrow {
  font-size: .7rem;
  letter-spacing: .08em;
  margin-bottom: 12px;
}
#small-detail .project-detail h1 {
  line-height: 1.05;
  letter-spacing: -.04em;
  margin: 0 0 16px;
  font-size: clamp(2rem,3.2vw,2.8rem);
  max-width: 24ch;
  margin-bottom: 14px;
}
.project-detail .detail-summary {
  font-size: 1.03rem;
  line-height: 1.55;
  max-width: 59ch;
  margin: 0 0 19px;
  color: #635a6b;
}
.project-detail-visual {
  position: relative;
  margin: 0 40px;
  overflow: hidden;
  border-radius: 7px;
  background: #e0dfe9;
}

/* Image treatments, continued: these must follow the rules above. */
.has-image-ambience {
  position: relative;
}

/* Project pages, continued: these must follow the rules above. */
.project-detail .detail-photo {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 0;
}
.project-detail-visual figcaption {
  position: absolute;
  bottom: 10px;
  right: 12px;
  background: #1e1328ca;
  color: #f2f3eb;
  font-size: .57rem;
  letter-spacing: .02em;
  padding: 4px 7px;
  border-radius: 3px;
}
.project-detail-body {
  padding: 0 40px 26px;
}
.project-detail .detail-facts {
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  padding: 21px 0;
  margin: 0 0 25px;
  border-top: 0;
  border-bottom: 1px solid #d9d8e4;
}
.project-detail .detail-facts dt {
  font-size: .62rem;
  letter-spacing: .09em;
  color: #787182;
}
.project-detail .detail-facts dd {
  font-size: .86rem;
  font-weight: 600;
  color: #3a3346;
  margin-top: 5px;
}
.project-contribution {
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: 25px;
}
#small-detail .project-contribution h2 {
  margin: 0;
  margin-bottom: 10px;
}
.project-contribution p {
  font-size: .95rem;
  line-height: 1.7;
  color: #5a5163;
  margin: 0;
}
.project-detail-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 0 0;
  margin-top: 28px;
  border-top: 1px solid #d9d8e4;
}
.project-detail-footer>span {
  font-size: .64rem;
  color: #7a7483;
}
.project-detail-footer>a {
  font-size: .76rem;
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  gap: 16px;
  align-items: center;
}
.project-detail-footer>a>span {
  color: var(--accent);
  font-size: 1rem;
}
#small-detail .project-detail {
  overflow: hidden;
  background: transparent;
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(240px,.85fr);
  border: 0;
  border-radius: 0;
  padding: 0;
  gap: 28px 42px;
}
#small-detail .project-detail-footer {
  display: none;
}
@media (max-width:560px) {
  .project-detail-heading {
    padding: 25px 22px 22px;
  }
  .project-detail-visual {
    margin: 0 22px;
  }
  .project-detail .detail-photo {
    height: 170px;
  }
  .project-detail-body {
    padding: 0 22px 24px;
  }
  .project-contribution {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .project-detail-footer>span {
    display: none;
  }
  .project-detail-footer {
    justify-content: flex-end;
  }
  .project-detail .detail-summary {
    font-size: .96rem;
  }
  .project-detail .detail-facts {
    gap: 15px;
  }
}
#case-content,
#small-detail {
  max-width: 1220px;
  padding-top: 28px;
  padding-bottom: 36px;
}
#case-content {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(260px,.8fr);
  --project-section-size: 18px;
  --project-body-size: 16px;
  --project-label-size: 12px;
  padding-top: 28px;
}
#case-content .case-hero {
  padding: 0;
  min-width: 0;
}
#case-content .back,
#small-detail>.back {
  font-size: .78rem;
}
#case-content .case-hero .eyebrow {
  margin-bottom: 12px;
  max-width: 55ch;
  font-size: .65rem;
  line-height: 1.6;
}
#case-content .case-outcome {
  margin-bottom: 0;
  font-size: .97rem;
  line-height: 1.6;
  max-width: 57ch;
}
#case-content .case-facts b {
  line-height: 1.4;
  font-size: .87rem;
  font-weight: 600;
}
#case-content .case-image img {
  width: 100%;
  object-fit: cover;
  height: 280px;
  border-radius: 7px;
}
#case-content .case-body {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  max-width: none;
  margin: 0;
  border-top: 1px solid var(--line);
}
#case-content .case-body section {
  display: block;
  padding: 25px 0;
  min-width: 0;
}
#case-content .section-number {
  display: block;
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 0;
}
#case-content .case-body h2 {
  font-size: 1.3rem;
  margin: 0 0 12px;
}
#case-content .case-body p,
#case-content .case-body li {
  font-size: .93rem;
  line-height: 1.65;
}
#case-content .case-body ol {
  margin-top: 0;
  padding-left: 17px;
}
#case-content .case-body li {
  padding-left: 3px;
  margin-bottom: 8px;
}
#case-content .case-body section:last-child:where(:not(.contribution-radar)) {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 24px;
  background: #e4e3ee;
  padding: 24px;
  border: 0;
  border-radius: 8px;
  margin-top: 4px;
}
#small-detail .detail-summary {
  margin-bottom: 18px;
}
#small-detail .project-detail-visual {
  margin: 0;
  align-self: start;
}
#small-detail .detail-photo {
  height: 215px;
}
#small-detail .project-detail-body {
  grid-column: 1/-1;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(240px,.85fr);
  gap: 24px 42px;
  padding-top: 25px;
}
#small-detail .project-contribution {
  grid-column: 1;
  grid-row: 1;
  display: block;
}
#small-detail .detail-facts {
  grid-column: 2;
  grid-row: 1/3;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 18px;
  margin: 0;
  border: 0;
  background: none;
  border-radius: 0;
  border-left: 1px solid var(--line);
  padding: 0 0 0 25px;
  align-self: start;
}
body:has(#small-detail)>footer,
body:has(#case-content)>footer {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  padding-bottom: 22px;
}
@media (max-width:680px) {
  #case-content .case-body {
    grid-template-columns: 1fr;
    gap: 0;
  }
  #case-content .case-body section {
    padding: 20px 0;
  }
  #case-content .case-body section:last-child:where(:not(.contribution-radar)) {
    display: block;
    padding: 20px;
  }
  #small-detail .project-detail {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 22px;
  }
  #small-detail .detail-photo {
    height: 165px;
  }
  #small-detail .project-detail-body {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  #small-detail .project-contribution,
  #small-detail .detail-facts {
    grid-column: 1;
    grid-row: auto;
  }
  #small-detail .detail-facts {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 18px 0 0;
  }
}
#case-content .case-image.real-product-image img {
  border: 1px solid var(--line);
  height: auto;
  max-height: 390px;
  object-fit: contain;
}
.project-detail-visual:has(img[src*="surfkit-magazine"]) .detail-photo {
  object-fit: contain;
  background: #e6e6e9;
}
#case-content .case-hero h1 {
  letter-spacing: -.045em;
  font-size: clamp(2.1rem,3.6vw,3.15rem);
  line-height: 1.08;
  max-width: 22ch;
  margin: 0 0 18px;
}
#case-content .case-tags {
  gap: 12px 20px;
  margin-top: 22px;
}
#case-content .case-image figcaption {
  color: #7d7982;
  font-size: 11px;
  line-height: 1.5;
  max-width: 58ch;
  margin-top: 10px;
}
/* Case body: the three-part narrative across the full width, then the outcome, then the profile. */
#case-content .case-body.case-editorial {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 40px;
  padding-top: 6px;
  border-top: 0;
}
#case-content .case-narrative {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 0 40px;
}
#case-content .case-narrative section,
#case-content .case-narrative section:last-child {
  display: grid;
  grid-column: auto;
  grid-template-columns: minmax(0,1fr);
  align-content: start;
  gap: 10px;
  background: none;
  border-radius: 0;
  padding: 20px 0 0;
  margin: 0;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}
#case-content .case-narrative .section-number {
  font-size: .67rem;
  letter-spacing: 0;
  padding-top: 4px;
  color: #9f4572;
}
.case-result {
  align-self: start;
  padding-top: 24px;
}
.result-outcome {
  background: #e3e1ed;
  border-left: 3px solid #786e8f;
  padding: 22px 24px;
  border-radius: 0 8px 8px 0;
}
.result-delivery {
  padding: 23px 0 0;
}
.result-tools {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 16px;
}
#small-detail .project-detail-heading {
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 0;
}
#small-detail {
  padding-bottom: 45px;
}
@media (max-width:680px) {
  #case-content,
  #case-content .case-body.case-editorial {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  #case-content .case-narrative section,
  #case-content .case-narrative section:last-child {
    padding: 19px 0;
    gap: 10px;
  }
  .case-result {
    padding-top: 0;
  }
}
#case-content {
  gap: 40px 48px;
}
#case-content .back {
  display: inline-flex;
  align-items: center;
  margin-bottom: 28px;
  font-size: .72rem;
  color: var(--muted);
}
#case-content .case-facts {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 23px;
  gap: 22px;
}
#case-content .case-facts span {
  font-size: .64rem;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  display: block;
}
#case-content .case-image {
  margin: 63px 0 0;
  align-self: start;
}
@media (max-width:680px) {
  #case-content {
    gap: 26px;
    padding-top: 20px;
  }
  #case-content .back {
    margin-bottom: 23px;
  }
  #case-content .case-image {
    margin: 0;
  }
  #case-content .case-image img {
    height: 210px;
  }
  #case-content .case-facts {
    gap: 15px;
  }
}
#case-content .case-facts>div,
#case-content .case-facts>div:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
/* Narrative: a one-line brief per column; details open in place. */
#case-content .narrative-bar {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
}
#case-content .narrative-bar>span {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
}
#case-content .narrative-all {
  padding: 7px 14px;
  border: 1px solid #cac7da;
  background: transparent;
  color: #45315b;
  font-size: 13px;
  font-weight: 600;
  transition: background-color .25s ease,border-color .25s ease;
}
#case-content .narrative-all:hover {
  background: #e3e1ed;
  border-color: #b6b0ca;
}
#case-content .case-narrative .narrative-item h2 {
  margin: 0 0 8px;
}
#case-content .case-narrative .narrative-brief {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.005em;
  color: var(--ink);
}
#case-content .narrative-detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .45s cubic-bezier(.4,0,.2,1),opacity .3s ease;
}
#case-content .narrative-detail>div {
  min-height: 0;
  overflow: hidden;
}
#case-content .narrative-detail>div>:first-child {
  margin-top: 12px;
}
#case-content .narrative-item.is-open .narrative-detail {
  grid-template-rows: 1fr;
  opacity: 1;
}
#case-content .narrative-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: #45315b;
  font-size: 13px;
  font-weight: 600;
}
#case-content .narrative-toggle i {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid #b6b0ca;
  border-radius: 50%;
  color: #45315b;
  transition: transform .35s cubic-bezier(.4,0,.2,1),background-color .25s ease,border-color .25s ease,color .25s ease;
}
#case-content .narrative-toggle i::before,
#case-content .narrative-toggle i::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  translate: -50% -50%;
}
#case-content .narrative-toggle i::after {
  rotate: 90deg;
}
#case-content .narrative-toggle:hover i {
  background: #e1deec;
}
#case-content .narrative-item.is-open .narrative-toggle i {
  transform: rotate(45deg);
  background: #45315b;
  border-color: #45315b;
  color: #f6f3f7;
}
@media (prefers-reduced-motion:reduce) {
  #case-content .narrative-detail,
  #case-content .narrative-toggle i {
    transition: none;
  }
}

/* Outcome, delivery and tools as equal columns in one full-width panel. */
#case-content .case-result {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0,1fr);
  padding: 28px 32px;
  background: #eeeee6;
  border: 1px solid #d0d0de;
  border-radius: 8px;
  margin-top: 0;
  box-shadow: 0 8px 24px -20px #30203d33;
}
#case-content .result-outcome {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 32px 0 0;
}
#case-content .result-delivery,
#case-content .result-tools {
  margin: 0;
  padding: 0 32px;
  border-top: 0;
  border-left: 1px solid #c8c6d8;
}
#case-content .case-result>:last-child {
  padding-right: 0;
}
@media (max-width:900px) {
  #case-content .case-narrative {
    grid-template-columns: minmax(0,1fr);
  }
  #case-content .case-narrative section,
  #case-content .case-narrative section:last-child {
    padding: 20px 0 24px;
  }
  #case-content .case-result {
    grid-auto-flow: row;
    padding: 24px;
  }
  #case-content .result-outcome {
    padding: 0 0 20px;
  }
  #case-content .result-delivery,
  #case-content .result-tools {
    padding: 20px 0;
    border-left: 0;
    border-top: 1px solid #c8c6d8;
  }
  #case-content .case-result>:last-child {
    padding-bottom: 0;
  }
}
@media (min-width:721px) {
  #small-detail .project-detail:has(.heirloom-device-visual) .project-detail-heading {
    grid-column: 1;
    grid-row: 1;
  }
  #small-detail .project-detail:has(.heirloom-device-visual) .project-detail-body {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-top: 24px;
  }
  #small-detail .project-detail:has(.heirloom-device-visual) .project-contribution {
    order: 0;
  }
  #small-detail .project-detail:has(.heirloom-device-visual) .project-contribution p {
    margin-bottom: 0;
  }
  #small-detail .project-detail:has(.heirloom-device-visual) .detail-facts {
    order: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
    padding: 0;
    border: 0;
  }
}
#small-detail>.back {
  margin-bottom: 24px;
}
#small-detail .project-detail:has(.heirloom-device-visual) .project-detail-footer {
  order: 4;
}
#case-content .project-pagination {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  border-block: 1px solid var(--line);
  padding: 24px 0;
  margin: 0;
}
.project-pagination-link {
  display: grid;
  grid-template-columns: 88px minmax(0,1fr) 20px;
  gap: 18px;
  align-items: center;
  min-width: 0;
}
.project-pagination-link+ .project-pagination-link {
  border-left: 1px solid var(--line);
  padding-left: 32px;
}
.project-pagination-link img {
  width: 88px;
  height: 92px;
  object-fit: cover;
  border-radius: 6px;
}
.project-pagination-link div>span {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
}
#case-content .project-pagination h2 {
  font-size: 18px;
  line-height: 1.25;
  margin: 8px 0 6px;
  letter-spacing: -.02em;
}
.project-pagination-link p {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}
.project-pagination-link b {
  font-size: 23px;
  font-weight: 400;
  color: var(--accent);
  transition: translate .2s;
}
.project-pagination-link:hover b {
  translate: 3px 0;
}
.project-pagination-link:first-child:hover b {
  translate: -3px 0;
}
@media (max-width:650px) {
  #case-content .project-pagination {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .project-pagination-link+.project-pagination-link {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 20px 0 0;
  }
}
#case-content .case-narrative h2,
#case-content .result-outcome h2,
#case-content .result-delivery h2,
#case-content .result-tools h2 {
  margin: 0 0 12px;
  text-transform: none;
}
#case-content .result-heading {
  display: flex;
  align-items: center;
  gap: 9px;
}
.result-heading svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: #565078;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#case-content .case-narrative p,
#case-content .case-narrative li,
#case-content .case-body .result-statement,
#case-content .result-delivery>p,
#case-content .result-tools p {
  font-size: var(--project-body-size);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--muted);
}
#case-content .case-body .result-statement,
#case-content .result-delivery>p {
  margin: 0;
}
#case-content .result-tools p {
  margin: 0;
}
#small-detail,
#case-content {
  --project-heading: 20px;
  --project-body: 16px;
  --project-meta: 13px;
  --project-label: 12px;
}
#small-detail .project-detail-heading h1 {
  font-size: clamp(30px,3.2vw,44px);
  font-weight: 700;
  letter-spacing: -.035em;
  margin: 0 0 16px;
  line-height: 1.1;
}
#small-detail .detail-summary,
#small-detail .project-contribution p,
#case-content .case-narrative p,
#case-content .case-narrative li {
  font-size: var(--project-body);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: var(--muted);
}
#small-detail .project-detail-heading .eyebrow {
  font-size: var(--project-label);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .07em;
  margin: 0 0 8px;
}
#small-detail .detail-facts dd {
  letter-spacing: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  color: #3e314e;
}
#small-detail .detail-facts {
  row-gap: 20px;
  column-gap: 32px;
}
#small-detail .detail-facts .detail-methods {
  grid-column: 1/-1;
}
#small-detail .detail-facts dt {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 6px;
  color: var(--muted);
}
#small-detail .project-detail-heading .detail-summary {
  margin: 0;
  line-height: 1.55;
}

/* ======================================================================
   Contribution profile
   Qualitative contribution radar and discipline list.
   ====================================================================== */

/* Placement inside project pages: always the full width of the layout, after the main content. */
.contribution-radar {
  grid-column: 1/-1;
  order: 3;
  min-width: 0;
}
#case-content .case-body section.contribution-radar {
  grid-column: 1/-1;
}

/* Card: summary and discipline list on the left, chart on the right. */
.contribution-radar,
#case-content .case-body section.contribution-radar,
#small-detail .contribution-radar {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  align-items: center;
  gap: 28px 56px;
  margin: 0;
  padding: 28px 36px;
  background: #ecebf4;
  border: 1px solid #d8d6e3;
  border-radius: 14px;
}
.radar-summary {
  min-width: 0;
  max-width: 440px;
}
.contribution-radar h2 {
  margin: 0 0 8px;
}
.radar-note,
#case-content .contribution-radar .radar-note,
#small-detail .contribution-radar .radar-note {
  margin: 0 0 22px;
  max-width: 40ch;
  font-size: 13px;
  line-height: 1.5;
  color: #70697c;
}
.radar-breakdown {
  margin: 0;
  border-top: 1px solid #d3d0e1;
}
.radar-breakdown>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid #d7d4e5;
}
.radar-breakdown dt {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.radar-breakdown dd {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  white-space: nowrap;
}
.radar-level {
  display: flex;
  gap: 3px;
}
.radar-level i {
  display: block;
  width: 16px;
  height: 6px;
  border-radius: 3px;
  background: #cecbde;
}
.radar-level i.is-filled {
  background: #45315b;
}
.radar-level-name {
  min-width: 78px;
  font-size: 13px;
  color: #5e546b;
}

/* Chart */
.radar-figure {
  margin: 0;
  min-width: 0;
}
.radar-chart {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}
.radar-grid {
  fill: none;
  stroke: #ccc9dc;
  stroke-width: 1;
}
.radar-grid polygon.is-outer {
  stroke: #bab6cd;
}
.radar-area {
  stroke: #45315b;
  stroke-width: 2;
  stroke-linejoin: round;
}
.radar-point {
  fill: #efefe8;
  stroke: #45315b;
  stroke-width: 2;
}
.radar-point.is-primary {
  fill: #45315b;
  stroke: #efefe8;
  stroke-width: 2;
}
.radar-labels text {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  fill: #9a95a7;
}
.radar-labels text.is-active {
  font-weight: 600;
  fill: var(--ink);
}
@media (max-width:820px) {
  .contribution-radar,
  #case-content .case-body section.contribution-radar,
  #small-detail .contribution-radar {
    grid-template-columns: minmax(0,1fr);
    padding: 28px 24px;
  }
  .radar-summary {
    max-width: none;
  }
}
@media (max-width:500px) {
  .contribution-radar,
  #case-content .case-body section.contribution-radar,
  #small-detail .contribution-radar {
    padding: 24px 16px;
  }
  .radar-labels text {
    font-size: 16px;
  }
}

/* ======================================================================
   Heirloom showcase
   Device hero, interface mosaic and live jobsite tile.
   ====================================================================== */

:is(#small-detail,#case-content) .heirloom-device-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: visible;
  border-radius: 0;
  min-height: 420px;
  height: auto;
  max-height: none;
  padding: 24px 20px 30px;
  perspective: none;
}
@media (max-width:620px) {
  :is(#small-detail,#case-content) .heirloom-device-visual {
    min-height: 390px;
  }
}
@media (min-width:721px) {
  #small-detail .project-detail:has(.heirloom-device-visual) {
    grid-template-columns: minmax(0,1.65fr) minmax(230px,.8fr);
    grid-template-rows: auto 1fr;
    gap: 28px 48px;
    align-items: start;
  }
  :is(#small-detail,#case-content) .heirloom-device-visual {
    grid-column: 2;
    grid-row: 1 / 3;
    min-height: 0;
    padding: 20px 8px;
    align-self: start;
  }
}
@media (max-width:720px) {
  #small-detail .project-detail:has(.heirloom-device-visual) {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Project pages, continued: these must follow the rules above. */
@media (min-width:721px) {
  #small-detail .project-detail:has(.dual-video-visual) {
    grid-template-columns: minmax(0,1.35fr) minmax(330px,1fr);
    column-gap: 32px;
  }
}

/* Heirloom showcase, continued: these must follow the rules above. */
@media (max-width:720px) {
  :is(#small-detail,#case-content) .heirloom-device-visual {
    min-height: 0;
    padding: 12px 16px 20px;
  }
}
.heirloom-gallery {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-top: 28px;
}
.interface-gallery-heading {
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: end;
  display: block;
  margin-bottom: 22px;
}
.interface-gallery-heading h2 {
  font-size: clamp(28px,3.5vw,42px);
  line-height: 1.12;
  margin: 0;
}
.interface-screen-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 32px 24px;
  border: 1px solid #d7d6e1;
  border-radius: 14px;
  background: linear-gradient(145deg,#e5e4ee,#dbd8e8);
  overflow: hidden;
  cursor: zoom-in;
}
.interface-study:nth-child(2) .interface-screen-stage {
  background: linear-gradient(145deg,#e4e3ea,#d8d6e0);
}
.interface-study:nth-child(3) .interface-screen-stage {
  background: #e3e2eb;
}
.interface-study:nth-child(4) .interface-screen-stage {
  background: #dfdde8;
}
.interface-study:nth-child(5) .interface-screen-stage {
  background: #e5e4e8;
}
.interface-study-lead .interface-screen-stage {
  padding: 40px 24px;
}
.interface-screen-stage:hover img {
  transform: translateY(-4px);
}
.interface-screen-stage:focus-visible {
  outline: 2px solid #45315b;
  outline-offset: 4px;
}
.interface-gallery-note {
  font-size: 12px;
  color: var(--muted);
  margin: 32px 0 0;
  margin-top: 14px;
}
@media (max-width:700px) {
  .interface-gallery-heading {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .interface-screen-stage,
  .interface-study-lead .interface-screen-stage {
    padding: 24px 16px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .interface-screen-stage:hover img {
    transform: none;
  }
}
:is(#small-detail,#case-content) .interface-screen-stage {
  min-height: 0;
  text-align: left;
  transform: none;
}
:is(#small-detail,#case-content) .heirloom-device-visual {
  padding-top: 0;
}
.project-video-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 25px 14px 32px;
  perspective: 1000px;
}
.project-video-phone {
  width: 205px;
  flex: none;
  transform-style: preserve-3d;
  transform: rotateX(5deg) rotateY(-17deg) rotateZ(7deg);
  cursor: grab;
  touch-action: pan-y;
  outline-offset: 14px;
  border-radius: 18% / 8.7%;
}
.project-video-phone.is-dragging {
  cursor: grabbing;
  touch-action: none;
}
.project-video-chassis {
  position: relative;
  transform-style: preserve-3d;
  border-radius: 18% / 8.7%;
}
.project-video-edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg,#8c8991,#282d2f 18%,#45494c 55%,#14191a 90%);
  box-shadow: inset 0 0 0 .6px #a29fa770;
  pointer-events: none;
}
.project-video-chassis video {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  transform: translateZ(.4px);
  backface-visibility: hidden;
  pointer-events: none;
  background: #070608;
}
.project-video-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
}
.project-video-controls button {
  padding: 8px 10px;
  font-size: 12px;
  border: 0;
  border-radius: 6px !important;
  background: transparent;
  color: #584e65;
  line-height: 1.2;
  white-space: nowrap;
}
.project-video-controls .project-video-pause {
  font-size: 11px;
  padding: 6px 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width:480px) {
  .project-video-phone {
    width: 190px;
  }
}
.interface-screen-grid {
  background: none;
  border: 0;
  border-radius: 0;
  column-count: auto;
  display: grid;
  padding: 0;
  align-items: stretch;
  grid-template-columns: repeat(12,minmax(0,1fr));
  grid-template-rows: 224px 212px;
  gap: 14px;
}
.interface-study:nth-child(2),
.interface-study:nth-child(4) {
  padding-top: 24px;
}
.interface-study:nth-child(3) {
  padding-top: 48px;
  grid-column: 5/10;
  grid-row: 1;
}
@media (max-width:800px) {
  .interface-study:nth-child(n) {
    padding-top: 0;
  }
}
.project-detail-visual:not(.heirloom-device-visual) {
  background: transparent;
  overflow: visible;
}
.dual-phone-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: 100%;
  align-items: start;
}
.dual-phone-demo {
  min-width: 0;
  text-align: center;
}
.dual-phone-grid .project-video-phone {
  width: 100%;
  max-width: 185px;
  transform: rotateX(4deg) rotateY(12deg) rotateZ(-4deg);
}
@media (max-width:720px) {
  .dual-phone-grid {
    max-width: 420px;
    margin: auto;
    gap: 26px;
  }
}
.interface-study,
.interface-study-lead,
.interface-study:last-child {
  display: block;
  break-inside: auto;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 0 !important;
  grid-column: span 4;
}
:is(#small-detail,#case-content) .interface-screen-stage,
:is(#small-detail,#case-content) .interface-study-lead .interface-screen-stage {
  height: 100%;
  border: 1px solid #d0cce1;
  border-radius: 16px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width:700px) {
  .interface-study:first-child {
    grid-column: 1/-1;
    height: 420px;
  }
}
@media (max-width:400px) {
  .interface-study:first-child {
    height: 380px;
  }
}
.dual-phone-grid,
.dual-phone-demo,
.dual-phone-grid .project-video-stage,
.project-video-phone,
.project-video-chassis {
  overflow: visible;
}
.project-video-phone:focus:not(:focus-visible) {
  outline: none;
}
.project-video-phone:focus-visible {
  outline: 2px solid #786b8c;
  outline-offset: 10px;
}
.project-video-edge:first-child {
  box-shadow: inset 0 0 0 1px #777;
}
.project-video-chassis::before {
  content: '';
  position: absolute;
  inset: 4% 5% 1%;
  border-radius: inherit;
  background: rgb(30 49 37 / .2);
  filter: blur(17px);
  transform: translate3d(12px,22px,-24px);
  pointer-events: none;
}
.dual-phone-grid .project-video-stage {
  padding: 24px 4px 20px;
  position: relative;
  isolation: isolate;
}
.dual-phone-grid .project-video-chassis video {
  aspect-ratio: 832 / 1718;
  object-fit: cover;
}
:is(#small-detail,#case-content) .interface-screen-stage,
:is(#small-detail,#case-content) .interface-study-lead .interface-screen-stage,
:is(#small-detail,#case-content) .interface-study:first-child .interface-screen-stage {
  padding: 0;
  isolation: isolate;
  perspective: 1000px;
  background: #141018;
  border-color: #ceccd9;
  overflow: hidden;
}
.interface-screen-stage img,
.interface-study-lead .interface-screen-stage img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.interface-study:nth-child(1) .interface-screen-stage img {
  transform: scale(1.06);
}
.interface-study:nth-child(2) .interface-screen-stage img {
  transform: scale(1.1) rotate(-3deg);
}
:is(#small-detail,#case-content) .interface-study:nth-child(2) .interface-screen-stage,
:is(#small-detail,#case-content) .interface-study:nth-child(3) .interface-screen-stage,
:is(#small-detail,#case-content) .interface-study:nth-child(4) .interface-screen-stage,
:is(#small-detail,#case-content) .interface-study:nth-child(5) .interface-screen-stage {
  background: #141018;
}
@media (prefers-reduced-motion:no-preference) {
  .interface-screen-stage:hover img {
    filter: brightness(1.03);
  }
}
:is(#small-detail,#case-content) .interface-gallery-note,
:is(#small-detail,#case-content) .project-video-controls .project-video-pause {
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
:is(#small-detail,#case-content) .interface-study:nth-child(n) .interface-screen-stage {
  background: #17141b;
  position: relative;
  cursor: default;
  perspective: 850px;
  border: 0;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px #2d223e10;
  height: 100%;
}
.interface-study:nth-child(n) .interface-screen-stage img {
  transform: none;
  box-shadow: none;
  border-radius: 0;
  object-fit: cover;
  max-width: none;
  transition: none;
  filter: none;
}
@media (max-width:400px) {
  .interface-study:nth-child(n) {
    height: 230px;
  }
  .interface-study:nth-child(1) {
    height: 300px;
  }
}
:is(#small-detail,#case-content) .interface-motion-toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  border: 1px solid #ffffffa8;
  border-radius: 7px !important;
  padding: 7px 11px;
  background: #fffdf5eb;
  color: #342843;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  box-shadow: 0 2px 6px #0002;
}
.interface-study:nth-child(1) .interface-screen-stage img {
  object-position: 50% 42%;
}
:is(#small-detail,#case-content) .interface-study:nth-child(4) .interface-screen-stage {
  background: linear-gradient(135deg,#2e2834,#6b6079);
}
.jobsite-live-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1122px;
  height: 1402px;
  transform-origin: center;
  pointer-events: none;
}
.interface-study:nth-child(1) .interface-screen-stage .jobsite-live-scene img {
  position: absolute;
  inset: 0;
  width: 1122px;
  height: 1402px;
  object-fit: fill;
  max-width: none;
  transform: none;
}
.jobsite-live-scene video {
  position: absolute;
  left: 0;
  top: 0;
  width: 402px;
  height: 874px;
  max-width: none;
  transform-origin: 0 0;
  object-fit: fill;
  border-radius: 53px;
  clip-path: inset(0 round 53px);
}
:is(#small-detail,#case-content) .interface-screen-stage .interface-motion-toggle {
  position: absolute;
  z-index: 3;
  color: #342843;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  cursor: pointer;
  border-radius: 50% !important;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  right: 10px;
  bottom: 10px;
  padding: 8px;
  border: 1px solid #ffffff75;
  outline: none;
  outline-offset: 0;
  background: rgba(255,253,247,.94);
  box-shadow: 0 2px 7px #1d112726;
  transform: none;
  transition: background .15s,box-shadow .15s;
}
@media (max-width:700px) {
  .interface-study:nth-child(1) {
    height: 220px;
  }
}
.interface-study:nth-child(1) {
  grid-column: 1/5;
  grid-row: 1/3;
}
.interface-study:nth-child(2) {
  grid-column: 5/9;
  grid-row: 2;
}
.interface-study:nth-child(4) {
  grid-column: 10/13;
  grid-row: 1;
}
.interface-study:nth-child(5) {
  grid-column: 9/13;
  grid-row: 2;
}
.interface-study:nth-child(3) .interface-screen-stage img,
.interface-study:nth-child(4) .interface-screen-stage img,
.interface-study:nth-child(5) .interface-screen-stage img {
  transform-origin: center;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
  object-position: center;
}
:is(#small-detail,#case-content) .interface-study:nth-child(3) .interface-screen-stage,
:is(#small-detail,#case-content) .interface-study:nth-child(5) .interface-screen-stage {
  background: linear-gradient(140deg,#d5d2de,#e6e5f0);
}
@media (max-width:700px) {
  .interface-screen-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: 210px 190px 190px;
    gap: 10px;
  }
  .interface-study:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
    height: auto;
  }
  .interface-study:nth-child(1) {
    grid-column: 1;
    grid-row: 1/3;
  }
  .interface-study:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
  }
  .interface-study:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
  }
  .interface-study:nth-child(2) {
    grid-column: 1;
    grid-row: 3;
  }
  .interface-study:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
  }
}
.dual-phone-grid .project-video-stage::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 9%;
  right: 9%;
  bottom: 5px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,rgba(33,26,42,.38) 0%,rgba(33,26,42,.19) 35%,rgba(33,26,42,0) 73%);
  filter: blur(7px);
  transform: scaleX(1.15);
}
.dual-phone-grid .project-video-chassis::before {
  background: rgba(35,29,43,.27);
  filter: blur(19px);
  transform: translate3d(8px,24px,-24px);
}
.jobsite-live-screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 402px;
  height: 874px;
  transform-origin: 0 0;
  overflow: hidden;
  border-radius: 48px;
  clip-path: inset(0 round 48px);
  background: #000;
}
.jobsite-live-scene .jobsite-live-screen video {
  left: -4.217%;
  top: -1.669%;
  width: 108.434%;
  height: 103.338%;
  max-width: none;
  transform: none;
  border-radius: 0;
  clip-path: none;
  object-fit: fill;
}
.interface-motion-toggle svg {
  display: block;
  width: 18px;
  height: 18px;
}
:is(#small-detail,#case-content) .interface-study:nth-child(5) .interface-screen-stage {
  background: linear-gradient(140deg,#ccbeda,#e1dfeb);
}
.interface-study:nth-child(2) .interface-screen-stage img {
  object-position: 50% 55%;
}
:is(#small-detail,#case-content) .interface-screen-stage .interface-motion-toggle:hover {
  background: #fff;
  outline: none;
  transform: none;
  box-shadow: 0 2px 9px #1d112730;
}
:is(#small-detail,#case-content) .interface-screen-stage .interface-motion-toggle:focus:not(:focus-visible) {
  outline: none;
}
:is(#small-detail,#case-content) .interface-screen-stage .interface-motion-toggle:focus-visible {
  outline: 2px solid #3e2f50;
  outline-offset: 2px;
}
:is(#small-detail,#case-content) .interface-screen-stage .interface-motion-toggle svg {
  width: 16px;
  height: 16px;
}
#small-detail:has(>.heirloom-gallery) {
  padding-bottom: 24px;
}
:is(#small-detail,#case-content) .interface-gallery-note {
  margin: 12px 0 0;
}
.single-video-visual .dual-phone-grid {
  grid-template-columns: minmax(0,1fr);
  max-width: 310px;
  margin: 0 auto;
}
.single-video-visual .dual-phone-grid .project-video-phone {
  max-width: 245px;
  width: 100%;
  transform: rotateX(4deg) rotateY(-16deg) rotateZ(8deg);
}
.single-video-visual .dual-phone-grid .project-video-stage {
  padding: 20px 24px 24px;
}
.single-video-visual .dual-phone-grid .project-video-stage::after {
  left: 14%;
  right: 14%;
  bottom: 7px;
  height: 34px;
}
@media (max-width:720px) {
  .single-video-visual .dual-phone-grid .project-video-phone {
    max-width: 220px;
  }
  .single-video-visual .dual-phone-grid {
    max-width: 280px;
  }
}
:is(#small-detail,#case-content) .heirloom-gallery {
  margin-top: 30px;
  padding-top: 0;
  border-top: 0;
}
:is(#small-detail,#case-content) .interface-gallery-heading {
  margin: 0 0 16px;
  padding: 0;
}
@media (max-width:700px) {
  :is(#small-detail,#case-content) .heirloom-gallery {
    margin-top: 26px;
  }
  :is(#small-detail,#case-content) .interface-gallery-heading {
    margin-bottom: 14px;
  }
}

/* ======================================================================
   Experience
   Landscape hero, Gantt and Timeline views, chapter previews.
   ====================================================================== */

.career-hero :is(h1,.career-title) {
  margin-bottom: 24px;
  font-size: clamp(2.9rem,5.2vw,4.8rem);
}
.career-hero>p:last-child {
  max-width: 650px;
  color: var(--muted);
  font-size: 1.12rem;
  line-height: 1.6;
}
.career-explorer {
  margin-bottom: 40px;
}
.timeline-track {
  position: relative;
  display: grid;
  --timeline-axis: 30px;
  grid-template-columns: repeat(5,minmax(0,1fr)) 56px;
  padding: 20px 28px 8px;
  column-gap: 0;
}
.timeline-track::before {
  content: '';
  position: absolute;
  height: 2px;
  background: linear-gradient(to right,var(--accent) var(--progress),var(--line) var(--progress));
  transition: background .3s;
  top: var(--timeline-axis);
  left: 38px;
  right: 56px;
  width: auto;
}
.timeline-track button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  padding: 0 12px 20px 0;
  border: 0;
  background: none;
  color: var(--muted);
  padding-right: 18px;
}
.timeline-track button>span:last-child {
  font-size: .75rem;
}
.timeline-track button[aria-selected=true]>span:last-child {
  color: var(--accent);
}
.timeline-nav {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 0 25px;
  align-items: center;
}
.timeline-nav button {
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font-size: .75rem;
}
.timeline-nav button:disabled {
  opacity: .3;
  cursor: default;
}
.timeline-nav>span {
  font-size: .7rem;
  color: var(--muted);
}
#career-panel {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 35px;
  background: #fffefa;
  outline-offset: 5px;
  box-shadow: 0 15px 40px -30px #2e213c50;
  scroll-margin-top: 24px;
}
.era-summary {
  display: flex;
  justify-content: space-between;
  gap: 35px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 30px;
}
.era-summary>div {
  max-width: 750px;
}
.era-summary .eyebrow {
  margin-bottom: 17px;
}
.era-summary h2 {
  font-size: clamp(2rem,3.5vw,3rem);
  margin-bottom: 18px;
}
.era-summary p:not(.eyebrow) {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 22px;
}
.era-watermark {
  line-height: 1;
  color: #dfdee8;
  letter-spacing: -.06em;
  font-size: 6rem;
  font-weight: 500;
}
.era-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.era-skills span {
  font-size: .7rem;
  padding: 6px 10px;
  background: #e9e8f1;
  border-radius: 4px;
  color: #5c5067;
}
.era-project-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 0 16px;
}
.era-project-heading h3 {
  font-weight: 600;
  margin: 0;
  font-size: 1rem;
}
.era-project-heading>span {
  font-size: .7rem;
  color: var(--muted);
}
.era-projects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.era-projects a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 5px;
  transition: border-color .3s,background .3s;
  background: #f7f7f1;
  border-color: #dbdae5;
}
.era-projects a:hover {
  border-color: #9a93a5;
  background: #f5f6f0;
}
.era-projects img {
  width: 76px;
  height: 88px;
  object-fit: cover;
  border-radius: 3px;
}
.era-projects a>div {
  flex: 1;
}
.era-projects a>div>span {
  font-size: .65rem;
  color: var(--muted);
}
.era-projects h4 {
  font-size: 1rem;
  line-height: 1.2;
  margin: 6px 0;
}
.era-projects p {
  font-size: .75rem;
  line-height: 1.4;
  color: var(--muted);
  margin: 0;
}
.era-projects a>b {
  font-weight: 400;
  color: var(--accent);
}
.era-note {
  font-size: .7rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 22px 0 0;
  max-width: 850px;
}
@media (max-width:800px) {
  .era-projects {
    grid-template-columns: 1fr;
  }
  .timeline-track button>span:last-child {
    font-size: .68rem;
  }
}
@media (max-width:500px) {
  .timeline-track {
    overflow-x: auto;
  }
  .timeline-nav>span {
    display: none;
  }
  #career-panel {
    padding: 22px 18px;
  }
  .era-watermark {
    display: none;
  }
  .era-summary .eyebrow {
    font-size: .65rem;
    line-height: 1.5;
  }
  .era-summary h2 {
    font-size: 2rem;
  }
  .era-summary p:not(.eyebrow) {
    font-size: .98rem;
  }
  .era-projects img {
    width: 58px;
    height: 78px;
  }
  .era-projects a {
    gap: 11px;
    padding: 10px;
  }
  .era-projects p {
    font-size: .72rem;
  }
}
.career-hero {
  padding: 44px 0 25px;
}
.era-preview {
  position: fixed;
  z-index: 50;
  color: var(--ink);
  border: 1px solid #d6d3e0;
  appearance: none;
  cursor: pointer;
  transition: border-color .2s,box-shadow .2s;
  overflow-y: auto;
  max-height: calc(100vh - 32px);
  border-radius: 12px;
  border-color: #d1cee0;
  background: #fffefa;
  box-shadow: 0 20px 48px -20px #291b3740,0 3px 8px #2a1e3508;
  padding: 24px;
  width: min(370px,calc(100vw - 32px));
  text-align: left;
  padding-bottom: 0;
  overflow-x: hidden;
}
.era-preview[hidden] {
  display: none;
}
.era-preview-kicker {
  display: block;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  font-size: .61rem;
  letter-spacing: .095em;
  margin-bottom: 12px;
}
.era-preview>strong {
  display: block;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -.025em;
  line-height: 1.17;
}
.era-preview-description {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  margin: 14px 0 20px;
  color: #6b6475;
}
@media (prefers-reduced-motion:reduce) {
  .era-preview {
    animation: none;
  }
}
.era-preview:hover,
.era-preview:focus-visible {
  border-color: #9994ac;
  box-shadow: 0 16px 44px -12px #2e243a45;
}
.era-preview-hint>span {
  transition: transform .25s;
  display: inline-block;
  color: inherit;
  font-size: 15px;
}
.era-preview:hover .era-preview-hint>span {
  transform: translate(2px,-2px);
}
.era-preview-clients>span+span:before {
  content: '·';
  margin-right: 10px;
  color: #80799f;
  display: none;
}
.era-preview-client-label {
  display: block;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #837e8a;
  margin-bottom: 9px;
}
.era-preview-clients {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.era-preview-clients>span {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  padding: 6px 9px;
  background: #edecf4;
  border: 1px solid #dfdeea;
  border-radius: 6px;
  color: #534763;
}
.era-preview-clients>.era-preview-more {
  background: transparent;
  border-color: transparent;
  color: #7f7888;
  font-weight: 400;
}
.era-preview-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 20px 0 0;
  padding: 10px 15px;
  border: 0;
  border-radius: 999px;
  background: #45315b;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
.era-preview:hover .era-preview-hint,
.era-preview:focus-visible .era-preview-hint {
  background: #36244b;
}
.career-hero-landscape {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 0 46px;
  overflow: visible;
  min-height: 390px;
}
.career-hero-landscape .career-landscape {
  position: absolute;
  inset: 0 -1px 0 25%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  mask-image: linear-gradient(to right,transparent,black 49%);
  -webkit-mask-image: linear-gradient(to right,transparent,black 49%);
}
.career-landscape::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,var(--bg) 0%,transparent 17%,transparent 45%,rgba(246,243,247,.72) 72%,var(--bg) 98%);
}
.career-landscape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 57% 45%;
}
.career-hero-landscape>:is(h1,.career-title) {
  font-size: var(--page-title);
  margin: 0 0 18px;
  max-width: 19ch;
}
.career-hero-landscape>p:not(.eyebrow) {
  max-width: 43ch;
  font-size: 16px;
  margin: 0;
}
@media (max-width:650px) {
  .career-hero-landscape {
    padding: 32px 0 225px;
    justify-content: flex-start;
    min-height: 470px;
  }
  .career-hero-landscape .career-landscape {
    inset: 170px -1px 0;
    mask-image: linear-gradient(to bottom,transparent,black 30%);
    -webkit-mask-image: linear-gradient(to bottom,transparent,black 30%);
  }
  .career-hero-landscape>:is(h1,.career-title) {
    font-size: var(--page-title);
  }
  .career-hero-landscape>p:not(.eyebrow) {
    max-width: 38ch;
    font-size: 15px;
  }
}
.career-hero-landscape .career-landscape {
  left: 22%;
  right: calc((min(1400px,100vw) - 100vw)/2 - 5vw);
  top: -15px;
  bottom: -160px;
}
.career-hero-landscape+.career-explorer {
  position: relative;
  z-index: 1;
}
@media (max-width:650px) {
  .career-hero-landscape .career-landscape {
    left: -5vw;
    right: -5vw;
    top: 155px;
    bottom: -140px;
  }
}
.career-hero-landscape>.eyebrow {
  margin: 0 0 12px;
  line-height: 1.4;
}
.career-hero-landscape>:is(h1,.career-title) {
  line-height: 1.04;
}
.career-hero-landscape>p:not(.eyebrow) {
  line-height: 1.5;
}
.career-landscape .career-landscape-still {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 45%;
  transform-origin: 62% 45%;
  animation: mountain-ken-burns 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes mountain-ken-burns {
  from { transform: scale(1.16) translate3d(0,0,0); }
  to { transform: scale(1.23) translate3d(-1.1%,.5%,0); }
}
@media (prefers-reduced-motion:reduce) {
  .career-landscape .career-landscape-still {
    animation: none;
    transform: scale(1.18);
    will-change: auto;
  }
}
.mountain-parallax {
  position: absolute;
  inset: -35px 0;
  transform: translate3d(0,var(--scene-offset,0px),0);
  will-change: transform;
}
.career-landscape .mountain-parallax img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 45%;
  transform-origin: 62% 45%;
}
.career-landscape .career-cloud-drift {
  pointer-events: none;
  mask-image: radial-gradient(ellipse 19% 12% at 36% 27%,black 12%,transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 19% 12% at 36% 27%,black 12%,transparent 100%);
  animation: mountain-ken-burns 24s ease-in-out infinite alternate,summit-cloud-drift 14s ease-in-out infinite alternate;
  opacity: .9;
}
@media (prefers-reduced-motion:reduce) {
  .mountain-parallax {
    transform: none;
    will-change: auto;
  }
}
.timeline-track .timeline-chapter {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  margin-top: 3px;
  line-height: 1.4;
}
.timeline-track button[aria-selected=true] .timeline-chapter {
  color: var(--accent);
}
@media (max-width:800px) {
  .timeline-track {
    grid-template-columns: repeat(5,minmax(145px,1fr)) 56px;
    overflow-x: auto;
    padding-inline: 20px;
    scroll-padding-inline: 20px;
  }
  .timeline-track::before {
    left: 30px;
    right: auto;
    width: max(calc(100% - 78px),743px);
  }
  .timeline-track button {
    padding-right: 16px;
  }
}
.era-preview .era-preview-hint {
  display: flex;
  box-sizing: border-box;
  width: calc(100% + 48px);
  margin: 22px -24px 0;
  padding: 17px 24px;
  justify-content: space-between;
  gap: 20px;
  border-radius: 0 0 11px 11px;
  font-size: 13px;
  line-height: 1.4;
  transition: background .2s ease;
}
.era-preview .era-preview-hint>span {
  font-size: 20px;
  line-height: 1;
}
.career-view-controls {
  display: flex;
  justify-content: flex-end;
  padding: 0 clamp(32px,4vw,64px) 14px;
}
.career-view-toggle {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid #d5d3df;
  border-radius: 8px;
  background: #e9e8f180;
}
.career-view-toggle button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #6f6879;
  font-size: 11px;
  line-height: 1.4;
  transition: background .2s,color .2s;
}
.career-view-toggle svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.timeline-track.timeline-lanes {
  display: block;
  padding: 0 clamp(32px,4vw,64px) 16px;
  overflow: visible;
}
.timeline-lanes::before {
  display: none;
}
.timeline-scale {
  position: relative;
  height: 23px;
  margin-left: 300px;
  color: #797284;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.timeline-scale>span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}
.timeline-scale>span:nth-child(1) {
  left: 0;
}
.timeline-scale>span:nth-child(2) {
  left: 22.989%;
}
.timeline-scale>span:nth-child(3) {
  left: 45.977%;
}
.timeline-scale>span:nth-child(4) {
  left: 68.966%;
}
.timeline-scale>span:nth-child(5) {
  right: 0;
  transform: none;
}
.timeline-lanes button {
  display: grid;
  grid-template-columns: 280px minmax(0,1fr);
  gap: 20px;
  width: 100%;
  padding: 0;
  align-items: center;
  border: 0;
  border-radius: 5px;
  transition: background .2s;
}
.timeline-lanes .timeline-row-label {
  display: grid;
  grid-template-columns: 23px 1fr;
  gap: 2px 10px;
  padding: 7px 10px 7px 0;
  text-align: left;
  background: none;
  border: 0;
  box-shadow: none;
}
.timeline-lanes .timeline-chapter {
  grid-row: 1/3;
  align-self: center;
  font-size: 9px;
  letter-spacing: 0;
  color: #817e94;
  margin: 0;
}
.timeline-row-label strong {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
  color: #473d56;
}
.timeline-dates {
  font-size: 10px;
  line-height: 1.3;
  color: #7c7586;
  font-variant-numeric: tabular-nums;
}
.timeline-lane {
  position: relative;
  display: block;
  height: 45px;
  background: linear-gradient(to right,#d2d0de70 1px,transparent 1px);
  background-size: 22.989% 100%;
  border-right: 1px solid #d2d0de70;
}
.timeline-period {
  position: absolute;
  left: var(--start);
  width: var(--duration);
  top: 18px;
  height: 9px;
  border-radius: 3px;
  background: #a39db8;
  transition: background .25s,height .25s;
}
.timeline-period.timeline-point {
  width: 9px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #827a9c;
}
.timeline-lanes button:hover {
  background: #dfdceb70;
}
.timeline-lanes button[aria-selected=true] {
  background: #e1deee90;
}
.timeline-lanes button[aria-selected=true] strong {
  color: #38254f;
  font-weight: 650;
}
.timeline-lanes button[aria-selected=true] .timeline-chapter {
  color: #b22a6e;
}
.timeline-lanes button[aria-selected=true] .timeline-period {
  background: #b22a6e;
}
.timeline-lanes button:focus-visible {
  outline: 2px solid #776c91;
  outline-offset: 3px;
}
.timeline-track.timeline-horizontal {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 0;
  padding-top: 6px;
  padding-bottom: 20px;
}
.timeline-horizontal .timeline-scale,
.timeline-horizontal .timeline-lane {
  display: none;
}
.timeline-horizontal button {
  position: relative;
  display: block;
  padding: 27px 16px 0 0;
  border-radius: 0;
  background: none !important;
  align-self: stretch;
}
.timeline-horizontal button::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 1px;
  background: #beb9cd;
}
.timeline-horizontal button:last-child::before {
  right: calc(100% - 10px);
}
.timeline-horizontal button::after {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  box-sizing: border-box;
  background: #9e98b3;
  box-shadow: 0 0 0 1px #9e98b3;
  transition: background .25s,box-shadow .25s;
}
.timeline-horizontal button[aria-selected=true]::after {
  background: #b22a6e;
  box-shadow: 0 0 0 1px #b22a6e,0 0 0 5px #b22a6e14;
}
.timeline-horizontal button:hover::after {
  box-shadow: 0 0 0 1px #71678d,0 0 0 5px #71678d14;
}
.timeline-horizontal .timeline-row-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 0;
  min-height: 88px;
}
.timeline-horizontal .timeline-chapter {
  align-self: auto;
  letter-spacing: .08em;
  font-size: 9px;
}
.timeline-horizontal .timeline-dates {
  order: 1;
  font-size: 15px;
  font-weight: 600;
  color: #3e334a;
  line-height: 1.3;
}
.timeline-horizontal button[aria-selected=true] .timeline-dates {
  color: #b22a6e;
}
@media (max-width:650px) {
  .career-view-controls {
    padding-inline: 24px;
  }
  .timeline-track.timeline-lanes {
    padding-inline: 24px;
  }
  .timeline-lanes button {
    grid-template-columns: 145px minmax(0,1fr);
    gap: 14px;
  }
  .timeline-scale {
    margin-left: 159px;
    font-size: 9px;
  }
  .timeline-scale>span:nth-child(2),
  .timeline-scale>span:nth-child(4) {
    display: none;
  }
  .timeline-lanes .timeline-row-label {
    grid-template-columns: 16px 1fr;
    column-gap: 6px;
  }
  .timeline-row-label strong {
    font-size: 11px;
  }
  .timeline-track.timeline-horizontal {
    grid-template-columns: repeat(5,155px);
    overflow-x: auto;
    scroll-padding-inline: 24px;
  }
  .timeline-horizontal .timeline-dates {
    font-size: 14px;
  }
}
@keyframes summit-cloud-drift {
  from { translate: -.7% .2%; }
  to { translate: 1.7% -.6%; }
}
@media (prefers-reduced-motion:reduce) {
  .career-landscape .career-cloud-drift {
    display: none;
    animation: none;
  }
}

/* ======================================================================
   About (about.html)
   Editorial hero, career route, and the Outside-the-work scroll story.
   ====================================================================== */

.about-page {
  --about-night: #2a1f37;
  --about-plum: #50366a;
  --about-card: #fffefa;
  --about-rule: #c9c3d4;
  --about-glow: #f08bbd;
  --about-ease: cubic-bezier(.2,.7,.2,1);
  --about-gap: clamp(96px,11vw,160px);
}
.about-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
}
.about-page h2 em,
.about-page h3 em {
  font-style: normal;
}
.about-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: clamp(40px,5vw,64px);
}
.about-section-head h2 {
  font-size: clamp(2.3rem,4.4vw,4rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}
.about-section-head h2 em {
  display: block;
  color: #7c778c;
}
.about-section-note {
  max-width: 30ch;
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--muted);
}
.about-text-link {
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
}
.about-text-link span,
.about-btn span {
  display: inline-block;
  margin-left: 10px;
  color: var(--accent);
  transition: transform .35s var(--about-ease);
}
.about-text-link:hover span,
.about-btn:hover span {
  transform: translate(2px,-2px);
}
.about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.about-btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  font-size: .92rem;
  font-weight: 600;
  transition: border-color .3s, background-color .3s, color .3s, transform .3s var(--about-ease);
}
.about-btn:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.about-btn--solid {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
  box-shadow: 0 14px 30px -16px rgba(34,28,46,.7);
}
.about-btn--solid:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.about-btn--solid span {
  color: inherit;
}

/* ---- Hero: the statement over a light particle field (hero-field.js) ---- */
.ab-hero {
  position: relative;
  display: flex;
  align-items: center;
  padding: clamp(56px,7vw,104px) 0 clamp(24px,3vw,40px);
}
.ab-hero+.ab-edge {
  padding-top: clamp(64px,7vw,104px);
}
.ab-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 40rem;
}
.ab-hero-field { /* behind all text, the full width of the window so the wave can leave off its right edge */
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  pointer-events: none;
}
.ab-hero-field canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* The format the hero's particles have become (hero-field.js), centred under the field; its two lines crossfade. */
.ab-field-caption {
  position: absolute;
  left: calc(50% + 20vw);
  bottom: -26px; /* just under the hero */
  z-index: 1;
  display: grid;
  margin: 0;
  translate: -50% 0;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  pointer-events: none;
}
.ab-field-caption span { /* the old name leaves quickly, then the new one arrives, so they never overlap */
  grid-area: 1 / 1;
  justify-self: center;
  opacity: 0;
  translate: 0 -4px;
  transition: opacity .22s ease, translate .3s ease;
}
.ab-field-caption span.is-shown {
  opacity: 1;
  translate: 0 0;
  transition: opacity .5s ease .28s, translate .7s var(--about-ease) .28s;
}
.ab-field-caption b {
  color: var(--accent);
  font-weight: 700;
}
@media (max-width:700px) {
  .ab-field-caption { left: 50%; bottom: -44px; }
}
@media (max-width:700px) {
  .ab-hero {
    padding-bottom: clamp(220px,60vw,300px);
  }
}
.ab-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -90px calc(50% - 50vw) auto;
  height: 900px;
  background: radial-gradient(40% 50% at 78% 38%,rgba(233,143,181,.22),transparent 70%),
    radial-gradient(30% 40% at 12% 20%,rgba(184,164,219,.22),transparent 70%);
  pointer-events: none;
}
.ab-hero h1 {
  font-size: var(--page-title);
  line-height: 1;
  letter-spacing: -.04em;
  margin: 0 0 28px;
}
.ab-line {
  display: block;
  overflow: hidden;
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
.ab-line>* {
  display: inline-block;
  text-wrap: balance;
  animation: ab-line-up 1s var(--about-ease) both;
}
.ab-line+.ab-line>* {
  animation-delay: .12s;
}
.ab-hero h1 em {
  color: #7c778c;
  animation: ab-line-up 1s .12s var(--about-ease) both;
}
.about-lead {
  font-size: clamp(1.08rem,1.35vw,1.24rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 44ch;
  margin: 0 0 34px;
}
.ab-hero-copy>.about-kicker,
.ab-hero-copy>.about-lead,
.ab-hero-copy>.about-actions {
  animation: ab-rise .9s var(--about-ease) both;
}
.ab-hero-copy>.about-kicker { animation-delay: .05s; }
.ab-hero-copy>.about-lead { animation-delay: .28s; }
.ab-hero-copy>.about-actions { animation-delay: .38s; }
/* ---- Edge: what sets me apart ---- */
.ab-edge {
  padding-top: var(--about-gap);
}
.edge-list {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(28px,4vw,56px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.edge-item {
  position: relative;
  padding-top: 28px;
}
.edge-item h3 {
  font-size: clamp(1.4rem,2vw,1.8rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin-bottom: 14px;
  text-wrap: balance;
}
.edge-item p {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  max-width: 38ch;
}
@media (max-width:900px) {
  .edge-list {
    grid-template-columns: 1fr;
  }
}
/* ---- Route: four stops joined by a stream of light (approach-story.js) ----
   The stream pinches through every stop and gathers colour and width toward the present. */
.ab-route {
  padding-top: var(--about-gap);
}
.route-flow {
  --band: 136px;
  position: relative;
}
.route-stream { /* the full width of the window, with room above and below the line for the stream's wide entry */
  position: absolute;
  top: -90px;
  left: calc(50% - 50vw);
  width: 100vw;
  height: calc(var(--band) + 180px);
  pointer-events: none;
}
.route-stops {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: clamp(24px,3vw,48px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.route-stop {
  position: relative;
  padding-top: var(--band);
}
.route-node {
  position: absolute;
  top: calc(var(--band) / 2);
  left: 0;
  width: 13px;
  height: 13px;
  margin-top: -6.5px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 2px var(--accent),0 0 0 6px rgb(172 43 108 / .08);
  transition: transform .6s cubic-bezier(.34,1.56,.64,1),box-shadow .5s;
}
.route-stop:hover .route-node {
  transform: scale(1.4);
  box-shadow: inset 0 0 0 2px var(--accent),0 0 0 9px rgb(172 43 108 / .12);
}
.route-stop:last-child .route-node { /* now */
  background: var(--accent);
}
.route-stop:last-child .route-node::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: route-now 2.6s ease-out infinite;
}
@keyframes route-now {
  from {
    opacity: .7;
  }
  to {
    opacity: 0;
    transform: scale(3.2);
  }
}
.route-era {
  margin: 0 0 12px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.route-era small {
  white-space: nowrap;
  margin-left: 6px;
  font-size: inherit;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--muted);
}
.route-stop h3 {
  margin: 0 0 10px;
  font-size: clamp(1.25rem,1.65vw,1.55rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.route-copy {
  max-width: 36ch;
  margin: 0;
  font-size: .98rem;
  line-height: 1.6;
  color: var(--muted);
}
@media (max-width:900px) {
  .route-flow {
    --band: 64px;
  }
  .route-stream { /* on narrow screens the stream runs down the left edge */
    top: -24px;
    left: calc(-5vw);
    width: calc(5vw + var(--band));
    height: calc(100% + 48px);
  }
  .route-stops {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .route-stop {
    padding: 0 0 0 calc(var(--band) - 8px);
  }
  .route-node {
    top: .45em;
    left: calc(var(--band) / 2 - 5vw);
    margin: 0 0 0 -6.5px;
  }
}

/* ---- Outside the work: scroll story ----
   The particle scene (interests.js) stays pinned while chapters scroll past, and each chapter re-forms it.
   After a centred title card, chapters alternate sides; the scene pans the other way and a scrim slides
   with the text. Dusk fades the page into the band and back out. A chapter rail runs along its foot. */
/* Hero values written every frame by hero-demos.js. Registered as non-inherited so each write restyles only the
   element that uses it, not everything inside it (the phone has 30-odd slices, the plan 200-odd lines). */
@property --phone-x { syntax: '<angle>'; inherits: false; initial-value: -7deg; }
@property --phone-y { syntax: '<angle>'; inherits: false; initial-value: -20deg; }
@property --phone-z { syntax: '<angle>'; inherits: false; initial-value: 15deg; }
@property --phone-rise { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --plan-drift { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --plan-tilt { syntax: '<angle>'; inherits: false; initial-value: 32deg; }
@property --plan-turn { syntax: '<angle>'; inherits: false; initial-value: -13deg; }
@property --scrim-x { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --scrim-y { syntax: '<percentage>'; inherits: true; initial-value: 40%; }
@property --scrim-r { syntax: '<percentage>'; inherits: true; initial-value: 38%; }
@property --scrim-a { syntax: '<number>'; inherits: true; initial-value: .6; }
body:has(.curio-story) {
  overflow-x: clip;
}
.about-page .curio-story {
  --curio-night: #120d19;
  --curio-step: 60svh; /* scroll per chapter */
  --dusk: clamp(180px,32vh,320px);
  position: relative;
  width: 100vw;
  margin: var(--about-gap) 0 0 calc(50% - 50vw); /* nothing between the night band and the close: its edge is the divider */
  border-radius: 0; /* full-bleed night band with straight edges */
  overflow: clip;
  color: #f3eff6;
  background: var(--curio-night);
  isolation: isolate;
}
.curio-story::before,
.curio-story::after {
  display: none;
}
.curio-stage { /* the title card's scrim sits high, under the title, and leaves the galaxy clear */
  --scrim-x: 50%;
  --scrim-y: 10%;
  --scrim-r: 34%;
  --scrim-a: .4;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--curio-night);
  transition: --scrim-x 1.4s var(--about-ease),--scrim-y 1.4s var(--about-ease),--scrim-r 1.4s var(--about-ease),--scrim-a 1.4s var(--about-ease);
}
.curio-stage[data-side=left] { --scrim-x: 4%; --scrim-y: 50%; --scrim-r: 54%; --scrim-a: 1; }
.curio-stage[data-side=right] { --scrim-x: 96%; --scrim-y: 50%; --scrim-r: 54%; --scrim-a: 1; }
.curio-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.curio-stage::after { /* the scrim follows the text: an oval of shade under it, plus a floor for the map */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(var(--scrim-r) 80% at var(--scrim-x) var(--scrim-y),rgb(18 13 25 / calc(var(--scrim-a) * .82)),rgb(18 13 25 / calc(var(--scrim-a) * .5)) 48%,rgb(18 13 25 / 0) 80%),
    linear-gradient(0deg,var(--curio-night),rgb(18 13 25 / .55) 8%,rgb(18 13 25 / 0) 26%),
    linear-gradient(180deg,var(--curio-night),rgb(18 13 25 / 0) 12%); /* feathered top and bottom: no hard edge where the band meets the dusk */
}
.curio-beats { /* the chapters scroll over the pinned scene, a step apart; the tail keeps it pinned until the last one is centred */
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: 1400px;
  margin: -100vh auto 0;
  margin-top: -100svh;
  padding: 0 5vw calc(50svh - var(--curio-step) / 2);
  pointer-events: none;
}
.curio-beat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: var(--curio-step);
}
.curio-beat.curio-intro { /* the title card sits at the top of the band, over the galaxy */
  justify-content: flex-start;
  min-height: 78vh;
  min-height: 78svh;
  padding-top: clamp(110px,16vh,170px); /* room to breathe below the band's top edge */
  box-sizing: border-box;
}
.curio-beat[data-side=right] {
  align-items: flex-end;
}
.curio-beat[data-side=center] {
  align-items: center;
  text-align: center;
}
.curio-copy { /* interests.js sets --focus (0–1): the chapter in the middle of the screen is in focus, the others recede */
  max-width: 32rem;
  pointer-events: auto;
  opacity: calc(.16 + .84 * var(--focus,1));
}
[data-side=center]>.curio-copy {
  max-width: 46rem;
}
.curio-copy :is(h2,h3,p) { /* a soft shadow keeps the type crisp over the particles (interests.js also dims them behind it) */
  text-shadow: 0 1px 2px rgb(18 13 25 / .5),0 4px 30px rgb(18 13 25 / .85);
}
.curio-intro h2 em { /* gradient-clipped text can't take a text-shadow */
  text-shadow: none;
}
.curio-intro h2 {
  margin: 0;
  font-size: clamp(2.8rem,6.2vw,5.8rem);
  line-height: .98;
  letter-spacing: -.035em;
  color: #fff;
}
.curio-intro h2 em {
  background: linear-gradient(95deg,#f7a8cc,#f08bbd 40%,#b8a4db);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.curio-lead { /* chapter number, a short rule, then the label */
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--about-glow);
}
.curio-lead span:not([class]) { /* the chapter number */
  display: inline-flex;
  align-items: center;
  gap: 14px;
  letter-spacing: .08em;
  color: rgb(243 239 246 / .5);
}
.curio-lead span:not([class])::after {
  content: "";
  width: 28px;
  height: 1px;
  background: rgb(243 239 246 / .3);
}
/* Kinetic chapter text: interests.js splits each chapter's heading into letters and its line into words, and scrubs
   --in (0→1 as the chapter reaches the middle of the screen) and --out (0→1 as it carries on past) with the scroll. */
.curio-kinetic .curio-word {
  display: inline-block;
  white-space: nowrap;
}
.curio-kinetic :is(.curio-ch,.curio-w) {
  display: inline-block;
}
.curio-kinetic .curio-ch { /* each letter condenses out of the current in reading order, and is carried off upward the same way */
  --ti: clamp(0, var(--in,1) * 1.8 - var(--i) / var(--n) * .8, 1);
  --to: clamp(0, var(--out,0) * 1.8 - var(--i) / var(--n) * .8, 1);
  --ei: calc(1 - (1 - var(--ti)) * (1 - var(--ti)) * (1 - var(--ti)));
  transform: translate(calc((1 - var(--ei)) * var(--dx) * .9em + var(--to) * var(--dx) * .35em),calc((1 - var(--ei)) * .5em - var(--to) * var(--to) * 1.2em)) rotate(calc((1 - var(--ei)) * var(--rot) * 1deg + var(--to) * var(--rot) * .7deg)) scale(calc(1 + (1 - var(--ei)) * .4 - var(--to) * .15));
  opacity: calc(var(--ti) * (1 - var(--to)));
  filter: blur(calc((1 - var(--ei)) * 8px + var(--to) * 6px));
}
.curio-kinetic .curio-w { /* the line rises in behind the heading, word by word, and lifts away after it */
  --ti: clamp(0, var(--in,1) * 1.7 - .25 - var(--i) / var(--n) * .6, 1);
  --to: clamp(0, var(--out,0) * 1.6 - var(--i) / var(--n) * .5, 1);
  transform: translateY(calc((1 - var(--ti)) * (1 - var(--ti)) * .9em - var(--to) * .7em));
  opacity: calc(var(--ti) * (1 - var(--to)));
  filter: blur(calc((1 - var(--ti)) * 5px + var(--to) * 4px));
}
.curio-kinetic .curio-lead { /* the label decodes (interests.js types it through a flicker of glyphs) */
  opacity: calc(min(1, var(--in,1) * 3) * (1 - var(--out,0) * var(--out,0)));
}
.curio-kinetic .curio-lead span:not([class])::after {
  transform: scaleX(calc(var(--in,1) * (1 - var(--out,0))));
  transform-origin: left;
}
.curio-code {
  white-space: pre;
}
.curio-kinetic { /* the whole block swings in from the scene's side on a hinge at its outer edge, lingers in the middle of
                    the screen (--hold), and tips back into the distance as it leaves */
  --ein: calc(1 - (1 - var(--in,1)) * (1 - var(--in,1)) * (1 - var(--in,1)));
  transform-origin: var(--hinge,0%) 50%;
  transform: perspective(1200px) translate3d(calc((1 - var(--ein)) * var(--side,1) * 70px),calc(var(--hold,0) * 1px - var(--out,0) * 40px),calc(var(--out,0) * -220px)) rotateY(calc((1 - var(--ein)) * var(--side,1) * 32deg)) rotateX(calc(var(--out,0) * 22deg));
}
.curio-kinetic.is-settled { /* while it's read: flat, crisp text, still lingering */
  transform: translateY(calc(var(--hold,0) * 1px));
}
.curio-kinetic .curio-lead,
.curio-kinetic h3 ~ p { /* its layers drift a little against each other with the scroll, for depth */
  translate: 0 calc(var(--d,0) * -22px);
}
.curio-kinetic h3 ~ p {
  translate: 0 calc(var(--d,0) * 18px);
}
@media (max-width:700px) {
  .curio-kinetic {
    transform: perspective(900px) translate3d(0,calc(var(--hold,0) * 1px - var(--out,0) * 30px),calc(var(--out,0) * -120px)) rotateY(calc((1 - var(--ein)) * var(--side,1) * 18deg)) rotateX(calc(var(--out,0) * 14deg));
  }
}
.curio-kinetic.is-settled :is(.curio-ch,.curio-w) { /* at rest it's plain text again: no transforms or filters left running */
  transform: none;
  filter: none;
}
.curio-beat h3 {
  margin: 0 0 20px;
  font-size: clamp(2.5rem,4.8vw,4.4rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
  text-wrap: balance;
}
.curio-beat p:last-child {
  max-width: 34ch;
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.65;
  color: rgb(243 239 246 / .74);
}
/* Chapter nav: a frosted pill at the foot of the story, previous and next, a segment per chapter that fills as it
   is read (interests.js sets each one's --f, and --rail to fade the pill in past the title card), and the chapter
   you're on. Hover a segment for its name. At the last chapter, next carries on past the story. */
.curio-rail {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(20px,4.5vh,40px);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgb(255 255 255 / .09);
  border-radius: 999px;
  background: rgb(26 18 36 / .5);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06),0 18px 50px -18px rgb(0 0 0 / .7);
  translate: -50% calc((1 - var(--rail,0)) * 16px);
  opacity: var(--rail,0);
  pointer-events: none;
  transition: opacity .5s,translate .6s var(--about-ease);
}
.curio-rail.is-on {
  pointer-events: auto;
}
/* Simpler take: no pill, the chapter's name sits above a quiet row of arrows and segments. */
.curio-rail {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 10px;
  column-gap: 4px;
  width: max-content;
  padding: 0;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.curio-rail .curio-rail-label {
  order: -1;
  flex-basis: 100%;
  justify-content: center;
  min-width: 0;
  margin: 0;
  font-size: .66rem;
  letter-spacing: .18em;
  text-shadow: 0 1px 12px rgb(18 13 25 / .9);
}
.curio-rail .curio-rail-label span {
  margin-right: 10px;
}
.curio-rail .curio-step {
  width: 28px;
  height: 28px;
  background: none;
  color: rgb(243 239 246 / .7);
}
.curio-rail .curio-step:hover {
  background: rgb(255 255 255 / .08);
  color: #fff;
}
.curio-rail .curio-step:disabled {
  background: none;
}
.curio-rail a::after {
  display: none; /* the name is already shown above */
}
/* The Bitcoin chapter's block-header readout, pinned beside the block being mined (interests.js). */
.btc-hud { /* drawn like the scene: no panel, glowing type in the chain's own pinks, on dotted rules */
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  min-width: 250px;
  padding: 6px 0;
  transform-origin: 0 0; /* interests.js maps the card onto the scene with a matrix3d from its top-left corner */
  color: #f6c7de;
  font: 500 10.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing: .02em;
  white-space: nowrap;
  text-shadow: 0 0 6px rgb(240 139 189 / .75), 0 0 18px rgb(240 139 189 / .35);
  opacity: 0;
  pointer-events: none;
}
.btc-hud header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px dotted rgb(247 168 204 / .5);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
}
.btc-hud header i { font-style: normal; color: rgb(246 199 222 / .55); }
.btc-hud dl { display: grid; grid-template-columns: 62px 1fr; margin: 0; }
.btc-hud dt { color: rgb(196 178 230 / .75); }
.btc-hud dd { margin: 0; }
.btc-hud .btc-out { margin-top: 4px; padding-top: 4px; border-top: 1px dotted rgb(247 168 204 / .5); }
.btc-hud .z, .btc-hud .ok { color: #ffe3a8; font-weight: 600; text-shadow: 0 0 8px rgb(247 198 110 / .9); }
.btc-hud u { text-decoration: none; margin-left: 4px; }
.btc-hud .no { color: rgb(196 178 230 / .55); }

/* The scroll cue under the title card (interests.js): a label over a thin line with a spark falling down it. It sits
   where the chapter rail will appear and hands over to it as the first chapter comes up (--cue 1 → 0). */
.curio-beat.curio-intro {
  position: relative;
}
.curio-cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(28px,6vh,56px);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: rgb(243 239 246 / .72);
  font-family: inherit;
  font-size: .66rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: var(--cue,1);
  translate: -50% calc((1 - var(--cue,1)) * 12px);
  transition: color .25s ease;
}
.curio-cue:not(.is-on) {
  pointer-events: none;
}
.curio-cue:hover,
.curio-cue:focus-visible {
  color: #fff;
}
.curio-cue i {
  position: relative;
  width: 1px;
  height: 46px;
  overflow: hidden;
  background: linear-gradient(rgb(255 255 255 / .04),rgb(255 255 255 / .3));
}
.curio-cue i::after {
  content: "";
  position: absolute;
  left: -1.5px;
  top: -10px;
  width: 4px;
  height: 10px;
  border-radius: 2px;
  background: #f7a8cc;
  box-shadow: 0 0 10px #f08bbd,0 0 3px #fff;
  animation: curio-cue-fall 1.9s cubic-bezier(.55,0,.35,1) infinite;
}
@keyframes curio-cue-fall {
  0% { translate: 0 0; opacity: 0; }
  15%, 80% { opacity: 1; }
  100% { translate: 0 58px; opacity: 0; }
}
@media (prefers-reduced-motion:reduce) {
  .curio-cue i::after { animation: none; top: 18px; }
}
.curio-step {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / .06);
  color: #f3eff6;
  cursor: pointer;
  transition: background-color .3s,transform .3s var(--about-ease);
}
.curio-step:hover {
  background: rgb(240 139 189 / .24);
}
.curio-step:active {
  transform: scale(.92);
}
.curio-step:disabled {
  opacity: .3;
  cursor: default;
  background: rgb(255 255 255 / .06);
}
.curio-step svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .45s var(--about-ease);
}
.curio-step.is-out svg { /* at the last chapter, next points on down the page */
  transform: rotate(90deg);
}
.curio-step:focus-visible,
.curio-rail a:focus-visible {
  outline: 2px solid var(--about-glow);
  outline-offset: 2px;
}
.curio-rail ol {
  display: flex;
  gap: 4px;
  margin: 0 6px;
  padding: 0;
  list-style: none;
}
.curio-rail a {
  position: relative;
  display: flex;
  align-items: center;
  width: 30px;
  height: 26px;
  border-radius: 4px;
}
.curio-rail i { /* the segment: a track, and a fill for how far into its chapter you are */
  position: relative;
  flex: 1;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: rgb(255 255 255 / .16);
  transition: height .3s var(--about-ease),box-shadow .4s;
}
.curio-rail i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg,#c4b2e6,var(--about-glow));
  transform: scaleX(var(--f,0));
  transform-origin: left;
}
.curio-rail a:hover i,
.curio-rail a.is-active i {
  height: 5px;
}
.curio-rail a.is-active i {
  box-shadow: 0 0 14px rgb(240 139 189 / .6);
}
.curio-rail a::after { /* its name, on hover */
  content: attr(data-name);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  padding: 7px 11px;
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: 8px;
  background: rgb(26 18 36 / .9);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #f3eff6;
  opacity: 0;
  translate: -50% 5px;
  pointer-events: none;
  transition: opacity .25s,translate .3s var(--about-ease);
}
.curio-rail a:hover::after,
.curio-rail a:focus-visible::after {
  opacity: 1;
  translate: -50% 0;
}
.curio-rail-label {
  display: flex;
  align-items: baseline;
  min-width: 14.5em;
  margin: 0 10px 0 4px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(243 239 246 / .8);
}
.curio-rail-label b {
  font-weight: 700;
  color: var(--about-glow);
}
.curio-rail-label span {
  margin-right: 12px;
  color: rgb(243 239 246 / .35);
}
.curio-rail-label em {
  font-style: normal;
}
.curio-rail-label.is-new :is(b,em) {
  animation: curio-label .55s var(--about-ease);
}
@keyframes curio-label {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
}
/* The header turns to night while the story fills the screen (interests.js toggles .is-night). */
html.has-night body>.nav {
  transition: background-color .6s,border-color .6s,color .6s;
}
html.is-night body>.nav {
  background: rgb(18 13 25 / .62);
  border-bottom-color: rgb(255 255 255 / .08);
  color: #efe9f4;
}
html.is-night .nav .identity b.identity-name,
html.is-night .nav .identity b.identity-name span:last-child {
  color: #efe9f4;
}
html.is-night .identity img.identity-avatar {
  filter: invert(1) brightness(1.1);
}
html.is-night .nav nav a[aria-current="page"],
html.is-night .nav nav a:hover {
  color: #fff !important;
}
html.is-night .nav nav a[aria-current="page"]::after,
html.is-night body>.nav nav>a:not(.nav-resume)[aria-current="page"]::after {
  background: #fff !important;
}
html.is-night body>.nav nav>a.nav-resume,
html.is-night .nav .nav-resume {
  border-color: rgb(255 255 255 / .28) !important;
  color: #fff !important;
}
html.is-night .nav .nav-resume:hover {
  background: rgb(255 255 255 / .1) !important;
}
@media (max-width:700px) {
  .about-page .curio-story {
    --dusk: 120px;
  }
  .curio-stage::after {
    background: linear-gradient(0deg,rgb(18 13 25 / .9) 24%,rgb(18 13 25 / 0) 56%);
  }
  .curio-beat,
  .curio-beat[data-side] { /* on phones every chapter reads low in its screen, under its scene */
    justify-content: flex-end;
    align-items: flex-start;
    padding-bottom: 12vh;
    text-align: left;
  }
  .curio-beat h3,
  .curio-intro h2 {
    font-size: 2.5rem;
  }
  .curio-beat p:last-child {
    font-size: 1rem;
  }
  .curio-rail { /* on phones the pill sits under the header, clear of the text low in each screen */
    top: 78px;
    bottom: auto;
  }
  .curio-rail-label {
    display: none;
  }
}

/* ---- Close ---- */
.ab-close {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,24rem); /* the aside is sized to keep both buttons on one row */
  gap: clamp(32px,6vw,96px);
  align-items: start;
  margin: var(--about-gap) 0 clamp(48px,7vw,96px);
  padding-top: clamp(40px,5vw,64px);
  border-top: 0;
}
.ab-close h2 {
  margin: 0;
  font-size: clamp(2.4rem,5vw,4.4rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.ab-close h2 em {
  font-style: normal;
  color: var(--accent);
}
.ab-close-who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.ab-close-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.ab-close-who p {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.35;
}
.ab-close-who b {
  display: block;
  color: var(--ink);
  font-size: 1.05rem;
}
.ab-close-note {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.55;
}
@media (max-width:820px) {
  .ab-close {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@keyframes ab-rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes ab-line-up { from { transform: translateY(105%); } }

/* Scroll reveals (approach-story.js adds .about-animated). */
.about-animated [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--about-ease), transform .9s var(--about-ease), border-color .4s, box-shadow .6s;
  transition-delay: calc(var(--i,0) * 90ms);
}
.about-animated [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
@media (max-width:700px) {
  .about-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}
@media (max-width:560px) {
  .about-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}
@media (prefers-reduced-motion:reduce) {
  .about-page *,
  .about-page *::before,
  .about-page *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ======================================================================
   Résumé
   Résumé page and print layout.
   ====================================================================== */

.role {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: .75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.role>span {
  font-size: 1.2rem;
  color: var(--accent);
}
.resume-page {
  max-width: 1050px;
}
.resume-page h2 {
  font-size: 1.6rem;
  margin-bottom: 20px;
}
.resume-page p {
  line-height: 1.65;
  color: var(--muted);
}
.print-resume {
  border: 1px solid var(--line);
  background: none;
  padding: 10px 15px;
}
@media print {
  .resume-page {
    padding: 0;
  }
  .resume-page h1 {
    font-size: 36px;
  }
}
.resume-editorial {
  max-width: 1400px;
}
.resume-intro {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 70px;
  padding: 52px 0 42px;
  border-bottom: 1px solid var(--line);
}
.resume-intro h1 {
  font-size: var(--page-title);
  line-height: 1.02;
  margin-bottom: 24px;
}
.resume-intro h1 em {
  color: #7c778c;
}
.resume-intro>div>p:last-child {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 530px;
  margin: 0;
}
.resume-action {
  align-self: center;
  border-radius: 8px;
  background: #2f233a;
  padding: 30px;
  color: #f6f3f7;
}
.resume-action>span {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #c1bdcf;
}
.resume-action>p {
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: #f6f3f7;
  margin: 22px 0 27px;
}
.resume-action .print-resume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #e9adcb;
  color: #2d2237;
  border: 0;
  border-radius: 4px;
  font-size: .85rem;
  font-weight: 600;
  padding: 12px 15px;
}
.resume-action>a {
  display: block;
  font-size: .75rem;
  color: #c8c4d0;
  margin-top: 16px;
}
.resume-layout {
  display: grid;
  grid-template-columns: 240px minmax(0,1fr);
  gap: 75px;
  padding-top: 40px;
}
.resume-sidebar section {
  margin-bottom: 35px;
}
.resume-sidebar .eyebrow {
  font-size: .63rem;
  margin-bottom: 15px;
}
.resume-sidebar h2 {
  font-size: 1.6rem;
  line-height: 1.2;
  margin-bottom: 20px;
}
.resume-sidebar p,
.resume-sidebar li {
  font-size: .85rem;
  line-height: 1.75;
  color: var(--muted);
}
.resume-sidebar ul {
  list-style: none;
  padding: 0;
}
.resume-sidebar li {
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}
.resume-content h2 {
  font-size: 2rem;
}
.resume-evidence {
  padding: 0 0 30px;
  border-bottom: 1px solid var(--line);
}
.resume-evidence .eyebrow,
.resume-history>.eyebrow {
  font-size: .68rem;
  margin-bottom: 14px;
}
.resume-evidence>a {
  display: grid;
  grid-template-columns: 115px 1fr 20px;
  gap: 20px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  font-size: .9rem;
  line-height: 1.55;
}
.resume-evidence>a:first-of-type {
  border-top: 0;
}
.resume-evidence>a b {
  font-size: .85rem;
  font-weight: 600;
}
.resume-evidence>a span {
  color: var(--muted);
}
.resume-evidence>a i {
  color: var(--accent);
  font-style: normal;
}
.resume-evidence>a:hover b {
  color: var(--accent);
}
.resume-history {
  padding-top: 32px;
}
.resume-history>h2 {
  margin-bottom: 30px;
}
.resume-history article {
  position: relative;
  padding: 0 0 30px 26px;
  border-left: 1px solid var(--line);
  margin-left: 5px;
}
.resume-history article::before {
  content: '';
  width: 9px;
  height: 9px;
  position: absolute;
  left: -5px;
  top: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--bg);
}
.resume-period {
  font-size: .71rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  display: block;
  margin-bottom: 10px;
}
.resume-history h3 {
  font-size: 1.4rem;
  margin-bottom: 5px;
}
.resume-history .role-focus {
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: 15px;
}
.resume-history ul {
  padding-left: 18px;
  margin: 0 0 15px;
}
.resume-history li {
  font-size: .95rem;
  line-height: 1.65;
  margin-bottom: 8px;
  color: #5a5062;
}
.resume-history article>p:not(.role-focus) {
  font-size: .95rem;
}
.resume-history article>a {
  font-size: .77rem;
  color: var(--accent);
}
.resume-inset {
  background: #e4e3ee;
  padding: 15px 18px;
  border-radius: 4px;
  margin-top: 22px;
}
.resume-inset b {
  font-size: .8rem;
  font-weight: 600;
}
.resume-inset p {
  font-size: .82rem;
  margin: 7px 0 0;
  line-height: 1.5;
}
.resume-note {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  font-size: .7rem !important;
}
.resume-editorial .eyebrow {
  color: var(--accent);
}
@media (max-width:850px) {
  .resume-intro {
    gap: 35px;
    grid-template-columns: 1.2fr 1fr;
  }
  .resume-layout {
    grid-template-columns: 190px 1fr;
    gap: 35px;
  }
  .resume-evidence>a {
    grid-template-columns: 1fr 20px;
    gap: 8px;
  }
  .resume-evidence>a b {
    grid-column: 1;
  }
  .resume-evidence>a span {
    grid-column: 1;
  }
  .resume-evidence>a i {
    grid-column: 2;
    grid-row: 1;
  }
}
@media (max-width:600px) {
  .resume-intro {
    grid-template-columns: 1fr;
    padding: 35px 0 28px;
    gap: 28px;
  }
  .resume-intro h1 {
    font-size: var(--page-title);
  }
  .resume-action {
    padding: 24px;
  }
  .resume-action>p {
    font-size: 1.3rem;
    margin: 16px 0 22px;
  }
  .resume-layout {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-top: 28px;
  }
  .resume-content {
    order: 0;
  }
  .resume-sidebar {
    order: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
  .resume-sidebar section {
    margin: 0 0 15px;
  }
  .resume-sidebar section:first-child {
    grid-column: 1/-1;
  }
  .resume-sidebar ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 15px;
  }
  .resume-content h2 {
    font-size: 1.8rem;
  }
  .resume-evidence {
    padding-bottom: 20px;
  }
}
@media print {
  .resume-intro {
    display: block;
    padding: 0 0 15px;
  }
  .resume-intro h1 {
    font-size: 32px;
  }
  .resume-action {
    display: none;
  }
  .resume-layout {
    display: block;
    padding-top: 20px;
  }
  .resume-sidebar {
    display: none;
  }
  .resume-history article,
  .resume-evidence>a {
    break-inside: avoid;
  }
  .resume-content h2 {
    font-size: 21px;
  }
  .resume-history h3 {
    font-size: 18px;
  }
  .resume-evidence {
    padding-bottom: 15px;
  }
  .resume-history {
    padding-top: 20px;
  }
  .resume-history li,
  .resume-history p,
  .resume-evidence>a {
    font-size: 11px !important;
  }
  .resume-history article {
    padding-bottom: 15px;
  }
}
.feature .role>span {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  height: 32px;
  border: 1px solid #d9d7e3;
  border-radius: 50%;
  font-size: 1.1rem;
  transition: background .3s,color .3s,transform .4s;
}
@media (hover:hover) {
  .feature:hover .role>span {
    background: #3a254e;
    color: #fff;
    border-color: #3a254e;
    transform: rotate(5deg);
  }
}
.feature .role {
  font-size: .95rem;
  line-height: 1.4;
  isolation: auto;
  position: relative;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px 24px;
  margin: 22px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid #d5d3df;
  border-radius: 0;
}
@media (max-width:680px) {
  .feature .role {
    font-size: .95rem;
  }
}
.feature .role>div {
  min-width: 0;
  flex: 1 1 auto;
  font-size: var(--card-meta);
  line-height: 1.45;
  font-weight: 600;
  color: var(--card-strong);
}
.feature .role small {
  display: block;
}
@media (max-width:560px) {
  .feature .role {
    gap: 16px;
  }
}
.feature .role {
  margin-top: 22px;
  padding-top: 20px;
}
@media (min-width:701px) {
  @supports (grid-template-rows:subgrid) {
    .feature .role {
      align-self: stretch;
      align-content: start;
    }
  }
}
.featured>.feature .role {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #d3d1de;
}

/* ======================================================================
   Contact
   ====================================================================== */

.contact-page {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 10%;
  padding-top: 90px;
  padding-bottom: 120px;
  min-height: 58vh;
  align-items: start;
}
.contact-intro h1 {
  font-size: var(--page-title);
  line-height: 1.03;
  letter-spacing: -.045em;
  margin: 20px 0 28px;
}
.contact-lead {
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 42ch;
}
.contact-details {
  padding-top: 6px;
}
.contact-details h2 {
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 20px 0 8px;
}
.contact-details>p:not(.eyebrow) {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 38ch;
}
#contact-methods {
  margin-top: 36px;
  border-top: 1px solid var(--line);
}
#contact-methods>a {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: baseline;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
  transition: color .2s;
}
#contact-methods>a>span:first-child {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
#contact-methods>a>span[aria-hidden] {
  display: inline-block;
  margin-left: 6px;
  color: var(--muted);
  transition: transform .2s, color .2s;
}
#contact-methods>a:hover {
  color: var(--accent);
}
#contact-methods>a:hover>span[aria-hidden] {
  color: var(--accent);
  transform: translate(2px,-2px);
}
#contact-methods>a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
@media (max-width:760px) {
  .contact-page {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-top: 40px;
    padding-bottom: 60px;
  }
}

/* ======================================================================
   Footer
   Shared sign-off and navigation.
   ====================================================================== */

body>footer.portfolio-footer {
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 32px 0 0;
  background: #30213e;
  color: #f6f3f7;
  border: 0;
  border-radius: 0;
  padding: 28px max(5vw, calc(55vw - 700px)) 20px;
}
.portfolio-footer .footer-name {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  gap: 10px;
  flex: none;
}
.portfolio-footer .footer-name img {
  filter: brightness(0) invert(1);
  opacity: .9;
  width: 30px;
  height: 30px;
}
.portfolio-footer .footer-signoff strong {
  color: #f6f3f7;
  font-weight: 600;
}
.portfolio-footer nav a {
  transition: color .2s;
}
.portfolio-footer nav a>span:last-child {
  color: #ada9ce;
  transition: transform .25s;
}
.portfolio-footer nav a:hover>span:last-child {
  transform: translate(2px,-2px);
}
.portfolio-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #ffffff24;
  align-items: center;
  font-size: 11px;
  line-height: 1.5;
  color: #bbb5c7;
  margin-top: 14px;
  padding-top: 12px;
}
.portfolio-footer .footer-bottom a {
  white-space: nowrap;
}
.portfolio-footer .footer-bottom a span {
  margin-left: 10px;
}
.portfolio-footer a:focus-visible {
  outline: 2px solid #d9d0ac;
  outline-offset: 5px;
  border-radius: 2px;
}
@media (max-width:600px) {
  body>footer.portfolio-footer {
    margin-top: 24px;
  }
  .portfolio-footer .footer-bottom>span {
    max-width: 27ch;
  }
  /* Phones: footer links get a finger-sized hit area, and the small print stays readable. */
  .portfolio-footer nav a {
    min-height: 40px;
  }
  .portfolio-footer .footer-bottom {
    font-size: 12px !important;
  }
  .portfolio-footer .footer-bottom a {
    padding: 12px 0;
  }
}
@media print {
  body>footer.portfolio-footer {
    display: none;
  }
}
.portfolio-footer .footer-main {
  grid-template-columns: minmax(0,1fr) 310px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}
.portfolio-footer nav {
  grid-template-columns: 1fr 1fr;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  width: auto;
  max-width: none;
  font-size: 13px;
  gap: 8px 24px;
}
.portfolio-footer nav a:first-child>span:last-child {
  color: #bbb6d6;
}
@media (max-width:650px) {
  .portfolio-footer .footer-main {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
body:has(#small-detail>.heirloom-gallery)>footer.portfolio-footer {
  margin-top: 16px;
}
.portfolio-footer .footer-signoff {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 32px;
  align-items: center;
}
.portfolio-footer nav a,
.portfolio-footer nav a:first-child {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  grid-column: auto;
  justify-self: auto;
  width: auto;
  padding: 4px 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  line-height: 1.5;
  box-shadow: none;
}
.portfolio-footer nav a>span:last-child,
.portfolio-footer nav a:first-child>span:last-child {
  display: none;
}
.portfolio-footer nav a:first-child {
  color: #f6f3f7;
  font-weight: 600;
}
.portfolio-footer nav a:hover,
.portfolio-footer nav a:first-child:hover {
  background: none;
  color: #c8c3e6;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 5px;
}
@media (max-width:650px) {
  .portfolio-footer .footer-signoff {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .portfolio-footer nav {
    font-size: 13px;
  }
  .portfolio-footer .footer-bottom {
    font-size: 10px;
    gap: 20px;
  }
}
.portfolio-footer .footer-signoff p {
  font-size: 21px;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -.025em;
  text-align: left;
}
@media (max-width:650px) {
  .portfolio-footer .footer-signoff p {
    font-size: 21px;
  }
  body>footer.portfolio-footer {
    padding: 24px 5vw 18px;
  }
}

/* ======================================================================
   Shared patterns
   Treatments applied across several components at once (pill actions, shared type weights, card chrome).
   ====================================================================== */

@media print {
  .nav,
  footer,
  .print-resume {
    display: none;
  }
}
h1,
h2,
h3,
h4,
.hero h1,
.feature h3,
.mini-body h3,
.era-summary h2,
.resume-intro h1,
.resume-history h3 {
  font-family: var(--font-site);
  font-weight: 800;
  letter-spacing: -.035em;
}
.hero h1,
.resume-intro h1 {
  letter-spacing: -.045em;
}

/* ======================================================================
   Late overrides
   Final refinements that override rules in several sections above. They depend on source
   order (equal specificity, same properties), so they must stay at the end of the file.
   ====================================================================== */

/* Home hero */
.hero-copy h1 {
  letter-spacing: -.045em;
  font-size: var(--page-title);
  line-height: 1.02;
  margin: 0 0 17px;
}
@media (max-width:900px) {
  .hero-copy h1 {
    font-size: var(--page-title);
  }
}
@media (max-width:560px) {
  .hero-copy h1 {
    font-size: var(--page-title);
    line-height: 1.06;
    margin-bottom: 13px;
  }
}

/* Shared patterns */
.eyebrow,
.hero-work-label,
.nav nav,
.work-filters button,
.role {
  font-weight: 600;
}
.hero-bottom p,
.detail-summary,
.mini-body p,
.confidentiality-note p {
  font-weight: 400;
}

/* Industries */
.confidentiality-note p {
  font-size: 15px;
  line-height: 1.7;
}
@media (max-width:500px) {
  .confidentiality-note p {
    font-size: 14px;
    line-height: 1.65;
  }
}

/* Shared patterns */
@media (pointer:fine) {
  .liquid-enabled .feature:hover img,
  .liquid-enabled .mini-project:hover img {
    transform: none;
  }
}
/* Aqualocka magazine scan: frame the printed page only (x 275-1270 of the 1358px scan), cropping out
   the spine and the facing page; vertically from the masthead's base through the product photos.
   liquid-images.js mirrors this crop (search "surfkit-magazine"). */
.feature[href="case.html?project=25"] .feature-image img,
#more-grid .mini-project[data-project="25"] .mini-photo img {
  width: 136.5%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  translate: -20.25% 0;
}
.hero-work-button .hero-work-arrow,
.hero-all-work>svg,
.feature-action>svg {
  display: none;
}
.feature .role>.feature-action,
body>.nav nav>a.nav-resume,
.hero-work-button,
.hero-all-work,
.work-filters button,
.timeline-nav button,
.print-resume,
.project-detail-footer a,
.contact-work,
button:not(.mini-project):not([role="tab"]):not(.era-preview):not(.dialog-close):not(#close-demo) {
  border-radius: 999px;
}
.mini-project:focus-visible .photo-illustration,
.feature:focus-within .photo-illustration {
  opacity: 0;
}
.feature,
.mini-project {
  --card-title: clamp(24px,2.1vw,30px);
  --card-body: 16px;
  --card-meta: 14px;
  --card-label: 11px;
  --card-muted: #6d6676;
  --card-strong: #332641;
}

/* Selected work */
@media (max-width:560px) {
  .feature {
    --card-title: 25px;
    --card-body: 16px;
    --card-meta: 14px;
  }
}

/* More work */
.mini-project {
  --card-title: 22px;
  --card-body: 14px;
  --card-meta: 13px;
}
@media (max-width:560px) {
  .mini-project {
    --card-title: 22px;
    --card-body: 14px;
    --card-meta: 13px;
  }
}

/* Shared patterns */
.feature h3,
.mini-body h3 {
  font-size: var(--card-title);
  font-weight: 750;
  line-height: 1.18;
  letter-spacing: -.025em;
  margin: 0 0 16px;
  max-width: 100%;
}

/* More work */
.mini-body h3 {
  margin-top: 10px;
}

/* Shared patterns */
.feature .feature-content>p,
.mini-body>p {
  font-size: var(--card-body);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--card-muted);
  margin: 0 0 24px;
  max-width: 60ch;
}

/* Selected work */
@media (max-width:560px) {
  .feature .feature-content>p {
    margin-bottom: 22px;
  }
}

/* More work */
.mini-body>p {
  margin-bottom: 18px;
}

/* Shared patterns */
.feature .tag-copy small,
.mini-project .tag-copy small,
.feature .role small {
  font-size: var(--card-label);
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--card-muted);
  margin: 0;
  padding: 0;
}

/* More work */
.mini-meta>span:first-child {
  color: var(--ink);
  font-weight: 600;
}
.mini-meta>span:last-child {
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
  text-align: right;
}

/* Heirloom showcase */
.project-detail-visual:not(.heirloom-device-visual) figcaption {
  position: static;
  background: none;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0;
  padding: 0;
  margin: 10px 0 0;
  max-width: 58ch;
}

/* Experience */
.career-view-toggle button[aria-pressed=true] {
  background: #45315b;
  color: #fff3f9;
}
.timeline-horizontal .timeline-row-label strong {
  order: 2;
  font-size: 12px;
  font-weight: 400;
  color: #716a7a;
}

/* Résumé */
.feature .role small {
  margin-bottom: 5px;
}

/* Footer */
.portfolio-footer .footer-signoff p {
  color: #bbb5c7;
}

/* Shared patterns */
.feature .role>.feature-action,
.mini-project .mini-card-footer .mini-open {
  background: #252b2c;
  color: #fff;
  border-color: transparent;
  transition: background-color .3s ease,border-color .3s ease,color .3s ease;
  box-shadow: none;
}

/* More work */
.mini-project .mini-card-footer .mini-open {
  background: #f7f6fd;
  color: #2f2834;
  border-top: 1px solid #dddbe6;
}

/* Shared patterns */
.feature:hover .role>.feature-action,
.feature:focus-visible .role>.feature-action,
.feature:focus-within .role>.feature-action,
.mini-project:hover .mini-card-footer .mini-open,
.mini-project:focus-visible .mini-card-footer .mini-open {
  background: var(--photo-badge,#252b2c);
  color: #fff;
  border-color: transparent;
  box-shadow: none;
}

/* More work */
.mini-project:hover .mini-card-footer .mini-open,
.mini-project:focus-visible .mini-card-footer .mini-open {
  background: #f7f6fd;
  color: var(--photo-badge,#45315b);
  border-top-color: #dddbe6;
  box-shadow: none;
}

/* Shared patterns */
#small-detail .project-contribution h2,
#small-detail .contribution-radar h2,
#case-content .contribution-radar h2,
#case-content .case-narrative h2,
#case-content .result-outcome h2,
#case-content .result-delivery h2,
#case-content .result-tools h2,
:is(#small-detail,#case-content) .interface-gallery-heading h2 {
  font-size: var(--project-heading);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--ink);
}

/* Heirloom showcase */
:is(#small-detail,#case-content) .interface-gallery-heading h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
}

/* ======================================================================
   Project page type scale
   One scale for case and detail pages: display 48 · title 20 · lead 18 · body 16 · value 16 · small 13 · label 12.
   Defined last so it settles the many older per-component sizes above.
   ====================================================================== */
:is(#case-content,#small-detail):is(#case-content,#small-detail) h1 {
  font-size: clamp(34px,4.2vw,48px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.035em;
}
:is(#case-content,#small-detail):is(#case-content,#small-detail) :is(.case-narrative h2,.result-outcome h2,.result-delivery h2,.result-tools h2,.contribution-radar h2,.project-contribution h2,.interface-gallery-heading h2,.result-heading) {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--ink);
}
:is(#case-content,#small-detail):is(#case-content,#small-detail) .project-pagination-link h2 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
}
:is(#case-content,#small-detail):is(#case-content,#small-detail) :is(.case-outcome,.detail-summary) {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--muted);
}
:is(#case-content,#small-detail):is(#case-content,#small-detail) .case-narrative .narrative-brief {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}
:is(#case-content,#small-detail):is(#case-content,#small-detail) :is(.case-narrative p,.case-narrative li,.result-statement,.result-delivery>p,.result-tools p,.project-contribution p) {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--muted);
}
:is(#case-content,#small-detail):is(#case-content,#small-detail) :is(.case-facts b,.detail-facts dd,.tag-copy>span,.radar-breakdown dt) {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--ink);
}
:is(#case-content,#small-detail):is(#case-content,#small-detail) :is(.back,.radar-note,.radar-level-name,figcaption,.narrative-toggle,.narrative-all,.project-detail-footer,.project-detail-footer a,.project-pagination-link p,.interface-gallery-note,.project-video-pause) {
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
}
:is(#case-content,#small-detail):is(#case-content,#small-detail) :is(.eyebrow,.narrative-bar>span,.section-number,.project-pagination-link span) {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
:is(#case-content,#small-detail):is(#case-content,#small-detail) :is(.case-facts span,.project-detail-footer>span,.detail-facts dt,.tag-copy small) {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: #70697c;
}

/* Case header: type, domain, contribution and timeframe as one specification strip. */
#case-content .case-specs {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  align-items: start;
  gap: 18px 32px;
  margin-top: 26px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
#case-content .case-specs>.case-tags,
#case-content .case-specs>.case-facts {
  display: contents;
}
#case-content .case-specs .case-facts>div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
#case-content .case-specs .project-pill,
#case-content .case-specs .domain-pill {
  margin: 0;
}
/* Spec grid: four equal cells with ruled dividers, each an icon beside label and value. */
#case-content .case-specs {
  gap: 0;
  padding: 0;
}
#case-content .case-specs>*>*,
#case-content .case-specs .case-facts>div {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px 18px 0;
}
#case-content .case-specs .case-facts>div>div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
}
#case-content .case-specs>*>:nth-child(even) {
  padding-left: 22px;
  border-left: 1px solid var(--line);
}
#case-content .case-specs .case-facts>div {
  border-top: 1px solid var(--line);
}
#case-content .case-specs .fact-icon {
  display: inline-flex;
  flex: none;
  color: var(--tag-ink,#45315b);
}
#case-content .case-specs .fact-icon .pill-icon {
  box-sizing: border-box;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  stroke-width: 1.7;
}
#case-content .case-specs .case-facts>div:nth-child(even) {
  padding-left: 22px;
  border-left: 1px solid var(--line);
}
#case-content .case-specs .case-facts>div {
  gap: 21px;
}

/* Spec grid: full width below the intro and image, kept as a 2 x 2. */
#case-content .case-specs {
  grid-column: 1/-1;
  margin-top: 8px;
}

/* Outcome panel columns share the narrative's grid: same edges, same 40px gutters.
   The panel surface bleeds 32px outside the content edge instead of insetting the text. */
@media (min-width:901px) {
  #case-content .case-result {
    grid-auto-flow: row;
    grid-template-columns: repeat(3,minmax(0,1fr));
    column-gap: 40px;
    margin-left: -32px;
    margin-right: -32px;
    padding: 28px 32px;
  }
  #case-content .result-outcome,
  #case-content .result-delivery,
  #case-content .result-tools {
    padding: 0;
    margin: 0;
    border-left: 0;
    position: relative;
  }
  #case-content .result-delivery::before,
  #case-content .result-tools::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -20px;
    border-left: 1px solid #c8c6d8;
  }
}

/* Image provenance as a quiet label on the image, not a caption below it. */
#case-content .case-image {
  position: relative;
  margin-bottom: 0;
}
#case-content .case-image .image-note {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: #f6f3f7d9;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #463d51;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  cursor: help;
}
#case-content .case-image .image-note::before {
  content: 'i';
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  flex: none;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, serif;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
#case-content .case-specs {
  margin-top: 0;
}

/* Avatar steps down behind the header rule while reading; the name slides into its place. */
.nav .identity {
  overflow: hidden;
}
.identity img.identity-avatar,
.nav .identity b {
  transition: transform .55s cubic-bezier(.4,0,.2,1),opacity .4s ease;
}
.avatar-away .identity img.identity-avatar {
  transform: translateY(105%);
  opacity: 0;
}
.avatar-away .nav .identity b {
  transform: translateX(calc(-1 * var(--avatar-shift,87px)));
}
@media (prefers-reduced-motion:reduce) {
  .identity img.identity-avatar,
  .nav .identity b {
    transition: none;
  }
}

/* Name as a small wordmark: heavy first name, light green surname, tightened tracking. */
.nav .identity b.identity-name {
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -.025em;
  white-space: nowrap;
  font-weight: 800;
  color: var(--ink);
}
.nav .identity b.identity-name span:last-child {
  font-weight: 400;
  color: #45315b;
}
@media (max-width:700px) {
  .nav .identity b.identity-name {
    font-size: 1.25rem;
  }
}
/* Phones: the portrait stands in for the name at the top, but once it steps down out of view the name fades in and
   slides into its place, so the header is never left empty. */
@media (max-width:500px) {
  body>.nav .identity b.identity-name {
    display: block;
    opacity: 0;
  }
  html.avatar-away body>.nav .identity b.identity-name {
    opacity: 1;
  }
}

/* Narrative section: one full-width header rule instead of three short column rules. */
#case-content .case-body.case-editorial {
  padding-top: 0;
}
#case-content .narrative-bar {
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
#case-content .case-narrative section,
#case-content .case-narrative section:last-child {
  border-top: 0;
  padding-top: 18px;
}
@media (max-width:900px) {
  #case-content .case-narrative section+section {
    border-top: 1px solid var(--line);
  }
}

/* Case-page cards share one geometry: surface extends 32px past the content edge so text
   sits on the column grid; same padding, radius, border and fill. */
#case-content .case-result,
#case-content .case-body section.contribution-radar {
  border: 1px solid #d4d3e0;
  border-radius: 12px;
  background: #efefe8;
  box-shadow: none;
}
#case-content .case-body section.contribution-radar {
  padding: 28px 32px;
}
@media (min-width:901px) {
  #case-content .case-body section.contribution-radar {
    margin-left: -32px;
    margin-right: -32px;
  }
}
@media (max-width:900px) {
  #case-content .case-body section.contribution-radar {
    padding: 24px;
  }
}

/* Case summary: outcomes and contribution profile as sections of one divided card. */
#case-content .case-summary {
  border: 1px solid #d4d3e0;
  border-radius: 12px;
  background: #efefe8;
  overflow: hidden;
}
@media (min-width:901px) {
  #case-content .case-summary {
    margin: 0 -32px;
  }
}
#case-content .case-summary .case-result,
#case-content .case-summary section.contribution-radar {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#case-content .case-summary section.contribution-radar {
  border-top: 1px solid #d4d3e0;
}
/* Section headings share one icon treatment. */
:is(#case-content,#small-detail) :is(.result-outcome,.result-delivery,.result-tools,.contribution-radar) h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
:is(#case-content,#small-detail) :is(.result-outcome,.result-delivery,.result-tools,.contribution-radar) h2 .pill-icon {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  padding: 0;
  margin: 0;
  color: #45315b;
  stroke-width: 2;
}

/* Avatar slides out to the left instead of stepping down. */
.avatar-away .identity img.identity-avatar {
  transform: translateX(-110%);
  opacity: 0;
}

/* Slide the avatar fully past the viewport's left edge; nothing clips it on the way. */
.nav .identity {
  overflow: visible;
}
.avatar-away .identity img.identity-avatar {
  transform: translateX(calc(-100% - 5vw - 60px));
  opacity: 0;
}

/* Summary section icons match the spec-grid pictograms: 40px, same stroke. */
:is(#case-content,#small-detail) :is(.result-outcome,.result-delivery,.result-tools,.contribution-radar) h2 {
  gap: 14px;
}
:is(#case-content,#small-detail) :is(.result-outcome,.result-delivery,.result-tools,.contribution-radar) h2 .pill-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  stroke-width: 1.8;
  color: var(--tag-ink,#45315b);
}
/* One ink and weight for every project-page pictogram. */
#case-content .case-specs .fact-icon,
#case-content .case-specs .fact-icon .pill-icon,
:is(#case-content,#small-detail) :is(.result-outcome,.result-delivery,.result-tools,.contribution-radar) h2 .pill-icon {
  color: rgb(76,60,95);
  stroke-width: 1.8;
}

/* Facts flow into the brief: the grid closes without its own bottom rule;
   the brief's header rule is the single divider between them. */
#case-content .case-specs {
  border-bottom: 0;
}
#case-content .case-body.case-editorial {
  margin-top: 8px;
}

/* Hero: text + specs on the left (two-thirds); main image + context mosaic on the right. */
@media (min-width:901px) {
  #case-content {
    grid-template-columns: minmax(0,2fr) minmax(0,1fr);
  }
  #case-content .case-hero { grid-column: 1; grid-row: 1; }
  #case-content .case-image { grid-column: 2; grid-row: 1; }
  #case-content .case-specs { grid-column: 1; grid-row: 2; align-self: start; }
  #case-content .case-mosaic { grid-column: 2; grid-row: 2; align-self: start; }
  #case-content>:not(.case-hero):not(.case-image):not(.case-specs):not(.case-mosaic) { grid-column: 1/-1; }
}
#case-content .case-mosaic {
  display: grid;
  grid-template-columns: repeat(var(--tiles,3),minmax(0,1fr));
  gap: 8px;
  margin: 0;
}
#case-content .case-mosaic[data-count="2"] { --tiles: 2; }
#case-content .case-mosaic img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

/* Mosaic as a bento beside the specs: one tall tile and two stacked, matched to the spec grid's height. */
@media (min-width:901px) {
  #case-content .case-mosaic {
    align-self: stretch;
    grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
    grid-template-rows: 1fr 1fr;
    min-height: 0;
  }
  #case-content .case-mosaic img {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
  }
  #case-content .case-mosaic img:first-child {
    grid-row: span 2;
  }
  #case-content .case-mosaic[data-count="2"] {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: 1fr;
  }
  #case-content .case-mosaic[data-count="2"] img:first-child {
    grid-row: auto;
  }
  #case-content .case-mosaic[data-count="6"] {
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-template-rows: 1fr 1fr;
  }
  #case-content .case-mosaic[data-count="6"] img:first-child {
    grid-row: auto;
  }
}
@media (min-width:901px) {
  /* The bento takes the spec grid's height; its images never size the row. */
  #case-content .case-mosaic {
    contain: size;
    grid-template-rows: minmax(0,1fr) minmax(0,1fr);
  }
}

/* Main image and context tiles form one bento: a large tile over the mosaic, one gap, one radius. */
@media (min-width:901px) {
  #case-content .case-image {
    grid-row: 1 / 3;
    align-self: stretch;
    display: grid;
    grid-template-rows: auto minmax(0,1fr);
    gap: 8px;
  }
  #case-content .case-image>img {
    border-radius: 8px;
  }
  #case-content .case-image .case-mosaic {
    grid-column: auto;
    grid-row: auto;
    min-height: 120px;
  }
}
#case-content .case-image .image-note {
  top: 12px;
  bottom: auto;
}

/* Back link: a round arrow control with a clear label. */
:is(#case-content,#small-detail):is(#case-content,#small-detail) a.back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
:is(#case-content,#small-detail) .back-arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #cac7da;
  border-radius: 50%;
  color: #45315b;
  transition: background-color .25s ease,border-color .25s ease,color .25s ease;
}
:is(#case-content,#small-detail) .back-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
:is(#case-content,#small-detail) a.back:hover .back-arrow,
:is(#case-content,#small-detail) a.back:focus-visible .back-arrow {
  background: #45315b;
  border-color: #45315b;
  color: #f6f3f7;
}
:is(#case-content,#small-detail) a.back:hover .back-arrow svg {
  transform: translateX(-3px);
}
@media (prefers-reduced-motion:reduce) {
  :is(#case-content,#small-detail) .back-arrow,
  :is(#case-content,#small-detail) .back-arrow svg { transition: none; }
}

/* Provenance: a small info button; the note appears on hover, focus or tap. */
#case-content .case-image .image-note {
  top: 12px; left: 12px; bottom: auto;
  display: flex; align-items: center; gap: 8px;
  padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; cursor: default;
}
#case-content .case-image .image-note::before { content: none; }
#case-content .image-note-btn {
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 50%; background: #f6f3f7e6;
  color: #45315b; font: italic 700 13px/1 Georgia, serif;
  box-shadow: 0 1px 4px #2b1d3833; cursor: help;
}
#case-content .image-note [role=tooltip] {
  padding: 6px 11px; border-radius: 8px; background: #f6f3f7f2; color: #463d51;
  font-size: 12px; line-height: 1.35; max-width: 240px;
  opacity: 0; transform: translateX(-4px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
#case-content .image-note:hover [role=tooltip],
#case-content .image-note-btn:focus-visible + [role=tooltip],
#case-content .image-note.is-open [role=tooltip] { opacity: 1; transform: none; }

/* Alternate summary layout: profile + chart left, the three result rows stacked right. */
@media (min-width:901px) {
  #case-content .case-summary {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  }
  #case-content .case-summary section.contribution-radar {
    grid-column: 1; grid-row: 1;
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    border-top: 0; border-right: 1px solid #d4d3e0;
    padding: 28px 32px;
  }
  #case-content .case-summary .case-result {
    grid-column: 2; grid-row: 1;
    display: flex; flex-direction: column;
    margin: 0; padding: 4px 32px;
  }
  #case-content .case-summary .case-result>* {
    padding: 22px 0; border: 0;
  }
  #case-content .case-summary .case-result>*+* {
    border-top: 1px solid #d4d3e0;
  }
  #case-content .case-summary .case-result>*::before { content: none; }
}
#case-content .case-summary .radar-breakdown { display: none; }
#case-content .case-summary .radar-summary { max-width: none; }
#case-content .case-summary .radar-chart { max-width: 440px; }

/* Results left, profile right; the chart fits the height of the three result rows. */
@media (min-width:901px) {
  #case-content .case-summary .case-result { grid-column: 1; }
  #case-content .case-summary section.contribution-radar {
    grid-column: 2;
    border-right: 0;
    border-left: 1px solid #d4d3e0;
    min-height: 0;
    contain: size;
    height: 100%;
    padding: 24px 32px;
  }
  #case-content .case-summary .radar-figure {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    justify-content: center;
  }
  #case-content .case-summary .radar-chart {
    width: auto;
    height: 100%;
    max-width: 100%;
  }
}

/* Radar labels: larger and higher contrast so they survive the chart being scaled down. */
.radar-chart .radar-labels text {
  font-size: 19px;
  font-weight: 500;
  fill: #847d8d;
}
.radar-chart .radar-labels text.is-active {
  font-size: 20px;
  font-weight: 600; /* semibold: 700 isn't loaded, so it fell through to the 800 weight */
  fill: #2e213d;
}

/* Summary as an open ruled grid, like the spec grid: no card, just lines on the content edges. */
#case-content .case-summary,
#case-content .case-summary:is(*) {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  overflow: visible;
}
@media (min-width:901px) {
  #case-content .case-summary .case-result { padding: 0 32px 0 0; }
  #case-content .case-summary section.contribution-radar {
    border-left: 1px solid var(--line);
    padding: 24px 0 24px 32px;
  }
  #case-content .case-summary .case-result>*+* { border-top-color: var(--line); }
}
@media (max-width:900px) {
  #case-content .case-summary .case-result,
  #case-content .case-summary section.contribution-radar { padding-left: 0; padding-right: 0; }
  #case-content .case-summary section.contribution-radar { border-top-color: var(--line); }
}
#case-content .case-summary .radar-point,
#case-content .case-summary .radar-point.is-primary { stroke: #f6f3f7; }
#case-content .case-summary .radar-point:not(.is-primary) { fill: #f6f3f7; stroke: #45315b; }

/* Experience: layout switcher hidden while only the Timeline view is offered. */
.career-view-controls { display: none !important; }

/* Selected Work spec row: two equal cells split by a vertical rule, like the More Work cards. */
#featured .feature .feature-tags {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0;
}
#featured .feature .feature-tags>.domain-pill {
  padding-left: 22px;
  border-left: 1px solid var(--line);
}

/* Selected Work: the tag divider runs down to meet the horizontal rule below. */
#featured .feature .feature-tags {
  position: relative;
}
#featured .feature .feature-tags>.domain-pill {
  border-left: 0;
}
#featured .feature .feature-tags::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: -22px;
  width: 1px;
  background: var(--line);
  pointer-events: none;
}
/* Years in extra bold. */
.feature-meta>span:last-child,
.mini-meta>span:last-child {
  font-weight: 800;
  color: var(--ink);
}
#featured .feature .feature-meta>span:last-child,
#more-grid .mini-project .mini-meta>span:last-child {
  font-weight: 800 !important;
  color: var(--ink);
}

/* After the colour bloom the photo is shown as-is: no neon wash. */
.photo-revealed .photo-illustration { opacity: 0 !important; animation: none !important; }

/* Confidentiality note sits close under the logo grid. */
.industry-focus .focus-logo-grid { margin-bottom: 4px; }
.industry-focus .confidentiality-note { margin-top: 0; padding-top: 0; }

/* Before the page's colour scan finishes the photo shows normally. */
.toning-images :is(.feature-image, .mini-photo) img[data-illustrated="pending"],
.toning-images :is(.feature-image, .mini-photo) img:not([data-illustrated]) { opacity: 1; }

/* Header stays neutral: black and white, no pink or purple. */
.nav .identity b.identity-name span:last-child { color: #55505c; }
.nav nav a[aria-current="page"],
.nav nav a:hover { color: var(--ink) !important; }
.nav nav a[aria-current="page"]::after,
body>.nav nav>a:not(.nav-resume)[aria-current="page"]::after { background: var(--ink) !important; }
body>.nav nav>a.nav-resume,
.nav .nav-resume {
  background: transparent !important;
  border-color: #cfcfd2 !important;
  color: var(--ink) !important;
}
.nav .nav-resume:hover { background: #ececee !important; }

/* Selected Work tiles: one label size and one value size across spec cells and contribution. */
#featured .feature .tag-copy small,
#featured .feature .role small {
  font-size: 13px !important; font-weight: 500 !important; line-height: 1.3 !important;
  letter-spacing: 0 !important; text-transform: none !important; color: #6b6172 !important;
}
#featured .feature .tag-copy>span,
#featured .feature .role>div {
  font-size: 17px !important; font-weight: 700 !important; line-height: 1.35 !important;
  letter-spacing: -.005em !important; color: var(--ink) !important;
}

/* Image hosts clip their colour layers. */
.illustrated-photo { overflow: hidden; }

/* View project: the site accent on hover/focus. */
#featured .feature:is(:hover,:focus-visible) .role>.feature-action,
#featured .feature .role>.feature-action:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #1a1624 !important;
}
#more-grid .mini-project:is(:hover,:focus-visible) .mini-open svg {
  background: var(--accent) !important;
  color: #1a1624 !important;
}

#featured .feature .feature-tags::after { bottom: calc(-1 * var(--divider-reach, 22px) - 1px) !important; }

/* ---------- More Work: layout toggle ---------- */
.more-toolbar { gap: 16px; }
.more-view-toggle { display: inline-flex; gap: 2px; padding: 3px; margin-left: auto; border: 1px solid var(--line); border-radius: 999px; }
.more-view-toggle button { display: grid; place-items: center; width: 32px; height: 28px; padding: 0; border: 0; border-radius: 999px !important; background: transparent; color: #6b6172; }
.more-view-toggle button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.more-view-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }

/* ---------- More Work: list view ----------
   One row per project: thumbnail · client, year, title and summary · type and domain · arrow.
   The card's inner wrappers step aside (display: contents) so every piece sits on one grid. */
#more-grid.is-list { grid-template-columns: minmax(0,1fr) !important; gap: 0 !important; border-top: 1px solid var(--line); }
#more-grid.is-list .mini-project {
  display: grid !important;
  grid-template-columns: 184px minmax(0,1fr) 230px 44px;
  grid-template-rows: auto auto auto;
  align-content: center;
  column-gap: 32px;
  padding: 20px 16px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  transform: none !important;
  text-align: left;
}
#more-grid.is-list .mini-project::before { border-radius: 16px; }
#more-grid.is-list .mini-body,
#more-grid.is-list .mini-card-footer { display: contents !important; }
#more-grid.is-list .mini-project .mini-photo {
  grid-column: 1; grid-row: 1 / 4; align-self: center;
  width: 184px !important; margin: 0 !important; aspect-ratio: 16/10;
  clip-path: inset(0 round 12px) !important;
}
#more-grid.is-list .mini-project:is(:hover,:focus-visible) .mini-photo { clip-path: inset(0 round 12px) !important; }
#more-grid.is-list .mini-project .mini-photo img { transition: scale .7s cubic-bezier(.22,1,.36,1); }
#more-grid.is-list .mini-project:is(:hover,:focus-visible) .mini-photo img { scale: 1.05; }
/* Client · year eyebrow */
#more-grid.is-list .mini-meta {
  grid-column: 2; grid-row: 1; align-self: end;
  display: flex !important; justify-content: flex-start !important; gap: 0; margin: 0 0 6px !important;
  font-size: 13px !important; line-height: 1.3; letter-spacing: .01em;
}
#more-grid.is-list .mini-meta span:first-child { font-weight: 700; color: var(--ink); }
#more-grid.is-list .mini-meta span + span { font-weight: 500; color: var(--muted); }
#more-grid.is-list .mini-meta span + span::before { content: '·'; margin: 0 8px; color: var(--line); font-weight: 700; }
#more-grid.is-list .mini-body h3 {
  grid-column: 2; grid-row: 2;
  margin: 0 0 6px !important;
  font-size: 24px !important; line-height: 1.15 !important; letter-spacing: -.02em;
}
#more-grid.is-list .mini-body>p {
  grid-column: 2; grid-row: 3; align-self: start;
  margin: 0 !important; max-width: 60ch;
  font-size: 15px !important; line-height: 1.5 !important; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Type and domain, stacked in a ruled column */
#more-grid.is-list .mini-tags {
  grid-column: 3; grid-row: 1 / 4; align-self: center;
  display: flex !important; flex-direction: column; align-items: stretch; gap: 12px;
  padding: 2px 0 2px 24px !important; min-height: 0 !important;
  border-left: 1px solid var(--line);
}
#more-grid.is-list .mini-tags::after { display: none !important; }
#more-grid.is-list .mini-tags>* { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
/* Arrow */
#more-grid.is-list .mini-open {
  grid-column: 4; grid-row: 1 / 4; align-self: center;
  display: grid !important; place-items: center;
  width: 44px; height: 44px; padding: 0 !important; border: 1px solid var(--line) !important; border-radius: 50%;
  background: transparent; color: var(--ink);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
#more-grid.is-list .mini-open>span { display: none; }
#more-grid.is-list .mini-open svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: rotate .35s cubic-bezier(.22,1,.36,1); }
#more-grid.is-list .mini-project:is(:hover,:focus-visible) .mini-open { background: var(--ink); border-color: var(--ink) !important; color: #fff; }
#more-grid.is-list .mini-project:is(:hover,:focus-visible) .mini-open svg { rotate: 45deg; }
/* Grid-view carry-overs neutralised for rows: pill sizing, the grow-and-shadow hover card, the badge arrow. */
#more-grid.is-list .mini-tags>* { flex: none !important; height: auto !important; min-height: 0 !important; }
#more-grid.is-list .mini-body>p { display: -webkit-box !important; }
#more-grid.is-list .mini-meta span + span { font-weight: 500 !important; color: var(--muted) !important; }
/* Row hover: no floating card. The row's rule draws across in ink, the image eases in, the arrow fills. */
#more-grid.is-list .mini-project::before,
#more-grid.is-list .mini-project:is(:hover,:focus-visible)::before {
  inset: auto 0 -1px 0 !important; height: 1px; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: var(--ink) !important; z-index: 1;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .6s cubic-bezier(.22,1,.36,1) !important;
}
#more-grid.is-list .mini-project:is(:hover,:focus-visible)::before { transform: scaleX(1); }
#more-grid.is-list .mini-project:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px !important; }
#more-grid.is-list .mini-open svg,
#more-grid.is-list .mini-project:is(:hover,:focus-visible) .mini-open svg {
  width: 16px !important; height: 16px !important; padding: 0 !important;
  background: none !important; color: currentColor !important; border-radius: 0 !important;
  transform: none !important; rotate: 0deg !important;
}
#more-grid.is-list .mini-project:is(:hover,:focus-visible) .mini-open {
  background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important;
}
#more-grid.is-list .mini-open { grid-template-columns: auto !important; justify-content: center !important; align-content: center !important; }
#more-grid.is-list .mini-project:is(:hover,:focus-visible) .mini-open svg { translate: 1px -1px; }
@media (max-width:1100px) {
  #more-grid.is-list .mini-project { grid-template-columns: 150px minmax(0,1fr) 200px 44px; column-gap: 24px; }
  #more-grid.is-list .mini-project .mini-photo { width: 150px !important; }
}
@media (max-width:900px) {
  #more-grid.is-list .mini-project { grid-template-columns: 120px minmax(0,1fr) 40px; grid-template-rows: auto auto auto; column-gap: 18px; padding: 16px 4px !important; }
  #more-grid.is-list .mini-project .mini-photo { width: 120px !important; grid-row: 1 / 4; }
  #more-grid.is-list .mini-body h3 { font-size: 20px !important; }
  #more-grid.is-list .mini-body>p { -webkit-line-clamp: 1; font-size: 14px !important; }
  #more-grid.is-list .mini-tags { display: none !important; }
  #more-grid.is-list .mini-open { grid-column: 3; width: 40px; height: 40px; }
}
@media (max-width:600px) {
  #more-grid.is-list .mini-project { grid-template-columns: 96px minmax(0,1fr); column-gap: 14px; }
  #more-grid.is-list .mini-project .mini-photo { width: 96px !important; }
  #more-grid.is-list .mini-body>p,
  #more-grid.is-list .mini-open { display: none !important; }
  #more-grid.is-list .mini-body h3 { font-size: 18px !important; margin: 0 !important; }
  #more-grid.is-list .mini-meta { font-size: 12px !important; }
}

/* Experience mountain: a still image (no Ken Burns, cloud drift or parallax) with long, soft fades. */
.career-landscape .career-landscape-still,
.career-landscape .mountain-parallax img { animation: none !important; transform: translateX(var(--peak-shift, 14%)) scale(1.16) !important; will-change: auto !important; }
.career-landscape .career-cloud-drift { display: none !important; }
.mountain-parallax { transform: none !important; will-change: auto !important; }
/* The mountain is drawn in particles on a fixed stage behind the whole page (mountain-field.js): it drifts up behind
   the strata as you scroll, and they let it show through faintly. The script fades its edges itself. */
.mountain-stage { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.mountain-stage canvas { position: relative; display: block; width: 100%; height: 100%; } /* above the night sky */
/* Night sky behind the mountain (mountain-field.js, after dark by the visitor's clock): deep blue from the top down,
   fading out toward the headline on the left and into the page below the hero. */
.mountain-sky {
  position: absolute; inset: 0 0 auto 0; height: var(--sky-h, 100vh); overflow: hidden; pointer-events: none; opacity: 0;
}
/* At night the layers are solid, so the sky ends cleanly at the first layer's wavy edge. */
/* At night the layers stay see-through, as by day, all the way down and back up (they no longer switch between solid and
   see-through as you scroll). Under them, from the sky's lower edge down, a light ground sits beneath the mountain, so the
   range shows through on light just as it does by day; above that edge the night sky fills the hero. */
html[data-tod=night] .mountain-stage::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: var(--sky-h, 100vh); background: #e9eaf5; }
.mountain-sky .sky-fill {
  position: absolute; top: 0; left: 0; right: 0; height: 110vh; will-change: transform;
  background: linear-gradient(180deg, #080a24 0%, #121540 30%, #22205a 56%, #3a2a6c 80%, #573a80 100%);
}
.mountain-sky .sky-pan { position: absolute; top: 0; left: 0; will-change: transform; }
.mountain-sky .sky-pan canvas { position: absolute; top: 0; left: 0; }
.mountain-sky .sky-twinkle { animation: sky-twinkle 3.2s ease-in-out infinite alternate; }
@keyframes sky-twinkle { from { opacity: .15; } to { opacity: 1; } }
@media (prefers-reduced-motion:reduce) { .mountain-sky .sky-twinkle { animation: none; } }
.experience-page:has(.mountain-stage) .career-landscape::after { display: none; }
/* The hero at night (mountain-field.js sets html[data-tod] and, while the sky is under the header, .is-night): light
   type on the sky, and a header of the same deep blue. */
.career-hero-landscape :is(.eyebrow,.career-title,.career-title em,p,.strata-cue) { transition: color .9s ease, background-color .9s ease; }
html:is([data-tod=night], .night-early) .career-hero-landscape .eyebrow { color: #ffb3d6 !important; text-shadow: 0 0 18px rgb(255 120 190 / .35); } /* light pink from the first frame of a night visit, never the day's deep pink on the night sky */
html[data-tod=night] .career-hero-landscape .career-title { color: #fff; }
html[data-tod=night] .career-hero-landscape .career-title em { color: #c9b4ff; background: linear-gradient(100deg, #e2d4ff 0%, #b79cff 55%, #e7a6e0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* moonlit lavender into violet, a touch of pink at the end */
html[data-tod=night] .career-hero-landscape>p:not(.eyebrow) { color: #e8e1f8; }
html[data-tod=night] .career-hero-landscape .strata-cue.hero-work-button { background: #f3ecff !important; color: #2a1a4e !important; box-shadow: 0 0 0 1px rgb(255 255 255 / .5), 0 6px 24px rgb(183 156 255 / .28); } /* the light pill at night, in every style */
html[data-tod=night] .career-hero-landscape .strata-cue.hero-work-button:hover { background: #fff !important; }
html[data-tod=night].is-night body>.nav { background: rgb(9 12 38 / .72); border-bottom-color: rgb(255 255 255 / .08); }
html[data-tod=night].is-night .identity img.identity-avatar { filter: brightness(1.25) drop-shadow(0 0 1px rgb(255 255 255 / .55)); } /* the photo as it is, lifted off the dark */
.experience-page:has(.mountain-stage) .stratum-1 { --layer: rgb(239 232 241 / .86); }
.experience-page:has(.mountain-stage) .stratum-2 { --layer: rgb(217 202 224 / .9); }
.experience-page:has(.mountain-stage) .stratum-3 { --layer: rgb(198 179 211 / .92); }
.career-hero-landscape .career-landscape {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / .08) 14%, rgb(0 0 0 / .35) 28%, rgb(0 0 0 / .7) 42%, #000 58%) !important;
          mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / .08) 14%, rgb(0 0 0 / .35) 28%, rgb(0 0 0 / .7) 42%, #000 58%) !important;
}
.career-landscape::after {
  background: linear-gradient(to bottom, var(--bg) 0%, rgb(246 243 247 / .55) 9%, rgb(246 243 247 / .12) 20%, transparent 32%, transparent 42%, rgb(246 243 247 / .18) 56%, rgb(246 243 247 / .5) 70%, rgb(246 243 247 / .82) 84%, var(--bg) 97%) !important;
}
@media (max-width:650px) {
  .career-hero-landscape .career-landscape {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / .3) 14%, rgb(0 0 0 / .75) 28%, #000 40%) !important;
            mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / .3) 14%, rgb(0 0 0 / .75) 28%, #000 40%) !important;
  }
}

/* ======================================================================
   Project image colour
   Each card image carries a soft wash (.photo-glow, screen blend) and a near-opaque pool in the
   bottom-left corner (.photo-glow-core, normal blend), coloured per card (--glow-a / --glow-b,
   set in illustrations.js). They bleed in from the corner like ink, hold still at rest (each card's colour sits
   where illustrations.js placed it: continuous drift re-filtered every glow on every frame), and recede back into
   the corner on the first hover or focus. After that the card stays clean. Both one-off animations fill only
   backwards, ending on the rule's own values, so a finished glow holds no compositor layer.
   ====================================================================== */

@property --ink-reach { syntax: '<percentage>'; inherits: false; initial-value: 170%; }
@property --ink-feather { syntax: '<percentage>'; inherits: false; initial-value: 42%; }
@property --gx { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@property --gy { syntax: '<percentage>'; inherits: false; initial-value: 30%; }

.illustrated-photo>:is(.photo-glow,.photo-glow-core) {
  position: absolute;
  inset: -24px;
  z-index: 6;
  pointer-events: none;
  filter: url(#ink-bleed) blur(4px);
  -webkit-mask-image: radial-gradient(circle at 0% 100%, #000 calc(var(--ink-reach) - var(--ink-feather)), transparent var(--ink-reach));
          mask-image: radial-gradient(circle at 0% 100%, #000 calc(var(--ink-reach) - var(--ink-feather)), transparent var(--ink-reach));
  transform-origin: 0% 100%;
}

/* The wash: a neon sweep across most of the image with a softened wedge in the corner, plus two
   large irregular blobs whose size, stretch and angle differ per image (--sa, --sb, --ea, --rot). */
.illustrated-photo>.photo-glow {
  mix-blend-mode: screen;
  --glow-opacity: .8;
  opacity: .8;
  background:
    conic-gradient(from calc(198deg + var(--rot, 0deg) * .12) at 0% 100%,
      var(--glow-b) 0deg, color-mix(in srgb, var(--glow-b) 50%, transparent) 24deg, transparent 46deg),
    radial-gradient(var(--sa, 90%) calc(var(--sa, 90%) * var(--ea, .7) + 30%) at calc(var(--gx) * .5) calc(45% + var(--gy) * .45),
      var(--glow-a), color-mix(in srgb, var(--glow-a) 45%, transparent) 38%, transparent 70%),
    radial-gradient(var(--sb, 75%) calc(var(--sb, 75%) * 1.25) at calc(12% + var(--gy) * .35) calc(60% + var(--gx) * .3),
      color-mix(in srgb, var(--glow-b) 80%, transparent), transparent 66%),
    linear-gradient(90deg, color-mix(in srgb, var(--glow-b) 75%, transparent) 0%, color-mix(in srgb, var(--glow-b) 30%, transparent) 40%, transparent 68%);
}

/* The corner pool: close to opaque at the very corner, easing out. */
.illustrated-photo>.photo-glow-core {
  background: radial-gradient(64% 80% at 0% 100%,
    color-mix(in srgb, var(--glow-b) 90%, transparent) 0%,
    color-mix(in srgb, var(--glow-b) 78%, transparent) 12%,
    color-mix(in srgb, var(--glow-b) 60%, transparent) 26%,
    color-mix(in srgb, var(--glow-b) 30%, transparent) 42%,
    color-mix(in srgb, var(--glow-b) 10%, transparent) 58%,
    transparent 72%);
  filter: url(#ink-bleed) blur(6px);
}

/* Arrival: the colour soaks into the photo like dye into cloth. It seeps out of the corner with a very soft edge that
   firms as it spreads, its patches drifting out from the corner into place while the wash turns a few degrees and
   settles, over about three seconds (a card in More Work starts when it scrolls into view). ?dye=v1: the earlier
   quick ink bloom. */
.illustrated-photo>:is(.photo-glow,.photo-glow-core) { animation: none; } /* the colour is simply there on load (?dye=soak: the slow soak) */
.dye-soak .illustrated-photo>:is(.photo-glow,.photo-glow-core) {
  animation: photo-dye-in 3.4s cubic-bezier(.3,.08,.2,1) var(--dye-delay, 0s) backwards;
}
.dye-soak .dye-wait>:is(.photo-glow,.photo-glow-core) { animation-play-state: paused; }
.dye-v1 .illustrated-photo>:is(.photo-glow,.photo-glow-core) { animation: photo-ink-in 1.2s cubic-bezier(.25,.7,.3,1) backwards; }
@keyframes photo-dye-in {
  from { --ink-reach: 0%; --ink-feather: 150%; --gx: 0%; --gy: 90%; opacity: 0; transform: rotate(-8deg) scale(1.08); }
  30%  { opacity: calc(var(--glow-opacity, 1) * .5); }
}
@keyframes photo-ink-in {
  from { --ink-reach: 0%; opacity: 0; }
  30%  { opacity: 1; }
  to   { --ink-reach: 170%; }
}

/* First hover or focus: the ink draws back into the corner and fades. The card then stays clean. */
#featured .feature:is(:hover,:focus-within) .illustrated-photo>:is(.photo-glow,.photo-glow-core),
#more-grid .mini-project:is(:hover,:focus-visible) .illustrated-photo>:is(.photo-glow,.photo-glow-core),
#featured .glow-spent>:is(.photo-glow,.photo-glow-core),
#more-grid .glow-spent>:is(.photo-glow,.photo-glow-core) {
  --ink-reach: 0%;
  opacity: 0;
  animation: photo-ink-out 1.4s linear backwards;
}
/* The ink lets go gently: its edge softens first, then it drifts back into the corner on a long ease, thinning and
   settling slightly smaller as it goes, so the photo surfaces through it rather than being uncovered by a wipe. */
@keyframes photo-ink-out {
  from { --ink-reach: 170%; --ink-feather: 42%; opacity: var(--glow-opacity, 1); transform: scale(1); animation-timing-function: cubic-bezier(.3,0,.2,1); } /* from where it rested: .8 for the wash, 1 for the pool */
  35%  { --ink-feather: 95%; opacity: calc(var(--glow-opacity, 1) * .72); animation-timing-function: cubic-bezier(.25,.1,.15,1); }
  to   { --ink-reach: 0%; --ink-feather: 95%; opacity: 0; transform: scale(.94); }
}

@media (hover:none),(prefers-reduced-motion:reduce) {
  .illustrated-photo>:is(.photo-glow,.photo-glow-core) { animation: none !important; filter: blur(4px); }
}
@media (prefers-reduced-motion:reduce) {
  #featured .glow-spent>:is(.photo-glow,.photo-glow-core),
  #more-grid .glow-spent>:is(.photo-glow,.photo-glow-core) { opacity: 0; }
}

/* Selected Work tiles stay hidden until selected-reveal.js brings each one in (.is-revealed), so none
   paints first and then pops back out. Their colour holds at the corner and blooms in with the tile. */
@media (prefers-reduced-motion:no-preference) {
  #featured .feature:not(.is-revealed) { opacity: 0; }
  #featured .feature:not(.is-revealed) .illustrated-photo>:is(.photo-glow,.photo-glow-core) { animation-play-state: paused; }
}

/* Summary card without a contribution profile: one column. */
#case-content .case-summary.no-profile { grid-template-columns: minmax(0,1fr) !important; }

/* ======================================================================
   Client logo orb
   The logo grid becomes a turning glass globe (logo-orb.js). Clicking a logo brings it to the front.
   ====================================================================== */
.focus-logo-grid.logo-orb {
  display: block;
  position: relative;
  max-width: 980px;
  height: clamp(280px, 26vw, 330px);
  margin: 6px auto 10px;
  padding: 0;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.focus-logo-grid.logo-orb:active { cursor: grabbing; }
.focus-logo-grid.logo-orb .logo-orb-globe { position: absolute; inset: 0; pointer-events: none; }
.focus-logo-grid.logo-orb .focus-logo {
  position: absolute;
  left: 50%; top: 50%;
  width: auto; height: auto;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  will-change: transform, opacity;
  grid-column: auto !important;
}
.focus-logo-grid.logo-orb .focus-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.focus-logo-grid.logo-orb .focus-logo img {
  filter: grayscale(1) brightness(0);
  opacity: .75;
  transition: filter .45s ease, opacity .45s ease;
  pointer-events: none;
}
.focus-logo-grid.logo-orb .focus-logo:is(:hover,.is-selected) img { filter: none; opacity: 1; }
@media (max-width:600px) {
  .focus-logo-grid.logo-orb { height: 250px; }
}

/* Project pages: the summary rows' dividers run all the way to the vertical rule. */
@media (min-width:901px) {
  #case-content .case-summary .case-result { padding-right: 0 !important; }
  #case-content .case-summary .case-result>* { padding-right: 32px !important; }
}

/* ======================================================================
   Experience: timeline and chapter panel
   ====================================================================== */
/* One rail from the first dot; the accent fill ends at the selected chapter (measured in career.js). */
.timeline-track.timeline-horizontal::before {
  left: var(--rail-start, 0px) !important;
  right: 0 !important;
  top: var(--rail-y, 6px) !important;
  height: 2px !important;
  margin-top: -1px;
  background: linear-gradient(to right, #d3d0dc 0, #d3d0dc calc(100% - 90px), transparent) !important;
  border-radius: 2px;
}
.timeline-track.timeline-horizontal::after {
  content: '';
  position: absolute;
  left: var(--rail-start, 0px);
  top: var(--rail-y, 6px);
  height: 2px;
  margin-top: -1px;
  width: var(--rail-fill, 0px);
  background: var(--accent);
  border-radius: 2px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.timeline-track.timeline-horizontal [data-era] { position: relative; z-index: 1; }
.timeline-track.timeline-horizontal [data-era]::before { display: none !important; }
.timeline-track.timeline-horizontal [data-era]::after {
  background: var(--bg) !important;
  border: 2px solid #b6b0c4 !important;
  box-shadow: none !important;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.timeline-track.timeline-horizontal [data-era].is-past::after { background: var(--accent) !important; border-color: var(--accent) !important; }
.timeline-track.timeline-horizontal [data-era][aria-selected="true"]::after {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent) !important;
  transform: scale(1.15);
}
.timeline-track.timeline-horizontal [data-era]:hover::after { transform: scale(1.25); border-color: var(--accent) !important; }
@media (prefers-reduced-motion:reduce) {
  .timeline-track.timeline-horizontal::after, .timeline-track.timeline-horizontal [data-era]::after { transition: none; }
}

/* Chapter counter and round previous / next buttons. */
.career-explorer .timeline-nav {
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 6px 0 22px;
}
.career-explorer .timeline-nav .timeline-count {
  margin-right: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6b6172;
}
.career-explorer .timeline-nav button {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  padding: 0 !important;
  border: 1px solid #cfcad8 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--ink);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.career-explorer .timeline-nav button svg { width: 18px; height: 18px; }
.career-explorer .timeline-nav button:hover:not(:disabled) { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff; }
.career-explorer .timeline-nav button:disabled { opacity: .35; cursor: default; }

/* Chapter panel: an open, ruled two-column layout. */
#career-panel {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
#career-panel .era-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
#career-panel .era-summary {
  display: block !important;
  padding: 32px 40px 34px 0 !important;
  border-right: 1px solid var(--line);
  margin: 0 !important;
}
#career-panel .era-summary .eyebrow { margin: 0 0 12px; }
#career-panel .era-summary h2 {
  margin: 0 0 14px;
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.08;
  letter-spacing: -.03em;
  max-width: 18ch;
}
#career-panel .era-summary>p:not(.eyebrow):not(.era-note) { margin: 0 0 20px; max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--muted); }
#career-panel .era-skills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
#career-panel .era-skills span {
  padding: 6px 12px;
  border: 1px solid #d6d1de;
  border-radius: 999px;
  background: transparent;
  font-size: 13px;
  color: #3b3346;
}
#career-panel .era-note { margin: 22px 0 0; font-size: 13px; line-height: 1.5; color: #7a7284; }
#career-panel .era-work { padding: 26px 0 26px 40px; min-width: 0; }
#career-panel .era-project-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
}
#career-panel .era-project-heading h3 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
#career-panel .era-project-heading span { font-size: 13px; color: #7a7284; }
#career-panel .era-projects { display: block !important; margin: 0 !important; }
#career-panel .era-projects a {
  display: grid !important;
  grid-template-columns: 76px minmax(0,1fr) 36px;
  align-items: center;
  gap: 16px;
  padding: 12px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
#career-panel .era-projects a:first-child { border-top: 0 !important; }
#career-panel .era-projects img {
  width: 76px !important; height: 52px !important;
  object-fit: cover;
  border-radius: 8px;
}
#career-panel .era-projects a>div>span { display: block; font-size: 12px; color: #7a7284; margin-bottom: 2px; }
#career-panel .era-projects h4 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ink); }
#career-panel .era-projects b {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid #d6d1de;
  color: var(--ink);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .3s ease;
}
#career-panel .era-projects b svg { width: 14px; height: 14px; }
#career-panel .era-projects a:hover b { background: var(--ink); color: #fff; border-color: var(--ink); transform: rotate(45deg); }
#career-panel .era-projects a:hover h4 { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width:900px) {
  #career-panel .era-layout { grid-template-columns: minmax(0,1fr); }
  #career-panel .era-summary { padding: 26px 0 !important; border-right: 0; border-bottom: 1px solid var(--line); }
  #career-panel .era-work { padding: 20px 0; }
}

/* ======================================================================
   Project pages: display formats
   The section's layout; the illustrations themselves (scenes in one shared perspective, with their motion) are
   styled in format-art.css.
   ====================================================================== */
#case-content .form-factors { margin-top: 40px; }
#case-content .form-factors-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
#case-content .form-factors-head h2 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
#case-content .form-factors-head span { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--muted); font-variant-numeric: tabular-nums; }
#case-content .form-factors ul {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px;
  margin: 0; padding: 0; list-style: none;
  border-bottom: 1px solid var(--line);
}
#case-content .form-factors li { position: relative; padding: 22px 0; min-width: 0; }
#case-content .form-factors li + li::before { content: ''; position: absolute; left: -24px; top: 0; bottom: 0; border-left: 1px solid var(--line); }
#case-content .form-factors small {
  display: block; margin: 16px 0 4px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
#case-content .form-factors h3 { margin: 0; font-size: 19px; line-height: 1.25; }
.ff-art {
  display: block; width: 100%; height: auto;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfafd, #efebf3);
  box-shadow: inset 0 0 0 1px rgba(34,28,46,.06);
}
.ff-art .ff-floor { fill: none; stroke: rgba(34,28,46,.14); stroke-width: 1; }
.ff-art .ff-glow { fill: rgba(96,110,255,.16); filter: blur(3px); }
.ff-art .ff-screen { fill: #141633; stroke: #221c2e; stroke-width: 1.2; }
.ff-art .ff-body { fill: #2a2438; }
.ff-art .ff-person { fill: #221c2e; }
.ff-art .ff-arm { fill: none; stroke: #221c2e; stroke-width: 5; stroke-linecap: round; }
.ff-art .ff-dim { fill: none; stroke: rgba(34,28,46,.4); stroke-width: 1; }
.ff-art .ff-dim-bg { fill: #f7f5f9; }
.ff-art .ff-dim-text { font: 700 8.5px/1 var(--font-site); letter-spacing: .06em; fill: var(--muted); text-anchor: middle; }
.ff-art .ff-sheen { fill: rgba(255,255,255,.1); }
.ff-art .ff-felt { fill: #d8cbdd; }
.ff-art .ff-board { fill: #fdfcfe; stroke: rgba(34,28,46,.16); stroke-width: .8; }
.ff-art .ff-mark { fill: none; stroke: #a49cb0; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.ff-art .ff-note { fill: rgb(172 43 108 / .5); }
.ff-art .ff-note.alt { fill: rgb(90 210 255 / .45); }
.ff-art .ff-leaf { fill: #6e8f68; }
.ff-art .ff-leaf.alt { fill: #8fad83; }
.ff-art .ff-wood { fill: #dcc39c; }
.ff-art .ff-grain { fill: none; stroke: rgba(120,86,40,.25); stroke-width: .8; }
.ff-art .ff-foot { fill: none; stroke: #221c2e; stroke-width: 2.4; stroke-linecap: round; }
.ff-art .ff-castor { fill: #221c2e; }
.ff-art .ff-dancer { transform-origin: 0 0; }
.ff-art .ff-wave path { fill: none; stroke-width: 1.4; stroke-linecap: round; }
.ff-art .ff-wave path:nth-child(1) { stroke: rgba(120,170,255,.95); }
.ff-art .ff-wave path:nth-child(2) { stroke: rgba(170,120,255,.8); stroke-width: 1; }
.ff-art .ff-wave path:nth-child(3) { stroke: rgba(90,210,255,.6); }
@media (prefers-reduced-motion: no-preference) {
  .ff-art .ff-wave { animation: ff-drift 9s linear infinite; }
  .ff-art .ff-wave path:nth-child(2) { animation: ff-drift 13s linear infinite reverse; }
  .ff-art .ff-dancer { animation: ff-dance 7.2s cubic-bezier(.45,0,.55,1) infinite; animation-delay: calc(var(--k) * -2.4s); }
}
@keyframes ff-drift { to { transform: translateX(var(--shift)); } }
@keyframes ff-dance { 50% { transform: translateX(var(--glide)) scaleX(var(--turn)) skewY(var(--tilt)); } }
@media (max-width:900px) {
  #case-content .form-factors ul { grid-template-columns: 1fr; }
  #case-content .form-factors li { padding: 20px 0; }
  #case-content .form-factors li + li::before { display: none; }
  #case-content .form-factors li + li { border-top: 1px solid var(--line); }
  .ff-art { max-width: 420px; }
}

/* More Work heading: title on the left, grid / list toggle on the right, at every width. */
#more>.section-heading { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
#more .more-toolbar .more-view-toggle { flex: none; margin: 0; }

/* Experience controls: previous / next sit at the end of the chapter rail instead of on their own row.
   The chapter counter stays for screen readers; the highlighted chapter already shows it on screen. */
.career-explorer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "rail nav" "panel panel";
  column-gap: 20px;
}
.career-explorer > #timeline { grid-area: rail; min-width: 0; }
.career-explorer > #career-panel { grid-area: panel; }
.career-explorer .timeline-nav { grid-area: nav; align-self: start; margin: 0 !important; padding: 0 !important; margin-top: var(--nav-y, 18px) !important; }
.career-explorer .timeline-nav .timeline-count {
  position: absolute !important; width: 1px; height: 1px; margin: -1px !important; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.career-explorer .timeline-nav button { width: 38px; height: 38px; }
.career-explorer > #timeline { padding-bottom: 8px !important; }
@media (max-width:700px) {
  .career-explorer { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rail" "nav" "panel"; }
  .career-explorer .timeline-nav { justify-self: end; margin: 4px 0 12px !important; }
}

/* Chapter buttons read clearly over the mountain. */
.career-explorer .timeline-nav button { background: rgb(246 243 247 / .78) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.career-explorer .timeline-nav button:disabled { opacity: .55; }

/* The filter buttons already carry their counts; the result count stays for screen readers only. */
#more-count { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 !important; }

/* ======================================================================
   Card arrows: micro-animations
   On hover the arrow slips out the way it points and returns from behind (it's a way through), the
   circle sends out a single soft ring, and a press squeezes it. Runs once per hover, never loops.
   ====================================================================== */
@keyframes arrow-pass {
  0%   { translate: 0 0; opacity: 1; }
  38%  { translate: var(--pass, 18px) calc(-1 * var(--pass, 18px)); opacity: 0; }
  39%  { translate: calc(-1 * var(--pass, 18px)) var(--pass, 18px); opacity: 0; }
  100% { translate: 0 0; opacity: 1; }
}
@keyframes arrow-ring {
  0%   { box-shadow: 0 0 0 0 rgb(172 43 108 / .6); }
  100% { box-shadow: 0 0 0 12px rgb(172 43 108 / 0); }
}
@media (prefers-reduced-motion: no-preference) {
  /* More Work, grid and cover flow: the arrow itself is the round badge */
  #more-grid:not(.is-list) .mini-project:is(:hover,:focus-visible) .mini-open svg { animation: arrow-ring .9s cubic-bezier(.22,1,.36,1) .12s both; }
  #more-grid:not(.is-list) .mini-project:is(:hover,:focus-visible) .mini-open svg path { animation: arrow-pass .6s cubic-bezier(.55,0,.25,1) .14s both; }
  /* More Work, list: the ring sits on the outer circle */
  #more-grid.is-list .mini-project:is(:hover,:focus-visible) .mini-open { animation: arrow-ring .9s cubic-bezier(.22,1,.36,1) .05s both; }
  #more-grid.is-list .mini-project:is(:hover,:focus-visible) .mini-open svg path { animation: arrow-pass .6s cubic-bezier(.55,0,.25,1) .08s both; }
  /* Selected Work: View project */
  #featured .feature:is(:hover,:focus-visible) .feature-action svg path { --pass: 15px; animation: arrow-pass .6s cubic-bezier(.55,0,.25,1) .1s both; }
  #featured .feature:is(:hover,:focus-visible) .role>.feature-action { animation: arrow-ring .9s cubic-bezier(.22,1,.36,1) .05s both; }
}
#more-grid .mini-open svg, #more-grid.is-list .mini-open, #featured .feature-action { transition-property: background, background-color, color, border-color, transform, rotate, scale !important; }
#more-grid .mini-project:active .mini-open svg,
#more-grid.is-list .mini-project:active .mini-open,
#featured .feature:active .feature-action { scale: .9; transition-duration: .12s !important; }

/* A tighter hero so the chapter rail follows the intro closely. */
#experience.career-hero-landscape { padding-bottom: 12px !important; min-height: 350px !important; }

/* More Work: the six Selected Work projects wear a small frosted chip on their image. */
.mini-photo .mini-flag {
  position: absolute; top: 10px; left: 10px; z-index: 9;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  background: rgb(255 255 255 / .72);
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .6) inset, 0 4px 12px -4px rgb(34 28 46 / .35);
  color: var(--ink);
  font: 700 10.5px/1.2 var(--font-site); letter-spacing: .09em; text-transform: uppercase;
  pointer-events: none;
}
.mini-photo .mini-flag svg { width: 10px; height: 10px; fill: var(--accent); }
#more-grid.is-list .mini-photo .mini-flag { top: 7px; left: 7px; padding: 3px 7px 3px 6px; font-size: 9.5px; }

/* Cover flow stays at a steady frame rate: the colour washes hold still here (their animated
   turbulence filter would repaint every card on every frame of a move). */
 .photo-glow-core) { filter: blur(4px) !important; animation-name: none !important; }

/* ======================================================================
   More Work cards (grid and cover flow): one type scale, and the Selected Work "View project" pill
   ====================================================================== */
#more-grid:not(.is-list) .mini-meta { font-size: 13px !important; line-height: 1.3 !important; letter-spacing: .01em !important; }
#more-grid:not(.is-list) .mini-meta span:first-child { font-weight: 700 !important; color: var(--ink) !important; }
#more-grid:not(.is-list) .mini-meta span + span { font-weight: 600 !important; color: var(--muted) !important; }
#more-grid:not(.is-list) .mini-body h3 { font-size: 22px !important; line-height: 1.18 !important; letter-spacing: -.015em !important; font-weight: 800 !important; }
#more-grid:not(.is-list) .mini-body>p { font-size: 15px !important; line-height: 1.5 !important; color: var(--muted) !important; }
#more-grid:not(.is-list) .mini-tags .tag-copy small { font-size: 11.5px !important; font-weight: 500 !important; color: var(--muted) !important; letter-spacing: .01em !important; }
#more-grid:not(.is-list) .mini-tags .tag-copy>span { font-size: 14px !important; font-weight: 600 !important; color: var(--ink) !important; }

#more-grid:not(.is-list) .mini-card-footer .mini-open {
  display: inline-flex !important; align-items: center; gap: 6px;
  align-self: flex-end; margin-left: auto;
  width: auto !important; min-height: 38px;
  padding: 10px 16px !important;
  border: 1px solid transparent !important; border-radius: 999px !important;
  background: #252b2c !important; color: #fff !important;
  font: 600 14px/1.2 var(--font-site) !important; letter-spacing: 0 !important;
  transition: background-color .25s ease, color .25s ease, scale .15s ease !important;
}
#more-grid:not(.is-list) .mini-card-footer .mini-open>span { display: inline !important; color: inherit !important; font: inherit !important; }
#more-grid:not(.is-list) .mini-card-footer .mini-open svg,
#more-grid:not(.is-list) .mini-project:is(:hover,:focus-visible) .mini-card-footer .mini-open svg {
  width: 17px !important; height: 17px !important; padding: 0 !important; flex: none !important;
  background: none !important; color: currentColor !important; border-radius: 0 !important;
  transform: none !important; rotate: 0deg !important; box-shadow: none !important; animation: none !important;
  fill: none; stroke: currentColor; stroke-width: 1.6;
}
#more-grid:not(.is-list) .mini-project:is(:hover,:focus-visible) .mini-card-footer .mini-open { background: var(--accent) !important; color: #fff !important; }
#more-grid:not(.is-list) .mini-card-footer { border-top: 0 !important; }
@media (prefers-reduced-motion: no-preference) {
  #more-grid:not(.is-list) .mini-project:is(:hover,:focus-visible) .mini-card-footer .mini-open { animation: arrow-ring .9s cubic-bezier(.22,1,.36,1) .05s both; }
  #more-grid:not(.is-list) .mini-project:is(:hover,:focus-visible) .mini-card-footer .mini-open svg path { --pass: 15px; animation: arrow-pass .6s cubic-bezier(.55,0,.25,1) .1s both !important; }
}
 :not(.is-far)) {
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
}

/* ======================================================================
   More Work header: quieter counts, and the view toggle at the filters' height
   ====================================================================== */
.work-filters button { display: inline-flex; align-items: center; gap: 7px; }
.work-filters .filter-count { font-weight: 500; font-variant-numeric: tabular-nums; opacity: .55; }
.work-filters button[aria-pressed=true] .filter-count { opacity: .7; }
#more .more-view-toggle { padding: 2px; }
#more .more-view-toggle button { width: 34px; height: 28px; }

/* The card button: a plain dark pill that reads "View project" (no arrow). */
#more-grid:not(.is-list) .mini-card-footer .mini-open { padding: 11px 20px !important; font-size: 15px !important; font-weight: 700 !important; }
#more-grid:not(.is-list) .mini-card-footer .mini-open svg { display: none !important; }

/* View project: a compact pill that sits with the tags rather than dominating the card. */
#more-grid:not(.is-list) .mini-card-footer .mini-open {
  min-height: 34px !important; padding: 8px 15px !important;
  font-size: 13.5px !important; font-weight: 600 !important;
}

/* Selected: a small ink chip with a sky-blue star, pinned to the image. */
.mini-photo .mini-flag {
  top: 12px; left: 12px; gap: 6px;
  padding: 5px 10px 5px 8px;
  background: rgb(34 28 46 / .82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .12) inset, 0 6px 16px -6px rgb(20 14 30 / .5);
  color: #fff;
  font-size: 10px; letter-spacing: .12em;
}
.mini-photo .mini-flag svg { width: 10px; height: 10px; fill: #9ec5ff; }

/* ======================================================================
   Client logos: two gliding rows (logo-orb.js)
   ====================================================================== */
.focus-logo-grid.logo-belt {
  display: flex !important; flex-direction: column; gap: 22px;
  height: auto !important; max-width: none; padding: 18px 0 !important;
  cursor: grab; user-select: none; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.focus-logo-grid.logo-belt:active { cursor: grabbing; }
.logo-belt .logo-row { overflow: hidden; padding: 10px 0; }
.logo-belt .logo-track { display: flex; align-items: center; gap: 72px; width: max-content; will-change: transform; }
.focus-logo-grid.logo-belt .focus-logo {
  position: static !important; flex: none;
  padding: 6px 4px !important; will-change: transform, opacity; cursor: pointer;
}
.focus-logo-grid.logo-belt .focus-logo img { filter: grayscale(1) brightness(0); opacity: .7; transition: filter .5s ease, opacity .5s ease; pointer-events: none; }
.focus-logo-grid.logo-belt .focus-logo:is(.is-focus, :hover) img { filter: none; opacity: 1; }
.focus-logo-grid.logo-belt .focus-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
@media (max-width:600px) { .logo-belt .logo-track { gap: 48px; } }
/* The photo is cropped in by --photo-bleed at rest, so the chip sits a clear 12px inside the visible edge; on hover the
   crop opens to the card and the chip eases out with it to 18px, on the crop's own timing. */
.mini-photo .mini-flag { top: 22px; left: 22px; }
#more-grid:not(.is-list) .mini-photo .mini-flag {
  top: calc(var(--photo-out, 11px) + 12px); left: calc(var(--photo-out, 11px) + 12px);
  transition: top .75s cubic-bezier(.4,0,.2,1), left .75s cubic-bezier(.4,0,.2,1);
}
#more-grid:not(.is-list) .mini-project:is(:hover,:focus-visible) .mini-photo .mini-flag { top: 18px; left: 18px; }
#more-grid.is-list .mini-photo .mini-flag { top: 8px; left: 8px; }

/* Logo rows: logos are sized in script (equal visual weight); colour comes with the dock swell. */
.focus-logo-grid.logo-belt .focus-logo img { filter: grayscale(1) brightness(0) !important; opacity: .62; transition: filter .45s ease, opacity .45s ease; }
.focus-logo-grid.logo-belt .focus-logo:is(.is-lit, :focus-visible) img { filter: none !important; opacity: 1; }
.focus-logo-grid.logo-belt .focus-logo.is-focus img { filter: grayscale(1) brightness(0) !important; }
.logo-belt .logo-track { gap: 84px; }
.logo-belt .logo-row { padding: 18px 0; }
.focus-logo-grid.logo-belt { gap: 6px; }

/* ---------- Carousel: ambient colour, parallax, arrival and sheen ---------- */
#more.more-section { position: relative; }
#more-grid{ position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
   h3, .mini-body>p, .mini-tags, .mini-open) { animation: flow-rise .6s cubic-bezier(.22,1,.36,1) both; }
}

/* Card footer: a horizontal rule meets the foot of the tags' vertical divider, anchoring View project. */
#more-grid:not(.is-list) .mini-card-footer .mini-tags::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -18px; height: 1px;
  background: rgb(214 211 228); pointer-events: none;
}
#more-grid:not(.is-list) .mini-card-footer .mini-open { margin-top: 22px; } /* the same 17px from the rule as from the card's foot and side */
#more-grid.is-list .mini-tags::before { display: none !important; }

/* View project hover: accent fill, white text (the arrow/text inherit it). */
#more-grid:not(.is-list) .mini-project:is(:hover,:focus-visible) .mini-card-footer .mini-open { color: #fff !important; }
#featured .feature:is(:hover,:focus-visible) .role>.feature-action svg { color: #fff !important; }

/* Selected: a light, quiet frosted chip; ink text in sentence case, accent star. */
.mini-photo .mini-flag {
  gap: 5px; padding: 4px 10px 4px 8px;
  background: rgb(255 255 255 / .86);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 0 0 1px rgb(34 28 46 / .06), 0 4px 12px -6px rgb(34 28 46 / .35);
  color: var(--ink);
  font: 700 12px/1.3 var(--font-site); letter-spacing: .01em; text-transform: none;
}
.mini-photo .mini-flag svg { width: 11px; height: 11px; fill: var(--accent); }
#featured .feature:is(:hover,:focus-visible) .role>.feature-action,
#featured .feature .role>.feature-action:hover { color: #fff !important; }

/* ======================================================================
   Client logos: a ruled grid on a tilted plane (logo-orb.js)
   ====================================================================== */
.focus-logo-grid.logo-depth {
  display: block !important; height: auto !important; max-width: 1040px; margin: 10px auto 18px !important;
  padding: 26px 0 40px !important;
  perspective: 1100px; perspective-origin: 50% 20%;
}
.logo-depth .logo-plane {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  transform-style: preserve-3d; transform: rotateX(24deg);
  will-change: transform;
  -webkit-mask-image: radial-gradient(75% 110% at 50% 45%, #000 60%, transparent 100%);
          mask-image: radial-gradient(75% 110% at 50% 45%, #000 60%, transparent 100%);
}
.focus-logo-grid.logo-depth .logo-plane .focus-logo {
  position: relative; display: grid; place-items: center;
  height: 92px; padding: 0 10px !important; margin: 0 !important;
  grid-column: auto !important;
  border-right: 1px solid rgb(34 28 46 / .1); border-bottom: 1px solid rgb(34 28 46 / .1);
  transform-style: preserve-3d; cursor: default;
  background: none !important; box-shadow: none !important;
}
.logo-depth .logo-plane .focus-logo:nth-child(8n) { border-right: 0; }
.logo-depth .logo-plane .focus-logo:nth-last-child(-n+8) { border-bottom: 0; }
.logo-depth .logo-plane .focus-logo img {
  width: auto !important; max-width: 100% !important; max-height: none !important;
  filter: grayscale(1) brightness(0) !important; opacity: .58;
  transform: translateZ(var(--z, 20px));
  transition: filter .25s ease, opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
/* A soft contact shadow under each logo gives the depth something to read against. */
.logo-depth .logo-plane .focus-logo::after {
  content: ''; position: absolute; left: 30%; right: 30%; bottom: 22px; height: 8px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(34 28 46 / .14), transparent);
  transform: translateZ(0); opacity: .7; transition: opacity .45s ease, transform .55s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.logo-depth .logo-plane .focus-logo:hover img { filter: none !important; opacity: 1; transform: translateZ(calc(var(--z, 20px) + 60px)) scale(1.12); }
.logo-depth .logo-plane .focus-logo:hover::after { opacity: 1; transform: scale(1.5); }
@media (prefers-reduced-motion: no-preference) {
  .logo-depth .logo-plane .focus-logo img { animation: logo-bob 5s ease-in-out var(--bob, 0s) infinite alternate; }
  .logo-depth .logo-plane .focus-logo:hover img { animation-play-state: paused; }
}
@keyframes logo-bob { from { translate: 0 -3px; } to { translate: 0 3px; } }
@media (max-width:760px) {
  .logo-depth .logo-plane { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .logo-depth .logo-plane .focus-logo { height: 76px; border-right: 1px solid rgb(34 28 46 / .1) !important; border-bottom: 1px solid rgb(34 28 46 / .1) !important; }
  .logo-depth .logo-plane .focus-logo:nth-child(4n) { border-right: 0 !important; }
  .logo-depth .logo-plane .focus-logo:nth-last-child(-n+4) { border-bottom: 0 !important; }
}

/* ======================================================================
   More Work: carousel view, a cinematic spotlight (home.js)
   ====================================================================== */
#more-grid.is-flow { display: none !important; }

/* ---------- Logo plane: entrance, spotlight, industries ---------- */
/* Entrance: logos drop into their cells row by row. */
.logo-depth:not(.is-in) .logo-plane .focus-logo { opacity: 0; }
@keyframes logo-drop { from { opacity: 0; transform: translateZ(140px); } to { opacity: 1; transform: translateZ(0); } }
@media (prefers-reduced-motion: no-preference) {
  .logo-depth.is-in .logo-plane .focus-logo { animation: logo-drop 1.2s cubic-bezier(.22,1,.36,1) calc(.15s + var(--d, 0s)) both; }
}
/* Spotlight: a soft light under the cursor; nearby rules and logos come up. */
.logo-plane .logo-light {
  position: absolute; inset: -10%; pointer-events: none; z-index: 0;
  background: radial-gradient(260px circle at var(--lx, 50%) var(--ly, 50%), rgb(255 255 255 / .95), rgb(255 255 255 / 0) 70%);
  opacity: 0; transition: opacity .5s ease;
}
.logo-depth.is-lit .logo-plane .logo-light { opacity: 1; }
.logo-depth .logo-plane { position: relative; }
.logo-depth .logo-plane .focus-logo { z-index: 1; }
.logo-depth.is-lit .logo-plane .focus-logo {
  border-color: rgb(34 28 46 / calc(.06 + var(--near, 0) * .22)) !important;
}
.logo-depth.is-lit .logo-plane .focus-logo img { opacity: calc(.34 + var(--near, 0) * .55); }
.logo-depth.is-lit .logo-plane .focus-logo:hover img { opacity: 1; }
/* Industries: the heading word lifts its logos in colour and dims the rest. */
#focus-title [data-industry] { font-style: normal; cursor: pointer; border-radius: 6px; transition: color .3s ease, opacity .3s ease; outline-offset: 4px; }
#focus-title:has(.is-active) [data-industry]:not(.is-active) { opacity: .35; }
#focus-title [data-industry].is-active { color: var(--accent); }
.logo-depth[data-focus] .logo-plane .focus-logo img { opacity: .14 !important; }
.logo-depth[data-focus] .logo-plane .focus-logo.is-match img { opacity: 1 !important; filter: none !important; transform: translateZ(calc(var(--z, 20px) + 50px)) scale(1.1); }
.logo-depth[data-focus] .logo-plane .focus-logo.is-match::after { opacity: 1; transform: scale(1.5); }

/* Secondary industries: a smaller line under the headline; each word lights its logos too. */
.focus-more { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: 15px; font-weight: 600; color: var(--muted); }
.focus-more small { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9a93a3; }
.focus-more i + i::before { content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--accent); opacity: .6; margin: 0 18px 0 0; vertical-align: middle; position: relative; left: -9px; margin-right: -3px; }
.focus-heading [data-industry] { font-style: normal; cursor: pointer; border-radius: 6px; transition: color .3s ease, opacity .3s ease; outline-offset: 4px; }
.focus-heading:has(.is-active) [data-industry]:not(.is-active) { opacity: .35; }
.focus-heading [data-industry].is-active { color: var(--accent); opacity: 1; }
/* Logo plane: 4 × 4, a square floor that reads deeper in perspective. */
.focus-logo-grid.logo-depth { max-width: 820px; padding-top: 20px !important; }
.logo-depth .logo-plane { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; transform-origin: 50% 60%; }
.logo-depth .logo-plane .focus-logo { height: 86px; border-right: 1px solid rgb(34 28 46 / .1) !important; border-bottom: 1px solid rgb(34 28 46 / .1) !important; }
.logo-depth .logo-plane .focus-logo:nth-child(4n) { border-right: 0 !important; }
.logo-depth .logo-plane .focus-logo:nth-last-child(-n+5):not(.logo-light) { border-bottom: 0 !important; }
.logo-depth.is-lit .logo-plane .focus-logo { border-color: rgb(34 28 46 / calc(.06 + var(--near, 0) * .22)) !important; }
.logo-depth.is-lit .logo-plane .focus-logo:nth-child(4n) { border-right-color: transparent !important; }
.logo-depth.is-lit .logo-plane .focus-logo:nth-last-child(-n+5) { border-bottom-color: transparent !important; }
@media (max-width:760px) { .logo-depth .logo-plane .focus-logo { height: 72px; } }

/* ---------- Logo plane: staggered brick courses and real shadows ---------- */
.focus-logo-grid.logo-depth { max-width: 980px; }
.logo-depth .logo-plane { display: flex !important; flex-direction: column; align-items: stretch; }
.logo-depth .logo-course { display: flex; justify-content: center; border-top: 1px solid rgb(34 28 46 / .1); transform-style: preserve-3d; }
.logo-depth .logo-course:first-child { border-top: 0; }
.focus-logo-grid.logo-depth .logo-course .focus-logo {
  flex: 0 0 calc(100% / var(--cols, 6)); height: 96px;
  border: 0 !important; border-left: 1px solid rgb(34 28 46 / .1) !important;
}
.logo-depth .logo-course .focus-logo:first-child { border-left: 0 !important; }
.logo-depth.is-lit .logo-course .focus-logo { border-left-color: rgb(34 28 46 / calc(.06 + var(--near, 0) * .22)) !important; }
.logo-depth.is-lit .logo-course .focus-logo:first-child { border-left-color: transparent !important; }
/* The old oval shadows go; each logo casts its own shape onto the plane. */
.logo-depth .logo-plane .focus-logo::after { display: none !important; }
.logo-depth .logo-plane .focus-logo { display: grid !important; place-items: center; }
.logo-depth .logo-plane .focus-logo > img { grid-area: 1 / 1; }
.logo-depth .logo-plane .focus-logo img.logo-shade {
  filter: brightness(0) blur(calc(1px + var(--z, 20px) / 14)) !important;
  opacity: .1 !important; animation: none !important;
  transform: translate3d(calc(var(--z, 20px) * .12), calc(var(--z, 20px) * .45), 0);
  transition: filter .25s ease, opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1) !important;
}
.logo-depth .logo-plane .focus-logo:hover img.logo-shade,
.logo-depth[data-focus] .logo-plane .focus-logo.is-match img.logo-shade {
  filter: brightness(0) blur(7px) !important; opacity: .13 !important;
  transform: translate3d(calc((var(--z, 20px) + 60px) * .12), calc((var(--z, 20px) + 60px) * .45), 0) scale(1.08);
}
.logo-depth[data-focus] .logo-plane .focus-logo:not(.is-match) img.logo-shade { opacity: .03 !important; }
@media (max-width:760px) { .focus-logo-grid.logo-depth .logo-course .focus-logo { height: 78px; } }
/* All industries in the headline: two balanced lines; no dot at the start of a wrapped line. */
.focus-heading #focus-title { max-width: 900px; margin-inline: auto; font-size: clamp(1.2rem, 1.9vw, 1.55rem); gap: 8px 20px; }
.focus-heading #focus-title span { gap: 20px; }
.focus-heading #focus-title span.is-line-start::before { display: none; }
.focus-logo-grid.logo-depth { max-width: 1080px; }
.focus-logo-grid.logo-depth .logo-course .focus-logo { height: 104px; }
/* Industries headline: two even lines of four, with a small count per industry. */
.focus-heading #focus-title { max-width: none; font-size: clamp(1rem, 1.25vw, 1.15rem); font-weight: 700; letter-spacing: -.01em; gap: 6px 16px; }
/* "Industries of focus" is the section's headline, sized like More Work's; the industries sit under it as a smaller line. */
.focus-heading .focus-headline { margin: 0 0 14px; font-size: clamp(25px,2.7vw,34px); line-height: 1.15; }
.focus-heading #focus-title span { gap: 18px; }
.focus-heading #focus-title span::before { width: 3px; height: 3px; opacity: .5; }
.focus-heading #focus-title .focus-break { flex-basis: 100%; height: 0; }
.focus-heading #focus-title .is-line-start::before { display: none; }
.focus-heading #focus-title [data-industry] { position: relative; padding: 2px 4px; }
.focus-heading #focus-title sup {
  margin-left: 3px; font-size: .5em; font-weight: 700; letter-spacing: 0; vertical-align: .9em;
  color: var(--accent); opacity: .7; font-variant-numeric: tabular-nums;
}
/* A hairline draws under the active industry. */
.focus-heading #focus-title [data-industry]::after {
  content: ''; position: absolute; left: 4px; right: 4px; bottom: -2px; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.focus-heading #focus-title [data-industry]:is(:hover, .is-active)::after { transform: scaleX(1); }
@media (max-width:760px) { .focus-heading #focus-title .focus-break { display: none; } }

/* Logo plane: an even grid of wide rectangular cells; the spotlight lives on the plane's surface. */
.focus-logo-grid.logo-depth { max-width: 1000px; }
.logo-depth .logo-plane {
  -webkit-mask-image: none !important; mask-image: none !important;
  background: radial-gradient(300px circle at var(--lx, 50%) var(--ly, 50%), rgb(255 255 255 / var(--glow, 0)), rgb(255 255 255 / 0) 70%);
  transition: --glow .5s ease;
}
.logo-depth.is-lit .logo-plane { --glow: .9; }
.logo-plane .logo-light { display: none !important; }
.focus-logo-grid.logo-depth .logo-course .focus-logo { flex: 1 1 0 !important; height: 92px; }
@media (max-width:760px) { .focus-logo-grid.logo-depth .logo-course .focus-logo { height: 64px; padding: 0 6px !important; } }
@property --glow { syntax: '<number>'; inherits: true; initial-value: 0; }
.logo-depth .logo-plane { width: 100% !important; }
.logo-depth .logo-course { width: 100%; }

/* ======================================================================
   Client logos: a concave curved wall (logo-orb.js positions every cell)
   ====================================================================== */
.focus-logo-grid.logo-wall { max-width: 1180px; perspective: 1400px; perspective-origin: 50% 40%; padding: 40px 0 56px !important; }
.logo-wall .logo-plane {
  display: block !important; position: relative; width: 100% !important;
  transform-style: preserve-3d; background: none !important;
}
.focus-logo-grid.logo-wall .logo-plane .focus-logo {
  position: absolute !important; left: 50%; top: 50%; flex: none !important;
  padding: 0 8px !important; pointer-events: none;
  border: 0 !important; border-right: 1px solid rgb(34 28 46 / .1) !important; border-bottom: 1px solid rgb(34 28 46 / .1) !important;
  background: rgb(255 255 255 / min(1, calc(var(--near, 0) * .55 + .12 + var(--solid, 0) * .88))) !important;
  box-shadow: inset calc(var(--edge, 0) * 0px) 0 0 transparent;
  backface-visibility: hidden;
  transition: background-color .25s ease;
}
/* The ends of the curve sit slightly in shade, which sells the bend. */
.focus-logo-grid.logo-wall .logo-plane .focus-logo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: rgb(34 28 46 / calc(var(--edge, 0) * var(--edge, 0) * .06));
}
.focus-logo-grid.logo-wall .logo-plane .focus-logo.is-col-first { border-left: 1px solid rgb(34 28 46 / .1) !important; }
.focus-logo-grid.logo-wall .logo-plane .focus-logo.is-row-last { border-bottom-color: rgb(34 28 46 / .1) !important; }
.logo-wall .logo-plane .focus-logo:first-child, .logo-wall .logo-plane .focus-logo:nth-child(-n+8) { border-top: 1px solid rgb(34 28 46 / .1) !important; }
@media (max-width: 700px) { .logo-wall .logo-plane .focus-logo:nth-child(n+5):nth-child(-n+8) { border-top: 0 !important; } }
/* Entrance: empty cells fade up out of a soft blur, outward from the centre (logo-orb.js moves them
   and resolves each logo afterwards via --reveal; `backwards` so the filter lets go once they land). */
.logo-wall.is-in .logo-plane .focus-logo { animation: logo-fade .9s cubic-bezier(.25,1,.5,1) var(--d, 0s) backwards !important; }
@keyframes logo-fade { from { opacity: 0; filter: blur(6px); } 60% { filter: blur(0); } to { opacity: 1; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .logo-wall.is-in .logo-plane .focus-logo { animation: none !important; } }
/* Extrusion blocks (logo-orb.js): side faces spanning from the wall (0) out to the raised cell (--ex px). Faces are
   60px long and scaled; each faces outward and hides its back, so nothing shows through a raised face. Lit from the
   upper left, darkest where they meet the wall. */
.logo-wall .cell-blocks { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.logo-wall .cell-block { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; visibility: hidden; }
.logo-wall .cell-block i { position: absolute; left: 0; top: 0; backface-visibility: hidden; }
.logo-wall .cell-block :is(.f-l, .f-r) { width: 60px; height: 100%; }
.logo-wall .cell-block :is(.f-t, .f-b) { width: 100%; height: 60px; }
.logo-wall .cell-block .f-l { transform-origin: 0 50%; transform: rotateY(-90deg) scaleX(calc(var(--ex, 0) / 60)); background: linear-gradient(to right, #e1dde6, #f2f0f5); }
.logo-wall .cell-block .f-r { left: calc(100% - 60px); transform-origin: 100% 50%; transform: rotateY(90deg) scaleX(calc(var(--ex, 0) / 60)); background: linear-gradient(to left, #d1ccd8, #e2dfe7); }
.logo-wall .cell-block .f-t { transform-origin: 50% 0; transform: rotateX(90deg) scaleY(calc(var(--ex, 0) / 60)); background: linear-gradient(to bottom, #e9e6ee, #faf9fb); }
.logo-wall .cell-block .f-b { top: calc(100% - 60px); transform-origin: 50% 100%; transform: rotateX(-90deg) scaleY(calc(var(--ex, 0) / 60)); background: linear-gradient(to top, #cac5d2, #dbd7e1); }
/* A raised cell casts a soft shadow down and to the right, further and softer the higher it stands; it sits just
   in front of the wall (never in front of the cell's own face) so it lands on the neighbouring tiles too. */
.logo-wall .cell-block.is-raised::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: rgb(34 28 46 / .18); filter: blur(calc(3px + var(--ex, 0) * .35px));
  transform: translate3d(calc(var(--ex, 0) * .3px), calc(var(--ex, 0) * .6px), calc(min(2, var(--ex, 0) * .5) * 1px)) scale(.95);
  opacity: clamp(0, calc(var(--ex, 0) / 16), 1);
}
/* Every bottom-row cell keeps its bottom rule (an older grid rule stripped the last five). */
.focus-logo-grid.logo-wall .logo-plane .focus-logo.is-row-last:not(.logo-light) { border-bottom: 1px solid rgb(34 28 46 / .1) !important; }
/* Until logo-orb.js builds the wall, keep the flat fallback grid from flashing. */
@media (scripting: enabled) { .focus-logo-grid:not(.logo-wall) { opacity: 0; } }
/* Hover and industry focus (classes set in script). */
.logo-wall .logo-plane .focus-logo img:not(.logo-shade) { opacity: calc(.4 + var(--near, 0) * .4) !important; }
.logo-wall .logo-plane .focus-logo:is(.is-hover, .is-match) img:not(.logo-shade) {
  filter: none !important; opacity: 1 !important; transform: translateZ(calc(var(--z, 20px) + 50px)) scale(1.12);
}
/* A raised face carries its logo printed flat on it, without the floating shadow. */
.logo-wall .logo-plane .focus-logo:is(.is-hover, .is-match) img.logo-shade { opacity: 0 !important; }
.logo-wall[data-focus] .logo-plane .focus-logo:not(.is-match) img:not(.logo-shade) { opacity: .14 !important; }
/* Industry words: no underline or pointer (they're a highlight, not a link). */
.focus-heading #focus-title [data-industry]::after { display: none !important; }
.focus-heading [data-industry] { cursor: default !important; }
/* The curve's ends rise as they come toward you, so the wall sits 24px lower in its box (the camera with it, so the
   view is unchanged) to keep them inside the side fades' mask. */
.focus-logo-grid.logo-wall { padding-top: 88px !important; padding-bottom: 32px !important; perspective-origin: 50% calc(40% + 24px); }

/* ======================================================================
   More Work: carousel view, an image-forward cover flow (home.js)
   ====================================================================== */
#more-grid.is-flow { display: none !important; }
.flow-stage { display: none; outline: none; }
#more-grid.is-switching, #more-grid.is-switching *, #more-grid.is-switching *::before, #more-grid.is-switching *::after { transition: none !important; } /* home.js: layout changes land at once */
#more-grid.is-flow + .flow-stage { display: block; margin: 40px 0 16px; } /* the carousel's tilted side cards need room below the filter row */
.cf-track {
  position: relative; height: clamp(360px, 40vw, 520px); margin-bottom: 72px;
  perspective: 1600px; perspective-origin: 50% 45%;
  touch-action: pan-y; user-select: none; cursor: grab;
}
.cf-track.is-dragging { cursor: grabbing; }
.cf-card {
  position: absolute; left: 50%; top: 0; width: min(760px, 64%); height: 100%; margin-left: calc(min(760px, 64%) / -2);
  border-radius: 22px; overflow: hidden; background: #1d1826; cursor: pointer;
  will-change: transform; backface-visibility: hidden;
  box-shadow: 0 30px 60px -34px rgb(34 28 46 / .55);
  -webkit-box-reflect: below 10px linear-gradient(transparent 72%, rgb(255 255 255 / .16));
}
.cf-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* Side cards dim toward the back; the centre card carries a scrim for its details. */
.cf-card::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgb(22 18 32 / calc((1 - var(--focus, 0)) * .45)); pointer-events: none; }
.cf-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--focus, 0);
  background: linear-gradient(0deg, rgb(18 14 26 / .88) 0%, rgb(18 14 26 / .55) 38%, rgb(18 14 26 / 0) 68%);
}
.cf-info {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: clamp(20px, 3vw, 36px);
  color: #fff; opacity: var(--focus, 0); transform: translateY(calc((1 - var(--focus, 0)) * 14px));
}
.cf-eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: rgb(255 255 255 / .75); }
.cf-eyebrow span:first-child { color: #fff; font-weight: 700; }
.cf-eyebrow span + span::before { content: '·'; margin-right: 10px; color: rgb(255 255 255 / .45); }
.cf-eyebrow em { font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgb(255 255 255 / .16); }
.cf-info h3 { margin: 8px 0 6px; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.025em; font-weight: 800; color: #fff; }
.cf-info p { margin: 0 0 16px; max-width: 52ch; font-size: 15px; line-height: 1.5; color: rgb(255 255 255 / .8); }
.cf-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .18); }
.cf-foot span { font-size: 13px; font-weight: 600; color: rgb(255 255 255 / .72); }
.cf-open {
  flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 8px 16px; border-radius: 999px;
  background: #fff; color: var(--ink); font-size: 13.5px; font-weight: 700; text-decoration: none;
  transition: background-color .25s ease, color .25s ease, scale .15s ease;
}
.cf-open:hover, .cf-open:focus-visible { background: var(--accent); color: #fff; }
.cf-open:active { scale: .95; }
.cf-card.is-center:hover img { scale: 1.06; }
/* Hover parallax (home.js sets --px/--py from the pointer, -1 to 1): the picture drifts a few pixels against the cursor
   and the words a touch with it, for a little depth; the hover scale keeps the picture's edges out of view. */
.cf-card img { translate: calc(var(--px, 0) * -12px) calc(var(--py, 0) * -9px); transition: scale .8s cubic-bezier(.22,1,.36,1), translate .6s cubic-bezier(.22,1,.36,1); }
.flow-stage .cf-card .cf-info { translate: calc(var(--px, 0) * 4px) calc(var(--py, 0) * 3px); transition: translate .6s cubic-bezier(.22,1,.36,1); }
/* Nav: previous, index, next. */
.cf-nav { display: flex; align-items: center; justify-content: center; gap: 18px; }
.cf-nav button {
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid #cfcad8; background: transparent; color: var(--ink);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, scale .15s ease;
}
.cf-nav button svg { width: 18px; height: 18px; }
.cf-nav button:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
.cf-nav button:active:not(:disabled) { scale: .92; }
.cf-nav button:disabled { opacity: .3; cursor: default; }
.cf-index { min-width: 76px; text-align: center; font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.cf-index b { color: var(--ink); font-weight: 800; }
@media (max-width: 700px) {
  .cf-track { height: 440px; margin-bottom: 48px; }
  .cf-card { width: 80%; margin-left: -40%; }
  .cf-info p { display: none; }
}
/* Condensed floor: a short fixed-length reflection, the nav tucked over its faded tail. */
.cf-card { -webkit-box-reflect: below 6px linear-gradient(transparent calc(100% - 44px), rgb(255 255 255 / .1)); }
.cf-track { margin-bottom: 36px; }
.cf-nav { position: relative; }
/* The section closes on the small nav, so the Experience divider comes up to 56px (its own padding below). */
#more:has(#more-grid.is-flow) + .experience-cta { margin-top: 56px; }

/* ---------- Cover flow card design ---------- */
.cf-card { border-radius: 24px; box-shadow: 0 34px 70px -38px rgb(34 28 46 / .6), inset 0 0 0 1px rgb(255 255 255 / .08); }
/* Neon splashes on the cards waiting either side; they clear as a card comes into focus. */
.cf-splash {
  position: absolute; inset: -12%; z-index: 1; pointer-events: none;
  opacity: calc((1 - var(--focus, 0)) * .95); mix-blend-mode: screen; filter: blur(10px);
  background:
    radial-gradient(55% 65% at 10% 94%, hsl(var(--hb) 100% 58% / .95), transparent 70%),
    radial-gradient(70% 60% at 34% 72%, hsl(var(--ha) 100% 62% / .7), transparent 72%),
    linear-gradient(32deg, hsl(var(--ha) 100% 62% / .5), transparent 62%);
}
.cf-card::after { background: linear-gradient(0deg, rgb(16 12 24 / .9) 0%, rgb(16 12 24 / .62) 34%, rgb(16 12 24 / .08) 62%, rgb(16 12 24 / .28) 100%) !important; }
/* Top row: Selected work flag and the dates. */
.cf-top {
  position: absolute; z-index: 2; top: 20px; left: 22px; right: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  opacity: var(--focus, 0); pointer-events: none;
}
.cf-flag, .cf-year {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font-style: normal; font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .01em; font-variant-numeric: tabular-nums;
  background: rgb(255 255 255 / .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16);
}
.cf-flag svg { width: 11px; height: 11px; fill: #ff8ac4; }
/* Details. */
.cf-info { padding: 0 clamp(22px, 2.6vw, 34px) clamp(22px, 2.6vw, 30px) !important; }
.cf-client { display: block; font-size: 13.5px; font-weight: 700; color: rgb(255 255 255 / .78); letter-spacing: .01em; }
.cf-info h3 { margin: 6px 0 8px !important; font-size: clamp(26px, 2.7vw, 36px) !important; line-height: 1.06 !important; }
.cf-info p { margin: 0 0 18px !important; max-width: 50ch; font-size: 15px !important; color: rgb(255 255 255 / .78) !important; }
.cf-foot { display: flex !important; align-items: center; gap: 22px; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / .16); }
.cf-fact { display: flex; align-items: center; gap: 10px; min-width: 0; color: #fff; }
.cf-fact + .cf-fact { padding-left: 22px; border-left: 1px solid rgb(255 255 255 / .18); }
.cf-fact .pill-icon { width: 30px; height: 30px; flex: none; color: rgb(255 255 255 / .9); }
.cf-fact span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.cf-fact small { font-size: 11.5px; font-weight: 500; color: rgb(255 255 255 / .6); }
.cf-open { margin-left: auto; }
@media (max-width: 700px) {
  .cf-foot { flex-wrap: wrap; gap: 14px; }
  .cf-fact .pill-icon { width: 24px; height: 24px; }
  .cf-fact + .cf-fact { padding-left: 14px; }
  .cf-open { margin-left: 0; }
}
@media (max-width: 700px) {
  .cf-foot { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .cf-fact + .cf-fact { padding-left: 14px; }
  .cf-open { grid-column: 1 / -1; justify-self: start; }
  .cf-fact span { white-space: normal; }
}

/* ======================================================================
   Client band: sits on the page surface (no tinted band); the wall's tiles stay faint and its
   ends dissolve into the page, so it reads as part of the page rather than a separate panel.
   ====================================================================== */
main>.industry-focus {
  position: relative;
  padding-top: 72px !important; padding-bottom: 64px !important;
  margin-top: 40px; margin-bottom: 48px;
  background: none;
}
.focus-logo-grid.logo-wall {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}
.focus-logo-grid.logo-wall .logo-plane .focus-logo {
  background: rgb(255 255 255 / min(1, calc(var(--near, 0) * .4 + var(--solid, 0) * .88))) !important;
}
.industry-focus .focus-logo-grid.logo-wall .logo-plane .focus-logo:not(.logo-light) { border-color: rgb(34 28 46 / .06) !important; }
main>.industry-focus::after { display: none !important; }
.industry-focus .confidentiality-note { margin-bottom: 0 !important; }

/* ======================================================================
   Home: Experience call-to-action (the timeline lives on experience.html)
   ====================================================================== */
.experience-cta {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  margin: 72px 0 32px; padding: 56px 0 0; border-top: 1px solid var(--line);
}
.experience-cta .eyebrow { margin: 0 0 14px; } /* the eyebrow belongs to the headline: closer to it than the headline is to its line */
.experience-cta h2 { margin: 0 0 16px; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -.03em; }
.experience-cta h2 em { font-style: normal; color: var(--muted); }
.experience-cta p:not(.eyebrow) { margin: 0; max-width: 46ch; color: var(--muted); font-size: 17px; line-height: 1.55; }
.experience-cta-link {
  display: inline-flex; align-items: center; gap: 12px; flex: none;
  padding: 8px 8px 8px 24px; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 15px; font-weight: 700; text-decoration: none;
  transition: background-color .25s ease, scale .15s ease;
}
.experience-cta-link span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgb(255 255 255 / .14); transition: translate .35s cubic-bezier(.22,1,.36,1); }
.experience-cta-link svg { width: 18px; height: 18px; }
.experience-cta-link:hover, .experience-cta-link:focus-visible { background: var(--accent); }
.experience-cta-link:hover span { translate: 3px 0; }
.experience-cta-link:active { scale: .97; }
/* Experience page: the hero sits under the header like a page opener. */
.experience-page main { padding-top: 12px; }

/* Logo wall: darker neutral logos, kept flat on their faces. */
.logo-wall .logo-plane .focus-logo img:not(.logo-shade) { filter: grayscale(1) brightness(var(--logo-brightness)) !important; opacity: calc((var(--logo-opacity) + var(--near, 0) * .22) * var(--reveal, 1)) !important; }
/* Dark theme: the monotone logos print light instead of dark, so they read on the night background; raised or
   matched ones go full white rather than back to their own (often dark) colours. */
html[data-variant=nocturne] .logo-wall .logo-plane .focus-logo img:not(.logo-shade) { filter: brightness(0) invert(.94) !important; }
html[data-variant=nocturne] .logo-wall .logo-plane .focus-logo:is(.is-hover, .is-match) img:not(.logo-shade) { filter: brightness(0) invert(1) !important; }
/* ...and the cells themselves are night tiles: a raised or matched face turns deep plum, not white, so its white logo
   shows, and the block's sides shade down from it. */
html[data-variant=nocturne] .industry-focus .focus-logo-grid.logo-wall .logo-plane .focus-logo { background: rgb(38 30 52 / min(1, calc(var(--near, 0) * .4 + var(--solid, 0) * .95))) !important; border-color: rgb(255 255 255 / .05) !important; }
html[data-variant=nocturne] .logo-wall .cell-block .f-l { background: linear-gradient(to right, #1c1626, #261e34); }
html[data-variant=nocturne] .logo-wall .cell-block .f-r { background: linear-gradient(to left, #15101d, #1f1829); }
html[data-variant=nocturne] .logo-wall .cell-block .f-t { background: linear-gradient(to bottom, #2c2340, #352a4a); }
html[data-variant=nocturne] .logo-wall .cell-block .f-b { background: linear-gradient(to top, #120d19, #1b1524); }
/* Dark theme, More work: a hovered card lifts onto a lighter plum face, not the light theme's ivory, so its light type
   stays readable. */
html[data-variant=nocturne] #more-grid .mini-project:is(:hover,:focus-visible)::before { background: #241c31 !important; border-color: rgb(255 255 255 / .14) !important; box-shadow: 0 22px 34px -18px rgb(0 0 0 / .7), 0 7px 14px -8px rgb(0 0 0 / .5) !important; }
/* ...and the Selected chip on its photo goes dark frosted glass with light type, since the ink it used is light here. */
html[data-variant=nocturne] :is(.mini-photo, .flow-stage .cf-card) .mini-flag { background: rgb(15 11 22 / .7); box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 4px 12px -6px rgb(0 0 0 / .5); color: #f1ecf7; }
/* Dark theme, project pages: the pale lavender stages behind the interface screenshots go to a deep plum panel, so the
   screens sit on the night page instead of on bright tiles (the green pair stage is already dark and keeps its colour). */
html[data-variant=nocturne] .interface-screen-stage { background: linear-gradient(145deg, #221b2e, #1a1424) !important; border-color: rgb(255 255 255 / .08) !important; }
html[data-variant=nocturne] :is(#small-detail,#case-content) .interface-study-pair .interface-screen-stage { background: #1d3a2a !important; }
.logo-wall[data-focus] .logo-plane .focus-logo:not(.is-match) img:not(.logo-shade) { opacity: .16 !important; }
.logo-wall .logo-plane .focus-logo { overflow: hidden; }
.logo-wall .logo-plane .focus-logo > img { position: relative; z-index: 1; }
/* Hover (logo-orb.js): a raised face (.is-raised) is opaque from its first frame, with no fade in, so it never passes
   through a see-through state; it fades back only once it's flush. */
.focus-logo-grid.logo-wall .logo-plane .focus-logo.is-raised {
  background-color: #fff !important; background-image: linear-gradient(165deg, rgb(34 28 46 / 0) 45%, rgb(34 28 46 / .035)) !important;
  border-color: transparent !important; box-shadow: inset -1px -1px 0 rgb(34 28 46 / .05) !important; transition: none !important;
}

/* ======================================================================
   Cover flow card, v3: bigger, and built from the same parts as the grid cards
   (meta row, 22px/800 title, 15px summary, project-type and domain pills with their icons).
   ====================================================================== */
.flow-stage .cf-track { height: clamp(460px, 46vw, 620px); }
.flow-stage .cf-card { width: min(920px, 72%); margin-left: calc(min(920px, 72%) / -2); }
/* Legibility: a deeper scrim under the text; a soft shadow on the type itself. */
.flow-stage .cf-card::after { background: linear-gradient(0deg, rgb(14 10 22 / .94) 0%, rgb(14 10 22 / .82) 30%, rgb(14 10 22 / .35) 56%, rgb(14 10 22 / 0) 74%) !important; }
.flow-stage .cf-info { padding: 0 32px 28px !important; text-shadow: 0 1px 12px rgb(0 0 0 / .35); color: #fff !important; }
/* The text always sits on the dark scrim, so it stays light in every style (style sheets colour headings with --ink). */
.flow-stage .cf-info :is(h3, .cf-meta span:first-child) { color: #fff !important; }
.flow-stage .cf-meta { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; line-height: 1.3; letter-spacing: .01em; }
.flow-stage .cf-meta span:first-child { font-weight: 700; color: #fff; }
.flow-stage .cf-meta span + span { font-weight: 600; color: rgb(255 255 255 / .72); }
.flow-stage .cf-info h3 {
  margin: 8px 0 6px !important; font-size: 26px !important; line-height: 1.18 !important; letter-spacing: -.015em !important; font-weight: 800 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none;
}
.flow-stage .cf-info p {
  margin: 0 0 18px !important; max-width: 62ch; font-size: 15px !important; line-height: 1.5 !important; color: rgb(255 255 255 / .82) !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Footer: a hairline across, the tags' divider running down from it, View project beside. */
.flow-stage .cf-foot { display: flex !important; align-items: stretch; gap: 24px; padding: 0 !important; border-top: 1px solid rgb(255 255 255 / .2); }
.flow-stage .cf-tags { display: flex !important; flex: 1 1 auto; min-width: 0; gap: 0 !important; padding: 0 !important; min-height: 0 !important; }
.flow-stage .cf-tags::before, .flow-stage .cf-tags::after { display: none !important; }
.flow-stage .cf-tags > * {
  display: flex !important; align-items: center; gap: 9px; min-width: 0; flex: 0 1 auto;
  margin: 0 !important; padding: 16px 24px 0 0 !important; border: 0 !important; background: none !important; color: #fff !important;
}
.flow-stage .cf-tags > * + * { padding-left: 24px !important; border-left: 1px solid rgb(255 255 255 / .2) !important; }
.flow-stage .cf-tags .tag-material { flex: none; width: 29px; height: 29px; color: #fff !important; background: none !important; box-shadow: none !important; }
.flow-stage .cf-tags .tag-material svg { width: 29px !important; height: 29px !important; color: #fff; }
.flow-stage .cf-tags .tag-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.flow-stage .cf-tags .tag-copy small { font-size: 11.5px !important; font-weight: 500 !important; color: rgb(255 255 255 / .66) !important; letter-spacing: .01em; }
.flow-stage .cf-tags .tag-copy > span { font-size: 14px !important; font-weight: 600 !important; color: #fff !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-stage .cf-open { align-self: flex-end; margin: 16px 0 0 auto; min-height: 34px; padding: 8px 15px; font-size: 13.5px; font-weight: 600; }
/* Selected: the same chip the grid cards wear. */
.flow-stage .cf-card .mini-flag {
  position: static; z-index: 3; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 8px; border-radius: 999px; background: rgb(255 255 255 / .86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--ink); font: 700 12px/1.3 var(--font-site); opacity: var(--focus, 0);
}
.flow-stage .cf-card .mini-flag svg { width: 11px; height: 11px; fill: var(--accent); }
/* Rounded image frames hold their corners in Safari (iPhone above all): a moving, scaled or 3D-turned picture inside a
   rounded box with overflow hidden can lose the box's round corners while it moves. A mask on the frame makes Safari
   clip it to the rounded shape every frame. */
:is(.cf-card, .feature-image, .interface-screen-stage, .impact-photo, .sg-tile, .device-screen) { -webkit-mask-image: -webkit-radial-gradient(white, black); }
@media (max-width: 700px) {
  .flow-stage .cf-track { height: 480px; }
  .flow-stage .cf-card { width: 84%; margin-left: -42%; }
  .flow-stage .cf-info { padding: 0 20px 20px !important; }
  .flow-stage .cf-info h3 { font-size: 22px !important; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .flow-stage .cf-foot { flex-direction: column; gap: 0; }
  /* the Project type and Domain rows stack on one left edge, icons over icons and words over words, with no divider */
  .flow-stage .cf-tags { flex-direction: column; align-items: flex-start; gap: 10px !important; padding-top: 14px !important; }
  .flow-stage .cf-tags > *, .flow-stage .cf-tags > * + * { padding: 0 !important; border-left: 0 !important; }
  .flow-stage .cf-open { align-self: flex-start; margin: 16px 0 0; }
  /* no floor reflection on phones: there the card's foot is the View project button, which showed as a ghost below it */
  .flow-stage .cf-card.is-near { -webkit-box-reflect: unset; }
  /* swiping stays light: the cards drop the corner mask (costly to redraw on every frame of a 3D move) and round their
     own picture layers instead, so the corners still hold */
  .flow-stage .cf-card { -webkit-mask-image: none; }
  .flow-stage .cf-card > :is(img, video, .cf-splash), .flow-stage .cf-card::before, .flow-stage .cf-card::after { border-radius: inherit; }
}

/* More Work sort control. */
.more-sort { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); }
.more-sort select {
  appearance: none; -webkit-appearance: none; height: 34px; padding: 0 32px 0 14px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink); font: 600 13px var(--font-site); cursor: pointer;
}
.more-sort select:hover { border-color: #a9a4b1; }
.more-sort select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.more-sort svg { position: absolute; right: 11px; width: 13px; height: 13px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; pointer-events: none; }
#more .more-toolbar { flex-wrap: nowrap; align-items: flex-start; }
@media (max-width: 760px) { #more .more-toolbar { flex-wrap: wrap; } .more-sort { margin-left: 0; } }
/* Sort and layout toggle share the heading row: sort takes the push to the right, the toggle sits beside it. */
#more .more-toolbar .more-sort { flex: none; }
@media (max-width: 760px) { #more>.section-heading { flex-wrap: wrap; } }

/* ======================================================================
   Experience strata
   Three layers of ground under the hero's mountain, newest at the surface. Each shows its years,
   a headline, one line, and its projects as small stones with a line about each on hover.
   Built by career.js; each layer plays a short entrance when it arrives.
   ====================================================================== */

.experience-page main {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.experience-page main>.career-hero {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 5vw;
  padding-right: 5vw;
}
/* The hero now carries main's old side padding itself, so its landscape no longer needs to reach past it. */
.experience-page main>.career-hero-landscape .career-landscape {
  right: calc((min(1400px,100vw) - 100vw) / 2);
}
@media (max-width:650px) {
  .experience-page main>.career-hero-landscape .career-landscape {
    left: 0;
    right: 0;
  }
}
.experience-page>footer.portfolio-footer {
  margin-top: 0;
}
.strata {
  --ease-soft: cubic-bezier(.22,1,.36,1);
  --ease-bloom: cubic-bezier(.34,1.4,.64,1);
  position: relative;
  z-index: 1;
  margin-top: clamp(36px,4vw,64px);
}

/* Pale topsoil down through deeper, still-light clay; the dark footer below is the bedrock. */
.stratum-1 {
  --layer: #efe8f1;
  --layer-line: #cdbfd5;
  --layer-ink: var(--ink);
  --layer-muted: #5c5367;
  --layer-carve: rgb(80 54 106 / .26);
  --layer-accent: var(--accent);
}
.stratum-2 {
  --layer: #d9cae0;
  --layer-line: #b09cbd;
  --layer-ink: var(--ink);
  --layer-muted: #4a4156;
  --layer-carve: rgb(50 30 70 / .26);
  --layer-accent: #93235b;
}
.stratum-3 {
  --layer: #c6b3d3;
  --layer-line: #a08ab2;
  --layer-ink: var(--ink);
  --layer-muted: #43394f;
  --layer-carve: rgb(40 22 58 / .26);
  --layer-accent: #8a1f55;
}

.stratum {
  position: relative;
  overflow-x: clip;
  padding: clamp(48px,4.5vw,64px) 0 calc(clamp(48px,4.5vw,64px) + clamp(22px,3vw,40px)); /* the same space above and below, plus the depth of the next layer's wavy edge */
  background: var(--layer);
  color: var(--layer-ink);
  scroll-margin-top: 110px;
}
.stratum:last-child {
  padding-bottom: clamp(48px,4.5vw,64px); /* no wavy edge below the last layer, just the footer */
}
.stratum-edge {
  position: absolute;
  left: 0;
  bottom: calc(100% - 1px);
  display: block;
  width: 200%;
  height: clamp(22px,3vw,40px);
  overflow: visible;
  fill: none;
}
.stratum-edge path {
  vector-effect: non-scaling-stroke;
}
.stratum-edge-fill {
  fill: var(--layer);
}
.stratum-edge-line {
  stroke: var(--layer-line);
  stroke-width: 1.5;
}
.stratum-inner {
  display: grid;
  grid-template-columns: minmax(0,5fr) minmax(0,6fr);
  align-items: center;
  gap: clamp(28px,5vw,88px);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 5vw;
}
.stratum-years {
  margin: 0 0 6px -.04em;
  font-size: clamp(2.6rem,4vw,3.8rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.05em;
  white-space: nowrap;
  color: var(--layer-carve);
}
.stratum h2 {
  margin: 0 0 8px;
  font-size: clamp(1.4rem,2.1vw,1.85rem);
  line-height: 1.12;
  color: var(--layer-ink);
}
.stratum h2 .w {
  display: inline-block;
  overflow: clip;
  overflow-clip-margin: .08em;
  vertical-align: top;
}
.stratum h2 .w>span {
  display: inline-block;
}
.stratum-line {
  max-width: 46ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--layer-muted);
}

/* Stones: the projects, spread evenly across the right-hand column (career.js balances the rows). */
.stratum-stones {
  --stone: 60px;
  display: grid;
  grid-template-columns: repeat(var(--cols,auto-fit),minmax(calc(var(--stone) + 16px),1fr));
  justify-items: center;
  row-gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stratum-stones:has(li:only-child) {
  grid-template-columns: calc(var(--stone) + 16px);
  justify-content: center;
}
.stratum-stones a {
  position: relative;
  display: block;
  width: var(--stone);
  height: var(--stone);
  border-radius: 46% 54% 52% 48% / 50% 44% 56% 50%;
  box-shadow: 0 0 0 4px var(--layer), 0 0 0 5px var(--layer-line);
  transform: translate(var(--lx,0px),calc(var(--ly,0px) + var(--lift,0px))) scale(var(--grow,1));
  transition: transform .5s var(--ease-soft), box-shadow .45s var(--ease-soft);
}
.stratum-stones li:nth-child(2n) a {
  border-radius: 55% 45% 48% 52% / 46% 56% 44% 54%;
}
.stratum-stones img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  filter: saturate(.35);
  transition: filter .45s var(--ease-soft), scale 1.6s var(--ease-soft);
}
.stratum-stones a {
  overflow: hidden;
}
/* A soft tint in each project's own tone, with a light catch at the top, over the muted image. */
.stratum-stones a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(165deg,rgb(255 255 255 / .28) 0%,rgb(255 255 255 / 0) 42%),
    linear-gradient(200deg,rgb(80 54 106 / 0) 30%,color-mix(in srgb,var(--tone) 70%,#50366a) 130%);
  opacity: .8;
  transition: opacity .45s var(--ease-soft);
}
.stratum-stones a:hover,
.stratum-stones a:focus-visible {
  z-index: 2;
  --lift: -5px;
  --grow: 1.06;
  box-shadow: 0 0 0 4px var(--layer), 0 0 0 6px var(--layer-accent), 0 14px 24px -14px rgb(20 10 30 / .5);
  outline: none;
}
.stratum-stones a:hover img,
.stratum-stones a:focus-visible img {
  filter: none;
}
.stratum-stones a:hover::after,
.stratum-stones a:focus-visible::after {
  opacity: .2;
}

/* Facet-lit stones (the default; career.js adds .is-facet-lit): the round pebble keeps its shape, with a faint conic
   light across it that breaks the face into soft facets, like the mountain's low-poly skin. */
.is-facet-lit .stratum-stones a::after {
  background:
    conic-gradient(from 25deg at 44% 36%,rgb(255 255 255 / .16) 0 58deg,rgb(30 16 44 / .06) 58deg 132deg,rgb(255 255 255 / .05) 132deg 206deg,rgb(30 16 44 / .13) 206deg 288deg,rgb(255 255 255 / .09) 288deg),
    linear-gradient(165deg,rgb(255 255 255 / .2) 0%,rgb(255 255 255 / 0) 42%),
    linear-gradient(200deg,rgb(80 54 106 / 0) 30%,color-mix(in srgb,var(--tone) 70%,#50366a) 130%);
}

/* Crystal stones (?stones=crystal; career.js adds .is-faceted): each project is cut as a low-poly crystal in one of four
   shapes, like a shard of the mountain. The stone's own background shows as a thin rim round the photo (both clipped
   to the same polygon), and a conic light over it breaks the face into bright and shaded facets. */
.is-faceted .stratum-stones a {
  --facet: polygon(50% 0,93% 22%,100% 64%,70% 100%,22% 94%,0 55%,12% 16%);
  width: calc(var(--stone) + 6px);
  height: calc(var(--stone) + 6px);
  padding: 2px;
  border-radius: 0;
  box-shadow: none;
  background: var(--layer-line);
  clip-path: var(--facet);
  transition: transform .5s var(--ease-soft), background-color .35s ease, padding .35s var(--ease-soft);
}
.is-faceted .stratum-stones li:nth-child(4n+2) a { --facet: polygon(28% 2%,80% 6%,100% 45%,86% 90%,40% 100%,3% 78%,0 30%); }
.is-faceted .stratum-stones li:nth-child(4n+3) a { --facet: polygon(50% 0,100% 38%,84% 100%,16% 100%,0 38%); }
.is-faceted .stratum-stones li:nth-child(4n) a { --facet: polygon(18% 6%,66% 0,100% 34%,95% 80%,55% 100%,8% 88%,0 44%); }
.is-faceted .stratum-stones img,
.is-faceted .stratum-stones a::after {
  border-radius: 0;
  clip-path: var(--facet);
}
.is-faceted .stratum-stones a::after {
  inset: 2px;
  background:
    conic-gradient(from 25deg at 44% 36%,rgb(255 255 255 / .26) 0 58deg,rgb(30 16 44 / .1) 58deg 132deg,rgb(255 255 255 / .08) 132deg 206deg,rgb(30 16 44 / .22) 206deg 288deg,rgb(255 255 255 / .14) 288deg),
    linear-gradient(200deg,rgb(80 54 106 / 0) 30%,color-mix(in srgb,var(--tone) 70%,#50366a) 130%);
}
.is-faceted .stratum-stones a:hover,
.is-faceted .stratum-stones a:focus-visible {
  padding: 3px;
  background: var(--layer-accent);
  box-shadow: none;
}
.is-faceted .stratum-stones a.is-mark {
  background: linear-gradient(150deg,#8a6aa3,#50366a 60%,#35244a);
}

/* Icon stones (Arc-Zone work without photos): a plum stone with a light line icon. */
.stratum-stones a.is-mark {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 32% 28%,#8a6aa3,#50366a 62%,#35244a);
  cursor: default;
}
.stratum-stones a.is-mark svg {
  position: relative;
  z-index: 1;
  width: 44%;
  height: 44%;
  fill: none;
  stroke: #f3eff6;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .9;
}

/* The line under the stones: the project count at rest, a line about the hovered project otherwise.
   Two stacked lines crossfade, and the height is fixed so nothing shifts. */
.stratum-work {
  position: relative;
}
/* The layer's line and the lines about each of its projects share one cell, one showing at a time (career.js). */
.stratum-line {
  display: grid;
}
.stratum-line>span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s ease, transform .45s var(--ease-soft);
}
.stratum-line>span.is-shown {
  opacity: 1;
  transform: none;
}
.stratum-line strong {
  font-weight: 600;
  color: var(--layer-ink);
}
.stratum-caption {
  display: grid;
  /* One line (where the work was done, and how much), so it sits in the flow under the stones and the two are
     centred together against the layer's text. */
  margin: 26px 0 0;
  font-size: .86rem;
  line-height: 1.5;
  text-align: center;
  color: var(--layer-muted);
}
.stratum-caption span {
  grid-area: 1 / 1;
  max-width: 58ch;
  justify-self: center;
  align-self: start;
  /* A soft halo in the layer's colour keeps the line legible over the mountain, with no box behind it. */
  text-shadow: 0 0 10px var(--layer), 0 0 3px var(--layer);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s ease, transform .45s var(--ease-soft);
}
.stratum-caption span.is-shown {
  opacity: 1;
  transform: none;
}
.stratum-caption strong {
  font-weight: 600;
  color: var(--layer-ink);
}

/* A small "Dig in" cue above the surface edge. */
.strata-cue {
  position: relative;
  z-index: 2;
  margin-top: 22px;
}
/* Styled as the home page's "Selected work" button: a dark pill with the arrow beside the label. */
.strata-cue.hero-work-button {
  gap: 8px;
  padding: 10px 15px;
}
.strata-cue .hero-work-label {
  font-size: .78rem;
}
.strata-cue svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Motion. Always: edges drift like shifting sediment, stones float, the cue bobs.
   On arrival, in order: the edge draws across, the years settle, the headline rises word by word,
   the line fades up, the stones bloom in left to right, and the caption arrives last. */
.is-animated .stratum-edge {
  animation: strata-drift var(--drift,60s) linear infinite;
}
.is-animated .stratum-2 .stratum-edge {
  --drift: 80s;
  animation-direction: reverse;
}
.is-animated .stratum-3 .stratum-edge {
  --drift: 100s;
}
@keyframes strata-drift {
  to { transform: translateX(-50%); }
}
.is-animated .stratum-stones li { /* on the li, as a transform, so the bob runs on the graphics chip (on the link it kept the page busy every frame) */
  animation: stone-float 6s ease-in-out infinite;
  animation-delay: calc(var(--n) * -.8s);
}
@keyframes stone-float {
  50% { transform: translateY(-3px); }
}
.is-animated .strata-cue svg {
  animation: cue-bob 2.2s ease-in-out infinite;
}
@keyframes cue-bob {
  50% { transform: translateY(3px); }
}

.is-priming *,
.is-priming *::before,
.is-priming *::after {
  transition: none !important;
}
/* Entrance, per layer, when it arrives (one soft family of easing throughout):
   1. the ground forms, the edge swells from nearly flat into its waves as its line draws across
   2. the years are uncovered by a soft wipe, coming into focus
   3. the headline rises word by word
   4. the line surfaces from a slight blur
   5. the stones bloom in sequence, each photo settling inside its stone
   6. the hover line arrives last */
.is-animated .stratum-edge {
  scale: 1 .18;
  transform-origin: 50% 100%;
  transition: scale 1.6s var(--ease-soft);
}
.is-animated .stratum-edge-line {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 2s cubic-bezier(.65,0,.35,1);
}
.is-animated .stratum-edge-fill {
  opacity: 0;
  transition: opacity 1.1s ease .2s;
}
.is-animated .stratum-years {
  opacity: 0;
  clip-path: inset(-10% 100% -10% 0);
  filter: blur(8px);
  transform: translateX(-10px);
  transition: opacity .9s ease .15s, clip-path 1.4s cubic-bezier(.65,0,.35,1) .15s, filter 1.2s var(--ease-soft) .15s, transform 1.4s var(--ease-soft) .15s;
}
.is-animated .stratum h2 .w>span {
  transform: translateY(110%);
  transition: transform 1s var(--ease-soft);
  transition-delay: calc(.45s + var(--w) * 80ms);
}
.is-animated .stratum-line {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(12px);
  transition: opacity 1s ease .75s, filter 1s var(--ease-soft) .75s, transform 1.1s var(--ease-soft) .75s;
}
.is-animated .stratum-stones li {
  opacity: 0;
  scale: .55;
  filter: blur(8px);
  transition: opacity .8s ease, scale 1.1s var(--ease-bloom), filter .9s ease;
  transition-delay: calc(.7s + var(--n) * 90ms);
}
.is-animated .stratum-stones img {
  scale: 1.3;
}
.is-animated .stratum-caption {
  opacity: 0;
  transition: opacity .9s ease 1.5s;
}
.is-animated .strata-cue {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .8s ease .3s, transform .9s var(--ease-soft) .3s;
}
.is-animated .is-in .stratum-edge {
  scale: 1 1;
}
.is-animated .is-in .stratum-edge-line {
  clip-path: inset(0 0 0 0);
}
.is-animated .is-in :is(.stratum-edge-fill,.stratum-caption) {
  opacity: 1;
}
.is-animated .is-in .stratum-years {
  opacity: 1;
  clip-path: inset(-10% -10% -10% 0);
  filter: none;
  transform: none;
}
.is-animated .is-in h2 .w>span {
  transform: none;
}
.is-animated .is-in .stratum-line {
  opacity: 1;
  filter: none;
  transform: none;
}
.is-animated .is-in .stratum-stones li {
  opacity: 1;
  scale: 1;
  filter: none;
}
.is-animated .is-in .stratum-stones img {
  scale: 1;
  transition-delay: 0s, calc(.7s + var(--n) * 90ms);
}
.is-animated:has(.stratum-1.is-in) .strata-cue {
  opacity: 1;
  transform: none;
}

/* Settle (the default; ?strata=classic keeps the entrance above as it was). Tied to the scroll: career.js sets --p,
   0 → 1 as a layer comes up the screen (--f gets there first). The whole layer slides up from below into place
   (--shift), its edge swelling from flat into waves as it lands, and the text and stones rise to rest, the stones from
   further down, so the ground feels laid down in depth. The entrance runs quicker and the stones rise in and land
   rather than blooming. The ground of every layer is drawn in one backdrop (.strata-ground) with solid colours, so an
   edge lapping over the layer above joins it cleanly; the backdrop as a whole is faintly see-through, and on wider
   screens thins toward the right so the mountain shows behind the stones. */
.is-animated.is-settle .stratum {
  --p: 0;
  background: none;
  translate: 0 var(--shift,0px);
}
.is-animated.is-settle .stratum-inner {
  position: relative;
}
.strata-ground { /* reaches up past the strata so the top layer's edge isn't cut off (career.js allows for it) */
  position: absolute;
  inset: -80px 0 0;
  pointer-events: none;
  --fade: rgb(0 0 0 / .9);
  /* An eased fade (many stops, a smoothstep curve) over a wide span, so no edge shows where it starts or ends. */
  -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / .9) 22%, color-mix(in srgb, var(--fade) 6%, rgb(0 0 0 / .9)) 30%, color-mix(in srgb, var(--fade) 20%, rgb(0 0 0 / .9)) 40%, color-mix(in srgb, var(--fade) 42%, rgb(0 0 0 / .9)) 50%, color-mix(in srgb, var(--fade) 66%, rgb(0 0 0 / .9)) 60%, color-mix(in srgb, var(--fade) 85%, rgb(0 0 0 / .9)) 70%, color-mix(in srgb, var(--fade) 96%, rgb(0 0 0 / .9)) 80%, var(--fade) 88%);
          mask-image: linear-gradient(to right, rgb(0 0 0 / .9) 22%, color-mix(in srgb, var(--fade) 6%, rgb(0 0 0 / .9)) 30%, color-mix(in srgb, var(--fade) 20%, rgb(0 0 0 / .9)) 40%, color-mix(in srgb, var(--fade) 42%, rgb(0 0 0 / .9)) 50%, color-mix(in srgb, var(--fade) 66%, rgb(0 0 0 / .9)) 60%, color-mix(in srgb, var(--fade) 85%, rgb(0 0 0 / .9)) 70%, color-mix(in srgb, var(--fade) 96%, rgb(0 0 0 / .9)) 80%, var(--fade) 88%);
}
/* A light blur behind the layers, easing in over the top layer's edge, so the mountain reads softly through them. */
.strata-blur {
  position: absolute;
  inset: calc(-1 * clamp(22px,3vw,40px)) 0 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 clamp(22px,3vw,40px));
          mask-image: linear-gradient(to bottom, transparent, #000 clamp(22px,3vw,40px));
}
@media (min-width:801px) {
  .strata-ground {
    --fade: rgb(0 0 0 / .3);
  }
}
/* By night the range behind is bright against a dark sky, so the layers are only lightly see-through: solid at the
   left, where the sky is, easing to a faint view of the mountain at the right. They carry their own ground, so the
   light underlay below the sky (.mountain-stage::before) stays off and no edge of it shows through. */
html[data-tod=night] .strata-ground {
  -webkit-mask-image: linear-gradient(to right, #000 30%, rgb(0 0 0 / .97) 45%, rgb(0 0 0 / .9) 60%, rgb(0 0 0 / .83) 75%, rgb(0 0 0 / .8) 90%);
          mask-image: linear-gradient(to right, #000 30%, rgb(0 0 0 / .97) 45%, rgb(0 0 0 / .9) 60%, rgb(0 0 0 / .83) 75%, rgb(0 0 0 / .8) 90%);
}
html[data-tod=night] .mountain-stage::before { display: none; }
.strata-ground-layer {
  --f: 0;
  position: absolute;
  left: 0;
  right: 0;
  overflow-x: clip;
  translate: 0 var(--shift,0px);
}
/* The last layer slides up from behind the footer rather than over it. */
.experience-page:has(.is-settle)>footer.portfolio-footer {
  position: relative;
  z-index: 2;
}
.is-settle .strata-ground .strata-ground-layer.stratum-1 { --layer: #efe8f1; }
.is-settle .strata-ground .strata-ground-layer.stratum-2 { --layer: #d9cae0; }
.is-settle .strata-ground .strata-ground-layer.stratum-3 { --layer: #c6b3d3; }
.strata-ground-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--layer);
}
.is-animated.is-settle .strata-ground-layer .stratum-edge {
  scale: 1 calc(.12 + .88 * var(--f));
  transition: none;
}
.is-animated.is-settle .strata-ground-layer .stratum-edge-fill {
  opacity: 1;
}
.is-animated.is-settle .stratum-text {
  translate: 0 calc((1 - var(--p)) * 40px);
}
.is-animated.is-settle .stratum-work {
  translate: 0 calc((1 - var(--p)) * 90px);
}
.is-animated.is-settle .stratum-edge-line {
  transition-duration: 1.2s;
}
.is-animated.is-settle .stratum-edge-fill {
  transition-delay: 0s;
}
.is-animated.is-settle .stratum-years {
  transition-duration: .7s, 1s, .8s, 1s;
  transition-delay: .05s;
}
.is-animated.is-settle .stratum h2 .w>span {
  transition-duration: .75s;
  transition-delay: calc(.2s + var(--w) * 55ms);
}
.is-animated.is-settle .stratum-line {
  transition-duration: .7s, .7s, .8s;
  transition-delay: .35s;
}
.is-animated.is-settle .stratum-stones li {
  scale: .8;
  filter: none;
  translate: 0 34px; /* rise with the layer, not against it */
  transition: opacity .45s ease, scale .8s var(--ease-bloom), translate .8s var(--ease-bloom);
  transition-delay: calc(.3s + var(--n) * 55ms);
}
.is-animated.is-settle .is-in .stratum-stones li {
  scale: 1;
  translate: none;
}
.is-animated.is-settle .stratum-caption {
  transition-delay: .8s;
}

/* Side layout (?strata-cols=side): text | hover line | stones two across, right-aligned. The line under
   the stones moves into the middle column, centred on them, so nothing hangs below and the layer's padding evens out. */
@media (min-width:1000px) {
  .strata.is-side .stratum {
    padding-bottom: clamp(56px,5vw,72px);
  }
  .strata.is-side .stratum-inner {
    grid-template-columns: minmax(0,5fr) minmax(0,6fr);
  }
  .strata.is-side .stratum-work {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: clamp(20px,3vw,48px);
  }
  .strata.is-side .stratum-stones {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: repeat(2,calc(var(--stone) + 16px));
    row-gap: 14px;
  }
  .strata.is-side .stratum-caption {
    grid-column: 1;
    grid-row: 1;
    position: static;
    margin: 0;
    text-align: right;
  }
  .strata.is-side .stratum-caption span {
    align-self: center;
    justify-self: end;
    max-width: 30ch;
  }
}
/* Three columns on wide screens: the years over the headline, then the layer's line beside it, then the stones. */
@media (min-width:1000px) {
  /* A narrow headline column, the same in every layer (longer headlines wrap to two lines), so each description sits
     close beside its headline and all three line up; the description keeps a readable measure, and whatever room is
     left falls between it and the stones. */
  .strata.is-3col .stratum-inner {
    grid-template-columns: minmax(0,1fr) minmax(0,1.3fr) auto;
    column-gap: clamp(40px,5vw,72px);
    align-items: start; /* two shared lines: the stones' top row with the years, the description with the headline */
  }
  .strata.is-3col .stratum-work {
    margin-top: 5px; /* the circles' tops level with the first letters of the years and the line */
  }
  .strata.is-3col .stratum-line {
    max-width: 52ch;
  }
  /* The stones sit in an even grid, four across, the same gap each way, sized to their own column. */
  .strata.is-3col .stratum-stones {
    --stone: 68px;
    grid-template-columns: repeat(4,var(--stone));
    gap: 22px;
    justify-content: center;
  }
  /* The line starts level with the headline, like a caption set beside it; longer project lines run on below. */
  .strata.is-3col .stratum-line>span {
    align-self: start;
  }
  .strata.is-3col .stratum-text {
    grid-column: span 2;
    display: grid;
    grid-template-columns: subgrid;
    align-items: start;
  }
  .strata.is-3col .stratum-years { grid-column: 1; grid-row: 1; }
  /* All three columns start on one top line: the years, the line of text and the stones. */
  .strata.is-3col .stratum h2 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .strata.is-3col .stratum-line { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding-top: 0; align-self: start; }
}
@media (max-width:800px) {
  .stratum-inner {
    grid-template-columns: minmax(0,1fr);
    gap: 22px;
  }
  .stratum-stones {
    --stone: 48px;
  }
}

/* Experience hero entrance (experience-parallax.js adds .hero-words), matching the About page's hero: the headline's
   lines rise out of their own line (ab-line-up), and the eyebrow, intro and button rise in (ab-rise), in the same
   order. The class lands as the mountain starts forming; the delays let it lead: mountain from 0s, text from ~0.6s
   to ~2s, and the first layer slides up from below the window from ~0.4s to ~2.1s while the mountain is still coming round (career.js). Only `backwards` fill, so hover and the scroll parallax take over after. */
.hero-pending .career-hero-landscape:not(.hero-words)>:not(.career-landscape) {
  opacity: 0; /* held back from the first paint until the entrance is ready to play (set in the page head) */
}
.hero-words .career-title .hw {
  display: block;
}
/* The copy wipes in left to right behind the mountain as it sweeps across to the right, like the Work page's hero
   copy behind the phone. */
.hero-words>:is(.eyebrow,p,.strata-cue), .hero-words .career-title .hw>span {
  display: inline-block;
  mask-image: linear-gradient(90deg,#000 29%,rgb(0 0 0 / .94) 38%,rgb(0 0 0 / .5) 50%,rgb(0 0 0 / .06) 62%,transparent 71%);
  mask-size: 350% 100%;
  mask-repeat: no-repeat;
  animation: hero-wipe 1550ms cubic-bezier(.2,.65,.22,1) backwards, hero-slide 1550ms cubic-bezier(.2,.65,.22,1) backwards;
}
.hero-words>p { display: block; }
.hero-words>.eyebrow { animation-delay: .57s; }
.hero-words .career-title .hw>span { animation-delay: .64s; }
.hero-words .career-title .hw+.hw>span { animation-delay: .71s; }
.hero-words>p:not(.eyebrow) { animation-delay: .8s; }
.hero-words>.strata-cue { display: inline-flex; animation-delay: .88s; } /* still a pill: label and arrow side by side, centred */
/* back from Results: the hero copy comes in early in the fly-out, not after it */
/* from the Work page: the copy follows the range straight out of the light */
html.from-work .hero-words>.eyebrow { animation-delay: .08s; }
html.from-work .hero-words .career-title .hw>span { animation-delay: .14s; }
html.from-work .hero-words .career-title .hw+.hw>span { animation-delay: .2s; }
html.from-work .hero-words>p:not(.eyebrow) { animation-delay: .28s; }
html.from-work .hero-words>.strata-cue { animation-delay: .34s; }
html.from-work .hero-words>:is(.eyebrow,p,.strata-cue), html.from-work .hero-words .career-title .hw>span { animation-duration: 900ms; }
html.summit-back .hero-words>.eyebrow { animation-delay: 0.352s; }
html.summit-back .hero-words .career-title .hw>span { animation-delay: 0.39s; }
html.summit-back .hero-words .career-title .hw+.hw>span { animation-delay: 0.42s; }
html.summit-back .hero-words>p:not(.eyebrow) { animation-delay: 0.465s; }
html.summit-back .hero-words>.strata-cue { animation-delay: 0.503s; }
html.summit-back .hero-words>:is(.eyebrow,p,.strata-cue), html.summit-back .hero-words .career-title .hw>span { animation-duration: 577.5ms; } /* the quicker flight back: the copy keeps pace */ /* back from Results: in over the flight's last stretch, landing with it */
}

/* Layer palettes by time of day, matching the mountain (mountain-field.js sets html[data-tod]); dusk is the default
   palette above. Each layer keeps dark text; only the tint of the ground, its rules and accents shift. */
html[data-tod=dawn] .stratum-1 { --layer-line: #dfc6c1; --layer-muted: #5f5058; --layer-carve: rgb(120 60 70 / .24); --layer-accent: #b3345f; }
html[data-tod=dawn] .experience-page:has(.mountain-stage) .stratum-1, html[data-tod=dawn] .is-settle .strata-ground .strata-ground-layer.stratum-1 { --layer: #f7ece8; }
html[data-tod=dawn] .stratum-2 { --layer-line: #cfaaa7; --layer-muted: #4f4148; --layer-carve: rgb(110 50 60 / .26); --layer-accent: #a52a55; }
html[data-tod=dawn] .experience-page:has(.mountain-stage) .stratum-2, html[data-tod=dawn] .is-settle .strata-ground .strata-ground-layer.stratum-2 { --layer: #efd8d4; }
html[data-tod=dawn] .stratum-3 { --layer-line: #c29a9f; --layer-muted: #43363d; --layer-carve: rgb(90 36 50 / .26); --layer-accent: #94244c; }
html[data-tod=dawn] .experience-page:has(.mountain-stage) .stratum-3, html[data-tod=dawn] .is-settle .strata-ground .strata-ground-layer.stratum-3 { --layer: #e5c3c5; }
html[data-tod=day] .stratum-1 { --layer-line: #d3d3e2; --layer-muted: #565466; --layer-carve: rgb(60 58 110 / .22); --layer-accent: #8a2f7a; }
html[data-tod=day] .experience-page:has(.mountain-stage) .stratum-1, html[data-tod=day] .is-settle .strata-ground .strata-ground-layer.stratum-1 { --layer: #f2f1f7; }
html[data-tod=day] .stratum-2 { --layer-line: #babdd4; --layer-muted: #474659; --layer-carve: rgb(50 50 100 / .24); --layer-accent: #7a2a72; }
html[data-tod=day] .experience-page:has(.mountain-stage) .stratum-2, html[data-tod=day] .is-settle .strata-ground .strata-ground-layer.stratum-2 { --layer: #e2e3f0; }
html[data-tod=day] .stratum-3 { --layer-line: #a8acc8; --layer-muted: #3c3b50; --layer-carve: rgb(40 40 90 / .26); --layer-accent: #6b2566; }
html[data-tod=day] .experience-page:has(.mountain-stage) .stratum-3, html[data-tod=day] .is-settle .strata-ground .strata-ground-layer.stratum-3 { --layer: #d0d3e6; }
html[data-tod=night] .stratum-1 { --layer-line: #c3c7df; --layer-muted: #4f5068; --layer-carve: rgb(40 44 110 / .24); --layer-accent: #5a4ac0; }
html[data-tod=night] .experience-page:has(.mountain-stage) .stratum-1, html[data-tod=night] .is-settle .strata-ground .strata-ground-layer.stratum-1 { --layer: #e7e9f5; }
html[data-tod=night] .stratum-2 { --layer-line: #a9aed2; --layer-muted: #414261; --layer-carve: rgb(34 38 100 / .26); --layer-accent: #4d3fb0; }
html[data-tod=night] .experience-page:has(.mountain-stage) .stratum-2, html[data-tod=night] .is-settle .strata-ground .strata-ground-layer.stratum-2 { --layer: #d1d5ec; }
html[data-tod=night] .stratum-3 { --layer-line: #9197c5; --layer-muted: #363856; --layer-carve: rgb(28 30 90 / .28); --layer-accent: #4336a0; }
html[data-tod=night] .experience-page:has(.mountain-stage) .stratum-3, html[data-tod=night] .is-settle .strata-ground .strata-ground-layer.stratum-3 { --layer: #babfe0; }

/* Experience: a time axis down the left of the stacked layers (career.js). The line runs through all three layers;
   each layer's span of years is ticked along its height, round years labelled, with a node at the top of each span. */
.stratum-time {
  position: absolute;
  z-index: 1;
  top: clamp(40px,4vw,56px);
  bottom: 0;
  left: calc(max(0px, (100% - 1400px) / 2) + 5vw - clamp(26px,2.6vw,40px));
  width: 1px;
  background: linear-gradient(var(--layer-line), var(--layer-line));
  pointer-events: none;
}
.stratum:first-child .stratum-time { top: clamp(40px,4vw,56px); }
.stratum:not(:first-child) .stratum-time { top: 0; }
.stratum-time i {
  position: absolute;
  left: -3px;
  width: 7px;
  height: 1px;
  background: var(--layer-line);
}
.stratum-time i.is-major {
  left: -6px;
  width: 13px;
  background: var(--layer-muted);
}
.stratum-time i span {
  font-style: normal;
  position: absolute;
  right: 18px;
  top: -.62em;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--layer-muted);
  font-variant-numeric: tabular-nums;
}
.stratum-time b { /* the node where the layer's span begins */
  position: absolute;
  left: -5px;
  top: -5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--layer);
  box-shadow: 0 0 0 2px var(--layer-accent);
  font-size: 0;
}
@media (max-width:800px) {
  .stratum-time { display: none; }
}

/* Header portrait as a silhouette: the photo's own cut-out shape, filled with the ink colour, so it follows every
   style and the night palette. The photo itself is moved out of its box; the mask draws the shape. */
.identity img.identity-avatar {
  background: var(--ink);
  -webkit-mask: url(assets/matt-cutout-poster.webp?v=2) bottom center / contain no-repeat;
  mask: url(assets/matt-cutout-poster.webp?v=2) bottom center / contain no-repeat;
  object-position: -9999px 0;
  filter: none !important;
  opacity: .88;
}

/* More Work: more air between the headline, the filter row and the cards. */
#more>.section-heading { padding-bottom: 40px; }
#more .more-toolbar { margin-bottom: 48px; }
#more-grid.is-flow + .flow-stage { margin-top: 64px; }

/* Experience: the year rail down the side of the layers is off (kept for comparison with ?rail=1 on the page). */
html:not(.show-rail) .stratum-time { display: none; }

/* A layer with nine projects runs five across (five over four), so no stone sits alone on a third row. */
@media (min-width:1000px) {
  .strata.is-3col .stratum-stones:has(> :nth-child(9)) { grid-template-columns: repeat(5,var(--stone)); gap: 18px; }
}

/* Cover flow card: the year top left, the Selected chip top right. */
.flow-stage .cf-top { opacity: var(--focus, 0); }
.flow-stage .cf-top .mini-flag { opacity: 1; margin-left: auto; }
.flow-stage .cf-year { background: rgb(16 12 24 / .5); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); }
/* The cover flow's far side cards reach past the window; clip them so the page never scrolls sideways. */
html, body { overflow-x: clip; }

/* ======================================================================
   Contact, v2: the invitation on the left, the email as the one big action on the right, with a copy button and the
   other ways in (LinkedIn, résumé, the work) as quiet rows beneath.
   ====================================================================== */
.contact-v2 { grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(48px,8vw,120px); padding-top: clamp(64px,9vw,120px); align-items: start; }
.contact-v2 .contact-intro h1 { margin: 18px 0 24px; }
.contact-v2 .contact-lead { max-width: 40ch; }
.contact-status { display: inline-flex; align-items: center; gap: 10px; margin: 32px 0 0; padding: 7px 14px 7px 12px; border-radius: 999px;
  font-size: .84rem; font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); }
.contact-status i { width: 8px; height: 8px; border-radius: 50%; background: #2fa66a; } /* a plain dot: the pulsing ring read as a smudge behind it */
@media (prefers-reduced-motion: reduce) { .contact-status i { animation: none; } }
.contact-open { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.contact-open li { padding: 6px 12px; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.contact-v2 .contact-details { padding-top: 8px; }
.contact-primary { padding: clamp(26px,3vw,36px); border-radius: 20px; background: color-mix(in srgb, var(--surface, color-mix(in srgb, var(--bg) 70%, #fff)) 58%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); box-shadow: inset 0 0 0 1px var(--line), 0 24px 60px -40px rgb(34 28 46 / .35); }
.contact-label, .contact-v2 #contact-methods>a>span:first-child { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.contact-big { display: block; margin: 10px 0 22px; font-size: clamp(1.5rem,2.6vw,2.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); overflow-wrap: anywhere; text-decoration: none; background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat; transition: background-size .35s cubic-bezier(.2,.7,.2,1), color .2s; }
.contact-big:hover { color: var(--accent); background-size: 100% 2px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 10px 18px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 .92rem/1 var(--font-site, inherit); color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: background .2s, color .2s, box-shadow .2s; }
.contact-btn:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.contact-btn.is-solid { background: var(--ink); color: var(--bg); box-shadow: none; }
.contact-btn.is-solid:hover { background: var(--accent); }
.contact-btn.is-done { color: #2a8a5a; box-shadow: inset 0 0 0 1px #2a8a5a; }
.contact-btn:focus-visible, .contact-big:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.contact-tip { margin: 22px 0 0; font-size: .9rem; line-height: 1.55; color: var(--muted); }
.contact-v2 #contact-methods { margin-top: 28px; }
.contact-v2 #contact-methods>a { grid-template-columns: 5.5rem 1fr auto; align-items: center; padding: 18px 4px; font-size: 1rem; text-decoration: none; }
.contact-v2 #contact-methods>a>b { font-weight: 600; }
.contact-v2 #contact-methods>a:hover>b { color: var(--accent); }
@media (max-width:760px) {
  .contact-v2 { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; }
  .contact-v2 #contact-methods>a { grid-template-columns: 4.5rem 1fr auto; }
}
/* Contact: the sound wave fills the open space under the content, full bleed. */
.contact-v2 { padding-bottom: 24px; min-height: 0; }
.contact-wave { width: 100vw; margin: 0 calc(50% - 50vw); height: clamp(300px, 36vw, 460px); margin-bottom: 24px; pointer-events: none; }
.contact-wave canvas { display: block; width: 100%; height: 100%; }
.contact-actions .contact-btn svg { flex: none; }
/* The wave rises from under the content: it starts beneath the email card, fades in from transparent at its top
   edge, and the page content sits over it. It also fades up softly when the page opens. */
.contact-v2 { position: relative; z-index: 1; }
.contact-wave { position: relative; z-index: 0; margin-top: clamp(-260px, -17vw, -130px);
  /* a long, eased fade (many stops approximate an ease-in-out curve) so it dissolves under the content with no visible edge */
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .03) 10%, rgb(0 0 0 / .1) 18%, rgb(0 0 0 / .22) 26%, rgb(0 0 0 / .4) 34%, rgb(0 0 0 / .6) 42%, rgb(0 0 0 / .78) 50%, rgb(0 0 0 / .91) 58%, #000 68%, #000 82%, rgb(0 0 0 / .6) 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .03) 10%, rgb(0 0 0 / .1) 18%, rgb(0 0 0 / .22) 26%, rgb(0 0 0 / .4) 34%, rgb(0 0 0 / .6) 42%, rgb(0 0 0 / .78) 50%, rgb(0 0 0 / .91) 58%, #000 68%, #000 82%, rgb(0 0 0 / .6) 92%, transparent 100%);
  animation: contact-wave-in 2.2s cubic-bezier(.25,.6,.3,1) .4s backwards; }
@keyframes contact-wave-in { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) { .contact-wave { animation: none; } }
/* More Work card panel: grown size always, scaled down at rest (home.js sets --rest-sx/--rest-sy), so hover animates on
   the compositor instead of re-running layout each frame. */
.card-grow-scale #more-grid:not(.is-list) .mini-project::before {
  inset: calc(-1px - var(--card-grow)); border-radius: calc(14px + var(--card-grow));
  transform: scale(var(--rest-sx, .96), var(--rest-sy, .97)); will-change: transform;
  transition: transform .75s cubic-bezier(.4,0,.2,1), background-color .75s cubic-bezier(.4,0,.2,1), border-color .75s cubic-bezier(.4,0,.2,1), box-shadow .75s cubic-bezier(.4,0,.2,1);
}
.card-grow-scale #more-grid:not(.is-list) .mini-project:is(:hover,:focus-visible)::before { transform: none; }

/* Over a dark scene (the night sky on Experience, the About story), the header goes dark in every style, and its
   backing runs the full width of the window instead of stopping at the content edge. The style sheets set the header
   with !important, so these carry it too. */
html.is-night body>.nav, html.is-night[data-variant] body>.nav {
  background: rgb(14 12 30 / .72) !important; border-bottom-color: rgb(255 255 255 / .08) !important;
  box-shadow: 0 0 0 100vmax rgb(14 12 30 / .72) !important; clip-path: inset(0 -100vmax);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
html[data-tod=night].is-night body>.nav, html[data-tod=night].is-night[data-variant] body>.nav { background: rgb(9 12 38 / .72) !important; box-shadow: 0 0 0 100vmax rgb(9 12 38 / .72) !important; }
html.is-night[data-variant] body>.nav :is(nav>a, .identity-name span) { color: #efe9f4 !important; }
html.is-night[data-variant] body>.nav nav>a[aria-current=page]::after { background: #fff !important; }
html.is-night[data-variant] body>.nav nav>a.nav-resume { border-color: rgb(255 255 255 / .35) !important; color: #fff !important; }
html.is-night .identity img.identity-avatar { background: linear-gradient(170deg, #f7a8cc 0%, #c9a8e0 55%, #8f8cd8 100%) !important; opacity: .95; } /* at night the silhouette takes the story's pink-to-lavender, like the night type */
html.has-night body>.nav { transition: background-color .14s ease-out, border-color .14s ease-out, color .14s ease-out, box-shadow .14s ease-out; box-shadow: 0 0 0 100vmax rgb(14 12 30 / 0); clip-path: inset(0 -100vmax); } /* on pages with a night scene the full-width backing is always there, just clear, so leaving the scene only fades its colour (dropping it let the giant shadow shrink across the whole page) */

/* The About story sits on a dark sky in every style: its type stays light even where a style recolours headings. */
html[data-variant] .curio-story .curio-intro h2 { color: #fff !important; }
html[data-variant] .curio-story .curio-intro h2 em { color: transparent !important; background: linear-gradient(95deg,#f7a8cc,#f08bbd 40%,#b8a4db); -webkit-background-clip: text; background-clip: text; }
html[data-variant] .curio-story .curio-beat h3 { color: #fff !important; }
html[data-variant] .curio-story :is(.curio-beat p, .curio-cue) { color: rgb(240 234 246 / .86) !important; }

/* Stones: a layer with only a few projects keeps them together and centred over the caption, never spread across
   empty columns. */
.stratum-stones { grid-template-columns: repeat(var(--cols,auto-fit), calc(var(--stone) + 16px)); justify-content: center; column-gap: 10px; }
@media (min-width:1000px) {
  .strata.is-3col .stratum-stones:not(:has(> :nth-child(4))) { grid-template-columns: repeat(auto-fit, var(--stone)); }
}
/* The layer years carry the accent, so each layer's head reads in two colours. */
.stratum-years { color: color-mix(in srgb, var(--accent) 78%, var(--ink)) !important; }

/* Grid cards: everything that changes on hover eases on the same curve as the panel and the photo, so nothing snaps
   (the View project pill, its shadow, the type colours, the tag icons). */
#more-grid:not(.is-list) .mini-project :is(.mini-open, .mini-open svg, .mini-body h3, .mini-meta span, .tag-material, .mini-card-footer .mini-tags::before) {
  transition: background-color .5s cubic-bezier(.4,0,.2,1), color .5s cubic-bezier(.4,0,.2,1), border-color .5s cubic-bezier(.4,0,.2,1),
    box-shadow .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1), translate .6s cubic-bezier(.4,0,.2,1), opacity .5s ease !important;
}
@media (prefers-reduced-motion: reduce) { #more-grid .mini-project * { transition: none !important; } }

/* ---- About hero: the anamorphic mark (about-hero.js) and its three-stage caption ---- */
.ab-hero-field.is-mark { /* a little room below the hero for the mark's shadow, faded out in the shader */
  bottom: -110px;
}
.ab-hero-steps {
  position: absolute;
  z-index: 1;
  display: flex;
  gap: clamp(14px,1.6vw,26px);
  translate: -50% 0;
  margin: 0;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  pointer-events: none;
  animation: ab-rise .9s .6s var(--about-ease) both;
}
.ab-hero-steps span {
  position: relative;
  display: flex;
  gap: 7px;
  padding-bottom: 9px;
  opacity: .5;
  transition: opacity .6s ease, color .6s ease;
}
.ab-hero-steps b {
  font-weight: 700;
  color: var(--accent);
}
.ab-hero-steps i { /* a hairline under each stage; the current one fills as it plays */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
}
.ab-hero-steps i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
}
.ab-hero-steps span.is-on {
  opacity: 1;
  color: var(--ink);
}
.ab-hero-steps span.is-on i::after {
  transform: scaleX(var(--p,0));
}
@media (max-width:700px) { /* one stage at a time, crossfading in place */
  .ab-hero-steps { display: grid; }
  .ab-hero-steps span { grid-area: 1 / 1; justify-self: center; opacity: 0; }
  .ab-hero-steps span.is-on { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-hero-steps span { opacity: .5; }
}

/* Safari only animates a clip-path whose numbers it can resolve the same way at both ends: give it plain lengths. */
@supports (-webkit-hyphens: none) {
  #more-grid .mini-project .mini-photo { clip-path: inset(21px 21px 2px 21px round 12px 12px 12px 12px); }
  #more-grid .mini-project:is(:hover,:focus-visible) .mini-photo { clip-path: inset(0px 0px 2px 0px round 21px 21px 0px 0px); }
}

/* About hero, binary take (about-binary.js). */
.ab-hero-field.is-binary .ab-binary { position: absolute; top: 8%; bottom: 14%; left: calc(50% + 2vw); right: max(24px, calc(50vw - 700px)); }
.ab-hero-field.is-binary .ab-binary canvas { width: 100%; height: 100%; display: block; } /* the right of the hero, clear of the headline; sized by the field, never sizing it */
@media (max-width: 760px) { .ab-hero-field.is-binary .ab-binary { left: 16px; right: 16px; top: auto; height: 46vw; bottom: 10%; } }
.ab-binary-label { position: absolute; left: calc(50% + 2vw); right: max(24px, calc(50vw - 700px)); bottom: 8%; margin: 0; text-align: center; font: 600 .82rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); min-height: 1.4em; }
.radar-chart { transform-origin: 50% 50%; will-change: transform; overflow: visible; }

/* A project's screen-recorded reel sits over its poster image, filling the same frame (cards and the project page). */
:is(.mini-photo, .case-image) { position: relative; } /* not .cf-card: cover-flow cards are absolutely placed, and this made them stack down the page */
.photo-reel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 8; pointer-events: none; border-radius: inherit; } /* above the colour wash: a recording shows true to the site */
#more-grid .mini-photo .photo-reel { border-radius: 0; } /* fills the photo like its image; the photo's own clip-path crops both */
.cf-card .photo-reel { z-index: 0; }
.case-image > .photo-reel { position: absolute; top: 0; left: 0; width: 100%; height: auto; aspect-ratio: var(--case-ratio, auto); }
@media (prefers-reduced-motion: reduce) { .photo-reel { display: none; } }

/* Screen duo (project page): two browser windows, one behind the other, in a gentle 3D tilt that leans toward the
   pointer (--tilt-x/--tilt-y, -1..1, set by project-pages.js). Each window idles on a slow float of its own. */
.screen-duo .duo-stage {
  --duo-tilt-x: 7deg; --duo-tilt-y: -15deg;
  position: relative; aspect-ratio: 16 / 12; overflow: hidden; border-radius: 10px; perspective: 1500px; perspective-origin: 55% 35%;
  background:
    radial-gradient(90% 70% at 78% 18%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    radial-gradient(70% 60% at 12% 92%, color-mix(in srgb, #5a4bd6 12%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--ink) 3%, var(--bg)), color-mix(in srgb, var(--ink) 9%, var(--bg)));
  isolation: isolate;
}
.screen-duo .duo-scene {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(calc(var(--duo-tilt-x) - var(--tilt-y, 0) * 5deg)) rotateY(calc(var(--duo-tilt-y) + var(--tilt-x, 0) * 7deg));
}
.screen-duo .duo-window {
  position: absolute; width: 66%; border-radius: 9px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgb(34 28 46 / .08), 0 2px 4px rgb(34 28 46 / .08), 0 28px 48px -18px rgb(34 28 46 / .5);
  animation: duo-float 9s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -4.5s);
}
.screen-duo .duo-window:nth-child(1) { left: 3%; top: 7%; --z: -80px; }
.screen-duo .duo-window:nth-child(2) { left: 30%; top: 32%; --z: 40px; }
.screen-duo .duo-window.is-dark { background: #141118; box-shadow: 0 0 0 1px rgb(255 255 255 / .06), 0 2px 4px rgb(34 28 46 / .1), 0 28px 48px -18px rgb(34 28 46 / .55); }
.screen-duo.is-single .duo-window { left: 9%; top: 13%; width: 82%; --z: 0px; }
@keyframes duo-float { from { transform: translateZ(var(--z)) translateY(-3px); } to { transform: translateZ(var(--z)) translateY(4px); } }
.screen-duo .duo-bar { display: flex; align-items: center; gap: 4px; height: 17px; padding: 0 8px; border-bottom: 1px solid rgb(34 28 46 / .07); font: 600 8px/1 var(--font, system-ui), sans-serif; letter-spacing: .02em; color: #8a8094; }
.screen-duo .duo-bar i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .45; }
.screen-duo .duo-bar span { margin: 0 auto; padding-right: 27px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.screen-duo .is-dark .duo-bar { border-color: rgb(255 255 255 / .06); color: #8d8496; }
.screen-duo .duo-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
#case-content .screen-duo .duo-screen :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0; display: block; }
.screen-duo .duo-pause {
  position: absolute; right: 10px; bottom: 10px; z-index: 9; padding: 4px 10px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--ink); font-size: 11px; font-weight: 600; line-height: 1.3; cursor: pointer; opacity: .8;
}
.screen-duo .duo-pause:is(:hover, :focus-visible) { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .screen-duo .duo-window { animation: none; transform: translateZ(var(--z)); }
  #case-content .screen-duo .duo-screen video, .screen-duo .duo-pause { display: none; }
}

/* Case study type, one system: every block's heading at the same size and weight, every block's text at the body size,
   weight and colour (the brief lines were a size up, heavier and darker than the text beside them). */
#case-content .case-narrative .narrative-brief,
#case-content .case-narrative .narrative-detail p,
#case-content .case-narrative li { font-size: 16px !important; font-weight: 400 !important; line-height: 1.6 !important; color: var(--muted) !important; }
#case-content :is(.case-narrative section h2, .result-heading, .result-delivery h2, .result-tools h2, .contribution-radar h2) { font-size: 20px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -.015em !important; color: var(--ink) !important; }
#case-content .result-statement { font-size: 16px !important; line-height: 1.6 !important; }
/* The light and dark theme button (variant.js), a quiet round icon at the end of the nav. */
.theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-left: 4px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .25s, border-color .25s, color .25s; }
.theme-toggle:hover { border-color: var(--ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html.is-night .theme-toggle { color: #fff; border-color: rgb(255 255 255 / .28); }
@media (max-width: 700px) { .theme-toggle { width: 34px; height: 34px; } }
/* The theme button is added by script once the page has parsed; until then an empty slot of its size holds its place,
   so the header's links don't start 72px to the right and jump left as each page opens. */
body>.nav nav:not(:has(.theme-toggle))::after { content: ''; flex: none; width: 40px; height: 40px; margin-left: 4px; }
@media (max-width: 700px) { body>.nav nav:not(:has(.theme-toggle))::after { width: 34px; height: 34px; } }
/* Dark theme: the case study's few hard-set purples lift to the light ink. */
html[data-variant=nocturne] #case-content .narrative-toggle { color: var(--muted) !important; }
html[data-variant=nocturne] #case-content .narrative-toggle i { border-color: var(--line) !important; }
html[data-variant=nocturne] .radar-labels text.is-active { fill: var(--ink) !important; }
html[data-variant=nocturne] .radar-labels text { fill: var(--muted) !important; }
html[data-variant=nocturne] .radar-area { stroke: var(--accent) !important; fill-opacity: .9; }
html[data-variant=nocturne] .radar-point { fill: var(--accent) !important; stroke: var(--accent) !important; }
/* More Work sits well below the hero; skipping its rendering until it nears the viewport frees each frame of the
   phone's entrance (the grid's 24 cards otherwise halve the frame rate while off screen). */
@media (max-width: 760px) { #more.more-section { content-visibility: auto; contain-intrinsic-size: auto 910px; } } /* phones only: on wider screens it also clipped the grown hover card and the cover flow at the section's edge */
/* ...but that also clips its paint to the column, cutting off the cover flow's side cards, so the cover flow lets it render. */
#more.more-section:has(#more-grid.is-flow) { content-visibility: visible; }
/* Expanded Details, in switchable takes (project-pages.js sets html[data-details]; ?details=NAME or the Details row on
   the localhost Styles strip). Rule is the default: a hairline and a small accent label over the text, no box. */
#case-content .case-narrative .narrative-detail ol { list-style: none; counter-reset: dl; display: grid; gap: 8px; padding: 0; }
#case-content .case-narrative .narrative-detail ol>li { counter-increment: dl; position: relative; padding-left: 26px; margin: 0; }
#case-content .case-narrative .narrative-detail ol>li::before { content: counter(dl, decimal-leading-zero); position: absolute; left: 0; top: .2em; font: 600 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); }
html[data-details=rule] #case-content .case-narrative .narrative-detail>div>:is(p, ol, ul) { margin-top: 16px; padding-top: 30px; border-top: 1px solid var(--line); position: relative; }
html[data-details=rule] #case-content .case-narrative .narrative-detail>div>:is(p, ol, ul)::before { content: 'In detail'; position: absolute; top: 10px; left: 0; font: 600 10.5px/1 var(--font-site, inherit); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
html[data-details=rule] #case-content .case-narrative .narrative-detail :is(p, li) { font-size: 15px !important; line-height: 1.65 !important; color: var(--ink) !important; opacity: .8; }
html[data-details=quote] #case-content .case-narrative .narrative-detail>div>:is(p, ol, ul) { margin-top: 16px; padding: 2px 0 2px 18px; box-shadow: inset 3px 0 0 var(--accent); }
html[data-details=quote] #case-content .case-narrative .narrative-detail :is(p, li) { font-size: 15.5px !important; font-style: italic; line-height: 1.6 !important; color: var(--ink) !important; opacity: .82; }
html[data-details=inset] #case-content .case-narrative .narrative-detail>div>:is(p, ol, ul) { margin-top: 14px; padding-left: 26px; position: relative; }
html[data-details=inset] #case-content .case-narrative .narrative-detail>div>:is(p, ol, ul)::before { content: '↳'; position: absolute; left: 2px; top: -.05em; font-size: 17px; color: var(--accent); }
html[data-details=inset] #case-content .case-narrative .narrative-detail :is(p, li) { font-size: 15px !important; line-height: 1.65 !important; color: var(--muted) !important; }
html[data-details=card] #case-content .case-narrative .narrative-detail>div>:is(p, ol, ul) { margin-top: 14px; padding: 14px 18px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent); }
html[data-details=card] #case-content .case-narrative .narrative-detail :is(p, li) { font-size: 14.5px !important; line-height: 1.6 !important; color: var(--ink) !important; opacity: .78; }
html[data-details=mono] #case-content .case-narrative .narrative-detail>div>:is(p, ol, ul) { padding-left: 16px; border-left: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
html[data-details=mono] #case-content .case-narrative .narrative-detail :is(p, li) { font: 400 13.5px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; letter-spacing: -.01em !important; color: var(--muted) !important; }
html[data-details=lede] #case-content .case-narrative .narrative-detail>div>:is(p, ol, ul) { margin-top: 18px; }
html[data-details=lede] #case-content .case-narrative .narrative-detail :is(p, li) { font-size: 15px !important; line-height: 1.7 !important; color: var(--muted) !important; }
html[data-details=lede] #case-content .case-narrative .narrative-detail p::first-line { color: var(--ink); font-weight: 600; }
html[data-details=marker] #case-content .case-narrative .narrative-detail>div>:is(p, ol, ul) { margin-top: 16px; }
html[data-details=marker] #case-content .case-narrative .narrative-detail :is(p, li) { font-size: 15px !important; line-height: 1.85 !important; color: var(--ink) !important; }
html[data-details=marker] #case-content .case-narrative .narrative-detail p, html[data-details=marker] #case-content .case-narrative .narrative-detail li>span { display: inline; padding: 1px 4px; background: linear-gradient(transparent 52%, color-mix(in srgb, var(--accent) 14%, transparent) 52%, color-mix(in srgb, var(--accent) 14%, transparent) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html[data-details=note] #case-content .case-narrative .narrative-detail>div>:is(p, ol, ul) { margin-top: 14px; padding-top: 14px; border-top: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
html[data-details=note] #case-content .case-narrative .narrative-detail :is(p, li) { font-size: 13.5px !important; line-height: 1.7 !important; letter-spacing: .005em; color: var(--muted) !important; }
/* Dark theme: the soft light wash behind the Selected work heading reads as a grey disc on the night background. */
html[data-variant=nocturne] #work::before { display: none; }
/* Dark theme, Home hero: the phone's grey wash becomes a faint pink and lavender glow, the floor plan's steel blue
   lifts to a soft lavender line that reads on the night background. */
html[data-variant=nocturne] .demo-stage:before { background: radial-gradient(ellipse at 38% 42%, rgb(240 139 189 / .16), transparent 63%), radial-gradient(ellipse at 77% 70%, rgb(184 164 219 / .13), transparent 56%); }
html[data-variant=nocturne] .single-demo .hero-blueprint.blueprint-plan { stroke: #9d92c4; color: #9d92c4; opacity: .42; }
html[data-variant=nocturne] .blueprint-plan .plan-trace { stroke: #f08bbd; opacity: .7; }
/* Contact: availability sits at the top of the email card, divided from the address by a hairline. */
.contact-avail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 24px; padding: 0 0 22px; border-bottom: 1px solid var(--line); }
.contact-avail .contact-status { margin: 0 6px 0 0; }
.contact-avail .contact-open { margin: 0; }
/* About close: the headline sets two big lines on the left; the aside sits on the same baseline, set off by a hairline,
   so the two halves read as one composed block instead of floating apart. */
.ab-close { grid-template-columns: minmax(0,25rem) minmax(0,1fr); align-items: end; margin-top: 0; padding-top: clamp(56px,7vw,96px); border-top: 0; }
.ab-close h2 { max-width: 8.5em; font-size: clamp(2.8rem,6.4vw,5.6rem); line-height: .98; }
.ab-close h2 em { display: block; }
.ab-close-aside { grid-area: 1 / 1; padding-right: clamp(24px,3vw,40px); border-right: 1px solid var(--line); } /* the card on the left, the headline on the right */
.ab-close-copy { grid-area: 1 / 2; align-self: start; } /* the headline's top lines up with the top of the card beside it */
.ab-close-copy h2 { margin-top: -.12em; } /* optical: the cap height, not the line box, meets the hairline's top */
.ab-close-avatar { object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.ab-close-who b { letter-spacing: -.01em; }
.ab-close-note { color: var(--ink); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; text-wrap: pretty; } /* "Open to new work." said plainly and big */
@media (max-width:820px) { .ab-close { grid-template-columns: minmax(0,1fr); } .ab-close-copy, .ab-close-aside { grid-area: auto; } .ab-close-aside { padding-right: 0; border-right: 0; } }
/* About route: each stop's years sit on their own line under its name, so every stop lines up the same way. */
.route-era small { display: block; margin: 5px 0 0; font-variant-numeric: tabular-nums; }
/* Home hero: below 1200px the phone's right edge reaches the note's column and there's no clear room beside or under
   it, so the note steps aside; the Selected work card just below leads to the same project. */
@media (max-width:1199px) {
  .single-demo .phone-project-note, .single-demo:has(.demo-stage:hover) .phone-project-note, .single-demo:focus-within .phone-project-note { display: none; }
}
html[data-details=marker] #case-content .case-narrative .narrative-detail>div { padding-top: 14px; }
/* Contact: availability reads as a status line over a short list (an "Open to" label and one item per line with an
   accent tick), not as buttons, and it never wraps awkwardly at narrow widths. */
.contact-avail { display: grid; gap: 14px; justify-items: start; }
.contact-avail .contact-status { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; font-weight: 600; }
.contact-avail .contact-open { display: grid; gap: 7px; width: 100%; margin: 0; }
.contact-avail .contact-open::before { content: 'Open to'; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.contact-avail .contact-open li { display: flex; align-items: center; gap: 10px; padding: 0; box-shadow: none; border-radius: 0; background: none; font-size: .95rem; font-weight: 500; color: var(--ink); }
.contact-avail .contact-open li::before { content: ''; width: 12px; height: 7px; flex: none; border: solid var(--accent); border-width: 0 0 1.6px 1.6px; transform: translateY(-2px) rotate(-45deg); }
/* The story thread runs in the margin; on narrow screens there is no margin, so it would cross the text. */
@media (max-width:899px) { .story-thread-canvas { display: none !important; } }
/* Project pages: previous / next, set apart from the summary grid, in switchable takes (html[data-pager], ?pager=NAME or
   the Pager row on the localhost Styles strip). Big is the default. */
#case-content .case-body + .project-pagination { margin-top: 64px !important; padding: 0 !important; border: 0 !important; }
#case-content .project-pagination::before, #case-content .project-pagination::after { display: none !important; }
/* 1 · Big: no thumbnails, oversized titles over a single rule, the arrow sliding on hover */
html[data-pager=big] #case-content .project-pagination { border-top: 1px solid var(--ink) !important; gap: 48px !important; }
html[data-pager=big] #case-content .project-pagination-link { padding: 22px 0 0 !important; border: 0 !important; background: none; grid-template-columns: 96px 1fr auto !important; column-gap: 20px !important; align-items: center; }
html[data-pager=big] #case-content .project-pagination-link img { width: 96px !important; height: 96px !important; object-fit: cover; border-radius: 14px !important; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
html[data-pager=big] #case-content .project-pagination-link:hover img { transform: scale(1.04); }
@media (max-width: 600px) { html[data-pager=big] #case-content .project-pagination-link { grid-template-columns: 64px 1fr auto !important; column-gap: 14px !important; } html[data-pager=big] #case-content .project-pagination-link img { width: 64px !important; height: 64px !important; border-radius: 10px !important; } }
html[data-pager=big] #case-content .project-pagination-link h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem) !important; line-height: 1.12 !important; letter-spacing: -.025em; margin: 8px 0 6px !important; transition: color .3s ease; }
html[data-pager=big] #case-content .project-pagination-link:hover h2 { color: var(--accent); }
html[data-pager=big] #case-content .project-pagination-link b { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
html[data-pager=big] #case-content .project-pagination-link:first-child:hover b { transform: translateX(-6px); }
html[data-pager=big] #case-content .project-pagination-link:last-child:hover b { transform: translateX(6px); }
/* 2 · Photo: each link is its project image, the title set over a dark fade */
html[data-pager=photo] #case-content .project-pagination { gap: 16px !important; }
html[data-pager=photo] #case-content .project-pagination-link { position: relative; overflow: hidden; min-height: 220px; padding: 24px 26px !important; border: 0 !important; border-radius: 18px; display: flex !important; flex-direction: column; justify-content: flex-end; color: #fff; isolation: isolate; }
html[data-pager=photo] #case-content .project-pagination-link img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; z-index: -2; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
html[data-pager=photo] #case-content .project-pagination-link::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(16 12 24 / .88), rgb(16 12 24 / .25) 70%); }
html[data-pager=photo] #case-content .project-pagination-link:hover img { transform: scale(1.05); }
html[data-pager=photo] #case-content .project-pagination-link :is(h2, p, span) { color: #fff !important; }
html[data-pager=photo] #case-content .project-pagination-link span { opacity: .75; }
html[data-pager=photo] #case-content .project-pagination-link b { position: absolute; top: 22px; right: 24px; color: #fff; }
/* 3 · Bar: one dark band across the page, previous on the left and next on the right */
html[data-pager=bar] #case-content .project-pagination { gap: 0 !important; background: var(--ink); border-radius: 18px; overflow: hidden; }
html[data-pager=bar] #case-content .project-pagination-link { padding: 26px 30px !important; border: 0 !important; color: var(--bg); transition: background-color .3s ease; }
html[data-pager=bar] #case-content .project-pagination-link + .project-pagination-link { border-left: 1px solid color-mix(in srgb, var(--bg) 15%, transparent) !important; }
html[data-pager=bar] #case-content .project-pagination-link:hover { background: color-mix(in srgb, var(--bg) 8%, transparent); }
html[data-pager=bar] #case-content .project-pagination-link :is(h2, p) { color: var(--bg) !important; }
html[data-pager=bar] #case-content .project-pagination-link p { opacity: .65; }
html[data-pager=bar] #case-content .project-pagination-link b { color: color-mix(in srgb, var(--accent) 55%, var(--bg)); }
/* Card: the earlier take, two soft cards */
html[data-pager=card] #case-content .project-pagination { gap: 16px !important; }
html[data-pager=card] #case-content .project-pagination-link { padding: 18px 22px !important; border: 0 !important; border-radius: 18px; background: color-mix(in srgb, var(--ink) 4%, transparent); transition: background-color .3s ease, transform .3s ease; }
html[data-pager=card] #case-content .project-pagination-link:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); transform: translateY(-2px); }
/* The contribution chart is the same size on every project page, not stretched to however tall the column beside it is. */
#case-content .case-summary .radar-figure { flex: none !important; }
@media (min-width:901px) { #case-content .case-summary section.contribution-radar { contain: none !important; height: auto !important; } }
#case-content .case-summary .radar-chart { width: min(100%, 400px) !important; height: auto !important; max-width: 400px !important; }
/* Home: Impact, the business results the work led to, between Selected work and the client wall. */
.impact .impact-sub { margin: 10px 0 0; color: var(--muted); font-size: 1.05rem; }
.impact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.impact-card { display: flex; flex-direction: column; padding: 30px 28px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background-color .35s ease; }
.impact-card:hover, .impact-card:focus-visible { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.impact-card p { margin: 0; }
.impact-big { font-size: clamp(2.6rem, 4.2vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -.035em; color: var(--accent); }
.impact-label { margin-top: 8px !important; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.impact-text { margin-top: 12px !important; color: var(--muted); font-size: .95rem; line-height: 1.55; flex: 1; }
.impact-src { margin-top: 20px !important; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.impact-src span { color: var(--accent); transition: transform .3s ease; display: inline-block; }
.impact-card:hover .impact-src span { transform: translate(2px, -2px); }
@media (max-width: 980px) { .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .impact-grid { grid-template-columns: 1fr; } .impact-card { padding: 24px 20px; } }
html[data-pager=bar] #case-content .project-pagination-link span { color: color-mix(in srgb, var(--accent) 45%, var(--bg)) !important; }
/* About hero, the stats (about-binary.js): a caption under the field, a counter, the label decoding, and five marks
   that fill over each stat's hold. */
.ab-hero-field.is-binary .ab-binary { bottom: 22%; }
.ab-bin-cap { position: absolute; left: calc(50% + 2vw); right: max(24px, calc(50vw - 700px)); bottom: 10%; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 18px; row-gap: 14px; pointer-events: auto; transition: opacity .6s ease; }
.ab-bin-count { margin: 0; font: 600 .74rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; color: var(--muted); }
.ab-bin-count b { color: var(--accent); font-weight: 700; margin-right: 6px; }
.ab-bin-label { margin: 0; min-height: 1.3em; font-size: clamp(1rem, 1.35vw, 1.2rem); font-weight: 600; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ab-bin-marks { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ab-bin-marks i { position: relative; height: 18px; cursor: pointer; }
.ab-bin-marks i::before, .ab-bin-marks s { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 2px; border-radius: 2px; background: var(--line); }
.ab-bin-marks s { background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); text-decoration: none; }
.ab-bin-marks i:hover::before { background: color-mix(in srgb, var(--accent) 35%, var(--line)); }
@media (max-width: 760px) { .ab-bin-cap { left: 16px; right: 16px; bottom: 2%; } }
@media (max-width: 760px) { /* phones: the field sits under the copy, not behind it */
  .ab-hero:has(.ab-hero-field.is-binary) { padding-bottom: calc(56vw + 120px); }
  .ab-hero-field.is-binary .ab-binary { top: auto !important; bottom: 96px !important; height: 56vw !important; left: 16px !important; right: 16px !important; }
  .ab-bin-cap { bottom: 8px !important; }
}
/* About story: the chapter label is just the number and the label, no rule between them. */
.curio-lead span:not([class])::after { display: none; }
/* The block header readout, monochrome: white at different strengths, the leading zeros picked out by weight alone. */
.btc-hud { color: rgb(255 255 255 / .82) !important; text-shadow: 0 0 6px rgb(255 255 255 / .25) !important; }
.btc-hud header b { color: #fff !important; }
.btc-hud header i, .btc-hud dt, .btc-hud .no { color: rgb(255 255 255 / .45) !important; }
.btc-hud .z, .btc-hud .ok { color: #fff !important; text-shadow: 0 0 8px rgb(255 255 255 / .55) !important; }
.btc-hud, .btc-hud * { border-color: rgb(255 255 255 / .2) !important; }
/* Dark (Nocturne, and the night scenes): the header silhouette goes quiet, a dim lavender shape that sits back behind
   the name instead of a bright cut-out; the flip book's silhouette page matches it. */
html[data-variant=nocturne] .identity img.identity-avatar,
html.is-night .identity img.identity-avatar { background: linear-gradient(175deg, #6d6283 0%, #4a4260 100%) !important; opacity: .9; }
/* ...except in the dark theme's header, night scenes included, where the dim shape read as a dark blot: it takes the light ink, as
   the light theme's silhouette takes the dark ink. */
html[data-variant=nocturne] .nav .identity img.identity-avatar { background: linear-gradient(175deg, #f1ecf7 0%, #c9b8e8 100%) !important; opacity: .92; }
html[data-variant=nocturne] .avatar-flip .ink, html.is-night .avatar-flip .ink { background: #6d6283 !important; }
html[data-variant=nocturne] .avatar-flip img, html.is-night .avatar-flip img { filter: brightness(.92) contrast(1.05); }
/* Results page */
.results-page { padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(64px, 8vw, 120px); }
.results-page .section-heading { padding-top: 0; }
.results-page h1 { margin: 0; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.02; letter-spacing: -.035em; }
.results-page .impact-sub { font-size: 1.15rem; margin-top: 14px; }
/* Phones: the header's links become a menu button that opens a full-screen sheet (nav-menu.js). */
.nav-burger, .menu-sheet { display: none; }
@media (max-width: 760px) {
  body>.nav nav, html[data-variant] body>.nav nav { display: none !important; }
  .nav-burger { display: grid; place-content: center; gap: 4px; position: relative; z-index: 210; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .nav-burger span { display: block; width: 18px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .2s ease; }
  html.menu-open .nav-burger span:first-child { transform: translateY(5.6px) rotate(45deg); }
  html.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
  html.menu-open .nav-burger span:last-child { transform: translateY(-5.6px) rotate(-45deg); }
  html.is-night .nav-burger, html[data-variant=nocturne] .nav-burger { color: #fff; border-color: rgb(255 255 255 / .28); }
  .menu-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: max(14px, env(safe-area-inset-top)) 5vw 0; height: 72px; box-sizing: content-box; }
  .menu-name { font-size: 1.25rem; font-weight: 400; color: var(--ink); text-decoration: none; letter-spacing: -.01em; } .menu-name b { font-weight: 800; }
  .menu-close { display: grid; place-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .menu-close span { display: block; width: 18px; height: 1.6px; border-radius: 2px; background: currentColor; }
  .menu-close span:first-child { transform: translateY(.8px) rotate(45deg); } .menu-close span:last-child { transform: translateY(-.8px) rotate(-45deg); }
  .menu-sheet { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 200; padding: 96px 28px max(28px, env(safe-area-inset-bottom)); overflow-y: auto; background: var(--bg); visibility: hidden; opacity: 0; transform: translateY(-10px); transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1), visibility 0s .4s; }
  html.menu-open .menu-sheet { visibility: visible; opacity: 1; transform: none; transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1), visibility 0s; }
  html.menu-open, html.menu-open body { overflow: hidden; }
  .menu-sheet nav { display: flex; flex-direction: column; }
  .menu-sheet nav a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 2rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; color: var(--ink); text-decoration: none; }
  .menu-sheet nav a[aria-current=page] { color: var(--accent); }
  .menu-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 28px; }
  .menu-foot .nav-resume { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; color: var(--ink); text-decoration: none; }
  .menu-foot .nav-resume svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
  .menu-foot .theme-toggle { margin: 0; color: var(--ink); border-color: var(--line); }
  html.menu-open .menu-sheet nav a, html.menu-open .menu-foot { animation: menu-in .5s cubic-bezier(.2,.8,.2,1) both; }
  html.menu-open .menu-sheet nav a:nth-child(2) { animation-delay: .03s; } html.menu-open .menu-sheet nav a:nth-child(3) { animation-delay: .06s; }
  html.menu-open .menu-sheet nav a:nth-child(4) { animation-delay: .09s; } html.menu-open .menu-sheet nav a:nth-child(5) { animation-delay: .12s; }
  html.menu-open .menu-foot { animation-delay: .16s; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { html.menu-open .menu-sheet nav a, html.menu-open .menu-foot { animation: none; } }
/* Selected work cards: the type, domain and contribution rows tightened, same layout, smaller marks and less air. */
#featured .feature-tags .tag-material, #featured .feature-tags .pill-icon { width: 30px !important; height: 30px !important; margin-right: 10px !important; }
#featured .feature-tags .pill-icon svg { width: 100%; height: 100%; }
#featured .feature-tags .tag-copy { gap: 1px !important; }
#featured .feature-tags .tag-copy small { font-size: .74rem !important; }
#featured .feature-tags .tag-copy>span { font-size: .98rem !important; line-height: 1.2 !important; }
#featured .feature-tags .domain-pill { padding-left: 18px !important; }
#featured .feature-tags>* { padding-top: 0 !important; padding-bottom: 12px !important; }
#featured .role { margin-top: 12px !important; padding-top: 12px !important; row-gap: 10px !important; align-items: center; }
#featured .role>div { font-size: .98rem !important; line-height: 1.25 !important; }
#featured .role>div small { font-size: .74rem !important; margin-bottom: 2px; }
#featured .role .feature-action { padding: 8px 14px !important; font-size: .8rem !important; }
/* More Work cards: the same spacing as Selected work (30px marks, 10px to the label, values on one line). Where a card
   is too narrow for the two side by side, they stack, one per row, rather than wrapping their words. */
#more-grid .mini-body>.mini-card-footer { gap: 12px !important; container-type: inline-size; }
#more-grid .mini-tags .tag-material, #more-grid .mini-tags .pill-icon { width: 30px !important; height: 30px !important; flex: none; }
#more-grid .mini-tags .tag-material { margin-right: 10px !important; flex-basis: 30px !important; }
#more-grid .mini-tags .pill-icon svg { width: 100%; height: 100%; }
#more-grid .mini-tags .project-pill, #more-grid .mini-tags .domain-pill { gap: 0 !important; align-items: center; }
#more-grid .mini-tags .tag-copy { gap: 1px !important; min-width: 0; }
#more-grid .mini-tags .tag-copy small { font-size: .74rem !important; }
#more-grid .mini-tags .tag-copy>span { font-size: .98rem !important; line-height: 1.2 !important; text-wrap: balance; }
#more-grid .mini-tags .domain-pill { padding-left: 18px !important; }
#more-grid .mini-tags>* { padding-bottom: 12px !important; }
@container (max-width: 335px) {
  #more-grid .mini-card-footer .mini-tags { grid-template-columns: 1fr !important; gap: 10px !important; }
  #more-grid .mini-card-footer .mini-tags .domain-pill { padding-left: 0 !important; border-left: 0 !important; }
  #more-grid .mini-card-footer .mini-tags .domain-pill::before, #more-grid .mini-card-footer .mini-tags::before, #more-grid .mini-card-footer .mini-tags::after { display: none !important; }
  #more-grid .mini-card-footer .mini-tags>* { padding-bottom: 0 !important; }
  #more-grid .mini-card-footer .mini-tags { padding-bottom: 12px !important; }
}
#more-grid .mini-project .mini-card-footer .mini-open { padding: 7px 14px !important; font-size: .8rem !important; min-height: 0 !important; }
/* Interactive thought leadership: one recording on its own, full width under the two windows. */
.case-solo { margin: 24px 0 0; border-radius: 22px; overflow: hidden; background: #0f0b16; box-shadow: 0 30px 60px -36px rgb(34 28 46 / .55); position: relative; }
.case-solo video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.case-solo figcaption { position: absolute; left: 16px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: rgb(15 11 22 / .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) { .case-solo video { animation: none; } }
/* Previous / next sits in a shaded band across the full width, a quiet footer above the site footer. */
html[data-pager=big] #case-content .case-body + .project-pagination, html[data-pager=big] #case-content .project-pagination {
  border-top: 0 !important; padding: 36px 0 44px !important; margin-bottom: var(--pager-pull, 0px) !important;
  background: color-mix(in srgb, var(--ink) 5%, var(--bg)); box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--ink) 5%, var(--bg)); clip-path: inset(0 -100vmax);
}
html[data-pager=big] #case-content .project-pagination-link { padding-top: 0 !important; }
html[data-pager=big] main#case-content:has(> .project-pagination) { padding-bottom: 0 !important; }
html[data-pager=big] body:has(#case-content > .project-pagination) > footer { margin-top: 0 !important; }

.ab-hero-field.is-binary .ab-binary { transform-style: preserve-3d; will-change: transform; }
.ab-bin-marks { display: none; }
.ab-bin-label { font-size: clamp(1.05rem, 1.45vw, 1.3rem) !important; }
/* Results page: a line drawing per card, cards rising in turn, a rising line behind the heading (results.js). */
.results-page .section-heading { position: relative; }
.impact-trace { position: absolute; right: 0; top: 10%; width: min(46%, 560px); height: 70%; overflow: visible; pointer-events: none; z-index: -1; }
.impact-trace path { fill: none; stroke: color-mix(in srgb, var(--accent) 35%, transparent); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1400; stroke-dashoffset: 0; }
.impact-trace circle { fill: var(--accent); }
html.impact-live .impact-trace path { stroke-dashoffset: 1400; transition: stroke-dashoffset 2.2s cubic-bezier(.3,.6,.2,1) .2s; }
html.impact-live .impact-trace circle { opacity: 0; transform-origin: 600px 12px; transform: scale(.2); transition: opacity .4s ease 2s, transform .6s cubic-bezier(.2,1.6,.4,1) 2s; }
html.impact-live .section-heading.is-in .impact-trace path { stroke-dashoffset: 0; }
html.impact-live .section-heading.is-in .impact-trace circle { opacity: 1; transform: none; }
.impact-card { position: relative; }
html.impact-live .impact-card { opacity: 0; transform: translateY(26px); transition: opacity .7s ease calc(var(--i) * .12s), transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .12s), background-color .35s ease; }
html.impact-live .impact-card.is-in { opacity: 1; transform: none; }
.impact-big { background: linear-gradient(100deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #6a5be0)); -webkit-background-clip: text; background-clip: text; color: transparent !important; padding-right: 40px; }
@media (max-width: 760px) { .impact-trace { display: none; } .impact-icon { top: 22px; right: 18px; } .impact-icon .pill-icon { width: 34px; height: 34px; } }
/* Résumé: the UK work as a horizontal mini timeline under the KPMG Advisory role: a small header (globe, label, span),
   then the stops side by side along one hairline, each with a dot, its year and a short line. The vertical take stays
   at ?inset=v. */
.resume-inset { margin-top: 28px !important; padding: 20px 22px 22px !important; border: 1px solid var(--line) !important; border-radius: 16px !important; background: none !important; box-shadow: none !important; }
.resume-inset b { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.resume-inset b::before { content: ''; width: 14px; height: 14px; flex: none; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M1.5 8h13M8 1.5c2 2 2.6 4 2.6 6.5S10 12.5 8 14.5M8 1.5C6 3.5 5.4 5.5 5.4 8S6 12.5 8 14.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M1.5 8h13M8 1.5c2 2 2.6 4 2.6 6.5S10 12.5 8 14.5M8 1.5C6 3.5 5.4 5.5 5.4 8S6 12.5 8 14.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.resume-inset b::after { content: '2014–2016'; margin-left: auto; font-weight: 600; letter-spacing: .06em; color: var(--muted); }
.resume-inset ul { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.resume-inset ul::before { content: ''; position: absolute; left: 4px; right: 0; top: 4px; height: 1px; background: linear-gradient(90deg, var(--accent), var(--line) 60%); }
.resume-inset li { position: relative; display: block; margin: 0; padding: 22px 0 0; font-size: .92rem; line-height: 1.5; color: var(--muted); }
.resume-inset li::before { content: '' !important; position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.resume-inset li span { display: block; margin-bottom: 4px; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
@media (max-width: 600px) { .resume-inset ul { grid-template-columns: 1fr; } .resume-inset ul::before { display: none; } }
/* Résumé: the UK work as a small nested timeline under the KPMG Advisory role: a pin-and-label header, then dated
   stops on a hairline, each with its own dot, text a step quieter than the role above. */
html.inset-v .resume-inset { position: relative; margin-top: 26px !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html.inset-v .resume-inset b { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 5px 12px 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 9%, transparent); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
html.inset-v .resume-inset b::before { content: ''; width: 12px; height: 12px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M1.5 8h13M8 1.5c2 2 2.6 4 2.6 6.5S10 12.5 8 14.5M8 1.5C6 3.5 5.4 5.5 5.4 8S6 12.5 8 14.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M1.5 8h13M8 1.5c2 2 2.6 4 2.6 6.5S10 12.5 8 14.5M8 1.5C6 3.5 5.4 5.5 5.4 8S6 12.5 8 14.5'/%3E%3C/svg%3E") center / contain no-repeat; }
html.inset-v .resume-inset ul { position: relative; list-style: none; margin: 0 0 0 6px; padding: 0 0 0 22px; display: grid; gap: 14px; border-left: 1px solid var(--line); }
html.inset-v .resume-inset li { position: relative; display: block; margin: 0; padding: 0; font-size: .95rem; line-height: 1.55; color: var(--muted); }
html.inset-v .resume-inset li::before { content: '' !important; position: absolute; left: -27.5px; top: .45em; width: 8px; height: 8px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--accent); }
html.inset-v .resume-inset li span { display: block; margin-bottom: 2px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--ink); }
/* The UK card's years in the same type as every other date on the résumé (.resume-period: small, regular, accent). */
.resume-inset li span, html.inset-v .resume-inset li span { margin-bottom: 6px !important; font-size: .71rem !important; font-weight: 400 !important; letter-spacing: normal !important; font-variant-numeric: tabular-nums; color: var(--accent) !important; }
.resume-inset b::after { font-size: .71rem; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--accent); }
.resume-inset b::after { content: none !important; } /* no span in the UK card's header; each stop carries its own year */
/* Résumé header: the page opens on who it is. The name leads, the title under it; then, on the two columns below, the
   email, LinkedIn and Save as PDF in the sidebar's column and a short summary in the content's, closed by one hairline.
   Phones stack it: name, title, the two links on one line, Save as PDF, the summary. */
.resume-page .resume-layout { padding-top: clamp(36px, 4.5vw, 60px); }
.resume-head { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 75px; padding: clamp(40px, 5.2vw, 72px) 0 clamp(30px, 3.4vw, 44px); border-bottom: 1px solid var(--line); }
.resume-head h1 { grid-column: 1 / -1; margin: 0; font-size: max(2.4rem, var(--page-title)); line-height: 1.02; letter-spacing: -.045em; color: var(--ink); }
.resume-head .resume-role { grid-column: 1 / -1; margin: 12px 0 0; font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--muted); }
.resume-contact { grid-column: 1; align-self: baseline; display: grid; align-content: start; justify-items: start; gap: 12px; margin: clamp(26px, 3vw, 38px) 0 0; padding: 0; list-style: none; }
.resume-contact a { display: inline-flex; align-items: baseline; gap: 10px; font-size: .92rem; font-weight: 600; line-height: 1.3; color: var(--ink); transition: color .2s; }
.resume-contact a:hover { color: var(--accent); }
.resume-contact a svg { flex: none; align-self: center; width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.resume-contact a svg.is-fill { width: 15px; height: 15px; margin-inline: .5px; fill: var(--accent); stroke: none; } /* the 15px mark in a 16px slot, so the three labels start together */
.resume-contact .for-print { display: none; } /* LinkedIn by name on screen, its address written out on paper */
.resume-head .resume-summary { grid-column: 2; align-self: baseline; margin: clamp(26px, 3vw, 38px) 0 0; max-width: 62ch; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.resume-head .nobreak { white-space: nowrap; } /* "as Experience Lead" stays on one line */
.resume-page .resume-content h2 { font-size: clamp(1.5rem, 2.2vw, 1.75rem); } /* a step under the name, so identity leads */
@media (max-width: 850px) { .resume-head { grid-template-columns: 190px minmax(0, 1fr); column-gap: 35px; } }
@media (max-width: 600px) {
  .resume-head { grid-template-columns: minmax(0, 1fr); padding: 30px 0 28px; }
  .resume-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 22px; }
  .resume-contact li:has(.resume-print) { flex-basis: 100%; }
  .resume-head .resume-summary { grid-column: 1; margin-top: 20px; font-size: 1rem; }
}
.resume-print { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 28px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; transition: background-color .25s, border-color .25s; }
.resume-print:hover { border-color: var(--ink); }
@media print { .resume-print { display: none; } }
/* The story thread has no free margin on the résumé (the sidebar sits there), so it stays off this page. */
html:has(.resume-page) .story-thread-canvas, html:has(.resume-page) [class^="story-"]:not(.story-thread-canvas) { display: none !important; }
/* Save as PDF sits in the header under the email and LinkedIn, a quiet accent link like the résumé's other links. */
.resume-print { margin: 0; padding: 0; border: 0; border-radius: 0 !important; gap: 10px; color: var(--accent); font-size: .92rem; font-weight: 600; line-height: 1.3; }
.resume-print svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.resume-print:hover { border-color: var(--line); color: var(--ink); }
.resume-print:hover svg { transform: translateY(2px); }
.resume-contact .resume-print:focus-visible { outline-offset: 6px; } /* the same ring as the two links above it */
/* Résumé on paper (Save as PDF): two US Letter pages that open on the header, the email and LinkedIn written out, then
   Selected impact, Experience, and the sidebar's four lists as one band at the foot. Dark ink on white in every style,
   nothing smaller than 9pt; no site header or footer, chapter timeline, dev controls, arrows or motion. The page's own
   footer (name and page count) fills the margin, which keeps Chrome's date, title and address out of it. */
@media print {
  @page resume {
    margin: .55in .6in .6in;
    @top-center { content: ''; } /* claims the top margin too, so Chrome adds no date or title there */
    @bottom-left { content: 'Matt Munz · Résumé'; font: 9pt 'Proxima Nova', 'Source Sans 3', sans-serif; color: #6b6172; }
    @bottom-right { content: counter(page) ' of ' counter(pages); font: 9pt 'Proxima Nova', 'Source Sans 3', sans-serif; color: #6b6172; }
  }
  main.resume-page { page: resume; max-width: none; margin: 0; padding: 0 !important; }
  html:has(.resume-page), html[data-variant]:has(.resume-page) { --bg: #fff !important; --ink: #221c2e !important; --muted: #6b6172 !important; --line: #d3d2dc !important; --accent: #ac2b6c !important; --t-meta: 9pt !important; color-scheme: light; background: #fff !important; }
  html:has(.resume-page) body { background: #fff !important; color: var(--ink) !important; font-size: 10pt !important; }
  body:has(> .resume-page) > :not(.resume-page) { display: none !important; }
  .resume-page *, .resume-page ::before, .resume-page ::after { animation: none !important; transition: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* header: name and title on the left, the two ways to write on the right, the summary across the full width */
  .resume-head { grid-template-columns: minmax(0, 1fr) auto; column-gap: 24pt; align-items: end; padding: 0 0 11pt; }
  .resume-head h1 { grid-column: 1; grid-row: 1; font-size: 25pt !important; line-height: 1; letter-spacing: -.035em; }
  .resume-head .resume-role { grid-column: 1; grid-row: 2; margin: 4pt 0 0; font-size: 11.5pt; }
  .resume-contact { grid-column: 2; grid-row: 1 / 3; align-self: auto; display: grid; justify-items: end; gap: 3pt; margin: 0; }
  .resume-contact li:has(.resume-print), .resume-contact .for-screen { display: none; }
  .resume-contact .for-print { display: inline; }
  .resume-contact a { gap: 5pt; font-size: 10pt; }
  .resume-contact a svg { display: none; } /* the addresses are written out, so no icons */
  .resume-head .resume-summary { grid-column: 1 / -1; grid-row: 3; align-self: auto; max-width: none; margin: 9pt 0 0; font-size: 10.5pt; line-height: 1.45; color: var(--ink); }
  /* section labels: each section's eyebrow, Experience's own title set the same way; the screen's display lines stay off */
  .resume-page .resume-layout { display: flex; flex-direction: column; gap: 0; padding-top: 12pt; }
  .resume-page .eyebrow, .resume-page .resume-history > h2 { margin: 0 0 5pt; font-family: var(--font-site); font-size: 9pt !important; font-weight: 600; line-height: 1.2; letter-spacing: .12em !important; text-transform: uppercase; color: var(--accent) !important; }
  .resume-evidence > h2, .resume-history > .eyebrow { display: none; }
  /* Selected impact: one row each, name beside what it did */
  .resume-evidence { padding: 0 0 6pt; border-bottom: 0; }
  .resume-evidence > a { grid-template-columns: 108pt minmax(0, 1fr); gap: 0 12pt; padding: 3.5pt 0; font-size: 10pt !important; line-height: 1.45; }
  .resume-evidence > a b { grid-column: 1; grid-row: 1; font-size: 10pt; color: var(--ink); }
  .resume-evidence > a span { grid-column: 2; grid-row: 1; color: #4f4658; }
  .resume-evidence > a i, .resume-history article > a span { display: none; }
  /* Experience: the timeline rail kept, each role's dates set to the right of its name */
  .resume-history { padding-top: 8pt; }
  .resume-history > article { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12pt; margin-left: 3pt; padding: 0 0 7pt 13pt; }
  .resume-history > article::before { top: 4pt; box-shadow: 0 0 0 3px #fff; }
  .resume-history > article > * { grid-column: 1 / -1; }
  .resume-history h3 { grid-column: 1 !important; grid-row: 1; margin: 0; font-size: 11.5pt !important; line-height: 1.25; }
  .resume-history .resume-period { grid-column: 2 !important; grid-row: 1; align-self: center; margin: 0; font-size: 9pt; }
  .resume-history .role-focus { margin: 1pt 0 3pt; font-size: 10pt !important; line-height: 1.35; }
  .resume-history > article > ul { margin: 0 0 2pt; padding-left: 12pt; }
  .resume-history > article > ul > li { margin: 0 0 1.5pt; font-size: 10pt !important; line-height: 1.45; color: #4f4658; text-wrap: pretty; }
  .resume-history > article > p:not(.role-focus) { margin: 0 0 2pt; font-size: 10pt !important; line-height: 1.45; color: #4f4658; }
  .resume-history > article > a { justify-self: start; font-size: 9pt; }
  .resume-history .resume-inset { margin: 4pt 0 3pt !important; padding: 7pt 10pt 8pt !important; border-radius: 8pt !important; }
  .resume-history .resume-inset b { margin: 0 0 7pt; font-size: 9pt; letter-spacing: .12em; }
  .resume-history .resume-inset b::before { width: 10pt; height: 10pt; }
  .resume-history .resume-inset ul { gap: 14pt; margin: 0; padding: 0; }
  .resume-history .resume-inset ul::before { top: 3px; }
  .resume-history .resume-inset li { margin: 0; padding: 10pt 0 0; font-size: 10pt !important; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
  .resume-history .resume-inset li::before { width: 7px; height: 7px; box-shadow: 0 0 0 3px #fff; }
  .resume-history .resume-inset li span { margin-bottom: 1pt !important; font-size: 9pt !important; }
  /* the sidebar's lists under Experience: Core practice, Tools and Education side by side, Industry range across the foot */
  .resume-page .resume-sidebar { order: 1; display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); gap: 8pt 24pt; margin-top: 3pt; padding-top: 9pt; border-top: 1px solid var(--line); break-inside: avoid; }
  .resume-page .resume-sidebar section { margin: 0; }
  .resume-page .resume-sidebar section:nth-child(3) { grid-column: 1 / -1; grid-row: 2; } /* Industry range */
  .resume-page .resume-sidebar ul { display: block; margin: 0; padding: 0; }
  .resume-page .resume-sidebar :is(li, p) { font-size: 10pt; line-height: 1.45; color: var(--ink); }
  .resume-page .resume-sidebar li { padding: 0 0 1.5pt; border: 0; }
  .resume-page .resume-sidebar p { margin: 0 0 4pt; }
}
/* Results grid: a last row with two cards lets the last one span the gap, so the grid stays a clean rectangle. */
@media (min-width: 981px) { .impact-grid > .impact-card:last-child:nth-child(3n+2) { grid-column: span 2; } }
@media (min-width: 601px) and (max-width: 980px) { .impact-grid > .impact-card:last-child:nth-child(odd) { grid-column: span 2; } }
@media (min-width: 981px) { .impact-grid > .impact-card:last-child:nth-child(3n+1) { grid-column: 1 / -1; } }
/* Results cards carry the same pictograms as the project pages and cards: 40px, the shared ink, stroke 1.8, with the
   light fill plane and detail layers from project-ui.js. */
.impact-icon { position: absolute; top: 26px; right: 24px; display: inline-flex; color: var(--tag-ink, #45315b); transition: transform .5s cubic-bezier(.2,.8,.2,1), color .3s ease; }
.impact-icon { width: 40px; height: 40px; }
.impact-icon .pill-icon { display: block; flex: none; width: 40px; height: 40px; max-width: none; margin: 0; stroke-width: 1.8; color: rgb(76,60,95); }
.impact-card:hover .impact-icon { transform: translateY(-2px); }
/* Dark: the shared pictograms lift to a soft lavender so they read on the night ground (they stayed in the light ink). */
html[data-variant=nocturne] :is(.fact-icon, .project-tags:not(.cf-tags) .tag-material, .impact-icon, .case-result h2, .contribution-radar h2) .pill-icon { color: #c9b8e8 !important; }
@media (max-width: 760px) { .impact-icon { top: 22px; right: 18px; width: 34px; height: 34px; } .impact-icon .pill-icon { width: 34px; height: 34px; } }

/* ======================================================================
   Home page section headings: entrance (section-heads.js)
   As a heading comes into view its words rise into place one after another, out of a soft blur as they fade in; the
   Selected work count then lands (with ?heads=tick its number ticks up to the total), the industries line rises in
   under its headline, and the Experience call to action's eyebrow leads its words while its line and button follow.
   Only opacity, transform and filter move, so nothing shifts. Nothing is hidden until the script has marked the page
   (.sh-ready), except Selected work, which sits out the hero's opening hold (intro-hold, always lifted within 2.5s) so
   it never shows for a moment before the script takes over. ?heads=mask (.sh-mask) keeps the earlier masked rise.
   ====================================================================== */
.sh-word, .sh-word>span { display: inline-block; }
/* The earlier take's masks reach a little past their word on every side (padding, cancelled by an equal negative
   margin), so no ascender, descender or overhang is trimmed and the line sits exactly where it did. */
html.sh-mask .sh-word { padding: .22em .14em; margin: -.22em -.14em; clip-path: inset(0); }
@media (prefers-reduced-motion: no-preference) {
  html.intro-hold:not(.sh-still) #work .selected-work-title:not(.is-in) { opacity: 0; }
  html.sh-ready.sh-mask .sh-head:not(.is-in) .sh-word>span { transform: translateY(125%); }
  html.sh-ready.sh-mask .sh-head.is-in .sh-word>span { transition: transform .95s cubic-bezier(.16,1,.3,1) calc(var(--sh-i, 0) * 70ms); }
  html.sh-ready:not(.sh-mask) .sh-head:not(.is-in) .sh-word>span,
  html.sh-ready .experience-cta.sh-head:not(.is-in) :is(.eyebrow, h2 + p, .experience-cta-link) { opacity: 0; }
  html.sh-ready:not(.sh-mask) .sh-head.is-in .sh-word>span { animation: sh-rise .85s cubic-bezier(.2,.8,.25,1) calc(var(--sh-i, 0) * 55ms) backwards; }
  html.sh-ready .experience-cta.sh-head.is-in .eyebrow { animation: sh-follow .7s cubic-bezier(.2,.8,.25,1) backwards; }
  html.sh-ready .experience-cta.sh-head.is-in h2 + p { animation: sh-follow .8s cubic-bezier(.2,.8,.25,1) var(--sh-after, 0s) backwards; }
  html.sh-ready .experience-cta.sh-head.is-in .experience-cta-link { animation: sh-follow .8s cubic-bezier(.2,.8,.25,1) calc(var(--sh-after, 0s) + 90ms) backwards; }
  html.sh-ready .sh-head:not(.is-in) .selected-work-count { opacity: 0; transform: scale(.6); }
  html.sh-ready .sh-head:not(.is-in) #focus-title { opacity: 0; transform: translateY(16px); }
  .sh-head.is-in .selected-work-count { transition: opacity .45s cubic-bezier(.25,.46,.45,.94) var(--sh-after, 0s), transform .8s cubic-bezier(.16,1,.3,1) var(--sh-after, 0s); }
  .sh-head.is-in #focus-title { transition: opacity .7s cubic-bezier(.25,.46,.45,.94) var(--sh-after, 0s), transform 1s cubic-bezier(.16,1,.3,1) var(--sh-after, 0s); }
}
@keyframes sh-rise { from { opacity: 0; transform: translateY(.42em); filter: blur(6px); } }
@keyframes sh-follow { from { opacity: 0; transform: translateY(12px); } }
/* With ?heads=tick the count's digits roll up through a one-digit window, soft at its top and bottom edges. */
.sh-reel { display: inline-flex; height: var(--sh-cell); line-height: var(--sh-cell); overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 26%, #000 74%, transparent); mask-image: linear-gradient(transparent, #000 26%, #000 74%, transparent); }
.sh-reel>span { display: flex; flex-direction: column; }
.sh-reel i { display: block; height: var(--sh-cell); font-style: normal; }
/* ==== Results cards: four takes (results.js, ?cards=). The ruled grid above is "current"; Infographic (info, the
   default) sets all seven as one plum sheet above the fold; Gallery (a) and Cinema (b) set each project's photograph
   with its pictogram and give the figure far more room. The pieces results.js adds (photo, period tag, decade axis,
   before-and-after bar) stay out of the ruled grid. ==== */
.impact-media { display: contents; }
.impact-photo, .impact-when, .impact-chart { display: none; }
html.impact-reset .impact-card, html.impact-reset .impact-card * { transition: none !important; }
html:is([data-cards=a], [data-cards=b], [data-cards=info]) .impact-grid > .impact-card:nth-child(n) { grid-column: auto; }
/* The before-and-after bar: the same revenue twice, the gain picked out at the end of the second. */
.impact-chart-cap { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.impact-bar { display: grid; grid-template-columns: 3.6em minmax(0, 1fr) 3.4em; align-items: center; column-gap: 12px; font-size: .8rem; }
.impact-bar i { font-style: normal; }
.impact-bar b { display: flex; gap: 2px; height: 10px; }
.impact-bar :is(s, u) { display: block; height: 100%; text-decoration: none; transform-origin: 0 50%; border-radius: 2px 5px 5px 2px; }
.impact-bar s { flex: none; width: var(--base); }
.impact-bar.is-after s { border-radius: 2px; }
.impact-bar u { flex: 1; }
.impact-bar em { font-style: normal; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.impact-also { justify-self: start; margin-top: 6px; padding: 6px 12px; border-radius: 999px; font-size: .76rem; font-weight: 700; letter-spacing: .01em; }
/* The take switch, shown only on localhost or inside the review frame. */
.impact-switch { display: flex; align-items: center; gap: 2px; width: max-content; max-width: 100%; margin: 0 0 18px auto; padding: 3px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--bg) 80%, #fff); font-size: .75rem; font-weight: 700; }
.impact-switch > span { flex: none; padding: 0 8px 0 10px; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.impact-switch button { flex: none; padding: 7px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.impact-switch button:hover { color: var(--ink); }
.impact-switch button[aria-pressed=true] { background: var(--ink); color: var(--bg); }
.impact-switch button:focus-visible { outline-offset: -2px; }
html[data-variant=nocturne] .impact-switch { background: color-mix(in srgb, #fff 4%, var(--bg)); }

/* A · Gallery: light framed cards in two columns. Each opens on its project's photograph, softly washed in the site's
   pink and lavender, with the pictogram in a glass medallion over the photograph's lower edge and the period in a glass
   tag; the figure sits large beneath. The 22% card leads across the full width, photograph beside the figure. */
html[data-cards=a] .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 30px); border: 0; }
html[data-cards=a] .impact-grid > .impact-card {
  --pad: clamp(10px, 1vw, 12px); --inset: clamp(12px, 1.5vw, 20px); --medal: clamp(56px, 5vw, 70px);
  padding: var(--pad) var(--pad) clamp(22px, 2.4vw, 30px); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 26px;
  background: color-mix(in srgb, #fff 66%, var(--bg)); box-shadow: 0 1px 2px rgb(34 28 46 / .04), 0 24px 50px -34px rgb(64 30 86 / .34);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease, background-color .35s ease;
}
html[data-cards=a] .impact-card > :is(p, .impact-chart) { margin-inline: var(--inset); }
html[data-cards=a] .impact-media { display: block; position: relative; aspect-ratio: 2.05; margin-bottom: clamp(26px, 2.8vw, 36px); }
html[data-cards=a] .impact-photo { display: block; position: absolute; inset: 0; overflow: hidden; isolation: isolate; border-radius: 18px; background: color-mix(in srgb, var(--accent) 14%, var(--bg)); }
html[data-cards=a] .impact-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); transition: transform 1.4s cubic-bezier(.2,.7,.2,1), filter .6s ease, scale 2s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * .11s); }
html[data-cards=a] .impact-photo::after { content: ''; position: absolute; inset: 0; mix-blend-mode: screen; opacity: .9; transition: opacity .8s ease;
  background: radial-gradient(85% 120% at 0% 100%, rgb(240 139 189 / .72), rgb(240 139 189 / .2) 46%, transparent 70%), radial-gradient(55% 80% at 100% 0%, rgb(184 164 219 / .5), transparent 72%); }
html[data-cards=a] .impact-icon { position: absolute; z-index: 2; top: auto; right: clamp(14px, 2vw, 26px); bottom: calc(var(--medal) / -2); width: var(--medal); height: var(--medal); display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 74%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .75), 0 0 0 1px color-mix(in srgb, var(--line) 55%, transparent), 0 16px 30px -14px rgb(50 24 70 / .45); }
html[data-cards=a] .impact-icon .pill-icon { width: 58%; height: 58%; }
html[data-cards=a] .impact-when { display: block; position: absolute; z-index: 2; left: 12px; top: 12px; padding: 7px 11px; border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1; letter-spacing: .03em; font-variant-numeric: tabular-nums; color: var(--ink);
  background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55); }
html[data-cards=a] .impact-big { width: max-content; max-width: calc(100% - 2 * var(--inset)); padding: 0 .08em .05em 0; font-size: clamp(2.9rem, 5.2vw, 4.6rem); line-height: .98; letter-spacing: -.045em;
  background: linear-gradient(100deg, var(--accent) 0%, #c23f84 42%, #7e5ad0 100%); -webkit-background-clip: text; background-clip: text; }
html[data-cards=a] .impact-label { margin-top: 12px !important; font-size: clamp(1.06rem, 1.2vw, 1.2rem); line-height: 1.3; letter-spacing: -.015em; color: var(--ink); }
html[data-cards=a] .impact-text { margin-top: 10px !important; max-width: 52ch; font-size: 1rem; line-height: 1.6; color: var(--muted); }
html[data-cards=a] .impact-src { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px !important; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--line) 75%, transparent); color: var(--ink); }
html[data-cards=a] .impact-src span { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); font-size: .9rem; letter-spacing: 0; color: var(--accent); transition: background-color .35s ease, border-color .35s ease, color .35s ease, transform .35s ease; }
html[data-cards=a] .impact-chart { display: grid; gap: 9px; max-width: 440px; margin-top: 20px; color: var(--muted); }
html[data-cards=a] .impact-bar s { background: color-mix(in srgb, var(--accent) 22%, var(--bg)); }
html[data-cards=a] .impact-bar u { background: linear-gradient(90deg, var(--accent), #8a5ad6); }
html[data-cards=a] :is(.impact-bar em, .impact-also) { color: var(--ink); }
html[data-cards=a] .impact-also { box-shadow: inset 0 0 0 1px var(--line); }
@media (min-width: 761px) { /* the lead: photograph on the left, the figure and its bar on the right */
  html[data-cards=a] .impact-grid > .impact-card:is(:first-child, :last-child:nth-child(even)) {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: minmax(clamp(20px, 3vw, 44px), 1fr) repeat(5, auto) minmax(clamp(20px, 3vw, 44px), 1fr); column-gap: clamp(30px, 4.4vw, 68px); padding: var(--pad); }
  html[data-cards=a] .impact-card:is(:first-child, :last-child:nth-child(even)) .impact-media { grid-column: 1; grid-row: 1 / -1; aspect-ratio: auto; min-height: clamp(330px, 33vw, 470px); margin: 0; }
  html[data-cards=a] .impact-card:is(:first-child, :last-child:nth-child(even)) > :is(p, .impact-chart) { grid-column: 2; margin-inline: 0 clamp(16px, 3vw, 44px); }
  html[data-cards=a] .impact-card:is(:first-child, :last-child:nth-child(even)) .impact-big { grid-row: 2; font-size: clamp(4.6rem, 8.6vw, 8.6rem); line-height: .9; }
  html[data-cards=a] .impact-card:is(:first-child, :last-child:nth-child(even)) .impact-label { grid-row: 3; }
  html[data-cards=a] .impact-card:is(:first-child, :last-child:nth-child(even)) .impact-chart { grid-row: 4; }
  html[data-cards=a] .impact-card:is(:first-child, :last-child:nth-child(even)) .impact-text { grid-row: 5; }
  html[data-cards=a] .impact-card:is(:first-child, :last-child:nth-child(even)) .impact-src { grid-row: 6; }
  html[data-cards=a] .impact-card:is(:first-child, :last-child:nth-child(even)) .impact-icon { right: calc(var(--medal) / -2); bottom: clamp(22px, 2.6vw, 36px); }
  /* the Trane rep and his iPad stay in frame however narrow the photograph gets, and the wash keeps off his hands */
  html[data-cards=a] .impact-card:first-child .impact-photo img { object-position: 18% 50%; }
  html[data-cards=a] .impact-card:first-child .impact-photo::after { background: radial-gradient(70% 90% at 100% 100%, rgb(240 139 189 / .55), rgb(240 139 189 / .14) 46%, transparent 70%), radial-gradient(50% 70% at 100% 0%, rgb(184 164 219 / .45), transparent 72%); }
}
@media (max-width: 760px) {
  html[data-cards=a] .impact-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-cards=a] .impact-grid > .impact-card { border-radius: 22px; }
  html[data-cards=a] .impact-photo { border-radius: 15px; }
  html[data-cards=a] .impact-media { aspect-ratio: 1.75; }
  html[data-cards=a] .impact-grid > .impact-card:first-child .impact-big { font-size: clamp(4.2rem, 21vw, 5.6rem); }
}
/* Gallery at night: the cards a step above the ground, the wash quieter, the glass dark, the figure in the night gradient. */
html[data-variant=nocturne][data-cards=a] .impact-grid > .impact-card { background: color-mix(in srgb, #fff 3.5%, var(--bg)); border-color: rgb(255 255 255 / .07); box-shadow: 0 30px 60px -40px rgb(0 0 0 / .9); }
html[data-variant=nocturne][data-cards=a] .impact-photo img { filter: saturate(.85) brightness(.9); }
html[data-variant=nocturne][data-cards=a] .impact-photo::after { opacity: .5; }
html[data-variant=nocturne][data-cards=a] :is(.impact-icon, .impact-when) { background: rgb(18 13 26 / .6); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), 0 16px 30px -14px rgb(0 0 0 / .7); }
html[data-variant=nocturne][data-cards=a] .impact-big { background-image: linear-gradient(100deg, #f7a8cc, #f08bbd 40%, #b8a4db); }
html[data-variant=nocturne][data-cards=a] .impact-src span { border-color: rgb(255 255 255 / .16); }
html[data-variant=nocturne][data-cards=a] .impact-bar s { background: color-mix(in srgb, var(--accent) 36%, var(--bg)); }
html[data-variant=nocturne][data-cards=a] .impact-bar u { background: linear-gradient(90deg, #f08bbd, #b8a4db); }
html[data-variant=nocturne][data-cards=a] .impact-also { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
/* Gallery arriving: each card rises, its photograph settles from a slight zoom, the medallion springs in as its
   pictogram draws itself, the figure rises out of its line and the bars grow. Hover lifts the card and clears the wash. */
html.impact-live[data-cards=a] .impact-grid > .impact-card { opacity: 0; transform: none; translate: 0 36px;
  transition: opacity .8s ease calc(var(--i) * .11s), translate 1.1s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .11s), transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease, background-color .35s ease; }
html.impact-live[data-cards=a] .impact-grid > .impact-card.is-in { opacity: 1; translate: none; }
html.impact-live[data-cards=a] .impact-photo img { scale: 1.14; }
html.impact-live[data-cards=a] .is-in .impact-photo img { scale: 1; }
html.impact-live[data-cards=a] .impact-icon { opacity: 0; scale: .55; transition: opacity .5s ease calc(var(--i) * .11s + .45s), scale .9s cubic-bezier(.3,1.45,.45,1) calc(var(--i) * .11s + .45s), transform .5s cubic-bezier(.2,.8,.2,1); }
html.impact-live[data-cards=a] .is-in .impact-icon { opacity: 1; scale: 1; }
html[data-cards=a] .impact-grid > .impact-card:is(:hover, :focus-visible) { background: color-mix(in srgb, #fff 84%, var(--bg)); transform: translateY(-4px); box-shadow: 0 1px 2px rgb(34 28 46 / .05), 0 36px 70px -36px rgb(64 30 86 / .5); }
html[data-variant=nocturne][data-cards=a] .impact-grid > .impact-card:is(:hover, :focus-visible) { background: color-mix(in srgb, #fff 5.5%, var(--bg)); box-shadow: 0 0 0 1px rgb(240 139 189 / .16), 0 40px 80px -40px rgb(240 139 189 / .28); }
html[data-cards=a] .impact-card:is(:hover, :focus-visible) .impact-photo img { transform: scale(1.045); filter: none; }
html[data-cards=a] .impact-card:is(:hover, :focus-visible) .impact-photo::after { opacity: .28; }
html[data-cards=a] .impact-card:is(:hover, :focus-visible) .impact-src span { background: var(--accent); border-color: var(--accent); color: #fff; }
html[data-variant=nocturne][data-cards=a] .impact-card:is(:hover, :focus-visible) .impact-src span { color: #0f0b16; }

/* B · Cinema: a bento of dark plum tiles, the 22% card and the last one wide. Each photograph fills the top of its tile
   and fades into the plum (on the wide tiles it fills the right and fades leftward), so the white type always sits on
   solid colour and the people in the photographs stay clear of it; the pictogram sits in a dark glass disc and the
   period in a dark glass tag across the top. The figures share a line across each row. */
html[data-cards=b] .impact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); border: 0; }
html[data-cards=b] .impact-grid > .impact-card {
  --open: clamp(170px, 16vw, 230px);
  position: relative; isolation: isolate; overflow: hidden; min-height: clamp(440px, 37vw, 540px);
  padding: var(--open) clamp(20px, 2.3vw, 32px) clamp(20px, 2.3vw, 30px); border: 0; border-radius: 24px; background: #1b1424; color: #fff;
  box-shadow: 0 30px 60px -38px rgb(40 18 60 / .55);
}
html[data-cards=b] .impact-grid > .impact-card:is(:hover, :focus-visible) { background: #1b1424; }
html[data-cards=b] .impact-media { display: block; position: absolute; inset: 0; z-index: -1; }
/* the photograph fills the top of the tile and fades into the plum, so the type below it sits on solid colour */
html[data-cards=b] .impact-photo { display: block; position: absolute; inset: 0 0 auto; height: calc(var(--open) + 120px); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 42%, transparent); mask-image: linear-gradient(180deg, #000 42%, transparent); }
html[data-cards=b] .impact-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.04); transition: transform 1.8s cubic-bezier(.2,.7,.2,1), scale 2.2s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * .11s); }
html[data-cards=b] .impact-card:first-child .impact-photo img { object-position: 16% 40%; }
html[data-cards=b] .impact-photo::before { content: ''; position: absolute; inset: 0; z-index: 1; mix-blend-mode: soft-light; background: linear-gradient(150deg, rgb(240 139 189 / .55), transparent 48%, rgb(110 80 190 / .5)); }
html[data-cards=b] .impact-photo::after { content: ''; position: absolute; inset: 0; z-index: 1; transition: opacity .8s ease;
  background: linear-gradient(180deg, rgb(17 11 25 / .5) 0%, rgb(17 11 25 / .06) 26%, rgb(17 11 25 / .3) 52%, rgb(17 11 25 / .8) 84%); }
html[data-cards=b] .impact-icon { position: absolute; z-index: 2; top: clamp(16px, 2vw, 24px); left: clamp(16px, 2vw, 24px); right: auto; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%;
  background: rgb(17 11 25 / .5); -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
html[data-cards=b] .impact-icon .pill-icon { width: 34px; height: 34px; }
html[data-cards=b] .results-page .impact-grid .impact-card .impact-icon .pill-icon { color: #f6effc !important; }
html[data-cards=b] .impact-when { display: block; position: absolute; z-index: 2; top: calc(clamp(16px, 2vw, 24px) + 16px); right: clamp(16px, 2vw, 24px); padding: 7px 12px; border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: #fff;
  background: rgb(17 11 25 / .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
html[data-cards=b] .impact-big { width: max-content; max-width: 100%; padding: 0 .08em .05em 0; font-size: clamp(2.8rem, 4.6vw, 4.6rem); line-height: 1.02; letter-spacing: -.045em;
  background: linear-gradient(100deg, #fff 0%, #fff 34%, #f7b3d3 70%, #cdbcf0 100%); -webkit-background-clip: text; background-clip: text; }
html[data-cards=b] .impact-label { margin-top: 16px !important; font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.3; letter-spacing: -.015em; color: #fff; }
html[data-cards=b] .impact-text { flex: 1 0 auto; margin-top: 10px !important; max-width: 46ch; font-size: .98rem; line-height: 1.58; color: rgb(255 255 255 / .8); }
html[data-cards=b] .impact-src { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px !important; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .16); color: rgb(255 255 255 / .8); }
html[data-cards=b] .impact-src span { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); font-size: .9rem; letter-spacing: 0; color: #fff; transition: background-color .35s ease, color .35s ease, transform .35s ease; }
html[data-cards=b] .impact-chart { display: grid; gap: 9px; max-width: 420px; margin-top: 20px; color: rgb(255 255 255 / .72); }
html[data-cards=b] .impact-bar s { background: rgb(255 255 255 / .3); }
html[data-cards=b] .impact-bar u { background: linear-gradient(90deg, #f7a8cc, #f08bbd 50%, #c9b8e8); }
html[data-cards=b] :is(.impact-bar em, .impact-also) { color: #fff; }
html[data-cards=b] .impact-also { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28); }
@media (min-width: 1101px) {
  html[data-cards=b] .impact-grid > .impact-card:is(:first-child, :last-child:nth-child(3n+1)) { grid-column: span 2; }
  html[data-cards=b] .impact-grid > .impact-card:last-child:nth-child(3n) { grid-column: 1 / -1; }
  html[data-cards=b] .impact-grid > .impact-card:is(:first-child, :last-child:nth-child(3n+1), :last-child:nth-child(3n)) { padding: clamp(100px, 8vw, 116px) 50% clamp(24px, 2.6vw, 34px) clamp(26px, 3vw, 40px); }
  html[data-cards=b] .impact-card:is(:first-child, :last-child:nth-child(3n+1), :last-child:nth-child(3n)) .impact-photo { inset: 0 0 0 45%; height: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%); mask-image: linear-gradient(90deg, transparent, #000 18%); }
  html[data-cards=b] .impact-card:is(:first-child, :last-child:nth-child(3n+1), :last-child:nth-child(3n)) .impact-photo::after { background: linear-gradient(180deg, rgb(17 11 25 / .45), transparent 24%, transparent 76%, rgb(17 11 25 / .35)); }
  html[data-cards=b] .impact-card:is(:first-child, :last-child:nth-child(3n+1), :last-child:nth-child(3n)) .impact-big { font-size: clamp(4.4rem, 8vw, 8rem); line-height: .9; }
}
@media (min-width: 601px) and (max-width: 1100px) {
  html[data-cards=b] .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-cards=b] .impact-grid > .impact-card:is(:first-child, :last-child:nth-child(even)) { grid-column: 1 / -1; padding: clamp(96px, 10vw, 110px) 48% clamp(22px, 2.6vw, 30px) clamp(24px, 3vw, 36px); }
  html[data-cards=b] .impact-card:is(:first-child, :last-child:nth-child(even)) .impact-photo { inset: 0 0 0 43%; height: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%); mask-image: linear-gradient(90deg, transparent, #000 18%); }
  html[data-cards=b] .impact-card:is(:first-child, :last-child:nth-child(even)) .impact-photo::after { background: linear-gradient(180deg, rgb(17 11 25 / .45), transparent 24%, transparent 76%, rgb(17 11 25 / .35)); }
  html[data-cards=b] .impact-card:is(:first-child, :last-child:nth-child(even)) .impact-big { font-size: clamp(4.4rem, 9vw, 7rem); line-height: .9; }
  html[data-cards=b] .impact-big { font-size: clamp(2.8rem, 6.6vw, 4.4rem); }
}
@media (max-width: 600px) {
  html[data-cards=b] .impact-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-cards=b] .impact-grid > .impact-card { --open: clamp(200px, 58vw, 240px); min-height: 0; border-radius: 20px; }
  html[data-cards=b] .impact-grid > .impact-card:first-child .impact-big { font-size: clamp(4rem, 20vw, 5.4rem); }
}
/* Cinema at night: a hairline keeps each tile's edge where its dark foot meets the ground. */
html[data-variant=nocturne][data-cards=b] .impact-grid > .impact-card { box-shadow: 0 30px 60px -38px rgb(0 0 0 / .9); }
html[data-variant=nocturne][data-cards=b] .impact-card::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); pointer-events: none; transition: box-shadow .5s ease; }
html[data-variant=nocturne][data-cards=b] .impact-card:is(:hover, :focus-visible)::after { box-shadow: inset 0 0 0 1px rgb(240 139 189 / .34); }
/* Cinema arriving: each tile opens upward from a slight inset, its photograph settles from a closer zoom, the glass
   pieces spring in, the figure rises out of its line and the lines beneath follow one by one. Hover drifts the
   photograph closer. */
html.impact-live[data-cards=b] .impact-grid > .impact-card { opacity: 0; transform: none; translate: 0 40px; clip-path: inset(9% 0 0 0 round 24px);
  transition: opacity .8s ease calc(var(--i) * .11s), translate 1.1s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .11s), clip-path 1.2s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .11s); }
html.impact-live[data-cards=b] .impact-grid > .impact-card.is-in { opacity: 1; translate: none; clip-path: inset(-30px -30px -80px round 54px); } /* wide enough to keep the tile's shadow whole */
html.impact-live[data-cards=b] .impact-photo img { scale: 1.12; }
html.impact-live[data-cards=b] .is-in .impact-photo img { scale: 1; }
html.impact-live[data-cards=b] :is(.impact-icon, .impact-when) { opacity: 0; scale: .7; transition: opacity .6s ease calc(var(--i) * .11s + .5s), scale .9s cubic-bezier(.3,1.45,.45,1) calc(var(--i) * .11s + .5s), transform .5s cubic-bezier(.2,.8,.2,1); }
html.impact-live[data-cards=b] .is-in :is(.impact-icon, .impact-when) { opacity: 1; scale: 1; }
html.impact-live[data-cards=b] .impact-card > :is(.impact-label, .impact-chart, .impact-text, .impact-src) { opacity: 0; translate: 0 16px;
  transition: opacity .7s ease calc(var(--i) * .11s + .3s + var(--k, 0) * .08s), translate .9s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .11s + .3s + var(--k, 0) * .08s); }
html.impact-live[data-cards=b] .impact-card.is-in > :is(.impact-label, .impact-chart, .impact-text, .impact-src) { opacity: 1; translate: none; }
html[data-cards=b] .impact-card:is(:hover, :focus-visible) .impact-photo img { transform: scale(1.03); }
html[data-cards=b] .impact-card:is(:hover, :focus-visible) .impact-src span { background: #f08bbd; color: #1b1424; box-shadow: none; }

/* The picture-led takes and the Infographic, arriving: the pictogram draws itself in, the figure rises out of a slot the size of its own
   line, and the before-and-after bars grow from the left, the gain last. */
html.impact-live:is([data-cards=a], [data-cards=b], [data-cards=info]) .impact-icon path[pathLength] { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.4,.1,.2,1) calc(var(--i) * .11s + .6s); }
html.impact-live:is([data-cards=a], [data-cards=b], [data-cards=info]) .is-in .impact-icon path[pathLength] { stroke-dashoffset: 0; }
html.impact-live:is([data-cards=a], [data-cards=b], [data-cards=info]) .impact-big { translate: 0 1.05em; clip-path: inset(-1.05em -8% 1.05em -8%);
  transition: translate 1s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .11s + .22s), clip-path 1s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .11s + .22s); }
html.impact-live:is([data-cards=a], [data-cards=b], [data-cards=info]) .is-in .impact-big { translate: none; clip-path: inset(-.2em -8% -.3em -8%); }
html.impact-live:is([data-cards=a], [data-cards=b], [data-cards=info]) .impact-bar :is(s, u) { transform: scaleX(0); transition: transform 1s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .11s + .6s); }
html.impact-live:is([data-cards=a], [data-cards=b], [data-cards=info]) .impact-bar u { transition-delay: calc(var(--i) * .11s + 1.3s); }
html.impact-live:is([data-cards=a], [data-cards=b], [data-cards=info]) .is-in .impact-bar :is(s, u) { transform: none; }
html.impact-live:is([data-cards=a], [data-cards=b], [data-cards=info]) :is(.impact-bar em, .impact-also) { opacity: 0; transition: opacity .6s ease calc(var(--i) * .11s + 1.8s); }
html.impact-live:is([data-cards=a], [data-cards=b], [data-cards=info]) .is-in :is(.impact-bar em, .impact-also) { opacity: 1; }
/* Only the number carries the gradient, so 22% leads; the words that name a result are set in solid ink, a step smaller. */
html:is([data-cards=a], [data-cards=b]) .impact-grid > .impact-card > .impact-big:not([data-num]) { background-image: none; color: var(--ink) !important; }
html[data-cards=b] .impact-grid > .impact-card > .impact-big:not([data-num]) { color: #fff !important; }
html[data-cards=a] .impact-grid > .impact-card > .impact-big:not([data-num]) { font-size: clamp(2.6rem, 4.4vw, 3.9rem); }
html[data-cards=b] .impact-grid > .impact-card > .impact-big:not([data-num]) { font-size: clamp(2.6rem, 4vw, 4rem); }
@media (min-width: 601px) and (max-width: 1100px) { html[data-cards=b] .impact-grid > .impact-card > .impact-big:not([data-num]) { font-size: clamp(2.6rem, 5.6vw, 3.8rem); } }
/* C · Infographic (info, the default). The seven results as one plum sheet split by hairlines: the 22% stands
   tall at the left with its before-and-after bar, the other six are small multiples with one anatomy (figure, label,
   line, source), and one 2011 to 2021 axis closes the sheet at its foot with every result marked on it by its word.
   Colour is kept for data: the 22%, the revenue gain, the marks on the axis and the US + UK join. The photographs sit
   back as faint plum duotones behind the pictograms. */
html[data-cards=info] :is(.impact-when, .impact-also) { display: none; } /* the margin is said in the line beneath */
.impact-axis, .impact-src time { display: none; }

/* the page head, compact, so the sheet gets the rest of the window */
html[data-cards=info] .results-page { padding-top: clamp(18px, 3.4vh, 44px); padding-bottom: clamp(14px, 2.4vh, 28px); }
html[data-cards=info] .results-page .section-heading { padding-bottom: clamp(14px, 2.6vh, 28px); }
html[data-cards=info] .results-page h1 { font-size: clamp(2.3rem, min(4.4vw, 6.4vh), 4rem); }
html[data-cards=info] .results-page .impact-sub { margin-top: clamp(4px, 1vh, 10px); font-size: clamp(1rem, 1.9vh, 1.15rem); }

/* the sheet: one plum object, the 1px gaps showing its hairline colour; from tablets up the axis closes its foot */
html[data-cards=info] .impact-grid { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; min-height: min-content; border: 0; border-radius: 22px; overflow: hidden;
  background: color-mix(in srgb, #fff 11%, #1b1424); box-shadow: 0 30px 60px -38px rgb(40 18 60 / .55); }
html[data-cards=info] .impact-grid > .impact-card {
  container-type: inline-size; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-width: 0;
  padding: clamp(14px, 2.1vh, 22px) clamp(16px, 1.5vw, 22px) clamp(12px, 1.8vh, 18px); border: 0; border-radius: 0;
  background: #1b1424; color: #fff; transition: background-color .4s ease;
}
html[data-cards=info] .impact-grid > .impact-card:is(:hover, :focus-visible) { background: #211830; }
/* focus: a pink ring drawn above the photograph and the disc (an outline would be clipped by the sheet's corners) */
html[data-cards=info] .impact-grid > .impact-card:focus-visible { outline: 0; }
html[data-cards=info] .impact-grid > .impact-card:focus-visible::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 2px #f08bbd; pointer-events: none; }
html[data-cards=info] .impact-media { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* the photograph: a faint plum duotone held in the top corner, behind the pictogram, clear of the type */
html[data-cards=info] .impact-photo { display: block; position: absolute; top: 0; right: 0; width: 58%; height: 64%; overflow: hidden; opacity: .26; transition: opacity .6s ease;
  -webkit-mask-image: radial-gradient(100% 100% at 100% 0%, #000 10%, rgb(0 0 0 / .4) 40%, transparent 68%); mask-image: radial-gradient(100% 100% at 100% 0%, #000 10%, rgb(0 0 0 / .4) 40%, transparent 68%); }
html[data-cards=info] .impact-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(.95); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
html[data-cards=info] .impact-photo::after { content: ''; position: absolute; inset: 0; z-index: 1; mix-blend-mode: color; background: linear-gradient(150deg, #f08bbd, #7a5ad0); }
html[data-cards=info] .impact-icon { position: absolute; z-index: 2; top: clamp(12px, 1.8vh, 18px); right: clamp(12px, 1.2vw, 18px); left: auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: rgb(17 11 25 / .5); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); }
html[data-cards=info] .impact-icon .pill-icon { width: 22px; height: 22px; }
html[data-cards=info] .results-page .impact-grid .impact-card .impact-icon .pill-icon { color: #f6effc !important; }

/* one type scale: every small cell's figure at one size (as large as Knowledge allows beside its disc), the lead's
   about three times it; only the number carries the gradient */
html[data-cards=info] .impact-big { width: max-content; max-width: calc(100% - 38px); padding: 0 .06em .04em 0; font-size: clamp(2rem, 18cqi, 3.4rem); line-height: .98; letter-spacing: -.05em; }
html[data-cards=info] .impact-grid > .impact-card > .impact-big[data-num] { background-image: linear-gradient(100deg, #fff 0%, #fff 34%, #f7b3d3 70%, #cdbcf0 100%); }
html[data-cards=info] .impact-grid > .impact-card > .impact-big:not([data-num]) { background: none; color: #fff !important; }
html[data-cards=info] .impact-label { margin-top: clamp(4px, .9vh, 8px) !important; font-size: clamp(.9rem, min(1.1vw, 1.9vh), 1.06rem); line-height: 1.22; letter-spacing: -.01em; color: #fff; text-wrap: pretty; }
html[data-cards=info] .impact-text { flex: none; margin-top: clamp(4px, .8vh, 8px) !important; font-size: clamp(.8rem, min(.98vw, 1.6vh), .92rem); line-height: 1.42; color: rgb(255 255 255 / .7); text-wrap: pretty; }
/* US + UK: the two practices drawn as two nodes joined by one line (the + stays in the text for screen readers) */
html[data-cards=info] .impact-join { display: inline-block; width: .95em; height: .26em; margin: 0 .04em; vertical-align: .26em; overflow: hidden; color: transparent;
  background: radial-gradient(circle, #f7a8cc .1em, transparent .11em) 0 50% / .26em .26em no-repeat, radial-gradient(circle, #cdbcf0 .1em, transparent .11em) 100% 50% / .26em .26em no-repeat, linear-gradient(90deg, #f7a8cc, #cdbcf0) .13em 50% / calc(100% - .26em) .07em no-repeat; }
html[data-cards=info] .impact-join > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the source at each cell's foot, in sentence case and readable; from tablets up the period is read off the axis, so
   it stays in the link for screen readers only */
html[data-cards=info] .impact-src { display: flex; align-items: baseline; gap: 4px 10px; margin-top: auto !important; padding-top: clamp(10px, 1.4vh, 14px); font-size: .75rem; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.3; color: rgb(255 255 255 / .66); text-wrap: balance; }
html[data-cards=info] .impact-src time { display: inline; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[data-cards=info] .impact-src > span { flex: none; margin-left: auto; color: #f7a8cc; transition: translate .35s ease; }

/* the decade axis: 2011 to 2021 once, along the sheet's foot, one tick a year; every result marked on it and named by
   its word (a bar for a span, a dot for a year, a diamond for a showcase, a dot with a short open fade for the
   multiyear workstream, which states no end). Pointing at a cell lights its mark and quiets the rest. */
@media (min-width: 761px) {
  html[data-cards=info] .impact-grid { border-radius: 22px 22px 0 0; box-shadow: none; }
  html[data-cards=info] .impact-axis { display: block; position: relative; z-index: 1; padding: clamp(10px, 1.5vh, 14px) clamp(26px, 2.4vw, 34px) clamp(10px, 1.4vh, 14px);
    border-top: 1px solid color-mix(in srgb, #fff 11%, #1b1424); border-radius: 0 0 22px 22px; background: #1b1424; color: #fff; box-shadow: 0 30px 60px -38px rgb(40 18 60 / .55); }
  html[data-cards=info] .impact-axis-line { position: relative; display: block; height: 9px; margin-top: 21px; }
  html[data-cards=info] .impact-axis-line::before { content: ''; position: absolute; left: -10px; right: -10px; bottom: 2px; height: 1px; background: rgb(255 255 255 / .2); }
  html[data-cards=info] .impact-axis-line::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 5px; border-right: 1px solid rgb(255 255 255 / .22);
    background: repeating-linear-gradient(90deg, rgb(255 255 255 / .22) 0 1px, transparent 1px calc(var(--y) * 100%)); }
  html[data-cards=info] .impact-axis-mark { position: absolute; inset: 0; transition: opacity .3s ease; }
  html[data-cards=info] .impact-axis-mark i { position: absolute; z-index: 1; bottom: 0; left: calc(var(--a) * 100% - 3px); width: calc((var(--b) - var(--a)) * 100% + 6px); height: 6px; border-radius: 3px; transform-origin: 3px 50%;
    background: linear-gradient(90deg, #f7a8cc, #f08bbd 55%, #cdbcf0); box-shadow: 0 0 0 3px #1b1424, 0 0 12px rgb(240 139 189 / .55); transition: box-shadow .3s ease; }
  html[data-cards=info] .impact-axis-mark[data-mark=event] i { width: 7px; height: 7px; left: calc(var(--a) * 100% - 3.5px); border-radius: 1px; transform: rotate(45deg); transform-origin: 50% 50%; }
  html[data-cards=info] .impact-axis-mark[data-mark=open] i { width: calc(var(--y) * 100% + 6px); box-shadow: none;
    background: radial-gradient(circle at 3px 50%, #f08bbd 2.6px, transparent 3.2px), repeating-linear-gradient(90deg, rgb(240 139 189 / .9) 0 4px, transparent 4px 7px) 9px 50% / 100% 2px no-repeat;
    -webkit-mask-image: linear-gradient(90deg, #000 15%, transparent); mask-image: linear-gradient(90deg, #000 15%, transparent); }
  html[data-cards=info] .impact-axis-mark em { position: absolute; bottom: 15px; left: calc(var(--c) * 100%); translate: calc(var(--c) * -100%) 0; font-style: normal; font-size: .75rem; font-weight: 700; line-height: 1.25; white-space: nowrap; color: rgb(255 255 255 / .88); transition: color .3s ease; }
  html[data-cards=info] .impact-axis.is-brushing .impact-axis-mark:not(.is-hot) { opacity: .35; }
  html[data-cards=info] .impact-axis-mark.is-hot em { color: #f7a8cc; }
  html[data-cards=info] .impact-axis-mark.is-hot i { box-shadow: 0 0 0 3px #1b1424, 0 0 18px rgb(240 139 189 / .95); }
  html[data-cards=info] .impact-axis-years { position: relative; display: block; height: 1.25em; margin-top: 7px; font-size: .75rem; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .5); }
  html[data-cards=info] .impact-axis-years b { position: absolute; top: 0; left: calc(var(--t) * 100%); translate: calc(var(--t) * -100%) 0; font-weight: inherit; }
}

/* the lead: the 22% at about three times the others, its before-and-after bar beneath, the photograph kept to the top
   corner so the figure sits on clean plum */
html[data-cards=info] .impact-card:first-child .impact-big { max-width: 100%; font-size: clamp(4.4rem, 40cqi, 9rem); line-height: .9; margin-top: auto !important; padding-top: clamp(20px, 4vh, 48px); }
html[data-cards=info] .impact-card:first-child .impact-label { font-size: clamp(1.05rem, 1.3vw, 1.25rem); margin-top: clamp(8px, 1.4vh, 14px) !important; }
html[data-cards=info] .impact-card:first-child .impact-text { margin-top: clamp(10px, 1.8vh, 16px) !important; font-size: clamp(.84rem, min(1.02vw, 1.7vh), 1rem); }
html[data-cards=info] .impact-card:first-child .impact-src { margin-top: 0 !important; padding-top: clamp(12px, 2vh, 20px); }
html[data-cards=info] .impact-card:first-child .impact-photo { width: 74%; height: 46%; opacity: .2;
  -webkit-mask-image: radial-gradient(100% 100% at 100% 0%, #000 16%, rgb(0 0 0 / .45) 48%, transparent 76%); mask-image: radial-gradient(100% 100% at 100% 0%, #000 16%, rgb(0 0 0 / .45) 48%, transparent 76%); }
html[data-cards=info] .impact-card:first-child .impact-photo img { object-position: 20% 30%; }
html[data-cards=info] .impact-chart { display: grid; gap: 7px; margin-top: clamp(12px, 2.2vh, 22px); color: rgb(255 255 255 / .72); }
html[data-cards=info] .impact-chart-cap { font-size: .75rem; letter-spacing: .12em; }
html[data-cards=info] .impact-bar { font-size: .75rem; grid-template-columns: 3.4em minmax(0, 1fr) 3.1em; column-gap: 10px; }
html[data-cards=info] .impact-bar b { height: 9px; }
html[data-cards=info] .impact-bar s { background: rgb(255 255 255 / .28); }
html[data-cards=info] .impact-bar u { background: linear-gradient(90deg, #f7a8cc, #f08bbd 50%, #c9b8e8); }
html[data-cards=info] .impact-bar em { font-size: .9rem; color: #fff; }
@media (min-width: 1101px) { /* the sheet fills the rest of the window, up to a point: the lead tall at the left, a three-by-two beside it, the axis beneath */
  html[data-cards=info] .results-page { display: grid; min-height: min(calc(100svh - 82px), 860px); }
  html[data-cards=info] .results-page > .impact { display: grid; grid-template-rows: auto 1fr auto; }
  html[data-cards=info] .impact > :is(.section-heading, .impact-switch) { grid-row: 1; grid-column: 1; }
  html[data-cards=info] .impact > .impact-switch { justify-self: end; align-self: end; margin: 0 0 calc(clamp(14px, 2.6vh, 28px) - 10px); } /* beside the subtitle, clear of the title */
  html[data-cards=info] .impact > .impact-grid { grid-row: 2; grid-template-columns: minmax(0, 1.36fr) repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(min-content, 1fr)); }
  html[data-cards=info] .impact > .impact-axis { grid-row: 3; }
  html[data-cards=info] .impact-grid > .impact-card:first-child { grid-row: span 2; border-top-left-radius: 22px; }
  html[data-cards=info] .impact-grid > .impact-card:nth-child(4) { border-top-right-radius: 22px; }
}
@media (min-width: 761px) and (max-width: 1100px) { /* two columns, the lead across them */
  html[data-cards=info] .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-cards=info] .impact-grid > .impact-card:first-child:nth-child(n) { grid-column: 1 / -1; border-radius: 22px 22px 0 0; }
  html[data-cards=info] .impact-card:first-child .impact-big { font-size: clamp(4.4rem, 16cqi, 7rem); }
  html[data-cards=info] .impact-card:first-child :is(.impact-chart, .impact-text) { max-width: 460px; }
  html[data-cards=info] .impact-card:first-child .impact-photo { left: auto; width: 56%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%); mask-image: linear-gradient(90deg, transparent, #000 50%); }
}
@media (max-width: 760px) { /* phones: the same sheet as a ruled list; each result a run-in headline, figure then label, the period beside its source */
  html[data-cards=info] .results-page { padding-top: 28px; }
  html[data-cards=info] .impact-switch { position: static; flex-wrap: wrap; width: auto; margin: 0 0 14px; border-radius: 18px; }
  html[data-cards=info] .impact-grid { border-radius: 20px; }
  html[data-cards=info] .impact-grid > .impact-card { display: block; padding: 16px 18px 14px; }
  html[data-cards=info] .impact-grid > .impact-card:first-child { border-radius: 20px 20px 0 0; }
  html[data-cards=info] .impact-grid > .impact-card:last-child { border-radius: 0 0 20px 20px; }
  html[data-cards=info] .impact-grid > .impact-card:not(:first-child)::before { content: ''; float: right; width: 44px; height: 30px; }
  html[data-cards=info] .impact-card > .impact-big { display: inline-block; max-width: none; margin: 0 .16em 0 0 !important; padding: 0; font-size: 1.95rem; line-height: 1.1; letter-spacing: -.04em; }
  html[data-cards=info] .impact-card > .impact-label { display: inline; margin: 0 !important; font-size: 1.04rem; line-height: 1.3; }
  html[data-cards=info] .impact-text { margin-top: 6px !important; font-size: .88rem; line-height: 1.45; }
  html[data-cards=info] .impact-src { margin-top: 10px !important; padding-top: 0; }
  html[data-cards=info] .impact-src time { position: static; width: auto; height: auto; overflow: visible; clip-path: none; flex: none; margin-left: auto; font-variant-numeric: tabular-nums; color: #fff; }
  html[data-cards=info] .impact-src > span { margin-left: 0; }
  html[data-cards=info] .impact-icon { top: 14px; right: 14px; width: 36px; height: 36px; }
  html[data-cards=info] .impact-photo { width: 56%; height: 100%; opacity: .2; }
  html[data-cards=info] .impact-card:first-child > .impact-big { display: block; margin: 0 !important; padding-top: 6px; font-size: clamp(4.2rem, 22vw, 5.6rem); line-height: .9; letter-spacing: -.055em; }
  html[data-cards=info] .impact-card:first-child > .impact-label { display: block; margin-top: 6px !important; font-size: 1.1rem; }
  html[data-cards=info] .impact-card:first-child .impact-chart { margin-top: 12px; }
  html[data-cards=info] .impact-card:first-child > .impact-text { margin-top: 10px !important; }
  html[data-cards=info] .impact-card:first-child .impact-src { padding-top: 10px; }
  html[data-cards=info] .impact-card:first-child .impact-photo { width: 66%; height: 60%; opacity: .2; }
}
/* the sheet at night: a step above the ground, a hairline at its edge */
html[data-variant=nocturne][data-cards=info] .impact-grid { background: color-mix(in srgb, #fff 10%, #1d1527); box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 30px 60px -38px rgb(0 0 0 / .9); }
html[data-variant=nocturne][data-cards=info] :is(.impact-grid > .impact-card, .impact-axis) { background: #1d1527; }
html[data-variant=nocturne][data-cards=info] .impact-grid > .impact-card:is(:hover, :focus-visible) { background: #241b30; }
@media (min-width: 761px) {
  html[data-variant=nocturne][data-cards=info] .impact-grid { box-shadow: 0 0 0 1px rgb(255 255 255 / .08); }
  html[data-variant=nocturne][data-cards=info] .impact-axis { clip-path: inset(0 -60px -100px); border-top-color: color-mix(in srgb, #fff 10%, #1d1527); box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 30px 60px -38px rgb(0 0 0 / .9); }
  html[data-variant=nocturne][data-cards=info] .impact-axis-mark i { box-shadow: 0 0 0 3px #1d1527, 0 0 12px rgb(240 139 189 / .55); }
  html[data-variant=nocturne][data-cards=info] .impact-axis-mark.is-hot i { box-shadow: 0 0 0 3px #1d1527, 0 0 18px rgb(240 139 189 / .95); }
  html[data-variant=nocturne][data-cards=info] .impact-axis-mark[data-mark=open] i { box-shadow: none; }
}
/* arriving: the sheet is drawn on from 2011's side to 2021's with the axis beneath it, each mark landing as the sweep
   reaches its year; the cells fill in reading order, each figure rising out of its line (the 22% counting up) and the
   lines beneath following. All of it lands in about a second and a quarter; the photographs settle last. Hover brings
   the photograph up a little and lights the cell's mark on the axis. */
html.impact-live[data-cards=info] .impact-grid > .impact-card { opacity: 1; transform: none; translate: none; transition: background-color .4s ease; }
@supports selector(:has(*)) { /* without :has the sheet and its axis simply stay put; only the cells' contents arrive */
  html.impact-live[data-cards=info] .impact-grid { clip-path: inset(-60px 100% -100px -60px); transition: clip-path .9s cubic-bezier(.6,0,.2,1); }
  html.impact-live[data-cards=info] .impact-grid + .impact-axis { clip-path: inset(0 100% -100px -60px); transition: clip-path .9s cubic-bezier(.6,0,.2,1); }
  html.impact-live[data-cards=info] .impact-grid:has(> .is-in) { clip-path: inset(-60px -60px -100px -60px); }
  html.impact-live[data-cards=info] .impact-grid:has(> .is-in) + .impact-axis { clip-path: inset(0 -60px -100px -60px); }
  html.impact-live[data-cards=info] .impact-axis-mark :is(i, em) { opacity: 0; transition: opacity .35s ease calc(.15s + var(--a) * .75s), scale .5s cubic-bezier(.2,.8,.2,1) calc(.15s + var(--a) * .75s), box-shadow .3s ease, color .3s ease; }
  html.impact-live[data-cards=info] .impact-axis-mark i { scale: 0 1; }
  html.impact-live[data-cards=info] .impact-grid:has(> .is-in) + .impact-axis .impact-axis-mark :is(i, em) { opacity: 1; scale: 1; }
}
html.impact-live[data-cards=info] .impact-big { transition: translate .8s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .05s + .15s), clip-path .8s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .05s + .15s); }
html.impact-live[data-cards=info] .impact-card > :is(.impact-label, .impact-chart, .impact-text, .impact-src) { opacity: 0; translate: 0 8px;
  transition: opacity .5s ease calc(var(--i) * .05s + .15s + var(--k, 0) * .04s), translate .6s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .05s + .15s + var(--k, 0) * .04s); }
html.impact-live[data-cards=info] .impact-card.is-in > :is(.impact-label, .impact-chart, .impact-text, .impact-src) { opacity: 1; translate: none; }
html.impact-live[data-cards=info] .impact-icon { opacity: 0; transition: opacity .5s ease calc(var(--i) * .05s + .2s); }
html.impact-live[data-cards=info] .is-in .impact-icon { opacity: 1; }
html.impact-live[data-cards=info] .impact-icon path[pathLength] { transition: stroke-dashoffset .9s cubic-bezier(.4,.1,.2,1) calc(var(--i) * .05s + .25s); }
html.impact-live[data-cards=info] .impact-bar :is(s, u) { transition: transform .7s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .05s + .35s); }
html.impact-live[data-cards=info] .impact-bar u { transition-delay: calc(var(--i) * .05s + .75s); }
html.impact-live[data-cards=info] .impact-bar em { transition: opacity .4s ease calc(var(--i) * .05s + 1.05s); }
html.impact-live[data-cards=info] .impact-photo img { opacity: 0; scale: 1.06; transition: opacity .9s ease calc(var(--i) * .05s + .4s), scale 1.4s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .05s + .4s), transform 1.6s cubic-bezier(.2,.7,.2,1); }
html.impact-live[data-cards=info] .is-in .impact-photo img { opacity: 1; scale: 1; }
html.impact-live[data-cards=info] .impact-join { background-size: .26em .26em, 0 0, 0 .07em; transition: background-size .7s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .05s + .45s); }
html.impact-live[data-cards=info] .is-in .impact-join { background-size: .26em .26em, .26em .26em, calc(100% - .26em) .07em; }
html[data-cards=info] .impact-card:is(:hover, :focus-visible) .impact-photo { opacity: .34; }
html[data-cards=info] .impact-card:is(:hover, :focus-visible) .impact-photo img { transform: scale(1.03); }
html[data-cards=info] .impact-card:is(:hover, :focus-visible) .impact-src > span { translate: 2px -2px; }
/* ==== Five more takes (d to h): Editorial index, Timeline band, Light bento, Big-number strip, Photo mosaic. Each
   keeps the page head compact, like the Infographic, so all seven results sit above the fold on a laptop. ==== */
html:is([data-cards=d], [data-cards=e], [data-cards=f], [data-cards=g], [data-cards=h], [data-cards=i], [data-cards=j], [data-cards=k], [data-cards=l], [data-cards=m]) .results-page { padding-top: clamp(18px, 3.4vh, 44px); padding-bottom: clamp(36px, 6vh, 72px); }
html:is([data-cards=d], [data-cards=e], [data-cards=f], [data-cards=g], [data-cards=h], [data-cards=i], [data-cards=j], [data-cards=k], [data-cards=l], [data-cards=m]) .results-page .section-heading { padding-bottom: clamp(14px, 2.6vh, 28px); }
html:is([data-cards=d], [data-cards=e], [data-cards=f], [data-cards=g], [data-cards=h], [data-cards=i], [data-cards=j], [data-cards=k], [data-cards=l], [data-cards=m]) .results-page h1 { font-size: clamp(2.3rem, min(4.4vw, 6.4vh), 4rem); }
html:is([data-cards=d], [data-cards=e], [data-cards=f], [data-cards=g], [data-cards=h], [data-cards=i], [data-cards=j], [data-cards=k], [data-cards=l], [data-cards=m]) .results-page .impact-sub { margin-top: clamp(4px, 1vh, 10px); font-size: clamp(1rem, 1.9vh, 1.15rem); }
html:is([data-cards=d], [data-cards=f], [data-cards=g], [data-cards=h]) .impact-grid > .impact-card:nth-child(n) { grid-column: auto; }
html:is([data-cards=d], [data-cards=e], [data-cards=f], [data-cards=g], [data-cards=h], [data-cards=i], [data-cards=j], [data-cards=k], [data-cards=l], [data-cards=m]) .impact-big { padding-right: 0; }
html:is([data-cards=d], [data-cards=e], [data-cards=f], [data-cards=g], [data-cards=h], [data-cards=i], [data-cards=j], [data-cards=k], [data-cards=l], [data-cards=m]) .impact-big:not([data-num]) { background: none; color: var(--ink) !important; }
html:is([data-cards=d], [data-cards=e], [data-cards=f], [data-cards=g], [data-cards=h], [data-cards=i], [data-cards=j], [data-cards=k], [data-cards=l], [data-cards=m]) .impact-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* the preview switch, now thirteen takes long, wraps beside the heading instead of running over the title */
@media (min-width: 1101px) {
  html:is([data-cards=info], [data-cards=d], [data-cards=e], [data-cards=f], [data-cards=g], [data-cards=h], [data-cards=i], [data-cards=j], [data-cards=k], [data-cards=l], [data-cards=m]) .results-page > .impact { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; }
  html:is([data-cards=info], [data-cards=d], [data-cards=e], [data-cards=f], [data-cards=g], [data-cards=h], [data-cards=i], [data-cards=j], [data-cards=k], [data-cards=l], [data-cards=m]) .impact > .section-heading { grid-row: 1; grid-column: 1; }
  html:is([data-cards=info], [data-cards=d], [data-cards=e], [data-cards=f], [data-cards=g], [data-cards=h], [data-cards=i], [data-cards=j], [data-cards=k], [data-cards=l], [data-cards=m]) .impact > .impact-switch { grid-row: 1; grid-column: 2; justify-self: end; align-self: center; flex-wrap: wrap; justify-content: flex-end; max-width: min(440px, 32.5vw); margin: 0 0 clamp(14px, 2.6vh, 28px); border-radius: 18px; font-size: .7rem; }
  html:is([data-cards=info], [data-cards=d], [data-cards=e], [data-cards=f], [data-cards=g], [data-cards=h], [data-cards=i], [data-cards=j], [data-cards=k], [data-cards=l], [data-cards=m]) .impact-switch > span { display: none; }
  html:is([data-cards=info], [data-cards=d], [data-cards=e], [data-cards=f], [data-cards=g], [data-cards=h], [data-cards=i], [data-cards=j], [data-cards=k], [data-cards=l], [data-cards=m]) .impact-switch button { padding: 5px 8px; }
  html:is([data-cards=info], [data-cards=d], [data-cards=e], [data-cards=f], [data-cards=g], [data-cards=h], [data-cards=i], [data-cards=j], [data-cards=k], [data-cards=l], [data-cards=m]) .impact > :not(.section-heading, .impact-switch) { grid-column: 1 / -1; }
}
@media (max-width: 760px) { html:is([data-cards=d], [data-cards=e], [data-cards=f], [data-cards=g], [data-cards=h], [data-cards=i], [data-cards=j], [data-cards=k], [data-cards=l], [data-cards=m]) .impact-switch { flex-wrap: wrap; width: auto; margin: 0 0 16px; border-radius: 18px; } }

/* D · Editorial index: a magazine contents page on the light ground. A heavy rule opens it, hairlines part the
   entries; each entry runs a small number, the figure large, its label and line beside it, and the source with its
   years at the right. No tiles, no photographs: type and rules only. */
html[data-cards=d] .impact-grid { display: block; border: 0; border-top: 2px solid var(--ink); counter-reset: res; }
html[data-cards=d] .impact-grid > .impact-card { --num: 2.6rem; --fig: clamp(11rem, 15.5vw, 15rem); --src: clamp(10.5rem, 14vw, 14rem); --gap: clamp(16px, 2vw, 32px); --pad: clamp(8px, 1.45vh, 16px); --size: clamp(2rem, min(3.3vw, 5.3vh), 3.1rem);
  counter-increment: res; position: relative; display: block; min-height: calc(var(--size) + 2 * var(--pad)); padding: var(--pad) calc(var(--src) + var(--gap)) var(--pad) calc(var(--num) + var(--fig) + var(--gap));
  border: 0; border-bottom: 1px solid var(--line); background: none; transition: background-color .3s ease; }
html[data-cards=d] .impact-grid > .impact-card::before { content: counter(res, decimal-leading-zero); position: absolute; left: 0; top: calc(var(--pad) + .5em); font-size: .75rem; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--muted); transition: color .3s ease; }
html[data-cards=d] .impact-media { display: none; }
html[data-cards=d] .impact-big { position: absolute; left: var(--num); top: calc(var(--pad) - .06em); width: max-content; max-width: var(--fig); font-size: var(--size); line-height: 1; letter-spacing: -.045em; }
/* the label and its line run in as one paragraph, the label in bold, as a contents page sets a title and its gloss */
html[data-cards=d] .impact-label { display: inline; margin: 0 !important; font-size: clamp(1rem, min(1.2vw, 2vh), 1.12rem); line-height: 1.45; letter-spacing: -.012em; }
html[data-cards=d] .impact-label::after { content: ''; display: inline-block; width: .55em; }
html[data-cards=d] .impact-text { display: inline; margin: 0 !important; font-size: clamp(.9rem, min(1.08vw, 1.85vh), 1rem); line-height: 1.45; }
html[data-cards=d] .impact-src { position: absolute; right: 0; top: calc(var(--pad) + .2em); width: var(--src); display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 0 !important; text-align: right; font-size: .75rem; font-weight: 600; letter-spacing: .02em; text-transform: none; line-height: 1.35; }
html[data-cards=d] .impact-src time { display: block; grid-row: 1; margin-bottom: 2px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--ink); }
html[data-cards=d] .impact-src > span { grid-row: 1; grid-column: 2; margin-left: 6px; color: var(--accent); }
html[data-cards=d] .impact-grid > .impact-card:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--accent) 4%, transparent); }
html[data-cards=d] .impact-card:is(:hover, :focus-visible)::before { color: var(--accent); }
html[data-cards=d] .impact-grid > .impact-card:focus-visible { outline-offset: 2px; }
@media (max-width: 760px) { /* phones: the number beside the entry, which stacks; the years beside the source */
  html[data-cards=d] .impact-grid > .impact-card { --num: 2rem; --pad: 14px; min-height: 0; padding: var(--pad) 0 13px var(--num); }
  html[data-cards=d] .impact-grid > .impact-card::before { top: calc(var(--pad) + .9em); }
  html[data-cards=d] .impact-big { position: static; max-width: 100%; margin-bottom: 6px !important; font-size: 2rem; }
  html[data-cards=d] .impact-grid > .impact-card:first-child .impact-big { font-size: 3rem; }
  html[data-cards=d] .impact-src { position: static; width: auto; display: flex; align-items: baseline; gap: 10px; margin-top: 8px !important; text-align: left; }
  html[data-cards=d] .impact-src time { order: 2; margin: 0 0 0 auto; font-size: .75rem; }
  html[data-cards=d] .impact-src > span { order: 3; margin: 0; }
}
/* arriving: the rule draws across, then each entry fades up in turn, quickly */
html.impact-live[data-cards=d] .impact-grid > .impact-card { opacity: 0; transform: translateY(10px); transition: opacity .45s ease calc(var(--i) * .05s + .1s), transform .6s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .05s + .1s), background-color .3s ease; }
html.impact-live[data-cards=d] .impact-grid > .impact-card.is-in { opacity: 1; transform: none; }

/* E · Timeline band: one 2011 to 2021 line across the page with a tick a year. The results, in date order, alternate
   above and below it; each callout stands on a hairline, and a stem drops from it to its pin on the line (a bar for a
   span of years, a diamond for a showcase, a dot for a year), its years printed beside the pin on the far side. */
html[data-cards=e] .impact-grid { --pad: clamp(10px, 1.1vw, 18px); --band: clamp(56px, 8vh, 72px); --reach: clamp(16px, 3vh, 30px);
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto var(--band) auto; gap: 0; border: 0; }
html[data-cards=e] .impact-grid::before { content: ''; grid-row: 2; grid-column: 1 / -1; align-self: center; height: 9px; margin: 0 var(--pad); border-right: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  background: linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent), color-mix(in srgb, var(--ink) 34%, transparent)) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 30%, transparent) 0 1px, transparent 1px calc(var(--yr) * 100%)); }
html[data-cards=e] .impact-grid > .impact-card:nth-child(n) { grid-column: var(--gc); grid-row: var(--gr); position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0 var(--pad); border: 0;
  background: linear-gradient(var(--line), var(--line)) 50% 100% / calc(100% - 2 * var(--pad)) 1px no-repeat; transition: background-color .3s ease; }
html[data-cards=e] .impact-grid > .impact-card[data-side=above] { align-self: end; margin-bottom: var(--reach); padding-bottom: 14px; }
html[data-cards=e] .impact-grid > .impact-card[data-side=below] { align-self: start; margin-top: var(--reach); padding-top: 14px; background-position: 50% 0; }
html[data-cards=e] .impact-grid > .impact-card.is-end { align-items: flex-end; text-align: right; }
html[data-cards=e] .impact-grid > .impact-card:is(:hover, :focus-visible) { background-color: transparent; background-image: linear-gradient(var(--accent), var(--accent)); }
/* the stem from the callout's hairline to the line, at the middle of its years */
html[data-cards=e] .impact-card::before { content: ''; position: absolute; left: calc(var(--xm) * 100% + var(--pad) * (1 - 2 * var(--tm))); width: 1px; height: calc(var(--reach) + var(--band) / 2); background: color-mix(in srgb, var(--ink) 34%, transparent); transition: background-color .3s ease; }
html[data-cards=e] .impact-card[data-side=above]::before { top: 100%; }
html[data-cards=e] .impact-card[data-side=below]::before { bottom: 100%; }
/* the pin on the line: a bar across a span of years, a dot for a year, a diamond for a showcase */
html[data-cards=e] .impact-card::after { content: ''; position: absolute; left: calc(var(--x) * 100% + var(--pad) * (1 - 2 * var(--t)) - 4.5px); width: calc(var(--w) * 100% - var(--pad) * 2 * (var(--t2) - var(--t)) + 9px); height: 9px; border-radius: 5px;
  background: var(--accent); box-shadow: 0 0 0 3px var(--bg); transition: scale .3s ease; }
html[data-cards=e] .impact-card[data-mark=event]::after { border-radius: 1px; rotate: 45deg; scale: .85; }
html[data-cards=e] .impact-card[data-side=above]::after { top: calc(100% + var(--reach) + var(--band) / 2 - 4.5px); }
html[data-cards=e] .impact-card[data-side=below]::after { bottom: calc(100% + var(--reach) + var(--band) / 2 - 4.5px); }
html[data-cards=e] .impact-card:is(:hover, :focus-visible)::before { background: var(--accent); }
html[data-cards=e] .impact-card:is(:hover, :focus-visible)::after { scale: 1.3; }
html[data-cards=e] .impact-card[data-mark=event]:is(:hover, :focus-visible)::after { scale: 1.1; }
/* the years beside the stem, between the callout and the line, so no two ever meet */
html[data-cards=e] .impact-media { display: contents; }
html[data-cards=e] :is(.impact-photo, .impact-icon) { display: none; }
html[data-cards=e] .impact-when { display: block; position: absolute; left: calc(var(--xm) * 100% + var(--pad) * (1 - 2 * var(--tm))); translate: 8px -50%; white-space: nowrap;
  font-size: .75rem; font-weight: 700; line-height: 1; letter-spacing: .03em; font-variant-numeric: tabular-nums; color: var(--muted); transition: color .3s ease; }
html[data-cards=e] .impact-card[data-side=above] .impact-when { top: calc(100% + (var(--reach) + var(--band) / 2 - 9px) / 2); }
html[data-cards=e] .impact-card[data-side=below] .impact-when { top: calc((var(--reach) + var(--band) / 2 - 9px) / -2); }
html[data-cards=e] .impact-card.is-end .impact-when { translate: calc(-100% - 8px) -50%; }
html[data-cards=e] .impact-card:is(:hover, :focus-visible) .impact-when { color: var(--accent); }
html[data-cards=e] .impact-big { width: max-content; max-width: 100%; font-size: clamp(1.9rem, min(2.8vw, 4.6vh), 2.75rem); line-height: 1; letter-spacing: -.045em; }
html[data-cards=e] .impact-label { margin-top: 6px !important; font-size: clamp(.92rem, min(1.08vw, 1.8vh), 1.04rem); line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
html[data-cards=e] .impact-text { flex: none; max-width: 46ch; margin-top: 5px !important; font-size: clamp(.8rem, min(.95vw, 1.6vh), .9rem); line-height: 1.42; text-wrap: pretty; }
html[data-cards=e] .impact-src { margin-top: 8px !important; font-size: .7rem; letter-spacing: .08em; }
html[data-cards=e] .impact-grid > .impact-card:focus-visible { outline-offset: 0; border-radius: 4px; }
@media (max-width: 760px) { /* phones: the line runs down the left, the results in date order beside it */
  html[data-cards=e] .impact-grid { display: block; padding-left: 30px; }
  html[data-cards=e] .impact-grid::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; height: auto; margin: 0; border: 0; background: color-mix(in srgb, var(--ink) 30%, transparent); }
  html[data-cards=e] .impact-grid > .impact-card:nth-child(n) { margin: 0; padding: 0 0 20px; background: none; align-items: flex-start; text-align: left; }
  html[data-cards=e] .impact-card::before { display: none; }
  html[data-cards=e] .impact-card:nth-child(n)::after { top: 5px; bottom: auto; left: -28px; width: 9px; height: 9px; }
  html[data-cards=e] .impact-card:nth-child(n) .impact-when { position: static; translate: none; order: -1; margin-bottom: 6px; }
  html[data-cards=e] .impact-big { font-size: 2rem; }
}
/* arriving: the line draws from 2011 to 2021, each pin lands as it passes, then its callout fades in toward the line */
html.impact-live[data-cards=e] .impact-grid::before { clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.6,0,.2,1); }
html.impact-live[data-cards=e] .impact-grid:has(> .is-in)::before { clip-path: inset(0 -1px 0 0); }
html.impact-live[data-cards=e] .impact-grid > .impact-card { opacity: 0; transform: none; translate: 0 calc(var(--dir, 1) * -10px); transition: opacity .45s ease calc(var(--tm) * .6s + .15s), translate .55s cubic-bezier(.2,.8,.2,1) calc(var(--tm) * .6s + .15s), background-color .3s ease; }
html.impact-live[data-cards=e] .impact-grid > .impact-card[data-side=below] { --dir: -1; }
html.impact-live[data-cards=e] .impact-grid > .impact-card.is-in { opacity: 1; translate: none; }

/* F · Light bento: the Infographic's grid on the light ground: the 22% tall at the left with its before-and-after bar,
   the other six as a three-by-two beside it, each cell led by its pictogram in a soft tile, its years at the top right.
   No photographs; colour kept for the figures and the gain. */
html[data-cards=f] .impact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--line); }
html[data-cards=f] .impact-grid > .impact-card { container-type: inline-size; position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(14px, 2.1vh, 22px) clamp(16px, 1.5vw, 22px) clamp(12px, 1.8vh, 18px);
  border: 0; background: color-mix(in srgb, #fff 62%, var(--bg)); transition: background-color .3s ease; }
html[data-cards=f] .impact-grid > .impact-card:is(:hover, :focus-visible) { background: #fff; }
html[data-cards=f] .impact-grid > .impact-card:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--accent); }
html[data-cards=f] .impact-media { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(10px, 1.6vh, 16px); }
html[data-cards=f] .impact-photo { display: none; }
html[data-cards=f] .impact-icon { position: static; display: grid; place-items: center; width: clamp(38px, 5vh, 46px); height: clamp(38px, 5vh, 46px); border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 9%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent); }
html[data-cards=f] .impact-icon .pill-icon { width: 64%; height: 64%; }
html[data-cards=f] .impact-when { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .03em; font-variant-numeric: tabular-nums; color: var(--muted); }
html[data-cards=f] .impact-big { width: max-content; max-width: 100%; font-size: clamp(1.9rem, 17cqi, 3.1rem); line-height: .98; letter-spacing: -.05em; }
html[data-cards=f] .impact-label { margin-top: clamp(4px, .8vh, 8px) !important; font-size: clamp(.9rem, min(1.08vw, 1.85vh), 1.04rem); line-height: 1.22; letter-spacing: -.01em; text-wrap: pretty; }
html[data-cards=f] .impact-text { flex: none; margin-top: clamp(4px, .8vh, 8px) !important; font-size: clamp(.8rem, min(.96vw, 1.6vh), .9rem); line-height: 1.42; text-wrap: pretty; }
html[data-cards=f] .impact-src { display: flex; align-items: baseline; gap: 10px; margin-top: auto !important; padding-top: clamp(10px, 1.4vh, 14px); font-size: .75rem; letter-spacing: 0; text-transform: none; line-height: 1.3; text-wrap: balance; }
html[data-cards=f] .impact-src > span { flex: none; margin-left: auto; }
html[data-cards=f] .impact-card:is(:hover, :focus-visible) .impact-src > span { transform: translate(2px, -2px); }
html[data-cards=f] .impact-also { display: none; }
html[data-cards=f] .impact-card:first-child .impact-big { max-width: 100%; margin-top: auto !important; font-size: clamp(4.4rem, 38cqi, 8.6rem); line-height: .9; }
html[data-cards=f] .impact-card:first-child .impact-label { font-size: clamp(1.05rem, 1.3vw, 1.25rem); }
html[data-cards=f] .impact-card:first-child .impact-text { margin-top: clamp(10px, 1.6vh, 16px) !important; }
html[data-cards=f] .impact-card:first-child .impact-src { margin-top: 0 !important; }
html[data-cards=f] .impact-chart { display: grid; gap: 7px; margin-top: clamp(12px, 2vh, 20px); color: var(--muted); }
html[data-cards=f] .impact-chart-cap { font-size: .72rem; letter-spacing: .12em; }
html[data-cards=f] .impact-bar { font-size: .75rem; grid-template-columns: 3.4em minmax(0, 1fr) 3.1em; column-gap: 10px; }
html[data-cards=f] .impact-bar b { height: 9px; }
html[data-cards=f] .impact-bar s { background: color-mix(in srgb, var(--ink) 16%, transparent); }
html[data-cards=f] .impact-bar u { background: linear-gradient(90deg, var(--accent), #8a5ad6); }
html[data-cards=f] .impact-bar em { font-size: .9rem; color: var(--ink); }
@media (min-width: 1101px) {
  html[data-cards=f] .impact-grid { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); }
  html[data-cards=f] .impact-grid > .impact-card:first-child { grid-row: span 2; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  html[data-cards=f] .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-cards=f] .impact-grid > .impact-card:first-child:nth-child(n) { grid-column: 1 / -1; }
  html[data-cards=f] .impact-card:first-child .impact-big { font-size: clamp(4.4rem, 16cqi, 7rem); }
}
@media (max-width: 760px) { /* phones: a ruled list, the pictogram beside each figure */
  html[data-cards=f] .impact-grid { border-radius: 18px; }
  html[data-cards=f] .impact-grid > .impact-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 14px 16px; }
  html[data-cards=f] .impact-card > * { grid-column: 2; }
  html[data-cards=f] .impact-media { display: contents; }
  html[data-cards=f] .impact-icon { grid-column: 1; grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 11px; }
  html[data-cards=f] .impact-when { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
  html[data-cards=f] .impact-big { grid-row: 1; font-size: 1.9rem; }
  html[data-cards=f] .impact-card:first-child .impact-big { font-size: 3.6rem; }
  html[data-cards=f] .impact-src { margin-top: 8px !important; padding-top: 0; }
  html[data-cards=f] .impact-card:first-child .impact-src { margin-top: 8px !important; }
}
html[data-variant=nocturne][data-cards=f] .impact-grid { border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .1); }
html[data-variant=nocturne][data-cards=f] .impact-grid > .impact-card { background: color-mix(in srgb, #fff 3.5%, var(--bg)); }
html[data-variant=nocturne][data-cards=f] .impact-grid > .impact-card:is(:hover, :focus-visible) { background: color-mix(in srgb, #fff 6.5%, var(--bg)); }
html[data-variant=nocturne][data-cards=f] .impact-icon { background: color-mix(in srgb, var(--accent) 14%, var(--bg)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
html[data-variant=nocturne][data-cards=f] .impact-bar s { background: rgb(255 255 255 / .2); }
html[data-variant=nocturne][data-cards=f] .impact-bar u { background: linear-gradient(90deg, #f08bbd, #b8a4db); }
/* arriving: the cells fill in reading order, each pictogram drawing itself in, the figure rising out of its line */
html.impact-live[data-cards=f] .impact-grid > .impact-card { opacity: 1; transform: none; }
html.impact-live[data-cards=f] .impact-card > :is(.impact-media, .impact-label, .impact-chart, .impact-text, .impact-src) { opacity: 0; translate: 0 8px;
  transition: opacity .45s ease calc(var(--i) * .05s + .1s + var(--k, 0) * .04s), translate .55s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .05s + .1s + var(--k, 0) * .04s); }
html.impact-live[data-cards=f] .impact-card.is-in > :is(.impact-media, .impact-label, .impact-chart, .impact-text, .impact-src) { opacity: 1; translate: none; }
html.impact-live[data-cards=f] .impact-icon path[pathLength] { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.4,.1,.2,1) calc(var(--i) * .05s + .25s); }
html.impact-live[data-cards=f] .is-in .impact-icon path[pathLength] { stroke-dashoffset: 0; }
html.impact-live[data-cards=f] .impact-bar :is(s, u) { transform: scaleX(0); transition: transform .7s cubic-bezier(.2,.8,.2,1) .35s; }
html.impact-live[data-cards=f] .impact-bar u { transition-delay: .75s; }
html.impact-live[data-cards=f] .is-in .impact-bar :is(s, u) { transform: none; }

/* G · Big-number strip: the seven figures and words in one oversized row, parted by hairlines, each with its
   pictogram and years above and its label beneath. The result pointed at or focused (the first to begin with) is
   underlined in the accent and its line and source show large in the stage under the row. */
html[data-cards=g] .results-page > .impact { container-type: inline-size; }
html[data-cards=g] .impact-grid { --stage: clamp(9.5rem, 27vh, 15rem); --px: clamp(8px, .95vw, 15px); position: relative; display: grid; grid-template-columns: repeat(7, auto); gap: 0;
  padding-bottom: var(--stage); border: 0; border-top: 2px solid var(--ink); }
html[data-cards=g] .impact-grid > .impact-card { position: static; display: flex; flex-direction: column; min-width: 0; padding: clamp(14px, 3vh, 32px) var(--px) clamp(16px, 3.2vh, 34px); border: 0;
  border-left: 1px solid var(--line); background: none; transform: none; }
html[data-cards=g] .impact-grid > .impact-card:first-child { padding-left: 0; border-left: 0; }
html[data-cards=g] .impact-grid > .impact-card:last-child { padding-right: 0; }
html[data-cards=g] .impact-grid > .impact-card:focus-visible { outline-offset: -2px; }
html[data-cards=g] .impact-media { display: flex; align-items: center; gap: 8px; contain: inline-size; margin-bottom: clamp(12px, 3vh, 30px); }
html[data-cards=g] .impact-photo { display: none; }
html[data-cards=g] .impact-icon { position: static; width: 24px; height: 24px; }
html[data-cards=g] .impact-icon .pill-icon { width: 24px; height: 24px; }
html[data-cards=g] .impact-when { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .03em; font-variant-numeric: tabular-nums; color: var(--muted); }
html[data-cards=g] .impact-big { width: max-content; font-size: clamp(1.6rem, calc((100cqi - 12 * var(--px) - 6px) / 21.6), 5.2rem); line-height: .95; letter-spacing: -.055em; white-space: nowrap; transition: color .3s ease; }
html[data-cards=g] .impact-big:not([data-num]) { color: color-mix(in srgb, var(--ink) 80%, var(--bg)) !important; }
html[data-cards=g] .impact-label { contain: inline-size; margin-top: clamp(8px, 1.4vh, 12px) !important; font-size: .9rem; line-height: 1.25; text-wrap: balance; color: var(--muted); transition: color .3s ease; }
/* the underline that marks the current result, along the row's top rule */
html[data-cards=g] .impact-card.is-current { box-shadow: inset 0 3px 0 var(--accent); }
html[data-cards=g] .impact-grid > .impact-card:first-child.is-current { box-shadow: inset 0 3px 0 var(--accent); }
html[data-cards=g] .impact-card.is-current .impact-big:not([data-num]) { color: var(--ink) !important; }
html[data-cards=g] .impact-card.is-current .impact-label { color: var(--ink); }
/* the stage: the current result's source and years as a kicker, its line large beneath; the rest wait unseen */
html[data-cards=g] .impact-card > :is(.impact-text, .impact-src, .impact-chart) { position: absolute; left: 0; opacity: 0; pointer-events: none; }
html[data-cards=g] .impact-card.is-current > :is(.impact-text, .impact-src, .impact-chart) { opacity: 1; pointer-events: auto; }
html[data-cards=g] .impact-src { top: calc(100% - var(--stage) + clamp(18px, 3.4vh, 34px)); display: flex; align-items: baseline; gap: 12px; margin: 0 !important; font-size: .75rem; letter-spacing: .1em; }
html[data-cards=g] .impact-src time { display: inline; order: -1; font-size: .8rem; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--accent); }
html[data-cards=g] .impact-text { top: calc(100% - var(--stage) + clamp(18px, 3.4vh, 34px) + 2em); right: 34%; margin: 0 !important; font-size: clamp(1.1rem, min(1.8vw, 3.1vh), 1.8rem); line-height: 1.38; letter-spacing: -.012em; color: var(--ink); text-wrap: pretty; }
html[data-cards=g] .impact-card > .impact-chart { top: calc(100% - var(--stage) + clamp(18px, 3.4vh, 34px)); left: auto; right: 0; display: grid; gap: 7px; width: min(30%, 360px); color: var(--muted); }
html[data-cards=g] .impact-chart-cap { font-size: .72rem; letter-spacing: .12em; }
html[data-cards=g] .impact-bar { font-size: .75rem; grid-template-columns: 3.4em minmax(0, 1fr) 3.1em; column-gap: 10px; }
html[data-cards=g] .impact-bar b { height: 9px; }
html[data-cards=g] .impact-bar s { background: color-mix(in srgb, var(--ink) 16%, transparent); }
html[data-cards=g] .impact-bar u { background: linear-gradient(90deg, var(--accent), #8a5ad6); }
html[data-cards=g] .impact-bar em { font-size: .9rem; color: var(--ink); }
html[data-cards=g] .impact-also { display: none; }
html[data-cards=g] .impact-big[data-num] { min-width: 1.8em; } /* the 22% keeps its width while it counts up */
html[data-cards=g] .impact-grid::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
html.impact-live[data-cards=g] .impact-card > :is(.impact-text, .impact-src, .impact-chart) { translate: 0 6px; transition: opacity .3s ease, translate .45s cubic-bezier(.2,.8,.2,1); }
html.impact-live[data-cards=g] .impact-card.is-current.is-in > :is(.impact-text, .impact-src, .impact-chart) { translate: none; }
html.impact-live[data-cards=g] .impact-card:not(.is-in) > :is(.impact-text, .impact-src, .impact-chart) { opacity: 0; }
@media (min-width: 761px) and (max-width: 1100px) { html[data-cards=g] .impact-label { font-size: .8rem; } }
@media (max-width: 760px) { /* phones: a plain list, every result's details shown */
  html[data-cards=g] .impact-grid { display: block; padding: 0; }
  html[data-cards=g] .impact-grid::after { display: none; }
  html[data-cards=g] .impact-grid > .impact-card:nth-child(n) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); box-shadow: none; }
  html[data-cards=g] .impact-card > * { grid-column: 1 / -1; }
  html[data-cards=g] .impact-media { grid-row: 1; margin: 0 0 6px; contain: none; }
  html[data-cards=g] .impact-big { font-size: 2.2rem; }
  html[data-cards=g] .impact-label { contain: none; color: var(--ink); }
  html[data-cards=g] .impact-card > :is(.impact-text, .impact-src, .impact-chart):nth-child(n) { position: static; opacity: 1; pointer-events: auto; translate: none; width: auto; }
  html[data-cards=g] .impact-text { margin-top: 6px !important; font-size: .92rem; }
  html[data-cards=g] .impact-src { margin-top: 8px !important; }
  html[data-cards=g] .impact-chart { margin-top: 12px; }
  html[data-cards=g] .impact-when { display: none; } /* the years lead the source line instead */
  html[data-cards=g] .impact-big:not([data-num]) { color: var(--ink) !important; }
}
/* arriving: the figures rise out of their line one after another, left to right */
html.impact-live[data-cards=g] .impact-grid > .impact-card { opacity: 1; transform: none; }
html.impact-live[data-cards=g] .impact-card > :is(.impact-media, .impact-big, .impact-label) { opacity: 0; translate: 0 14px; transition: opacity .45s ease calc(var(--i) * .06s + .1s + var(--k, 0) * .04s), translate .6s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .06s + .1s + var(--k, 0) * .04s), color .3s ease; }
html.impact-live[data-cards=g] .impact-card.is-in > :is(.impact-media, .impact-big, .impact-label) { opacity: 1; translate: none; }

/* H · Photo mosaic: the project photographs as small plum duotone tiles (the lead two wide), the result set over each
   in crisp white on a deep scrim, its pictogram and years in the top corners. */
html[data-cards=h] .impact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(6px, .6vw, 10px); height: clamp(470px, calc(100svh - 300px), 640px); border: 0; }
html[data-cards=h] .impact-grid > .impact-card:first-child { grid-column: span 2; }
html[data-cards=h] .impact-grid > .impact-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; min-height: 0;
  padding: clamp(14px, 1.4vw, 20px); border: 0; border-radius: 10px; background: #1c1226; color: #fff; }
html[data-cards=h] .impact-grid > .impact-card:is(:hover, :focus-visible) { background: #1c1226; }
html[data-cards=h] .impact-grid > .impact-card:focus-visible { outline-offset: 3px; }
html[data-cards=h] .impact-media { display: block; position: absolute; inset: 0; z-index: -1; }
/* the duotone: the photograph in greys, multiplied onto rose, its shadows lifted to deep plum; a scrim beneath the type */
html[data-cards=h] .impact-photo { display: block; position: absolute; inset: 0; overflow: hidden; background: #b07a9c; }
html[data-cards=h] .impact-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(.95); mix-blend-mode: multiply; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), scale 1.2s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .05s); }
html[data-cards=h] .impact-photo::before { content: ''; position: absolute; inset: 0; z-index: 1; background: #2a1638; mix-blend-mode: lighten; }
html[data-cards=h] .impact-photo::after { content: ''; position: absolute; inset: 0; z-index: 2; transition: opacity .5s ease;
  background: linear-gradient(180deg, rgb(20 11 28 / .55) 0%, rgb(20 11 28 / .1) 22%, rgb(20 11 28 / .55) 48%, rgb(20 11 28 / .92) 78%); }
html[data-cards=h] .impact-card:first-child .impact-photo img { object-position: 20% 40%; }
html[data-cards=h] .impact-icon { position: absolute; z-index: 2; top: clamp(12px, 1.2vw, 16px); left: clamp(14px, 1.4vw, 20px); right: auto; width: 26px; height: 26px; }
html[data-cards=h] .impact-icon .pill-icon { width: 26px; height: 26px; }
html[data-cards=h] .results-page .impact-grid .impact-card .impact-icon .pill-icon { color: #fff !important; }
html[data-cards=h] .impact-when { display: block; position: absolute; z-index: 2; top: clamp(16px, 1.5vw, 20px); right: clamp(14px, 1.4vw, 20px); font-size: .72rem; font-weight: 700; line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .85); }
html[data-cards=h] .impact-big { width: max-content; max-width: 100%; font-size: clamp(1.8rem, min(2.6vw, 4.4vh), 2.6rem); line-height: 1; letter-spacing: -.045em; text-shadow: 0 1px 18px rgb(20 11 28 / .5); }
html[data-cards=h] .impact-big:not([data-num]) { color: #fff !important; }
html[data-cards=h] .impact-grid > .impact-card > .impact-big[data-num] { background-image: linear-gradient(100deg, #fff 0%, #fff 40%, #f7b3d3 75%, #cdbcf0 100%); text-shadow: none; }
html[data-cards=h] .impact-card:first-child .impact-big { font-size: clamp(3.6rem, min(6.4vw, 11vh), 6.4rem); line-height: .9; }
html[data-cards=h] .impact-label { margin-top: 6px !important; font-size: clamp(.9rem, min(1.05vw, 1.8vh), 1.02rem); line-height: 1.25; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
html[data-cards=h] .impact-text { flex: none; margin-top: 5px !important; font-size: clamp(.78rem, min(.92vw, 1.55vh), .88rem); line-height: 1.42; color: rgb(255 255 255 / .86); text-wrap: pretty; }
html[data-cards=h] .impact-card:first-child .impact-text { max-width: 46ch; }
html[data-cards=h] .impact-src { display: flex; gap: 10px; margin-top: 10px !important; font-size: .7rem; letter-spacing: .08em; color: rgb(255 255 255 / .72); }
html[data-cards=h] .impact-src > span { margin-left: auto; color: #f7a8cc; }
html[data-cards=h] .impact-card:is(:hover, :focus-visible) .impact-photo img { transform: scale(1.05); }
html[data-cards=h] .impact-card:is(:hover, :focus-visible) .impact-photo::after { opacity: .85; }
@media (min-width: 761px) and (max-width: 1100px) {
  html[data-cards=h] .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(250px, auto); height: auto; }
  html[data-cards=h] .impact-grid > .impact-card:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) { /* phones: one tile a result, short, the type over the photograph */
  html[data-cards=h] .impact-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; height: auto; gap: 8px; }
  html[data-cards=h] .impact-grid > .impact-card:first-child { grid-column: auto; }
  html[data-cards=h] .impact-grid > .impact-card { min-height: 0; padding: 48px 16px 14px; }
  html[data-cards=h] .impact-big { font-size: 2rem; }
  html[data-cards=h] .impact-card:first-child .impact-big { font-size: 3.6rem; }
  html[data-cards=h] .impact-text { font-size: .88rem; }
}
html[data-variant=nocturne][data-cards=h] .impact-grid > .impact-card { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
/* arriving: each tile opens from its foot as its photograph settles, the type following */
html.impact-live[data-cards=h] .impact-grid > .impact-card { opacity: 0; transform: none; clip-path: inset(18% 0 0 0 round 10px); transition: opacity .45s ease calc(var(--i) * .05s), clip-path .7s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .05s); }
html.impact-live[data-cards=h] .impact-grid > .impact-card.is-in { opacity: 1; clip-path: inset(0 round 10px); }
html.impact-live[data-cards=h] .impact-photo img { scale: 1.08; }
html.impact-live[data-cards=h] .is-in .impact-photo img { scale: 1; }
/* ==== Four more takes (i to l): Scoreboard, Feature rail, Quote wall, Impact map. Same compact page head. ==== */
.impact-map { display: none; }

/* I · Scoreboard: a dark board like a stadium or departures board. Seven rows share one set of columns (subgrid): a
   running number, the pictogram, the figure in a split-flap tile, the label over its line, the years over the source
   at the right. The figures flip down into their tiles in turn. */
html[data-cards=i] .impact-grid { --rowpad: clamp(6px, 1.2vh, 13px);
  display: grid; grid-template-columns: [num] 1.4rem [icon] 26px [fig] max-content [what] minmax(0, 1fr) [src] minmax(9rem, max-content);
  column-gap: clamp(14px, 1.6vw, 26px); padding: clamp(4px, 1vh, 10px) clamp(18px, 2.2vw, 32px); border: 0; border-radius: 20px; counter-reset: res;
  background: radial-gradient(90% 70% at 0% 0%, rgb(172 43 108 / .2), transparent 62%), radial-gradient(60% 60% at 100% 100%, rgb(126 90 208 / .14), transparent 70%), #15101c;
  box-shadow: 0 30px 60px -38px rgb(40 18 60 / .6), inset 0 0 0 1px rgb(255 255 255 / .06); }
html[data-cards=i] .impact-grid > .impact-card:nth-child(n) { counter-increment: res; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: auto auto; align-items: center; isolation: isolate;
  padding: var(--rowpad) 0; border: 0; border-bottom: 1px solid rgb(255 255 255 / .08); background: none; color: #fff; transition: background-color .3s ease; }
html[data-cards=i] .impact-grid > .impact-card:last-child { border-bottom: 0; }
html[data-cards=i] .impact-grid > .impact-card:is(:hover, :focus-visible) { background: linear-gradient(90deg, rgb(240 139 189 / .07), rgb(240 139 189 / .02)); }
html[data-cards=i] .impact-grid > .impact-card:focus-visible { outline: 2px solid #f08bbd; outline-offset: 5px; border-radius: 10px; }
html[data-cards=i] .impact-card::before { content: counter(res, decimal-leading-zero); grid-column: num; grid-row: 1 / span 2; font-size: .72rem; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .4); }
/* the split-flap tile behind each figure: two halves, a dark seam between, the same width down the board */
html[data-cards=i] .impact-card::after { content: ''; grid-column: fig; grid-row: 1 / span 2; align-self: stretch; z-index: -1; margin: -2px -4px; border-radius: 7px;
  background: linear-gradient(#271e31 0 calc(50% - 1px), #0b080f calc(50% - 1px) calc(50% + 1px), #1f1828 calc(50% + 1px)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06), 0 6px 14px -8px rgb(0 0 0 / .8); transition: box-shadow .3s ease; }
html[data-cards=i] .impact-card:is(:hover, :focus-visible)::after { box-shadow: inset 0 0 0 1px rgb(240 139 189 / .45), 0 0 22px -6px rgb(240 139 189 / .5); }
html[data-cards=i] .impact-media { display: contents; }
html[data-cards=i] :is(.impact-photo, .impact-when, .impact-chart, .impact-also) { display: none; }
html[data-cards=i] .impact-icon { position: static; grid-column: icon; grid-row: 1 / span 2; width: 26px; height: 26px; }
html[data-cards=i] .impact-icon .pill-icon { width: 26px; height: 26px; }
html[data-cards=i] .results-page .impact-grid .impact-card .impact-icon .pill-icon { color: #f3b6d3 !important; }
html[data-cards=i] .impact-big { grid-column: fig; grid-row: 1 / span 2; justify-self: center; padding: .1em .22em .12em; font-size: clamp(1.55rem, min(2.3vw, 4vh), 2.3rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
html[data-cards=i] .impact-grid .impact-big:not([data-num]) { background: none; color: #fff !important; }
html[data-cards=i] .impact-grid .impact-big[data-num] { background-image: linear-gradient(100deg, #fff 10%, #f7a8cc 60%, #cdbcf0); }
html[data-cards=i] .impact-label { grid-column: what; grid-row: 1; align-self: end; margin: 0 !important; font-size: clamp(.92rem, min(1.1vw, 1.9vh), 1.02rem); line-height: 1.25; color: #fff; }
html[data-cards=i] .impact-text { grid-column: what; grid-row: 2; align-self: start; margin: 3px 0 0 !important; max-width: 78ch; font-size: clamp(.8rem, min(.95vw, 1.6vh), .88rem); line-height: 1.4; color: rgb(255 255 255 / .64); text-wrap: pretty; }
html[data-cards=i] .impact-src { grid-column: src; grid-row: 1 / span 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; margin: 0 !important; text-align: right; font-size: .7rem; letter-spacing: .06em; line-height: 1.35; color: rgb(255 255 255 / .6); }
html[data-cards=i] .impact-src time { display: block; grid-row: 1; margin-bottom: 2px; font-size: .9rem; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: #f7a8cc; }
html[data-cards=i] .impact-src > span { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #f7a8cc; }
@media (max-width: 760px) { /* phones: each row stacks beside its number, the figure in its tile on top */
  html[data-cards=i] .impact-grid { display: block; padding: 4px 16px; border-radius: 18px; }
  html[data-cards=i] .impact-grid > .impact-card:nth-child(n) { grid-template-columns: 1.6rem minmax(0, 1fr) auto; grid-template-rows: none; column-gap: 10px; row-gap: 4px; align-items: start; padding: 14px 0; }
  html[data-cards=i] .impact-card::before { grid-column: 1; grid-row: 1; align-self: center; }
  html[data-cards=i] .impact-card::after { grid-column: 2; grid-row: 1; justify-self: start; width: var(--tile, 0); display: none; }
  html[data-cards=i] .impact-icon { grid-column: 3; grid-row: 1; align-self: center; }
  html[data-cards=i] .impact-big { grid-column: 2; grid-row: 1; justify-self: start; padding: .08em .2em; border-radius: 6px; font-size: 1.9rem; }
  html[data-cards=i] .impact-grid .impact-big:not([data-num]) { background: linear-gradient(#271e31 0 calc(50% - 1px), #0b080f calc(50% - 1px) calc(50% + 1px), #1f1828 calc(50% + 1px)); }
  html[data-cards=i] :is(.impact-label, .impact-text, .impact-src) { grid-column: 2 / -1; grid-row: auto; }
  html[data-cards=i] .impact-label { margin-top: 6px !important; }
  html[data-cards=i] .impact-src { display: flex; align-items: baseline; gap: 10px; margin-top: 6px !important; text-align: left; }
  html[data-cards=i] .impact-src time { order: 2; margin: 0 0 0 auto; font-size: .78rem; }
  html[data-cards=i] .impact-src > span { order: 3; }
}
html[data-variant=nocturne][data-cards=i] .impact-grid { background: radial-gradient(90% 70% at 0% 0%, rgb(240 139 189 / .1), transparent 62%), #1d1527; box-shadow: 0 0 0 1px rgb(255 255 255 / .09), 0 30px 60px -38px rgb(0 0 0 / .9); }
/* arriving: the rows come up the board in turn, each figure flipping down into its tile */
html.impact-live[data-cards=i] .impact-grid > .impact-card { opacity: 0; transform: none; translate: 0 6px; transition: opacity .4s ease calc(var(--i) * .07s), translate .5s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .07s), background-color .3s ease; }
html.impact-live[data-cards=i] .impact-grid > .impact-card.is-in { opacity: 1; translate: none; }
html.impact-live[data-cards=i] .impact-big { transform: perspective(300px) rotateX(-88deg); transform-origin: 50% 50%; transition: transform .7s cubic-bezier(.3,1.5,.5,1) calc(var(--i) * .07s + .18s); }
html.impact-live[data-cards=i] .is-in .impact-big { transform: none; }

/* J · Feature rail: the 22% as one wide dark feature, its photograph filling the right and fading into the plum; the
   other six as a rail of compact light cards beneath, each with a sheet peeking under it like a small stack. On a
   laptop all six sit in view; narrower, the rail swipes and snaps while the feature stays put above it. */
html[data-cards=j] .results-page > .impact { container-type: inline-size; }
html[data-cards=j] .impact-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.8vh, 18px) clamp(10px, 1vw, 14px); padding-bottom: 8px; border: 0; }
html[data-cards=j] .impact-grid > .impact-card:nth-child(n) { grid-column: auto; position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(12px, 1.8vh, 16px) clamp(12px, 1.1vw, 16px) clamp(10px, 1.5vh, 14px);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 16px; background: color-mix(in srgb, #fff 70%, var(--bg)); box-shadow: 0 1px 2px rgb(34 28 46 / .04), 0 18px 34px -26px rgb(64 30 86 / .35);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, background-color .3s ease; }
html[data-cards=j] .impact-grid > .impact-card:not(:first-child)::before { content: ''; position: absolute; top: 100%; left: 9px; right: 9px; height: 6px; border-radius: 0 0 12px 12px; border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-top: 0; background: color-mix(in srgb, #fff 40%, var(--bg)); }
html[data-cards=j] .impact-grid > .impact-card:not(:first-child):is(:hover, :focus-visible) { transform: translateY(-4px); background: #fff; box-shadow: 0 1px 2px rgb(34 28 46 / .05), 0 28px 44px -28px rgb(64 30 86 / .5); }
html[data-cards=j] .impact-media { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(8px, 1.4vh, 14px); }
html[data-cards=j] .impact-photo { display: none; }
html[data-cards=j] .impact-icon { position: static; width: 26px; height: 26px; }
html[data-cards=j] .impact-icon .pill-icon { width: 26px; height: 26px; }
html[data-cards=j] .impact-when { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .03em; font-variant-numeric: tabular-nums; color: var(--muted); }
html[data-cards=j] .impact-big { width: max-content; max-width: 100%; font-size: clamp(1.5rem, min(2.1vw, 3.8vh), 2.1rem); line-height: 1; letter-spacing: -.045em; }
html[data-cards=j] .impact-label { margin-top: 5px !important; font-size: clamp(.86rem, min(1vw, 1.75vh), .96rem); line-height: 1.24; letter-spacing: -.01em; text-wrap: balance; }
html[data-cards=j] .impact-text { margin-top: 6px !important; font-size: clamp(.76rem, min(.88vw, 1.55vh), .84rem); line-height: 1.42; text-wrap: pretty; }
html[data-cards=j] .impact-src { display: flex; align-items: baseline; gap: 8px; margin-top: 10px !important; font-size: .64rem; letter-spacing: .07em; line-height: 1.3; }
html[data-cards=j] .impact-src > span { flex: none; margin-left: auto; }
/* the feature */
html[data-cards=j] .impact-grid > .impact-card:first-child { grid-column: 1 / -1; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: max-content minmax(0, 24rem) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
  column-gap: clamp(24px, 3vw, 52px); min-height: clamp(200px, 28vh, 300px); padding: clamp(18px, 2.8vh, 30px) clamp(22px, 2.6vw, 40px); border: 0; border-radius: 22px; background: #1c1226; color: #fff; box-shadow: 0 30px 60px -38px rgb(40 18 60 / .6); }
html[data-cards=j] .impact-card:first-child .impact-media { display: contents; }
html[data-cards=j] .impact-card:first-child .impact-photo { display: block; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 50%; overflow: hidden; background: #2a1a36;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 42%); mask-image: linear-gradient(90deg, transparent, #000 42%); }
html[data-cards=j] .impact-card:first-child .impact-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; opacity: .78; filter: saturate(.8); transition: transform 1.4s cubic-bezier(.2,.7,.2,1), opacity .6s ease; }
html[data-cards=j] .impact-card:first-child .impact-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(28 18 38 / .55), transparent 45%), radial-gradient(70% 90% at 100% 0%, rgb(240 139 189 / .25), transparent 70%); }
html[data-cards=j] .impact-card:first-child:is(:hover, :focus-visible) .impact-photo img { transform: scale(1.04); opacity: .9; }
html[data-cards=j] .impact-card:first-child .impact-icon { grid-column: 1; grid-row: 1; }
html[data-cards=j] .results-page .impact-grid .impact-card:first-child .impact-icon .pill-icon { color: #f3b6d3 !important; }
html[data-cards=j] .impact-card:first-child .impact-when { grid-column: 1; grid-row: 1; align-self: center; margin-left: 38px; color: rgb(255 255 255 / .7); }
html[data-cards=j] .impact-card:first-child .impact-big { grid-column: 1; grid-row: 2 / -1; align-self: end; font-size: clamp(5rem, min(10vw, 18vh), 9.6rem); line-height: .8; letter-spacing: -.06em; padding: 0 .1em .02em 0;
  background-image: linear-gradient(100deg, #fff 0%, #fff 35%, #f7b3d3 72%, #cdbcf0 100%); }
html[data-cards=j] .impact-card:first-child > :is(.impact-label, .impact-chart, .impact-text, .impact-src) { grid-column: 2; }
html[data-cards=j] .impact-card:first-child .impact-label { grid-row: 3; margin: 0 !important; font-size: clamp(1.05rem, 1.3vw, 1.25rem); color: #fff; }
html[data-cards=j] .impact-card:first-child .impact-chart { grid-row: 4; display: grid; gap: 6px; margin-top: clamp(8px, 1.4vh, 14px); color: rgb(255 255 255 / .72); }
html[data-cards=j] .impact-card:first-child .impact-text { grid-row: 5; margin-top: clamp(8px, 1.4vh, 12px) !important; font-size: clamp(.82rem, min(.98vw, 1.7vh), .95rem); color: rgb(255 255 255 / .78); }
html[data-cards=j] .impact-card:first-child .impact-src { grid-row: 6; justify-content: flex-start; color: rgb(255 255 255 / .62); }
html[data-cards=j] .impact-card:first-child .impact-src > span { margin-left: 4px; color: #f7a8cc; }
html[data-cards=j] .impact-chart-cap { display: none; }
html[data-cards=j] .impact-bar { font-size: .72rem; grid-template-columns: 3.4em minmax(0, 1fr) 3.1em; column-gap: 10px; }
html[data-cards=j] .impact-bar b { height: 8px; }
html[data-cards=j] .impact-bar s { background: rgb(255 255 255 / .28); }
html[data-cards=j] .impact-bar u { background: linear-gradient(90deg, #f7a8cc, #f08bbd 50%, #c9b8e8); }
html[data-cards=j] .impact-bar em { font-size: .86rem; color: #fff; }
html[data-cards=j] .impact-also { display: none; }
html[data-cards=j] .impact-grid > .impact-card:first-child:focus-visible { outline-offset: 3px; }
@media (max-width: 1100px) { /* the rail swipes and snaps; the feature, as wide as the page, rides along at its left */
  html[data-cards=j] .impact-grid { grid-template-columns: none; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: min(250px, 74cqi); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 16px; }
  html[data-cards=j] .impact-grid > .impact-card:nth-child(n) { grid-row: 2; scroll-snap-align: start; }
  html[data-cards=j] .impact-grid > .impact-card:first-child:nth-child(n) { grid-row: 1; grid-column: 1 / span 6; position: sticky; left: 0; width: 100cqi; justify-self: start; }
}
@media (max-width: 760px) {
  html[data-cards=j] .impact-grid > .impact-card:first-child { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0; padding: 18px; }
  html[data-cards=j] .impact-card:first-child > * { grid-row: auto !important; grid-column: 1 !important; }
  html[data-cards=j] .impact-card:first-child .impact-big { margin-top: 26px !important; font-size: clamp(4.4rem, 24vw, 5.8rem); }
  html[data-cards=j] .impact-card:first-child .impact-label { margin-top: 8px !important; }
  html[data-cards=j] .impact-card:first-child .impact-photo { width: 78%; bottom: auto; height: 62%; -webkit-mask-image: radial-gradient(100% 100% at 100% 0%, #000 20%, transparent 78%); mask-image: radial-gradient(100% 100% at 100% 0%, #000 20%, transparent 78%); }
  html[data-cards=j] .impact-big { font-size: 1.9rem; }
}
html[data-variant=nocturne][data-cards=j] .impact-grid > .impact-card:not(:first-child) { background: color-mix(in srgb, #fff 4%, var(--bg)); border-color: rgb(255 255 255 / .08); box-shadow: 0 20px 40px -28px rgb(0 0 0 / .9); }
html[data-variant=nocturne][data-cards=j] .impact-grid > .impact-card:not(:first-child)::before { background: color-mix(in srgb, #fff 2%, var(--bg)); border-color: rgb(255 255 255 / .07); }
html[data-variant=nocturne][data-cards=j] .impact-grid > .impact-card:not(:first-child):is(:hover, :focus-visible) { background: color-mix(in srgb, #fff 7%, var(--bg)); }
html[data-variant=nocturne][data-cards=j] .impact-grid > .impact-card:first-child { background: #241830; box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 30px 60px -38px rgb(0 0 0 / .9); }
/* arriving: the feature opens from its left as its figure counts up, then the rail deals in from the right */
html.impact-live[data-cards=j] .impact-grid > .impact-card { opacity: 0; transform: none; translate: 24px 0; transition: opacity .5s ease calc(var(--i) * .06s + .2s), translate .7s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .06s + .2s), transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, background-color .3s ease; }
html.impact-live[data-cards=j] .impact-grid > .impact-card:first-child { translate: none; clip-path: inset(0 100% 0 0 round 22px); transition: opacity .3s ease, clip-path .9s cubic-bezier(.6,0,.2,1); }
html.impact-live[data-cards=j] .impact-grid > .impact-card.is-in { opacity: 1; translate: none; }
html.impact-live[data-cards=j] .impact-grid > .impact-card:first-child.is-in { clip-path: inset(0 round 22px); }
html.impact-live[data-cards=j] .impact-bar :is(s, u) { transform: scaleX(0); transition: transform .7s cubic-bezier(.2,.8,.2,1) .6s; }
html.impact-live[data-cards=j] .impact-bar u { transition-delay: 1s; }
html.impact-live[data-cards=j] .is-in .impact-bar :is(s, u) { transform: none; }

/* K · Quote wall: each result a pull-quote under its figure, the figure a large outlined numeral that fills in when
   pointed at; the label in small capitals between them; the source after a short rule. These rules are the base; the
   earlier layout, four staggered columns packed as a masonry by results.js (--cols, --stagger; two on tablets, one on
   phones), shows at ?quotes=old, and the even grid below replaces it otherwise. */
html:is([data-cards=k], [data-cards=m]) .impact-grid { --cols: 4; --stagger: 0 56 22 78; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: 4px; column-gap: clamp(26px, 3vw, 52px); row-gap: 0; padding-top: 6px; border: 0; }
html:is([data-cards=k], [data-cards=m]) .impact-grid > .impact-card:nth-child(n) { container-type: inline-size; grid-column: var(--kc, auto); grid-row: var(--kr, auto); align-self: start; display: flex; flex-direction: column; min-width: 0; margin-bottom: clamp(30px, 5vh, 48px); padding: 0; border: 0; background: none; }
html:is([data-cards=k], [data-cards=m]) .impact-media, html:is([data-cards=k], [data-cards=m]) :is(.impact-chart, .impact-also) { display: none; }
html:is([data-cards=k], [data-cards=m]) .impact-grid .impact-big:nth-child(n) { position: relative; width: max-content; max-width: 100%; padding: 0 .04em 0 0; font-size: clamp(2.2rem, min(4.4vw, 7vh, 20cqi), 4.3rem); line-height: 1; letter-spacing: -.035em;
  background: none; color: transparent !important; -webkit-text-stroke: 1.3px var(--accent); transition: color .45s ease; }
html:is([data-cards=k], [data-cards=m]) .impact-grid .impact-card:is(:hover, :focus-visible) .impact-big:nth-child(n) { color: color-mix(in srgb, var(--accent) 88%, transparent) !important; }
html:is([data-cards=k], [data-cards=m]) .impact-grid .impact-card:first-child .impact-big:nth-child(n) { font-size: clamp(4.4rem, min(10vw, 17vh, 44cqi), 9rem); line-height: .9; -webkit-text-stroke-width: 2px; }
html:is([data-cards=k], [data-cards=m]) .impact-label { position: relative; margin-top: clamp(6px, 1vh, 10px) !important; font-size: .72rem; line-height: 1.35; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
html:is([data-cards=k], [data-cards=m]) .impact-text { margin-top: clamp(8px, 1.2vh, 12px) !important; padding-left: 14px; border-left: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); font-size: clamp(.92rem, min(1.08vw, 1.85vh), 1.06rem); font-weight: 500; line-height: 1.42; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; transition: border-color .4s ease; }
html:is([data-cards=k], [data-cards=m]) .impact-card:first-child .impact-text { font-size: clamp(1rem, min(1.25vw, 2.1vh), 1.2rem); }
html:is([data-cards=k], [data-cards=m]) .impact-card:is(:hover, :focus-visible) .impact-text { border-left-color: var(--accent); }
html:is([data-cards=k], [data-cards=m]) .impact-src { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: clamp(8px, 1.2vh, 12px) !important; padding-left: 16px; font-size: .66rem; letter-spacing: .08em; line-height: 1.3; }
html:is([data-cards=k], [data-cards=m]) .impact-src::before { content: ''; flex: none; width: 18px; height: 1px; margin-left: -16px; align-self: center; background: currentColor; }
html:is([data-cards=k], [data-cards=m]) .impact-src time { display: inline; order: 2; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
html:is([data-cards=k], [data-cards=m]) .impact-src > span { order: 3; }
html:is([data-cards=k], [data-cards=m]) .impact-grid > .impact-card:focus-visible { outline-offset: 6px; border-radius: 6px; }
@media (min-width: 761px) and (max-width: 1100px) { html:is([data-cards=k], [data-cards=m]) .impact-grid { --cols: 2; --stagger: 0 64; } }
@media (max-width: 760px) {
  html:is([data-cards=k], [data-cards=m]) .impact-grid { --cols: 1; display: block; }
  html:is([data-cards=k], [data-cards=m]) .impact-grid > .impact-card:nth-child(n) { margin-bottom: 30px; }
  html:is([data-cards=k], [data-cards=m]) .impact-grid .impact-big:nth-child(n) { font-size: 3rem; }
  html:is([data-cards=k], [data-cards=m]) .impact-grid .impact-card:first-child .impact-big:nth-child(n) { font-size: clamp(4.6rem, 26vw, 6rem); }
}
html[data-variant=nocturne]:is([data-cards=k], [data-cards=m]) .impact-grid .impact-big:nth-child(n) { -webkit-text-stroke-color: #f08bbd; }
html[data-variant=nocturne]:is([data-cards=k], [data-cards=m]) .impact-label { color: #f3a6cb; }
html[data-variant=nocturne]:is([data-cards=k], [data-cards=m]) .impact-grid .impact-card:is(:hover, :focus-visible) .impact-big:nth-child(n) { color: rgb(240 139 189 / .85) !important; }
/* arriving: each quote rises in turn, its numeral's outline first, then filling briefly and emptying again */
html.impact-live:is([data-cards=k], [data-cards=m]) .impact-grid > .impact-card { opacity: 0; transform: none; translate: 0 18px; transition: opacity .55s ease calc(var(--i) * .08s), translate .8s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .08s); }
html.impact-live:is([data-cards=k], [data-cards=m]) .impact-grid > .impact-card.is-in { opacity: 1; translate: none; }
html.impact-live:is([data-cards=k], [data-cards=m]) .impact-card > :is(.impact-label, .impact-text, .impact-src) { opacity: 0; transition: opacity .5s ease calc(var(--i) * .08s + .25s + var(--k, 0) * .05s), border-color .4s ease; }
html.impact-live:is([data-cards=k], [data-cards=m]) .impact-card.is-in > :is(.impact-label, .impact-text, .impact-src) { opacity: 1; }

/* K · Quote wall, laid out again (the masonry above stays at ?quotes=old): one even four-column grid of two rows, the
   22% leading across two columns of the first. Every card is a subgrid of four shared lines (figure, label, quote,
   source), so each row's figures sit on one baseline, its quotes start together and its sources line up at the foot.
   One figure size per row (the 22% the one exception, as the lead); labels in sentence case; each source kept to one
   line, its name cut short if it must so the years and arrow stay beside it. Two columns on tablets, one on phones. */
.impact-src-name { font-style: normal; }
html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, auto) clamp(24px, 4.6vh, 48px) repeat(4, auto); grid-auto-rows: auto; column-gap: clamp(28px, 3vw, 52px); padding-top: clamp(4px, 1vh, 12px); }
html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-grid > .impact-card:nth-child(n) { display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); grid-row: 6 / span 4; grid-column: auto; align-self: stretch; margin: 0; container-type: normal; }
html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-grid > .impact-card:nth-child(-n+3) { grid-row: 1 / span 4; }
html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-grid > .impact-card:first-child { grid-column: span 2; }
html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-card > .impact-big { grid-row: 1; align-self: end; }
html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-card > .impact-label { grid-row: 2; align-self: start; }
html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-card > .impact-text { grid-row: 3; align-self: start; }
html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-card > .impact-src { grid-row: 4; align-self: end; }
html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-grid .impact-big:nth-child(n) { font-size: clamp(2.3rem, min(3.7vw, 6.4vh), 3.6rem); line-height: .95; }
html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-grid .impact-card:first-child .impact-big:nth-child(n) { font-size: clamp(4.6rem, min(9.6vw, 15vh), 8.8rem); line-height: .82; }
html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-label { margin-top: clamp(8px, 1.3vh, 12px) !important; font-size: clamp(.88rem, min(1vw, 1.8vh), .98rem); font-weight: 700; line-height: 1.3; letter-spacing: -.005em; text-transform: none; text-wrap: balance; }
html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-text { font-size: clamp(.86rem, min(1vw, 1.75vh), 1rem); }
html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-card:first-child .impact-text { max-width: 36em; font-size: clamp(1rem, min(1.3vw, 2.2vh), 1.22rem); }
html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-src { flex-wrap: nowrap; gap: 8px; min-width: 0; margin-top: clamp(10px, 1.5vh, 14px) !important; padding-left: 26px; font-size: .64rem; letter-spacing: .06em; white-space: nowrap; }
html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-src::before { margin-left: -26px; }
html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-src-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-src :is(time, > span) { flex: none; }
@media (min-width: 761px) and (max-width: 1100px) { /* two columns, the lead across both; plain rows */
  html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; row-gap: 40px; }
  html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-grid > .impact-card:nth-child(n) { display: flex; grid-row: auto; }
  html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-grid > .impact-card:first-child { grid-column: 1 / -1; }
  html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-card > .impact-src { margin-top: auto !important; padding-top: 12px; }
  html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-card > :is(.impact-big, .impact-src) { align-self: flex-start; }
}
@media (max-width: 760px) {
  html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-grid { display: flex; flex-direction: column; gap: 34px; }
  html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-grid > .impact-card:nth-child(n) { display: flex; }
  html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-card > :is(.impact-big, .impact-src) { align-self: flex-start; }
  html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-grid .impact-big:nth-child(n) { font-size: 3rem; }
  html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-grid .impact-card:first-child .impact-big:nth-child(n) { font-size: clamp(4.6rem, 26vw, 6rem); }
  html:is([data-cards=k], [data-cards=m]):not([data-quotes=old]) .impact-text { font-size: 1rem; }
}
/* M · Quote wall 3D: the Quote wall (all of K's rules above apply) set in a perspective scene. With a fine pointer over
   the page, results.js eases the wall into 3D: each quote floats at its own depth, the whole wall turns a few degrees
   toward the pointer, nearer quotes shifting more than farther ones, each outlined numeral turning a little further than
   its text and filling with a soft glow where the pointer is; the quote under the pointer lifts forward. When the
   pointer leaves, it all settles back to the flat wall and the transforms are cleared, so text at rest is crisp.
   Reduced motion, touch and phones keep the flat wall. */
html[data-cards=m] .impact-grid.is-3d { transform-style: preserve-3d; will-change: transform; }
html[data-cards=m] .impact-grid.is-3d > .impact-card { transform-style: preserve-3d; will-change: transform; }
html[data-cards=m] .impact-grid.is-3d .impact-big { will-change: transform; }
html[data-cards=m] .impact-grid .impact-big:nth-child(n) { transform-origin: 0 60%;
  background: radial-gradient(circle var(--sr, 0px) at var(--sx, 50%) var(--sy, 50%), color-mix(in srgb, var(--accent) 72%, transparent), color-mix(in srgb, var(--accent) 22%, transparent) 45%, color-mix(in srgb, var(--accent) 0%, transparent)); -webkit-background-clip: text; background-clip: text; }
/* keyboard focus lifts the quote too (without the 3D scene) */
html[data-cards=m]:not(.impact-still) .impact-grid > .impact-card:focus-visible:nth-child(n) { translate: 0 -4px; transition: translate .35s cubic-bezier(.2,.8,.2,1); }
/* L · Impact map, the earlier take (kept at ?map=old): the results grouped by industry into soft labelled clusters, Industrial and Healthcare above,
   Sports and Enterprise below. Each result's years carry a dot; from a hub between the rows
   a route runs out to each cluster's edge (the hulls, dots and routes are drawn by results.js where the cards sit).
   Pointing at a result lights its cluster and its route. Narrower screens get a list under each industry's label. */
html[data-cards=l][data-map=old] .impact-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto clamp(44px, 7.4vh, 66px) auto; column-gap: clamp(18px, 2vw, 30px); row-gap: 0; padding-top: 12px; border: 0; }
html[data-cards=l][data-map=old] .impact-grid > .impact-card:nth-child(n) { grid-column: var(--mc, auto); grid-row: var(--mr, auto); position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0;
  padding: clamp(20px, 2.8vh, 28px) clamp(16px, 1.4vw, 22px) clamp(14px, 2vh, 20px); border: 0; border-radius: 18px; background: none; transition: background-color .3s ease; }
html[data-cards=l][data-map=old] .impact-grid > .impact-card:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--accent) 4%, transparent); }
html[data-cards=l][data-map=old] .impact-grid > .impact-card:focus-visible { outline-offset: 0; }
html[data-cards=l][data-map=old] .impact-map { display: block; position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
html[data-cards=l][data-map=old] .impact-map-hull { fill: color-mix(in srgb, var(--accent) 3.5%, color-mix(in srgb, #fff 45%, var(--bg))); stroke: color-mix(in srgb, var(--accent) 22%, var(--line)); stroke-width: 1; transition: fill .3s ease, stroke .3s ease; }
html[data-cards=l][data-map=old] .impact-map-route { fill: none; stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke .3s ease, stroke-width .3s ease; }
html[data-cards=l][data-map=old] :is(.impact-map-dot, .impact-map-port) { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
html[data-cards=l][data-map=old] .impact-map-port { stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-width: 1.6; transition: stroke .3s ease; }
html[data-cards=l][data-map=old] .impact-map-hub { fill: var(--accent); }
html[data-cards=l][data-map=old] .impact-map-halo { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: color-mix(in srgb, var(--accent) 30%, transparent); transform-box: fill-box; transform-origin: center; }
html[data-cards=l][data-map=old] .impact-map g.is-hot .impact-map-hull { fill: color-mix(in srgb, var(--accent) 7%, color-mix(in srgb, #fff 55%, var(--bg))); stroke: color-mix(in srgb, var(--accent) 55%, transparent); }
html[data-cards=l][data-map=old] .impact-map g.is-hot .impact-map-route { stroke: var(--accent); stroke-width: 2; }
html[data-cards=l][data-map=old] .impact-map g.is-hot .impact-map-port { stroke: var(--accent); }
/* the industry's label sits on its cluster's top edge */
html[data-cards=l][data-map=old] .impact-card[data-lead]::after { content: attr(data-domain); position: absolute; top: 0; left: clamp(14px, 1.2vw, 20px); translate: 0 -50%; padding: 5px 11px 4px; border-radius: 999px;
  background: var(--ink); color: var(--bg); font-size: .64rem; font-weight: 800; line-height: 1; letter-spacing: .15em; text-transform: uppercase; }
html[data-cards=l][data-map=old] .impact-media { display: contents; }
html[data-cards=l][data-map=old] :is(.impact-photo, .impact-also, .impact-chart-cap) { display: none; }
html[data-cards=l][data-map=old] .impact-icon { top: clamp(16px, 2.4vh, 24px); right: clamp(14px, 1.3vw, 20px); width: 24px; height: 24px; }
html[data-cards=l][data-map=old] .impact-icon .pill-icon { width: 24px; height: 24px; }
html[data-cards=l][data-map=old] .impact-when { display: block; align-self: flex-start; margin: 0 0 clamp(6px, 1vh, 10px) 14px; font-size: .72rem; font-weight: 700; line-height: 1.2; letter-spacing: .03em; font-variant-numeric: tabular-nums; color: var(--muted); }
html[data-cards=l][data-map=old] .impact-big[data-num] { padding-right: .08em; }
html[data-cards=l][data-map=old] .impact-big { width: max-content; max-width: 100%; font-size: clamp(1.7rem, min(2.5vw, 4.2vh), 2.5rem); line-height: 1; letter-spacing: -.045em; }
html[data-cards=l][data-map=old] .impact-label { margin-top: 5px !important; font-size: clamp(.88rem, min(1.04vw, 1.8vh), 1rem); line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
html[data-cards=l][data-map=old] .impact-text { margin-top: 6px !important; font-size: clamp(.78rem, min(.92vw, 1.6vh), .88rem); line-height: 1.42; text-wrap: pretty; }
html[data-cards=l][data-map=old] .impact-src { display: flex; gap: 8px; margin-top: auto !important; padding-top: clamp(8px, 1.3vh, 12px); font-size: .64rem; letter-spacing: .08em; line-height: 1.3; }
html[data-cards=l][data-map=old] .impact-src > span { margin-left: auto; }
/* the Industrial cluster's one result, two columns wide: the figure large at the left, the rest beside it */
html[data-cards=l][data-map=old] .impact-card[data-domain=Industrial][data-lead] { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; column-gap: clamp(20px, 2.4vw, 36px); }
html[data-cards=l][data-map=old] .impact-card[data-domain=Industrial][data-lead] > * { grid-column: 2; }
html[data-cards=l][data-map=old] .impact-card[data-domain=Industrial][data-lead] .impact-when { grid-column: 1; grid-row: 1; }
html[data-cards=l][data-map=old] .impact-card[data-domain=Industrial][data-lead] .impact-big { grid-column: 1; grid-row: 2 / -1; align-self: center; font-size: clamp(4rem, min(7vw, 12vh), 6.6rem); line-height: .85; }
html[data-cards=l][data-map=old] .impact-card[data-domain=Industrial][data-lead] .impact-label { grid-row: 2; margin-top: 0 !important; }
html[data-cards=l][data-map=old] .impact-card[data-domain=Industrial][data-lead] .impact-chart { grid-row: 3; display: grid; gap: 5px; margin-top: 10px; color: var(--muted); }
html[data-cards=l][data-map=old] .impact-card[data-domain=Industrial][data-lead] .impact-text { grid-row: 4; }
html[data-cards=l][data-map=old] .impact-card[data-domain=Industrial][data-lead] .impact-src { grid-row: 6; }
html[data-cards=l][data-map=old] .impact-bar { font-size: .72rem; grid-template-columns: 3.4em minmax(0, 1fr) 3.1em; column-gap: 10px; }
html[data-cards=l][data-map=old] .impact-bar b { height: 8px; }
html[data-cards=l][data-map=old] .impact-bar s { background: color-mix(in srgb, var(--ink) 16%, transparent); }
html[data-cards=l][data-map=old] .impact-bar u { background: linear-gradient(90deg, var(--accent), #8a5ad6); }
html[data-cards=l][data-map=old] .impact-bar em { font-size: .86rem; color: var(--ink); }
@media (max-width: 1100px) { /* a list under each industry's label, a line down the left joining the cluster's results */
  html[data-cards=l][data-map=old] .impact-grid { display: block; padding-top: 14px; }
  html[data-cards=l][data-map=old] .impact-map { display: none; }
  html[data-cards=l][data-map=old] .impact-grid > .impact-card:nth-child(n) { margin-left: 6px; padding: 4px 0 20px 22px; border-radius: 0; border-left: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent); }
  html[data-cards=l][data-map=old] .impact-grid > .impact-card[data-lead]:nth-child(n) { margin-top: 34px; }
  html[data-cards=l][data-map=old] .impact-grid > .impact-card[data-lead]:nth-child(1) { margin-top: 18px; }
  html[data-cards=l][data-map=old] .impact-card[data-lead]::after { top: -26px; left: -6px; translate: none; }
  html[data-cards=l][data-map=old] .impact-card::before { content: ''; position: absolute; left: -6px; top: 6px; width: 7px; height: 7px; border: 2px solid var(--accent); border-radius: 50%; background: var(--bg); }
  html[data-cards=l][data-map=old] .impact-when { margin-left: 0; }
  html[data-cards=l][data-map=old] .impact-icon { top: 4px; right: 0; }
  html[data-cards=l][data-map=old] .impact-card[data-domain=Industrial][data-lead] { display: flex; }
  html[data-cards=l][data-map=old] .impact-card[data-domain=Industrial][data-lead] .impact-big { align-self: flex-start; font-size: 3.6rem; margin: 4px 0 6px !important; }
  html[data-cards=l][data-map=old] .impact-card[data-domain=Industrial][data-lead] .impact-chart { max-width: 420px; }
  html[data-cards=l][data-map=old] .impact-src { margin-top: 8px !important; padding-top: 0; }
}
html[data-variant=nocturne][data-cards=l][data-map=old] .impact-map-hull { fill: color-mix(in srgb, #fff 3%, var(--bg)); stroke: rgb(255 255 255 / .12); }
html[data-variant=nocturne][data-cards=l][data-map=old] .impact-map g.is-hot .impact-map-hull { fill: color-mix(in srgb, #fff 5%, var(--bg)); stroke: rgb(240 139 189 / .45); }
html[data-variant=nocturne][data-cards=l][data-map=old] .impact-bar s { background: rgb(255 255 255 / .2); }
html[data-variant=nocturne][data-cards=l][data-map=old] .impact-bar u { background: linear-gradient(90deg, #f08bbd, #b8a4db); }
/* arriving: the hub lights, its routes run out to the clusters, the hulls fade up and the results follow in turn; the
   hub keeps a slow pulse */
html.impact-live[data-cards=l][data-map=old] .impact-grid > .impact-card { opacity: 0; transform: none; translate: 0 10px; transition: opacity .5s ease calc(var(--i) * .06s + .45s), translate .7s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .06s + .45s), background-color .3s ease; }
html.impact-live[data-cards=l][data-map=old] .impact-grid > .impact-card.is-in { opacity: 1; translate: none; }
html.impact-live[data-cards=l][data-map=old] .impact-map :is(.impact-map-hull, .impact-map-dot, .impact-map-port) { opacity: 0; transition: opacity .6s ease .5s, fill .3s ease, stroke .3s ease; }
html.impact-live[data-cards=l][data-map=old] .impact-map .impact-map-route { stroke-dashoffset: 1; transition: stroke-dashoffset .8s cubic-bezier(.5,0,.2,1) .1s, stroke .3s ease, stroke-width .3s ease; }
html.impact-live[data-cards=l][data-map=old] .impact-grid:has(> .is-in) .impact-map :is(.impact-map-hull, .impact-map-dot, .impact-map-port) { opacity: 1; }
html.impact-live[data-cards=l][data-map=old] .impact-grid:has(> .is-in) .impact-map .impact-map-route { stroke-dashoffset: 0; }
html.impact-live[data-cards=l][data-map=old] .impact-map-halo { animation: res6-hub 3.2s ease-in-out infinite; }
@keyframes res6-hub { 0%, 100% { scale: .7; opacity: .5; } 50% { scale: 1.15; opacity: 1; } }
/* L · Impact map, second take (?map=v2): the seven results as soft cards, grouped by industry. Each industry opens with a rail in the site's
   thread motif (a node, the industry as an accent eyebrow with its count, a hairline running across its cards), Industrial
   and Healthcare above, Sports and Enterprise below, every card on one even four-column grid. Pointing at a result
   lights its industry's rail. Two columns on tablets, one on phones. */
html[data-cards=l][data-map=v2] .impact-grid { --lc-pad: clamp(16px, 2.3vh, 22px) clamp(16px, 1.4vw, 22px) clamp(14px, 2vh, 18px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; gap: 0 clamp(14px, 1.3vw, 20px); padding-top: 2px; border: 0; }
html[data-cards=l][data-map=v2] .impact-grid > :is(.impact-card, .impact-rail):nth-child(n) { grid-column: var(--mc, auto); grid-row: var(--mr, auto); }
/* the rail: node, eyebrow, count, hairline */
html[data-cards=l][data-map=v2] .impact-rail { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 0 2px clamp(9px, 1.4vh, 13px); }
html[data-cards=l][data-map=v2] .impact-grid > .impact-rail[data-below] { padding-top: clamp(12px, 2vh, 24px); }
html[data-cards=l][data-map=v2] .impact-rail::before { content: ''; flex: none; width: 9px; height: 9px; box-sizing: border-box; border: 2px solid var(--accent); border-radius: 50%; background: var(--bg); transition: background-color .3s ease, box-shadow .3s ease; }
html[data-cards=l][data-map=v2] .impact-rail::after { content: ''; flex: 1; min-width: 12px; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--line) 55%, color-mix(in srgb, var(--line) 0%, transparent)); transform-origin: 0 50%; transition: background-color .3s ease, opacity .3s ease; }
html[data-cards=l][data-map=v2] .impact-rail b { font-size: .7rem; font-weight: 800; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
html[data-cards=l][data-map=v2] .impact-rail span { font-size: .72rem; font-weight: 600; line-height: 1; letter-spacing: .02em; color: var(--muted); }
html[data-cards=l][data-map=v2] .impact-rail.is-hot::before { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
html[data-cards=l][data-map=v2] .impact-rail.is-hot::after { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, var(--line)) 70%, color-mix(in srgb, var(--line) 0%, transparent)); }
/* the card: the site's soft surface, figure first, the pictogram in its tinted disc beside the years */
html[data-cards=l][data-map=v2] .impact-grid > .impact-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto minmax(0, 1fr) auto; align-content: start; min-width: 0; padding: var(--lc-pad);
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); border-radius: 18px; background: color-mix(in srgb, #fff 62%, var(--bg));
  box-shadow: 0 1px 2px rgb(34 28 46 / .04), 0 14px 32px -24px rgb(34 28 46 / .22); transition: border-color .3s ease, box-shadow .35s ease, background-color .3s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
html[data-cards=l][data-map=v2] .impact-grid > .impact-card:is(:hover, :focus-visible) { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); background: color-mix(in srgb, #fff 82%, var(--bg)); box-shadow: 0 1px 2px rgb(34 28 46 / .05), 0 22px 40px -24px rgb(84 30 74 / .32); }
html[data-cards=l][data-map=v2] .impact-grid > .impact-card > * { grid-column: 1 / -1; }
html[data-cards=l][data-map=v2] .impact-media { display: contents; }
html[data-cards=l][data-map=v2] :is(.impact-photo, .impact-chart-cap) { display: none; }
html[data-cards=l][data-map=v2] .impact-icon { position: static; grid-column: 2; grid-row: 1 / 3; align-self: start; display: grid; place-items: center; width: clamp(42px, 5.6vh, 50px); height: clamp(42px, 5.6vh, 50px); border-radius: 50%;
  background: var(--tag-wash, #e1deec); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tag-ink, #45315b) 7%, transparent); transition: transform .5s cubic-bezier(.2,.8,.2,1), background-color .3s ease; }
html[data-cards=l][data-map=v2] .impact-icon .pill-icon { width: 58%; height: 58%; }
html[data-cards=l][data-map=v2] .impact-card:is(:hover, :focus-visible) .impact-icon { background: color-mix(in srgb, var(--accent) 13%, var(--tag-wash, #e1deec)); }
html[data-cards=l][data-map=v2] .impact-when { display: block; grid-column: 1; grid-row: 1; align-self: start; margin: 2px 0 0; font-size: .72rem; font-weight: 700; line-height: 1.2; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--muted); }
html[data-cards=l][data-map=v2] .impact-big { grid-column: 1; grid-row: 2; align-self: end; width: max-content; max-width: 100%; margin-top: clamp(6px, 1.1vh, 12px) !important; padding-right: .06em; font-size: clamp(1.75rem, min(2.5vw, 4.3vh), 2.55rem); line-height: 1; letter-spacing: -.045em; }
html[data-cards=l][data-map=v2] .impact-label { grid-row: 3; margin-top: 6px !important; font-size: clamp(.9rem, min(1.04vw, 1.85vh), 1.02rem); line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
html[data-cards=l][data-map=v2] .impact-text { grid-row: 4; margin-top: 6px !important; font-size: clamp(.79rem, min(.93vw, 1.62vh), .9rem); line-height: 1.45; text-wrap: pretty; }
html[data-cards=l][data-map=v2] .impact-src { grid-row: 5; display: flex; gap: 8px; margin-top: 0 !important; padding-top: clamp(10px, 1.6vh, 14px); font-size: .64rem; letter-spacing: .08em; line-height: 1.3; }
html[data-cards=l][data-map=v2] .impact-src > span { margin-left: auto; }
/* the one numeric result, two columns wide: the figure large at the left, its before-and-after bar and story beside */
html[data-cards=l][data-map=v2] .impact-card[data-domain=Industrial][data-lead] { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) auto; grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: clamp(18px, 2vw, 32px); }
html[data-cards=l][data-map=v2] .impact-card[data-domain=Industrial][data-lead] .impact-when { grid-column: 1; grid-row: 1; }
html[data-cards=l][data-map=v2] .impact-card[data-domain=Industrial][data-lead] .impact-icon { grid-column: 3; grid-row: 1 / 3; }
html[data-cards=l][data-map=v2] .impact-card[data-domain=Industrial][data-lead] .impact-big { grid-column: 1; grid-row: 2 / 4; align-self: center; margin-top: 0 !important; font-size: clamp(4rem, min(6.4vw, 11vh), 6.4rem); line-height: .86; }
html[data-cards=l][data-map=v2] .impact-card[data-domain=Industrial][data-lead] .impact-label { grid-column: 2; grid-row: 1; margin-top: 0 !important; align-self: start; font-size: clamp(1rem, min(1.2vw, 2.1vh), 1.15rem); }
html[data-cards=l][data-map=v2] .impact-card[data-domain=Industrial][data-lead] .impact-chart { grid-column: 2; grid-row: 2; display: grid; gap: 8px; margin-top: clamp(10px, 1.6vh, 16px); color: var(--muted); }
html[data-cards=l][data-map=v2] .impact-card[data-domain=Industrial][data-lead] .impact-text { grid-column: 2 / -1; grid-row: 3; margin-top: clamp(10px, 1.6vh, 16px) !important; font-size: clamp(.84rem, min(1vw, 1.75vh), .96rem); }
html[data-cards=l][data-map=v2] .impact-also { margin-top: 2px; padding: 5px 11px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-size: .72rem; }
html[data-variant=nocturne][data-cards=l][data-map=v2] .impact-also { background: rgb(240 139 189 / .14); }
html[data-cards=l][data-map=v2] .impact-card[data-domain=Industrial][data-lead] .impact-src { grid-column: 1 / -1; grid-row: 4; }
html[data-cards=l][data-map=v2] .impact-bar { font-size: .72rem; grid-template-columns: 3.4em minmax(0, 1fr) 3.1em; column-gap: 10px; }
html[data-cards=l][data-map=v2] .impact-bar b { height: 10px; }
html[data-cards=l][data-map=v2] .impact-bar s { background: color-mix(in srgb, var(--ink) 14%, transparent); }
html[data-cards=l][data-map=v2] .impact-bar u { background: linear-gradient(90deg, var(--accent), #8a5ad6); }
html[data-cards=l][data-map=v2] .impact-bar em { font-size: .86rem; color: var(--ink); }
@media (max-width: 1100px) { /* two columns: each rail across the row, an industry's odd card out spans it */
  html[data-cards=l][data-map=v2] .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; row-gap: 14px; }
  html[data-cards=l][data-map=v2] .impact-grid > :is(.impact-card, .impact-rail):nth-child(n) { grid-row: auto; grid-column: auto; }
  html[data-cards=l][data-map=v2] .impact-grid > :is(.impact-rail, .impact-card[data-wide]):nth-child(n) { grid-column: 1 / -1; }
  html[data-cards=l][data-map=v2] .impact-grid > .impact-rail { padding-bottom: 0; }
  html[data-cards=l][data-map=v2] .impact-grid > .impact-rail ~ .impact-rail:nth-child(n) { padding-top: 14px; }
}
@media (max-width: 760px) { /* one column; the lead card stacks */
  html[data-cards=l][data-map=v2] .impact-grid { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding-top: 4px; }
  html[data-cards=l][data-map=v2] .impact-grid > .impact-card { padding: 18px 18px 16px; }
  html[data-cards=l][data-map=v2] .impact-big { font-size: 2.2rem; }
  html[data-cards=l][data-map=v2] .impact-label { font-size: 1rem; }
  html[data-cards=l][data-map=v2] .impact-text { font-size: .92rem; }
  html[data-cards=l][data-map=v2] .impact-icon { width: 46px; height: 46px; }
  html[data-cards=l][data-map=v2] .impact-card[data-domain=Industrial][data-lead] { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; }
  html[data-cards=l][data-map=v2] .impact-card[data-domain=Industrial][data-lead] > :nth-child(n) { grid-column: 1 / -1; grid-row: auto; }
  html[data-cards=l][data-map=v2] .impact-card[data-domain=Industrial][data-lead] :is(.impact-when, .impact-big):nth-child(n) { grid-column: 1; }
  html[data-cards=l][data-map=v2] .impact-card[data-domain=Industrial][data-lead] .impact-when { grid-row: 1; }
  html[data-cards=l][data-map=v2] .impact-card[data-domain=Industrial][data-lead] .impact-big { grid-row: 2; align-self: end; margin-top: 8px !important; font-size: 4.2rem; }
  html[data-cards=l][data-map=v2] .impact-card[data-domain=Industrial][data-lead] .impact-icon:nth-child(n) { grid-column: 2; grid-row: 1 / 3; }
  html[data-cards=l][data-map=v2] .impact-card[data-domain=Industrial][data-lead] .impact-label { margin-top: 8px !important; }
}
/* Nocturne: the cards a breath lighter than the night ground, the discs and rails in the dark palette */
html[data-variant=nocturne][data-cards=l][data-map=v2] .impact-grid > .impact-card { border-color: rgb(255 255 255 / .08); background: color-mix(in srgb, #fff 3.5%, var(--bg)); box-shadow: 0 18px 36px -26px rgb(0 0 0 / .8); }
html[data-variant=nocturne][data-cards=l][data-map=v2] .impact-grid > .impact-card:is(:hover, :focus-visible) { border-color: rgb(240 139 189 / .35); background: color-mix(in srgb, #fff 6%, var(--bg)); }
html[data-variant=nocturne][data-cards=l][data-map=v2] .impact-icon { background: rgb(201 184 232 / .1); box-shadow: inset 0 0 0 1px rgb(201 184 232 / .12); }
html[data-variant=nocturne][data-cards=l][data-map=v2] .impact-card:is(:hover, :focus-visible) .impact-icon { background: rgb(240 139 189 / .16); }
html[data-variant=nocturne][data-cards=l][data-map=v2] .impact-bar s { background: rgb(255 255 255 / .2); }
html[data-variant=nocturne][data-cards=l][data-map=v2] .impact-bar u { background: linear-gradient(90deg, #f08bbd, #b8a4db); }
/* arriving: the rails draw out from their nodes, then the cards rise in turn */
html.impact-live[data-cards=l][data-map=v2] .impact-grid > .impact-card { opacity: 0; transform: none; translate: 0 12px; transition: opacity .55s ease calc(var(--i) * .06s + .3s), translate .75s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .06s + .3s), border-color .3s ease, box-shadow .35s ease, background-color .3s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
html.impact-live[data-cards=l][data-map=v2] .impact-grid > .impact-card.is-in { opacity: 1; translate: none; }
html.impact-live[data-cards=l][data-map=v2] .impact-grid > .impact-card.is-in:is(:hover, :focus-visible) { transform: translateY(-3px); }
html.impact-live[data-cards=l][data-map=v2] .impact-rail > * { opacity: 0; transition: opacity .5s ease .15s; }
html.impact-live[data-cards=l][data-map=v2] .impact-rail::before { scale: 0; transition: scale .45s cubic-bezier(.2,1.5,.4,1), background-color .3s ease, box-shadow .3s ease; }
html.impact-live[data-cards=l][data-map=v2] .impact-rail::after { scale: 0 1; transition: scale .9s cubic-bezier(.5,0,.2,1) .2s; }
html.impact-live[data-cards=l][data-map=v2] .impact-grid:has(> .is-in) .impact-rail > * { opacity: 1; }
html.impact-live[data-cards=l][data-map=v2] .impact-grid:has(> .is-in) .impact-rail::before { scale: 1; }
html.impact-live[data-cards=l][data-map=v2] .impact-grid:has(> .is-in) .impact-rail::after { scale: 1 1; }
html[data-cards=l][data-map=v2] .impact-rail :is(i, small, u) { display: none; }
/* L · Impact map: the seven results laid out as one map sheet divided into its industries' territories, Industrial
   and Healthcare across the top, Sports and Enterprise below, each region headed by its pictogram, name, years, count
   and a key of all seven with its own lit. Faint survey contours run under the sheet (results.js); a result's cell
   lifts into a tile when pointed at or focused, and lights its region's header. Two columns on tablets, one on phones.
   The earlier takes stay at ?map=v2 (soft cards under rails) and ?map=old (hulls and routes). */
html[data-cards=l]:not([data-map]) .impact-grid { --lm-line: color-mix(in srgb, var(--line) 82%, transparent); --lm-x: clamp(16px, 1.55vw, 26px);
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); gap: 0; padding: 0; overflow: clip;
  border: 1px solid var(--lm-line); border-radius: 24px; background: linear-gradient(180deg, color-mix(in srgb, #fff 72%, var(--bg)), color-mix(in srgb, #fff 42%, var(--bg)));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .75), 0 1px 2px rgb(34 28 46 / .04), 0 34px 64px -44px rgb(70 30 90 / .34); }
html[data-cards=l]:not([data-map]) .impact-grid > :is(.impact-card, .impact-rail):nth-child(n) { position: relative; z-index: 1; grid-column: var(--mc, auto); grid-row: var(--mr, auto); }
html[data-cards=l]:not([data-map]) .impact-terrain { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; color: var(--accent); opacity: .13; pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg, #000 10%, rgb(0 0 0 / .45) 55%, #000 95%); mask-image: linear-gradient(100deg, #000 10%, rgb(0 0 0 / .45) 55%, #000 95%); }
html[data-cards=l]:not([data-map]) .impact-terrain path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
/* territory borders: the regions meet on full hairlines; inside a region, results are parted by inset ones */
html[data-cards=l]:not([data-map]) .impact-grid > .impact-rail[data-below] { border-top: 1px solid var(--lm-line); }
html[data-cards=l]:not([data-map]) .impact-grid > .impact-rail:is([data-domain=Healthcare], [data-domain=Enterprise]) { border-left: 1px solid var(--lm-line); }
html[data-cards=l]:not([data-map]) .impact-grid > .impact-card[data-lead]:is([data-domain=Healthcare], [data-domain=Enterprise])::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--lm-line); }
html[data-cards=l]:not([data-map]) .impact-grid > .impact-card:not([data-lead])::before { content: ''; position: absolute; left: -.5px; top: clamp(12px, 2vh, 20px); bottom: clamp(12px, 2vh, 20px); width: 1px; background: var(--lm-line); transition: opacity .3s ease; }
/* the region header: pictogram plate, name, years; the count and the key of the seven at the right */
html[data-cards=l]:not([data-map]) .impact-rail { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: clamp(12px, 2vh, 20px) var(--lm-x) 0; }
html[data-cards=l]:not([data-map]) .impact-rail-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--tag-wash, #e1deec); color: var(--tag-ink, #45315b);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tag-ink, #45315b) 8%, transparent); transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
html[data-cards=l]:not([data-map]) .impact-rail-icon .pill-icon { display: block; width: 21px; height: 21px; margin: 0; }
html[data-cards=l]:not([data-map]) .impact-rail b { font-size: .72rem; font-weight: 800; line-height: 1; letter-spacing: .15em; text-transform: uppercase; color: var(--ink); transition: color .3s ease; }
html[data-cards=l]:not([data-map]) .impact-rail small { white-space: nowrap; font-size: .72rem; font-weight: 600; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--muted); }
html[data-cards=l]:not([data-map]) .impact-rail small::before { content: '·'; margin-right: 10px; color: color-mix(in srgb, var(--muted) 60%, transparent); }
html[data-cards=l]:not([data-map]) .impact-rail span { margin-left: auto; padding-left: 6px; font-size: .7rem; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--muted); }
html[data-cards=l]:not([data-map]) .impact-rail u { flex: none; display: flex; gap: 3px; }
html[data-cards=l]:not([data-map]) .impact-rail s { display: block; width: 9px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 12%, transparent); transition: background-color .3s ease, box-shadow .3s ease; }
html[data-cards=l]:not([data-map]) .impact-rail s.is-on { background: var(--accent); }
html[data-cards=l]:not([data-map]) .impact-rail.is-hot .impact-rail-icon { background: var(--accent); color: #fff; box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
html[data-cards=l]:not([data-map]) .impact-rail.is-hot b { color: var(--accent); }
html[data-cards=l]:not([data-map]) .impact-rail.is-hot s.is-on { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
/* a result: years and pictogram, figure, label, story, source; pointing at it raises a tile under it */
html[data-cards=l]:not([data-map]) .impact-grid > .impact-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; grid-template-rows: auto auto minmax(0, 1fr) auto; align-content: start; min-width: 0;
  padding: clamp(6px, 1.3vh, 16px) var(--lm-x) clamp(12px, 2vh, 20px); border: 0; border-radius: 22px; background: transparent; isolation: isolate; }
html[data-cards=l]:not([data-map]) .impact-grid > .impact-card::after { content: ''; position: absolute; inset: 7px; z-index: -1; border-radius: 16px; background: color-mix(in srgb, #fff 88%, var(--bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent), 0 1px 2px rgb(34 28 46 / .05), 0 20px 38px -24px rgb(84 30 74 / .38); opacity: 0; scale: .97; transition: opacity .3s ease, scale .45s cubic-bezier(.2,.8,.2,1); }
html[data-cards=l]:not([data-map]) .impact-grid > .impact-card:is(:hover, :focus-visible) { background: transparent; }
html[data-cards=l]:not([data-map]) .impact-grid > .impact-card:is(:hover, :focus-visible)::after { opacity: 1; scale: 1; }
html[data-cards=l]:not([data-map]) .impact-grid > .impact-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -7px; }
html[data-cards=l]:not([data-map]) .impact-grid > .impact-card > * { grid-column: 1 / -1; }
html[data-cards=l]:not([data-map]) .impact-media { display: contents; }
html[data-cards=l]:not([data-map]) :is(.impact-photo, .impact-chart-cap) { display: none; }
/* the footer: source at the left; the years and the arrow at the right */
html[data-cards=l]:not([data-map]) .impact-when { display: block; grid-column: 2; grid-row: 4; align-self: end; justify-self: end; margin: 0; padding-top: clamp(8px, 1.4vh, 12px); font-size: .66rem; font-weight: 700; line-height: 1.3; letter-spacing: .06em; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
html[data-cards=l]:not([data-map]) .impact-when::after { content: '\2197'; display: inline-block; margin-left: 7px; color: var(--accent); transition: transform .3s ease; }
html[data-cards=l]:not([data-map]) .impact-card:is(:hover, :focus-visible) .impact-when::after { transform: translate(2px, -2px); }
html[data-cards=l]:not([data-map]) .impact-icon { position: static; grid-column: 2; grid-row: 1; align-self: center; display: grid; place-items: center; width: clamp(36px, 4.6vh, 42px); height: clamp(36px, 4.6vh, 42px); margin-top: clamp(4px, 1vh, 10px); border-radius: 50%;
  background: color-mix(in srgb, var(--tag-wash, #e1deec) 80%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tag-ink, #45315b) 7%, transparent); transition: transform .5s cubic-bezier(.2,.8,.2,1), background-color .3s ease; }
html[data-cards=l]:not([data-map]) .impact-icon .pill-icon { width: 58%; height: 58%; }
html[data-cards=l]:not([data-map]) .impact-card:is(:hover, :focus-visible) .impact-icon { transform: translateY(-2px); background: color-mix(in srgb, var(--accent) 14%, var(--tag-wash, #e1deec)); }
html[data-cards=l]:not([data-map]) .impact-big { grid-column: 1; grid-row: 1; align-self: end; width: max-content; max-width: 100%; margin-top: clamp(4px, 1vh, 10px) !important; padding-right: .06em; font-size: clamp(1.8rem, min(2.6vw, 4.5vh), 2.65rem); line-height: 1; letter-spacing: -.045em; }
html[data-cards=l]:not([data-map]) .impact-label { grid-row: 2; margin-top: 4px !important; font-size: clamp(.9rem, min(1.04vw, 1.85vh), 1.02rem); line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
html[data-cards=l]:not([data-map]) .impact-text { grid-row: 3; margin-top: 6px !important; font-size: clamp(.79rem, min(.93vw, 1.62vh), .9rem); line-height: 1.45; text-wrap: pretty; }
html[data-cards=l]:not([data-map]) .impact-src { grid-column: 1 !important; grid-row: 4; display: block; min-width: 0; align-self: end; margin-top: 0 !important; padding-top: clamp(8px, 1.4vh, 12px); font-size: .62rem; letter-spacing: .07em; line-height: 1.35; text-wrap: balance; }
html[data-cards=l]:not([data-map]) .impact-src > span { display: none; }
/* the one numeric result, across its region: the figure large at the left, the before-and-after bar and story beside */
html[data-cards=l]:not([data-map]) .impact-card[data-domain=Industrial][data-lead] { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: clamp(18px, 2.2vw, 36px); }
html[data-cards=l]:not([data-map]) .impact-card[data-domain=Industrial][data-lead] .impact-when { grid-column: 3; grid-row: 4; }
html[data-cards=l]:not([data-map]) .impact-card[data-domain=Industrial][data-lead] .impact-icon { grid-column: 3; grid-row: 1; align-self: start; }
html[data-cards=l]:not([data-map]) .impact-card[data-domain=Industrial][data-lead] .impact-big { grid-column: 1; grid-row: 1 / 4; align-self: center; margin-top: 0 !important; font-size: clamp(4.4rem, min(7.2vw, 12.5vh), 7.4rem); line-height: .84; letter-spacing: -.06em; }
html[data-cards=l]:not([data-map]) .impact-card[data-domain=Industrial][data-lead] .impact-label { grid-column: 2; grid-row: 1; align-self: center; margin-top: clamp(8px, 1.4vh, 14px) !important; font-size: clamp(1rem, min(1.2vw, 2.1vh), 1.15rem); }
html[data-cards=l]:not([data-map]) .impact-card[data-domain=Industrial][data-lead] .impact-chart { grid-column: 2 / -1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px clamp(10px, 1.2vw, 18px); align-items: center; margin-top: clamp(8px, 1.4vh, 14px); color: var(--muted); }
html[data-cards=l]:not([data-map]) .impact-card[data-domain=Industrial][data-lead] .impact-chart > .impact-bar { grid-column: 1; }
html[data-cards=l]:not([data-map]) .impact-card[data-domain=Industrial][data-lead] .impact-chart > .impact-also { grid-column: 2; grid-row: 1 / 3; margin: 0; }
html[data-cards=l]:not([data-map]) .impact-card[data-domain=Industrial][data-lead] .impact-text { grid-column: 2 / -1; grid-row: 3; margin-top: clamp(10px, 1.6vh, 16px) !important; font-size: clamp(.84rem, min(1vw, 1.75vh), .96rem); }
html[data-cards=l]:not([data-map]) .impact-card[data-domain=Industrial][data-lead] .impact-src { grid-row: 4; }
html[data-cards=l]:not([data-map]) .impact-also { margin-top: 2px; padding: 5px 11px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-size: .72rem; }
html[data-cards=l]:not([data-map]) .impact-bar { font-size: .72rem; grid-template-columns: 3.4em minmax(0, 1fr) 3.1em; column-gap: 10px; }
html[data-cards=l]:not([data-map]) .impact-bar b { height: 10px; }
html[data-cards=l]:not([data-map]) .impact-bar s { background: color-mix(in srgb, var(--ink) 13%, transparent); }
html[data-cards=l]:not([data-map]) .impact-bar u { background: linear-gradient(90deg, var(--accent), #8a5ad6); }
html[data-cards=l]:not([data-map]) .impact-bar em { font-size: .86rem; color: var(--ink); }
@media (max-width: 1100px) { /* two columns: each region's header across the sheet, an industry's odd result out across it too */
  html[data-cards=l]:not([data-map]) .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  html[data-cards=l]:not([data-map]) .impact-grid > :is(.impact-card, .impact-rail):nth-child(n) { grid-row: auto; grid-column: auto; }
  html[data-cards=l]:not([data-map]) .impact-grid > .impact-rail:is([data-domain=Healthcare], [data-domain=Enterprise]) { border-left: 0; }
  html[data-cards=l]:not([data-map]) .impact-grid > .impact-card[data-lead]::before { display: none; }
  html[data-cards=l]:not([data-map]) .impact-grid > :is(.impact-rail, .impact-card[data-wide]):nth-child(n) { grid-column: 1 / -1; }
  html[data-cards=l]:not([data-map]) .impact-grid > .impact-rail ~ .impact-rail { border-top: 1px solid var(--lm-line); }
  html[data-cards=l]:not([data-map]) .impact-grid > .impact-card[data-wide]:not([data-lead])::before { left: var(--lm-x); right: var(--lm-x); top: -.5px; bottom: auto; width: auto; height: 1px; }
}
@media (max-width: 760px) { /* one column; the lead result stacks */
  html[data-cards=l]:not([data-map]) .impact-grid { --lm-x: 18px; grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
  html[data-cards=l]:not([data-map]) .impact-grid > .impact-card:not([data-lead])::before { left: var(--lm-x); right: var(--lm-x); top: -.5px; bottom: auto; width: auto; height: 1px; }
  html[data-cards=l]:not([data-map]) .impact-grid > .impact-card { padding: 14px var(--lm-x) 20px; border-radius: 18px; }
  html[data-cards=l]:not([data-map]) .impact-grid > .impact-card::after { inset: 5px; border-radius: 14px; }
  html[data-cards=l]:not([data-map]) .impact-grid > .impact-card:focus-visible { outline-offset: -5px; }
  html[data-cards=l]:not([data-map]) .impact-rail { gap: 8px; padding-top: 18px; }
  html[data-cards=l]:not([data-map]) .impact-rail s { width: 7px; }
  html[data-cards=l]:not([data-map]) .impact-big { font-size: 2.2rem; }
  html[data-cards=l]:not([data-map]) .impact-label { font-size: 1rem; }
  html[data-cards=l]:not([data-map]) .impact-text { font-size: .92rem; }
  html[data-cards=l]:not([data-map]) .impact-icon { width: 44px; height: 44px; }
  html[data-cards=l]:not([data-map]) .impact-card[data-domain=Industrial][data-lead] { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; }
  html[data-cards=l]:not([data-map]) .impact-card[data-domain=Industrial][data-lead] > :nth-child(n) { grid-column: 1 / -1; }
  html[data-cards=l]:not([data-map]) .impact-card[data-domain=Industrial][data-lead] .impact-big:nth-child(n) { grid-column: 1; grid-row: 1; align-self: end; margin-top: 4px !important; font-size: 4.6rem; }
  html[data-cards=l]:not([data-map]) .impact-card[data-domain=Industrial][data-lead] .impact-icon:nth-child(n) { grid-column: 2; grid-row: 1; }
  html[data-cards=l]:not([data-map]) .impact-card[data-domain=Industrial][data-lead] .impact-label { grid-row: 2; margin-top: 10px !important; }
  html[data-cards=l]:not([data-map]) .impact-card[data-domain=Industrial][data-lead] .impact-chart { grid-row: 3; }
  html[data-cards=l]:not([data-map]) .impact-card[data-domain=Industrial][data-lead] .impact-text { grid-row: 4; }
  html[data-cards=l]:not([data-map]) .impact-card[data-domain=Industrial][data-lead] .impact-src { grid-row: 5; }
  html[data-cards=l]:not([data-map]) .impact-card[data-domain=Industrial][data-lead] .impact-when:nth-child(n) { grid-column: 2; grid-row: 5; }
}
@media (max-width: 480px) { html[data-cards=l]:not([data-map]) .impact-rail small { display: none; } }
/* Nocturne: the sheet a breath lighter than the night ground, contours and key in the dark palette's pink */
html[data-variant=nocturne][data-cards=l]:not([data-map]) .impact-grid { --lm-line: rgb(255 255 255 / .09); background: linear-gradient(180deg, color-mix(in srgb, #fff 4.5%, var(--bg)), color-mix(in srgb, #fff 2%, var(--bg))); box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 34px 64px -40px rgb(0 0 0 / .85); }
html[data-variant=nocturne][data-cards=l]:not([data-map]) .impact-terrain { color: #f08bbd; opacity: .11; }
html[data-variant=nocturne][data-cards=l]:not([data-map]) .impact-grid > .impact-card::after { background: color-mix(in srgb, #fff 6%, var(--bg)); box-shadow: inset 0 0 0 1px rgb(240 139 189 / .3), 0 22px 40px -24px rgb(0 0 0 / .8); }
html[data-variant=nocturne][data-cards=l]:not([data-map]) :is(.impact-icon, .impact-rail-icon) { background: rgb(201 184 232 / .1); box-shadow: inset 0 0 0 1px rgb(201 184 232 / .12); }
html[data-variant=nocturne][data-cards=l]:not([data-map]) .impact-card:is(:hover, :focus-visible) .impact-icon { background: rgb(240 139 189 / .16); }
html[data-variant=nocturne][data-cards=l]:not([data-map]) .impact-rail s { background: rgb(255 255 255 / .14); }
html[data-variant=nocturne][data-cards=l]:not([data-map]) :is(.impact-rail s.is-on, .impact-rail.is-hot .impact-rail-icon) { background: #f08bbd; color: #1b1424; }
html[data-variant=nocturne][data-cards=l]:not([data-map]) .impact-rail.is-hot b { color: #f08bbd; }
html[data-variant=nocturne][data-cards=l]:not([data-map]) .impact-also { background: rgb(240 139 189 / .14); }
html[data-variant=nocturne][data-cards=l]:not([data-map]) .impact-bar s { background: rgb(255 255 255 / .2); }
html[data-variant=nocturne][data-cards=l]:not([data-map]) .impact-bar u { background: linear-gradient(90deg, #f08bbd, #b8a4db); }
/* arriving: the sheet settles in, its contours draw, each header's key fills in order, then the results rise in turn */
html.impact-live[data-cards=l]:not([data-map]) .impact-grid { opacity: 0; translate: 0 10px; transition: opacity .6s ease, translate .9s cubic-bezier(.2,.8,.2,1); }
html.impact-live[data-cards=l]:not([data-map]) .impact-grid:has(> .is-in) { opacity: 1; translate: none; }
html.impact-live[data-cards=l]:not([data-map]) .impact-terrain path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s cubic-bezier(.4,0,.2,1) calc(.2s + var(--r) * .09s); }
html.impact-live[data-cards=l]:not([data-map]) .impact-grid:has(> .is-in) .impact-terrain path { stroke-dashoffset: 0; }
html.impact-live[data-cards=l]:not([data-map]) .impact-rail > :not(u) { opacity: 0; transition: opacity .5s ease .2s, background-color .3s ease, color .3s ease, box-shadow .3s ease; }
html.impact-live[data-cards=l]:not([data-map]) .impact-rail s { scale: 0 1; transform-origin: 0 50%; transition: scale .4s cubic-bezier(.2,.8,.2,1) calc(.35s + var(--k) * .07s), background-color .3s ease, box-shadow .3s ease; }
html.impact-live[data-cards=l]:not([data-map]) .impact-grid:has(> .is-in) .impact-rail > :not(u) { opacity: 1; }
html.impact-live[data-cards=l]:not([data-map]) .impact-grid:has(> .is-in) .impact-rail s { scale: 1; }
html.impact-live[data-cards=l]:not([data-map]) .impact-grid > .impact-card { opacity: 0; transform: none; translate: 0 12px; transition: opacity .55s ease calc(var(--i) * .06s + .3s), translate .75s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .06s + .3s); }
html.impact-live[data-cards=l]:not([data-map]) .impact-grid > .impact-card.is-in { opacity: 1; translate: none; }
/* ==== K2 to K5: four more takes on the Quote wall (K and M above stay as they are). Same compact page head and the
   switch beside it; each result one link, its source kept to one line (the name cut short if it must). ==== */
.impact-ticker { display: none; }
html:is([data-cards=k2], [data-cards=k3], [data-cards^=k4], [data-cards=k5]) .results-page { padding-top: clamp(18px, 3.4vh, 44px); padding-bottom: clamp(36px, 6vh, 72px); }
html:is([data-cards=k2], [data-cards=k3], [data-cards^=k4], [data-cards=k5]) .results-page .section-heading { padding-bottom: clamp(14px, 2.6vh, 28px); }
html:is([data-cards=k2], [data-cards=k3], [data-cards^=k4], [data-cards=k5]) .results-page h1 { font-size: clamp(2.3rem, min(4.4vw, 6.4vh), 4rem); }
html:is([data-cards=k2], [data-cards=k3], [data-cards^=k4], [data-cards=k5]) .results-page .impact-sub { margin-top: clamp(4px, 1vh, 10px); font-size: clamp(1rem, 1.9vh, 1.15rem); }
html:is([data-cards=k2], [data-cards=k3], [data-cards^=k4], [data-cards=k5]) .impact-grid { border: 0; }
html:is([data-cards=k2], [data-cards=k3], [data-cards^=k4], [data-cards=k5]) .impact-grid > .impact-card:nth-child(n) { grid-column: auto; min-width: 0; padding: 0; border: 0; background: none; }
html:is([data-cards=k2], [data-cards=k3], [data-cards^=k4], [data-cards=k5]) :is(.impact-media, .impact-chart, .impact-also) { display: none; }
html:is([data-cards=k2], [data-cards=k3], [data-cards^=k4], [data-cards=k5]) .impact-grid .impact-big:nth-child(n) { padding-right: 0; background: none; -webkit-background-clip: border-box; background-clip: border-box; }
html:is([data-cards=k2], [data-cards=k3], [data-cards^=k4], [data-cards=k5]) .impact-grid > .impact-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 6px; }
html:is([data-cards=k2], [data-cards=k3], [data-cards^=k4], [data-cards=k5]) .impact-src { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin-top: 0 !important; font-size: .64rem; letter-spacing: .07em; line-height: 1.3; white-space: nowrap; }
html:is([data-cards=k2], [data-cards=k3], [data-cards^=k4], [data-cards=k5]) .impact-src-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html:is([data-cards=k2], [data-cards=k3], [data-cards^=k4], [data-cards=k5]) .impact-src :is(time, > span) { display: inline-block; flex: none; }
html:is([data-cards=k2], [data-cards=k3], [data-cards^=k4], [data-cards=k5]) .impact-src time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
html:is([data-cards=k2], [data-cards=k3], [data-cards^=k4], [data-cards=k5]) .impact-card:is(:hover, :focus-visible) .impact-src > span { transform: translate(2px, -2px); }
@media (min-width: 1101px) {
  html:is([data-cards=k2], [data-cards=k3], [data-cards^=k4], [data-cards=k5]) .results-page > .impact { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; }
  html:is([data-cards=k2], [data-cards=k3], [data-cards^=k4], [data-cards=k5]) .impact > .section-heading { grid-row: 1; grid-column: 1; }
  html:is([data-cards=k2], [data-cards=k3], [data-cards^=k4], [data-cards=k5]) .impact > .impact-switch { grid-row: 1; grid-column: 2; justify-self: end; align-self: center; flex-wrap: wrap; justify-content: flex-end; max-width: min(440px, 32.5vw); margin: 0 0 clamp(14px, 2.6vh, 28px); border-radius: 18px; font-size: .7rem; }
  html:is([data-cards=k2], [data-cards=k3], [data-cards^=k4], [data-cards=k5]) .impact-switch > span { display: none; }
  html:is([data-cards=k2], [data-cards=k3], [data-cards^=k4], [data-cards=k5]) .impact-switch button { padding: 5px 8px; }
  html:is([data-cards=k2], [data-cards=k3], [data-cards^=k4], [data-cards=k5]) .impact > :not(.section-heading, .impact-switch) { grid-column: 1 / -1; }
}
@media (max-width: 760px) { html:is([data-cards=k2], [data-cards=k3], [data-cards^=k4], [data-cards=k5]) .impact-switch { flex-wrap: wrap; width: auto; margin: 0 0 16px; border-radius: 18px; } }

/* K2 · Big quotes: the quote is the hero, set large under an oversized opening mark that hangs in the gutter; its
   figure small and solid in the accent above it, the label in small capitals; three across, then four, each row a
   subgrid so its figures, quotes and sources line up. Pointing at a quote fills its mark and underlines it softly. */
html[data-cards=k2] .impact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(4, auto) clamp(26px, 5vh, 52px) repeat(4, auto); column-gap: clamp(40px, 4.4vw, 76px); row-gap: 0; padding: clamp(10px, 2vh, 22px) 0 0 clamp(14px, 2vw, 34px); }
html[data-cards=k2] .impact-grid > .impact-card:nth-child(n) { position: relative; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); grid-row: 6 / span 4; grid-column: span 3; }
html[data-cards=k2] .impact-grid > .impact-card:nth-child(-n+3) { grid-row: 1 / span 4; grid-column: span 4; }
html[data-cards=k2] .impact-grid .impact-big:nth-child(n) { grid-row: 1; align-self: end; font-size: clamp(1.5rem, min(2.1vw, 3.6vh), 2.1rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--accent) !important; }
html[data-cards=k2] .impact-label { grid-row: 2; margin-top: clamp(4px, .8vh, 8px) !important; font-size: .7rem; font-weight: 700; line-height: 1.35; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); text-wrap: balance; }
html[data-cards=k2] .impact-text { grid-row: 3; position: relative; margin-top: clamp(10px, 1.8vh, 18px) !important; font-size: clamp(1.02rem, min(1.42vw, 2.35vh), 1.4rem); font-weight: 400; line-height: 1.3; letter-spacing: -.018em; color: var(--ink); text-wrap: pretty;
  text-decoration: underline 1px color-mix(in srgb, var(--accent) 0%, transparent); text-underline-offset: .22em; transition: text-decoration-color .4s ease; }
html[data-cards=k2] .impact-text::before { content: '\201C'; position: absolute; left: -.6em; top: -.34em; font-size: 3.3em; font-weight: 800; line-height: 1; letter-spacing: 0; color: color-mix(in srgb, var(--accent) 34%, transparent); transition: color .4s ease; pointer-events: none; }
html[data-cards=k2] .impact-src { grid-row: 4; align-self: end; margin-top: clamp(10px, 1.6vh, 16px) !important; }
html[data-cards=k2] .impact-card:is(:hover, :focus-visible) .impact-text { text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
html[data-cards=k2] .impact-card:is(:hover, :focus-visible) .impact-text::before { color: var(--accent); }
@media (min-width: 761px) and (max-width: 1100px) {
  html[data-cards=k2] .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; row-gap: 44px; }
  html[data-cards=k2] .impact-grid > .impact-card:nth-child(n) { display: flex; flex-direction: column; grid-row: auto; grid-column: auto; }
  html[data-cards=k2] .impact-grid > .impact-card:first-child { grid-column: 1 / -1; }
  html[data-cards=k2] .impact-card > .impact-src { margin-top: auto !important; padding-top: 14px; }
  html[data-cards=k2] .impact-card > :is(.impact-big, .impact-label, .impact-src) { align-self: flex-start; }
  html[data-cards=k2] .impact-grid .impact-big:nth-child(n) { align-self: flex-start; }
  html[data-cards=k2] .impact-text { font-size: 1.2rem; }
}
@media (max-width: 760px) {
  html[data-cards=k2] .impact-grid { display: flex; flex-direction: column; gap: 38px; padding-left: 0; }
  html[data-cards=k2] .impact-grid > .impact-card:nth-child(n) { display: flex; flex-direction: column; padding-left: 30px; }
  html[data-cards=k2] .impact-text { font-size: 1.2rem; }
  html[data-cards=k2] .impact-text::before { left: -.62em; font-size: 2.2em; }
  html[data-cards=k2] .impact-src { margin-top: 12px !important; }
  html[data-cards=k2] .impact-card > :is(.impact-big, .impact-label, .impact-src) { align-self: flex-start; }
  html[data-cards=k2] .impact-grid .impact-big:nth-child(n) { align-self: flex-start; }
}

/* K3 · Ticker: the seven figures as giant solid words in one slow band between two rules, running right to left (it
   pauses under the pointer and with its button, and stands still for reduced motion); the quotes sit beneath in
   columns, four then three. Pointing at or focusing a quote lights its word in the band. */
html[data-cards=k3] .impact-ticker { display: block; position: relative; margin: 0 0 clamp(16px, 3vh, 34px); padding: clamp(4px, .9vh, 10px) 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); overflow: hidden; }
html[data-cards=k3] .impact-ticker-track { display: flex; width: max-content; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 90%, transparent 97%); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 90%, transparent 97%); }
html[data-cards=k3] .impact-ticker-track > span { display: flex; flex: none; align-items: center; animation: impact-ticker 70s linear infinite; }
html[data-cards=k3] .impact-ticker b { flex: none; padding: 0 .16em .04em; font-size: clamp(3rem, min(6.4vw, 10.4vh), 6.8rem); font-weight: 800; line-height: 1; letter-spacing: -.045em; white-space: nowrap; color: var(--ink); transition: color .35s ease; }
html[data-cards=k3] .impact-ticker b.is-hot { color: var(--accent); }
html[data-cards=k3] .impact-ticker i { flex: none; width: 12px; height: 12px; margin: 0 .5vw; border-radius: 50%; background: var(--accent); }
html[data-cards=k3] .impact-ticker:hover .impact-ticker-track > span, html[data-cards=k3] .impact-ticker.is-paused .impact-ticker-track > span { animation-play-state: paused; }
html[data-cards=k3] .impact-ticker-pause { position: absolute; right: 0; top: 50%; translate: 0 -50%; display: grid; place-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--ink); cursor: pointer; transition: border-color .25s ease, color .25s ease; }
html[data-cards=k3] .impact-ticker-pause:hover { border-color: var(--ink); }
html[data-cards=k3] .impact-ticker-pause:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-cards=k3] .impact-ticker-pause svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[data-cards=k3] .impact-ticker-pause .is-play { display: none; fill: currentColor; stroke-width: 1.2; }
html[data-cards=k3] .impact-ticker.is-paused .impact-ticker-pause .is-play { display: block; }
html[data-cards=k3] .impact-ticker.is-paused .impact-ticker-pause .is-pause { display: none; }
@keyframes impact-ticker { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  html[data-cards=k3] .impact-ticker-track > span { animation: none; }
  html[data-cards=k3] .impact-ticker-pause { display: none; }
}
html[data-cards=k3] .impact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(4, auto) clamp(18px, 3.2vh, 34px) repeat(4, auto); column-gap: clamp(24px, 2.6vw, 44px); row-gap: 0; }
html[data-cards=k3] .impact-grid > .impact-card:nth-child(n) { display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); grid-row: 1 / span 4; grid-column: span 3; padding-top: clamp(8px, 1.4vh, 14px); border-top: 1px solid var(--line); transition: border-color .3s ease; }
html[data-cards=k3] .impact-grid > .impact-card:nth-child(n+5) { grid-row: 6 / span 4; grid-column: span 4; }
html[data-cards=k3] .impact-grid > .impact-card:is(:hover, :focus-visible) { border-top-color: var(--accent); box-shadow: inset 0 1px 0 var(--accent); }
html[data-cards=k3] .impact-grid .impact-big:nth-child(n) { grid-row: 1; font-size: .78rem; font-weight: 800; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--accent) !important; }
html[data-cards=k3] .impact-label { grid-row: 2; margin-top: 2px !important; font-size: clamp(.95rem, min(1.1vw, 1.9vh), 1.08rem); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
html[data-cards=k3] .impact-text { grid-row: 3; margin-top: clamp(4px, .8vh, 8px) !important; font-size: clamp(.86rem, min(.98vw, 1.7vh), .96rem); line-height: 1.45; color: var(--muted); text-wrap: pretty; }
html[data-cards=k3] .impact-card:is(:hover, :focus-visible) .impact-text { color: var(--ink); }
html[data-cards=k3] .impact-src { grid-row: 4; align-self: end; margin-top: clamp(6px, 1vh, 10px) !important; }
@media (min-width: 761px) and (max-width: 1100px) {
  html[data-cards=k3] .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; row-gap: 32px; }
  html[data-cards=k3] .impact-grid > .impact-card:nth-child(n) { display: flex; flex-direction: column; grid-row: auto; grid-column: auto; }
  html[data-cards=k3] .impact-grid > .impact-card:last-child { grid-column: 1 / -1; }
  html[data-cards=k3] .impact-card > .impact-src { margin-top: auto !important; padding-top: 10px; }
  html[data-cards=k3] .impact-card > .impact-src { align-self: flex-start; }
}
@media (max-width: 760px) {
  html[data-cards=k3] .impact-ticker { padding-right: 40px; }
  html[data-cards=k3] .impact-ticker b { font-size: 3.2rem; }
  html[data-cards=k3] .impact-ticker i { width: 9px; height: 9px; margin: 0 6px; }
  html[data-cards=k3] .impact-grid { display: flex; flex-direction: column; gap: 26px; }
  html[data-cards=k3] .impact-grid > .impact-card:nth-child(n) { display: flex; flex-direction: column; }
  html[data-cards=k3] .impact-text { font-size: 1rem; }
  html[data-cards=k3] .impact-card > .impact-src { align-self: flex-start; }
}

/* K4 · Index cards: each quote on a soft paper card pinned to a loose wall, four across and three set in between
   beneath them, each at its own slight tilt and height. The figure leads in ink, the label sits on the card's accent
   rule, the quote on faint ruled lines. Pointing at or focusing a card straightens it and lifts it toward you. */
html[data-cards=k4] .impact-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: start; column-gap: clamp(18px, 2vw, 34px); row-gap: clamp(16px, 3vh, 40px); padding: clamp(8px, 1.6vh, 20px) clamp(4px, 1vw, 16px) 0; }
html[data-cards=k4] .impact-grid > .impact-card:nth-child(n) { --tilt: 0deg; --drop: 0px; position: relative; display: flex; flex-direction: column; grid-column: span 2; margin-top: var(--drop); padding: clamp(14px, 2.3vh, 24px) clamp(16px, 1.5vw, 22px) clamp(10px, 1.8vh, 18px); border-radius: 3px;
  background: color-mix(in srgb, #fff 82%, var(--bg)); box-shadow: 0 1px 1px rgb(34 28 46 / .06), 0 14px 26px -16px rgb(34 28 46 / .38); rotate: var(--tilt); transition: rotate .45s cubic-bezier(.2,.8,.2,1), translate .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; }
html.impact-live[data-cards=k4] .impact-grid > .impact-card:nth-child(n) { transition: opacity .7s ease calc(var(--i) * .1s), transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .1s), rotate .45s cubic-bezier(.2,.8,.2,1), translate .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; }
html[data-cards=k4] .impact-grid > .impact-card:nth-child(1) { --tilt: -1.6deg; --drop: 6px; }
html[data-cards=k4] .impact-grid > .impact-card:nth-child(2) { --tilt: 1.1deg; --drop: 0px; }
html[data-cards=k4] .impact-grid > .impact-card:nth-child(3) { --tilt: -.7deg; --drop: 14px; }
html[data-cards=k4] .impact-grid > .impact-card:nth-child(4) { --tilt: 1.7deg; --drop: 4px; }
html[data-cards=k4] .impact-grid > .impact-card:nth-child(5) { --tilt: 1.2deg; grid-column: 2 / span 2; }
html[data-cards=k4] .impact-grid > .impact-card:nth-child(6) { --tilt: -1.4deg; --drop: 4px; }
html[data-cards=k4] .impact-grid > .impact-card:nth-child(7) { --tilt: .8deg; --drop: 2px; }
html[data-cards=k4] .impact-grid > .impact-card::before { content: ''; position: absolute; left: 50%; top: -6px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, color-mix(in srgb, #fff 55%, var(--accent)), var(--accent) 55%, color-mix(in srgb, #000 30%, var(--accent))); box-shadow: 0 3px 4px -1px rgb(34 28 46 / .4); }
html[data-cards=k4] .impact-grid > .impact-card:is(:hover, :focus-visible) { z-index: 2; rotate: 0deg; translate: 0 -6px; box-shadow: 0 1px 1px rgb(34 28 46 / .05), 0 26px 40px -20px rgb(34 28 46 / .45); }
html[data-cards=k4] .impact-grid .impact-big:nth-child(n) { font-size: clamp(1.6rem, min(2.4vw, 3.9vh), 2.5rem); font-weight: 800; line-height: 1; letter-spacing: -.035em; color: var(--ink) !important; transition: color .35s ease; }
html[data-cards=k4] .impact-grid .impact-card:is(:hover, :focus-visible) .impact-big:nth-child(n) { color: var(--accent) !important; }
html[data-cards=k4] .impact-label { margin-top: 6px !important; padding-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); font-size: .68rem; font-weight: 700; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
html[data-cards=k4] .impact-text { --rule: 1.5em; flex: 1; margin-top: 0 !important; padding-top: calc(var(--rule) * .2); font-size: clamp(.86rem, min(.98vw, 1.72vh), .95rem); line-height: var(--rule); color: var(--ink); text-wrap: pretty;
  background: repeating-linear-gradient(transparent 0 calc(var(--rule) - 1px), color-mix(in srgb, var(--ink) 9%, transparent) calc(var(--rule) - 1px) var(--rule)); background-position: 0 calc(var(--rule) * .2); background-origin: border-box; }
html[data-cards=k4] .impact-src { margin-top: clamp(8px, 1.4vh, 12px) !important; }
html[data-variant=nocturne][data-cards=k4] .impact-grid > .impact-card:nth-child(n) { background: color-mix(in srgb, #fff 7%, var(--bg)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 16px 30px -16px rgb(0 0 0 / .8); }
html[data-variant=nocturne][data-cards=k4] .impact-grid > .impact-card:is(:hover, :focus-visible) { background: color-mix(in srgb, #fff 10%, var(--bg)); }
@media (prefers-reduced-motion: reduce) { html[data-cards=k4] .impact-grid > .impact-card:nth-child(n) { transition: none; } }
@media (min-width: 761px) and (max-width: 1100px) {
  html[data-cards=k4] .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-cards=k4] .impact-grid > .impact-card:nth-child(n) { grid-column: auto; }
  html[data-cards=k4] .impact-grid > .impact-card:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 16px); }
}
@media (max-width: 760px) {
  html[data-cards=k4] .impact-grid { display: flex; flex-direction: column; gap: 26px; padding: 12px 6px 0; }
  html[data-cards=k4] .impact-grid > .impact-card:nth-child(n) { --drop: 0px; }
  html[data-cards=k4] .impact-text { font-size: 1rem; }
}

/* K5 · Split type: a calm two-column spread on one centre rule. At the left the seven figures stand stacked, large and
   outlined, set flush to the rule; at the right each result's label and source, its quote beneath. The result pointed
   at or focused (the 22% to begin with; on phones, the one in the middle of the screen) fills its figure with the
   accent, lights its node on the rule and brings its quote up to full ink. */
html[data-cards=k5] .impact-grid { --split: 40%; --gap: clamp(32px, 3.4vw, 60px); position: relative; display: flex; flex-direction: column; padding-top: clamp(2px, .6vh, 8px); }
html[data-cards=k5] .impact-grid::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--split) + var(--gap) / 2); width: 1px; background: var(--line); }
html[data-cards=k5] .impact-grid > .impact-card:nth-child(n) { position: relative; display: grid; grid-template-columns: var(--split) minmax(0, 1fr) minmax(0, max-content); grid-template-rows: auto auto; align-content: center; column-gap: var(--gap); row-gap: 3px; padding: clamp(2px, .45vh, 6px) 0; }
html[data-cards=k5] .impact-grid > .impact-card:nth-child(n) > .impact-label { grid-column: 2; }
html[data-cards=k5] .impact-grid > .impact-card::after { content: ''; position: absolute; top: 50%; left: calc(var(--split) + var(--gap) / 2 - 4.5px); width: 9px; height: 9px; margin-top: -4.5px; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 50%; background: var(--bg); transition: background-color .35s ease, border-color .35s ease, scale .35s ease; }
html[data-cards=k5] .impact-grid > .impact-card.is-current::after { border-color: var(--accent); background: var(--accent); scale: 1.25; }
html[data-cards=k5] .impact-grid .impact-big:nth-child(n) { grid-column: 1; grid-row: 1 / span 2; justify-self: end; align-self: center; max-width: 100%; font-size: clamp(2.4rem, min(5.3vw, 8.3vh), 5.6rem); font-weight: 800; line-height: .92; letter-spacing: -.045em; white-space: nowrap;
  color: transparent !important; -webkit-text-stroke: 1.4px color-mix(in srgb, var(--ink) 42%, transparent); transition: color .45s ease, -webkit-text-stroke-color .45s ease; }
html[data-cards=k5] .impact-grid .impact-card.is-current .impact-big:nth-child(n) { color: var(--accent) !important; -webkit-text-stroke-color: var(--accent); }
html[data-cards=k5] .impact-label { grid-row: 1; align-self: end; min-width: 0; margin-top: 0 !important; font-size: clamp(.86rem, min(.98vw, 1.75vh), .98rem); font-weight: 700; line-height: 1.25; letter-spacing: -.005em; color: var(--ink); transition: color .35s ease; }
html[data-cards=k5] .impact-src { grid-column: 3; grid-row: 1; align-self: end; justify-self: end; max-width: 100%; }
html[data-cards=k5] .impact-text { grid-column: 2 / span 2; grid-row: 2; margin-top: 0 !important; max-width: 52em; font-size: clamp(.86rem, min(.98vw, 1.72vh), .97rem); line-height: 1.4; color: var(--muted); text-wrap: pretty; transition: color .35s ease; }
html[data-cards=k5] .impact-card.is-current .impact-label { color: var(--accent); }
html[data-cards=k5] .impact-card.is-current .impact-text { color: var(--ink); }
@media (max-width: 760px) {
  html[data-cards=k5] .impact-grid { gap: 30px; padding-left: 22px; }
  html[data-cards=k5] .impact-grid::before { left: 4px; }
  html[data-cards=k5] .impact-grid > .impact-card:nth-child(n) { display: flex; flex-direction: column; gap: 6px; padding: 0; }
  html[data-cards=k5] .impact-grid > .impact-card::after { top: 1.6rem; left: -22px; }
  html[data-cards=k5] .impact-grid .impact-big:nth-child(n) { align-self: flex-start; font-size: 3.4rem; }
  html[data-cards=k5] :is(.impact-label, .impact-src) { align-self: flex-start; }
  html[data-cards=k5] .impact-src { order: 4; }
  html[data-cards=k5] .impact-text { font-size: 1rem; }
}

/* ==== K4b to K4f: five more takes on the Index cards (K4 above stays as it is), with K2 to K5's compact head and
   switch. The six share one button in the switch; while one of them shows, a compact row of the six hangs under the
   switch, in the room above the cards, so the head keeps its height. ==== */
.impact-pin, .impact-call, .impact-thread, .impact-pile { display: none; }
.impact-subswitch { display: flex; align-items: center; gap: 2px; width: max-content; max-width: 100%; margin: -8px 0 16px auto; padding: 2px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--bg) 80%, #fff); font-size: .62rem; font-weight: 700; line-height: 1.2; }
.impact-subswitch[hidden] { display: none; }
.impact-subswitch button { flex: none; padding: 2px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; letter-spacing: .02em; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.impact-subswitch button:hover { color: var(--ink); }
.impact-subswitch button > span { display: none; font-weight: 600; }
.impact-subswitch button[aria-pressed=true] { background: var(--accent); color: #fff; }
.impact-subswitch button[aria-pressed=true] > span { display: inline; }
.impact-subswitch button:focus-visible { outline-offset: -2px; }
html[data-variant=nocturne] .impact-subswitch { background: color-mix(in srgb, #fff 4%, var(--bg)); }
html[data-variant=nocturne] .impact-subswitch button[aria-pressed=true] { color: #1a1020; }
@media (min-width: 1101px) { html[data-cards^=k4] .impact > .impact-subswitch { grid-row: 1; grid-column: 2; justify-self: end; align-self: end; position: relative; z-index: 5; margin: 0 0 calc(clamp(14px, 2.6vh, 28px) - 26px); } }
@media (max-width: 760px) { html[data-cards^=k4] .impact-subswitch { margin: -6px 0 16px; } }

/* K4b · Pinboard: the seven cards pinned to a cork board in a slim light frame, the three KPMG results along the lower
   row. Each card hangs from its own push pin at its own small tilt and turns about that pin, so pointing at or focusing
   a card swings it straight and lifts it toward you while the pin holds (and gives a little); a fine red thread runs
   from pin to pin along the KPMG three (results.js draws it from where the pins sit). The cork is all gradients: a
   grain from two conic gradients too fine for the pixel grid (so they never tile into a pattern), soft light and dark
   patches over a warm ground, shaded in at the frame. */
html[data-cards=k4b] .impact-grid { --pin-x: 50%; --pin-y: 14px; --pin-red: #cc2f3b;
  --ck-dark: rgb(70 38 12 / .34); --ck-light: rgb(255 238 208 / .28); --ck-hi: rgb(255 236 205 / .22); --ck-lo: rgb(110 66 30 / .18);
  --ck-a: #d6af83; --ck-b: #c79a6b; --ck-c: #b98a5c; --fr-a: #fdfcfe; --fr-b: #e6e2ea; --fr-c: #f7f5f9; --fr-d: #d6d1dc; --ck-shade: rgb(70 40 15 / .38);
  position: relative; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); align-items: start; column-gap: clamp(12px, 1.3vw, 20px); row-gap: clamp(10px, 1.9vh, 24px);
  margin-top: 6px; padding: clamp(12px, 2.2vh, 26px) clamp(16px, 1.8vw, 30px) clamp(14px, 2.4vh, 30px); border: 9px solid transparent; border-radius: 16px;
  background:
    repeating-conic-gradient(var(--ck-dark) 0 .00006%, transparent 0 .00012%) 50% 50% / 3000px 3000px padding-box,
    repeating-conic-gradient(from 7deg at 30% 70%, var(--ck-light) 0 .000085%, transparent 0 .00017%) 50% 50% / 2200px 2200px padding-box,
    radial-gradient(60% 80% at 25% 30%, var(--ck-hi), transparent 70%) padding-box,
    radial-gradient(50% 70% at 78% 75%, var(--ck-lo), transparent 70%) padding-box,
    radial-gradient(140% 120% at 20% 0%, var(--ck-a), var(--ck-b) 45%, var(--ck-c)) padding-box,
    linear-gradient(165deg, var(--fr-a), var(--fr-b) 30%, var(--fr-c) 55%, var(--fr-d)) border-box;
  box-shadow: inset 0 2px 12px var(--ck-shade), inset 0 0 0 1px rgb(70 40 15 / .2), 0 0 0 1px rgb(34 28 46 / .1), 0 28px 48px -32px rgb(34 28 46 / .6); }
html[data-cards=k4b] .impact-grid > .impact-card:nth-child(n) { --tilt: 0deg; --drop: 0px; --pin: var(--accent); position: relative; display: flex; flex-direction: column; grid-column: span 6; margin-top: var(--drop);
  padding: calc(var(--pin-y) + clamp(10px, 1.6vh, 16px)) clamp(14px, 1.25vw, 20px) clamp(10px, 1.5vh, 15px); border-radius: 2px;
  background: linear-gradient(172deg, #fffefb, #fbf8f1 60%, #f2ebdf); box-shadow: 0 1px 1px rgb(70 40 15 / .25), 0 8px 10px -6px rgb(70 40 15 / .3), 0 20px 26px -16px rgb(60 32 10 / .5);
  rotate: var(--tilt); transform-origin: var(--pin-x) var(--pin-y); transition: rotate .6s cubic-bezier(.3,1.35,.5,1), scale .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; }
html[data-cards=k4b] .impact-grid > .impact-card:nth-child(1) { --tilt: -2deg; --drop: 6px; }
html[data-cards=k4b] .impact-grid > .impact-card:nth-child(2) { --tilt: 1.5deg; --drop: 14px; --pin: #efe6d2; }
html[data-cards=k4b] .impact-grid > .impact-card:nth-child(3) { --tilt: -1.1deg; --pin: #4d3170; }
html[data-cards=k4b] .impact-grid > .impact-card:nth-child(4) { --tilt: 2.2deg; --drop: 9px; --pin: #e3a93a; }
/* the KPMG three tip down on the side the thread comes in from, so it never crosses their type */
html[data-cards=k4b] .impact-grid > .impact-card:nth-child(5) { --tilt: 1.5deg; --drop: 3px; --pin: var(--pin-red); grid-column: 2 / span 6; }
html[data-cards=k4b] .impact-grid > .impact-card:nth-child(6) { --tilt: -.6deg; --drop: 7px; --pin: var(--pin-red); grid-column: 10 / span 6; }
html[data-cards=k4b] .impact-grid > .impact-card:nth-child(7) { --tilt: -1.7deg; --drop: 1px; --pin: var(--pin-red); grid-column: 18 / span 6; }
html[data-cards=k4b] .impact-grid > .impact-card:is(:hover, :focus-visible) { z-index: 2; rotate: 0deg; scale: 1.04; box-shadow: 0 1px 1px rgb(70 40 15 / .2), 0 16px 18px -10px rgb(70 40 15 / .32), 0 36px 46px -22px rgb(60 32 10 / .58); }
html[data-cards=k4b] .impact-grid > .impact-card:focus-visible { outline-offset: 5px; border-radius: 3px; }
html[data-cards=k4b] .impact-media { display: contents; }
html[data-cards=k4b] :is(.impact-photo, .impact-icon, .impact-when, .impact-call) { display: none; }
html[data-cards=k4b] .impact-pin { display: block; position: absolute; z-index: 2; left: var(--pin-x); top: var(--pin-y); width: 15px; height: 15px; margin: -7.5px 0 0 -8.5px; } /* nudged a pixel down and left so the arrowhead sits optically centred */
/* the needle's shadow, from under the head down and to the right */
html[data-cards=k4b] .impact-pin::before { content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; margin-top: -1px; border-radius: 2px; background: linear-gradient(90deg, rgb(40 18 4 / .5), rgb(40 18 4 / 0)); rotate: 40deg; transform-origin: 0 50%; filter: blur(.5px); }
/* the head: domed plastic lit from the upper left, darker at its foot, its shadow cast down and to the right */
html[data-cards=k4b] .impact-pin::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgb(255 255 255 / .95) 0 1.3px, rgb(255 255 255 / .3) 2.8px, transparent 4.6px), radial-gradient(circle at 42% 38%, color-mix(in srgb, #fff 32%, var(--pin)), var(--pin) 50%, color-mix(in srgb, #000 40%, var(--pin)));
  box-shadow: inset 0 -1px 1.5px rgb(0 0 0 / .22), 1.5px 2.5px 2px rgb(40 18 4 / .42), 3px 6px 7px rgb(40 18 4 / .22); }
html[data-cards=k4b] .impact-card:is(:hover, :focus-visible) .impact-pin::after { animation: pin-nudge .6s cubic-bezier(.3,.6,.4,1); }
@keyframes pin-nudge { 25% { translate: .9px -1.4px; } 55% { translate: -.7px .6px; } 80% { translate: .3px -.2px; } }
/* the thread between the KPMG pins, with its faint shadow on the cork and the cards */
html[data-cards=k4b] .impact-thread { display: block; position: absolute; left: 0; top: 0; z-index: 3; overflow: visible; pointer-events: none; }
html[data-cards=k4b] .impact-thread path { fill: none; stroke-linecap: round; }
html[data-cards=k4b] .impact-thread-line { stroke: var(--pin-red); stroke-width: 1.5; }
html[data-cards=k4b] .impact-thread-shade { stroke: rgb(50 22 6 / .3); stroke-width: 2; translate: 1.5px 3.5px; filter: blur(1.2px); }
html[data-cards=k4b] .impact-grid .impact-big:nth-child(n) { font-size: clamp(1.55rem, min(2.2vw, 3.7vh), 2.35rem); font-weight: 800; line-height: 1; letter-spacing: -.035em; color: var(--ink) !important; transition: color .35s ease; }
html[data-cards=k4b] .impact-grid .impact-card:is(:hover, :focus-visible) .impact-big:nth-child(n) { color: var(--accent) !important; }
html[data-cards=k4b] .impact-label { margin-top: 6px !important; font-size: .63rem; font-weight: 700; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); text-wrap: balance; }
html[data-cards=k4b] .impact-text { flex: 1; margin-top: clamp(6px, 1vh, 10px) !important; font-size: clamp(.8rem, min(.94vw, 1.66vh), .92rem); line-height: 1.42; color: var(--ink); text-wrap: pretty; }
html[data-cards=k4b] .impact-src { margin-top: clamp(8px, 1.3vh, 12px) !important; padding-top: clamp(6px, 1vh, 9px); border-top: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent); }
/* at night: dark cork in a dark frame, the cards dark paper */
html[data-variant=nocturne][data-cards=k4b] .impact-grid { --ck-dark: rgb(8 4 0 / .5); --ck-light: rgb(255 224 186 / .1); --ck-hi: rgb(255 226 190 / .07); --ck-lo: rgb(0 0 0 / .22);
  --ck-a: #684d37; --ck-b: #553d2a; --ck-c: #45311f; --fr-a: #3b3445; --fr-b: #2a2432; --fr-c: #363040; --fr-d: #221d29; --ck-shade: rgb(0 0 0 / .55); --pin-red: #e2414d;
  box-shadow: inset 0 2px 12px var(--ck-shade), inset 0 0 0 1px rgb(0 0 0 / .3), 0 0 0 1px rgb(255 255 255 / .07), 0 28px 48px -32px rgb(0 0 0 / .9); }
html[data-variant=nocturne][data-cards=k4b] .impact-grid > .impact-card:nth-child(n) { background: linear-gradient(172deg, #2c2436, #261f2f 60%, #211a29); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 1px 1px rgb(0 0 0 / .4), 0 8px 10px -6px rgb(0 0 0 / .5), 0 20px 26px -16px rgb(0 0 0 / .7); }
html[data-variant=nocturne][data-cards=k4b] .impact-grid > .impact-card:is(:hover, :focus-visible) { box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 16px 18px -10px rgb(0 0 0 / .55), 0 36px 46px -22px rgb(0 0 0 / .8); }
html[data-variant=nocturne][data-cards=k4b] .impact-thread-shade { stroke: rgb(0 0 0 / .5); }
html[data-variant=nocturne][data-cards=k4b] .impact-grid > .impact-card:nth-child(3) { --pin: #9a78d2; }
@media (min-width: 761px) and (max-width: 1100px) { /* the four in two rows of two, the KPMG three across the foot */
  html[data-cards=k4b] .impact-grid > .impact-card:nth-child(n) { grid-column: span 12; }
  html[data-cards=k4b] .impact-grid > .impact-card:nth-child(n+5) { grid-column: span 8; }
}
@media (max-width: 760px) { /* one column; the KPMG three hang from their right shoulders, so the thread runs down the margin, clear of the text */
  html[data-cards=k4b] .impact-grid { row-gap: 22px; padding: 22px 14px 26px; border-width: 7px; border-radius: 14px; }
  html[data-cards=k4b] .impact-grid > .impact-card:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
  html[data-cards=k4b] .impact-grid > .impact-card:nth-child(n+5) { --pin-x: calc(100% - 13px); --tilt: .7deg; padding-right: 30px; }
  html[data-cards=k4b] .impact-grid > .impact-card:nth-child(6) { --tilt: -.6deg; }
  html[data-cards=k4b] .impact-text { font-size: .95rem; }
}
/* arriving: each card is pinned up in turn, settling from a little above; then the thread is drawn from pin to pin */
html.impact-live[data-cards=k4b] .impact-grid > .impact-card:nth-child(n) { opacity: 0; transform: translateY(-12px) scale(1.03); transition: opacity .5s ease calc(var(--i) * .09s), transform .7s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .09s), rotate .6s cubic-bezier(.3,1.35,.5,1), scale .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; }
html.impact-live[data-cards=k4b] .impact-grid > .impact-card.is-in { opacity: 1; transform: none; }
html.impact-live[data-cards=k4b] .impact-thread-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s cubic-bezier(.5,0,.3,1) calc(1s + var(--n) * .55s); }
html.impact-live[data-cards=k4b] .impact-thread-shade { opacity: 0; transition: opacity .5s ease calc(1.2s + var(--n) * .55s); }
html.impact-live[data-cards=k4b] .impact-grid:has(> :nth-child(6).is-in) :is(.impact-thread-line, .impact-thread-shade):nth-child(-n+2), html.impact-live[data-cards=k4b] .impact-grid:has(> :nth-child(7).is-in) .impact-thread > * { stroke-dashoffset: 0; opacity: 1; }
@media (prefers-reduced-motion: reduce) { html[data-cards=k4b] .impact-grid > .impact-card:nth-child(n) { transition: none; } html[data-cards=k4b] .impact-card .impact-pin::after { animation: none !important; } }

/* K4c · Library catalog: the seven as 3 by 5 catalog cards in a neat grid, four over three, each a hair off true. Cream
   stock, the figure as the heading above a red rule, pale blue lines beneath it for the label, the quote and the
   source; the call number typed in the top corner (the industry's class, a mark for the client, the year) and all the
   meta typed too. A brass rod runs along each row through the punched holes; pointing at or focusing a card draws it
   up off the rod, as from a drawer, its hole coming away clear. The rods are placed from the cards' own proportion. */
html[data-cards=k4c] .impact-grid { --gap: clamp(14px, 1.6vw, 24px); --row: clamp(18px, 3.4vh, 34px); --pad: 10px; --rule: clamp(14px, 1.76vh, 16px); --rod: 13px; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --stock: radial-gradient(120% 90% at 30% 10%, #fbf6e8, #f4ecd6 70%, #ede1c4); --type: #2e2933; --red: #d4473c; --blue: rgb(96 150 205 / .42); --brass: linear-gradient(#f1dfae, #bf9d5f 55%, #8d6e3b);
  position: relative; container-type: inline-size; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: start; gap: var(--row) var(--gap); padding-top: var(--pad); }
html[data-cards=k4c] .impact-grid::before, html[data-cards=k4c] .impact-grid::after { --ch: calc((100cqi - 3 * var(--gap)) / 4 * .6);
  content: ''; position: absolute; z-index: 0; left: -6px; right: -6px; top: calc(var(--pad) + var(--ch) - var(--rod)); height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--brass); box-shadow: 0 1px 2px rgb(60 40 10 / .3); }
html[data-cards=k4c] .impact-grid::after { top: calc(var(--pad) + 2 * var(--ch) + var(--row) - var(--rod)); left: calc((100cqi - 3 * var(--gap)) / 8 + var(--gap) / 2 - 6px); right: calc((100cqi - 3 * var(--gap)) / 8 + var(--gap) / 2 - 6px); }
html[data-cards=k4c] .impact-grid > .impact-card:nth-child(n) { --top: calc(5px + 2 * var(--rule)); --tilt: 0deg; --dx: 0px;
  position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: calc(2 * var(--rule)) auto auto auto; align-content: start; column-gap: 12px;
  grid-column: span 2; aspect-ratio: 5 / 3; padding: 7px clamp(12px, 1.1vw, 16px) 26px; border-radius: 2px; color: var(--type);
  background: linear-gradient(var(--red), var(--red)) 0 var(--top) / 100% 1.5px no-repeat,
    repeating-linear-gradient(transparent 0 calc(var(--rule) - 1px), var(--blue) calc(var(--rule) - 1px) var(--rule)) 0 calc(var(--top) + 1.5px) / 100% calc(100% - var(--top) - 24px) no-repeat, var(--stock);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 1px 1px rgb(80 60 20 / .18), 0 12px 20px -14px rgb(60 40 10 / .45);
  rotate: var(--tilt); translate: var(--dx) 0; transition: translate .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease; }
html[data-cards=k4c] .impact-grid > .impact-card:nth-child(1) { --tilt: -.3deg; }
html[data-cards=k4c] .impact-grid > .impact-card:nth-child(2) { --tilt: .2deg; --dx: 1px; }
html[data-cards=k4c] .impact-grid > .impact-card:nth-child(3) { --tilt: .35deg; }
html[data-cards=k4c] .impact-grid > .impact-card:nth-child(4) { --tilt: -.15deg; --dx: -1px; }
html[data-cards=k4c] .impact-grid > .impact-card:nth-child(5) { --tilt: .25deg; grid-column: 2 / span 2; }
html[data-cards=k4c] .impact-grid > .impact-card:nth-child(6) { --tilt: -.35deg; --dx: 1px; }
html[data-cards=k4c] .impact-grid > .impact-card:nth-child(7) { --tilt: .1deg; }
html[data-cards=k4c] .impact-grid > .impact-card:is(:hover, :focus-visible) { z-index: 2; translate: var(--dx) -14px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 1px 1px rgb(80 60 20 / .14), 0 26px 32px -18px rgb(60 40 10 / .5); }
html[data-cards=k4c] .impact-grid > .impact-card:focus-visible { outline-offset: 4px; border-radius: 3px; }
/* the punched hole, the rod showing through it; drawn up, the rod stays where it was and the hole comes away clear */
html[data-cards=k4c] .impact-grid > .impact-card::after { content: ''; position: absolute; left: 50%; bottom: calc(var(--rod) - 6px); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: var(--brass) 0 4.5px / 100% 3px no-repeat, var(--bg); box-shadow: inset 0 1.5px 2px rgb(60 40 10 / .45), 0 1px 0 rgb(255 255 255 / .6); transition: background-position .5s cubic-bezier(.2,.8,.2,1); }
html[data-cards=k4c] .impact-grid > .impact-card:is(:hover, :focus-visible)::after { background-position: 0 18.5px, 0 0; }
html[data-cards=k4c] .impact-media { display: contents; }
html[data-cards=k4c] :is(.impact-photo, .impact-icon, .impact-when, .impact-pin) { display: none; }
html[data-cards=k4c] .impact-call { display: block; grid-column: 1; grid-row: 1 / 3; font-family: var(--mono); font-size: .6rem; font-weight: 500; line-height: var(--rule); letter-spacing: .02em; color: color-mix(in srgb, var(--type) 78%, transparent); }
html[data-cards=k4c] .impact-grid .impact-big:nth-child(n) { grid-column: 2; grid-row: 1; align-self: end; width: max-content; max-width: 100%; margin-bottom: 2px !important; font-size: clamp(1.15rem, min(1.6vw, 2.7vh), 1.55rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--type) !important; transition: color .35s ease; }
html[data-cards=k4c] .impact-grid .impact-card:is(:hover, :focus-visible) .impact-big:nth-child(n) { color: var(--red) !important; }
html[data-cards=k4c] .impact-label { grid-column: 2; grid-row: 2; margin: 0 !important; font-family: var(--mono); font-size: .6rem; font-weight: 600; line-height: var(--rule); letter-spacing: .04em; text-transform: uppercase; color: var(--type); }
html[data-cards=k4c] .impact-text { grid-column: 1 / -1; grid-row: 3; margin: 0 !important; font-size: clamp(.75rem, min(.9vw, 1.56vh), .84rem); line-height: var(--rule); color: var(--type); text-wrap: pretty; }
html[data-cards=k4c] .impact-src { grid-column: 1 / -1; grid-row: 4; margin: 0 !important; font-family: var(--mono); font-size: .56rem; font-weight: 500; line-height: var(--rule); letter-spacing: .02em; color: color-mix(in srgb, var(--type) 72%, transparent); }
html[data-cards=k4c] .impact-src time { font-weight: 600; color: var(--type); }
html[data-cards=k4c] .impact-src > span { color: var(--red); }
/* at night: the same cards under a lamp, the stock a step dimmer */
html[data-variant=nocturne][data-cards=k4c] .impact-grid { --stock: radial-gradient(120% 90% at 30% 10%, #ddd3bb, #d2c6aa 70%, #c6b897); --type: #251f2b; --red: #b8392f; --blue: rgb(64 108 158 / .45); --brass: linear-gradient(#cdb680, #8f7444 55%, #5e4826); }
html[data-variant=nocturne][data-cards=k4c] .impact-grid > .impact-card:nth-child(n) { box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 1px 1px rgb(0 0 0 / .4), 0 14px 24px -14px rgb(0 0 0 / .8); }
html[data-variant=nocturne][data-cards=k4c] .impact-grid > .impact-card:is(:hover, :focus-visible) { box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 28px 34px -18px rgb(0 0 0 / .85); }
@media (max-width: 1100px) { /* two columns, then one: the rods give way, the holes stay */
  html[data-cards=k4c] .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-cards=k4c] .impact-grid::before, html[data-cards=k4c] .impact-grid::after { display: none; }
  html[data-cards=k4c] .impact-grid > .impact-card:nth-child(n) { grid-column: auto; }
  html[data-cards=k4c] .impact-grid > .impact-card::after { background: var(--bg); }
}
@media (max-width: 760px) { /* one column, the type and the lines a size up */
  html[data-cards=k4c] .impact-grid { --rule: 19px; grid-template-columns: minmax(0, 1fr); }
  html[data-cards=k4c] .impact-grid .impact-big:nth-child(n) { font-size: 1.6rem; }
  html[data-cards=k4c] :is(.impact-call, .impact-label) { font-size: .66rem; }
  html[data-cards=k4c] .impact-text { font-size: .96rem; }
  html[data-cards=k4c] .impact-src { font-size: .6rem; }
}
/* arriving: the cards are filed in one after another, each rising into its place */
html.impact-live[data-cards=k4c] .impact-grid > .impact-card:nth-child(n) { opacity: 0; transform: translateY(14px); transition: opacity .45s ease calc(var(--i) * .07s), transform .6s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .07s), translate .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease; }
html.impact-live[data-cards=k4c] .impact-grid > .impact-card.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html[data-cards=k4c] .impact-grid > .impact-card:nth-child(n), html[data-cards=k4c] .impact-grid > .impact-card::after { transition: none; } }

/* K4d · Fanned deck: the seven held as a hand of cards, fanned from one pivot well below them, the 22% at the left and
   each card over the one before, its figure in the top corner where the hand shows it. The card pointed at or focused
   is drawn up out of the hand, straightened and brought to the front so its quote reads in full; the others ease away
   from it. Each card's transform turns it about the pivot, then about the point it straightens around (--qx, --qy,
   from the pivot: the corner by default, the point under the pointer from results.js), scaling it a touch about that
   same point, then lifts it; the same list of functions in every state, so every move eases. Phones and tablets get a snapping rail of the same cards. */
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(1) { --fi: -3; }
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(2) { --fi: -2; }
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(3) { --fi: -1; }
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(4) { --fi: 0; }
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(5) { --fi: 1; }
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(6) { --fi: 2; }
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(7) { --fi: 3; }
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(n) { display: flex; flex-direction: column; padding: clamp(14px, 2vh, 20px) clamp(14px, 1.2vw, 18px) clamp(12px, 1.7vh, 16px); border-radius: 12px;
  background: linear-gradient(175deg, #fffefc, #faf7f2); box-shadow: inset 0 0 0 1px rgb(34 28 46 / .07), inset 0 0 0 5px #fffefc, inset 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent), 0 1px 2px rgb(34 28 46 / .12), 0 14px 26px -16px rgb(34 28 46 / .5); }
html[data-cards=k4d] .impact-grid .impact-big:nth-child(n) { width: max-content; max-width: 100%; font-size: clamp(1.3rem, min(1.7vw, 3vh), 1.75rem); font-weight: 800; line-height: 1; letter-spacing: -.035em; color: var(--ink) !important; transition: color .35s ease; }
html[data-cards=k4d] .impact-grid .impact-card[data-drawn] .impact-big:nth-child(n) { color: var(--accent) !important; }
html[data-cards=k4d] .impact-label { margin-top: 7px !important; padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); font-size: .62rem; font-weight: 700; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); text-wrap: balance; }
html[data-cards=k4d] .impact-text { flex: 1; margin-top: 10px !important; font-size: clamp(.82rem, min(.96vw, 1.7vh), .94rem); line-height: 1.45; color: var(--ink); text-wrap: pretty; }
html[data-cards=k4d] .impact-src { margin-top: 10px !important; }
html[data-cards=k4d] .impact-grid > .impact-card:focus-visible { outline-offset: 4px; border-radius: 14px; }
@media (min-width: 1101px) {
  html[data-cards=k4d] .impact-grid { --fan-w: clamp(200px, min(16.5vw, 33vh), 250px); --fan-h: calc(var(--fan-w) * 1.16); --fan-r: calc(var(--fan-w) * 4.4); --fan-step: 7deg; --fan-aside: 3.2deg; --fan-lift: clamp(22px, 4vh, 38px); --fan-top: calc(var(--fan-lift) + 10px);
    position: relative; display: block; height: calc(var(--fan-top) + var(--fan-h) / 2 + var(--fan-r) * (1 - cos(3 * var(--fan-step))) + var(--fan-h) / 2 * cos(3 * var(--fan-step)) + var(--fan-w) / 2 * sin(3 * var(--fan-step)) + 6px); }
  html[data-cards=k4d] .impact-grid > .impact-card:nth-child(n) { --push: 0deg; --th: calc(var(--fi) * var(--fan-step) + var(--push)); --qx: calc(var(--fan-w) * -.3); --qy: calc(var(--fan-h) * -.34 - var(--fan-r)); --ang: 0deg; --up: 0px; --s: 1;
    position: absolute; left: 50%; top: var(--fan-top); width: var(--fan-w); height: var(--fan-h); margin: 0 0 0 calc(var(--fan-w) / -2);
    transform-origin: 50% calc(50% + var(--fan-r));
    transform: rotate(var(--th)) translate(var(--qx), var(--qy)) rotate(var(--ang)) scale(var(--s)) translate(calc(-1 * var(--qx)), calc(-1 * var(--qy))) translateY(calc(-1 * var(--up)));
    will-change: transform; transition: transform .42s cubic-bezier(.22,.8,.24,1), box-shadow .3s ease; }
  html[data-cards=k4d] .impact-grid > .impact-card[data-drawn]:nth-child(n) { z-index: 9; --push: 0deg; --ang: calc(-1 * var(--th)); --up: min(var(--fan-lift), var(--room, var(--fan-lift))); --s: 1.03;
    box-shadow: inset 0 0 0 1px rgb(34 28 46 / .07), inset 0 0 0 5px #fffefc, inset 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent), 0 2px 3px rgb(34 28 46 / .12), 0 30px 46px -22px rgb(34 28 46 / .6); }
  html[data-cards=k4d] .impact-grid > .impact-card[data-drawn] ~ .impact-card:nth-child(n) { --push: var(--fan-aside); }
  html[data-cards=k4d] .impact-grid > .impact-card:nth-child(n):has(~ .impact-card[data-drawn]) { --push: calc(-1 * var(--fan-aside)); }
  /* arriving: the hand opens from a squared-up deck, each card fanning out to its place */
  /* arriving: the fan is already laid out, first seen close, from a little below and askew, slightly soft; the camera
     eases up and back to the straight-on view as the cards settle, each a whisper after the last */
  html.impact-live[data-cards=k4d] .impact-grid > .impact-card:not(.is-in):nth-child(n) { opacity: 0; }
  html.impact-live[data-cards=k4d] .impact-grid > .impact-card.is-in:nth-child(n) { --gd: calc(1.05s + var(--i) * .04s);
    animation: k4d-arrive .9s cubic-bezier(.2,.7,.1,1) calc(.1s + var(--i) * .04s) both; }
  html.impact-live[data-cards=k4d] .impact-grid.is-dealt { transform-origin: 50% 70%; animation: k4d-cam 1.8s cubic-bezier(.2,.7,.1,1) both; will-change: transform, opacity, filter; }
  html.impact-live[data-cards=k4d] .impact-grid::after { opacity: 0; }
  html.impact-live[data-cards=k4d] .impact-grid.is-dealt::after { animation: k4d-cue .6s ease 1.5s both; }
}
@media (max-width: 1100px) { /* a rail that snaps, card by card, bleeding to the screen's edges */
  html[data-cards=k4d] .impact-grid { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 5vw; margin: 0 -5vw; padding: 10px 5vw 24px; scrollbar-width: none; }
  html[data-cards=k4d] .impact-grid::-webkit-scrollbar { display: none; }
  html[data-cards=k4d] .impact-grid > .impact-card:nth-child(n) { flex: 0 0 min(300px, 76vw); scroll-snap-align: start; rotate: calc(var(--fi) * .35deg); }
  html.impact-live[data-cards=k4d] .impact-grid > .impact-card:nth-child(n) { transform: translateX(32px); transition: transform .7s cubic-bezier(.22,1.25,.36,1) calc(var(--i) * .07s), opacity .45s ease calc(var(--i) * .07s); }
  html.impact-live[data-cards=k4d] .impact-grid > .impact-card:not(.is-in):nth-child(n) { opacity: 0; }
  html.impact-live[data-cards=k4d] .impact-grid > .impact-card.is-in:nth-child(n) { transform: none; }
}
html[data-variant=nocturne][data-cards=k4d] .impact-grid > .impact-card:nth-child(n) { background: linear-gradient(175deg, #2a2234, #231c2b); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07), inset 0 0 0 5px #272030, inset 0 0 0 6px rgb(240 139 189 / .14), 0 1px 2px rgb(0 0 0 / .4), 0 16px 28px -16px rgb(0 0 0 / .85); }
html[data-variant=nocturne][data-cards=k4d] .impact-grid > .impact-card[data-drawn]:nth-child(n) { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09), inset 0 0 0 5px #272030, inset 0 0 0 6px rgb(240 139 189 / .3), 0 30px 46px -22px rgb(0 0 0 / .9); }
@media (prefers-reduced-motion: reduce) { html[data-cards=k4d] .impact-grid > .impact-card:nth-child(n) { transition: none; } }
@media (prefers-reduced-motion: reduce) and (min-width: 1101px) { /* the site stills every transform for reduced motion, so the hand is
  set with rotate and translate instead: the same places, the drawn card straightened about the same point, nothing moving between */
  html[data-cards=k4d] .impact-grid > .impact-card:nth-child(n) { rotate: var(--th); }
  html[data-cards=k4d] .impact-grid > .impact-card[data-drawn]:nth-child(n) { rotate: 0deg; translate: calc(var(--qx) * cos(var(--th)) - var(--qy) * sin(var(--th)) - var(--qx)) calc(var(--qx) * sin(var(--th)) + var(--qy) * cos(var(--th)) - var(--qy) - var(--up)); }
}
@keyframes k4d-cue { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes k4d-arrive { from { translate: 0 14px; } to { translate: 0 0; } }
@keyframes k4d-cam { from { transform: perspective(1400px) rotateX(18deg) rotateZ(-2.5deg) scale(1.08) translateY(24px); filter: blur(2.5px); opacity: 0; } 30% { opacity: 1; } 70% { filter: blur(0); } to { transform: none; filter: none; } } /* the first camera move: a gentle low tilt easing up to straight on */
/* K4d glyphs: each result's pictogram in the card's top corner, in the About page's edge-icon style (2px strokes in
   the tag ink over soft tints) and with its small motions: played as the hand deals in (.is-in) and again whenever
   the card is drawn (a second set of keyframes, so the animation restarts). Still for reduced motion. */
.impact-glyph { display: none; }
@media (max-width: 1100px) { html[data-cards=k4d] .impact-grid > .impact-card:nth-child(n) { position: relative; } }
@media (max-width: 760px) { /* phones: the hand becomes a single column down the page, each card the full width */
  html[data-cards=k4d] .impact-grid .impact-card .impact-label:nth-child(n) { font-size: 12.5px !important; padding-right: 76px; } /* clear of the card's icon */
  html[data-cards=k4d] .impact-grid .impact-card :is(.impact-src, .impact-src-name, .impact-src time, .impact-chart-cap):nth-child(n) { font-size: 12px !important; }
  html[data-cards=k4d] .impact-grid { flex-direction: column; overflow: visible; scroll-snap-type: none; margin: 0; padding: 4px 0 24px; gap: 16px; }
  html[data-cards=k4d] .impact-grid > .impact-card:nth-child(n) { flex: none; width: 100%; rotate: none; }
  html.impact-live[data-cards=k4d] .impact-grid > .impact-card:nth-child(n) { transform: translateY(24px); }
  html.impact-live[data-cards=k4d] .impact-grid > .impact-card.is-in:nth-child(n) { transform: none; }
}
html[data-cards=k4d] .impact-glyph { display: block; position: absolute; top: clamp(10px, 1.6vh, 16px); right: clamp(10px, 1vw, 14px); width: clamp(56px, 4.6vw, 64px); height: auto; aspect-ratio: 1; color: var(--tag-ink, #45315b); pointer-events: none; overflow: visible; }
html[data-cards=k4d] .impact-grid .impact-big:nth-child(n) { max-width: calc(100% - 70px); }
html[data-variant=nocturne][data-cards=k4d] .impact-glyph { color: #c9b8e8; }
.impact-glyph :is(.rg-bar, .rg-pop, .rg-arrow) { transform-box: fill-box; }
.impact-glyph .rg-bar { transform-origin: 50% 100%; }
.impact-glyph .rg-pop { transform-origin: center; }
.impact-glyph .rg-draw { stroke-dasharray: 1 1; }
@media (prefers-reduced-motion: no-preference) {
  html[data-cards=k4d] .impact-card.is-in .rg-draw { animation: rg-draw 1.3s cubic-bezier(.2,.7,.2,1) calc(var(--gd, 0s) + .1s + var(--i, 0) * .05s) both; }
  html[data-cards=k4d] .impact-card.is-in .rg-bar { animation: rg-bar .7s cubic-bezier(.2,.7,.2,1) calc(var(--gd, 0s) + .05s + var(--i) * .09s) both; }
  html[data-cards=k4d] .impact-card.is-in .rg-pop { animation: rg-pop .45s cubic-bezier(.3,1.6,.5,1) calc(var(--gd, 0s) + .4s + var(--i, 0) * .2s) both; }
  html[data-cards=k4d] .impact-card.is-in .rg-arrow { animation: rg-arrow .5s cubic-bezier(.2,.7,.2,1) calc(var(--gd, 0s) + .8s) both; }
  html[data-cards=k4d] .impact-card.is-in .rg-flash { animation: rg-flash 1.1s ease-in-out calc(var(--gd, 0s) + .2s); }
  html[data-cards=k4d] .impact-card[data-drawn] .rg-draw { animation: rg-draw2 1.1s cubic-bezier(.2,.7,.2,1) .1s both; }
  html[data-cards=k4d] .impact-card[data-drawn] .rg-bar { animation: rg-bar2 .6s cubic-bezier(.2,.7,.2,1) calc(.05s + var(--i) * .08s) both; }
  html[data-cards=k4d] .impact-card[data-drawn] .rg-pop { animation: rg-pop2 .45s cubic-bezier(.3,1.6,.5,1) calc(.5s + var(--i, 0) * .18s) both; }
  html[data-cards=k4d] .impact-card[data-drawn] .rg-arrow { animation: rg-arrow2 .5s cubic-bezier(.2,.7,.2,1) .7s both; }
  html[data-cards=k4d] .impact-card[data-drawn] .rg-flash { animation: rg-flash2 1.1s ease-in-out .15s; }
}
@keyframes rg-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rg-draw2 { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rg-bar { from { transform: scaleY(0); } to { transform: none; } }
@keyframes rg-bar2 { from { transform: scaleY(0); } to { transform: none; } }
@keyframes rg-pop { from { transform: scale(0); } to { transform: none; } }
@keyframes rg-pop2 { from { transform: scale(0); } to { transform: none; } }
@keyframes rg-arrow { from { opacity: 0; transform: translate(-3px, 3px); } to { opacity: 1; transform: none; } }
@keyframes rg-arrow2 { from { opacity: 0; transform: translate(-3px, 3px); } to { opacity: 1; transform: none; } }
@keyframes rg-flash { 50% { fill-opacity: .32; } }
@keyframes rg-flash2 { 50% { fill-opacity: .32; } }
/* K4d page composition: on a wide screen the title and intro sit centred over the hand, the fan the centrepiece, with
   a quiet cue beneath it and one section's breath before the footer */
html[data-cards=k4d] .results-page { padding-bottom: clamp(32px, 4vw, 56px); }
@media (min-width: 1101px) {
  html[data-cards=k4d] .results-page > .impact { display: flex; flex-direction: column; }
  html[data-cards=k4d] .results-page .section-heading { display: block; padding-bottom: clamp(8px, 2vh, 24px); text-align: center; }
  html[data-cards=k4d] .results-page .impact-sub { margin-inline: auto; }
  html[data-cards=k4d] .results-page .impact-switch { margin: 0 auto 8px; width: max-content; max-width: 100%; justify-content: center; }
  html[data-cards=k4d] .impact-grid { margin-top: clamp(4px, 1.5vh, 16px); }
  /* in the hand only each card's left edge shows, so the pictogram sits there, over the source line */
  html[data-cards=k4d] .impact-glyph { top: auto; right: auto; bottom: clamp(36px, 5vh, 46px); left: clamp(10px, .9vw, 14px); width: clamp(60px, 5vw, 72px); }
  html[data-cards=k4d] .impact-grid .impact-card .impact-text { min-height: 0; overflow: hidden; margin-bottom: calc(clamp(60px, 5vw, 72px) + 4px); -webkit-mask: linear-gradient(#000 calc(100% - 1.4em), transparent); mask: linear-gradient(#000 calc(100% - 1.4em), transparent); }
  /* drawn, a long quote gets the whole card: it runs over the pictogram, which steps back to a faint mark */
  html[data-cards=k4d] .impact-grid .impact-card[data-drawn] .impact-text { overflow: visible; margin-bottom: 0; -webkit-mask: none; mask: none; }
  html[data-cards=k4d] .impact-card .impact-glyph { transition: opacity .35s ease; }
  html[data-cards=k4d] .impact-card[data-drawn]:has(.impact-text:not(:empty)) .impact-glyph { opacity: var(--glyph-drawn, .3); }
  html[data-cards=k4d] .impact-grid .impact-big:nth-child(n) { max-width: 100%; }
  html[data-cards=k4d] .impact-grid::after { content: "Point at a card, or tab to it, to draw it from the hand"; position: absolute; left: 0; right: 0; bottom: -34px; text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
}

/* K4e · Flip cards: the seven as flashcards, four over three. The front carries the figure large on a deep plum face
   with its label; the back, on paper, the quote and its source. Pointing at or focusing a card turns it over: each
   face and its pieces turn about the card's centre line (the link itself stays still under the pointer), the hidden
   side's backface out of sight; with reduced motion the faces crossfade instead. Both faces stay in the page in reading
   order, front then back. A folded corner on the front shows the paper behind it. Phones show both sides as one card. */
html[data-cards=k4e] .impact-grid { --front: linear-gradient(160deg, #33243f, #261a31 60%, #1f1529); --front-ink: #261a31; --paper: linear-gradient(170deg, #fffefb, #faf6ef); --flip: .7s cubic-bezier(.35,.1,.2,1);
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(14px, 2.4vh, 26px) clamp(16px, 1.6vw, 26px); padding-top: 9px; }
html[data-cards=k4e] .impact-grid > .impact-card:nth-child(n) { --pt: clamp(14px, 2.2vh, 22px); --px: clamp(16px, 1.4vw, 22px); --pb: clamp(12px, 1.8vh, 18px); --fs: clamp(.84rem, min(.98vw, 1.72vh), .96rem); --rule: calc(var(--fs) * 1.5);
  grid-column: span 2; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; min-height: clamp(168px, 24.5vh, 226px); padding: var(--pt) var(--px) var(--pb); perspective: 1100px; }
html[data-cards=k4e] .impact-grid > .impact-card:nth-child(5) { grid-column: 2 / span 2; }
/* the two sides: the front drawn by ::before (a folded corner showing the paper behind), the back by ::after, ruled to
   the quote's own line pitch */
html[data-cards=k4e] .impact-grid > .impact-card::before, html[data-cards=k4e] .impact-grid > .impact-card::after { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 10px; backface-visibility: hidden; transition: transform var(--flip), opacity .3s ease; }
html[data-cards=k4e] .impact-grid > .impact-card::before { background: var(--front); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 2px 3px rgb(34 28 46 / .18), 0 18px 30px -18px rgb(34 28 46 / .6); }
html[data-cards=k4e] .impact-grid > .impact-card::after { background: repeating-linear-gradient(transparent 0 calc(var(--rule) - 1px), color-mix(in srgb, var(--ink) 8%, transparent) calc(var(--rule) - 1px) var(--rule)) 0 var(--pt) / 100% calc(100% - var(--pt) - var(--pb) - 26px) no-repeat, var(--paper);
  box-shadow: inset 0 0 0 1px rgb(34 28 46 / .06), 0 2px 3px rgb(34 28 46 / .12), 0 18px 30px -18px rgb(34 28 46 / .45); transform: rotateY(180deg); }
html[data-cards=k4e] .impact-media { display: contents; }
html[data-cards=k4e] :is(.impact-photo, .impact-icon, .impact-pin, .impact-call) { display: none; }
html[data-cards=k4e] .impact-card > :is(.impact-big, .impact-label, .impact-text, .impact-src), html[data-cards=k4e] .impact-card .impact-when { position: relative; z-index: 1; grid-column: 1; min-width: 0; backface-visibility: hidden; transition: transform var(--flip), opacity .3s ease; }
html[data-cards=k4e] .impact-card .impact-when { display: block; grid-row: 1; align-self: start; justify-self: start; font-size: .68rem; font-weight: 700; line-height: 1; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .5); }
html[data-cards=k4e] .impact-grid .impact-card > .impact-big:nth-child(n) { grid-row: 1; align-self: center; justify-self: stretch; margin: 0; padding-top: 10px; text-align: center; font-size: clamp(2.1rem, min(3.4vw, 5.6vh), 3.3rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: #fff !important; }
html[data-cards=k4e] .impact-grid .impact-card > .impact-big[data-num]:nth-child(n) { background-image: linear-gradient(100deg, #fff 20%, #f7b3d3 70%, #cdbcf0); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
html[data-cards=k4e] .impact-card > .impact-label { grid-row: 2; align-self: end; margin: 10px 0 2px !important; text-align: center; font-size: .64rem; font-weight: 700; line-height: 1.35; letter-spacing: .13em; text-transform: uppercase; color: #f3a6cb; text-wrap: balance; }
/* the front's folded corner (carried by the label, so it turns with the front): the page beyond the fold, the paper of
   the back on the flap */
html[data-cards=k4e] .impact-card > .impact-label::after { content: ''; position: absolute; right: calc(-1 * var(--px)); bottom: calc(-2px - var(--pb)); width: 20px; height: 20px;
  background: linear-gradient(315deg, var(--bg) calc(50% - .5px), rgb(0 0 0 / .32) calc(50% - .5px) 50%, #e4d9c5 50%, #f2ebde); }
html[data-cards=k4e] .impact-card > :is(.impact-text, .impact-src) { transform: rotateY(180deg); }
html[data-cards=k4e] .impact-card > .impact-text { grid-row: 1; align-self: start; margin: 0 !important; font-size: var(--fs); line-height: var(--rule); color: var(--ink); text-wrap: pretty; }
html[data-cards=k4e] .impact-card > .impact-src { grid-row: 2; align-self: end; margin: 12px 0 0 !important; }
@media (min-width: 761px) { /* turned over while pointed at, focused or tapped */
  html[data-cards=k4e] .impact-grid > .impact-card:is(:hover, :focus-visible, [data-peek])::before, html[data-cards=k4e] .impact-card:is(:hover, :focus-visible, [data-peek]) > :is(.impact-big, .impact-label), html[data-cards=k4e] .impact-card:is(:hover, :focus-visible, [data-peek]) .impact-when { transform: rotateY(-180deg); }
  html[data-cards=k4e] .impact-grid > .impact-card:is(:hover, :focus-visible, [data-peek])::after, html[data-cards=k4e] .impact-card:is(:hover, :focus-visible, [data-peek]) > :is(.impact-text, .impact-src) { transform: rotateY(0deg); }
  html[data-cards=k4e] .impact-grid > .impact-card:focus-visible { outline-offset: 5px; border-radius: 12px; }
}
@media (min-width: 761px) and (max-width: 1100px) { html[data-cards=k4e] .impact-grid > .impact-card:nth-child(n) { grid-column: span 4; } html[data-cards=k4e] .impact-grid > .impact-card:last-child { grid-column: 3 / span 4; } }
@media (max-width: 760px) { /* no turning: the front as a band across the top of the card, the back beneath it */
  html[data-cards=k4e] .impact-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-cards=k4e] .impact-grid > .impact-card:nth-child(n) { grid-column: 1; grid-template-rows: auto auto auto auto; min-height: 0; padding: 0 0 16px; overflow: hidden; border-radius: 10px; perspective: none;
    background: var(--paper); box-shadow: inset 0 0 0 1px rgb(34 28 46 / .06), 0 14px 26px -18px rgb(34 28 46 / .5); }
  html[data-cards=k4e] .impact-grid > .impact-card::before, html[data-cards=k4e] .impact-grid > .impact-card::after { display: none; }
  html[data-cards=k4e] .impact-card > :is(.impact-text, .impact-src) { transform: none; }
  html[data-cards=k4e] .impact-card .impact-when { grid-row: 1; margin: 16px 18px 0; }
  html[data-cards=k4e] .impact-grid .impact-card > .impact-big:nth-child(n) { grid-row: 1; padding: 34px 18px 0; text-align: left; font-size: 2.6rem; background: var(--front-ink); }
  html[data-cards=k4e] .impact-grid .impact-card > .impact-big[data-num]:nth-child(n) { background-image: linear-gradient(100deg, #fff 20%, #f7b3d3 70%, #cdbcf0), linear-gradient(var(--front-ink), var(--front-ink)); -webkit-background-clip: text, border-box; background-clip: text, border-box; }
  html[data-cards=k4e] .impact-card > .impact-label { grid-row: 2; margin: 0 !important; padding: 8px 18px 18px; text-align: left; background: var(--front-ink); }
  html[data-cards=k4e] .impact-card > .impact-text { grid-row: 3; padding: 14px 18px 0; font-size: 1rem; line-height: 1.5; }
  html[data-cards=k4e] .impact-card > .impact-src { grid-row: 4; padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) { /* a crossfade instead of the turn */
  html[data-cards=k4e] .impact-grid > .impact-card::after, html[data-cards=k4e] .impact-card > :is(.impact-text, .impact-src) { transform: none !important; opacity: 0; }
  html[data-cards=k4e] .impact-grid > .impact-card::before, html[data-cards=k4e] .impact-card > :is(.impact-big, .impact-label), html[data-cards=k4e] .impact-card .impact-when { transform: none !important; }
  html[data-cards=k4e] .impact-grid > .impact-card:is(:hover, :focus-visible, [data-peek])::before, html[data-cards=k4e] .impact-card:is(:hover, :focus-visible, [data-peek]) > :is(.impact-big, .impact-label), html[data-cards=k4e] .impact-card:is(:hover, :focus-visible, [data-peek]) .impact-when { opacity: 0; }
  html[data-cards=k4e] .impact-grid > .impact-card:is(:hover, :focus-visible, [data-peek])::after, html[data-cards=k4e] .impact-card:is(:hover, :focus-visible, [data-peek]) > :is(.impact-text, .impact-src) { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 761px) { /* the faces fade, the one easing asked for (the site's reduced-motion rule otherwise stills every transition) */
  html[data-cards=k4e] .impact-grid > .impact-card:nth-child(n)::before, html[data-cards=k4e] .impact-grid > .impact-card:nth-child(n)::after, html[data-cards=k4e] .impact-card:nth-child(n) > :is(.impact-big, .impact-label, .impact-text, .impact-src), html[data-cards=k4e] .impact-card:nth-child(n) .impact-when { transition: opacity .3s ease !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) { html[data-cards=k4e] .impact-card > :is(.impact-text, .impact-src) { opacity: 1; } html[data-cards=k4e] .impact-card:nth-child(n) > :is(.impact-big, .impact-label), html[data-cards=k4e] .impact-card:nth-child(n) .impact-when { opacity: 1; } }
html[data-variant=nocturne][data-cards=k4e] .impact-grid { --front: linear-gradient(160deg, #3d2a4c, #2f2140 60%, #281b36); --front-ink: #2f2140; --paper: linear-gradient(170deg, #251e2d, #1f1927); }
html[data-variant=nocturne][data-cards=k4e] .impact-grid > .impact-card::before { box-shadow: inset 0 0 0 1px rgb(240 139 189 / .18), 0 18px 30px -18px rgb(0 0 0 / .9); }
html[data-variant=nocturne][data-cards=k4e] .impact-card > .impact-label::after { background: linear-gradient(315deg, var(--bg) calc(50% - .5px), rgb(0 0 0 / .45) calc(50% - .5px) 50%, #2c2434 50%, #241d2c); }
html[data-variant=nocturne][data-cards=k4e] .impact-grid > .impact-card::after { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), 0 18px 30px -18px rgb(0 0 0 / .9); }
/* arriving: each card is dealt face down and turns up in turn */
html.impact-live[data-cards=k4e] .impact-grid > .impact-card:nth-child(n) { opacity: 0; transform: translateY(14px); transition: opacity .45s ease calc(var(--i) * .08s), transform .6s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .08s); }
html.impact-live[data-cards=k4e] .impact-grid > .impact-card.is-in { opacity: 1; transform: none; }
@media (min-width: 761px) {
  html.impact-live[data-cards=k4e] .impact-card.is-in::before, html.impact-live[data-cards=k4e] .impact-card.is-in > :is(.impact-big, .impact-label), html.impact-live[data-cards=k4e] .impact-card.is-in .impact-when { animation: k4e-front .9s cubic-bezier(.35,.1,.2,1) calc(var(--i) * .08s + .25s) backwards; }
  html.impact-live[data-cards=k4e] .impact-card.is-in::after, html.impact-live[data-cards=k4e] .impact-card.is-in > :is(.impact-text, .impact-src) { animation: k4e-back .9s cubic-bezier(.35,.1,.2,1) calc(var(--i) * .08s + .25s) backwards; }
}
@keyframes k4e-front { from { transform: rotateY(180deg); } to { transform: rotateY(0deg); } }
@keyframes k4e-back { from { transform: rotateY(360deg); } to { transform: rotateY(180deg); } }

/* K4f · Stacked piles: the seven gathered into one pile per industry, in the map's order (Industrial, Healthcare,
   Sports, Enterprise), each behind a divider tab that names it and counts its cards. A pile shows its top card, the
   ones beneath peeking out at their own small angles. Pointing at a pile spreads it across the table so every card in
   it reads, the other piles stepping back; focusing a card brings it to the top of its pile (results.js keeps each
   card's depth and how far it moves when spread). Phones list each pile's cards under its tab. */
html[data-cards=k4f] .impact-grid { --gap: clamp(18px, 2vw, 32px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--gap); row-gap: 0; padding-top: 9px; }
html[data-cards=k4f] .impact-pile { display: flex; align-items: baseline; gap: 8px; grid-column: var(--pc); grid-row: 1; justify-self: start; position: relative; z-index: 0; margin: 0 0 -7px 12px; padding: 7px 14px 13px; border-radius: 9px 9px 0 0;
  background: linear-gradient(#efe3ee, #e6d7e4); box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 0 0 1px rgb(34 28 46 / .06); font-size: .64rem; font-weight: 800; line-height: 1.2; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); transition: opacity .35s ease; }
html[data-cards=k4f] .impact-pile span { font-weight: 600; letter-spacing: .03em; text-transform: none; color: var(--muted); }
html[data-cards=k4f] .impact-grid > .impact-card:nth-child(n) { --r: 0deg; --x: 0px; --y: 0px; --d: 0; grid-column: var(--pc); grid-row: 2; position: relative; z-index: calc(6 - var(--d)); display: flex; flex-direction: column; min-width: 0;
  padding: clamp(18px, 2.9vh, 30px) clamp(18px, 1.6vw, 26px) clamp(14px, 2vh, 18px); border-radius: 4px; background: linear-gradient(172deg, #fffefb, #faf6ef); box-shadow: 0 1px 1px rgb(34 28 46 / .1), 0 10px 18px -12px rgb(34 28 46 / .4);
  rotate: var(--r); translate: var(--x) var(--y); transition: rotate .5s cubic-bezier(.2,.8,.2,1), translate .55s cubic-bezier(.2,.8,.2,1), opacity .35s ease, scale .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; }
html[data-cards=k4f] .impact-grid > .impact-card[data-depth="0"] { --r: -.5deg; }
html[data-cards=k4f] .impact-grid > .impact-card[data-depth="1"] { --d: 1; --r: 2.4deg; --x: 9px; --y: 12px; }
html[data-cards=k4f] .impact-grid > .impact-card[data-depth="2"] { --d: 2; --r: -2.2deg; --x: -7px; --y: 22px; }
/* the cards beneath a step greyer, so their edges read against the one on top */
html[data-cards=k4f] .impact-grid > .impact-card:not([data-depth="0"], [data-spread]) { background: linear-gradient(172deg, #f6f1e7, #eee7da); }
html[data-cards=k4f] .impact-grid > .impact-card[data-spread]:nth-child(n) { z-index: 20; rotate: calc(var(--fr) * 1.1deg); translate: calc(var(--fx) * (100% + var(--gap))) -6px; box-shadow: 0 1px 1px rgb(34 28 46 / .08), 0 26px 40px -22px rgb(34 28 46 / .55); }
/* the other piles step back: a little smaller, their type faded (the paper stays opaque, so no pile shows through itself) */
html[data-cards=k4f] .impact-card > * { transition: opacity .35s ease; }
html[data-cards=k4f] .impact-grid[data-spread] > .impact-card:not([data-spread]) { scale: .97; box-shadow: 0 1px 1px rgb(34 28 46 / .06), 0 8px 14px -12px rgb(34 28 46 / .25); }
html[data-cards=k4f] .impact-grid[data-spread] > .impact-card:not([data-spread]) > * { opacity: .28; }
/* a spread card's reach runs on over the gaps either side, so the pointer can cross from card to card without letting go */
html[data-cards=k4f] .impact-grid > .impact-card[data-spread]::after { content: ''; position: absolute; inset: -8px calc(var(--gap) / -2 - 2px); }
html[data-cards=k4f] .impact-grid[data-spread] > .impact-pile:not([data-spread]) { opacity: .45; }
html[data-cards=k4f] .impact-grid > .impact-card:focus-visible { outline-offset: 4px; border-radius: 6px; }
html[data-cards=k4f] .impact-grid .impact-big:nth-child(n) { font-size: clamp(1.8rem, min(2.8vw, 4.6vh), 2.9rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--ink) !important; transition: color .35s ease; }
html[data-cards=k4f] .impact-grid .impact-card:is(:hover, :focus-visible, [data-spread]) .impact-big:nth-child(n) { color: var(--accent) !important; }
html[data-cards=k4f] .impact-label { margin-top: 7px !important; font-size: .64rem; font-weight: 700; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); text-wrap: balance; }
html[data-cards=k4f] .impact-text { flex: 1; margin-top: clamp(8px, 1.4vh, 14px) !important; font-size: clamp(.86rem, min(1.03vw, 1.85vh), 1.04rem); line-height: 1.48; color: var(--ink); text-wrap: pretty; }
html[data-cards=k4f] .impact-src { margin-top: clamp(10px, 1.6vh, 14px) !important; padding-top: 9px; border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
html[data-variant=nocturne][data-cards=k4f] .impact-pile { background: linear-gradient(#2c2236, #261d2f); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 0 0 1px rgb(255 255 255 / .06); }
html[data-variant=nocturne][data-cards=k4f] .impact-grid > .impact-card:nth-child(n) { background: linear-gradient(172deg, #2a2233, #231c2b); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06), 0 12px 22px -12px rgb(0 0 0 / .85); }
html[data-variant=nocturne][data-cards=k4f] .impact-grid > .impact-card:not([data-depth="0"], [data-spread]):nth-child(n) { background: linear-gradient(172deg, #221b2a, #1d1724); }
@media (min-width: 761px) and (max-width: 1100px) { html[data-cards=k4f] .impact-grid .impact-big:nth-child(n) { font-size: 1.5rem; } html[data-cards=k4f] .impact-grid > .impact-card:nth-child(n) { padding: 16px 14px 12px; } }
@media (max-width: 760px) { /* each pile's tab, then its cards, one under another */
  html[data-cards=k4f] .impact-grid { display: flex; flex-direction: column; }
  html[data-cards=k4f] .impact-pile { align-self: flex-start; margin: 26px 0 -6px 12px; }
  html[data-cards=k4f] .impact-pile:first-child { margin-top: 4px; }
  html[data-cards=k4f] .impact-grid > .impact-card:nth-child(n) { margin-bottom: 12px; translate: none; rotate: calc(var(--fr, 0) * .8deg); z-index: auto; background: linear-gradient(172deg, #fffefb, #faf6ef); }
  html[data-variant=nocturne][data-cards=k4f] .impact-grid > .impact-card:nth-child(n) { background: linear-gradient(172deg, #2a2233, #231c2b); }
  html[data-cards=k4f] .impact-text { font-size: 1rem; }
}
/* arriving: the piles are set down in turn, the cards beneath settling into their angles */
html.impact-live[data-cards=k4f] .impact-grid > .impact-card:nth-child(n) { opacity: 0; transform: translateY(-14px); transition: opacity .45s ease calc(var(--i) * .06s), transform .6s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .06s), rotate .5s cubic-bezier(.2,.8,.2,1), translate .55s cubic-bezier(.2,.8,.2,1), scale .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; }
html.impact-live[data-cards=k4f] .impact-grid > .impact-card.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html[data-cards=k4f] .impact-grid > .impact-card:nth-child(n), html[data-cards=k4f] .impact-pile { transition: none; } }
/* ==== end Results cards ==== */
/* On the résumé itself, its header pill shows it's the current page by filling in, not with the underline the text links use. */
body>.nav nav>a.nav-resume[aria-current=page]::after, html[data-variant] body>.nav nav>a.nav-resume[aria-current=page]::after { display: none !important; }
body>.nav nav>a.nav-resume[aria-current=page], html[data-variant] body>.nav nav>a.nav-resume[aria-current=page] { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--bg) !important; }

/* Contact, cleaned up: the card's top lines up with the eyebrow; copying the address is a small icon button beside it,
   so the two ways to write (email, LinkedIn) share one row as an even pair and no button is ever left on a line of its
   own. Below 900px the card drops under the invitation instead of squeezing beside it. */
.contact-v2 .contact-details { padding-top: 0; }
.contact-email { display: flex; align-items: center; gap: 10px; margin: 10px 0 22px; }
.contact-email .contact-big { margin: 0; min-width: 0; font-size: clamp(1.35rem, 2.6vw, 2.2rem); }
.contact-copy { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: color .2s, box-shadow .2s; }
.contact-copy:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.contact-copy svg { grid-area: 1 / 1; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: opacity .2s, transform .25s; }
.contact-copy .i-done, .contact-copy.is-done .i-copy { opacity: 0; transform: scale(.6); }
.contact-copy.is-done .i-done { opacity: 1; transform: none; }
.contact-copy.is-done { color: #2a8a5a; box-shadow: inset 0 0 0 1px #2a8a5a; }
.contact-copy::after { content: 'Copy'; position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 4px; padding: 5px 9px; border-radius: 6px; background: var(--ink); color: var(--bg); font: 600 .72rem/1 var(--font-site, inherit); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .18s, translate .18s; }
.contact-copy:is(:hover, :focus-visible)::after, .contact-copy.is-done::after { opacity: 1; translate: -50% 0; }
.contact-copy.is-done::after { content: 'Copied'; }
.contact-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.contact-actions { gap: 8px; }
.contact-actions > .contact-btn { flex: 1 1 0; min-width: max-content; justify-content: center; }
@media (max-width: 900px) { .contact-v2 { grid-template-columns: 1fr; gap: 40px; } .contact-v2 .contact-details { max-width: 34rem; } }
/* Résumé: the career chapters as a horizontal timeline at the top of Experience (resume-chapters.js). It sticks under
   the header while the chapters scroll past; the rail fills as you read, the current stop lights up, and each stop jumps
   to its chapter. On phones each stop shows just the year it began. */
.resume-chapters { container-type: inline-size; position: sticky; top: 82px; z-index: 5; margin: -6px 0 34px; padding: 14px 0 14px; background: transparent; transition: background-color .3s, box-shadow .3s; }
.resume-chapters.is-stuck { background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); } /* a backing only once it's riding under the header */
.resume-chapters ol { position: relative; display: grid; grid-template-columns: repeat(6, minmax(max-content, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.resume-chapters ol::before, .resume-chapters ol::after { content: ''; position: absolute; top: 4px; left: 4.5px; height: 1px; pointer-events: none; }
.resume-chapters ol::before { right: 0; background: var(--line); }
.resume-chapters ol::after { width: var(--px, 0); background: var(--accent); transition: width .35s cubic-bezier(.2,.7,.2,1); }
.resume-chapters li { min-width: 0; }
.resume-chapters a { position: relative; z-index: 1; display: grid; gap: 3px; padding-top: 20px; text-decoration: none; color: var(--ink); }
.resume-chapters i { position: absolute; top: 0; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 28%, transparent); transition: background-color .3s, box-shadow .3s; }
.resume-chapters b, .resume-chapters u { font-size: .71rem; font-weight: 400; font-variant-numeric: tabular-nums; text-decoration: none; color: var(--accent); white-space: nowrap; }
.resume-chapters u { display: none; }
.resume-chapters span { font-size: .84rem; font-weight: 600; line-height: 1.25; color: var(--muted); white-space: nowrap; transition: color .25s; } /* each stop is at least as wide as its name, so none is cut off */
.resume-chapters a.is-past i { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.resume-chapters a.is-on i { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.resume-chapters a.is-on span, .resume-chapters a:hover span { color: var(--ink); }
.resume-chapters a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.resume-history > article { scroll-margin-top: calc(var(--rc-h, 70px) + 12px); }
@container (max-width: 760px) { /* narrower: a step smaller, and a name may take two lines */
  .resume-chapters ol { grid-template-columns: repeat(6, minmax(min-content, 1fr)); gap: 10px; }
  .resume-chapters b { font-size: .66rem; }
  .resume-chapters span { font-size: .76rem; white-space: normal; }
}
@container (max-width: 440px) { /* too narrow for the names: each stop shows just the year it began */
  .resume-chapters ol { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .resume-chapters b, .resume-chapters span { display: none; }
  .resume-chapters u { display: block; }
}
@media print { .resume-chapters { display: none !important; } }
/* Résumé, review pass. Each role carries a Shipped line, and KPMG Advisory a one-line pointer to the UK work under
   Selected impact (the old UK card returns with ?inset, ?inset=v its vertical take). With the chapter timeline doing
   the job, the dot rail beside Experience is off on screen (?rail=1 brings it back; paper keeps it). Section labels
   at least 12px and dates at least 13px, in every style. */
.resume-history .role-shipped, .resume-history .role-note { margin: 0 0 14px; font-size: .95rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.resume-history .role-shipped b { font-weight: 600; color: var(--ink); }
.resume-history h3 .role-co { white-space: nowrap; } /* a narrow screen wraps before "· Company", never inside it */
.resume-history .role-note { font-size: .9rem; }
.resume-history .role-note a { color: var(--accent); }
html:not(.inset-on) .resume-inset { display: none !important; }
html.inset-on .resume-history .role-note { display: none; }
@media screen {
  html:not(.rail-on) .resume-history > article { margin-left: 0; padding-left: 0; border-left: 0; }
  html:not(.rail-on) .resume-history > article::before { display: none; }
  html .resume-page .eyebrow, html[data-variant] .resume-page .eyebrow { font-size: .75rem !important; }
  .resume-period, .resume-chapters b, .resume-chapters u, .resume-inset li span, html.inset-v .resume-inset li span { font-size: .8125rem !important; }
}
/* Heirloom Builders: the interface gallery as a bento with the two-phone image as its large tile (heirloom-gallery.js
   appends it last). Above 700px: the pair (3:2) and the prototype recording in hand across the top two rows, the four
   jobsite mockups in a row beneath. On phones the pair leads, full width, over the original arrangement. */
@media (min-width: 701px) {
  :is(#small-detail,#case-content) .interface-screen-grid { grid-template-rows: 230px 230px 220px; }
  :is(#small-detail,#case-content) .interface-study.interface-study-pair { grid-column: 1 / 9; grid-row: 1 / 3; }
  :is(#small-detail,#case-content) .interface-study:nth-child(1) { grid-column: 9 / 13; grid-row: 1 / 3; }
  :is(#small-detail,#case-content) .interface-study:nth-child(2) { grid-column: 1 / 4; grid-row: 3; }
  :is(#small-detail,#case-content) .interface-study:nth-child(3) { grid-column: 4 / 7; grid-row: 3; }
  :is(#small-detail,#case-content) .interface-study:nth-child(4) { grid-column: 7 / 10; grid-row: 3; }
  :is(#small-detail,#case-content) .interface-study:nth-child(5) { grid-column: 10 / 13; grid-row: 3; }
}
@media (max-width: 700px) {
  :is(#small-detail,#case-content) .interface-screen-grid { grid-template-rows: auto 210px 190px 190px; }
  :is(#small-detail,#case-content) .interface-study.interface-study-pair { grid-column: 1 / -1; grid-row: 1; height: auto; aspect-ratio: 3 / 2; }
  :is(#small-detail,#case-content) .interface-study:nth-child(1) { grid-column: 1; grid-row: 2 / 4; }
  :is(#small-detail,#case-content) .interface-study:nth-child(3) { grid-column: 2; grid-row: 2; }
  :is(#small-detail,#case-content) .interface-study:nth-child(4) { grid-column: 2; grid-row: 3; }
  :is(#small-detail,#case-content) .interface-study:nth-child(2) { grid-column: 1; grid-row: 4; }
  :is(#small-detail,#case-content) .interface-study:nth-child(5) { grid-column: 2; grid-row: 4; }
}
:is(#small-detail,#case-content) .interface-study-pair .interface-screen-stage { background: #1d3a2a; }
:is(#small-detail,#case-content) .interface-study-pair .interface-screen-stage img { object-fit: cover; object-position: 50% 50%; }
/* Project pages: named work in "What I made" links to the live piece. */
.result-delivery .made-link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); transition: text-decoration-color .2s; }
.result-delivery .made-link:hover { text-decoration-color: var(--accent); }
/* Interactive thought leadership: the solo recording sits small in the top right, under the two windows and beside the
   specs, without a frame of its own, playing the other half of the recording. */
@media (min-width: 901px) {
  #case-content:has(> .case-solo) .case-image { grid-row: 1; }
  #case-content#case-content > .case-solo { grid-column: 2 !important; grid-row: 2 !important; align-self: start; margin: 8px 0 0; }
}
#case-content#case-content > .case-solo { border-radius: 12px; box-shadow: none; background: none; }
/* Each site in its own frame: the first beside the intro, the second under it beside the specs. */
@media (min-width: 901px) {
  #case-content#case-content > .screen-duo.is-single { grid-row: 1; align-self: start; }
  #case-content#case-content > .screen-duo.is-single + .screen-duo.is-single { grid-column: 2; grid-row: 2; align-self: start; margin-top: 16px; }
}
@media (max-width: 900px) { #case-content > .screen-duo.is-single + .screen-duo.is-single { margin-top: 16px; } }
/* Previous / next, compressed: a slimmer band, smaller thumbnails and titles. */
html[data-pager=big] #case-content .case-body + .project-pagination, html[data-pager=big] #case-content .project-pagination { padding: 22px 0 24px !important; }
html[data-pager=big] #case-content .project-pagination-link { grid-template-columns: 68px 1fr auto !important; column-gap: 16px !important; }
html[data-pager=big] #case-content .project-pagination-link img { width: 68px !important; height: 68px !important; border-radius: 11px !important; }
html[data-pager=big] #case-content .project-pagination-link h2 { font-size: clamp(1.15rem, 1.7vw, 1.5rem) !important; margin: 3px 0 2px !important; }
@media (max-width: 600px) { html[data-pager=big] #case-content .project-pagination-link { grid-template-columns: 52px 1fr auto !important; } html[data-pager=big] #case-content .project-pagination-link img { width: 52px !important; height: 52px !important; border-radius: 9px !important; } }
/* About: the story's night carries on through the close and into the footer, so the page ends on one dark ground
   instead of dark, light, dark. The type and buttons turn light to match. ?close=light keeps the light close. */
html:not(.close-light) .about-page .ab-close { --night: #120d19; margin-bottom: 0 !important; padding-bottom: clamp(64px, 8vw, 112px); background: var(--night); box-shadow: 0 0 0 100vmax var(--night); clip-path: inset(0 -100vmax); color: #efe9f4; }
html:not(.close-light) body:has(.about-page .ab-close) > footer.portfolio-footer { margin-top: 0 !important; background: #120d19 !important; border-top: 1px solid rgb(255 255 255 / .12) !important; } /* a faint hairline parts it from the close above, as on Experience */
html:not(.close-light) .about-page .ab-close { clip-path: inset(-2px -100vmax 0); } /* its night backing reaches 2px up under the story above, so their shared edge, which can fall between two pixels, never lets the light page through as a hairline */
html:not(.close-light)[data-variant] .about-page .ab-close h2, html:not(.close-light) .about-page .ab-close h2 { color: #fff !important; }
html:not(.close-light)[data-variant] .about-page .ab-close h2 em, html:not(.close-light) .about-page .ab-close h2 em { color: transparent !important; background: linear-gradient(95deg, #f7a8cc, #f08bbd 40%, #b8a4db); -webkit-background-clip: text; background-clip: text; }
html:not(.close-light) .about-page :is(.ab-close-who b, .ab-close-note) { color: #efe9f4 !important; }
html:not(.close-light) .about-page .ab-close-who p { color: rgb(239 233 244 / .62) !important; }
html:not(.close-light) .about-page .ab-close-aside { border-color: rgb(255 255 255 / .14) !important; }
html:not(.close-light) .about-page .ab-close-avatar { box-shadow: 0 0 0 1px rgb(255 255 255 / .18); }
html:not(.close-light)[data-variant] .about-page .ab-close .about-btn--solid, html:not(.close-light) .about-page .ab-close .about-btn--solid { background: #f4eff9 !important; border-color: #f4eff9 !important; color: #120d19 !important; box-shadow: none; }
html:not(.close-light)[data-variant] .about-page .ab-close .about-btn--solid:hover, html:not(.close-light) .about-page .ab-close .about-btn--solid:hover { background: #fff !important; border-color: #fff !important; }
html:not(.close-light)[data-variant] .about-page .ab-close .about-btn:not(.about-btn--solid), html:not(.close-light) .about-page .ab-close .about-btn:not(.about-btn--solid) { background: transparent !important; border-color: rgb(255 255 255 / .3) !important; color: #efe9f4 !important; }
html:not(.close-light)[data-variant] .about-page .ab-close .about-btn:not(.about-btn--solid):hover, html:not(.close-light) .about-page .ab-close .about-btn:not(.about-btn--solid):hover { border-color: #fff !important; }
html:not(.close-light) .about-page .ab-close :focus-visible { outline-color: #f7a8cc !important; }
/* No gradient type: the story's title and the About close set their emphasis in one solid soft pink. */
html .curio-story .curio-intro h2 em, html[data-variant] .curio-story .curio-intro h2 em,
html:not(.close-light) .about-page .ab-close h2 em, html:not(.close-light)[data-variant] .about-page .ab-close h2 em { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #f4a6cb !important; text-shadow: 0 1px 2px rgb(18 13 25 / .5), 0 4px 30px rgb(18 13 25 / .85); }
html:not(.close-light) .about-page .ab-close h2 em, html:not(.close-light)[data-variant] .about-page .ab-close h2 em { text-shadow: none; }
/* About close, recomposed: the headline fills its column at display size (every style), centred against the card. */
.about-page .ab-close { align-items: center !important; column-gap: clamp(40px, 6vw, 112px) !important; }
html .about-page .ab-close h2, html[data-variant] .about-page .ab-close h2 { font-size: clamp(2.6rem, 5.15vw, 5.6rem) !important; line-height: .98 !important; letter-spacing: -.04em; max-width: none; margin: 0 !important; text-wrap: balance; }
html .about-page .ab-close h2 em { display: inline; } /* two lines, "Let's make something" over "great.", filling the column */
.about-page .ab-close-copy h2 { margin-top: 0 !important; }
/* About, the three points: the site's own pictograms over each, and less air between the hero and them. */
.ab-hero+.ab-edge { padding-top: clamp(28px, 3.5vw, 56px) !important; }
/* Drawn on a 96 grid for exactly 96px (72px on phones), so the 2px outlines and 1px details land on whole pixels; the
   art starts 8 units in, so the icon sits back by that much to line up with the headline. ?icons=prev: the earlier set. */
.edge-icon { display: block; width: 96px; aspect-ratio: 1; margin: 0 0 20px -8px; color: var(--tag-ink, #45315b); }
.edge-icon .edge-pict { display: block; width: 100%; height: 100%; max-width: none; margin: 0; flex: none; }
.edge-icon .edge-v1, html.edge-prev .edge-icon .edge-v2 { display: none; }
html.edge-prev .edge-icon { width: clamp(72px, 7vw, 104px); margin: 0 0 22px -4px; }
html.edge-prev .edge-icon .edge-v1 { display: block; }
@media (max-width: 600px) { html:not(.edge-prev) .edge-icon { width: 72px; margin: 0 0 16px -6px; } }
.edge-item { padding-top: 0; }
html[data-variant=nocturne] .edge-icon { color: #c9b8e8; }
/* The header's links and name follow the night just as quickly, so no light header flashes over the dark story. */
html.has-night body>.nav :is(nav>a, .identity-name, .identity-name span, .theme-toggle) { transition-duration: .14s !important; }
.resume-history .resume-inset + .role-shipped { margin-top: 18px; } /* air between the KPMG UK card and the Shipped line */
/* Experience: the layers' captions share one left edge: each is the same width, set left, at the right of its layer. */
.strata.is-side .stratum-caption { text-align: left !important; }
.strata.is-side .stratum-caption span { width: min(26rem, 100%); max-width: none !important; justify-self: end; }
/* Experience: every layer shares one set of columns (the stones' column a fixed width), so the years, headlines and
   lines start at the same x on every layer instead of shifting with how many projects each holds. */
/* Every layer's stones run five across in a column exactly five stones wide, so the grid fills it: one left edge, the
   right edge on the page's edge, and the nine-project layer (five over four) no longer spills past it. */
@media (min-width: 801px) {
  .strata.is-3col .stratum-stones, .strata.is-3col .stratum-stones:has(> :nth-child(9)) { --stone: 56px; grid-template-columns: repeat(5,var(--stone)); gap: 18px 14px; }
  .strata.is-3col .stratum-inner { grid-template-columns: minmax(0,1fr) minmax(0,1.3fr) calc(5 * 56px + 4 * 14px) !important; }
}
@media (min-width: 1200px) {
  .strata.is-3col .stratum-stones, .strata.is-3col .stratum-stones:has(> :nth-child(9)) { --stone: 66px; gap: 20px 18px; }
  .strata.is-3col .stratum-inner { grid-template-columns: minmax(0,1fr) minmax(0,1.3fr) calc(5 * 66px + 4 * 18px) !important; }
}
.strata.is-3col .stratum-stones { justify-content: start !important; }
.strata.is-3col .stratum-caption, .strata.is-3col .stratum-caption span { text-align: left !important; justify-self: start !important; }
/* Experience after dark, before the mountain's own sky has drawn (the page marks html.night-early from the visitor's
   clock in its head): the ground is already night blue and the header already dark, so nothing light flashes on load. */
html.night-early:has(.mountain-stage) { background: #0b0f2c; }
/* Once the range has parked under the layers, the night sky fades and the ground behind turns light, so the range shows
   through the layers at night as it does by day instead of muddying them. */
.mountain-stage .mountain-sky { transition: opacity .6s ease; }
.mountain-stage.is-parked .mountain-sky { opacity: 0 !important; }
/* The header's backing runs the full width of the window on every page and in every style (it takes the header's own
   colour and line), so a tinted hero never shows a hard edge where the header box ends. Night pages use their own. */
html:not(.is-night) body>.nav::before { content: ''; position: absolute; inset: 0 -100vmax -1px; z-index: -1; pointer-events: none; background: inherit; border-bottom: 1px solid; border-bottom-color: inherit;
  /* only beside the header, not behind it, so its own colour and line are never laid on twice */
  -webkit-mask: linear-gradient(90deg, #000 100vmax, transparent 100vmax, transparent calc(100% - 100vmax), #000 calc(100% - 100vmax)); mask: linear-gradient(90deg, #000 100vmax, transparent 100vmax, transparent calc(100% - 100vmax), #000 calc(100% - 100vmax)); }
/* List view: the domain row starts on the same left edge as the project type, not indented under it. */
#more-grid.is-list .mini-tags .domain-pill { padding-left: 0 !important; }
/* The list ends on its own rule, so the Experience call to action below doesn't draw a second one. */
#more:has(#more-grid.is-list) + .experience-cta { border-top: 0; padding-top: 0; }
/* The Trane condenser photo is shot at dusk; lift it to sit with the other project images. */
img[src*="trane-home"] { filter: brightness(1.75) contrast(1.04) saturate(1.12); }
/* Interactive thought leadership as an image grid (project-pages.js screenGrid): the first site's recording is the large
   tile in a slim browser frame; the second site and the interaction clips form a 2 x 2 bento under it, with the same gap
   and radius as the other projects' image grids. */
.screen-grid .sg-lead { position: relative; }
.screen-grid .sg-tile { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px rgb(34 28 46 / .08); }
#case-content.layout-clean .screen-grid .sg-tile { border-radius: 10px; }
.screen-grid .sg-tile.is-dark { background: #141118; }
.screen-grid .sg-bar { flex: none; display: flex; align-items: center; gap: 4px; height: 17px; padding: 0 8px; border-bottom: 1px solid rgb(34 28 46 / .07); font: 600 8px/1 var(--font, system-ui), sans-serif; letter-spacing: .02em; color: #8a8094; }
.screen-grid .sg-bar i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .45; }
.screen-grid .sg-bar span { margin: 0 auto; padding-right: 27px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.screen-grid .is-dark .sg-bar { border-color: rgb(255 255 255 / .06); color: #8d8496; }
.screen-grid .sg-screen { position: relative; flex: 1; min-height: 0; aspect-ratio: 16 / 10; overflow: hidden; }
#case-content .screen-grid .sg-screen video { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0; display: block; }
#case-content .screen-grid .sg-mosaic { contain: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; min-height: 0; align-self: start; }
@media (max-width: 900px) { #case-content .screen-grid .sg-mosaic { margin-top: 8px; } }
#case-content .screen-grid .image-note { top: 27px; } /* under the browser bar, clear of its dots */
.screen-grid .sg-pause {
  position: absolute; right: 10px; bottom: 10px; z-index: 9; padding: 4px 10px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--ink); font-size: 11px; font-weight: 600; line-height: 1.3; cursor: pointer; opacity: .8;
}
.screen-grid .sg-pause:is(:hover, :focus-visible) { opacity: 1; }
@media (min-width: 901px) { #case-content .case-image.screen-grid { grid-template-rows: auto auto; align-self: start; } } /* the bento keeps its own height */
/* Display formats in the image grid: a row of three illustrated tiles under the photos, the same gap and radius,
   each named in its tooltip and label for screen readers. */
#case-content .case-image .ff-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#case-content .case-image .ff-tile { position: relative; margin: 0; }
#case-content .case-image .ff-tile .ff-art { border-radius: 8px; aspect-ratio: 480 / 300; }
@media (min-width: 901px) { #case-content .case-image:has(.ff-tiles) { grid-template-rows: auto minmax(0, 1fr) auto; } }
/* Experience: once the mountain is parked under the layers, it is softened on its own canvas instead of through a
   backdrop blur that re-filtered the whole see-through stack on every frame and every scroll step, which made the
   layers' transparency stutter. */
.mountain-stage.is-parked canvas.mountain-field { filter: blur(3px); }
html:has(.mountain-stage.is-parked) .strata-blur { display: none; }
/* About, "What sets me apart": the same air above the three points (from the hero's last line) as below them (to the
   next section's kicker), so the section sits balanced between the two. */
.about-page { --edge-gap: clamp(64px, 9vw, 128px); }
.ab-hero+.ab-edge { padding-top: calc(var(--edge-gap) - clamp(24px, 3vw, 40px)) !important; }
.ab-edge+.ab-route { padding-top: var(--edge-gap); }
@media (max-width: 760px) { .ab-hero+.ab-edge { padding-top: calc(var(--edge-gap) - 8px) !important; } } /* phones: the hero's figure and caption end 8px above its foot */
/* More Work, four across on wide screens, its thumbnails the same height as Selected Work's: the photo's crop window
   (the box less its bleed) takes Selected Work's image height, worked out from the shared column width. */
@media (min-width: 1180px) {
  #more-grid:not(.is-list) { grid-template-columns: repeat(4, minmax(0, 1fr)); container-type: inline-size; }
  #more-grid:not(.is-list) .mini-project .mini-photo { aspect-ratio: auto; height: calc((100cqw - 72px) / 3 / var(--card-ratio-featured) + var(--photo-out) + .25 * var(--card-grow)); }
}
@media (min-width: 801px) and (max-width: 1179px) {
  #more-grid:not(.is-list) { container-type: inline-size; }
  #more-grid:not(.is-list) .mini-project .mini-photo { aspect-ratio: auto; height: calc((100cqw - 44px) / 2 / var(--card-ratio-featured) + var(--photo-out) + .25 * var(--card-grow)); }
}
/* ======================================================================
   Buttons, consolidated: every call-to-action pill on the site (home hero, the Experience call to action, the
   Experience hero, About, Contact) shares one size and one type setting, whether solid or outlined: 48px tall,
   15px semibold, 22px each side, a 16px icon set 10px off the label. Phones step down together to 44px. Colours,
   hovers and the style variants stay with each button.
   ====================================================================== */
:is(.hero-work-button, .hero-all-work, .experience-cta-link, .about-btn, .contact-btn) {
  box-sizing: border-box; min-height: 48px !important; padding: 0 22px !important; gap: 10px !important;
  font-size: 15px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: -.005em; align-items: center;
}
:is(.hero-work-button, .hero-all-work) .hero-work-label { font-size: inherit !important; font-weight: inherit !important; }
:is(.hero-work-button, .hero-all-work, .experience-cta-link, .contact-btn) > svg,
.experience-cta-link span svg, .hero-work-arrow svg { width: 16px !important; height: 16px !important; }
/* The Experience call to action's arrow loses its circle, so it reads like every other button's. */
.experience-cta-link span { width: auto !important; height: auto !important; background: none !important; border-radius: 0 !important; }
.about-btn span { margin-left: 0 !important; font-size: 16px; }
.about-btn--solid { box-shadow: none !important; } /* no shadow under one button and not the others */
@media (max-width: 560px) {
  :is(.hero-work-button, .hero-all-work, .experience-cta-link, .about-btn, .contact-btn) { min-height: 44px !important; padding: 0 18px !important; font-size: 14px !important; gap: 8px !important; }
}
/* Cover flow, smoother: each card keeps its own layer while it moves, and only the cards near the middle carry the
   floor reflection (reflecting all of them every frame made flipping stutter). */
.flow-stage .cf-card { will-change: transform; }
.flow-stage .cf-card:not(.is-near) { -webkit-box-reflect: unset; }
/* Cover flow: cards wait unseen until the carousel scrolls into view, then rise in (home.js, arrive()). */
@media (prefers-reduced-motion: no-preference) { .flow-stage .cf-card[style*="--pre"] { opacity: 0 !important; } }

/* card pictograms: strokes drawn at true size (2px, 1px detail) whatever the icon scale, matching the About edge icons */
.impact-glyph * { vector-effect: non-scaling-stroke; }
/* fanned deck: bigger cards with more room around their content */
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(n) { padding: clamp(20px, 2.8vh, 28px) clamp(20px, 1.7vw, 26px) clamp(18px, 2.4vh, 24px); border-radius: 14px; }
@media (min-width: 1101px) { html[data-cards=k4d] .impact-grid { --fan-w: clamp(230px, min(19vw, 38vh), 290px); --fan-r: calc(var(--fan-w) * 4.9); } }
/* fanned deck: a card that has been drawn keeps its finished pictogram when it falls back into the hand */
html[data-cards=k4d] .impact-card[data-played]:not([data-drawn]) .impact-glyph * { animation: none !important; }
/* About story title: "inspires" is lit from behind rather than tinted pink; the word stays the headline's white, warmed
   where the light behind it comes through, with a faint halo, and the volumetric shafts (title-rays.js) carry the effect */
html .curio-story .curio-intro h2 em, html[data-variant] .curio-story .curio-intro h2 em { color: #fff !important;
  background: radial-gradient(60% 120% at 50% 85%, #fff4e6 0%, #ffffff 55%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent;
  text-shadow: none !important; filter: drop-shadow(0 0 14px rgb(255 232 214 / .32)) drop-shadow(0 0 2px rgb(255 248 240 / .5)); }

/* Results take switch (localhost/preview only): a compact pill fixed at the top right, opening the full list */
.impact-styles { position: fixed; top: 92px; right: 16px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: calc(100vw - 32px); font-size: .75rem; }
.impact-styles-toggle { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--muted); font: inherit; font-weight: 700; letter-spacing: .04em; cursor: pointer; box-shadow: 0 6px 18px -10px rgb(34 28 46 / .4); }
.impact-styles-toggle:hover, .impact-styles-toggle[aria-expanded=true] { color: var(--ink); }
.impact-styles-panel { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; width: min(560px, calc(100vw - 32px)); padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); box-shadow: 0 18px 40px -18px rgb(34 28 46 / .45); }
.impact-styles-panel[hidden] { display: none; }
html .impact-styles .impact-switch, html .impact-styles .impact-subswitch { position: static; flex-wrap: wrap; justify-content: flex-end; width: auto; max-width: 100%; margin: 0; border: 0; border-radius: 0; background: none; }
html .impact-styles .impact-switch > span { display: none; }
html .impact-styles .impact-switch button { padding: 5px 9px; }
@media (max-width: 760px) { .impact-styles { top: 84px; } .impact-styles-panel { max-height: 60vh; overflow-y: auto; } }
/* fanned deck, ?cam=even: the same camera move with its travel spread evenly over the whole 2.1s */
html.cam-even.impact-live[data-cards=k4d] .impact-grid.is-dealt { animation: k4d-cam 2.1s cubic-bezier(.45,.05,.25,1) both; }

/* the fanned deck's lens: a fixed strong perspective on the section while the camera orbits in */

html.impact-live[data-cards=k4d] .impact-grid.is-dealt { transform-style: flat; backface-visibility: hidden; }
/* fanned deck composition: a tighter, more even hand that sits inside the content width, closer under the heading */
@media (min-width: 1101px) {
  html[data-cards=k4d] .impact-grid { --fan-w: clamp(220px, min(16.5vw, 34vh), 262px); --fan-r: calc(var(--fan-w) * 6.8); --fan-step: 5.3deg; --fan-top: calc(var(--fan-lift) + 6px); margin-top: clamp(20px, 4vh, 48px) !important; }
}
/* fanned deck: a drawn card shows its full quote, so its pictogram steps out of the way rather than sitting under the text */
html[data-cards=k4d] .impact-card[data-drawn] .impact-glyph { opacity: 0 !important; transform: scale(.85); transition: opacity .25s ease, transform .3s ease; }

/* Results: more air between the header and the headline */
html[data-cards=k4d] .results-page .impact > .section-heading { padding-top: clamp(64px, 9vh, 104px) !important; }

html[data-cards=k4d] .impact-grid::after { content: none !important; display: none !important; }
/* fanned deck: the card's arrow becomes a filled accent circle when the card is drawn or focused, so the link is obvious */
html[data-cards=k4d] .impact-card .impact-src > span[aria-hidden] { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; margin-left: auto; border-radius: 50%; line-height: 1; font-size: 13px;
  color: var(--accent); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); transition: background .25s ease, color .25s ease, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
html[data-cards=k4d] .impact-card:is([data-drawn], :hover, :focus-visible) .impact-src > span[aria-hidden] { background: var(--accent); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 40%, transparent); transform: scale(1.12); }
html[data-cards=k4d] .impact-card .impact-src { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* fanned deck: the drawn card magnified a little above the rest of the hand */
html[data-cards=k4d] .impact-grid > .impact-card[data-drawn]:nth-child(n) { --s: 1.14; }
/* fanned deck: the link button sits in the card's top-right corner (the fanned cards are placed absolutely; on narrower
   screens the hand is a rail and the cards stay in the flow, positioned relative, see the max-width: 1100px rules) */
@media (min-width: 1101px) { html[data-cards=k4d] .impact-grid > .impact-card:nth-child(n) { position: absolute; } }
html[data-cards=k4d] .impact-card .impact-src > span[aria-hidden] { position: absolute; top: 22px; right: 22px; margin: 0; }
html[data-cards=k4d] .impact-card .impact-big { padding-right: 34px; }
/* the arrow drawn as a centred vector (the ↗ glyph's own metrics sit it off centre) */
html[data-cards=k4d] .impact-card .impact-src > span[aria-hidden] { font-size: 0; color: transparent; }
html[data-cards=k4d] .impact-card .impact-src > span[aria-hidden]::before { content: ""; width: 15px; height: 15px; background: var(--accent); transition: background .25s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5l7-7M5.75 4.5h5.75v5.75'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5l7-7M5.75 4.5h5.75v5.75'/%3E%3C/svg%3E") center / contain no-repeat; }
html[data-cards=k4d] .impact-card:is([data-drawn], :hover, :focus-visible) .impact-src > span[aria-hidden]::before { background: #fff; }
/* fanned deck: bigger cards, a smaller pictogram that stays visible when the card is drawn (the quote and icon each keep their own space) */
@media (min-width: 1101px) {
  html[data-cards=k4d] .impact-grid { --fan-w: clamp(236px, min(18.5vw, 40vh), 290px); --fan-h: calc(var(--fan-w) * 1.28); --fan-r: calc(var(--fan-w) * 7.2); --fan-step: 4deg; --fan-aside: 1deg; } /* wide enough for every card's text, not much taller */
  html[data-cards=k4d] .impact-glyph { width: clamp(40px, 3.3vw, 48px); bottom: clamp(40px, 5.2vh, 50px); }
}
html[data-cards=k4d] .impact-card[data-drawn] .impact-glyph { opacity: 1 !important; transform: none; }
html[data-cards=k4d] .impact-card[data-drawn] .impact-text { padding-bottom: 56px; }
/* the arrow pinned to the exact centre of its circle (the hidden glyph was taking a second grid row and pushing it up) */
html[data-cards=k4d] .impact-card .impact-src > span[aria-hidden]::before { position: absolute; left: 50%; top: 50%; margin: -7.5px 0 0 -8.5px; } /* nudged a pixel down and left so the arrowhead sits optically centred */

/* fanned deck with eight results: the hand re-centred so the middle falls between the fourth and fifth cards */
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(1) { --fi: -3.5; }
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(2) { --fi: -2.5; }
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(3) { --fi: -1.5; }
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(4) { --fi: -0.5; }
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(5) { --fi: 0.5; }
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(6) { --fi: 1.5; }
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(7) { --fi: 2.5; }
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(8) { --fi: 3.5; }
/* Results: headline and fan set a little higher */
html[data-cards=k4d] .results-page .impact > .section-heading { padding-top: clamp(36px, 5vh, 64px) !important; }

/* fanned deck with nine results */
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(1) { --fi: -4; }
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(2) { --fi: -3; }
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(3) { --fi: -2; }
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(4) { --fi: -1; }
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(5) { --fi: 0; }
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(6) { --fi: 1; }
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(7) { --fi: 2; }
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(8) { --fi: 3; }
html[data-cards=k4d] .impact-grid > .impact-card:nth-child(9) { --fi: 4; }
@media (min-width: 1101px) { html[data-cards=k4d] .impact-grid { --fan-step: 3.5deg; } }

/* fanned deck: pictograms animate once, as the hand is revealed, never again on hover */
html[data-cards=k4d] .impact-card[data-drawn] .impact-glyph *, html[data-cards=k4d] .impact-card[data-played] .impact-glyph * { animation: none !important; }
/* fanned deck: the drawn card's immediate neighbours step well aside so they are never hidden behind it */
@media (min-width: 1101px) {
  html[data-cards=k4d] .impact-grid:has(.impact-card[data-drawn]) { --fan-step: 2.6deg; --fan-aside: 5.2deg; } /* the rest close up a little and open a wide gap round the drawn card, so none is hidden */
  html[data-cards=k4d] .impact-grid > .impact-card[data-drawn]:nth-child(n) { --s: 1.08; }
}
/* fanned deck: the pictograms start drawing while the hand is still flying in, not after it lands */
html.impact-live[data-cards=k4d] .impact-grid > .impact-card.is-in:nth-child(n) { --gd: calc(.25s + var(--i) * .04s); }
/* fanned deck: the pictogram sits on the card's text edge, the same inset as the copy and the source line */
@media (min-width: 1101px) {
  html[data-cards=k4d] .impact-grid > .impact-card .impact-glyph { left: clamp(20px, 1.7vw, 26px); bottom: clamp(48px, 6vh, 58px); }
}

/* About hero, big layout: copy above the figure, the caption small and left under the button */
.ab-hero .ab-hero-copy { position: relative; z-index: 2; }
.ab-pst-label.is-under { text-align: left !important; max-width: 22em !important; font-size: .95rem !important; font-weight: 600 !important; letter-spacing: .01em !important; color: var(--muted) !important; }
.ab-pst-label.is-under::after { margin: .5em 0 0 !important; }

/* About hero, big layout: the caption centred under the figure as a small, tracked label */
.ab-pst-label.is-foot { font-size: .82rem !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--muted) !important; max-width: none !important; white-space: nowrap; }
.ab-pst-label.is-foot::after { display: none !important; }
/* About hero copy: one rhythm, kicker to headline, headline to intro and intro to button each about the same optical gap */
.ab-hero-copy > .about-lead { margin-top: 26px !important; }
.ab-hero-copy > .about-actions { margin-top: 22px !important; }
/* Results: the Matterhorn's summit, close and faint behind the headline and the fanned deck (mountain-field.js, the
   Experience hero's own renderer). It sits under the particle field and fades out at every edge into the page. */
.summit-stage { position: absolute; z-index: -2; left: 0; right: 0; top: 0; height: min(92vh, 860px); pointer-events: none; opacity: .7; view-transition-name: summit;
  -webkit-mask-image: radial-gradient(44% 80% at 50% 26%, #000 35%, transparent 100%); mask-image: radial-gradient(44% 80% at 50% 26%, #000 35%, transparent 100%); }
.summit-stage canvas { display: block; width: 100%; height: 100%; }
html[data-variant=nocturne] .summit-stage { opacity: .62; }
/* Arriving from Experience: the Experience hero's range cross-fades into this stage, the camera flies up, and the
   headline and deck rise in as it reaches the summit. */
@view-transition { navigation: auto; }
.mountain-stage { view-transition-name: summit; }
/* One camera across Experience and Results: the mountain is never cross-faded or scaled. The old page's last frame holds
   until the new page has drawn the same frame underneath it (mountain-field.js, FROM), then lets go. */
::view-transition-group(summit) { animation: none; }
::view-transition-new(summit) { animation: none; }
::view-transition-old(summit) { animation: summit-hold .45s linear both; }
@keyframes summit-hold { 0%, 45% { opacity: 1; } to { opacity: 0; } }
/* A flight from the last page (flight.js, pagereveal) ends at rest on this page's framing: the old page's last frame
   holds, still, until this page has drawn the same frame under it and lets it go. */
html.vt-fly::view-transition-old(summit) { animation: vt-hold 1.6s linear both; }
@keyframes vt-hold { from, to { opacity: 1; } }
/* Through the switch the header and the page's own content ride above the mountain (their own groups, painted after
   the summit's), so the range never covers the type or the cards; they swap without a cross-fade (the content has
   already lifted away on the old page and makes its own entrance on the new one). */
html:is(.vt-out, .vt-fly) body>.nav { view-transition-name: site-nav; }
html:is(.vt-out, .vt-fly) main { view-transition-name: page; }
::view-transition-group(site-nav), ::view-transition-group(page), ::view-transition-new(page) { animation: none; }
/* the header's own old and new pictures cross-fade on the same clock as the page under them (with its group held still they
   would otherwise swap in a single frame, a dark header snapping light over a still dark page, or back) */
::view-transition-old(site-nav), ::view-transition-new(site-nav) { animation-duration: .55s; animation-timing-function: cubic-bezier(.4,0,.2,1); animation-fill-mode: both; } /* both: once faded, the old header stays gone (not back at full strength until the change ends) */
html.vt-fly::view-transition-old(site-nav), html.vt-fly::view-transition-new(site-nav) { animation-duration: .45s; }
html.vt-fly.dusk-cross::view-transition-old(site-nav), html.vt-fly.dusk-cross::view-transition-new(site-nav) { animation-delay: .12s; }
/* Every other page change (home-return.js: Résumé, Contact, project pages and the rest): the header holds and cross-fades,
   the page you're on lifts away whole as the next one rises into place, together, in one quick move */
html.vt-page body>.nav, html.page-in body>.nav { view-transition-name: site-nav; }
html.vt-page main, html.page-in main { view-transition-name: page; }
html.page-in::view-transition-old(page) { animation: vt-page-in .3s cubic-bezier(.3,0,.2,1) both; }
html.page-in::view-transition-new(page) { animation: page-rise .45s cubic-bezier(.2,.7,.2,1) .08s both; }
html.page-in::view-transition-old(root), html.page-in::view-transition-new(root) { animation-duration: .45s; }
html.page-in::view-transition-old(site-nav), html.page-in::view-transition-new(site-nav) { animation-duration: .45s; }
html:not(.vt-fly, .home-in, .work-in)::view-transition-old(summit) { animation: page-summit-out .55s cubic-bezier(.4,0,.2,1) both; } /* any change that isn't a flight (the back button too): a night sky leaving goes on the page's and the header's clock */
html.page-in::view-transition-old(summit) { animation: page-summit-out .45s cubic-bezier(.4,0,.2,1) both; } /* a night sky leaving goes on the header's clock, so the header never turns before the page under it */
@keyframes page-summit-out { to { opacity: 0; } }
@keyframes page-rise { from { opacity: 0; transform: translateY(14px); } }
/* the arriving page's content is held back for its first moments, until its own entrances have taken hold (so nothing shows
   for a frame in its resting place before it makes its entrance), then let in */
html.vt-fly::view-transition-new(page) { animation: vt-page-new .32s linear both; }
@keyframes vt-page-new { 0%, 45% { opacity: 0; } to { opacity: 1; } }
/* In the flight between Experience and Results the rest of the page cross-fades a little slower, so nothing reads as a cut. */
html.vt-fly::view-transition-old(root), html.vt-fly::view-transition-new(root) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(.4,0,.2,1); }
/* Every other page change (no flight, not the way back to Work) eases the whole page across too, header included, so a
   dark night header and sky hand over to a light page (or back) as a soft fade rather than the browser's quick cut. */
html:not(.vt-fly, .home-in)::view-transition-old(root), html:not(.vt-fly, .home-in)::view-transition-new(root) { animation-duration: .55s; animation-timing-function: cubic-bezier(.4,0,.2,1); }
/* Project to project (project-transitions.js): the header holds still while the old page slides out to one side and the
   new one comes in from the other, together, in one quick move */
html.vt-proj body>.nav { view-transition-name: site-nav; }
html.vt-proj main { view-transition-name: page; }
html.vt-proj::view-transition-old(page) { animation: proj-out .42s cubic-bezier(.4,0,.2,1) both; }
html.vt-proj::view-transition-new(page) { animation: proj-in .5s cubic-bezier(.2,.7,.2,1) .04s both; }
html.vt-proj[data-proj-dir=prev]::view-transition-old(page) { animation-name: proj-out-prev; }
html.vt-proj[data-proj-dir=prev]::view-transition-new(page) { animation-name: proj-in-prev; }
@keyframes proj-out { to { opacity: 0; transform: translateX(-40px); } }
@keyframes proj-in { from { opacity: 0; transform: translateX(48px); } }
@keyframes proj-out-prev { to { opacity: 0; transform: translateX(40px); } }
@keyframes proj-in-prev { from { opacity: 0; transform: translateX(-48px); } }
/* Project to project (pagination): project-transitions.js fades the content and footer out before leaving and in on
   arrival, so the page itself switches without a cross-fade (a dark footer ghosting over the light page read as choppy). */
html.vt-project::view-transition-old(root), html.vt-project::view-transition-new(root) { animation: none; }
/* Leaving by the flight (mountain-field.js adds .vt-out on the click): the page switches at once and the old page's
   content (its last frame) fades away with a small drift as the new page's camera sets off. */
html.vt-fly::view-transition-old(page) { animation: vt-page-in .3s cubic-bezier(.3,0,.2,1) both; }
/* between a light page and a dark one (About and the night pages), the content clears first, quickly, and only then does the
   page turn: the new page's ground comes up a beat later, so the content never greys over as it goes */
html.vt-fly.dusk-cross::view-transition-old(page) { animation-duration: .2s; animation-timing-function: cubic-bezier(.2,0,.2,1); }
html.vt-fly.dusk-cross::view-transition-new(root) { animation-delay: .12s; }
html.vt-fly.dusk-cross::view-transition-old(root) { animation-delay: .12s; }
html.vt-fly.summit-back::view-transition-old(page) { animation-name: vt-page-out; }
@keyframes vt-page-in { to { opacity: 0; transform: translateY(-16px); } } /* the copy leaves whole: a short lift and fade */
@keyframes vt-page-out { to { opacity: 0; transform: translateY(12px) scale(.97); } }
/* Into Results, Experience's layers sink away down out of the frame as the camera climbs, rather than fading with the copy */
html.vt-out .strata { view-transition-name: strata-out; }
::view-transition-group(strata-out) { animation: none; }
::view-transition-old(strata-out) { animation: vt-strata-down .5s cubic-bezier(.35,0,.25,1) both; } /* moving from the first frame, with the copy */
@keyframes vt-strata-down { to { transform: translateY(105vh); } }
/* ...and leaving Results, the hand of cards slides down off the screen the same way */
html.vt-out .results-page .impact-grid { view-transition-name: cards-out; }
::view-transition-group(cards-out) { animation: none; }
::view-transition-old(cards-out) { animation: vt-strata-down 0.413s cubic-bezier(.5,0,.25,1) both; }
/* ...while its headline shrinks away into the summit with the camera (mountain-field.js animates it, on the flight's clock) */
html.vt-out .results-page .impact .section-heading { view-transition-name: head-out; }
::view-transition-group(head-out), ::view-transition-old(head-out) { animation: none; }
html:has(.summit-tip)::view-transition-old(head-out) { animation: head-fade-up .24s ease-out both; } /* into About: Results' headline simply fades as the camera sets off (it used to tip back and fall away, and when .vt-fly came too late it lingered over About's own) */
@keyframes head-fade-up { to { opacity: 0; transform: translateY(-12px); } }
html.vt-fly:has(.summit-tip)::view-transition-old(head-out) { animation: head-fade-up .24s ease-out both; } /* into About, from the switch itself: Results' headline tips back flat and falls away below as the camera climbs over the peak */
@keyframes head-tip-away { 40% { opacity: .7; transform: perspective(900px) translateY(40px) rotateX(34deg) scale(.96); } to { opacity: 0; transform: perspective(900px) translateY(130px) rotateX(70deg) scale(.88); } } /* into About it tips back about its foot */
/* Back to the Work page from anywhere (home-return.js): the header holds its place, the page you're on settles down and
   away as it fades (no scaling, so no edge of it ever shows), the mountain (on Experience and Results) sinks out of the
   bottom of the frame, and the Work page rises into place over it, its hero's entrance let go at once to arrive with it. */
html.vt-home body>.nav { view-transition-name: site-nav; }
html.home-in body>.nav { view-transition-name: site-nav; } /* the header goes with the page under it: the old one fades as the old page lingers, the Work page's comes in with it */
html.home-in::view-transition-old(site-nav) { animation: work-back-out .2s ease-out both; }
html.home-in::view-transition-new(site-nav) { animation: work-fade-in .42s cubic-bezier(.2,.7,.2,1) .06s both; }
html.home-in::view-transition-old(summit) { animation: home-through .6s cubic-bezier(.4,0,.2,1) both; transform-origin: 62% 32%; }
/* Into the Work page (a link or the back button; not the range's own hand-off from Experience): the last page fades out
   quickly and the Work page rises in whole, instead of lingering, or the two cross-fading over each other. */
html:has(#more-grid):not(.work-in, .vt-fly)::view-transition-old(root) { animation: work-back-out .2s ease-out both; mix-blend-mode: normal; }
html:has(#more-grid):not(.work-in, .vt-fly)::view-transition-new(root) { animation: work-back-in .42s cubic-bezier(.2,.7,.2,1) .06s both; mix-blend-mode: normal; }
@keyframes work-back-out { to { opacity: 0; } }
@keyframes work-back-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes work-fade-in { from { opacity: 0; } }
@keyframes home-sink { to { opacity: 0; transform: translateY(55vh); } }
/* the camera drifts on into the range as it melts into the light of the Work page (in place of sinking away) */
/* ...and from Work to Experience: the Work page lifts into the light and Experience's range comes out of it, drifting
   back into place as it sharpens (home-return.js, .work-in) */
html.vt-work body>.nav { view-transition-name: site-nav; }
html.work-in::view-transition-old(root) { animation: work-lift .35s cubic-bezier(.4,0,.2,1) both; mix-blend-mode: normal; }
html.work-in::view-transition-new(root) { animation: work-new .35s cubic-bezier(.2,.7,.2,1) both; mix-blend-mode: normal; }
html.work-in body>.nav { view-transition-name: site-nav; }
html.work-in::view-transition-old(site-nav), html.work-in::view-transition-new(site-nav) { animation-duration: .22s; } /* by night the page under it goes dark quickly as the Work page lifts away: the header keeps up */ /* the header changes on the page's own clock */
html.work-in.from-work .mountain-stage { opacity: 0; }
html.work-in.from-work.work-go .mountain-stage { opacity: 1; animation: work-out-of-light .8s cubic-bezier(.2,.7,.2,1) both; transform-origin: 62% 32%; }
@keyframes work-lift { to { opacity: 0; transform: translateY(-16px); filter: brightness(1.08); } }
@keyframes work-new { from { opacity: 0; } }
@keyframes work-out-of-light { from { opacity: 0; transform: scale(1.1); filter: blur(6px) brightness(1.15); } }
@keyframes home-through { 35% { filter: blur(1px) brightness(1.04); } to { opacity: 0; transform: scale(1.1); filter: blur(6px) brightness(1.15); } }
/* Results by night: the same night sky as Experience over the top of the page, fading softly into the light page below,
   under a dark header and light type (mountain-field.js adds the stars and moon over this band). */
.mountain-sky.summit-sky { z-index: -3; height: 118vh;
  /* the stars fade out down the page, and also wherever the summit stands: the range fades away softly at the edges of
     its oval (.summit-stage), so the stars are kept out of that same oval, fading in only where the range fades out,
     and never show through it */
  --oval: radial-gradient(44vw calc(min(92vh, 860px) * .8) at 50vw calc(min(92vh, 860px) * .26 + var(--stage-y, 0px)), transparent 35%, #000 100%);
  -webkit-mask-image: linear-gradient(#000 48%, transparent), var(--oval); -webkit-mask-composite: source-in;
          mask-image: linear-gradient(#000 48%, transparent), var(--oval); mask-composite: intersect; }
html[data-tod=night]:has(.results-page) { background-image: linear-gradient(in oklab 180deg, #080a24 0, #121540 30vh, #22205a 52vh, #3d2c6e 66vh, #6a4f93 78vh, #a88cc4 90vh, #dccfe8 104vh, #f6f3f7 116vh); background-size: 100% 116vh; background-repeat: no-repeat; }
/* About by night (.about-tod, set in its head after dark; ?aboutday=1 keeps it by day): the same night sky as Results
   over the top of the page, fading into the light page below, with light type on it, so flights between About, Results
   and Experience stay dark to dark */
html.about-tod body::before { content: ''; position: absolute; z-index: -4; left: 0; right: 0; top: 0; height: calc(var(--about-sky-h, 100vh) + 4px); pointer-events: none; /* the night sky down through the hero, What sets me apart and A connected practice (flight.js measures it), easing at the foot into the story's own night below it, so About by night has no light band at all; on the page itself, not in its content, so it's there from the first frame of a flight in */
  background: linear-gradient(in oklab 180deg, #080a24 0, #0d1033 30vh, #1a1a4e 55vh, #221d55 calc(100% - 90vh), #1d1745 calc(100% - 45vh), #120d19 100%); }
/* What sets me apart by night: light type and icons on the night sky */
html.about-tod .about-page .ab-edge .edge-item h3, html.about-tod[data-variant] .about-page .ab-edge .edge-item h3 { color: #fff !important; }
html.about-tod .about-page .ab-edge .edge-item p, html.about-tod[data-variant] .about-page .ab-edge .edge-item p { color: #d9d1ec !important; }
html.about-tod .about-page .ab-edge .edge-icon { color: #cbbcf0; }
html.about-tod body>.nav::after { background: none !important; } /* the story-edge layer keeps the header light around the story by day; About by night is dark all round it, so it isn't needed */
/* A connected practice by night */
html.about-tod .about-page .ab-route :is(h2, h3), html.about-tod[data-variant] .about-page .ab-route :is(h2, h3) { color: #fff !important; }
html.about-tod .about-page .ab-route h2 em, html.about-tod[data-variant] .about-page .ab-route h2 em { color: #c9b4ff !important; background: linear-gradient(100deg, #e2d4ff 0%, #b79cff 55%, #e7a6e0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html.about-tod .about-page .ab-route :is(.route-copy, .route-era small), html.about-tod[data-variant] .about-page .ab-route :is(.route-copy, .route-era small) { color: #d9d1ec !important; }
html.about-tod .about-page .ab-route .about-kicker, html.about-tod .about-page .ab-route .route-era { color: #ff9fcd !important; }
html.about-tod .about-page .ab-route .about-text-link, html.about-tod[data-variant] .about-page .ab-route .about-text-link { color: #f1ecf7 !important; }
html.about-tod[data-variant] .about-page .ab-hero .about-kicker, html.about-tod .about-page .ab-hero .about-kicker { color: #ff9fcd !important; }
html.about-tod[data-variant] .about-page .ab-hero h1, html.about-tod .about-page .ab-hero h1 { color: #fff !important; text-shadow: 0 2px 28px rgb(8 10 36 / .5); }
html.about-tod[data-variant] .about-page .ab-hero h1 em, html.about-tod .about-page .ab-hero h1 em { color: #c9b4ff !important; background: linear-gradient(100deg, #e2d4ff 0%, #b79cff 55%, #e7a6e0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; }
html.about-tod[data-variant] .about-page .ab-hero .about-lead, html.about-tod .about-page .ab-hero p.about-lead { color: #e8e1f8 !important; } /* above every style's own, so it reads on the night sky whatever style is chosen */
html.about-tod[data-variant] .about-page .ab-hero .about-actions a.about-btn--solid, html.about-tod .about-page .ab-hero .about-actions a.about-btn--solid { background: #f3ecff !important; border-color: #f3ecff !important; color: #2a1a4e !important; box-shadow: 0 0 0 1px rgb(255 255 255 / .5), 0 6px 24px rgb(183 156 255 / .28) !important; }
html.about-tod[data-variant] .about-page .ab-hero .about-actions a.about-btn--solid:hover, html.about-tod .about-page .ab-hero .about-actions a.about-btn--solid:hover { background: #fff !important; }
html.about-tod .mountain-sky.summit-sky { --oval: radial-gradient(19vw 32vh at 20vw calc(var(--stage-y, 0px) + min(92vh, 860px) * .64 + 12vh), transparent 45%, #000 100%); } /* the stars kept off About's peak */
.mountain-sky.summit-sky .sky-fill { background: none; } /* the band itself is the page's own background, there from the first paint */
html[data-tod=night] .summit-stage { opacity: 1; } /* by night the range stands solid against the sky, as on Experience, and hides the moon when it's behind it */
html[data-tod=night] .results-page #impact-title { color: #fff; text-shadow: 0 2px 28px rgb(8 10 36 / .55); }
html[data-tod=night] .results-page #impact-title { background: linear-gradient(100deg, #fff 0%, #fff 30%, #e2d4ff 55%, #b79cff 78%, #e7a6e0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; } /* by night, the moonlit gradient of Experience's and About's headlines */
html[data-tod=night] .results-page .impact-sub { color: #f1ecfd; text-shadow: 0 1px 14px rgb(8 10 36 / .7); }
/* ...and a soft dark scrim behind the heading, under the type and over the moonlit peak, feathered out to nothing. */
html[data-tod=night] .results-page .impact .section-heading { position: relative; }
html[data-tod=night] .results-page .impact .section-heading::before { content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; width: min(1240px, 100vw); height: 380px; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(9 10 34 / .66), rgb(9 10 34 / .46) 45%, rgb(9 10 34 / .18) 75%, transparent); }
@property --ms { syntax: '<number>'; inherits: false; initial-value: 1; }
.summit-stage { height: calc(100vh + var(--stage-y, 0px)); } /* full width from the top of the page (mountain-field.js moves it out of the column) */
.summit-stage, .mountain-stage.is-arriving { --mh: min(92vh, 860px);
  -webkit-mask-image: radial-gradient(var(--rx, calc(44vw * var(--ms))) var(--ry, calc(var(--mh) * .8 * var(--ms))) at var(--mx, 50vw) var(--my, calc(var(--mh) * .26 + var(--stage-y, 0px))), #000 var(--m0, 35%), transparent 100%);
  mask-image: radial-gradient(var(--rx, calc(44vw * var(--ms))) var(--ry, calc(var(--mh) * .8 * var(--ms))) at var(--mx, 50vw) var(--my, calc(var(--mh) * .26 + var(--stage-y, 0px))), #000 var(--m0, 35%), transparent 100%); } /* --mx etc.: set only mid-flight to and from About's tip */
.mountain-stage.is-arriving { --ms: 1; }
.mountain-stage.is-arriving .mountain-sky { transition: none; }
.summit-stage .mountain-sky::after { transition: opacity 1s ease; }
.summit-stage.is-arriving .mountain-sky::after { opacity: 0; } /* the veil behind the headline comes in once the camera lands */
html.summit-fly .impact .section-heading { perspective: 900px; }
html.summit-fly #impact-title, html.summit-fly .impact-sub { animation: summit-rise 1.5s cubic-bezier(.2,.75,.2,1) 1.1s both; transform-origin: 50% 100%; }
html.summit-fly .impact-sub { animation-delay: 1.45s; }
@keyframes summit-rise { from { opacity: 0; filter: blur(6px); transform: translateY(70px) translateZ(-320px) rotateX(38deg); } }
@keyframes summit-deal { from { opacity: 0; transform: translateY(40px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
@media (max-width: 640px) { .summit-stage { display: none; } }
/* Flown in from Results: About's hero comes up as the camera settles on the tip, over the flight's second half */
html.vt-fly:has(.summit-tip)::view-transition-new(page) { animation: vt-page-new .3s linear both; } /* About makes its own entrance over the flight (about-hero.css, html.flown), so its page only waits out the switch */
@keyframes tip-page-in { 0%, 40% { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* About: just the summit's tip, faint behind the headline (mountain-field.js, TIP), in its own soft oval round the tip */
.summit-stage.summit-tip { opacity: .78; --tip-y: calc(var(--stage-y, 0px) + min(92vh, 860px) * .64);
  height: calc(190vh + var(--stage-y, 0px)); /* the range carries on down behind "What sets me apart", faintly; taller than the tail's fade, so the stage's own edge never shows */
  --tail: radial-gradient(64vw 70vh at 38vw calc(var(--tip-y) + 60vh), rgb(0 0 0 / calc(.4 * var(--tail-k, 1))) 0%, rgb(0 0 0 / calc(.28 * var(--tail-k, 1))) 45%, rgb(0 0 0 / calc(.12 * var(--tail-k, 1))) 75%, transparent 100%); /* carries on faintly behind the columns' text and a little below them */
  -webkit-mask-image: radial-gradient(var(--rx, 19vw) var(--ry, 32vh) at var(--mx, 20vw) var(--my, calc(var(--tip-y) + 12vh)), #000 var(--m0, 45%), transparent 100%), var(--tail);
          mask-image: radial-gradient(var(--rx, 19vw) var(--ry, 32vh) at var(--mx, 20vw) var(--my, calc(var(--tip-y) + 12vh)), #000 var(--m0, 45%), transparent 100%), var(--tail); }
/* case mosaic with three tiles: one tall tile beside two stacked, the block given its own proportion so the columns
   always end level (outside the specs row there is no height to stretch to) */
@media (min-width:901px) {
  #case-content .case-mosaic[data-count="3"] { aspect-ratio: 16 / 10; grid-template-rows: minmax(0,1fr) minmax(0,1fr); }
  #case-content .case-mosaic[data-count="3"] img { width: 100%; height: 100%; object-fit: cover; }
}
/* summit fly: the headline hangs in 3D just in front of the summit and the camera flies toward it with the mountain,
   so it grows out of the distance (no slide); the intro line sits a touch nearer and arrives a beat later */
html.summit-fly .impact .section-heading { perspective: 1000px; perspective-origin: 50% 40%; }
html.summit-fly #impact-title { animation: summit-approach 1.4s cubic-bezier(.25,.6,.2,1) .5s both; transform-origin: 50% 60%; }
html.summit-fly .impact-sub { animation: summit-approach 1.4s cubic-bezier(.25,.6,.2,1) .65s both; transform-origin: 50% 0; }
@keyframes summit-approach {
  from { opacity: 0; filter: blur(4px); transform: perspective(1000px) translate3d(0, -30px, -1800px); }
  35% { opacity: 1; filter: blur(1px); }
  to { opacity: 1; filter: none; transform: perspective(1000px) translate3d(0, 0, 0); } }
/* Results: the summit takes Experience's hour (mountain-field.js). After dark its night sky and moon sit faint behind
   the peak, under the stage's own fade, with a soft veil of page colour behind the headline so the type stays legible. */
.summit-stage canvas { position: relative; }
.summit-stage .mountain-sky { height: 100%; }
.summit-stage .mountain-sky .sky-fill { height: 100%; }
.summit-stage .mountain-sky::after { content: ''; position: absolute; inset: 0; background: radial-gradient(38% 20% at 50% 30%, rgb(246 243 247 / .7), transparent 100%); }
/* Results headline set like every other page title (contact, home, about): same size, leading and tracking */
html .results-page #impact-title { font-size: clamp(2.6rem, 4.2vw, 3.75rem) !important; line-height: 1.03 !important; letter-spacing: -.045em !important; max-width: none; }
html .results-page .impact-sub { font-size: 1.08rem !important; }
/* Flown in from Experience: as the camera lands, the headline and its line rise softly into place, then the hand is
   dealt, one easing throughout and only opacity and movement (no blur or tilt), so it all reads as one calm arrival. */
html.summit-fly #impact-title, html.summit-fly .impact-sub { animation: summit-soft .9s cubic-bezier(.2,.7,.2,1) .25s both; }
html.summit-fly .impact-sub { animation-delay: .31s; }
html.summit-fly .results-page .impact .section-heading::before { animation: summit-soft-fade .9s cubic-bezier(.2,.7,.2,1) .25s both; }
html.summit-fly.impact-live[data-cards=k4d] .impact-grid.is-dealt { animation: k4d-cam 1.8s cubic-bezier(.2,.7,.1,1) .37s both; } /* the hand's own camera move */
html.summit-fly.impact-live[data-cards=k4d] .impact-grid > .impact-card.is-in:nth-child(n) { --gd: calc(1.15s + var(--i) * .04s); animation-delay: calc(.37s + var(--i) * .04s); }
html.summit-fly.impact-live[data-cards=k4d] .impact-grid.is-dealt::after { animation-delay: 1.5s; }
/* by the flight, the camera takes .75s to land (FLIGHT_IN): the headline and the hand come in over its last stretch, landing with it */
html.flown.summit-fly .results-page .impact .section-heading::before { animation-delay: 0.307s; }
/* the headline itself rides the camera's zoom from the summit (mountain-field.js, headEl); this is only its fallback */
html.flown.summit-fly #impact-title { animation-delay: .16s; }
html.flown.summit-fly .impact-sub { animation-delay: .22s; }
html.flown.summit-fly.impact-live[data-cards=k4d] .impact-grid.is-dealt { animation-duration: 0.675s; animation-delay: 0.24s; }
html.flown.summit-fly.impact-live[data-cards=k4d] .impact-grid > .impact-card.is-in:nth-child(n) { --gd: calc(0.547s + var(--i) * 0.019s); animation-delay: calc(0.262s + var(--i) * 0.019s); }
html.flown.summit-fly.impact-live[data-cards=k4d] .impact-grid.is-dealt::after { animation-delay: 0.675s; }
/* By night Experience's sky is a deep gradient to the bottom of the screen, where Results' page grades up to light: so a
   flight arriving here opens on Experience's own sky, and the page's colours come up from under it once it has landed. */
html.flown[data-tod=night] body:has(.results-page)::before { content: ''; position: fixed; inset: 0; z-index: -4; pointer-events: none;
  background: linear-gradient(180deg, #080a24 0%, #121540 30%, #22205a 56%, #3a2a6c 80%, #573a80 100%) 0 0 / 100% 110vh no-repeat, #573a80;
  animation: summit-unveil .68s cubic-bezier(.4,0,.2,1) .51s forwards; }
@keyframes summit-unveil { to { opacity: 0; } }
/* ...and the other way: Experience's page opens on its sky's gradient, under its sky as that fades in. */
html.flown.night-early:has(.mountain-stage) { background: linear-gradient(180deg, #080a24 0%, #121540 30%, #22205a 56%, #3a2a6c 80%, #573a80 100%) 0 0 / 100% 110vh no-repeat fixed, #573a80; }
@keyframes summit-soft { from { opacity: 0; transform: translateY(16px); } }
@keyframes summit-soft-fade { from { opacity: 0; } }
html.summit-fly .contact-wave { animation: summit-glow 1.6s ease-in-out 2.9s both; }
@keyframes summit-glow { 0% { filter: brightness(1); } 50% { filter: brightness(1.35) saturate(1.15); } 100% { filter: brightness(1.12); } }
@media (prefers-reduced-motion: reduce) { html.summit-fly .contact-wave { animation: none; } }
/* About: the header turns night along the story's own edge. interests.js sets --night-a and --night-b, the top and bottom
   of the story's dark band within the header; a layer across the header's full width darkens just that part (or, once
   the header has turned night, keeps the rest light), so as the band slides under, the header changes along the same
   line instead of flashing a light bar over the dark or cutting across at once. The text turns at the halfway point. */
html.has-night body>.nav::after { content: ''; position: absolute; inset: 0 -100vmax; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, transparent var(--night-a, 100%), rgb(14 12 30 / .9) var(--night-a, 100%), rgb(14 12 30 / .9) var(--night-b, 100%), transparent var(--night-b, 100%)); }
html.has-night.is-night body>.nav::after {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 94%, transparent) var(--night-a, 0px), transparent var(--night-a, 0px), transparent var(--night-b, 100%), color-mix(in srgb, var(--bg) 94%, transparent) var(--night-b, 100%)); }
html.has-night body>.nav :is(nav>a, .identity-name, .identity-name span, .theme-toggle) { transition-duration: .18s !important; transition-timing-function: cubic-bezier(.4,0,.2,1) !important; }
html.has-night body>.nav, html.has-night[data-variant] body>.nav { transition: color .18s cubic-bezier(.4,0,.2,1) !important; } /* its backing and its bottom line switch at once: at that moment the layer above makes both looks the same, so a fade would only show a grey bar or a bright line */

/* Project gallery preview (project-pages.js): the hovered or tapped small image crossfades over the big one. */
#case-content .mosaic-preview {
  position: absolute;
  z-index: 2;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
#case-content .mosaic-preview.is-on { opacity: 1; }
#case-content .case-image:has(.mosaic-preview) .case-mosaic img { cursor: zoom-in; transition: opacity .25s ease; }
#case-content .case-image .case-mosaic:has(.is-previewing) img:not(.is-previewing) { opacity: .55; }
@media (prefers-reduced-motion: reduce) { #case-content .mosaic-preview, #case-content .case-image:has(.mosaic-preview) .case-mosaic img { transition: none; } }

/* Experience: the closing call on to Results, the home page's close set on a dark band that runs into the footer. As it
   comes into view (a small observer in the page) its eyebrow, headline, line and button rise and fade in whole, in turn. */
main .exp-close { box-sizing: border-box; width: 100%; max-width: none; margin: -100px 0 0; position: relative; z-index: 1; padding: clamp(150px, 14vw, 210px) max(5vw, calc((100% - 1400px) / 2 + 70px)) clamp(64px, 8vw, 104px); border-top: 0; color: #f6f3f7;
  background: linear-gradient(180deg in oklab, rgb(122 92 160 / 0), rgb(122 92 160 / .32) 70px, rgb(84 60 114 / .74) 140px, rgb(58 40 80 / .95) 205px, #30213e 250px); } /* the page fades down into the band, so nothing above is cut: through violet into plum, never grey */
/* ...and the last layer's colour runs on under that fade, so the fade only ever passes over it (no edge where the layer
   stops, and no glimpse of the mountain behind the page). */
.experience-page .strata-ground-layer.stratum-3::before { bottom: -160px; }
/* its own colours on the dark band, held against the style variants' light-page colours (they mark theirs !important) */
html:root .exp-close.experience-cta .eyebrow { color: #f08bbd !important; }
html:root .exp-close.experience-cta h2 { color: #f6f3f7 !important; }
html:root .exp-close.experience-cta h2 em { color: #a99fbd !important; }
html:root .exp-close.experience-cta p:not(.eyebrow) { color: #c9c2d4 !important; }
html:root .exp-close.experience-cta .experience-cta-link { background: #f4eff9 !important; color: #1d1528 !important; }
html:root .exp-close.experience-cta .experience-cta-link:hover, html:root .exp-close.experience-cta .experience-cta-link:focus-visible { background: #fff !important; }
body:has(.exp-close) > footer.portfolio-footer { margin-top: 0; border-top: 1px solid rgb(255 255 255 / .12); } /* a faint hairline parts the close from the footer */
html.exp-anim .exp-close :is(.eyebrow, h2, p:not(.eyebrow), .experience-cta-link) { opacity: 0; translate: 0 24px; transition: opacity .9s ease, translate 1.2s cubic-bezier(.22, 1, .36, 1); }
html.exp-anim .exp-close h2 { transition-delay: 100ms; }
html.exp-anim .exp-close p:not(.eyebrow) { transition-delay: 220ms; }
html.exp-anim .exp-close .experience-cta-link { transition-delay: 340ms; }
html.exp-anim .exp-close.is-in :is(.eyebrow, h2, p:not(.eyebrow), .experience-cta-link) { opacity: 1; translate: 0 0; }

/* Results cards between phone and desktop (761 to 1100px): a grid of cards, three across where they fit, instead of a
   sideways rail that ran off the screen's edge; they rise in place as they arrive. */
@media (min-width: 761px) and (max-width: 1100px) {
  html[data-cards=k4d] .impact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; overflow: visible; scroll-snap-type: none; margin: 0; padding: 10px 0 24px; }
  html[data-cards=k4d] .impact-grid > .impact-card:nth-child(n) { flex: none; width: auto; min-width: 0; }
  html[data-cards=k4d] .impact-grid .impact-card .impact-label:nth-child(n) { padding-right: 58px; } /* clear of the card's icon */
  html.impact-live[data-cards=k4d] .impact-grid > .impact-card:nth-child(n) { transform: translateY(24px); }
  html.impact-live[data-cards=k4d] .impact-grid > .impact-card.is-in:nth-child(n) { transform: none; }
}

/* Results carries an empty copy of Contact's wave box (its script loads only on Contact): hidden, so the footer follows the cards. */
.results-page ~ .contact-wave { display: none; }

/* Results cards up to 1100px: the pictogram owns the top-right corner there, so the link arrow moves to the bottom-right,
   level with the source line (it sat on top of the pictogram) */
@media (max-width: 1100px) {
  html[data-cards=k4d] .impact-card .impact-src > span[aria-hidden] { top: auto; bottom: 14px; right: 14px; }
  html[data-cards=k4d] .impact-card .impact-src { padding-right: 34px; }
  html[data-cards=k4d] .impact-card .impact-big { padding-right: 0; }
}

/* Project gallery preview: the preview stays exactly inside the big image's box (a tile's own sizing made it run past
   the bottom, over the thumbnails beneath) */
#case-content .mosaic-preview { overflow: hidden; }
#case-content .mosaic-preview > * { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; max-height: none; }

/* Results: the small accent label over the title, like the other pages; it comes in with the title after a flight */
html.summit-fly .impact-kicker { animation: summit-soft .9s cubic-bezier(.2,.7,.2,1) .19s both; }
html.flown.summit-fly .impact-kicker { animation-delay: .1s; }
@media (prefers-reduced-motion: reduce) { html.summit-fly .impact-kicker { animation: none; } }

/* Project facts: each icon centred on its label and value, also when the value wraps to two or three lines */
#case-content .case-specs>*>*, #case-content .case-specs .case-facts>div { align-items: center; }

/* Work page: the confidentiality note sits under the Selected work heading, small and quiet */
#work .selected-work-heading .work-note { flex: none; width: 100%; max-width: 62ch; margin: 10px 0 0; font-size: .9rem; line-height: 1.45; color: var(--muted); }

/* Selected Work spec row: every card's row the same height (room for a two-line value), each cell filling it with even
   padding and its icon and words centred, so the rows and the contribution lines below them align across the columns */
#featured .feature .feature-tags { min-height: 80px; align-items: stretch; }
#featured .feature .feature-tags > * { align-self: stretch; align-items: center; padding-top: 12px !important; padding-bottom: 12px !important; }