/* ==========================================================================
   DELVANO — Page compositions

   Page-level layout only: how the approved sections are arranged, and nothing
   else. Reusable pieces live in components.css, the type scale in base.css and
   the values in tokens.css. If a rule here would make sense on another page,
   it belongs in components.css instead.

   Sections are named after the approved references they reconstruct.
   ========================================================================== */

/* Font faces are intentionally unlayered — @font-face does not take part
   in the cascade, so a layer would add nothing but a constraint. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer pages {
/* ==========================================================================
   HOME — hero (ref 01)
   Editorial text block left, light-shaft image bleeding off the right edge.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(94svh, 62rem);
  padding-block: 9rem var(--space-7);
  overflow: hidden;
}


.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--margin-x);
}


.hero__content {
  /* Wide enough to hold the longest authored line at the full 128px display
     size (693px). A body-font measure would clip it and force a re-wrap.
     This was previously restated at the bottom of the file; it is single now. */
  max-width: min(100%, 46rem);
}


.hero__eyebrow {
  margin-bottom: var(--space-4);
}


.hero__title {
  margin-bottom: var(--space-4);
}


.hero__lede {
  max-width: 46ch;
  margin-bottom: var(--space-5);
}


.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}


/* Image plate — bleeds to the viewport edge, not the content edge. */
.hero__media {
  position: absolute;
  z-index: 1;
  inset-block: 0;
  inset-inline-end: 0;
  width: clamp(30rem, 52vw, 56rem);
  pointer-events: auto;
}


.hero__media .media {
  height: 100%;
  --media-ratio: auto;
}


/* Long horizontal falloff so the plate dissolves into the text column
   instead of ending on a hard vertical seam. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      var(--obsidian) 0%,
      rgb(var(--obsidian-rgb) / 0.92) 18%,
      rgb(var(--obsidian-rgb) / 0.45) 42%,
      transparent 72%
    ),
    linear-gradient(180deg, rgb(var(--obsidian-rgb) / 0.55) 0%, transparent 22%),
    linear-gradient(0deg, var(--obsidian) 0%, transparent 24%);
}


/* Scroll cue (ref 01) */
.scroll-cue {
  position: absolute;
  z-index: 3;
  inset-block-end: var(--space-5);
  inset-inline-start: var(--margin-x);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: calc(var(--content-max) - var(--margin-x) * 2);
}


.scroll-cue__label {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--stone);
}


.scroll-cue__track {
  position: relative;
  width: clamp(6rem, 14vw, 14rem);
  height: 1px;
  background-color: var(--hairline-strong);
}


.scroll-cue__dot {
  position: absolute;
  inset-block-start: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border: 1px solid var(--stone);
  border-radius: 50%;
  animation: scroll-cue-travel 3.4s var(--ease-in-out) infinite;
}


@keyframes scroll-cue-travel {
  0%,
  8% {
    left: 0;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  92%,
  100% {
    left: calc(100% - 9px);
    opacity: 0;
  }
}


@media (prefers-reduced-motion: reduce) {
  .scroll-cue__dot {
    animation: none;
    left: calc(100% - 9px);
  }
}


@media (max-width: 1023px) {
  .hero {
    min-height: 0;
    padding-block: var(--hero-top-compact) 0;
    display: block;
  }

  .hero__media {
    position: relative;
    inset: auto;
    width: auto;
    margin-top: var(--space-5);
    margin-inline: calc(-1 * var(--margin-x));
  }

  .hero__media .media {
    --media-ratio: 4 / 3;
    height: auto;
  }

  /* Vertical falloff instead of horizontal once the image sits below. */
  .hero__media::after {
    background: linear-gradient(
        180deg,
        var(--obsidian) 0%,
        rgb(var(--obsidian-rgb) / 0.5) 14%,
        transparent 40%
      ),
      linear-gradient(0deg, var(--obsidian) 0%, transparent 26%);
  }

  .scroll-cue {
    position: static;
    padding-inline: var(--margin-x);
    padding-block: var(--space-4) 0;
    margin-inline: auto;
  }
}


@media (max-width: 767px) {
  .scroll-cue__track {
    flex: 1;
  }
}


/* Ref 01 recomposes the Home hero rather than stacking it: below the desktop
   layout it is pure typography on Obsidian, and the first image on the page is
   the AURORA card. The plate is a *side* element — once it cannot sit beside
   the text it earns nothing, and stacking it turns the hero into a 1211px
   scroll that buries the cue. That is the "shrink the desktop" §18 forbids. */
@media (max-width: 1023px) {
  .hero__media {
    display: none;
  }

  .hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 76svh;
    padding-block: var(--hero-top-compact) var(--space-5);
  }

  .hero__inner {
    margin-block: auto;
  }

  .scroll-cue {
    padding-block: var(--space-5) 0;
  }
}


