/* Profile long-form — DESIGN-apple.md tokens in design-apple.css */

:root {
  /* Spacing scale: 8 / 16 / 24 / 40 / 64 / 96 / 144 */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 144px;

  /* One rendered line of a section heading — spacing measured in text lines */
  --heading-line: calc(var(--type-hero-display) * var(--leading-hero-display));

  /* Equal section rhythm + nav scroll landing under fixed header */
  --section-pad-y: 160px;
  /* Extra lead-in is heading-line pixels so titled sections and the bridge match */
  --section-lead-y: calc(var(--section-pad-y) + var(--space-5) + 3 * var(--heading-line));
  --process-lead-y: calc(var(--section-lead-y) - 2 * var(--heading-line));
  /* Padding inside a titled section — sits the heading under the floating nav.
     The rest of --section-lead-y is margin *between* sections so nav clicks
     do not land on empty lead-in. */
  --section-head-y: 96px;
  --heading-to-body: calc(var(--space-4) + 2 * var(--heading-line));
  --section-scroll-gap: 24px;

  /* Left rail matches About hero text */
  --page-rail: 90px;
  --page-hero-max: 1120px;
  --page-content-max: 880px;
  --page-left: max(var(--page-rail), calc((100vw - var(--page-hero-max)) / 2));
  --page-content-width: min(var(--page-content-max), calc(100vw - (var(--page-rail) * 2)));
  --gallery-max: 1120px;
  --gallery-side: 140px; /* equal inset; clears sticky index on the right */
  --gallery-width: min(var(--gallery-max), calc(100vw - (var(--gallery-side) * 2)));

  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-ui: 380ms;
}

/* Override landing `html, body { height:100%; overflow:hidden }` */
html.profile-html {
  /* Lock Apple MD faces — do not inherit Roboto/Inter from style.css */
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Helvetica Neue", sans-serif;
  --font-body: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Helvetica Neue", sans-serif;
  --bg: #ffffff;
  height: auto;
  min-height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-snap-type: none;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.profile-page {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  scroll-snap-type: none;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.profile-doc {
  width: var(--page-content-width);
  margin: 0;
  margin-left: var(--page-left);
  padding: 0;
}

html.profile-html .profile-section,
html.profile-html .archive-section,
html.profile-html .about-scroll-block,
html.profile-html .projects-dome {
  scroll-margin-top: 0;
}

.profile-section {
  min-height: 0;
  padding: var(--section-pad-y) 0;
  border-top: none;
  scroll-margin-top: 0;
  scroll-snap-align: none;
}

.profile-section:first-child {
  border-top: none;
}

.profile-section + .profile-section {
  margin-top: 0;
}

/* ——— ABOUT hero — full-viewport background ——— */

.about-scroll-block {
  position: relative;
  z-index: 4;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-1 * var(--page-left));
  margin-right: 0;
  min-height: 100svh;
  overflow: hidden;
  background: var(--bg);
}

.about-scroll-block > #about {
  position: relative;
  min-height: 100svh;
  display: block;
  box-sizing: border-box;
  border-top: none;
  padding: 0;
  scroll-margin-top: 0;
}

.about-scroll-block > #about .profile-hero__stack {
  /* The capsule header floats over the photo, so centre on the whole photo */
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: max-content;
  max-width: calc(100% - 48px);
  padding: 0;
  text-align: center;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.about-scroll-block > #about .type-lede {
  margin: 0 auto;
  max-width: none;
  font-family: "Montserrat", sans-serif;
  font-size: 70px;
  font-weight: 900;
  font-style: normal;
  line-height: var(--leading-hero-display);
  letter-spacing: -0.03em;
  text-align: center;
  text-transform: uppercase;
  color: #fafafa;
  text-shadow: none;
  perspective: 900px;
}

.about-scroll-block > #about .type-lede--rotate {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  white-space: nowrap;
}

.about-scroll-block > #about .type-lede__static {
  display: inline-block;
  color: #ffffff;
}

.about-scroll-block > #about .type-lede__rotate {
  display: inline-grid;
  justify-items: start;
  align-items: baseline;
  text-align: left;
  vertical-align: baseline;
}

.about-scroll-block > #about .type-lede__word {
  grid-area: 1 / 1;
  display: flex;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

.about-scroll-block > #about .type-lede__word.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.about-scroll-block > #about .type-lede__letter {
  display: inline-block;
  position: relative;
  transform: translateZ(25px);
  transform-origin: 50% 50% 25px;
  will-change: transform;
}

.about-scroll-block > #about .type-lede__letter.out {
  transform: rotateX(90deg);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.about-scroll-block > #about .type-lede__letter.behind {
  transform: rotateX(-90deg);
}

.about-scroll-block > #about .type-lede__letter.in {
  transform: rotateX(0deg);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.about-scroll-block > #about .type-lede__line {
  display: block;
  white-space: nowrap;
  transform-origin: center bottom;
}

.about-scroll-block > #about .profile-hero__subline {
  margin: var(--space-1) 0 0;
  max-width: 36ch;
  font-family: var(--font-body);
  font-size: var(--type-lead);
  font-weight: 400;
  font-style: normal;
  line-height: var(--leading-lead);
  letter-spacing: var(--tracking-lead);
  color: color-mix(in srgb, #f5f2eb 88%, #d9d0c4);
  text-shadow: none;
}

.about-scroll-block__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
}

.about-scroll-block__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: transparent;
}

.about-scroll-block .profile-section {
  position: relative;
  z-index: 2;
  width: var(--page-content-width);
  margin-left: var(--page-left);
  border-top-color: color-mix(in srgb, var(--sage) 18%, transparent);
  background: transparent;
  box-sizing: border-box;
}

.about-scroll-block .profile-section:first-of-type {
  border-top: none;
}

/* No hairline seam right after the hero block */
.about-scroll-block + .profile-section {
  border-top: none;
}

/* ——— Profile Hero: text copy ——— */

.profile-hero {
  width: min(var(--page-hero-max), calc(100vw - (var(--page-rail) * 2)));
  margin-left: 0;
  transform: none;
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
}

.profile-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.profile-hero--no-visual .profile-hero__grid {
  grid-template-columns: 1fr;
}

.profile-hero__copy {
  min-width: 0;
  padding-right: 0.5rem;
}

.profile-hero__copy .type-lede {
  max-width: none;
}

.profile-hero__subline {
  margin: 0;
  max-width: 46ch;
  font-size: var(--type-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--text-body);
}

.profile-hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding-top: 1.25rem;
  transform: translateY(4%);
}

.profile-hero__img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  object-fit: contain;
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  user-select: none;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .profile-hero__img {
    animation: hero-float 7s ease-in-out infinite;
  }
}

@keyframes hero-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@media (max-width: 960px) {
  body:not(.profile-canvas-active) .profile-hero__visual {
    transform: translateY(0);
    justify-content: flex-start;
  }

  body:not(.profile-canvas-active) .profile-hero__img {
    max-width: min(480px, 100%);
  }
}

/* ——— Typography scale ——— */

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 600;
}

.type-display {
  margin: 0 auto var(--space-3);
  max-width: none;
  font-family: var(--font-display);
  font-size: var(--type-hero-display);
  font-weight: 600;
  line-height: var(--leading-hero-display);
  letter-spacing: var(--tracking-hero-display);
  text-transform: none;
  text-align: center;
  color: var(--text);
}

