/* Gui Boller site, styled with Gui Boller Design System v2.2.
   Reads only alias tokens (--surface-*, --text-*, --border-*, --action-*, --link-*, --type-*, --space-*)
   and component tokens (--focus-ring-*, --button-*, --tab-*). Tokens live in ds/tokens/. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--surface-page); color: var(--text-primary);
  font-family: var(--font-body); font-size: var(--type-body-default-size); line-height: var(--type-body-default-line-height);
}
img, video { max-width: 100%; display: block; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }

/* Focus (D1): solid 2px ring, 2px away, keyboard only. Inverse sections swap the ring color. */
:focus { outline: none; }
:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.is-inverse { --focus-ring-color: var(--focus-outline-inverse); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: absolute; left: var(--space-base); top: var(--space-sm); z-index: 30; padding: var(--space-sm) var(--space-base);
  background: var(--surface-card); color: var(--link-color); text-decoration: underline; transform: translateY(-200%);
  min-height: var(--target-min); display: inline-flex; align-items: center;
}
.skip-link:focus-visible { transform: none; }

/* Layout (D9): one column below 40em, nothing scrolls sideways at 320px. */
.wrap { width: 100%; max-width: 80rem; margin: 0 auto; padding-inline: var(--space-gutter); }
.section { padding-block: var(--space-section); }
.section--card { background: var(--surface-card); }
.section--page { background: var(--surface-page); }
.section--inverse { background: var(--surface-inverse); color: var(--text-inverse); }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--space-4xl); align-items: start; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-base) var(--space-3xl); margin-bottom: var(--space-3xl); }

/* Type (D11) */
.t-hero { font-family: var(--font-display); font-size: var(--type-hero-size); font-weight: var(--type-hero-weight); line-height: var(--type-hero-line-height); letter-spacing: var(--type-hero-tracking); }
.t-display { font-family: var(--font-display); font-size: var(--type-display-lg-size); font-weight: var(--type-display-lg-weight); line-height: var(--type-display-lg-line-height); }
.t-section { font-family: var(--font-display); font-size: var(--type-section-size); font-weight: var(--type-section-weight); line-height: var(--type-section-line-height); letter-spacing: var(--type-section-tracking); }
.t-title { font-family: var(--font-display); font-size: var(--type-title-size); font-weight: var(--type-title-weight); line-height: var(--type-title-line-height); }
.t-lead { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line-height); }
.t-sm { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line-height); }
.t-xs { font-size: var(--type-body-xs-size); line-height: var(--type-body-xs-line-height); }
.t-label { font-size: var(--type-label-size); font-weight: var(--type-label-weight); }
.t-overline { font-size: var(--type-body-sm-size); letter-spacing: 0.08em; text-transform: uppercase; }
.muted { color: var(--text-muted); }
.is-inverse .muted, .muted-inverse { color: var(--text-muted-inverse); }
.measure { max-width: 40rem; }
.stack > * + * { margin-top: var(--space-base); }

/* Links (D10): underlined in running text. */
.link { color: var(--link-color); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; border-radius: var(--radius-xs); }
.link:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
.is-inverse .link { color: var(--link-color-inverse); }
.is-inverse .link:hover { color: var(--link-color-inverse); }
.link-target { display: inline-flex; align-items: center; min-height: var(--target-min); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--button-min-height);
  padding: var(--space-md) var(--space-xl); border-radius: var(--button-radius); border: 1px solid transparent;
  font-family: var(--font-body); font-size: var(--type-body-default-size); font-weight: 600; line-height: 1.2; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard), transform var(--motion-duration-transform) var(--motion-ease-standard);
}
.btn:hover { opacity: 0.85; }
.btn:active { transform: scale(var(--motion-press-scale)); }
.btn--primary { background: var(--button-primary-bg); color: var(--button-primary-text); }
.btn--secondary { background: var(--action-secondary-bg); color: var(--action-secondary-text); border-color: var(--button-secondary-border); }
.is-inverse .btn--secondary { background: transparent; color: var(--action-inverse-text); border-color: var(--action-inverse-border); }
.btn--sm { padding: var(--space-sm) var(--space-base); font-size: var(--type-body-sm-size); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-base); }

/* Badge */
.badge {
  display: inline-flex; align-items: center; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); border: 1px solid transparent;
  font-size: var(--type-label-sm-size); font-weight: var(--type-label-sm-weight); letter-spacing: var(--type-label-sm-tracking); text-transform: uppercase;
}
.badge--accent { background: var(--surface-accent); color: var(--action-primary-text); }
.badge--neutral { background: var(--surface-input); color: var(--text-primary); }
.badge--outline { color: var(--text-primary); border-color: var(--border-default); }
.badge-list { display: flex; flex-wrap: wrap; gap: var(--space-sm); list-style: none; }

/* Header */
.site-header { background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); }
.nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-xl); }
.nav-brand { display: inline-flex; align-items: center; min-height: var(--target-min); font-family: var(--font-display); font-weight: 600; font-size: var(--type-title-size); color: var(--text-primary); text-decoration: none; }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-xl); }
.nav-list { display: flex; flex-wrap: wrap; gap: var(--space-base); list-style: none; }
.nav-link {
  display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-xs); white-space: nowrap;
  font-weight: 600; color: var(--text-primary); text-decoration: none;
}
.nav-link:hover { color: var(--link-hover); }
.nav-link[aria-current="page"] { color: var(--tab-selected-color); box-shadow: inset 0 calc(-1 * var(--tab-indicator-width)) 0 var(--border-selected); }
.nav-toggle { display: none; }

/* Segmented control (language) */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--surface-input); border: 1px solid var(--border-default); }
.seg button {
  min-height: calc(var(--target-min) - 6px); min-width: var(--target-min); padding: 0 var(--space-base); border: none; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-muted); font-family: var(--font-body); font-weight: 600; font-size: var(--type-body-sm-size); cursor: pointer;
}
.seg button[aria-checked="true"] { background: var(--surface-card); color: var(--text-primary); box-shadow: 0 0 0 1px var(--border-default); }

@media (max-width: 40em) {
  .nav-toggle { display: inline-flex; }
  .nav-links { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--space-base); }
  .nav.open .nav-links { display: flex; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-list .nav-link { width: 100%; border-top: 1px solid var(--border-subtle); }
  .nav-link[aria-current="page"] { box-shadow: inset var(--tab-indicator-width) 0 0 var(--border-selected); padding-left: var(--space-base); }
  .nav-links .seg { align-self: flex-start; margin: var(--space-base) 0; }
  .nav-links .btn { width: 100%; }
}

/* Hero (inverse) */
.hero { padding-block: var(--space-section) var(--space-4xl); }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--space-3xl-plus); align-items: center; }
.hero .t-overline { color: var(--text-muted-inverse); margin-bottom: var(--space-lg); }
.hero .t-lead { max-width: 32rem; margin-top: var(--space-xl); }
.hero .btn-row { margin-top: var(--space-3xl); }
.hero-facts { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin-top: var(--space-3xl); list-style: none; color: var(--text-muted-inverse); }
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.mosaic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); background: var(--surface-placeholder); }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xl) var(--space-3xl); margin-top: var(--space-4xl); padding-top: var(--space-xl); border-top: 1px solid var(--border-inverse-subtle); list-style: none; }
.logo-row img { height: 1.75rem; width: auto; }