/* ==========================================================================
   Section header — label row + editorial heading, reused site-wide
   ========================================================================== */

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-7);
}


.section-head__label {
  grid-column: 1;
}


.section-head__action {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  padding-top: 2px;
}


.section-head__title {
  grid-column: 1 / -1;
  margin-top: var(--space-4);
}


.section-head__lede {
  grid-column: 1 / -1;
  margin-top: var(--space-3);
}


@media (max-width: 639px) {
  .section-head {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: var(--space-5);
  }

  .section-head__action {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .section-head__title {
    order: -1;
  }

  .section-head__label {
    order: -2;
  }
}


/* ==========================================================================
   HOME — 01 Selected work (ref 01)
   ========================================================================== */

.work-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}


.work-strip .project-card__media .media {
  /* Ref 01 shows the three cards as landscape plates in a row, not portrait
     tiles — roughly 5:3 against the card width. */
  --media-ratio: 5 / 3;
}


@media (max-width: 899px) {
  .work-strip {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .work-strip .project-card__media .media {
    --media-ratio: 16 / 10;
  }
}


/* Full Experience — the signature offer carries more weight (spec §4) */
.full-experience {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-7);
  padding: var(--space-6);
  border: 1px solid var(--hairline-strong);
  background:
    radial-gradient(
      120% 140% at 88% 12%,
      rgb(var(--bronze-rgb) / 0.13) 0%,
      transparent 62%
    ),
    var(--obsidian-raised);
}


.full-experience__label {
  margin-bottom: var(--space-3);
}


.full-experience__title {
  margin-bottom: var(--space-3);
}


.full-experience__copy {
  color: var(--ink-muted);
  max-width: 40ch;
  margin-bottom: var(--space-4);
}


@media (max-width: 899px) {
  .full-experience {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-4);
  }
}


/* ==========================================================================
   HOME — 03 Perception (spec §9; no reference board, built in the same
   language as the approved Approach band)
   ========================================================================== */

.perception {
  display: grid;
  /* The headline column carries more weight than the supporting copy, which
     also keeps its type in the same size family as the full-width section
     headings on this page rather than dropping a step below them. */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-6);
  align-items: end;
}


.perception__copy {
  max-width: 44ch;
}


.perception-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  margin-top: var(--space-7);
  border-top: 1px solid var(--hairline);
}


.perception-flow__node {
  position: relative;
  padding: var(--space-4) var(--space-3) 0 0;
}


.perception-flow__node::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background-color: var(--bronze);
  opacity: 0.32;
  transform-origin: left;
}


.perception-flow__node:first-child::before,
.perception-flow__node:last-child::before {
  opacity: 0.9;
}


.perception-flow__marker {
  display: block;
  width: 7px;
  height: 7px;
  margin-bottom: var(--space-3);
  border: 1px solid var(--bronze);
  transform: translateY(-3.5px);
}


.perception-flow__node:first-child .perception-flow__marker,
.perception-flow__node:last-child .perception-flow__marker {
  background-color: var(--bronze);
}


.perception-flow__label {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--stone);
  line-height: 1.5;
}