.profile-section > .type-display {
  width: 100%;
}

.type-num {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--type-display);
  font-weight: 600;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--sage) 68%, var(--olive));
}

.type-sub {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--type-tagline);
  font-weight: 400;
  font-style: normal;
  line-height: var(--leading-tagline);
  letter-spacing: var(--tracking-tagline);
  text-transform: none;
  color: var(--text-body);
}

.type-statement {
  margin: var(--space-2) 0 var(--space-4);
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: var(--type-tagline);
  font-weight: 600;
  line-height: var(--leading-tagline);
  letter-spacing: var(--tracking-tagline);
  color: var(--text);
}

.type-statement--wide {
  max-width: 28ch;
}

.type-eyebrow {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--type-ui);
  font-weight: 400;
  letter-spacing: var(--tracking-ui);
  text-transform: none;
  color: var(--color-ink-muted-48);
}

.type-eyebrow--brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  line-height: 1;
}

.type-eyebrow__logo {
  display: block;
  width: 31px;
  height: 22px;
  flex-shrink: 0;
  background: var(--color-primary);
  -webkit-mask-image: url("sanbada-mark.png");
  mask-image: url("sanbada-mark.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.type-lede {
  margin: 0 0 var(--space-3);
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: var(--type-display-lg);
  font-weight: 600;
  line-height: var(--leading-display-lg);
  letter-spacing: var(--tracking-display-lg);
  color: var(--text);
}

.type-kicker {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--type-tagline);
  font-weight: 600;
  letter-spacing: var(--tracking-tagline);
  line-height: var(--leading-tagline);
  text-transform: uppercase;
  color: var(--text);
}

.type-body {
  margin: 0 0 1.15em;
  max-width: 58ch;
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--text-body);
  white-space: pre-line;
}

.type-body strong {
  font-weight: 700;
  color: inherit;
}

.profile-copy {
  color: var(--text);
}

.profile-copy--body {
  margin-top: var(--space-4);
  width: var(--gallery-width);
  max-width: calc(100vw - (var(--gallery-side) * 2));
  margin-left: calc((100vw - var(--gallery-width)) / 2 - var(--page-left));
}

.profile-copy--body .type-body {
  max-width: none;
  width: 100%;
  font-size: var(--type-lead);
  line-height: 1.7;
  letter-spacing: var(--tracking-body);
  white-space: normal;
  text-align: left;
}

.projects-dome > .profile-section[id^="project-"] .profile-copy--body .type-body {
  font-size: var(--type-body);
  line-height: 1.7;
  text-align: center;
}

#ongoing-1 .profile-copy--body .type-body,
#ongoing-2 .profile-copy--body .type-body,
#ongoing-3 .profile-copy--body .type-body {
  font-size: var(--type-body);
}

.projects-dome > .profile-section[id^="project-"] {
  overflow: visible;
}

.projects-dome > .profile-section[id^="project-"] > .type-num--ghost,
#ongoing-1 > .type-num--ghost,
#ongoing-2 > .type-num--ghost,
#ongoing-3 > .type-num--ghost {
  position: absolute;
  z-index: 0;
  top: var(--section-pad-y);
  margin: 0;
  font-size: 520px;
  font-weight: 600;
  line-height: 0.75;
  letter-spacing: -0.06em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  opacity: 0.1;
}

#ongoing-1 > .type-num--ghost,
#ongoing-2 > .type-num--ghost,
#ongoing-3 > .type-num--ghost {
  top: calc(var(--section-pad-y) - 48px);
  color: color-mix(in srgb, #dee3be 42%, #2f3428 58%);
  opacity: 0.07;
}

/* Odd: crop into the left rail */
.projects-dome > .profile-section[id^="project-"] > .type-num--ghost:not(.type-num--ghost-end),
#ongoing-1 > .type-num--ghost,
#ongoing-3 > .type-num--ghost {
  left: calc(-1 * var(--page-left));
  right: auto;
  transform: translate(-24%, -12%);
}

#ongoing-1 > .type-num--ghost,
#ongoing-3 > .type-num--ghost {
  transform: translate(-24%, -58%);
}

/* Even: crop only the trailing digit’s right edge into the right rail */
.projects-dome > .profile-section[id^="project-"] > .type-num--ghost-end,
#ongoing-2 > .type-num--ghost-end {
  left: auto;
  right: calc(-1 * var(--page-left));
  transform: translate(8%, -12%);
}

#ongoing-2 > .type-num--ghost-end {
  transform: translate(8%, -58%);
}

#ongoing-1,
#ongoing-2,
#ongoing-3 {
  position: relative;
  overflow: visible;
}

#ongoing-1 > .ongoing-mosaic-split,
#ongoing-2 > .ongoing-mosaic-split,
#ongoing-3 > .ongoing-mosaic-split {
  position: relative;
  z-index: 1;
}

.projects-dome > .profile-section[id^="project-"] > .profile-copy--body,
.projects-dome > .profile-section[id^="project-"] > .type-sub,
.projects-dome > .profile-section[id^="project-"] > .project-gallery,
.projects-dome > .profile-section[id^="project-"] > .project-media-row {
  position: relative;
  z-index: 1;
}

.projects-dome > .profile-section[id^="project-"] > .type-sub {
  text-align: center;
  font-size: var(--type-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

.projects-dome > .profile-section[id^="project-"] > .profile-copy--body + .type-sub,
.projects-dome > .profile-section[id^="project-"] > .profile-copy--body + .project-gallery,
.projects-dome > .profile-section[id^="project-"] > .profile-copy--body + .project-media-row {
  margin-top: var(--heading-line);
}

/* 01 / 03: label beside gallery, flush to opposite edges */
.project-media-row {
  display: flex;
  align-items: flex-end;
  gap: var(--gallery-gap, 28px);
  box-sizing: border-box;
  width: calc(100% + (2 * var(--page-left)));
  margin-left: calc(-1 * var(--page-left));
  margin-right: 0;
}

.project-media-row + .project-media-row {
  margin-top: var(--space-4);
}

.project-media-row--render {
  justify-content: flex-end;
}

.project-media-row--result {
  justify-content: flex-start;
}

.project-media-row > .project-gallery {
  flex: 0 0 var(--gallery-width);
  width: var(--gallery-width);
  max-width: var(--gallery-width);
  margin: 0;
}

.project-media-row > .type-sub {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  margin: 0;
  font-size: var(--type-tagline);
  line-height: var(--leading-tagline);
  letter-spacing: var(--tracking-tagline);
  white-space: nowrap;
  color: color-mix(in srgb, var(--sage) 68%, var(--olive));
  /* Ghost, a bit stronger than project number ghosts */
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}

.project-media-row--render > .type-sub {
  text-align: right;
}

.project-media-row--result > .type-sub {
  text-align: left;
}

/* Legacy above-label stagger (unused after 01–03 media rows; kept for safety) */
.projects-dome > .profile-section[id^="project-"] > .type-sub + .project-gallery {
  margin-left: calc(var(--page-content-width) - var(--gallery-width) + var(--page-left));
  margin-right: 0;
}

.projects-dome > .profile-section[id^="project-"] > .project-gallery + .type-sub + .project-gallery {
  margin-left: calc(-1 * var(--page-left));
  margin-right: 0;
}

/* Captions align with gallery left edge (same rail as photos) */
.profile-section > .type-sub {
  width: var(--gallery-width);
  max-width: calc(100vw - (var(--gallery-side) * 2));
  margin-left: calc((100vw - var(--gallery-width)) / 2 - var(--page-left));
}

.profile-copy ul.type-body,
ul.type-body {
  margin: 0 0 1.25em;
  padding-left: 1.2em;
  max-width: 58ch;
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--text-body);
  white-space: normal;
}

.profile-copy li,
ul.type-body li {
  margin: 0.35em 0;
}

.profile-copy a {
  color: var(--sage);
  transition: color var(--duration-ui) var(--ease-soft),
    opacity var(--duration-ui) var(--ease-soft);
}

.profile-copy a:hover {
  color: var(--olive);
  opacity: 0.95;
}

.media-placeholder {
  width: 100%;
  min-height: 220px;
  margin: 0 0 var(--space-3);
  background: var(--warm-ivory);
  border: 1px solid var(--hairline);
}

.type-display + .media-placeholder {
  margin-top: var(--space-1);
}

.ongoing-section {
  position: relative;
  left: auto;
  right: auto;
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: var(--section-pad-y) 0;
  overflow: visible;
  border-top: none;
  display: block;
  scroll-margin-top: 0;
  min-height: 0;
}

.ongoing-section__title {
  margin: 0 auto;
  padding: 0;
  max-width: none;
  color: var(--text);
  text-align: center;
  text-shadow: none;
}

.ongoing-entry__title {
  margin: 0 0 var(--space-4);
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--type-display-md);
  font-weight: 700;
  line-height: var(--leading-display-md);
  letter-spacing: var(--tracking-display-md, -0.02em);
  text-align: center;
  color: var(--text);
}