/* Card (DS Card) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--space-3xl); list-style: none; }
.card { position: relative; background: var(--surface-card); border-radius: var(--radius-lg); transition: transform var(--motion-duration-transform) var(--motion-ease-standard); }
.card:hover { transform: translateY(var(--motion-lift)); }
.card:focus-within { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.card__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; background: var(--surface-placeholder); }
.card__media :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--space-base) var(--space-xs); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__title a:focus-visible { outline: none; }
.card:hover .card__title a { text-decoration: underline; }
.card__meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); list-style: none; }
.card__desc { margin-top: var(--space-sm); }

/* Accordion */
.acc { border-top: 1px solid var(--border-subtle); }
.acc__item { border-bottom: 1px solid var(--border-subtle); }
.acc__btn {
  display: flex; width: 100%; justify-content: space-between; align-items: center; gap: var(--space-base); min-height: var(--target-min);
  padding: var(--space-lg) 0; border: none; background: none; color: var(--text-primary); text-align: left; cursor: pointer;
  font-family: var(--font-display); font-size: var(--type-title-size); font-weight: var(--type-title-weight); line-height: var(--type-title-line-height);
}
.acc__icon { font-size: var(--type-title-size); transition: transform var(--motion-duration-transform) var(--motion-ease-standard); }
.acc__btn[aria-expanded="true"] .acc__icon { transform: rotate(45deg); }
.acc__panel { padding: 0 0 var(--space-lg); color: var(--text-muted); }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-3xl); list-style: none; }
.stats li { border-top: 1px solid var(--border-subtle); padding-top: var(--space-lg); }
.stat__num { display: block; font-family: var(--font-display); font-size: var(--type-display-lg-size); font-weight: var(--type-display-lg-weight); line-height: var(--type-display-lg-line-height); }
.stat__label { display: block; margin-top: var(--space-sm); color: var(--text-muted); max-width: 22rem; }

/* Carousel (DS Carousel) */
.carousel { margin-top: var(--space-4xl); }
.carousel__slide { min-height: 12rem; }
.carousel__quote { font-family: var(--font-display); font-size: var(--type-section-size); font-weight: var(--type-section-weight); line-height: var(--type-section-line-height); letter-spacing: var(--type-section-tracking); max-width: 48rem; }
.carousel__quote.is-long { font-family: var(--font-body); font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line-height); font-weight: 400; letter-spacing: 0; }
.carousel__who { margin-top: var(--space-xl); }
.carousel__controls { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-xl); }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: var(--target-min); height: var(--target-min); border-radius: var(--radius-full);
  border: 1px solid var(--button-secondary-border); background: var(--action-secondary-bg); color: var(--action-secondary-text); font-size: 1.125rem; cursor: pointer;
  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
}
.icon-btn:hover { opacity: 0.85; }

/* Lists of links (writing, projects) */
.row-list { list-style: none; border-top: 1px solid var(--border-subtle); }
.row-list > li { border-bottom: 1px solid var(--border-subtle); }
.row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-xl); padding: var(--space-xl) 0; }
.row__title a { color: var(--text-primary); text-decoration: none; }
.row__title a::after { content: ""; position: absolute; inset: 0; }
.row:hover .row__title a { text-decoration: underline; }
.row__glyph { color: var(--link-color); font-size: var(--type-title-size); align-self: center; }

/* Tabs */
.tabs { display: flex; gap: var(--space-xl); border-bottom: 1px solid var(--border-subtle); overflow-x: auto; }
.tab {
  min-height: var(--target-min); padding: var(--space-sm) 0; border: none; background: none; cursor: pointer; white-space: nowrap;
  font-family: var(--font-body); font-size: var(--type-body-default-size); font-weight: 600; color: var(--text-primary);
}
.tab[aria-selected="true"] { color: var(--tab-selected-color); box-shadow: inset 0 calc(-1 * var(--tab-indicator-width)) 0 var(--border-selected); }

/* Service tiles */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--space-xl); list-style: none; }
.tile { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-lg); background: var(--surface-card); }
.tile .badge-list { margin-bottom: var(--space-xs); }
.tile .link { margin-top: auto; }

/* Summary list (dl) */
.summary { border-top: 1px solid var(--border-subtle); }
.summary > div { display: grid; grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr); gap: var(--space-base); padding: var(--space-base) 0; border-bottom: 1px solid var(--border-subtle); }
.summary dt { font-weight: 600; }
@media (max-width: 40em) { .summary > div { grid-template-columns: 1fr; gap: var(--space-xs); } }

/* Phases */
.phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--space-xl); list-style: none; }
.phases li { padding-top: var(--space-base); border-top: 2px solid var(--border-subtle); }
.phases li:last-child { border-top-color: var(--border-selected); }

/* Profile */
.portrait { width: 100%; max-width: 28rem; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); background: var(--surface-placeholder); justify-self: end; }
.def-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-3xl); list-style: none; }
.def-grid li { border-top: 1px solid var(--border-subtle); padding-top: var(--space-lg); }
.def-grid p { margin-top: var(--space-sm); color: var(--text-muted); }

/* Case study: reading layout */
.doc { max-width: none; }
/* Text keeps a 46rem reading measure; screens, grids and tables use the full width. */
.doc > :is(h2, p, blockquote, ul.bullets) { max-width: 46rem; }
.doc > * + * { margin-top: var(--space-xl); }
.doc > h2 { margin-top: var(--space-3xl-plus); padding-top: var(--space-xl); border-top: 1px solid var(--border-subtle); }
.doc ul.bullets { padding-left: var(--space-xl); }
.doc ul.bullets li + li { margin-top: var(--space-sm); }
.case-head .badge-list { margin-bottom: var(--space-lg); }
.case-head .t-lead { max-width: 45rem; margin-top: var(--space-xl); }
.case-cover { margin-top: var(--space-3xl); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-placeholder); }
.case-cover :is(img, video) { width: 100%; height: auto; }
.toc { display: flex; flex-wrap: wrap; gap: 0 var(--space-xl); list-style: none; }
.figure img, .figure video { width: 100%; height: auto; border-radius: var(--radius-lg); background: var(--surface-placeholder); }
/* Very tall screens (long mockups) shrink to fit the window height instead of filling the page. */
.figure img { width: auto; max-width: 100%; max-height: 85vh; }
.figure figcaption { margin-top: var(--space-sm); }
.quote { padding-left: var(--space-xl); border-left: 2px solid var(--border-selected); }
.table-wrap { overflow-x: auto; }
.table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line-height); }
.table th { text-align: left; font-weight: 700; padding: var(--space-sm) var(--space-base) var(--space-sm) 0; border-bottom: 1px solid var(--border-default); }
.table td { padding: var(--space-md) var(--space-base) var(--space-md) 0; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-xl); list-style: none; counter-reset: step; }
.steps li { counter-increment: step; padding-top: var(--space-base); border-top: 2px solid var(--border-subtle); }
.steps li::before { content: counter(step); display: block; font-family: var(--font-display); font-size: var(--type-section-size); color: var(--text-accent); margin-bottom: var(--space-sm); }
.next-case { display: block; padding: var(--space-xl); border-radius: var(--radius-lg); background: var(--surface-page); color: var(--text-primary); text-decoration: none; }
.next-case:hover .t-title { text-decoration: underline; }