.perception-flow__node:first-child .perception-flow__label,
.perception-flow__node:last-child .perception-flow__label {
  color: var(--ivory);
}


@media (max-width: 899px) {
  .perception {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .perception-flow {
    grid-template-columns: minmax(0, 1fr);
    border-top: 0;
    margin-top: var(--space-5);
  }

  .perception-flow__node {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--hairline);
  }

  .perception-flow__node::before {
    display: none;
  }

  .perception-flow__marker {
    margin-bottom: 0;
    transform: none;
  }
}


/* ==========================================================================
   HOME — 04 Approach (ref 01: four numerals joined by hairlines)
   ========================================================================== */

.approach {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5) var(--gutter);
}


.approach .step {
  border-top: 0;
  padding-top: 0;
}


@media (max-width: 1023px) {
  .approach {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .approach__item:nth-child(2) .approach__line,
  .approach__item:nth-child(2) .approach__tip {
    display: none;
  }
}


@media (max-width: 599px) {
  .approach {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .approach__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: baseline;
    padding-top: var(--space-4);
    border-top: 1px solid var(--hairline);
  }

  .approach__rail {
    margin-bottom: 0;
  }

  .approach__line,
  .approach__tip {
    display: none !important;
  }

  .approach .step__index {
    font-size: var(--text-h4);
  }
}


/* ==========================================================================
   HOME — 05 Studio preview (ref 01: text left, architecture bleeding right)
   ========================================================================== */

.studio-preview {
  position: relative;
  overflow: hidden;
  padding-block: 0;
}


.studio-preview__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--section-y);
}


.studio-preview__action {
  margin-top: var(--space-4);
}

.studio-preview__copy {
  max-width: 42ch;
}


.studio-preview__media {
  position: absolute;
  z-index: 1;
  inset-block: 0;
  inset-inline-end: 0;
  width: clamp(26rem, 50vw, 52rem);
}


.studio-preview__media .media {
  height: 100%;
  --media-ratio: auto;
}


.studio-preview__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(
      90deg,
      var(--obsidian) 0%,
      rgb(var(--obsidian-rgb) / 0.86) 22%,
      rgb(var(--obsidian-rgb) / 0.3) 54%,
      transparent 82%
    ),
    linear-gradient(180deg, var(--obsidian) 0%, transparent 18%),
    linear-gradient(0deg, var(--obsidian) 0%, transparent 18%);
}


@media (max-width: 899px) {
  .studio-preview__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--section-y) 0;
  }

  .studio-preview__media {
    position: relative;
    inset: auto;
    width: auto;
    margin-inline: calc(-1 * var(--margin-x));
    margin-top: var(--space-5);
  }

  .studio-preview__media .media {
    --media-ratio: 16 / 10;
    height: auto;
  }

  .studio-preview__media::after {
    background: linear-gradient(
        180deg,
        var(--obsidian) 0%,
        transparent 26%
      ),
      linear-gradient(0deg, var(--obsidian) 0%, transparent 20%);
  }
}


/* ==========================================================================
   Closing CTA band — ivory inversion (ref 01, ref 05)
   ========================================================================== */

.closing {
  position: relative;
  overflow: hidden;
  background-color: var(--surface);
  color: var(--ink);
}


.closing__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--section-y);
}


.closing__title {
  margin-block: var(--space-3) var(--space-5);
}


.closing__media {
  position: absolute;
  z-index: 1;
  inset-block: 0;
  inset-inline-end: 0;
  width: clamp(16rem, 30vw, 30rem);
}


.closing__media .media {
  height: 100%;
  --media-ratio: auto;
}


.closing__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(
    90deg,
    var(--surface) 0%,
    rgb(var(--ivory-rgb) / 0.6) 26%,
    transparent 68%
  );
}


.closing[data-tone="light"] .closing__aside {
  color: var(--ink-muted);
}


@media (max-width: 899px) {
  .closing__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .closing__media {
    display: none;
  }
}