/* THE ONE / BADA: staggered mosaic like team reference */
.ongoing-entry--mosaic > .ongoing-entry__title {
  margin: 0 0 clamp(48px, 6vw, 96px);
  text-align: left;
}

.ongoing-mosaic {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr) minmax(0, 1fr);
  column-gap: clamp(20px, 2.2vw, 40px);
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

.ongoing-mosaic__item {
  margin: 0;
  min-width: 0;
}

.ongoing-mosaic__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
}

.ongoing-mosaic__item--mid {
  margin-top: clamp(140px, 16vw, 260px);
}

.ongoing-mosaic__item--trail {
  margin-top: clamp(56px, 7vw, 140px);
}

.ongoing-mosaic__caption {
  width: 100%;
  max-width: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.ongoing-mosaic__caption .type-body {
  text-align: left;
}

/* THE ONE: mosaic flush left, natural ratios, slightly scaled down */
.ongoing-mosaic-split {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(80px, 8vw, 160px);
  width: calc(100% + (2 * var(--page-left)));
  max-width: none;
  margin-left: calc(-1 * var(--page-left));
  box-sizing: border-box;
  padding-right: var(--page-left);
}

.ongoing-entry--mosaic-split .ongoing-mosaic {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  column-gap: clamp(16px, 1.6vw, 28px);
  grid-template-columns: none;
  width: max-content;
  max-width: none;
  margin: 0;
}

.ongoing-entry--mosaic-split .ongoing-mosaic__item {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
}

.ongoing-entry--mosaic-split .ongoing-mosaic__item img {
  width: auto;
  height: 300px;
  max-width: none;
  aspect-ratio: auto;
  object-fit: contain;
}

#ongoing-2 .ongoing-mosaic__item--mid img {
  height: 220px;
}

#ongoing-3 .ongoing-mosaic__item--mid img {
  height: 220px;
}

#ongoing-3.ongoing-entry--mosaic-split-end .ongoing-mosaic-split {
  justify-content: flex-start;
  width: calc(100% + var(--page-left));
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
}

#ongoing-3 .ongoing-mosaic {
  margin-left: auto;
  margin-right: 0;
}

#ongoing-3 .ongoing-entry__copy {
  flex: 1 1 auto;
  max-width: 520px;
  padding-left: 0;
}

.ongoing-entry--mosaic-split .ongoing-entry__copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 420px;
  margin: 0;
  padding: 0;
}

.ongoing-entry--mosaic-split .ongoing-entry__copy > .ongoing-entry__title {
  margin: 0 0 0.75em;
  text-align: left;
}

.ongoing-entry--mosaic-split .ongoing-entry__copy > .ongoing-mosaic__caption {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* BADA: same form, text left + photos flush right */
.ongoing-entry--mosaic-split-end .ongoing-mosaic-split {
  justify-content: flex-end;
  padding-right: 0;
  padding-left: var(--page-left);
}

#ongoing-1.ongoing-entry--mosaic-split-end .ongoing-mosaic-split {
  align-items: center;
  padding-right: clamp(48px, 5vw, 120px);
}

.ongoing-entry--mosaic-split-end .ongoing-entry__copy {
  flex: 1 1 auto;
}

#ongoing-1.ongoing-entry--mosaic-split-end .ongoing-entry__copy {
  margin-left: calc(clamp(48px, 6vw, 120px) - 10%);
}

.ongoing-entry--mosaic-split-end .ongoing-mosaic {
  margin-left: auto;
}

.ongoing-entry--mosaic-split-end .ongoing-collage {
  margin-left: auto;
  margin-right: 0;
}

#ongoing-1.ongoing-entry--mosaic-split-end .ongoing-collage {
  transform: translateX(-5%);
}

/* CACTURA pair collage — 2 photos, original ratios */
.ongoing-collage {
  position: relative;
  flex: 0 0 auto;
}

.ongoing-collage__item {
  position: absolute;
  margin: 0;
  overflow: hidden;
}

.ongoing-collage__item img {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
}

.ongoing-collage--pair {
  --collage-h-back: 420px;
  --collage-h-front: 260px;

  width: 780px;
  height: var(--collage-h-back);
  max-width: min(780px, 100%);
}

.ongoing-collage__item--back {
  top: 0;
  right: 0;
  z-index: 1;
}

.ongoing-collage__item--back img {
  height: var(--collage-h-back);
}

.ongoing-collage__item--front {
  top: calc((var(--collage-h-back) - var(--collage-h-front)) / 2);
  left: 0;
  z-index: 2;
}

.ongoing-collage__item--front img {
  height: var(--collage-h-front);
}

/* BADA: [1] text [2] [3] with light vertical stagger */
.ongoing-triad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 3vw, 56px);
  width: calc(100% + (2 * var(--page-left)));
  max-width: none;
  margin-left: calc(-1 * var(--page-left));
  padding: 0;
  box-sizing: border-box;
}

.ongoing-triad__item {
  flex: 0 0 auto;
  margin: 0;
  min-width: 0;
}

.ongoing-triad__item img {
  display: block;
  width: auto;
  height: 280px;
  max-width: none;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
}

.ongoing-triad__item--1 {
  align-self: flex-start;
  margin-top: 36px;
}

#ongoing-3 .ongoing-triad {
  padding-left: 0;
  margin-left: calc(-1 * var(--page-left));
}

#ongoing-3 .ongoing-triad__item--1 {
  margin-left: 0;
}

.ongoing-triad__item--1 img {
  height: 300px;
}

.ongoing-triad__item--2 {
  align-self: flex-end;
  margin-bottom: 28px;
}

.ongoing-triad__item--2 img {
  height: 240px;
}