/* Contact and footer (inverse) */
.contact-actions { margin-top: var(--space-3xl); }
.site-footer { border-top: 1px solid var(--border-inverse-subtle); padding-block: var(--space-xl); color: var(--text-muted-inverse); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-base); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); list-style: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ---------- Signature motion, on top of the DS ---------- */
/* Hero with the animated mesh background */
.hero--motion { position: relative; overflow: hidden; padding: 0; }
.shader { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.shade-overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--surface-scrim), var(--surface-inverse)); opacity: 0.85; }
.hero__content { position: relative; padding-block: var(--space-section) var(--space-4xl); }
.hero__hey { color: var(--link-color-inverse); margin-bottom: var(--space-lg); }
.hero__title { font-size: clamp(var(--type-hero-size), 6vw, calc(var(--type-hero-size) * 1.4)); line-height: 1; }
.hero--motion .t-lead { max-width: 36rem; margin-top: var(--space-xl); }
.hero--motion .btn-row { margin-top: var(--space-3xl); }
.hero__dot { color: var(--link-color-inverse); }
.rot-window { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1em; height: 1.18em; margin-bottom: -0.18em; padding-right: 0.04em; }
.rot-word { display: inline-block; white-space: nowrap; }
.hero__for { font-weight: 400; }
.hero-word { font-weight: 400; white-space: nowrap; }
/* Up to 64em the rotating word takes its own line so the longest one always fits. */
@media (max-width: 64em) { .hero-word { display: block; } }
@media (max-width: 40em) { .hero__title { font-size: 8.2vw; } }

/* Moving logo strip along the bottom of the hero */
.marquee-wrap { position: relative; overflow: hidden; border-top: 1px solid var(--border-inverse-subtle); }
.marquee { display: flex; width: max-content; list-style: none; will-change: transform; }
.marquee__item { display: flex; align-items: center; height: 6rem; padding: 0 var(--space-3xl); }
.marquee__item img { height: 1.75rem; width: auto; }
@media (prefers-reduced-motion: reduce) { .marquee { flex-wrap: wrap; width: auto; } .marquee__item[aria-hidden="true"] { display: none; } }

/* Blue band with rolling numbers */
.proof-band { background: var(--action-primary-bg); color: var(--action-primary-text); padding-block: var(--space-section); }
.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-3xl); list-style: none; }
.proof li { display: flex; flex-direction: column; gap: var(--space-base); padding-top: var(--space-lg); border-top: 2px solid var(--border-inverse-subtle); }
.proof__num { display: flex; align-items: flex-end; gap: var(--space-xs); height: 1em; font-family: var(--font-display); font-weight: 500; font-size: calc(var(--type-display-lg-size) * 2); line-height: 1; letter-spacing: -0.05em; }
.proof__col { display: inline-block; overflow: hidden; height: 1em; line-height: 1em; }
.proof__stack { display: flex; flex-direction: column; }
.proof__stack > span { height: 1em; }
.proof__unit-win { display: inline-block; overflow: hidden; height: 1.2em; font-size: 0.34em; line-height: 1.2em; letter-spacing: -0.02em; margin-bottom: 0.12em; }
.proof__unit-win > span { display: inline-block; white-space: nowrap; }
.proof__label-win { display: block; overflow: hidden; min-height: 3rem; }
.proof__label { display: block; max-width: 22rem; }
.carousel--first { margin-top: 0; }

/* ---------- Floating navbar (signature): a translucent dark pill that stays at the top ---------- */
.site-header { position: sticky; top: var(--space-md); z-index: 20; height: 0; overflow: visible; padding-inline: var(--space-md); background: none; border: 0; }
.site-header .nav {
  max-width: 80rem; margin: 0 auto; padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-xl);
  border-radius: var(--radius-full); background: color-mix(in srgb, var(--surface-inverse) 80%, transparent); border: 1px solid var(--border-inverse-subtle);
  -webkit-backdrop-filter: blur(15px) saturate(160%); backdrop-filter: blur(15px) saturate(160%);
}
.site-header .nav-brand { color: var(--text-inverse); }
.site-header .nav-link { color: var(--text-inverse); }
.site-header .nav-link:hover { color: var(--link-color-inverse); }
.site-header .nav-link[aria-current="page"] { color: var(--link-color-inverse); box-shadow: inset 0 calc(-1 * var(--tab-indicator-width)) 0 var(--link-color-inverse); }
.site-header .seg { background: transparent; border-color: var(--border-inverse-subtle); }
.site-header .seg button { color: var(--text-muted-inverse); }
.site-header .seg button[aria-checked="true"] { background: var(--text-inverse); color: var(--text-primary); box-shadow: none; }
.site-header .nav-toggle { background: transparent; color: var(--action-inverse-text); border-color: var(--action-inverse-border); }

/* The first section of every page leaves room for the floating bar. */
main > .section:first-child, main > article:first-child { padding-top: calc(var(--space-section) + var(--space-3xl)); }
.hero__content { padding-top: calc(var(--space-section) + var(--space-3xl)); }

@media (max-width: 40em) {
  .site-header .nav { border-radius: var(--radius-lg); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg); }
  .site-header .nav.open { background: var(--surface-inverse); }
  .site-header .nav-list .nav-link { border-top-color: var(--border-inverse-subtle); }
  .site-header .nav-link[aria-current="page"] { box-shadow: inset var(--tab-indicator-width) 0 0 var(--link-color-inverse); }
}

/* ---------- Case study cards: white cards on the gray page, every cover in the same light-blue frame ---------- */
#work .card { background: var(--surface-card); overflow: hidden; }
#work .card__media { background: var(--surface-selected); padding: var(--space-xl) var(--space-xl) 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
#work .card__media :is(img, video) {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  border-radius: var(--radius-md) var(--radius-md) 0 0; border: 1px solid var(--border-subtle); border-bottom: 0; background: var(--surface-card);
}
/* Phone mockups have transparent backgrounds: show them whole, without a frame. */
#work .card__media img.is-device { object-fit: contain; object-position: center bottom; border: 0; border-radius: 0; background: none; padding-bottom: var(--space-base); }
#work .card__body { padding: var(--space-lg) var(--space-xl) var(--space-xl); }