/* Dark closing variant used on case studies and Work */
.closing--dark {
  background-color: var(--obsidian);
  color: var(--ivory);
}


/* ==========================================================================
   WORK (ref 02)
   Project-first and spacious. With three concept projects the reference's
   filter row and dense mosaic would add noise rather than understanding,
   so each project gets a full editorial row instead.
   ========================================================================== */

.work-hero__title {
  margin-block: var(--space-4) var(--space-4);
}


.work-list {
  display: flex;
  flex-direction: column;
  gap: var(--section-y);
}


.work-entry {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
}


/* Alternate the reading direction so the page breathes down the scroll. */
.work-entry:nth-child(even) .work-entry__media {
  order: 2;
}


.work-entry__media .media {
  /* Ref 02 keeps project imagery wide and cinematic rather than boxy. */
  --media-ratio: 3 / 2;
}


.work-entry__index {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bronze);
}


.work-entry__name {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--space-2);
}


.work-entry__meta {
  font-size: var(--text-small);
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
}


.work-entry__idea {
  margin-bottom: var(--space-3);
}


.work-entry__copy {
  max-width: 44ch;
  margin-bottom: var(--space-4);
}


.work-entry__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
}


@media (max-width: 899px) {
  .work-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .work-entry:nth-child(even) .work-entry__media {
    order: 0;
  }

  .work-entry__media {
    margin-inline: calc(-1 * var(--margin-x));
  }

  .work-entry__media .media {
    --media-ratio: 3 / 2;
  }
}


/* Post-project statement (spec §10) */
.statement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-5) var(--space-6);
  align-items: start;
}


.statement__eyebrow {
  padding-top: 0.6em;
}


.statement__copy {
  margin-top: var(--space-4);
  max-width: 40ch;
}


@media (max-width: 899px) {
  .statement {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
}


/* ==========================================================================
   CASE STUDY template (ref 03, applied to refs 08–11)
   Narrative order (spec §11):
   Hero → Challenge → Strategy → Identity → Digital → Outcome → Next → CTA

   Client colour worlds live on [data-project] and never leak into the
   DELVANO chrome: the header, footer and closing CTA keep the studio tokens.
   ========================================================================== */

.cs-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--hero-top) 0;
  background-color: var(--surface);
  color: var(--ink);
}


.cs-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-6) var(--section-y);
}


.cs-hero__back {
  margin-bottom: var(--space-6);
}


.cs-hero__badge {
  margin-bottom: var(--space-3);
}


.cs-hero__name {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  line-height: 0.92;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-3);
}


.cs-hero__meta {
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-5);
}


.cs-hero__idea {
  margin-bottom: var(--space-3);
}


.cs-hero__copy {
  max-width: 42ch;
}


.cs-hero__media {
  position: absolute;
  z-index: 1;
  inset-block: 0;
  inset-inline-end: 0;
  width: clamp(26rem, 48vw, 50rem);
}


.cs-hero__media .media {
  height: 100%;
  --media-ratio: auto;
}


.cs-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(
      90deg,
      var(--surface) 0%,
      color-mix(in srgb, var(--surface) 85%, transparent) 24%,
      color-mix(in srgb, var(--surface) 25%, transparent) 58%,
      transparent 84%
    ),
    linear-gradient(180deg, var(--surface) 0%, transparent 20%),
    linear-gradient(0deg, var(--surface) 0%, transparent 18%);
}


@media (max-width: 899px) {
  .cs-hero {
    padding-block: var(--header-clearance) 0;
  }

  .cs-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--space-4) 0;
  }

  .cs-hero__back {
    margin-bottom: var(--space-4);
  }

  .cs-hero__media {
    position: relative;
    inset: auto;
    width: auto;
    margin-inline: calc(-1 * var(--margin-x));
    margin-top: var(--space-5);
  }

  .cs-hero__media .media {
    /* Refs 04/05/06 and 03 show the stacked plate as a shallow band, not a
       full 4:3 block that pushes the hero past a screen and a half. */
    --media-ratio: 3 / 2;
    height: auto;
  }

  .cs-hero__media::after {
    background: linear-gradient(180deg, var(--surface) 0%, transparent 24%),
      linear-gradient(0deg, var(--surface) 0%, transparent 16%);
  }
}