.ongoing-triad__item--3 {
  align-self: flex-start;
  margin-top: 64px;
}

.ongoing-triad__item--3 img {
  height: 290px;
}

.ongoing-entry--mosaic-triad .ongoing-entry__copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 380px;
  margin: 0;
  padding: 0 clamp(8px, 1vw, 24px);
}

.ongoing-entry--mosaic-triad .ongoing-entry__copy > .ongoing-entry__title {
  margin: 0 0 0.75em;
  text-align: left;
}

.ongoing-entry--mosaic-triad .ongoing-entry__copy > .ongoing-mosaic__caption {
  width: 100%;
  max-width: none;
  margin: 0;
}

.ongoing-mosaic--withheld {
  position: relative;
  isolation: isolate;
}

.ongoing-mosaic--withheld .ongoing-mosaic__item,
.ongoing-mosaic--withheld .ongoing-collage__item {
  overflow: hidden;
}

.ongoing-mosaic--withheld img {
  filter: blur(14px);
  transform: scale(1.08);
  transform-origin: center center;
}

.ongoing-mosaic__withheld-label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: clamp(16px, 3vw, 40px);
  box-sizing: border-box;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--type-body);
  font-weight: 600;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  text-transform: uppercase;
  color: #f5f2eb;
  pointer-events: none;
}

/* ——— ABOUT → PROJECTS bridge ——— */

#smooth-wrapper {
  overflow: hidden;
  width: 100%;
  max-width: none;
  min-width: 100%;
  left: 0;
  right: 0;
}

#smooth-content {
  width: 100%;
  max-width: none;
  overflow: visible;
}

.about-bridge {
  --about-bridge-type: var(--type-display-lg);

  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: visible;
  border-top: none;
  min-height: min(72vh, 780px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-1 * var(--page-left));
  margin-top: -1px;
  padding: calc(var(--space-7) + var(--space-5) + var(--heading-line)) 0 var(--space-5);
  box-sizing: border-box;
  text-align: center;
  background: transparent;
}

.about-bridge__orbs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Clip the hero edge; allow capsules to continue into Projects. */
  clip-path: inset(0 0 -200vh 0);
}

.about-bridge__orb {
  position: absolute;
  box-sizing: border-box;
  border-radius: 9999px;
  display: block;
  opacity: 1;
  filter: blur(5px);
  background: radial-gradient(
    circle at 35% 32%,
    var(--color-canvas-parchment) 0%,
    color-mix(in srgb, var(--color-canvas-parchment) 92%, transparent) 64%,
    transparent 100%
  );
  will-change: height, top, opacity;
}

.about-bridge__orb--a {
  width: 72px;
  height: 72px;
  top: 14%;
  left: 7%;
}

.about-bridge__orb--b {
  width: 108px;
  height: 108px;
  top: 6%;
  right: 8%;
}

.about-bridge__orb--c {
  width: 56px;
  height: 56px;
  top: 52%;
  left: 4%;
}

.about-bridge__orb--d {
  width: 84px;
  height: 84px;
  top: 24%;
  left: 18%;
}

.about-bridge__orb--e {
  width: 64px;
  height: 64px;
  top: 74%;
  right: 18%;
}

.about-bridge__orb--f {
  width: 48px;
  height: 48px;
  top: 10%;
  left: 42%;
}

.about-bridge__orb--g {
  width: 96px;
  height: 96px;
  top: 58%;
  right: 6%;
}

.about-bridge__headline,
.about-bridge__cta {
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: var(--about-bridge-type);
  line-height: 1.7;
  letter-spacing: var(--tracking-display-lg);
  text-align: center;
}

.about-bridge__headline {
  position: relative;
  z-index: 1;
  max-width: none;
  width: 100%;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text);
  perspective: 900px;
}

.about-bridge__line {
  display: block;
  white-space: nowrap;
  transform-origin: center bottom;
}

.about-bridge:not([data-motion-played]) .about-bridge__line,
.about-bridge:not([data-motion-played]) ~ .projects-dome .projects-dome__cta {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .about-bridge:not([data-motion-played]) .about-bridge__line,
  .about-bridge:not([data-motion-played]) ~ .projects-dome .projects-dome__cta {
    opacity: 1;
  }
}

.about-bridge__cta,
.projects-dome__cta {
  position: relative;
  z-index: 1;
}

.projects-dome__cta {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: visible;
  pointer-events: none;
}

.projects-dome__cta-text {
  fill: #4c5b82;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* ——— PROJECTS dome — title + 01–08 content ——— */

.projects-dome {
  --projects-dome-bg: var(--color-canvas-parchment);
  --projects-dome-curve: 520px;
  --projects-dome-bridge-gap: 100px;

  position: relative;
  z-index: 1;
  left: auto;
  right: auto;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-1 * var(--page-left));
  margin-right: 0;
  margin-top: var(--projects-dome-bridge-gap);
  margin-bottom: 0;
  padding: 0 0 var(--space-6);
  box-sizing: border-box;
  overflow: visible;
  background: transparent;
  border-radius: 0;
  isolation: isolate;
}

/* Flat body fill below the arch head */
.projects-dome::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--projects-dome-curve) - 1px);
  bottom: 0;
  background: var(--projects-dome-bg);
  z-index: 0;
  pointer-events: none;
}

.projects-dome__head {
  position: relative;
  z-index: 1;
  height: var(--projects-dome-curve);
  margin: 0;
  background: transparent;
}

/* SVG arch cap — shoulders stay transparent so page bg shows through */
.projects-dome__cap {
  position: absolute;
  inset: 0;
  color: var(--projects-dome-bg);
  background: transparent;
  pointer-events: none;
  z-index: 0;
}

.projects-dome__cap svg {
  display: block;
  width: 100%;
  height: 100%;
}

.projects-dome__head-stack {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--page-left) calc(var(--projects-dome-curve) * 0.2);
}

.projects-dome > .profile-section,
.projects-dome__head > .profile-section,
.projects-dome__head-stack > .profile-section {
  position: relative;
  z-index: 2;
}

.projects-section {
  border-top: none;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  scroll-margin-top: 0;
  box-sizing: border-box;
}

.projects-section__title {
  margin: 0 auto;
  text-align: center;
  max-width: none;
}

.profile-canvas .projects-section__title,
.projects-dome .projects-section__title {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.projects-dome > .profile-section:not(.projects-section) {
  width: var(--page-content-width);
  margin-left: var(--page-left);
  border-top: none;
  background: transparent;
  box-sizing: border-box;
}

.projects-dome .profile-section {
  border-top: none;
}

.projects-dome > .profile-section.projects-section {
  border-top: none;
}

/* Cream/sky background bands for ongoing blocks */
.ongoing-panel {
  --ongoing-panel-bg: #dee3be;

  background: var(--ongoing-panel-bg);
  box-sizing: border-box;
  width: calc(100% + (2 * var(--page-left)));
  max-width: none;
  margin-left: calc(-1 * var(--page-left));
  margin-right: 0;
  padding: clamp(56px, 7vw, 112px) 0;
}

/* CACTURA: inset rectangle (left flush, right stops mid-photos) */
.ongoing-panel--cactura {
  --ongoing-panel-bg: #dee3be;

  position: relative;
  display: block;
  isolation: isolate;
  background: transparent;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: clamp(40px, 5vw, 80px) 0 clamp(56px, 7vw, 100px);
  box-sizing: border-box;
}

.ongoing-panel--cactura::before {
  content: "";
  position: absolute;
  z-index: 0;
  /* Tighter band: below NOW ON GOING + gap, inset from panel bottom */
  top: calc(
    var(--section-head-y) + (var(--type-display) * var(--leading-display)) +
      clamp(24px, 3vw, 48px) + (4 * var(--heading-line))
  );
  bottom: calc(clamp(48px, 5.5vw, 84px) + (1 * var(--heading-line)));
  left: calc(-1 * var(--page-left));
  right: clamp(120px, 14vw, 280px);
  background: var(--ongoing-panel-bg);
  pointer-events: none;
  transform: translateX(-5%);
}

.ongoing-panel--cactura > .ongoing-section,
.ongoing-panel--cactura > #ongoing-1 {
  position: relative;
  z-index: 1;
  background: transparent;
}