/* Strip at the top of the hero: 9+ years ✱ EU work authorization ✱ Open to senior & lead roles */
.hero-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-xl);
  margin-bottom: var(--space-4xl); padding-top: var(--space-md); border-top: 1px solid var(--border-inverse-subtle);
  list-style: none; font-size: var(--type-body-sm-size); font-weight: 600; color: var(--text-muted-inverse);
}
.hero-strip li { white-space: nowrap; }
.hero-strip__star { color: var(--link-color-inverse); }
.hero-strip__strong { color: var(--text-inverse); }
@media (max-width: 40em) {
  .hero-strip { flex-direction: column; align-items: flex-start; gap: var(--space-xs); margin-bottom: var(--space-3xl); }
  .hero-strip__star { display: none; }
}

/* ---------- What Colleagues Say: black section with the animated background, like the original ---------- */
.voices { position: relative; overflow: hidden; }
.voices__inner { position: relative; padding-block: calc(var(--space-section) + var(--space-3xl)) var(--space-section); }
.voices__mark {
  position: absolute; font-family: var(--font-display); font-weight: 600; font-size: clamp(7.5rem, 16vw, 15rem); line-height: 0.8;
  color: transparent; -webkit-text-stroke: 1.5px var(--border-inverse-subtle); pointer-events: none; user-select: none;
  background: linear-gradient(135deg, var(--text-inverse), transparent 60%, var(--link-color-inverse)); -webkit-background-clip: text; background-clip: text; opacity: 0.55;
}
.voices__mark--open { top: var(--space-xl); left: var(--space-gutter); }
.voices__mark--close { bottom: calc(-1 * var(--space-3xl)); right: var(--space-gutter); }
.voices__title { color: var(--text-muted-inverse); margin-bottom: var(--space-3xl); }
.voices__slide { min-height: 18rem; }
.voices__quote { max-width: 52rem; }
.voices__quote p { font-family: var(--font-display); font-weight: 500; font-size: var(--type-body-lg-size); line-height: 1.6; letter-spacing: -0.01em; color: var(--text-inverse); }
.voices__quote p + p { margin-top: var(--space-base); }
.voices__quote p:first-child { font-size: var(--type-section-size); line-height: var(--type-section-line-height); letter-spacing: var(--type-section-tracking); }
.voices__meta { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); margin-top: var(--space-xl); font-size: var(--type-body-default-size); color: var(--text-muted-inverse); }
.voices__meta strong { color: var(--text-inverse); }
.voices__meta strong::after { content: ","; }
.voices__controls { display: flex; align-items: flex-end; gap: var(--space-base); margin-top: var(--space-3xl); }
.voices__names { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem), 1fr)); gap: var(--space-base) var(--space-lg); }
.voices__name {
  display: flex; flex-direction: column; gap: var(--space-sm); min-height: var(--target-min); padding: var(--space-sm) 0; border: 0; background: none; cursor: pointer;
  text-align: left; color: var(--text-inverse); opacity: 0.6; transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
}
.voices__name:hover, .voices__name[aria-current="true"] { opacity: 1; }
.voices__bar { position: relative; display: block; height: 2px; background: var(--border-inverse-subtle); overflow: hidden; }
.voices__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--text-inverse); }
.voices__who { font-family: var(--font-body); font-size: var(--type-body-sm-size); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voices__pause {
  position: relative; z-index: 1; flex-shrink: 0; width: var(--target-min); height: var(--target-min); border-radius: var(--radius-full); border: 1px solid var(--action-inverse-border);
  background: transparent; color: var(--action-inverse-text); font-size: 0.8rem; cursor: pointer;
}
.voices__pause:hover { opacity: 0.85; }
@media (max-width: 40em) {
  .voices__quote p:first-child { font-size: var(--type-body-lg-size); line-height: 1.5; }
  .voices__quote p { font-size: var(--type-body-default-size); }
}

/* Hero strip: all three facts in white. */
.hero-strip { color: var(--text-inverse); }

/* ---------- Contact menu in the navbar (DS Menu: overlay surface, overlay shadow, 44px items) ---------- */
.contact-menu { position: relative; display: inline-flex; }
.contact-menu__btn { gap: var(--space-sm); }
.contact-menu__caret { font-size: 0.7em; transition: transform var(--motion-duration-transform) var(--motion-ease-standard); }
.contact-menu__btn[aria-expanded="true"] .contact-menu__caret { transform: rotate(180deg); }
.menu {
  position: absolute; top: calc(100% + var(--space-sm)); right: 0; z-index: 40; min-width: 16rem; margin: 0; padding: var(--space-xs);
  list-style: none; background: var(--overlay-bg); border: 1px solid var(--border-subtle); border-radius: var(--overlay-radius); box-shadow: var(--overlay-shadow);
  --focus-ring-color: var(--focus-outline);
}
.menu[hidden] { display: none; }
.menu__item {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: var(--target-min); padding: var(--space-sm) var(--space-base);
  border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none;
}
.menu__item:hover, .menu__item:focus-visible { background: var(--surface-selected); }
.menu__label { font-weight: 600; }
.menu__hint { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line-height); color: var(--text-muted); }
@media (max-width: 40em) {
  .contact-menu { display: flex; flex-direction: column; width: 100%; }
  .contact-menu__btn { width: 100%; }
  .menu { position: static; min-width: 0; margin-top: var(--space-sm); box-shadow: none; }
}

/* Case cards: 16:9 media, full width, never cropped (images and videos keep their whole frame). */
#work .card__media { aspect-ratio: 16 / 9; padding: 0; }
#work .card__media :is(img, video),
#work .card__media img.is-device {
  width: 100%; height: 100%; object-fit: contain; object-position: center; border: 0; border-radius: 0; padding: 0; background: none;
}

/* =====================================================================
   Inner pages with more visual rhythm (case studies, profile, projects, writing)
   ===================================================================== */

/* Entrances: blocks rise in once as they enter the screen. Only with motion allowed; visible without script. */
.motion .rv { opacity: 0; transform: translateY(1.5rem); transition: opacity 600ms var(--motion-ease-standard), transform 600ms var(--motion-ease-standard); }
.motion .rv.is-in { opacity: 1; transform: none; }

/* Reading progress on case studies */
.read-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 50; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: var(--action-primary-bg); transform: scaleX(0); transform-origin: left; }

/* Black opening band for inner pages */
.page-hero { padding-block: calc(var(--space-section) + var(--space-3xl)) var(--space-4xl); }
.page-hero .t-lead { max-width: 40rem; margin-top: var(--space-xl); color: var(--text-muted-inverse); }

/* Tiles: filled surfaces instead of rules */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-xl); list-style: none; }
.tiles--in { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-base); }
.tile-x { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-xl); border-radius: var(--radius-lg); background: var(--surface-card); }
.section--card .tile-x, .cs-band:not(.cs-band--alt) .tile-x { background: var(--surface-page); }
.tile-x--accent, .section--card .tile-x--accent, .cs-band .tile-x--accent { background: var(--action-primary-bg); color: var(--action-primary-text); }
.tile-x--accent .muted { color: var(--action-primary-text); }