/* --- Narrative sections --------------------------------------------------- */

.cs-body {
  background-color: var(--surface);
  color: var(--ink);
}


.cs-chapter {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--section-y-tight);
  border-top: 1px solid var(--hairline);
}


.cs-chapter--reverse .cs-chapter__media {
  order: -1;
}


.cs-chapter--full {
  grid-template-columns: minmax(0, 1fr);
}


.cs-chapter__index {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-h4);
  color: var(--project-accent-text, var(--bronze));
  margin-bottom: var(--space-2);
}


.cs-chapter__title {
  margin-bottom: var(--space-3);
}


.cs-chapter__copy {
  max-width: 42ch;
  color: var(--ink-muted);
  line-height: var(--leading-relaxed);
}


.cs-chapter__copy + .cs-chapter__copy {
  margin-top: var(--space-2);
}

/* The one sentence per chapter that is set at full ink rather than muted —
   the project's own words, lifted out of the surrounding copy.

   The selector is compounded rather than single: this paragraph is also a
   .cs-chapter__copy following another, so it is matched by the adjacent-sibling
   rule above at (0,2,0). A lone .cs-chapter__line would lose to it and inherit
   the tighter space-2 gap. Compounding ties the specificity and source order
   settles it. The inline style this replaces never had to care — inline beats
   every selector, which is exactly what made it easy to write and easy to
   forget. */
.cs-chapter__copy.cs-chapter__line {
  color: var(--ink);
  margin-top: var(--space-4);
}


.cs-chapter__media .media {
  --media-ratio: 4 / 3;
}


@media (max-width: 899px) {
  .cs-chapter {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .cs-chapter--reverse .cs-chapter__media {
    order: 0;
  }

  .cs-chapter__media {
    margin-inline: calc(-1 * var(--margin-x));
  }
}


/* --- Next project --------------------------------------------------------- */

.cs-next {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--obsidian);
  color: var(--ivory);
}


.cs-next__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-7);
}


.cs-next__label {
  display: block;
  margin-bottom: var(--space-2);
}


.cs-next__name {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 1;
  letter-spacing: var(--tracking-display);
}


.cs-next__media {
  position: absolute;
  z-index: 1;
  inset-block: 0;
  inset-inline-end: 0;
  width: clamp(14rem, 34vw, 34rem);
  opacity: 0.5;
  transition: opacity var(--dur-ui-slow) var(--ease-out),
    transform var(--dur-ui-slow) var(--ease-editorial);
}


.cs-next__media .media {
  height: 100%;
  --media-ratio: auto;
}


.cs-next__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(
    90deg,
    var(--obsidian) 0%,
    rgb(var(--obsidian-rgb) / 0.72) 34%,
    transparent 92%
  );
}


@media (hover: hover) and (pointer: fine) {
  .cs-next:hover .cs-next__media,
  .cs-next:focus-visible .cs-next__media {
    opacity: 0.8;
    transform: scale(1.03);
  }
}


.cs-next__arrow {
  font-size: 1.5rem;
  color: var(--bronze);
  transition: transform var(--dur-micro) var(--ease-out);
}


.cs-next:hover .cs-next__arrow,
.cs-next:focus-visible .cs-next__arrow {
  transform: translateX(8px);
}


/* --------------------------------------------------------------------------
   Project colour worlds — taken from the approved identity boards.
   Scoped to the case-study body; the DELVANO header, footer and closing
   CTA keep the studio palette so the two identities never blur.
   -------------------------------------------------------------------------- */

/* AURORA — V2 approved board.
   The board's visual direction is "Ivory, Warm Beige, Soft Taupe, Deep Green,
   Bronze" with natural, soft lighting, so the case study reads light. That
   also puts the approved AURORA imagery, which is warm and high-key, on a
   ground it was shot for. */