.ongoing-panel--cactura > .ongoing-section {
  padding-top: 0;
  padding-bottom: calc(clamp(24px, 3vw, 48px) + (3 * var(--heading-line)));
}

/* BADA: inset rectangle (right flush, left gap) */
.ongoing-panel--bada {
  --ongoing-panel-bg: #dee3be;

  position: relative;
  display: block;
  isolation: isolate;
  background: transparent;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: clamp(56px, 7vw, 112px) 0;
  box-sizing: border-box;
}

.ongoing-panel--bada::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: clamp(120px, 14vw, 280px);
  right: calc(-1 * var(--page-left));
  background: var(--ongoing-panel-bg);
  pointer-events: none;
}

.ongoing-panel--bada > .ongoing-mosaic-split {
  position: relative;
  z-index: 1;
  background: transparent;
}

.ongoing-panel.ongoing-entry {
  background: var(--ongoing-panel-bg, #dee3be);
  padding-top: clamp(56px, 7vw, 112px);
  padding-bottom: clamp(56px, 7vw, 112px);
}

.ongoing-panel--bada.ongoing-entry {
  background: transparent;
}

.ongoing-panel .ongoing-mosaic-split,
.ongoing-panel--cactura .ongoing-mosaic-split,
.ongoing-panel--bada .ongoing-mosaic-split,
.ongoing-panel .ongoing-triad {
  width: 100%;
  margin-left: 0;
}

.projects-dome + .ongoing-panel--cactura {
  margin-top: calc(var(--section-lead-y) - var(--section-head-y));
}

.projects-dome + .ongoing-panel--cactura > .ongoing-section {
  padding-top: var(--section-head-y);
  padding-bottom: calc(clamp(24px, 3vw, 48px) + (3 * var(--heading-line)));
}

.projects-dome + .ongoing-section {
  margin-top: calc(var(--section-lead-y) - var(--section-head-y));
  padding-top: var(--section-head-y);
  padding-bottom: var(--section-pad-y);
}

#ongoing,
#ongoing-1,
#ongoing-2,
#ongoing-3 {
  border-top: none;
}

/* Ongoing entries — same gallery rail as projects-dome children (profile-doc already offset) */
#ongoing-1,
#ongoing-2,
#ongoing-3 {
  width: 100%;
  max-width: none;
  margin-left: 0;
  box-sizing: border-box;
}

#ongoing-3 {
  margin-top: calc(3 * var(--heading-line));
}

#process.process-section {
  margin-top: calc(10 * var(--heading-line));
}

#ongoing-1 .project-showcase,
#ongoing-2 .project-showcase,
#ongoing-3 .project-showcase,
#ongoing-1 .project-gallery,
#ongoing-2 .project-gallery,
#ongoing-3 .project-gallery,
#ongoing-1 .profile-copy--body,
#ongoing-2 .profile-copy--body,
#ongoing-3 .profile-copy--body,
#ongoing-1 > .type-sub,
#ongoing-2 > .type-sub,
#ongoing-3 > .type-sub {
  margin-left: 0;
  max-width: var(--gallery-width);
}

.ongoing-entry--mosaic .ongoing-mosaic,
.ongoing-entry--mosaic .ongoing-mosaic__caption,
.ongoing-entry--mosaic-split .ongoing-entry__copy,
.ongoing-entry--mosaic-triad .ongoing-triad,
.ongoing-entry--mosaic-triad .ongoing-entry__copy {
  margin-left: 0;
  max-width: none;
}

.ongoing-entry--mosaic-split .ongoing-entry__copy,
.ongoing-entry--mosaic-triad .ongoing-entry__copy {
  max-width: 420px;
}

#ongoing-3 .ongoing-entry__copy {
  max-width: 520px;
}

.ongoing-entry--mosaic-triad .ongoing-entry__copy {
  max-width: 380px;
}

.projects-dome .project-gallery:not(.project-gallery--feature):not(.project-gallery--feature-lead),
.projects-dome .profile-copy--body,
.projects-dome .profile-section:not(.projects-section) > .type-sub {
  margin-left: 0;
  max-width: var(--gallery-width);
}

/* Lead block: section number on the line above the gallery */
.project-showcase {
  width: var(--gallery-width);
  max-width: calc(100vw - (var(--gallery-side) * 2));
  margin: 0 0 var(--space-4);
  margin-left: calc((100vw - var(--gallery-width)) / 2 - var(--page-left));
}

.projects-dome > .profile-section:not(.projects-section) .project-showcase,
#ongoing-1 .project-showcase,
#ongoing-2 .project-showcase,
#ongoing-3 .project-showcase {
  margin-left: 0;
}

.project-showcase > .type-num {
  position: static;
  margin: 0 0 var(--space-2);
  pointer-events: auto;
}

.project-showcase > .project-gallery {
  width: 100%;
  max-width: none;
  margin: 0;
}

.project-gallery__placeholder {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--color-canvas-parchment);
}

.project-gallery--withheld {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0;
}

.project-gallery--withheld img {
  filter: blur(14px);
  transform: scale(1.08);
  transform-origin: center center;
  border-radius: 0;
}

.project-gallery--withheld img:hover {
  transform: scale(1.08);
}

.project-gallery--withheld::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 0;
  background: color-mix(in srgb, var(--color-ink, #162a43) 28%, transparent);
  pointer-events: none;
}

.project-gallery__withheld-label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: clamp(16px, 3vw, 40px);
  box-sizing: border-box;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--type-tagline);
  font-weight: 600;
  line-height: var(--leading-tagline);
  letter-spacing: var(--tracking-tagline);
  text-transform: uppercase;
  color: #f5f2eb;
  pointer-events: none;
}

.project-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: var(--gallery-width);
  max-width: calc(100vw - (var(--gallery-side) * 2));
  margin: 0 0 var(--space-4);
  margin-left: calc((100vw - var(--gallery-width)) / 2 - var(--page-left));
}

.type-sub + .project-gallery {
  margin-top: 0;
}

.type-num + .project-gallery {
  margin-top: var(--space-2);
}

.type-num + .type-sub {
  margin-top: 0;
}

.project-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  overflow: hidden;
  transform: scale(1);
  transform-origin: center center;
  transition: transform var(--duration-ui) var(--ease-soft);
  will-change: transform;
}

/* Projects 05 / 07: [small][small][large], flush right, natural aspect */
.projects-dome .project-gallery--feature {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--gallery-gap, 28px);
  width: calc(100% + (2 * var(--page-left)));
  max-width: none;
  margin-left: calc(-1 * var(--page-left));
  margin-right: 0;
  grid-template-columns: none;
}