/* Profile */
.pf-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: var(--space-4xl); align-items: end; padding-block: calc(var(--space-section) + var(--space-3xl)) var(--space-section); }
.pf-hero__role { margin-top: var(--space-base); font-family: var(--font-display); font-size: var(--type-title-size); color: var(--link-color-inverse); }
.pf-hero .t-lead { margin-top: var(--space-xl); max-width: 40rem; }
.pf-hero .btn-row { margin-top: var(--space-3xl); }
.pf-hero__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); }
@media (max-width: 52em) { .pf-hero__grid { grid-template-columns: 1fr; } .pf-hero__photo { max-width: 22rem; } }

.timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-3xl) var(--space-xl); list-style: none; }
.timeline__item { position: relative; display: flex; flex-direction: column; gap: var(--space-sm); padding-top: var(--space-3xl); }
.timeline__item::before { content: ""; position: absolute; top: 0.45rem; left: 0; right: 0; height: 2px; background: var(--border-subtle); }
.timeline__dot { position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; border-radius: var(--radius-full); background: var(--border-default); }
.timeline__item.is-now .timeline__dot { background: var(--action-primary-bg); box-shadow: 0 0 0 6px var(--surface-selected); }
.timeline__year { font-family: var(--font-display); font-size: var(--type-section-size); color: var(--text-accent); }
.timeline__role { font-weight: 600; }

/* Projects */
.pj-grid { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(0, 2.2fr); gap: var(--space-3xl) var(--space-4xl); align-items: start; }
.pj-head { position: sticky; top: 7rem; display: flex; flex-direction: column; gap: var(--space-sm); }
.pj-year { font-family: var(--font-display); font-size: var(--type-display-lg-size); line-height: 1; color: var(--text-accent); }
.pj-items { display: grid; gap: var(--space-xl); list-style: none; }
.pj-item { position: relative; display: grid; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-card); transition: transform var(--motion-duration-transform) var(--motion-ease-standard); }
.section--card .pj-item { background: var(--surface-page); }
.pj-item.has-media { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.pj-item.has-case:hover { transform: translateY(var(--motion-lift)); }
.pj-item__media { width: 100%; aspect-ratio: 16 / 9; background: var(--surface-selected); align-self: center; }
.pj-item__media :is(img, video) { width: 100%; height: 100%; object-fit: contain; }
.pj-item__body { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-xl); }
.pj-item__body h3 a { color: inherit; text-decoration: none; }
.pj-item__body h3 a::after { content: ""; position: absolute; inset: 0; }
.pj-item.has-case:hover h3 a { text-decoration: underline; }
.pj-item__more { margin-top: auto; color: var(--link-color); font-weight: 600; }
@media (max-width: 64em) { .pj-grid { grid-template-columns: 1fr; } .pj-head { position: static; } }
@media (max-width: 40em) { .pj-item.has-media { grid-template-columns: 1fr; } }

/* Writing */
.wr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--space-xl); list-style: none; }
.wr-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-card); transition: transform var(--motion-duration-transform) var(--motion-ease-standard); }
.wr-card:hover { transform: translateY(var(--motion-lift)); }
.wr-card__media { aspect-ratio: 2 / 1; background: var(--surface-inverse); }
.wr-card__media img { width: 100%; height: 100%; object-fit: cover; }
.wr-card__body { position: relative; display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-xl); flex: 1; }
.wr-card__meta { color: var(--text-muted); }
.wr-card__title a { color: inherit; text-decoration: none; }
.wr-card__title a::after { content: ""; position: absolute; inset: 0; }
.wr-card:hover .wr-card__title a { text-decoration: underline; }
.wr-card__glyph { margin-top: auto; align-self: flex-end; font-size: var(--type-title-size); color: var(--link-color); }
.wr-card--field { background: var(--action-primary-bg); color: var(--action-primary-text); }
.wr-card--field .wr-card__meta, .wr-card--field .wr-card__glyph { color: var(--action-primary-text); }
.wr-card--field .wr-card__title { font-size: var(--type-section-size); }
@media (min-width: 64em) {
  .wr-card--feature { grid-column: 1 / -1; flex-direction: row; }
  .wr-card--feature .wr-card__media { flex: 1.4; aspect-ratio: auto; min-height: 22rem; }
  .wr-card--feature .wr-card__body { flex: 1; justify-content: center; }
  .wr-card--feature .wr-card__title { font-size: var(--type-section-size); line-height: var(--type-section-line-height); }
}

/* Case study: opening */
.cs-hero { padding-block: calc(var(--space-section) + var(--space-3xl)) calc(var(--space-4xl) + 7rem); }
.cs-hero__tags { margin-block: var(--space-xl); }
.cs-hero .badge--outline { color: var(--text-inverse); border-color: var(--action-inverse-border); }
.cs-hero__title { max-width: 22ch; text-wrap: balance; }
.cs-hero__foot { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-xl) var(--space-4xl); align-items: end; margin-top: var(--space-3xl); }
.cs-hero__foot .t-lead { color: var(--text-muted-inverse); max-width: 42rem; }
.cs-hero__meta { font-weight: 600; color: var(--link-color-inverse); justify-self: end; }
@media (max-width: 52em) { .cs-hero__foot { grid-template-columns: 1fr; } .cs-hero__meta { justify-self: start; } }
.cs-cover-band { background: var(--surface-card); }
.cs-cover { position: relative; margin-top: -7rem; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-selected); }
.cs-cover :is(img, video) { width: 100%; height: auto; max-height: 80vh; object-fit: contain; margin-inline: auto; }

.cs-intro { padding-top: var(--space-4xl); }
.cs-intro__summary { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line-height); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-base); }
.facts__item { padding: var(--space-lg); border-radius: var(--radius-md); background: var(--surface-page); }
.facts__item dt { font-size: var(--type-body-sm-size); color: var(--text-muted); }
.facts__item dd { margin-top: var(--space-xs); font-weight: 600; }
.cs-toc { margin-top: var(--space-4xl); }
.cs-toc .toc { gap: var(--space-sm); margin-top: var(--space-base); }
.toc__link {
  display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-lg); border-radius: var(--radius-pill);
  background: var(--surface-page); color: var(--text-primary); font-weight: 600; font-size: var(--type-body-sm-size); text-decoration: none;
  transition: background var(--motion-duration-fast) var(--motion-ease-standard);
}
.toc__link:hover { background: var(--surface-selected); color: var(--link-hover); }

/* Case study: each section is its own band, alternating tones */
.cs-band { background: var(--surface-card); padding-block: var(--space-section); scroll-margin-top: 5rem; }
.cs-band--alt { background: var(--surface-page); }
.cs-grid { display: grid; grid-template-columns: minmax(13rem, 1fr) minmax(0, 2.3fr); gap: var(--space-xl) var(--space-4xl); align-items: start; }
.cs-grid + .cs-grid, .cs-wide + .cs-grid { margin-top: var(--space-3xl); }
.cs-aside { position: sticky; top: 7rem; display: flex; flex-direction: column; gap: var(--space-base); }
.cs-num { font-family: var(--font-display); font-weight: 500; font-size: calc(var(--type-display-lg-size) * 1.6); line-height: 0.9; letter-spacing: -0.04em; color: var(--text-accent); }
.cs-body { max-width: 48rem; min-width: 0; }
.cs-body > * + * { margin-top: var(--space-xl); }
@media (max-width: 64em) { .cs-grid { grid-template-columns: minmax(0, 1fr); } .cs-aside { position: static; } .cs-aside-col:empty { display: none; } }