[data-project="aurora"] {
  --project-accent: #b5966d;
  /* Bronze is 2.5:1 on Ivory — below AA for small text. Swatches and marks
     keep the exact board hex; text steps to a darker tone of the same hue. */
  --project-accent-text: #7a5d34;
  /* The V2 board names Instrument Serif for titles and Inter for body —
     the same faces as the global identity, so AURORA needs no extra webfont. */
  --font-project-display: var(--font-display);
  --surface: #f2efe8;
  --surface-raised: #e8e2d6;
  --ink: #1f2a24;
  /* Board Stone #A6A198 is 2.4:1 on Ivory; secondary copy uses a darker
     neutral of the same family. */
  --ink-muted: #6a6659;
  --hairline: rgb(31 42 36 / 0.16);
  --hairline-strong: rgb(31 42 36 / 0.3);
}


/* NEXORA — V2 approved board. Cold, deep and blue; the purple of the earlier
   board is gone and must not reappear. */
[data-project="nexora"] {
  --project-accent: #2563eb;
  /* #2563EB is 3.5:1 on the board's Void — below AA for small text. Marks and
     swatches keep it; text steps to a lighter tint of the same hue. */
  --project-accent-text: #6d9bff;
  --font-project-display: "Sora", var(--font-ui);
  --surface: #0a0f16;
  --surface-raised: #111827;
  --ink: #e6ecf3;
  --ink-muted: #8fa0b8;
  --hairline: rgb(230 236 243 / 0.15);
  --hairline-strong: rgb(230 236 243 / 0.28);
}


/* VERIDA — V2 approved board. Stone and sand ground, olive and forest as the
   living accents. Still the brightest of the three (spec §11). */
[data-project="verida"] {
  --project-accent: #5a6a4f;
  /* Forest, the board's own darkest green, carries small text at 9.5:1. */
  --project-accent-text: #2e3b2e;
  --font-project-display: "Cormorant Garamond", var(--font-display);
  --surface: #e7e3da;
  --surface-raised: #cbbba0;
  --ink: #0e0e0e;
  /* Board Taupe #8F8977 is 2.7:1 on Stone; secondary copy darkens it. */
  --ink-muted: #5c574b;
  --hairline: rgb(14 14 14 / 0.16);
  --hairline-strong: rgb(14 14 14 / 0.3);
}


/* VERIDA keeps Cormorant Garamond, which carries a Light weight. */
[data-project="verida"] .cs-hero__name,
[data-project="verida"] .cs-chapter__title,
[data-project="verida"] .cs-hero__idea,
[data-project="verida"] .specimen__sample--display {
  font-family: var(--font-project-display);
  font-weight: 300;
}


/* AURORA runs on Instrument Serif, which ships a single 400 weight — asking
   for 300 here would either synthesise or silently snap back. */
[data-project="aurora"] .cs-hero__name,
[data-project="aurora"] .cs-chapter__title,
[data-project="aurora"] .cs-hero__idea,
[data-project="aurora"] .specimen__sample--display {
  font-family: var(--font-project-display);
  font-weight: 400;
}


/* NEXORA is a technology brand: its display face is a geometric sans. */
[data-project="nexora"] .cs-chapter__title,
[data-project="nexora"] .cs-hero__idea,
[data-project="nexora"] .specimen__sample--display {
  font-family: var(--font-project-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}


[data-project="nexora"] .cs-hero__name {
  font-family: var(--font-project-display);
  font-weight: 400;
  letter-spacing: 0.08em;
}


/* The concept badge picks up the project accent inside a case study. */
[data-project] .concept-badge {
  color: var(--project-accent-text);
  border-color: color-mix(in srgb, var(--project-accent) 45%, transparent);
}


/* Project webfonts are only requested on the pages that use them. */






/* ==========================================================================
   SERVICES (ref 04)
   ========================================================================== */

.split-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--hero-top) 0;
}