.projects-dome .project-gallery--feature img {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  height: 280px;
  aspect-ratio: auto;
  object-fit: contain;
}

.projects-dome .project-gallery--feature > img:last-child {
  height: 520px;
}

/* Projects 04 / 06 / 08: [large][small][small], flush left, natural aspect */
.projects-dome .project-gallery--feature-lead {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--gallery-gap, 28px);
  width: calc(100% + (2 * var(--page-left)));
  max-width: none;
  margin-left: calc(-1 * var(--page-left));
  margin-right: 0;
  grid-template-columns: none;
}

.projects-dome .project-gallery--feature-lead img {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  height: 280px;
  aspect-ratio: auto;
  object-fit: contain;
}

.projects-dome .project-gallery--feature-lead > img:first-child {
  height: 520px;
}

/* 04 / 06 / 08: copy in gap above smalls, left-aligned */
.projects-dome .project-gallery--copy-inset {
  align-items: stretch;
}

.projects-dome .project-gallery--copy-inset > img:first-child {
  align-self: flex-end;
  height: 520px;
}

/* 05 / 07: copy in gap above smalls, right-aligned */
.projects-dome .project-gallery--copy-inset-end {
  align-items: stretch;
}

.projects-dome .project-gallery--copy-inset-end > img:last-child {
  align-self: flex-end;
  height: 520px;
}

.projects-dome .project-gallery__inset {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--heading-line, 28px);
  min-width: 0;
  flex: 1 1 auto;
}

.projects-dome > .profile-section[id^="project-"] .project-gallery__inset > .profile-copy--body {
  margin: 0;
  width: auto;
  max-width: none;
}

.projects-dome > .profile-section[id^="project-"] .project-gallery--copy-inset .project-gallery__inset > .profile-copy--body .type-body {
  text-align: left;
}

.projects-dome > .profile-section[id^="project-"] .project-gallery--copy-inset-end .project-gallery__inset > .profile-copy--body .type-body {
  text-align: right;
}

.projects-dome .project-gallery--copy-inset-end .project-gallery__smalls {
  justify-content: flex-end;
}

.projects-dome .project-gallery__smalls {
  display: flex;
  align-items: flex-end;
  gap: var(--gallery-gap, 28px);
}

.projects-dome .project-gallery__smalls img {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  height: 280px;
  aspect-ratio: auto;
  object-fit: contain;
}

@media (prefers-reduced-motion: no-preference) {
  .project-gallery img:hover {
    transform: scale(1.012);
  }
}

.project-gallery + .profile-copy--body {
  margin-top: var(--space-3);
}

.projects-dome > .profile-section[id^="project-"] > .type-num + .profile-copy--body {
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
}

.project-gallery + .type-sub {
  margin-top: var(--space-4);
}

/* ——— PROCESS — full-page editorial grid ——— */

.process-section {
  position: relative;
  isolation: isolate;
  left: auto;
  right: auto;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-1 * var(--page-left));
  margin-right: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: var(--section-head-y) 0 var(--section-pad-y);
  margin-top: calc(var(--process-lead-y) - var(--section-head-y));
  overflow: visible;
  border-top: none;
  scroll-margin-top: 0;
  background: transparent;
}

.process-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -10%;
  bottom: 0;
  left: 0;
  right: 0;
  background: #e8f2fa;
  pointer-events: none;
}

.process-section > .type-display,
.process-section > .process-stages {
  position: relative;
  z-index: 1;
}

.process-section > .type-display {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.process-stages {
  --process-row-gap: 48px;
  margin: calc(var(--heading-to-body) + var(--heading-line)) 0 0;
  padding: 0 var(--page-left) var(--process-row-gap);
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.process-stage {
  --process-desc-gap: calc(var(--type-tagline) * 0.5);
  --process-copy-height: calc(
    (var(--type-display-md) * var(--leading-display-md))
    + var(--process-desc-gap)
    + (var(--type-tagline) * 1.5)
  );
  --process-row-gap: 48px;
  /* Extra highlight breathing room under media when a stage is open */
  --process-open-below: 60px;
  /* Wide enough for 04 title + num + button + gaps without overlap */
  --process-row-width: 68rem;
  --process-col-gap: 72px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: calc(100% + (2 * var(--page-left)));
  margin-left: calc(-1 * var(--page-left));
  margin-right: 0;
  padding: var(--process-row-gap) var(--page-left) 0;
  border-bottom: none;
  cursor: pointer;
  transition: background 180ms var(--ease-soft);
}

.process-stage__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: var(--process-col-gap);
  align-items: start;
  box-sizing: border-box;
  width: min(100%, var(--process-row-width));
}

.process-stage__num {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.process-stage__copy {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  /* Match 04’s two-line desc so open/closed highlight height is consistent */
  min-height: calc(
    (var(--type-display-md) * var(--leading-display-md))
    + var(--process-desc-gap)
    + (var(--type-tagline) * 1.5 * 2)
  );
  text-align: left;
  justify-self: stretch;
}

/* Divider sits after row (closed) or after media (open) — last flex child */
.process-stage::after {
  content: "";
  flex: 0 0 auto;
  box-sizing: border-box;
  width: min(100%, var(--process-row-width));
  height: 1px;
  margin-top: var(--process-row-gap);
  background: color-mix(in srgb, var(--text) 14%, transparent);
  pointer-events: none;
}

.process-stage.is-open::after {
  margin-top: var(--process-open-below);
}

.process-stage:hover,
.process-stage:focus-within,
.process-stage.is-open {
  background: rgb(255 255 255 / 42%);
}

/* Last stage: keep spacing, hide stroke */
.process-stage:last-child::after {
  background: transparent;
}

.process-stage:last-child {
  padding-bottom: 0;
}

.process-stage__num,
.process-stage__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-display-md);
  line-height: var(--leading-display-md);
  letter-spacing: var(--tracking-display-md);
}

.process-stage__num {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--text) 38%, transparent);
}

.process-stage__media {
  width: 100%;
  height: 0;
  margin-top: 0;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
  transition:
    height 380ms var(--ease-soft),
    margin-top 380ms var(--ease-soft);
}

.process-stage.is-open .process-stage__media {
  height: 480px;
  margin-top: var(--space-3);
  pointer-events: auto;
}

.process-gallery,
.process-gallery__viewport,
.process-gallery__track {
  height: 100%;
}

.process-gallery {
  width: 100%;
}

.process-gallery__viewport {
  position: relative;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: pan-y;
  outline: none;
  user-select: none;
  container-type: inline-size;
}

.process-gallery__viewport:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-primary-focus);
}

.process-gallery__track {
  display: flex;
  align-items: stretch;
  gap: 24px;
  width: max-content;
  will-change: transform;
}

.process-gallery__card {
  flex: 0 0 calc((100cqi - 48px) / 2.38);
  width: calc((100cqi - 48px) / 2.38);
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: transparent;
}

.process-gallery__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.process-spotlight--boards .process-spotlight__slide {
  background: #fff;
}

.process-spotlight--boards .process-spotlight__slide img {
  object-fit: contain;
}

.process-spotlight {
  --spot-side: 34%;
  --spot-center: 54%;
  --spot-side-h: 72%;
  --spot-current-left: 23%;
  --spot-next-left: 66%;

  position: relative;
  width: 100%;
  height: 100%;
}