.cs-wide { margin-top: var(--space-3xl); display: grid; gap: var(--space-3xl); }
.cs-figure :is(img, video) { width: auto; max-width: 100%; max-height: 85vh; margin-inline: auto; border-radius: var(--radius-lg); background: var(--surface-placeholder); }
.cs-figure video { width: 100%; }
.cs-figure figcaption { margin-top: var(--space-sm); font-size: var(--type-body-sm-size); color: var(--text-muted); text-align: center; }

.cs-quote { padding: var(--space-3xl); border-radius: var(--radius-lg); background: var(--action-primary-bg); color: var(--action-primary-text); }
.cs-quote p { font-family: var(--font-display); font-size: var(--type-section-size); line-height: var(--type-section-line-height); letter-spacing: var(--type-section-tracking); }
.cs-quote footer { margin-top: var(--space-base); font-size: var(--type-body-sm-size); opacity: 0.9; }
.cs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--space-base); list-style: none; }
.cs-stats li { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-xl); border-radius: var(--radius-lg); background: var(--surface-inverse); color: var(--text-inverse); }
.cs-stats__num { font-family: var(--font-display); font-size: var(--type-display-lg-size); line-height: 1; letter-spacing: -0.03em; color: var(--link-color-inverse); }
.checks { list-style: none; display: grid; gap: var(--space-sm); }
.checks li { position: relative; padding-left: var(--space-xl); }
.checks li::before { content: "\2713"; position: absolute; left: 0; color: var(--link-color); font-weight: 700; }
.steps--tiles li { padding: var(--space-lg); border-top: 0; border-radius: var(--radius-lg); background: var(--surface-page); }
.cs-band--alt .steps--tiles li { background: var(--surface-card); }
.steps--tiles li p { margin-top: var(--space-xs); }

/* Case study: next case */
.cs-next { display: block; padding-block: var(--space-section); color: var(--text-inverse); text-decoration: none; }
.cs-next__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-3xl); align-items: center; }
.cs-next__label { display: block; margin-bottom: var(--space-base); font-weight: 600; color: var(--link-color-inverse); }
.cs-next__title { display: block; text-wrap: balance; }
.cs-next:hover .cs-next__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.cs-next__media { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-selected); transition: transform var(--motion-duration-transform) var(--motion-ease-standard); }
.cs-next:hover .cs-next__media { transform: translateY(var(--motion-lift)); }
.cs-next__media :is(img, video) { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 52em) { .cs-next__grid { grid-template-columns: 1fr; } }

/* These opening bands carry their own top padding for the floating bar. */
main > .page-hero:first-child { padding-top: calc(var(--space-section) + var(--space-3xl)); }

/* Case cover sits inside the black opening, with the same space above (from the text) and below (to the band's end). */
.cs-hero { padding-bottom: var(--space-4xl); }
.cs-hero .cs-cover { margin-top: var(--space-4xl); }

/* Fact tiles keep their own height (no stretched empty space). */
.facts { align-items: start; }

/* Projects without a case study: the client logo on a black field, same 16:9 area as the case images. */
.pj-item__media--logo { display: grid; place-items: center; background: var(--surface-accent); }
.pj-item__media--logo img { width: auto; height: auto; max-width: 55%; max-height: 32%; object-fit: contain; }
.pj-item__wordmark { font-family: var(--font-display); font-size: var(--type-section-size); font-weight: 500; color: var(--text-inverse); letter-spacing: var(--type-section-tracking); }

/* Project cards: the image keeps the same space on its top, left and bottom, with rounded corners. */
.pj-item.has-media { padding: var(--space-xl) 0 var(--space-xl) var(--space-xl); align-items: center; }
.pj-item.has-media .pj-item__media { border-radius: var(--radius-md); overflow: hidden; }
@media (max-width: 40em) { .pj-item.has-media { padding: var(--space-xl) var(--space-xl) 0; } .pj-item.has-media .pj-item__body { padding-inline: 0; } }
/* The image area fills the card's height so the space is the same on top, left and bottom; the picture stays whole inside it. */
.pj-item.has-media { align-items: stretch; }
.pj-item.has-media .pj-item__media { aspect-ratio: auto; height: 100%; min-height: 12rem; }
@media (max-width: 40em) { .pj-item.has-media .pj-item__media { aspect-ratio: 16 / 9; height: auto; min-height: 0; } }

/* Case sub-headings and references */
.cs-body .cs-sub { margin-top: var(--space-3xl); margin-bottom: var(--space-md); }
.cs-body > .cs-sub:first-child { margin-top: 0; }
.cs-refs { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-md); color: var(--text-muted); }

.cs-intro__text { display: grid; gap: var(--space-lg); }

/* Lighter case body: definition lists, soft quotes, collapsible records */
.cs-defs { display: grid; gap: 0; }
.cs-defs > div { padding-block: var(--space-lg); border-top: 1px solid var(--border-subtle); }
.cs-defs > div:last-child { border-bottom: 1px solid var(--border-subtle); }
.cs-defs dt { font-weight: 600; color: var(--text-primary); }
.cs-defs dd { margin: var(--space-xs) 0 0; color: var(--text-muted); }
.cs-quote--soft { padding: var(--space-xs) 0 var(--space-xs) var(--space-xl); border-radius: 0; background: none; color: var(--text-primary); border-left: 3px solid var(--link-color); }
.cs-quote--soft p { font-size: var(--type-title-size); line-height: 1.4; }
.cs-quote--soft footer { color: var(--text-muted); opacity: 1; }
.cs-more > summary { cursor: pointer; font-weight: 600; color: var(--link-color); list-style: none; display: inline-flex; gap: var(--space-sm); align-items: center; }
.cs-more > summary::-webkit-details-marker { display: none; }
.cs-more > summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid currentColor; font-weight: 400; }
.cs-more[open] > summary::before { content: "\2212"; }
.cs-more[open] > .table-wrap { margin-top: var(--space-lg); }
.cs-body .cs-sub { padding-top: var(--space-3xl); border-top: 1px solid var(--border-subtle); }
.cs-body > .cs-sub:first-child { padding-top: 0; border-top: 0; }

.cs-figure--sm :is(img, video) { max-height: 30rem; }

/* Featured case: first card spans both columns */
#work .card--feature { grid-column: 1 / -1; }
@media (min-width: 64em) {
  #work .card--feature { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; }
  #work .card--feature .card__media { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
  #work .card--feature .card__body { padding: var(--space-3xl); }
  #work .card--feature .card__title { font-size: var(--type-section-size); line-height: var(--type-section-line-height); letter-spacing: var(--type-section-tracking); }
  #work .card--feature .card__desc { font-size: var(--type-body-size); }
}