.split-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-6) var(--section-y);
}


.split-hero__title {
  margin-block: var(--space-4) var(--space-4);
}


.split-hero__actions {
  margin-top: var(--space-5);
}


.split-hero__media {
  position: absolute;
  z-index: 1;
  inset-block: 0;
  inset-inline-end: 0;
  width: clamp(26rem, 46vw, 48rem);
}


.split-hero__media .media {
  height: 100%;
  --media-ratio: auto;
}


.split-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(
      90deg,
      var(--obsidian) 0%,
      rgb(var(--obsidian-rgb) / 0.88) 22%,
      rgb(var(--obsidian-rgb) / 0.35) 56%,
      transparent 84%
    ),
    linear-gradient(180deg, var(--obsidian) 0%, transparent 20%),
    linear-gradient(0deg, var(--obsidian) 0%, transparent 16%);
}


@media (max-width: 899px) {
  .split-hero {
    padding-block: var(--header-clearance) 0;
  }

  .split-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--space-4) 0;
  }

  .split-hero__media {
    position: relative;
    inset: auto;
    width: auto;
    margin-inline: calc(-1 * var(--margin-x));
    margin-top: var(--space-5);
  }

  .split-hero__media .media {
    /* Refs 04/05/06 and 03 show the stacked plate as a shallow band, not a
       full 4:3 block that pushes the hero past a screen and a half. */
    --media-ratio: 3 / 2;
    height: auto;
  }

  .split-hero__media::after {
    background: linear-gradient(180deg, var(--obsidian) 0%, transparent 26%),
      linear-gradient(0deg, var(--obsidian) 0%, transparent 18%);
  }
}


/* --- Expertise rows ------------------------------------------------------- */

.expertise {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  padding-block: var(--section-y-tight);
  border-top: 1px solid var(--hairline);
}


.expertise__index {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-h4);
  color: var(--bronze);
  margin-bottom: var(--space-2);
}


.expertise__title {
  margin-bottom: var(--space-3);
}


.expertise__copy {
  color: var(--ink-muted);
  max-width: 34ch;
  margin-bottom: var(--space-4);
}


.expertise__media .media {
  --media-ratio: 5 / 4;
}


@media (max-width: 1023px) {
  .expertise {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4) var(--space-5);
  }

  .expertise__media {
    grid-column: 1 / -1;
    order: 3;
  }
}


@media (max-width: 767px) {
  .expertise {
    grid-template-columns: minmax(0, 1fr);
  }

  .expertise__media {
    margin-inline: calc(-1 * var(--margin-x));
  }
}


/* --- Full Experience, page-level (spec §12: strongest emphasis) ----------- */

.signature {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}


.signature__inner {
  position: relative;
  z-index: 2;
  padding-block: var(--section-y);
}


.signature__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
      90% 120% at 80% 8%,
      rgb(var(--bronze-rgb) / 0.16) 0%,
      transparent 60%
    ),
    radial-gradient(
      70% 100% at 12% 96%,
      rgb(var(--bronze-rgb) / 0.08) 0%,
      transparent 62%
    );
}


.signature__title {
  margin-block: var(--space-3) var(--space-4);
}


.signature__flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  margin-block: var(--space-7) var(--space-6);
}


@media (max-width: 767px) {
  .signature__flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--gutter);
    margin-block: var(--space-5) var(--space-4);
  }
}


/* ==========================================================================
   STUDIO (ref 05)
   ========================================================================== */

.belief {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}


.belief__title .accent-line {
  display: block;
  color: var(--bronze);
}


.belief__body p + p {
  margin-top: var(--space-3);
}


.belief__pull {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1.15;
  color: var(--ink);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
}


@media (max-width: 899px) {
  .belief {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}


/* --- Why DELVANO ---------------------------------------------------------- */

.why {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: end;
}


.why__title .accent-line {
  display: block;
  color: var(--bronze);
  margin-top: 0.15em;
}


@media (max-width: 899px) {
  .why {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}
}