.process-spotlight__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: none;
  user-select: none;
  cursor: grab;
  touch-action: none;
}

.process-spotlight__viewport:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-primary-focus);
}

.process-spotlight__slide {
  position: absolute;
  top: 50%;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  transform: translateY(-50%) translateX(var(--spot-drag, 0px));
  transition:
    left var(--duration-ui) var(--ease-soft),
    width var(--duration-ui) var(--ease-soft),
    height var(--duration-ui) var(--ease-soft),
    opacity var(--duration-ui) var(--ease-soft);
  z-index: 1;
}

.process-spotlight__slide[data-slot="prev"] {
  left: 0;
  width: var(--spot-side);
  height: var(--spot-side-h);
  opacity: 0.48;
  cursor: pointer;
  z-index: 1;
}

.process-spotlight__slide[data-slot="current"] {
  left: var(--spot-current-left);
  width: var(--spot-center);
  height: 100%;
  opacity: 1;
  cursor: grab;
  z-index: 3;
}

.process-spotlight__slide[data-slot="next"] {
  left: var(--spot-next-left);
  width: var(--spot-side);
  height: var(--spot-side-h);
  opacity: 0.48;
  cursor: pointer;
  z-index: 1;
}

.process-spotlight__slide[data-slot="off"] {
  left: var(--spot-current-left);
  width: var(--spot-center);
  height: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.process-spotlight__slide:empty {
  background: color-mix(in srgb, var(--text) 10%, transparent);
}

.process-spotlight__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

@media (prefers-reduced-motion: reduce) {
  .process-spotlight__slide {
    transition: none;
  }
}

.process-stage__title {
  font-weight: 600;
  font-style: normal;
  text-transform: none;
  color: var(--text);
  white-space: nowrap;
}

.process-stage__desc {
  margin: var(--process-desc-gap) 0 0;
  max-width: none;
  font-family: var(--font-body);
  font-size: var(--type-tagline);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--tracking-tagline);
  color: var(--text-body);
}

.process-stage__row > .button-icon-circular {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  /* nudge button only: 10% of row width */
  margin-left: 10%;
  width: var(--process-copy-height);
  height: var(--process-copy-height);
  margin-top: 0;
  font-size: calc(var(--process-copy-height) * 0.42);
  background: var(--color-surface-chip);
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 12%, transparent);
  transition: transform 180ms var(--ease-press),
    background var(--duration-ui) var(--ease-soft),
    box-shadow var(--duration-ui) var(--ease-soft);
}

.process-stage__row > .button-icon-circular:hover {
  background: color-mix(in srgb, var(--color-primary) 28%, var(--color-surface-chip));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 18%, transparent);
}

.button-icon-circular {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-surface-chip) 64%, transparent);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 180ms var(--ease-press),
    background var(--duration-ui) var(--ease-soft);
}

.button-icon-circular:hover {
  background: color-mix(in srgb, var(--color-canvas) 88%, transparent);
}

.button-icon-circular:active {
  transform: scale(0.95);
}

.button-icon-circular:focus-visible {
  outline: 2px solid var(--color-primary-focus);
  outline-offset: 2px;
}

/* ——— DESIGN + CONSTRUCTION ——— */

.design-construction-block {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-1 * var(--page-left));
  margin-right: 0;
  overflow: visible;
  border-top: none;
  background: var(--bg);
}

.design-construction-block .design-section {
  position: relative;
  width: var(--page-content-width);
  margin-left: var(--page-left);
  margin-top: calc(var(--section-lead-y) - var(--section-head-y));
  border-top: none;
  padding-top: var(--section-head-y);
  padding-bottom: var(--section-pad-y);
  box-sizing: border-box;
  scroll-margin-top: 0;
}

.design-construction-block #design.design-section {
  margin-top: calc(var(--section-lead-y) - 2 * var(--heading-line) - var(--section-head-y));
}

.design-construction-block .design-section + .design-section {
  margin-top: calc(var(--section-lead-y) - var(--section-head-y));
  padding-top: var(--section-head-y);
}

/* ——— DESIGN — reference panel layout ——— */

.design-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr);
  align-items: stretch;
  gap: clamp(24px, 3vw, 48px);
  min-height: min(72vh, 640px);
  margin-top: var(--heading-to-body);
  padding: var(--spacing-lg);
  box-sizing: border-box;
  border-radius: var(--radius-lg);
  background: var(--color-canvas-parchment);
}

/* Design + Construction: grow services left, keep room for 21em price button */
#design .design-panel,
#construction .design-panel {
  grid-template-columns: minmax(21em, 0.68fr) minmax(0, 1.55fr);
  gap: clamp(20px, 2.4vw, 36px);
}

.design-panel__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
}

.design-panel__copy {
  max-width: 100%;
}

.design-panel__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 11px 22px;
  box-sizing: border-box;
  border: none;
  border-radius: var(--radius-pill);
  background: #162a43;
  text-align: center;
  align-self: stretch;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transition: transform 180ms var(--ease-press);
}

.design-panel__price-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.design-panel__price-cta > .design-section__price-label {
  margin: 0;
  width: auto;
  text-align: left;
  font-size: var(--type-body);
  font-weight: 400;
  letter-spacing: var(--tracking-body);
  line-height: var(--leading-body);
  color: var(--color-ink-muted-80, #3d536b);
}

.design-panel__price-cta .design-panel__cta {
  width: 21em;
  max-width: 100%;
  min-width: 0;
  align-self: flex-start;
  padding: 8px 36px;
  white-space: nowrap;
  box-sizing: border-box;
}

.design-panel__cta.button-primary-active {
  outline: none;
}

.design-panel__cta.button-primary-active:active {
  transform: scale(0.95);
}

.design-panel__cta:focus-visible {
  outline: 2px solid var(--color-primary-focus);
  outline-offset: 2px;
}

.design-panel__cta:active {
  transform: scale(0.95);
}

.design-panel__box {
  min-width: 0;
  min-height: 100%;
  padding: var(--spacing-lg);
  box-sizing: border-box;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--color-canvas);
}

.design-panel__cta .design-section__price-label,
.design-panel__cta .design-section__price-value {
  color: #ffffff;
}

.design-panel__cta .design-section__price-label {
  letter-spacing: 0.14em;
}

.design-panel__cta .design-section__price-value {
  font-size: var(--type-lead);
  font-weight: 400;
  letter-spacing: var(--tracking-lead);
  line-height: var(--leading-lead);
}

.design-panel__cta .design-section__price-value::after {
  content: none;
  display: none;
}

.design-panel__bottom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  width: 100%;
}

.design-panel__note {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-body);
  font-size: var(--type-caption);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--text-muted);
}

.design-section#design .design-section__lead,
.design-section#design .design-section__statement,
.design-section#construction .design-section__lead,
.design-section#construction .design-section__statement {
  text-align: left;
}

.design-section#design .design-section__lead,
.design-section#construction .design-section__lead {
  max-width: 12em;
  font-family: var(--font-display);
  font-size: var(--type-display-md);
  font-weight: 600;
  line-height: var(--leading-display-md);
  letter-spacing: var(--tracking-display-md);
}

#design .design-section__lead,
#construction .design-section__lead {
  margin-bottom: 0;
}

.design-section__lead-line {
  display: block;
}