.work-more { margin-top: var(--space-3xl); text-align: center; }

/* Card edges: white cards on the gray page need a visible boundary */
.card, .pj-item, .wr-card { box-shadow: 0 0 0 1px var(--border-subtle), 0 1px 3px var(--border-subtle); }
.card:hover, .pj-item:hover, .wr-card:hover { box-shadow: 0 0 0 1px var(--border-subtle), var(--shadow-overlay); }

.section-head__main { display: grid; gap: var(--space-sm); }

/* Home projects: always two columns so the row fills the full width */
@media (min-width: 48em) { #work .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Name menu sits above the quote so it does not move when quote length changes */
.voices__title { margin-bottom: var(--space-xl); }
.voices__controls { margin-top: 0; margin-bottom: var(--space-3xl); }

/* "Services" line under each How I Work habit */
.how-svc { margin-top: var(--space-base); padding-top: var(--space-sm); border-top: 1px solid var(--border-subtle); color: var(--text-muted); }
.how-svc__label { font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.how-svc__label::after { content: ":"; }
.tile-x--accent .how-svc { border-top-color: var(--white-alpha-10); color: var(--action-primary-text); }
.acc__panel .how-svc { margin-top: var(--space-sm); }
.tile-x .how-svc { margin-top: auto; }

/* Profile · How I Work: numbered editorial rows instead of a card grid */
.how-list { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.how-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--space-base) var(--space-3xl); padding-block: var(--space-3xl); border-top: 1px solid var(--border-subtle); align-items: start; }
.how-row:last-child { border-bottom: 1px solid var(--border-subtle); }
.how-row__num { font-family: var(--font-display); font-size: var(--type-section-size); line-height: 1; color: var(--text-accent); }
.how-row__title { font-family: var(--font-display); font-size: var(--type-section-size); line-height: var(--type-section-line-height); letter-spacing: var(--type-section-tracking); font-weight: 400; color: var(--text-primary); }
.how-row__body p { color: var(--text-muted); }
.how-row__svc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-base); margin-top: var(--space-lg); }
.how-row__svc-label { font-size: var(--type-body-sm-size); font-weight: 600; color: var(--text-primary); text-decoration: underline; text-underline-offset: 0.2em; }
.how-row__svc .badge { font-size: var(--type-body-sm-size); }
@media (max-width: 64em) { .how-row { grid-template-columns: 3rem minmax(0, 1fr); } .how-row__body { grid-column: 2; } }
@media (max-width: 40em) { .how-row { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-xl); } .how-row__body { grid-column: 1; } }
.how-row__svc { flex-direction: column; align-items: flex-start; }
.how-row__svc .badge { text-transform: none; letter-spacing: 0; font-weight: 500; }

.timeline--edu .timeline__role { font-weight: 400; color: var(--text-muted); }
.how-row__svc-label, .how-svc__label { text-decoration: none; }

/* =====================================================================
   Services page (client-facing)
   ===================================================================== */
.svc-hero { position: relative; overflow: hidden; }
.svc-hero__inner { position: relative; }
.svc-hero__eyebrow { color: var(--link-color-inverse); margin-bottom: var(--space-base); }
.svc-hero__title { max-width: 16ch; }
.svc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-base); margin-top: var(--space-3xl); }
.svc-hero .btn--secondary { color: var(--text-inverse); border-color: var(--text-inverse); background: transparent; }

.svc-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--space-xl); }
.svc-path { display: flex; flex-direction: column; gap: var(--space-sm); text-align: left; font: inherit; color: var(--text-primary); padding: var(--space-xl) var(--space-2xl, var(--space-xl)); border: 2px solid transparent; border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: 0 0 0 1px var(--border-subtle); cursor: pointer; transition: border-color var(--motion-duration-transform) var(--motion-ease-standard), transform var(--motion-duration-transform) var(--motion-ease-standard); }
.svc-path:hover { transform: translateY(var(--motion-lift)); }
.svc-path:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.svc-path.is-on { border-color: var(--border-selected); background: var(--surface-selected); }
.svc-path__label { font-family: var(--font-display); font-size: var(--type-section-size); line-height: var(--type-section-line-height); letter-spacing: var(--type-section-tracking); }
.svc-path__who { color: var(--text-muted); }
.svc-path__pains { list-style: none; padding: 0; margin: var(--space-sm) 0 0; display: grid; gap: var(--space-xs); }
.svc-path__pains li { position: relative; padding-left: var(--space-xl); }
.svc-path__pains li::before { content: "\2192"; position: absolute; left: 0; color: var(--link-color); }

.svc-panel { margin-top: var(--space-4xl); }
.svc-hint { margin-bottom: var(--space-xl); color: var(--text-muted); }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--space-xl); list-style: none; padding: 0; }
.svc-card { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: 0 0 0 1px var(--border-subtle), 0 1px 3px var(--border-subtle); }
.svc-card--entry { box-shadow: 0 0 0 2px var(--border-selected); }
.svc-card__q { font-weight: 600; color: var(--link-color); }
.svc-card__o { color: var(--text-primary); }
.svc-card__more { font-size: var(--type-body-sm-size); color: var(--text-muted); }
.svc-card__more summary { cursor: pointer; color: var(--text-muted); text-decoration: underline; text-underline-offset: 0.2em; width: fit-content; }
.svc-card__more p { margin-top: var(--space-sm); }
.svc-card__cta { margin-top: auto; padding-top: var(--space-sm); }

.svc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--space-xl); list-style: none; padding: 0; }
.svc-steps li { display: flex; flex-direction: column; gap: var(--space-xs); padding-top: var(--space-base); border-top: 2px solid var(--border-subtle); }
.svc-steps li:last-child { border-top-color: var(--border-selected); }
.svc-steps__num { font-family: var(--font-display); font-size: var(--type-section-size); line-height: 1; color: var(--text-accent); margin-bottom: var(--space-sm); }

.svc-trust { padding-block: var(--space-4xl); }
.svc-trust__label { color: var(--text-muted-inverse); margin-bottom: var(--space-xl); }
.svc-trust__logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xl) var(--space-3xl); list-style: none; padding: 0; }
.svc-trust__logos img { height: 2rem; width: auto; max-width: 9rem; object-fit: contain; opacity: 0.85; }

.svc-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-xl); list-style: none; padding: 0; }
.svc-terms li { padding-top: var(--space-base); border-top: 2px solid var(--border-subtle); }
.svc-terms p { margin-top: var(--space-xs); }
.svc-trust__logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: start; }
@media (max-width: 40em) { .svc-trust__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc-how { margin-bottom: var(--space-4xl); padding: var(--space-3xl) var(--space-xl); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: 0 0 0 1px var(--border-subtle); }

/* Terms stay on black, continuing the logo band into the contact section */
.svc-terms-band { padding-top: var(--space-xl); }
.svc-terms-band .svc-terms li { border-top-color: var(--white-alpha-10); }
.svc-terms-band .svc-terms p { color: var(--text-muted-inverse); }
.svc-trust { padding-bottom: var(--space-3xl); }
.svc-terms-band { padding-top: var(--space-4xl); }

/* Profile: availability, what I bring, contributions */
.pf-status { list-style: none; padding: 0; margin: var(--space-xl) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.pf-status li { padding: var(--space-xs) var(--space-base); border: 1px solid var(--white-alpha-10); border-radius: 999px; font-size: var(--type-body-sm-size); color: var(--text-inverse); }
.pf-status li::before { content: "\2731"; margin-right: var(--space-sm); color: var(--link-color-inverse); }
.pf-bring__head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-3xl); }
.pf-bring__head .t-lead { color: var(--text-muted); }
.pf-bring { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-xl); list-style: none; padding: 0; }
.pf-bring li { display: flex; flex-direction: column; gap: var(--space-sm); padding-top: var(--space-base); border-top: 2px solid var(--border-subtle); }
.pf-bring__num { font-family: var(--font-display); font-size: var(--type-section-size); line-height: 1; color: var(--text-accent); margin-bottom: var(--space-xs); }
.pf-bring__spec { margin-top: var(--space-3xl); max-width: 48rem; padding: var(--space-xl); border-radius: var(--radius-lg); background: var(--surface-selected); }
.pf-contrib { list-style: none; padding: 0; margin: 0; }
.pf-contrib__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-base) var(--space-3xl); padding-block: var(--space-xl); border-top: 1px solid var(--border-subtle); }
.pf-contrib__row:last-child { border-bottom: 1px solid var(--border-subtle); }
.pf-contrib__org { font-family: var(--font-display); font-size: var(--type-title-size); font-weight: 500; color: var(--text-primary); }
.pf-contrib__row p { color: var(--text-muted); }
.pf-contrib__link { margin-top: var(--space-sm); }
@media (max-width: 48em) { .pf-contrib__row { grid-template-columns: minmax(0, 1fr); } }

/* Navigable prototype frame inside a case */
.proto { margin: 0; }
.proto__frame { position: relative; margin-inline: auto; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-selected); box-shadow: 0 0 0 1px var(--border-subtle), var(--shadow-overlay); }
.proto__frame--desktop { aspect-ratio: 16 / 10; width: 100%; }
.proto__frame--phone { aspect-ratio: 9 / 19.5; width: min(100%, 22rem); border-radius: 2.5rem; border: 10px solid var(--surface-inverse); }
.proto__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.proto__frame--soon { display: grid; place-content: center; justify-items: center; gap: var(--space-base); padding: var(--space-xl); text-align: center; color: var(--text-muted); }
.proto figcaption { margin-top: var(--space-base); text-align: center; }
.proto__frame--phone.proto__frame--soon { width: min(100%, 18rem); }
.svc-steps__num { font-size: var(--type-title-size); line-height: var(--type-title-line-height, 1.3); }

/* Case intro facts: one stacked card instead of uneven tiles */
.cs-intro .facts { grid-template-columns: minmax(0, 1fr); gap: 0; align-self: start; padding: var(--space-base) var(--space-xl); border-radius: var(--radius-lg); background: var(--surface-page); }
.cs-intro .facts__item { padding: var(--space-base) 0; border-radius: 0; background: none; }
.cs-intro .facts__item + .facts__item { border-top: 1px solid var(--border-subtle); }
.cs-intro .facts__item dd { font-weight: 500; }

/* Prototype section: intro text sits under the heading, the frame takes the right column */
.cs-aside__text { margin-top: var(--space-base); color: var(--text-muted); }
.cs-body .proto__frame--phone { margin-inline: 0; }
.cs-body .proto figcaption { text-align: left; }

/* Prototype section uses the same two equal columns as the case intro, so the frame lines up with the facts card */
.cs-grid--split { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--space-xl) var(--space-4xl); }
.cs-grid--split .cs-body { max-width: none; }

/* Case cover as an embedded animation (16:9) */
.cs-cover__embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: #0d0d0d; }
.cs-cover__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Confidential project: client logo and a lock on the brand blue, in the media area */
.media-locked { position: relative; width: 100%; height: 100%; min-height: 12rem; aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-base); background: var(--surface-accent); color: var(--text-inverse); }
.media-locked__logo { width: auto !important; height: auto !important; max-width: 40% !important; max-height: 22% !important; object-fit: contain !important; }
.media-locked__icon { opacity: 0.85; }
.cs-cover .media-locked { border-radius: var(--radius-lg); }

/* Galleries inside the text column: screens line up with the copy; pairs share one height */
.cs-gallery { display: grid; gap: var(--space-base); margin-block: var(--space-xl); }
.cs-gallery--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-gallery__item { margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.cs-gallery__frame { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-selected); box-shadow: 0 0 0 1px var(--border-subtle); }
.cs-gallery[style] .cs-gallery__frame { aspect-ratio: var(--g-ratio); display: grid; place-items: center; padding: var(--space-sm); }
.cs-gallery__frame img { display: block; width: 100%; height: auto; }
.cs-gallery[style] .cs-gallery__frame img { width: 100%; height: 100%; object-fit: contain; }
.cs-gallery figcaption { font-size: var(--type-body-sm-size); color: var(--text-muted); }
@media (max-width: 40em) { .cs-gallery--pair { grid-template-columns: minmax(0, 1fr); } }
.cs-gallery[style] .cs-gallery__frame { padding: var(--space-xs); }

/* Zoomable case images and the lightbox */
.zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: inherit; }
.zoom:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.cs-figure .zoom { display: inline-block; width: auto; max-width: 100%; }
.lightbox { max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; padding: var(--space-xl); border: 0; background: transparent; display: none; place-items: center; box-sizing: border-box; }
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.82); }
.lightbox__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-base); max-width: min(1400px, 100%); cursor: zoom-out; }
.lightbox__fig img { max-width: 100%; max-height: calc(100dvh - 9rem); width: auto; height: auto; border-radius: var(--radius-lg); background: #fff; }
.lightbox__fig figcaption { color: #f2f2f2; font-size: var(--type-body-sm-size); text-align: center; max-width: 60ch; }
.lightbox__close { position: fixed; top: var(--space-base); right: var(--space-base); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); background: rgba(0,0,0,0.4); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.lightbox__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Result callout: one outcome per skill, light card inside its own subsection */
.cs-callout { padding: var(--space-xl); border-radius: var(--radius-lg); background: var(--surface-selected); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.cs-callout__n { font-family: var(--font-display); font-size: var(--type-section-size); line-height: var(--type-section-line-height); letter-spacing: var(--type-section-tracking); color: var(--text-accent); }
.cs-callout__t { margin-top: var(--space-xs); font-weight: 600; color: var(--text-primary); }
.cs-callout__d { margin-top: var(--space-sm); color: var(--text-muted); }

.svc-trust__label { color: var(--text-inverse); margin-bottom: var(--space-3xl); }

/* Signature logo in the navbar */
.nav-brand__logo { display: block; width: 191.5px; height: auto; position: relative; top: 3px; }
@media (max-width: 40em) { .nav-brand__logo { width: 157px; } }