.design-section#design .design-section__statement,
.design-section#construction .design-section__statement {
  max-width: 17em;
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: var(--type-tagline);
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: var(--tracking-tagline);
  color: color-mix(in srgb, var(--text) 82%, var(--text-body));
}

#design .design-section__price-label--after-copy,
#construction .design-section__price-label--after-copy {
  margin: 1.7em 0 0;
  width: auto;
  text-align: left;
  font-size: var(--type-body);
  font-weight: 400;
  letter-spacing: var(--tracking-body);
  line-height: var(--leading-body);
  color: var(--color-ink-muted-80, #3d536b);
}

#construction .design-panel__note--after-starting {
  margin: 0.55em 0 0;
  max-width: 28em;
}

.design-services {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  max-width: none;
}

.design-services.design-services--panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, auto));
  grid-auto-flow: column;
  gap: clamp(20px, 2.4vw, 36px) clamp(24px, 3vw, 48px);
  height: 100%;
  align-content: start;
}

/* ——— DESIGN — service index ——— */

.design-section {
  position: relative;
  padding-bottom: var(--section-pad-y);
}

.design-section__copy {
  padding-bottom: 0;
}

.design-section__lead {
  margin: 0 0 var(--space-2);
  max-width: 100%;
  white-space: normal;
  font-family: var(--font-display);
  font-size: var(--type-heading);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  color: var(--text);
}

.design-section__statement {
  margin: 0 0 var(--space-5);
  max-width: 32ch;
  font-family: var(--font-body);
  font-size: var(--type-heading);
  font-weight: 400;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-transform: none;
  color: color-mix(in srgb, var(--text) 88%, var(--text-body));
}

.design-services__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  align-content: start;
  min-width: 0;
}

.design-services__num {
  font-family: var(--font-body);
  font-size: var(--type-heading);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-variant-numeric: tabular-nums;
  color: var(--olive);
  transition: color var(--duration-ui) var(--ease-soft);
}

#design .design-services__num {
  color: #84a5c6;
}

.design-services__name {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--type-heading);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: var(--text);
  transition: color var(--duration-ui) var(--ease-soft);
}

.design-services__item:hover .design-services__num,
.design-services__item:hover .design-services__name {
  color: var(--sage);
}

#design .design-services__item:hover .design-services__num {
  color: #84a5c6;
}

.design-section__price {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2em;
  width: max-content;
  max-width: 100%;
  margin: 80px 0 0;
  margin-left: 0;
  text-align: left;
  pointer-events: none;
}

.design-section__price-block {
  position: relative;
  z-index: 1;
  width: max-content;
  max-width: min(36ch, 100%);
  margin: 80px 0 0;
  margin-left: 0;
  text-align: left;
  pointer-events: none;
}

.design-section__price-block .design-section__price {
  margin: 0;
  margin-left: 0;
}

.design-section__price-label {
  font-family: var(--font-body);
  font-size: var(--type-ui);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  line-height: var(--leading-ui);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sage) 78%, var(--olive));
}

.design-section__price-value {
  position: relative;
  display: inline-block;
  padding-bottom: 0.28em;
  font-family: var(--font-body);
  font-size: var(--type-heading);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  color: var(--sage);
}

.design-section__price-value--plain {
  padding-bottom: 0;
}

/* Refined hairline accent under Design price only */
.design-section__price-value::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.04em;
  width: 100%;
  height: 1.5px;
  background: linear-gradient(
    90deg,
    var(--sage) 0%,
    var(--sage) 72%,
    color-mix(in srgb, var(--sage) 18%, transparent) 100%
  );
  pointer-events: none;
}

.design-section__price-value--plain::after {
  content: none;
  display: none;
}

.design-section__price-note {
  margin: var(--space-2) 0 0;
  max-width: 38ch;
  font-family: var(--font-body);
  font-size: var(--type-caption);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: normal;
  text-align: left;
}

/* ——— ScrollTrigger: SVG text mask (CodePen qBbBLyB) ——— */

.explore-mask {
  position: relative;
  width: 100%;
  height: 240vh;
  background: var(--bg);
  overflow: hidden;
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: 99px;
  text-align: center;
}

.explore-mask__main {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(100%, 1200px);
  height: 100vh;
  margin-left: max(-50%, -600px);
  background: #fff;
  overflow: hidden;
}

.explore-mask__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.explore-mask text,
.explore-mask .explore-mask__copy {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: 54px;
  letter-spacing: -0.03em;
}

.explore-mask__arrow-btn {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .explore-mask {
    height: 100vh;
  }

  .explore-mask__main {
    height: 100%;
  }
}

/* ——— Contact: full-viewport 3D card deck ——— */

.archive-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  border-top: none;
  background: #ffffff;
  overflow: hidden;
  scroll-margin-top: 0;
}

.archive-section #scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  background: #ffffff;
}

.archive-ui {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  font-size: var(--type-ui);
  letter-spacing: var(--tracking-ui);
  color: var(--color-ink);
}

.archive-ui__copy {
  position: absolute;
  top: 0;
  left: var(--page-left);
  width: var(--page-content-width);
  padding: var(--section-pad-y) 0 0;
  box-sizing: border-box;
  pointer-events: none;
}

.archive-ui__copy .type-statement {
  margin: 0;
  color: var(--text);
}

.archive-ui__tools {
  position: absolute;
  right: 32px;
  bottom: 30px;
  display: flex;
  gap: 10px;
  pointer-events: auto;
}

.archive-ui__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full, 9999px);
  border: none;
  background: color-mix(in srgb, var(--color-surface-chip) 64%, transparent);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 180ms var(--ease-press),
    background var(--duration-ui) var(--ease-soft);
}

.archive-ui__icon:active {
  transform: scale(0.95);
}

.archive-ui__icon:hover {
  background: color-mix(in srgb, var(--color-canvas) 88%, transparent);
}

.archive-ui__loading {
  position: absolute;
  left: 32px;
  bottom: 30px;
  font-family: var(--font-body);
  font-size: var(--type-ui);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--color-ink-muted-48);
  opacity: 1;
  transition: opacity 0.6s ease;
}

.archive-ui__loading.is-hidden {
  opacity: 0;
}

.archive-card-meta {
  position: fixed;
  z-index: 6;
  left: 50%;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: min(560px, 92vw);
  margin: 0;
  padding: 0;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 0);
  transition: opacity 0.55s var(--ease-soft), visibility 0.55s var(--ease-soft);
}

.archive-card-meta.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body:not(.archive-in-view) .archive-card-meta {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.archive-card-meta__name,
.archive-card-meta__facts {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--color-primary);
}

.archive-card-meta__name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.archive-card-meta__facts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.archive-card-meta__line {
  margin: 0;
}

.archive-card-meta__label {
  font-weight: 700;
}

.archive-card-meta__facts a {
  color: inherit;
  text-decoration: none;
}

.archive-card-meta__facts a:hover {
  text-decoration: underline;
}

.archive-card-meta__cta.site-header__cta {
  align-self: center;
  margin-top: 8px;
  pointer-events: auto;
  color: #ffffff;
  background: #162a43;
  box-shadow: none;
}

.archive-card-meta__cta.site-header__cta::after {
  color: #ffffff;
  opacity: 1;
}

.archive-card-meta__cta.site-header__cta:hover {
  background: #162a43;
  color: #ffffff;
}