@layer reset, tokens, base, layout, components, pages, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body, h1, h2, h3, p, figure { margin: 0; }
  img, picture, video { display: block; max-width: 100%; }
  button, input, textarea, select { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
}

/* V5e — secondary scroll CTAs, deliberate mobile line breaks and final QA */
@layer pages {
  .hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem clamp(1rem, 2.5vw, 1.75rem);
    align-items: center;
    margin-top: .45rem;
  }
  .hero-cta-row .hero-action,
  .hero-cta-row .scroll-cta { margin-top: 0; }
  .page-atomic .project-scroll-cta { color: #fff; }
  .finance-scroll-cta { display: grid; width: max-content; margin: 0 0 clamp(1.8rem, 4vw, 3rem); }
  :where(#case-start, #profile-start) { scroll-margin-top: 4rem; }
  .work-card-meta-lines { display: grid; gap: .05rem; }
  .work-card-lettered {
    content-visibility: auto;
    contain-intrinsic-size: auto 36rem;
  }

  @media (min-width: 64rem) {
    :where(#case-start, #profile-start) { scroll-margin-top: 0; }
  }

  @media (max-width: 40rem) {
    :where(.overview-copy, .case-lead-copy p, .editorial-break p, .finance-prose, .finance-quote, .finance-closing, .profile-statement p) {
      -webkit-hyphens: auto;
      hyphens: auto;
      text-wrap: pretty;
    }
    .hero-cta-row { row-gap: .25rem; }
    .project-hero-copy .project-scroll-cta { font-size: .62rem; }
  }
}

@layer tokens {
  :root {
    color-scheme: light;
    --blue: #0000ee;
    --blue-dark: #0000a8;
    --ink: #090909;
    --paper: #fff;
    --muted: #686868;
    --line: #d9d9d9;
    --soft: #f3f3f3;
    --rail: clamp(13.5rem, 18vw, 17rem);
    --pad: clamp(1.15rem, 3vw, 3.75rem);
    --content: 92rem;
    --ease: cubic-bezier(.22, .8, .24, 1);
  }
}

@layer base {
  body {
    min-width: 20rem;
    overflow-x: clip;
    background: var(--paper);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
  }
  body.menu-open, body.dialog-open { overflow: hidden; }
  a { color: inherit; text-decoration: none; }
  :where(a, button):focus-visible { outline: .18rem solid var(--blue); outline-offset: .25rem; }
  ::selection { background: var(--blue); color: #fff; }
  h1, h2, h3 { font-weight: 700; text-wrap: balance; }
  p { text-wrap: pretty; orphans: 3; widows: 3; }
  .skip-link { position: fixed; z-index: 200; top: .75rem; left: .75rem; translate: 0 -200%; padding: .7rem 1rem; background: var(--blue); color: #fff; }
  .skip-link:focus { translate: 0; }
}

@layer layout {
  .site-shell { min-height: 100svh; }
  .desktop-rail { display: none; }
  .mobile-head {
    position: fixed;
    z-index: 80;
    inset: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 6.5rem;
    align-items: center;
    height: 4rem;
    padding: 0 var(--pad);
    border-bottom: 1px solid rgba(0,0,0,.14);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);
  }
  .mobile-head .mark, .mobile-panel-head .mark { font-size: 1.1rem; font-weight: 720; letter-spacing: -.045em; line-height: 1; }
  .menu-button { width: 6.5rem; min-height: 2.75rem; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-align: right; }
  main { min-width: 0; padding-top: 4rem; }
  .content-width { width: min(100%, var(--content)); margin-inline: auto; }
  .section { padding: clamp(4.5rem, 9vw, 9rem) var(--pad); }
  .rule-label { display: flex; gap: .5rem; align-items: center; margin-bottom: 2.5rem; font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
  .rule-label::after { width: min(9rem, 24vw); height: 1px; content: ""; background: currentColor; opacity: .35; }

  @media (min-width: 64rem) {
    .site-shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); }
    .mobile-head, .mobile-panel { display: none !important; }
    .desktop-rail {
      position: sticky;
      z-index: 60;
      top: 0;
      display: flex;
      flex-direction: column;
      height: 100svh;
      padding: 2rem 1.6rem 1.5rem;
      border-right: 1px solid var(--line);
      background: var(--paper);
    }
    .desktop-rail .mark { align-self: flex-start; font-size: 1.6rem; font-weight: 750; letter-spacing: -.06em; }
    .rail-nav { display: grid; gap: .35rem; margin-block: auto; }
    .rail-link { display: grid; grid-template-columns: 2.2rem max-content; width: max-content; min-height: 2.75rem; align-items: center; font-size: .82rem; font-weight: 650; letter-spacing: .025em; }
    .rail-link span { color: var(--muted); font-size: .68rem; }
    .rail-link::after { grid-column: 2; width: 100%; height: .12rem; content: ""; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .32s var(--ease); }
    .rail-link:hover::after, .rail-link[aria-current="page"]::after { transform: scaleX(1); }
    .rail-link[aria-current="page"] { color: var(--blue); }
    .rail-bottom { display: grid; gap: 1rem; }
    .rail-meta { display: flex; flex-wrap: wrap; gap: .7rem; font-size: .68rem; font-weight: 700; letter-spacing: .08em; }
    .rail-meta button { min-width: 2rem; min-height: 2rem; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--muted); }
    .rail-meta button.is-active { color: var(--blue); text-decoration: underline; text-underline-offset: .25rem; }
    .rail-utility { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .72rem; font-weight: 650; letter-spacing: .055em; text-transform: uppercase; }
    .rail-utility :where(a, button) { padding: 0 0 .12rem; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; line-height: 1.35; }
    .rail-utility :where(a, button):hover { color: var(--blue); }
    main { padding-top: 0; }
  }
}

@layer components {
  .mobile-panel {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 0 var(--pad) max(1.5rem, env(safe-area-inset-bottom));
    background: var(--blue);
    color: #fff;
  }
  .mobile-panel[hidden] { display: none; }
  .mobile-panel-head { display: grid; grid-template-columns: 1fr 6.5rem; height: 4rem; align-items: center; }
  .menu-close { width: 6.5rem; min-height: 2.75rem; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; font-size: .7rem; font-weight: 700; text-align: right; }
  .mobile-nav { align-self: center; display: grid; }
  .mobile-nav a { display: grid; grid-template-columns: 2.5rem 1fr; align-items: baseline; padding: .38rem 0; font-size: clamp(1.65rem, 7.5vw, 3.5rem); font-weight: 720; letter-spacing: -.045em; line-height: 1.08; }
  .mobile-nav span { font-size: .7rem; font-weight: 650; letter-spacing: 0; opacity: .7; }
  .mobile-panel-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
  .mobile-languages { display: flex; gap: .4rem; }
  .mobile-languages button { min-width: 2.75rem; min-height: 2.75rem; border: 1px solid rgba(255,255,255,.45); background: transparent; color: #fff; cursor: pointer; font-size: .72rem; }
  .mobile-languages button.is-active { background: #fff; color: var(--blue); }
  .mobile-legal { border: 0; background: transparent; color: #fff; cursor: pointer; font-size: .72rem; letter-spacing: .06em; }

  .project-end { display: grid; gap: 1.5rem; min-height: 42svh; align-content: center; border-top: 1px solid var(--line); color: var(--ink); }
  .project-end small { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  .project-end a { display: flex; justify-content: space-between; align-items: end; gap: 1rem; color: var(--blue); font-size: clamp(2.25rem, 6.5vw, 6.75rem); font-weight: 750; letter-spacing: -.055em; line-height: .96; }
  .project-end a span:last-child { font-size: .7em; font-weight: 400; }

  .legal { width: min(42rem, calc(100% - 2rem)); max-height: calc(100svh - 2rem); padding: 0; border: 0; background: var(--paper); color: var(--ink); box-shadow: 0 1.5rem 6rem rgba(0,0,0,.28); }
  .legal::backdrop { background: rgba(0,0,0,.48); backdrop-filter: blur(4px); }
  .legal-head { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem var(--pad); border-bottom: 1px solid var(--line); font-size: .75rem; font-weight: 700; letter-spacing: .08em; }
  .icon-close { position: relative; width: 2.75rem; height: 2.75rem; border: 0; background: transparent; cursor: pointer; }
  .icon-close::before, .icon-close::after { position: absolute; top: 50%; left: 50%; width: 1.7rem; height: .14rem; content: ""; background: var(--blue); transition: transform .3s var(--ease); }
  .icon-close::before { transform: translate(-50%,-50%) rotate(45deg); }
  .icon-close::after { transform: translate(-50%,-50%) rotate(-45deg); }
  .icon-close:hover::before { transform: translate(-50%,-50%) rotate(135deg); }
  .icon-close:hover::after { transform: translate(-50%,-50%) rotate(45deg); }
  .legal-body { display: grid; gap: 2rem; padding: clamp(2rem, 6vw, 4.5rem) var(--pad); }
  .legal-body h2 { font-size: clamp(2.5rem, 7vw, 5rem); letter-spacing: -.06em; }
  .legal-body a { color: var(--blue); text-decoration: underline; text-underline-offset: .2em; }

  .film-dialog { width: 100%; height: 100%; max-width: none; max-height: none; padding: 0; border: 0; background: #000; }
  .film-dialog::backdrop { background: #000; }
  .film-dialog video { width: 100%; height: 100%; object-fit: contain; }
  .film-dialog .icon-close { position: absolute; z-index: 2; top: max(1rem, env(safe-area-inset-top)); right: var(--pad); background: rgba(0,0,0,.55); }
  .film-dialog .icon-close::before, .film-dialog .icon-close::after { background: var(--blue); }

  .reveal { opacity: 0; transform: translateY(1.25rem); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal.is-visible { opacity: 1; transform: none; }
}

@layer pages {
  .portfolio-intro { display: grid; gap: 2rem; min-height: min(48rem, 82svh); align-content: end; padding-top: clamp(7rem, 14vw, 12rem); border-bottom: 1px solid var(--line); }
  .portfolio-hero-main { display: grid; gap: clamp(.25rem, 2vw, 2rem); min-width: 0; align-items: end; }
  .portfolio-hero-main .vote-mark { justify-self: end; width: clamp(8.5rem, 36vw, 13rem); margin-bottom: -1.5rem; }
  .portfolio-intro h1 { max-width: 12ch; font-size: clamp(3rem, 7.8vw, 8rem); letter-spacing: -.065em; line-height: .94; }
  .portfolio-intro h1 span { color: var(--blue); }
  .portfolio-intro p { max-width: 34rem; margin-left: auto; font-size: clamp(1.05rem, 2vw, 1.5rem); line-height: 1.32; }
  .work-index { padding-block: 0; }
  .work-card { position: relative; display: grid; min-height: 62svh; align-content: center; overflow: hidden; border-bottom: 1px solid var(--line); isolation: isolate; }
  .work-card-link { display: grid; gap: 1.2rem; padding-block: clamp(4rem, 10vw, 9rem); }
  .work-card-number { font-size: .75rem; font-weight: 700; letter-spacing: .08em; }
  .work-card h2 { max-width: 12ch; font-size: clamp(2.7rem, 7.6vw, 8rem); letter-spacing: -.065em; line-height: .94; transition: color .35s var(--ease), transform .5s var(--ease); }
  .work-card-meta { display: flex; gap: 1rem; flex-wrap: wrap; max-width: 34rem; font-size: .75rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
  .work-card-visual { position: absolute; z-index: -1; right: max(-3rem, -4vw); top: 50%; width: min(47vw, 43rem); opacity: .14; transform: translate3d(var(--card-x,0), calc(-50% + var(--card-y,0)), 0) rotate(var(--card-r,-2deg)); transition: opacity .45s var(--ease), scale .55s var(--ease); }
  .work-card-visual img { width: 100%; height: auto; max-height: 72svh; object-fit: contain; }
  .work-card:is(:hover,:focus-within) h2 { color: var(--blue); transform: translateX(.025em); }
  .work-card:is(:hover,:focus-within) .work-card-visual { opacity: .95; scale: 1.025; }

  .project-hero { position: relative; min-height: 100svh; overflow: hidden; background: #0a0a0a; color: #fff; }
  .project-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .86; }
  .project-hero::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.7)); }
  .project-hero-copy { position: relative; z-index: 2; display: grid; min-height: 100svh; align-content: end; gap: 1rem; padding: clamp(7rem, 12vw, 10rem) var(--pad) clamp(2.5rem, 6vw, 5rem); }
  .project-hero-copy h1 { max-width: 13ch; font-size: clamp(3.25rem, 8vw, 8.5rem); letter-spacing: -.065em; line-height: .92; }
  .project-hero-copy p { max-width: 42rem; font-size: clamp(1.05rem, 2vw, 1.45rem); line-height: 1.32; }
  .hero-action { justify-self: start; min-height: 3rem; margin-top: 1rem; padding: .7rem 1rem; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
  .hero-action:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
  .case-lead { display: grid; gap: 3rem; border-bottom: 1px solid var(--line); }
  .case-lead h2 { max-width: 16ch; font-size: clamp(2.35rem, 5.4vw, 5.25rem); letter-spacing: -.055em; line-height: 1; }
  .case-lead-copy { max-width: 42rem; margin-left: auto; display: grid; gap: 1.2rem; font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
  .media-sequence { display: grid; gap: clamp(3rem, 8vw, 7rem); }
  .media-block { display: grid; gap: 1rem; }
  .media-block img { width: auto; max-width: min(100%, 60rem); height: auto; margin-inline: auto; }
  .media-block figcaption { display: grid; grid-template-columns: 2.5rem minmax(0,1fr); gap: 1rem; max-width: 48rem; font-size: .82rem; }
  .media-block:nth-child(even) { width: min(61.8%, 60rem); margin-left: auto; }
  .media-block:nth-child(3n) { width: min(76.4%, 60rem); }
  .project-facts { display: grid; gap: 2rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .project-facts h2 { max-width: 13ch; font-size: clamp(2.3rem, 5vw, 4.8rem); letter-spacing: -.05em; line-height: 1; }
  .facts-list { display: grid; }
  .facts-list p { display: grid; grid-template-columns: minmax(7rem, 1fr) 2fr; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--line); font-size: .85rem; }
  .facts-list span { color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

  .page-qtron .project-hero { background: #fff; color: var(--ink); }
  .page-qtron .project-hero-media { object-fit: cover; background: #fff; opacity: 1; }
  .page-qtron .project-hero::after { background: linear-gradient(180deg, transparent 40%, rgba(255,255,255,.94)); }
  .page-qtron .film-dialog, .page-qtron .film-dialog::backdrop { background: #fff; }
  .page-qtron .film-dialog .icon-close { background: rgba(255,255,255,.86); }
  .page-finanzblick .project-hero { background: #fff; color: var(--ink); }
  .page-finanzblick .project-hero-media { object-fit: cover; object-position: center; opacity: .92; }
  .page-finanzblick .project-hero::after { background: linear-gradient(180deg, rgba(255,255,255,.08) 30%, rgba(255,255,255,.97) 94%); }
  .page-shifting .project-hero { background: #fff; color: var(--ink); }
  .page-shifting .project-hero-media { object-fit: cover; background: #fff; opacity: 1; }
  .page-shifting .project-hero::after { background: linear-gradient(180deg, transparent 45%, rgba(255,255,255,.97)); }

  .about-intro { display: grid; gap: 2.5rem; min-height: 78svh; align-content: end; border-bottom: 1px solid var(--line); }
  .about-intro h1 { max-width: 14ch; font-size: clamp(3rem, 7vw, 7rem); letter-spacing: -.06em; line-height: .96; }
  .about-intro h1 span { color: var(--blue); }
  .vote-mark {
    position: relative;
    order: -1;
    justify-self: end;
    width: clamp(10rem, 43vw, 14rem);
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    isolation: isolate;
  }
  .vote-mark-fallback,
  .vote-mark-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-2.2deg); }
  .vote-mark-fallback { display: block; object-fit: contain; opacity: 1; }
  .vote-mark.is-ready .vote-mark-fallback { opacity: 0; }
  .vote-mark.is-complete .vote-mark-fallback { opacity: 1; }
  .vote-stroke {
    fill: none;
    stroke: currentColor;
    stroke-dasharray: 500;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .vote-mark.is-ready .vote-stroke { stroke-dashoffset: 500; }
  .vote-stroke-one { stroke-width: 27; }
  .vote-stroke-two { stroke-width: 21; }
  .vote-mark.is-ready.is-drawn .vote-stroke-one { animation: vote-draw .52s cubic-bezier(.2,.72,.2,1) forwards; }
  .vote-mark.is-ready.is-drawn .vote-stroke-two { animation: vote-draw .48s .31s cubic-bezier(.18,.72,.18,1) forwards; }
  .vote-label {
    position: absolute;
    right: 7.5%;
    bottom: 4.5%;
    opacity: 1;
    color: var(--ink);
    font-size: clamp(.58rem, 1vw, .7rem);
    font-weight: 720;
    letter-spacing: .16em;
    line-height: 1;
    white-space: nowrap;
  }
  .vote-mark.is-ready .vote-label { opacity: 0; }
  .vote-mark.is-ready.is-drawn .vote-label { animation: vote-label-in .34s .76s var(--ease) forwards; }
  .profile-links { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: baseline; }
  .about-grid { display: grid; gap: 3rem; }
  .about-portrait { align-self: start; }
  .about-portrait img { width: min(100%, 18.75rem); height: auto; }
  .about-copy { display: grid; gap: 1.4rem; align-content: start; max-width: 42rem; font-size: clamp(1.05rem, 1.6vw, 1.3rem); }
  .experience { display: grid; }
  .experience article { display: grid; gap: .8rem; padding: 2rem 0; border-top: 1px solid var(--line); }
  .experience time { color: var(--blue); font-size: .72rem; font-weight: 700; letter-spacing: .07em; }
  .experience h2 { font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: -.04em; }
  .experience p { max-width: 46rem; }

  @media (min-width: 46rem) {
    .case-lead, .project-facts, .about-grid { grid-template-columns: minmax(0, 1fr) minmax(20rem, .8fr); }
    .case-lead-copy { margin-left: 0; }
    .experience article { grid-template-columns: 9rem 1fr; }
    .media-sequence { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); align-items: start; }
    .media-block:nth-child(n) { width: 100%; max-width: 60rem; margin: 0; }
    .media-block:nth-child(4n + 1) { grid-column: 1 / -1; }
    .media-block:nth-child(4n + 1) img { margin-left: 0; }
    .media-block:nth-child(4n + 2) { align-self: end; }
    .media-block:nth-child(4n + 3) { margin-top: clamp(3rem, 8vw, 8rem); }
    .media-block:nth-child(4n) { grid-column: 1 / -1; width: 61.8%; margin-left: auto; }
  }
  @media (min-width: 64rem) {
    .portfolio-hero-main { grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem); }
    .portfolio-hero-main .vote-mark { width: min(100%, 18rem); margin-bottom: -.9rem; }
    .vote-mark { order: 0; width: min(100%, 27rem); margin-bottom: -.8rem; }
  }
  @media (max-width: 63.999rem) {
    .work-card-visual { width: 66vw; opacity: .15; }
    .work-card h2 { max-width: 9ch; }
    .project-hero-copy h1 { overflow-wrap: anywhere; }
  }
  @media (max-width: 40rem) {
    .media-block:nth-child(n) { width: 100%; }
    .project-end a { align-items: start; }
  }

  @keyframes vote-draw { to { stroke-dashoffset: 0; } }
  @keyframes vote-label-in { from { opacity: 0; translate: 0 .35rem; } to { opacity: 1; translate: 0 0; } }
}

/* V6 — line-accurate overview backdrops, fullscreen controls and capability lists */
@layer components {
  .line-backdrop {
    background: rgba(255,255,255,.97);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .film-dialog .icon-close {
    opacity: 1;
    transition: opacity .28s var(--ease), transform .28s var(--ease);
  }
  .film-dialog.is-ui-idle { cursor: none; }
  .film-dialog.is-ui-idle .icon-close { opacity: 0; pointer-events: none; }

  .capability-list {
    display: grid;
    gap: .42rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .capability-list li { display: grid; grid-template-columns: .8rem 1fr; gap: .4rem; }
  .capability-list li::before { content: "•"; color: var(--blue); }
}

@layer pages {
  .page-index:not(.overview-type) .work-card-visual { z-index: 0; }
  .page-index:not(.overview-type) .work-card :where(.work-card-number, h2, .work-card-meta, .overview-copy) {
    position: relative;
    z-index: 1;
  }
  @media (max-width: 40rem) {
    .page-index:not(.overview-type) .work-card-meta,
    .page-index:not(.overview-type) .overview-copy { max-width: min(90%, 33rem); }
  }

  @media (max-width: 63.999rem) {
    .project-hero,
    .project-hero-copy { min-height: calc(100svh - 4rem); }
    .project-hero-copy {
      padding-top: clamp(5.5rem, 15svh, 8rem);
      padding-bottom: max(1.4rem, env(safe-area-inset-bottom));
    }
    .project-hero-copy h1 { font-size: clamp(2.75rem, 13vw, 5.75rem); }
    .project-hero-copy p { font-size: clamp(.98rem, 4vw, 1.2rem); }
    .hero-action { margin-top: .35rem; }
  }

  @media (max-width: 28rem) and (max-height: 44rem) {
    .project-hero-copy { gap: .7rem; padding-top: 4.5rem; }
    .project-hero-copy h1 { font-size: clamp(2.5rem, 11.5vw, 4rem); }
    .project-hero-copy p { font-size: .95rem; }
  }
}

@layer utilities {
  .blue { color: var(--blue); }
  .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
    .vote-mark.is-ready .vote-mark-fallback { opacity: 1; }
    .vote-mark.is-ready.is-drawn .vote-stroke { animation: none !important; stroke-dashoffset: 0; }
    .vote-mark.is-ready.is-drawn .vote-label { animation: none !important; opacity: 1; translate: 0 0; }
  }
}

/* V4 — editorial refinement, case-study labelling and profile accordions */
@layer tokens {
  :root { --reading: 43rem; --image-max: 60rem; }
}

@layer base {
  :where(h1,h2,h3,p,figcaption,summary) { overflow-wrap: normal; }
  :where(p,figcaption) { text-wrap: pretty; }
  b { font-weight: 650; }
}

@layer layout {
  @media (min-width: 64rem) {
    .desktop-rail { min-width: 15.25rem; }
    .rail-nav::before {
      content: "CASE STUDIES";
      margin: 0 0 .7rem 2.2rem;
      color: var(--muted);
      font-size: .6rem;
      font-weight: 750;
      letter-spacing: .14em;
    }
  }
}

@layer components {
  .mobile-nav::before {
    content: "CASE STUDIES";
    margin: 0 0 .9rem 2.5rem;
    font-size: .62rem;
    font-weight: 750;
    letter-spacing: .14em;
    opacity: .72;
  }
  .editorial-break {
    display: grid;
    gap: 1.1rem;
    max-width: var(--reading);
    padding-block: clamp(1rem, 3vw, 3rem);
    font-size: clamp(1.08rem, 1.8vw, 1.45rem);
    line-height: 1.45;
  }
  .editorial-break strong { color: var(--blue); font-weight: 700; }
  .case-badge {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: .55rem;
    color: var(--blue);
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .11em;
  }
  .case-badge::before { width: 1.8rem; height: 1px; content: ""; background: currentColor; }
  .text-link { color: var(--blue); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .2em; }
}

@layer pages {
  .portfolio-intro { min-height: min(44rem, 76svh); }
  .portfolio-intro h1 { font-size: clamp(2.8rem, 6.7vw, 7.1rem); }
  .portfolio-intro p { font-size: clamp(1.02rem, 1.65vw, 1.35rem); }
  .portfolio-intro .case-badge { margin-bottom: -.4rem; }
  .work-card { min-height: clamp(29rem, 56svh, 43rem); }
  .work-card h2 { font-size: clamp(2.45rem, 6.25vw, 6.5rem); }
  .work-card-visual { right: clamp(-1rem, 1vw, 1rem); width: min(38vw, 34rem); opacity: .24; }
  .work-card-visual img { max-height: 58svh; }
  .work-card-link { gap: 1.05rem; }
  .overview-copy { max-width: 35rem; font-size: clamp(.96rem, 1.2vw, 1.08rem); line-height: 1.48; }
  .work-card:is(:hover,:focus-within) .work-card-visual { opacity: .94; }

  .overview-type .work-card { min-height: clamp(25rem, 47svh, 35rem); }
  .overview-type .work-card-visual { display: none; }
  .overview-type .work-card-link { grid-template-columns: minmax(0,1fr) minmax(16rem, 25rem); align-items: end; }
  .overview-type .work-card-number, .overview-type .work-card h2 { grid-column: 1; }
  .overview-type .work-card-meta, .overview-type .overview-copy { grid-column: 2; }
  .overview-type .work-card-meta { grid-row: 1; }
  .overview-type .overview-copy { grid-row: 2 / span 2; align-self: end; }

  .project-hero-copy h1 { font-size: clamp(3rem, 7vw, 7.5rem); }
  .case-lead h2, .project-facts h2 { font-size: clamp(2.15rem, 4.5vw, 4.5rem); }
  .media-block img { max-width: min(100%, var(--image-max)); }
  .media-block figcaption { max-width: 36rem; line-height: 1.5; }
  .media-block figcaption span:first-child { color: var(--blue); font-weight: 750; }
  .story-section { display: grid; gap: clamp(2.5rem, 6vw, 6rem); }
  .story-section > .editorial-break:nth-child(even) { margin-left: auto; }
  .story-section > .editorial-break:nth-child(3n) { margin-left: 16%; }
  .page-shifting .media-sequence { row-gap: clamp(4rem, 11vw, 10rem); }
  .page-shifting .media-block img { max-height: 48rem; }

  .profile-statement { display: grid; gap: 1.3rem; max-width: 48rem; font-size: clamp(1.1rem, 1.8vw, 1.45rem); line-height: 1.45; }
  .profile-promise {
    display: grid;
    gap: 1.2rem;
    align-content: start;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-top: .22rem solid var(--blue);
    background: var(--soft);
  }
  .profile-promise h2 { font-size: clamp(1.7rem, 3vw, 2.65rem); letter-spacing: -.04em; line-height: 1.04; }
  .profile-promise p { max-width: 36rem; }
  .profile-accordions { border-top: 1px solid var(--line); }
  .profile-accordions details { border-bottom: 1px solid var(--line); }
  .profile-accordions summary {
    display: grid;
    grid-template-columns: 2.8rem minmax(0,1fr) auto;
    gap: 1rem;
    align-items: baseline;
    padding: 1.45rem 0;
    cursor: pointer;
    list-style: none;
    font-size: clamp(1.25rem, 2.3vw, 2rem);
    font-weight: 700;
    letter-spacing: -.03em;
  }
  .profile-accordions summary::-webkit-details-marker { display: none; }
  .profile-accordions summary::after { content: "+"; color: var(--blue); font-weight: 400; }
  .profile-accordions details[open] summary::after { content: "−"; }
  .profile-accordions summary span:first-child { color: var(--blue); font-size: .68rem; letter-spacing: .08em; }
  .accordion-body { display: grid; gap: 0; padding: 0 0 2.2rem 3.8rem; }
  .accordion-body .experience article:first-child { border-top: 0; }
  .capability-grid { display: grid; gap: 1rem; }
  .capability-grid article { padding-top: 1rem; border-top: 1px solid var(--line); }
  .capability-grid h3 { margin-bottom: .45rem; font-size: 1rem; }

  .finance-study { width: min(100%, 64rem); min-width: 0; margin-inline: auto; padding-inline: var(--pad); }
  .finance-study section { min-width: 0; padding: clamp(4.5rem, 8vw, 7.5rem) 0; border-bottom: 1px solid var(--line); }
  .finance-hero { padding-top: clamp(7rem, 12vw, 10rem) !important; }
  .finance-case-badge {
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    align-items: start;
    line-height: 1.45;
  }
  .finance-case-badge::before { margin-top: .68em; }
  .finance-case-badge span { min-width: 0; overflow-wrap: break-word; }
  .finance-hero h1 { margin: 1.1rem 0 1.8rem; font-size: clamp(4.2rem, 12vw, 9rem); line-height: .82; letter-spacing: -.08em; }
  .finance-tagline { max-width: 50rem; margin-bottom: 1rem; font-size: clamp(1.55rem, 3.5vw, 2.65rem); line-height: 1.08; letter-spacing: -.04em; }
  .finance-meta { margin-bottom: 2.2rem; color: var(--muted); }
  .finance-media img { width: 100%; height: auto; }
  .finance-caption { margin-top: .55rem; color: var(--muted); font-size: .7rem; }
  .finance-facts { display: grid; margin-top: 2.5rem; border-top: 1px solid var(--line); }
  .finance-fact { padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: .85rem; font-weight: 650; }
  .finance-kicker { font-size: .68rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
  .finance-study h2 { max-width: 54rem; margin: .8rem 0 1.5rem; font-size: clamp(2.2rem, 5vw, 4rem); line-height: .98; letter-spacing: -.055em; }
  .finance-prose { max-width: 46rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
  .finance-quote { max-width: 48rem; margin-top: 2.2rem; padding-left: 1.2rem; border-left: .15rem solid var(--blue); font-size: clamp(1.45rem, 3vw, 2.1rem); line-height: 1.2; }
  .finance-platforms { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.8rem; }
  .finance-pill { padding: .35rem .65rem; border: 1px solid; border-radius: 99rem; font-size: .7rem; font-weight: 700; }
  .finance-media-grid { display: grid; gap: 1.2rem; margin-top: 2.5rem; align-items: start; }
  .finance-media-grid figure { margin: 0; }
  .finance-list { margin-top: 2rem; border-top: 1px solid var(--line); }
  .finance-list div { padding: .85rem 0; border-bottom: 1px solid var(--line); font-weight: 650; }
  .finance-flow { display: grid; margin-top: 2rem; border-top: 1px solid var(--ink); }
  .finance-flow div { padding: 1rem 0; border-bottom: 1px solid var(--ink); font-weight: 750; }
  .finance-award { display: grid; gap: 2rem; align-items: end; }
  .finance-award-number { color: var(--blue); font-size: clamp(5.5rem, 16vw, 11rem); font-weight: 800; line-height: .76; letter-spacing: -.09em; }
  .finance-award-sub { margin: 1.4rem 0; font-size: clamp(1.45rem, 3vw, 2.5rem); font-weight: 750; letter-spacing: -.04em; }
  .finance-closing { max-width: 55rem; font-size: clamp(1.8rem, 4vw, 3.25rem); line-height: 1.06; letter-spacing: -.05em; }

  @media (min-width: 46rem) {
    .capability-grid { grid-template-columns: repeat(3,1fr); }
    .finance-facts { grid-template-columns: repeat(2,1fr); column-gap: 2rem; }
    .finance-media-grid.two { grid-template-columns: 1.2fr .8fr; align-items: end; }
    .finance-media-grid.three { grid-template-columns: 1.15fr .85fr .85fr; }
    .finance-flow { grid-template-columns: repeat(4,1fr); border: 1px solid var(--ink); }
    .finance-flow div { padding: 1rem; border: 0; border-right: 1px solid var(--ink); }
    .finance-flow div:last-child { border-right: 0; }
    .finance-award { grid-template-columns: 1.1fr .9fr; }
  }
  @media (max-width: 63.999rem) {
    .work-card-visual { right: -8vw; width: min(62vw, 26rem); opacity: .31; }
    .work-card-visual img { max-height: 52svh; }
    .overview-type .work-card-link { display: grid; grid-template-columns: 1fr; }
    .overview-type .work-card-number, .overview-type .work-card h2, .overview-type .work-card-meta, .overview-type .overview-copy { grid-column: 1; grid-row: auto; }
  }
  @media (max-width: 40rem) {
    .portfolio-intro { min-height: 72svh; }
    .work-card { min-height: 31rem; }
    .work-card-visual { top: 44%; right: -19%; width: 82vw; opacity: .38; }
    .work-card-link { align-content: end; min-height: 31rem; }
    .work-card-meta, .overview-copy { max-width: 88%; }
    .story-section > .editorial-break:nth-child(n) { margin-left: 0; }
    .accordion-body { padding-left: 0; }
  }
}

/* V5b Blue — visible, responsive case-study navigation */
@layer pages {
  .portfolio-intro { position: relative; }
  .scroll-cta {
    display: inline-grid;
    grid-template-columns: auto 1.8rem;
    gap: .85rem;
    align-items: center;
    justify-self: start;
    min-height: 2.75rem;
    margin-top: .5rem;
    color: var(--blue);
    font-size: .67rem;
    font-weight: 750;
    letter-spacing: .12em;
  }
  .scroll-cta-mark {
    position: relative;
    display: block;
    width: 1.8rem;
    height: 2.5rem;
    overflow: hidden;
  }
  .scroll-cta-mark::before {
    position: absolute;
    top: .2rem;
    left: calc(50% - .5px);
    width: 1px;
    height: 1.75rem;
    content: "";
    background: currentColor;
    animation: scroll-cue 1.9s var(--ease) infinite;
  }
  .scroll-cta-mark::after {
    position: absolute;
    bottom: .45rem;
    left: 50%;
    width: .58rem;
    height: .58rem;
    content: "";
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateX(-50%) rotate(45deg);
  }
  .scroll-cta:hover .scroll-cta-mark::before,
  .scroll-cta:focus-visible .scroll-cta-mark::before { animation-duration: 1.15s; }
  @keyframes scroll-cue {
    0% { transform: translateY(-1.7rem); opacity: 0; }
    28% { opacity: 1; }
    72% { opacity: 1; }
    100% { transform: translateY(1.05rem); opacity: 0; }
  }

  .experience-stage {
    scroll-margin-top: 4rem;
    background: var(--blue);
    color: #fff;
  }
  .experience-stage-inner {
    display: grid;
    gap: clamp(3rem, 7vw, 6.5rem);
  }
  .experience-heading {
    display: grid;
    gap: 1.25rem;
    align-content: start;
  }
  .experience-kicker {
    display: flex;
    gap: .65rem;
    align-items: center;
    font-size: .66rem;
    font-weight: 750;
    letter-spacing: .14em;
  }
  .experience-kicker::after {
    width: min(7rem, 24vw);
    height: 1px;
    content: "";
    background: currentColor;
    opacity: .28;
  }
  .experience-heading h2 {
    max-width: 8ch;
    font-size: clamp(3rem, 7vw, 7rem);
    letter-spacing: -.065em;
    line-height: .92;
  }
  .experience-heading h2 span { font-weight: 350; }
  .experience-nav {
    display: grid;
    align-self: start;
    border-top: 1px solid rgba(255,255,255,.22);
  }
  .experience-nav a {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    gap: .45rem;
    align-items: baseline;
    padding: clamp(.8rem, 1.8vw, 1.35rem) 0;
    border-bottom: 1px solid rgba(255,255,255,.22);
  }
  .experience-nav a > span {
    font-size: .68rem;
    font-weight: 650;
    opacity: .72;
  }
  .experience-nav strong {
    min-width: 0;
    font-size: clamp(1.65rem, 4.2vw, 4rem);
    font-weight: 720;
    letter-spacing: -.045em;
    line-height: 1;
  }
  .experience-nav i {
    font-size: clamp(1.25rem, 2.8vw, 2.5rem);
    font-style: normal;
    font-weight: 350;
    transition: transform .32s var(--ease);
  }
  .experience-nav a:hover i,
  .experience-nav a:focus-visible i { transform: translateX(.28em); }
  .experience-nav a:focus-visible { outline-color: #fff; }
  .experience-quote {
    display: grid;
    gap: 1.5rem;
    max-width: 50rem;
    margin: 0;
    padding: clamp(1.5rem, 3vw, 2.5rem) 0 0;
    border-top: 1px solid rgba(255,255,255,.42);
  }
  .experience-quote p {
    font-size: clamp(1.45rem, 3.25vw, 3rem);
    font-weight: 350;
    letter-spacing: -.035em;
    line-height: 1.13;
  }
  .experience-quote footer {
    font-size: .66rem;
    font-weight: 750;
    letter-spacing: .13em;
  }

  @media (min-width: 64rem) {
    .experience-stage { scroll-margin-top: 0; }
    .experience-stage-inner {
      grid-template-columns: minmax(14rem, .72fr) minmax(25rem, 1.28fr);
      align-items: start;
    }
    .experience-heading h2 {
      max-width: 9ch;
      font-size: clamp(2.6rem, 4.5vw, 4.8rem);
    }
    .experience-nav strong { font-size: clamp(1.45rem, 2.6vw, 2.65rem); }
    .experience-quote {
      grid-column: 2;
      width: min(100%, 50rem);
    }
  }

  @media (max-width: 30rem) {
    .portfolio-intro {
      min-height: calc(100svh - 4rem);
      gap: clamp(1.05rem, 3.2svh, 2rem);
      padding-top: clamp(4.75rem, 11svh, 6.5rem);
      padding-bottom: max(1.35rem, env(safe-area-inset-bottom));
    }
    .experience-stage-inner { gap: 3rem; }
    .experience-nav strong { overflow-wrap: anywhere; }
  }
}

/* V5c — image-filled project initials and calmer editorial cards */
@layer pages {
  .page-index .work-index {
    width: 100%;
    max-width: none;
  }
  .work-card-lettered {
    min-height: clamp(31rem, 52svh, 41rem);
    background: var(--paper);
    transition: background-color .42s var(--ease), color .42s var(--ease);
  }
  .work-card-lettered .work-card-link {
    width: min(100%, var(--content));
    margin-inline: auto;
    grid-template-columns: minmax(5.75rem, .62fr) minmax(0, 1.38fr);
    grid-template-rows: repeat(4, auto);
    column-gap: clamp(1rem, 4vw, 5rem);
    row-gap: 1.05rem;
    align-items: end;
  }
  .work-card-lettered .work-card-letter {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    display: block;
    max-width: 100%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: var(--letter-position, center);
    background-size: cover;
    color: transparent;
    font-size: clamp(5.75rem, 25vw, 25rem);
    font-weight: 800;
    letter-spacing: -.1em;
    line-height: .78;
    text-align: center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .work-card-lettered .work-card-number,
  .work-card-lettered h2,
  .work-card-lettered .work-card-meta,
  .work-card-lettered .overview-copy {
    grid-column: 2;
    min-width: 0;
    max-width: 32rem;
  }
  .work-card-lettered .work-card-number { grid-row: 1; }
  .work-card-lettered h2 {
    grid-row: 2;
    max-width: 11ch;
    font-size: clamp(2.15rem, 4.6vw, 4.75rem);
  }
  .work-card-lettered .work-card-meta { grid-row: 3; }
  .work-card-lettered .overview-copy {
    grid-row: 4;
    font-size: clamp(1.03rem, 1.4vw, 1.2rem);
    line-height: 1.5;
  }
  .work-card-lettered .line-backdrop { background: transparent; }
  .work-card-lettered .work-card-visual { display: none; }
  .work-card-lettered:is(:hover, :focus-within, :active) {
    background: var(--blue);
    color: #fff;
  }
  .work-card-lettered:is(:hover, :focus-within, :active) h2 {
    color: #fff;
    transform: none;
  }
  .work-card-lettered:focus-within { outline: .18rem solid var(--blue); outline-offset: -.18rem; }
  .work-card-lettered .work-card-link:focus-visible { outline-color: #fff; outline-offset: -.45rem; }

  @media (min-width: 46rem) {
    .work-card-lettered .work-card-link {
      grid-template-columns: minmax(12rem, .82fr) minmax(0, 1.18fr);
    }
  }

  @media (max-width: 30rem) {
    .work-card-lettered .work-card-link { column-gap: .85rem; }
    .work-card-lettered h2 { font-size: clamp(1.85rem, 9.5vw, 2.65rem); }
    .work-card-lettered .work-card-meta { font-size: .68rem; line-height: 1.4; }
    .work-card-lettered .overview-copy { font-size: 1rem; line-height: 1.48; }
  }
}

/* V5j — mobile composition follows the approved visual reference */
@layer pages {
  @media (max-width: 63.999rem) {
    .page-index .portfolio-intro {
      width: 100%;
      max-width: 100%;
      overflow: clip;
    }
    .page-index .portfolio-hero-main {
      display: contents;
    }
    .page-index .portfolio-hero-main .vote-mark {
      order: -2;
      justify-self: center;
      width: clamp(13rem, 38vw, 19rem);
      max-width: 70vw;
      margin: 0 0 clamp(2rem, 5svh, 4rem);
      overflow: visible;
      contain: layout;
      transform: rotate(-5deg);
      transform-origin: center;
    }
    .page-index .portfolio-hero-main :where(.vote-mark-fallback, .vote-mark-art) {
      overflow: hidden;
      transform: none;
      transform-origin: center;
    }
    .page-index .portfolio-intro .case-badge { order: -1; }
    .page-index .portfolio-intro h1 { order: 0; }
    .page-index .portfolio-intro > p { order: 1; }
    .page-index .portfolio-intro > .scroll-cta { order: 2; }
    .page-index .portfolio-intro :where(h1, p, .scroll-cta) {
      min-width: 0;
      max-width: 100%;
    }
  }
}

/* V6 — profile-first navigation and Branding & Corporate Design */
@layer layout {
  .rail-nav::before,
  .mobile-nav::before { display: none; content: none; }
  .nav-label {
    color: var(--muted);
    font-size: .6rem;
    font-weight: 750;
    letter-spacing: .14em;
    line-height: 1.2;
    text-transform: uppercase;
  }
  .rail-nav .nav-label { margin: .85rem 0 .35rem 2.2rem; }
  .rail-link-profile { color: var(--blue); }

  .mobile-nav .nav-label {
    margin: .8rem 0 .55rem 2.5rem;
    color: rgba(255,255,255,.72);
  }
  .mobile-nav .mobile-profile-link {
    margin-bottom: .2rem;
    color: #fff;
  }

  @media (max-height: 44rem) and (max-width: 63.999rem) {
    .mobile-nav a { padding-block: .22rem; font-size: clamp(1.35rem, 6.4vw, 2.35rem); }
    .mobile-nav .nav-label { margin-block: .45rem .25rem; }
  }
}

@layer components {
  .mobile-nav::before { display: none; content: none; }
  .experience-profile {
    display: grid;
    grid-template-columns: 2.6rem minmax(0,1fr) auto;
    gap: .45rem;
    align-items: baseline;
    padding: 0 0 clamp(1.1rem, 2vw, 1.65rem);
    border-bottom: 1px solid rgba(255,255,255,.42);
  }
  .experience-profile > span { font-size: .68rem; font-weight: 650; opacity: .72; }
  .experience-profile strong { font-size: clamp(1.55rem, 3.2vw, 2.7rem); letter-spacing: -.045em; line-height: 1; }
  .experience-profile i { font-size: 1.55rem; font-style: normal; font-weight: 350; transition: transform .32s var(--ease); }
  .experience-profile:hover i,
  .experience-profile:focus-visible i { transform: translateX(.28em); }
  .experience-profile:focus-visible { outline-color: #fff; }
}

@layer pages {
  .branding-hero {
    display: grid;
    gap: clamp(3rem, 8vw, 8rem);
    min-height: 92svh;
    align-items: center;
    padding-top: clamp(7rem, 12vw, 10rem);
    border-bottom: 1px solid var(--line);
  }
  .branding-hero-copy { display: grid; gap: 1.5rem; align-content: center; }
  .branding-hero h1 {
    max-width: 10ch;
    font-size: clamp(3rem, 7vw, 7.4rem);
    letter-spacing: -.065em;
    line-height: .94;
  }
  .branding-hero-copy > p {
    max-width: 35rem;
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    line-height: 1.4;
  }

  .brand-mark-animation {
    display: grid;
    gap: 1rem;
    width: min(100%, 38rem);
    justify-self: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }
  .brand-mark-animation svg { width: 100%; height: auto; overflow: visible; }
  .brand-mark-animation > span {
    justify-self: center;
    color: var(--muted);
    font-size: .62rem;
    font-weight: 750;
    letter-spacing: .13em;
  }
  .brand-guide,
  .brand-outline {
    fill: none;
    stroke: #343434;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .brand-guide { stroke-width: 1.15; opacity: 0; }
  .brand-outline { stroke-width: 1.8; opacity: 0; }
  .brand-fill-red { fill: #cc1d3c; }
  .brand-fill-blue { fill: #092744; }
  .brand-fill { opacity: 1; }
  .brand-mark-animation.is-ready :where(.brand-guide,.brand-outline) { stroke-dashoffset: 1; }
  .brand-mark-animation.is-ready .brand-fill { opacity: 0; }
  .brand-mark-animation.is-running .brand-guide { animation: brand-line-in .72s var(--line-delay, 0s) var(--ease) forwards, brand-line-out .4s 1.72s var(--ease) forwards; }
  .brand-mark-animation.is-running .brand-guide-1 { --line-delay: 0s; }
  .brand-mark-animation.is-running .brand-guide-2 { --line-delay: .08s; }
  .brand-mark-animation.is-running .brand-guide-3 { --line-delay: .16s; }
  .brand-mark-animation.is-running .brand-guide-4 { --line-delay: .23s; }
  .brand-mark-animation.is-running .brand-guide-5 { --line-delay: .31s; }
  .brand-mark-animation.is-running .brand-guide-6 { --line-delay: .39s; }
  .brand-mark-animation.is-running .brand-guide-7 { --line-delay: .47s; }
  .brand-mark-animation.is-running .brand-outline { animation: brand-outline-in .9s .58s var(--ease) forwards, brand-line-out .45s 1.78s var(--ease) forwards; }
  .brand-mark-animation.is-running .brand-fill-red { animation: brand-colour-red 1.65s 1.42s var(--ease) forwards; }
  .brand-mark-animation.is-running .brand-fill-blue { animation: brand-colour-blue 1.65s 1.42s var(--ease) forwards; }

  .identity-feature { display: grid; gap: clamp(4rem, 9vw, 8rem); }
  .identity-heading { display: grid; gap: 1.2rem; }
  .identity-heading > span,
  .identity-index,
  .identity-card-copy > span {
    color: var(--blue);
    font-size: .67rem;
    font-weight: 750;
    letter-spacing: .12em;
  }
  .identity-heading h2,
  .bombardier-intro h2 {
    max-width: 14ch;
    font-size: clamp(2.6rem, 5.5vw, 5.8rem);
    letter-spacing: -.06em;
    line-height: .96;
  }
  .identity-story {
    display: grid;
    gap: 1.25rem;
    max-width: var(--reading);
    margin-left: auto;
    font-size: clamp(1.05rem, 1.65vw, 1.32rem);
    line-height: 1.48;
  }
  .identity-role {
    color: var(--muted);
    font-size: .66rem;
    font-weight: 750;
    letter-spacing: .11em;
    line-height: 1.55;
  }
  .identity-process { display: grid; gap: 1rem; }
  .identity-process img { width: min(100%, 48rem); height: auto; margin-inline: auto; }
  .identity-process figcaption,
  .bombardier-gallery figcaption {
    display: grid;
    grid-template-columns: 2.5rem minmax(0,1fr);
    gap: 1rem;
    max-width: 38rem;
    font-size: .8rem;
    line-height: 1.5;
  }
  .identity-process figcaption span:first-child,
  .bombardier-gallery figcaption span:first-child { color: var(--blue); font-weight: 750; }

  .identity-extension {
    display: grid;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    padding: clamp(2rem, 5vw, 5rem);
    background: #f1f3ed;
  }
  .identity-extension figure { min-width: 0; }
  .identity-extension img { width: 100%; height: auto; }
  .identity-extension > div { display: grid; gap: 1.15rem; align-content: center; }
  .identity-extension h3 { max-width: 12ch; font-size: clamp(2rem, 4.2vw, 4rem); letter-spacing: -.05em; line-height: 1; }
  .identity-extension p { max-width: 35rem; font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.5; }

  .identity-grid { display: grid; gap: 1px; background: var(--line); padding-inline: var(--pad); }
  .identity-card { display: grid; background: var(--paper); }
  .identity-logo-stage {
    display: grid;
    min-height: clamp(20rem, 48vw, 34rem);
    place-items: center;
    padding: clamp(2rem, 5vw, 5rem);
    background: var(--soft);
  }
  .identity-logo-stage img { width: auto; height: auto; object-fit: contain; }
  .identity-logo-stage-olive img { width: min(78%, 22rem); }
  .identity-logo-stage-pmz img { width: 9.375rem; }
  .identity-logo-stage-energy img { width: 5.625rem; }
  .identity-card-copy { display: grid; gap: 1.1rem; align-content: start; padding: clamp(2rem, 5vw, 4.5rem); }
  .identity-card-copy h2 { max-width: 13ch; font-size: clamp(2rem, 4vw, 3.8rem); letter-spacing: -.052em; line-height: 1; }
  .identity-card-copy p:not(.identity-role) { max-width: 38rem; font-size: clamp(1rem, 1.3vw, 1.16rem); line-height: 1.5; }
  .identity-card-copy .text-link { width: max-content; max-width: 100%; }

  .bombardier-special { background: #0a0a0a; color: #fff; }
  .bombardier-intro { display: grid; gap: clamp(2rem, 5vw, 5rem); }
  .bombardier-intro .case-badge { color: #fff; }
  .bombardier-intro > div { display: grid; gap: 1.2rem; max-width: var(--reading); margin-left: auto; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.48; }
  .bombardier-intro .identity-role { color: rgba(255,255,255,.62); }
  .bombardier-gallery { display: grid; gap: clamp(4rem, 10vw, 10rem); padding: 0 var(--pad) clamp(5rem, 10vw, 10rem); }
  .bombardier-gallery figure { display: grid; gap: 1rem; }
  .bombardier-gallery img { width: auto; max-width: min(100%, 60rem); height: auto; margin-inline: auto; }
  .bombardier-gallery figcaption span:first-child { color: #7f8cff; }
  .bombardier-spread,
  .bombardier-campaign { width: min(100%, 60rem); margin-left: auto; }
  .bombardier-logo { width: min(76.4%, 46rem); }
  .bombardier-material { width: min(61.8%, 42rem); }

  @media (min-width: 46rem) {
    .branding-hero { grid-template-columns: minmax(0,1fr) minmax(20rem,.9fr); }
    .identity-extension { grid-template-columns: minmax(0,1.1fr) minmax(19rem,.9fr); }
    .identity-card { grid-template-columns: minmax(0,1fr) minmax(20rem,.9fr); }
    .identity-card:nth-child(even) .identity-logo-stage { order: 2; }
  }

  @media (min-width: 64rem) {
    .experience-heading { grid-row: 1 / span 2; }
    .experience-profile { grid-column: 2; }
    .experience-nav { grid-column: 2; }
    .experience-quote { grid-column: 2; }
  }

  @media (max-width: 45.999rem) {
    .branding-hero { min-height: auto; padding-top: 7rem; }
    .brand-mark-animation { order: -1; width: min(88vw, 31rem); }
    .identity-grid { padding-inline: 0; }
    .identity-card { gap: 0; }
    .bombardier-logo,
    .bombardier-material { width: 100%; }
  }

  @keyframes brand-line-in {
    0% { opacity: 0; stroke-dashoffset: 1; }
    18% { opacity: .7; }
    100% { opacity: .48; stroke-dashoffset: 0; }
  }
  @keyframes brand-outline-in {
    0% { opacity: 0; stroke-dashoffset: 1; }
    20% { opacity: .75; }
    100% { opacity: .95; stroke-dashoffset: 0; }
  }
  @keyframes brand-line-out { to { opacity: 0; } }
  @keyframes brand-colour-red {
    0% { opacity: 0; fill: #4a7389; }
    12% { opacity: 1; fill: #4a7389; }
    36% { opacity: 1; fill: #cc1d3c; }
    60% { opacity: 1; fill: #65002f; }
    82%,100% { opacity: 1; fill: #cc1d3c; }
  }
  @keyframes brand-colour-blue {
    0% { opacity: 0; fill: #f34c49; }
    12% { opacity: 1; fill: #f34c49; }
    36% { opacity: 1; fill: #eda51d; }
    60% { opacity: 1; fill: #eda51d; }
    82%,100% { opacity: 1; fill: #092744; }
  }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    .brand-mark-animation :where(.brand-guide,.brand-outline) { display: none; }
    .brand-mark-animation.is-ready .brand-fill { opacity: 1; animation: none !important; }
  }
}

/* V8 — editorial constellation */
@layer pages {
  @keyframes pmz-float-in {
    from { opacity: 1; transform: translate3d(-3%, 2%, 0) scale(.94); }
    68% { opacity: 1; transform: translate3d(.5%, -.25%, 0) scale(1.008); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  }

  .page-index .work-index {
    position: relative;
    display: block;
    padding-block: clamp(2.5rem, 6vw, 6rem);
  }

  .page-index .work-card-lettered {
    min-height: 0;
    background: transparent;
    color: var(--ink);
  }

  .page-index .work-card-lettered .work-card-link {
    position: relative;
    display: grid;
    width: min(100%, var(--content));
    min-height: clamp(34rem, 78svh, 43rem);
    margin-inline: auto;
    padding: clamp(3.5rem, 8vw, 7.5rem) clamp(1.25rem, 4vw, 4.5rem);
    border-top: 1px solid var(--line);
    background: var(--paper);
    transition: background-color .48s var(--ease), color .38s var(--ease);
  }

  .page-index .work-card-lettered:last-of-type .work-card-link {
    border-bottom: 1px solid var(--line);
  }

  .page-index .work-card-lettered:is(:hover, :focus-within, :active) {
    background: transparent;
    color: var(--ink);
  }

  .page-index .work-card-lettered:is(:hover, :focus-within, :active) .work-card-link {
    background: var(--blue);
    color: #fff;
  }

  .page-index .work-card-lettered:is(:hover, :focus-within, :active) h2 {
    color: inherit;
  }

  .page-index .work-card-lettered .work-card-letter {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: 100%;
    font-size: clamp(8rem, 42vw, 14rem);
    line-height: .74;
    text-align: left;
  }

  .page-index .work-card-lettered :where(.work-card-number, h2, .work-card-meta, .overview-copy) {
    grid-column: 1;
    max-width: 34rem;
  }

  .page-index .work-card-lettered .work-card-number { grid-row: 2; }
  .page-index .work-card-lettered h2 {
    grid-row: 3;
    font-size: clamp(2.25rem, 10vw, 3.25rem);
  }
  .page-index .work-card-lettered .work-card-meta { grid-row: 4; }
  .page-index .work-card-lettered .overview-copy {
    grid-row: 5;
    max-width: 31rem;
    font-size: clamp(1.02rem, 4.5vw, 1.14rem);
    line-height: 1.52;
  }

  .work-progress { display: none; }

  @media (min-width: 64rem) {
    .page-index .work-card-lettered .work-card-link {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      grid-template-rows: repeat(4, auto);
      column-gap: clamp(1rem, 1.7vw, 2rem);
      row-gap: 1.05rem;
      align-content: center;
      align-items: end;
    }

    .page-index .work-card-lettered .work-card-letter {
      grid-row: 1 / -1;
      align-self: center;
      justify-self: stretch;
      width: auto;
      font-size: clamp(12rem, 21vw, 23rem);
      text-align: center;
    }

    .page-index .work-card-lettered :where(.work-card-number, h2, .work-card-meta, .overview-copy) {
      min-width: 0;
    }

    .page-index .work-card-lettered .work-card-number { grid-row: 1; }
    .page-index .work-card-lettered h2 {
      grid-row: 2;
      font-size: clamp(2.7rem, 4.4vw, 4.75rem);
    }
    .page-index .work-card-lettered .work-card-meta { grid-row: 3; }
    .page-index .work-card-lettered .overview-copy { grid-row: 4; }

    .page-index .work-card-lettered:nth-of-type(1) .work-card-letter {
      grid-column: 1 / 6;
      background-position: 54% 43%;
    }
    .page-index .work-card-lettered:nth-of-type(1) :where(.work-card-number, h2, .work-card-meta, .overview-copy) { grid-column: 7 / 12; }

    .page-index .work-card-lettered:nth-of-type(2) .work-card-letter {
      grid-column: 8 / 13;
      align-self: start;
      background-position: 56% 42%;
    }
    .page-index .work-card-lettered:nth-of-type(2) :where(.work-card-number, h2, .work-card-meta, .overview-copy) { grid-column: 2 / 7; }

    .page-index .work-card-lettered:nth-of-type(3) .work-card-letter {
      grid-column: 1 / 7;
      background-position: 46% 48%;
    }
    .page-index .work-card-lettered:nth-of-type(3) :where(.work-card-number, h2, .work-card-meta, .overview-copy) { grid-column: 8 / 13; }

    .page-index .work-card-lettered:nth-of-type(4) .work-card-letter {
      grid-column: 7 / 13;
      align-self: end;
      background-position: 50% 42%;
    }
    .page-index .work-card-lettered:nth-of-type(4) :where(.work-card-number, h2, .work-card-meta, .overview-copy) { grid-column: 1 / 6; }

    .page-index .work-card-lettered:nth-of-type(5) .work-card-letter {
      grid-column: 2 / 7;
      background-position: 50% 49%;
    }
    .page-index .work-card-lettered:nth-of-type(5) :where(.work-card-number, h2, .work-card-meta, .overview-copy) { grid-column: 8 / 13; }

    .page-index .work-card-lettered:nth-of-type(1) .work-card-link { min-height: clamp(35rem, 70svh, 43rem); }
    .page-index .work-card-lettered:nth-of-type(2) .work-card-link { min-height: clamp(32rem, 64svh, 39rem); }
    .page-index .work-card-lettered:nth-of-type(3) .work-card-link { min-height: clamp(38rem, 76svh, 47rem); }
    .page-index .work-card-lettered:nth-of-type(4) .work-card-link { min-height: clamp(37rem, 74svh, 46rem); }
    .page-index .work-card-lettered:nth-of-type(5) .work-card-link { min-height: clamp(33rem, 66svh, 41rem); }

    .work-progress {
      position: sticky;
      z-index: 4;
      top: 50%;
      display: grid;
      grid-template-rows: auto 5.5rem auto;
      gap: .55rem;
      width: 1.25rem;
      height: 8rem;
      margin: 0 0 -8rem max(.45rem, calc((100% - var(--content)) / 2 + .55rem));
      color: var(--muted);
      font-size: .55rem;
      font-weight: 750;
      letter-spacing: .04em;
      line-height: 1;
      pointer-events: none;
      transform: translateY(-50%);
    }
    .work-progress-track {
      position: relative;
      justify-self: center;
      width: 1px;
      height: 100%;
      overflow: hidden;
      background: var(--line);
    }
    .work-progress-track i {
      position: absolute;
      inset: 0;
      display: block;
      background: var(--blue);
      transform: scaleY(var(--work-progress, .2));
      transform-origin: top;
      transition: transform .55s var(--ease);
    }
    .work-progress-current {
      color: var(--blue);
      transition: color .3s var(--ease);
    }
  }

  @media (max-width: 63.999rem) {
    .page-index .work-index { padding-block: 1.25rem 4rem; }
    .page-index .work-card-lettered .work-card-link {
      width: 100%;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(5, auto);
      gap: 1rem;
      align-content: center;
    }
  }

  @media (max-width: 30rem) {
    .page-index .work-card-lettered .work-card-link {
      min-height: clamp(33rem, 78svh, 39rem);
      padding-inline: clamp(1.15rem, 6vw, 2rem);
    }
    .page-index .work-card-lettered .work-card-letter {
      font-size: clamp(7.5rem, 39vw, 11rem);
    }
  }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    [data-brand-motion="pmz"] img { animation: none !important; transform: none !important; }
    .work-progress-track i { transition: none; }
  }
}

/* V7 — exact identity vectors, lighter grid and restrained brand motion */
@layer pages {
  .page-branding {
    --eight-p-blue: #5d8099;
    --eight-p-purple: #692e57;
  }

  .page-branding .brand-fill-red { fill: var(--eight-p-blue); }
  .page-branding .brand-fill-blue { fill: var(--eight-p-purple); }

  .page-branding .identity-process img {
    width: min(100%, 48rem);
    aspect-ratio: 1;
  }

  .page-branding .identity-extension {
    position: relative;
    padding-inline: 0;
    border-block: 1px solid var(--line);
    background: transparent;
  }
  .page-branding .identity-extension > div { padding: clamp(2rem, 5vw, 5rem); }
  .page-branding .identity-extension figure {
    position: relative;
    display: grid;
    min-height: clamp(20rem, 45vw, 36rem);
    place-items: center;
    overflow: clip;
  }
  .page-branding .identity-extension img {
    width: min(108%, 48rem);
    max-width: none;
  }

  .page-branding .lfl-light {
    position: absolute;
    inset: -22% auto -22% -38%;
    width: 24%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.08) 22%, rgba(255,255,255,.96) 50%, rgba(255,255,255,.08) 78%, transparent 100%);
    mix-blend-mode: screen;
    opacity: 0;
    transform: skewX(-12deg);
  }
  .page-branding .lfl-motion.is-active .lfl-light {
    animation: lfl-light-pass 1.35s .38s var(--ease) both;
  }

  .page-branding .identity-grid {
    gap: 0;
    padding-inline: var(--pad);
    border-top: 1px solid var(--line);
    background: transparent;
  }
  .page-branding .identity-card {
    position: relative;
    border-bottom: 1px solid var(--line);
    background: transparent;
  }
  .page-branding .identity-logo-stage {
    position: relative;
    min-height: clamp(22rem, 48vw, 38rem);
    overflow: clip;
    background: transparent;
    isolation: isolate;
  }
  .page-branding .identity-logo-stage img {
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform, opacity, clip-path;
  }
  .page-branding .identity-logo-stage-olive img { width: min(82%, 31rem); }
  .page-branding .identity-logo-stage-pmz img { width: min(88%, 37rem); }
  .page-branding .identity-logo-stage-energy .energy-logo {
    position: relative;
    display: block;
    width: min(76%, 21rem);
    aspect-ratio: 332 / 335;
  }
  .page-branding .identity-logo-stage-energy img { width: 100%; }
  .page-branding .identity-logo-stage-energy .energy-orbit {
    position: absolute;
    inset: 0;
  }
  .page-branding .identity-card-copy { padding-inline: clamp(2rem, 5vw, 5rem); }

  .motion-ready [data-brand-motion="olive"]:not(.is-active) img {
    opacity: .08;
    transform: translate3d(-8%, 5%, 0) scale(2.05) rotate(-2.5deg);
  }
  [data-brand-motion="olive"].is-active img {
    animation: olive-settle 1.15s var(--ease) both;
  }

  .motion-ready [data-brand-motion="pmz"]:not(.is-active) img {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translate3d(-6%, 0, 0);
  }
  [data-brand-motion="pmz"].is-active img {
    animation: pmz-reveal .95s .08s var(--ease) both;
  }
  .page-branding .pmz-current { display: none; }

  .motion-ready [data-brand-motion="energy"]:not(.is-active) .energy-base {
    opacity: 0;
    transform: translate3d(0, 7%, 0);
  }
  .motion-ready [data-brand-motion="energy"]:not(.is-active) .energy-orbit {
    opacity: 0;
    transform: rotate(-16deg) scale(.68);
  }
  [data-brand-motion="energy"].is-active .energy-base {
    animation: energy-base-in .68s var(--ease) both;
  }
  [data-brand-motion="energy"].is-active .energy-orbit {
    transform-origin: 56% 32%;
    animation: energy-orbit-in .9s .42s var(--ease) both;
  }

  .page-branding .bombardier-gallery img {
    width: auto;
    max-width: min(100%, 60rem);
  }
  .page-branding .bombardier-logo img { max-width: min(100%, 46rem); }

  @media (min-width: 46rem) {
    .page-branding .identity-extension figure { border-right: 1px solid var(--line); }
    .page-branding .identity-card:nth-child(odd) .identity-logo-stage { border-right: 1px solid var(--line); }
    .page-branding .identity-card:nth-child(even) .identity-logo-stage { border-left: 1px solid var(--line); }
  }

  @media (max-width: 45.999rem) {
    .page-branding .identity-extension { padding-block: 0; }
    .page-branding .identity-extension figure,
    .page-branding .identity-logo-stage {
      min-height: clamp(19rem, 105vw, 29rem);
      border-bottom: 1px solid var(--line);
    }
    .page-branding .identity-extension img { width: min(118%, 35rem); }
    .page-branding .identity-logo-stage-olive img { width: min(88%, 25rem); }
    .page-branding .identity-logo-stage-pmz img { width: min(92%, 32rem); }
    .page-branding .identity-logo-stage-energy .energy-logo { width: min(78%, 19rem); }
  }

  @keyframes olive-settle {
    from { opacity: .08; transform: translate3d(-8%, 5%, 0) scale(2.05) rotate(-2.5deg); }
    62% { opacity: 1; }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); }
  }
  @keyframes pmz-reveal {
    from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translate3d(-6%, 0, 0); }
    24% { opacity: 1; }
    to { opacity: 1; clip-path: inset(0 0 0 0); transform: translate3d(0, 0, 0); }
  }
  @keyframes energy-base-in {
    from { opacity: 0; transform: translate3d(0, 7%, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  @keyframes energy-orbit-in {
    from { opacity: 0; transform: rotate(-16deg) scale(.68); }
    58% { opacity: 1; }
    to { opacity: 1; transform: rotate(0) scale(1); }
  }
  @keyframes lfl-light-pass {
    0% { left: -38%; opacity: 0; }
    18%, 72% { opacity: .78; }
    100% { left: 116%; opacity: 0; }
  }
}

@layer pages {
  @keyframes brand-colour-red {
    0% { opacity: 0; fill: #5f849e; }
    12% { opacity: 1; fill: #5f849e; }
    38% { opacity: 1; fill: #d79a2b; }
    62% { opacity: 1; fill: #8a596f; }
    84%,100% { opacity: 1; fill: #5d8099; }
  }
  @keyframes brand-colour-blue {
    0% { opacity: 0; fill: #8b6a77; }
    12% { opacity: 1; fill: #8b6a77; }
    38% { opacity: 1; fill: #4e748d; }
    62% { opacity: 1; fill: #8a596f; }
    84%,100% { opacity: 1; fill: #692e57; }
  }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    .page-branding [data-brand-motion] img,
    .page-branding [data-brand-motion] .energy-orbit {
      opacity: 1 !important;
      clip-path: none !important;
      transform: none !important;
      animation: none !important;
    }
    .page-branding .lfl-light { display: none; }
  }
}

/* V8 identity overrides — kept last to supersede the V7 motion states */
@layer pages {
  .page-branding .identity-process img { width: min(88%, 42rem); }
  .page-branding .identity-logo-stage-olive img { width: min(84%, 31rem); }

  .motion-ready [data-brand-motion="pmz"]:not(.is-active) img {
    opacity: 1;
    clip-path: none;
    transform: translate3d(-3%, 2%, 0) scale(.94);
  }
  [data-brand-motion="pmz"].is-active img {
    opacity: 1;
    clip-path: none;
    animation: pmz-float-in 1.15s var(--ease) both;
  }

  @media (max-width: 45.999rem) {
    .page-branding .identity-process img { width: min(84%, 32rem); }
    .page-branding .identity-logo-stage-olive img { width: min(88%, 25rem); }
  }
}

/* V9 — One Grid, Five Attitudes. Desktop art direction only. */
@layer pages {
  @media (min-width: 75rem) {
    .page-index .work-index {
      padding-block: clamp(3.5rem, 6vw, 7rem);
    }

    .page-index .work-card-lettered .work-card-link {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      grid-template-rows: repeat(4, auto);
      column-gap: clamp(1rem, 1.7vw, 2rem);
      row-gap: clamp(.85rem, 1.3vw, 1.25rem);
      padding: clamp(4.5rem, 7vw, 7.5rem) clamp(2.5rem, 5vw, 5.5rem);
    }

    .page-index .work-card-lettered .work-card-letter {
      position: absolute;
      z-index: 0;
      display: block;
      grid-column: auto;
      grid-row: auto;
      align-self: auto;
      justify-self: auto;
      width: max-content;
      max-width: none;
      margin: 0;
      pointer-events: none;
      backface-visibility: hidden;
      transform-origin: center;
      transition: transform .75s var(--ease), opacity .45s var(--ease);
      will-change: transform;
    }

    .page-index .work-card-lettered :where(.work-card-number, h2, .work-card-meta, .overview-copy) {
      position: relative;
      z-index: 2;
      min-width: 0;
      max-width: none;
    }

    .page-index .work-card-lettered .work-card-number {
      grid-row: 1;
      align-self: end;
      font-size: .68rem;
      letter-spacing: .11em;
    }
    .page-index .work-card-lettered h2 {
      grid-row: 2;
      align-self: end;
      max-width: none;
      font-weight: 740;
      letter-spacing: -.07em;
      line-height: .88;
    }
    .page-index .work-card-lettered .work-card-meta {
      grid-row: 3;
      align-self: start;
    }
    .page-index .work-card-lettered .overview-copy {
      grid-row: 4;
      align-self: start;
      max-width: 31rem;
      font-size: clamp(1.05rem, 1.35vw, 1.22rem);
      line-height: 1.5;
    }

    /* 01 — Atomic: image and typography fuse along one diagonal field. */
    .page-index .work-card-lettered:nth-of-type(1) .work-card-link {
      min-height: clamp(42rem, 82svh, 52rem);
      align-content: center;
    }
    .page-index .work-card-lettered:nth-of-type(1) .work-card-letter {
      top: -10%;
      left: -5.5%;
      font-size: clamp(32rem, 46vw, 52rem);
      line-height: .72;
      transform: rotate(-2deg);
    }
    .page-index .work-card-lettered:nth-of-type(1) .work-card-number,
    .page-index .work-card-lettered:nth-of-type(1) .work-card-meta,
    .page-index .work-card-lettered:nth-of-type(1) .overview-copy { grid-column: 8 / 12; }
    .page-index .work-card-lettered:nth-of-type(1) h2 {
      grid-column: 7 / 12;
      font-size: clamp(4.6rem, 7vw, 7.5rem);
    }
    .page-index .work-card-lettered:nth-of-type(1):is(:hover, :focus-within) .work-card-letter {
      transform: rotate(-1.2deg) scale(1.018);
    }

    /* 02 — Qtron: a small scientific sign held at deliberate distance. */
    .page-index .work-card-lettered:nth-of-type(2) .work-card-link {
      min-height: clamp(36rem, 70svh, 44rem);
      align-content: end;
    }
    .page-index .work-card-lettered:nth-of-type(2) .work-card-link::after {
      position: absolute;
      z-index: 1;
      top: 28%;
      left: 58%;
      width: 22%;
      height: 1px;
      content: "";
      background: currentColor;
      opacity: .2;
      transform-origin: left;
      transition: opacity .38s var(--ease), transform .65s var(--ease);
    }
    .page-index .work-card-lettered:nth-of-type(2) .work-card-letter {
      top: 9%;
      right: 7.5%;
      font-size: clamp(8rem, 11vw, 12rem);
      line-height: .78;
      transform: rotate(1.5deg);
    }
    .page-index .work-card-lettered:nth-of-type(2) :where(.work-card-number, h2, .work-card-meta, .overview-copy) { grid-column: 2 / 8; }
    .page-index .work-card-lettered:nth-of-type(2) h2 { font-size: clamp(5rem, 7.5vw, 8rem); }
    .page-index .work-card-lettered:nth-of-type(2):is(:hover, :focus-within) .work-card-letter {
      transform: translate3d(-.4rem, .35rem, 0) rotate(0) scale(1.035);
    }
    .page-index .work-card-lettered:nth-of-type(2):is(:hover, :focus-within) .work-card-link::after {
      opacity: .48;
      transform: scaleX(1.08);
    }

    /* 03 — finanzblick: the F becomes a vertical information architecture. */
    .page-index .work-card-lettered:nth-of-type(3) .work-card-link {
      min-height: clamp(42rem, 80svh, 50rem);
      align-content: center;
    }
    .page-index .work-card-lettered:nth-of-type(3) .work-card-letter {
      top: 50%;
      left: 1.5%;
      font-size: clamp(34rem, 43vw, 48rem);
      line-height: .72;
      transform: translateY(-50%);
      transform-origin: left center;
    }
    .page-index .work-card-lettered:nth-of-type(3) :where(.work-card-number, h2, .work-card-meta, .overview-copy) { grid-column: 6 / 12; }
    .page-index .work-card-lettered:nth-of-type(3) h2 { font-size: clamp(4.5rem, 7.2vw, 7.7rem); }
    .page-index .work-card-lettered:nth-of-type(3) .overview-copy { max-width: 34rem; }
    .page-index .work-card-lettered:nth-of-type(3):is(:hover, :focus-within) .work-card-letter {
      transform: translate3d(.45rem, -50%, 0) scale(1.012);
    }

    /* 04 — Perspectives: a controlled shift between image and statement. */
    .page-index .work-card-lettered:nth-of-type(4) .work-card-link {
      min-height: clamp(43rem, 84svh, 53rem);
      align-content: center;
    }
    .page-index .work-card-lettered:nth-of-type(4) .work-card-letter {
      right: -7%;
      bottom: -16%;
      font-size: clamp(34rem, 45vw, 50rem);
      line-height: .72;
      transform: rotate(1.2deg);
      transform-origin: right bottom;
    }
    .page-index .work-card-lettered:nth-of-type(4) :where(.work-card-number, h2) { grid-column: 1 / 7; }
    .page-index .work-card-lettered:nth-of-type(4) .work-card-meta { grid-column: 2 / 7; }
    .page-index .work-card-lettered:nth-of-type(4) .overview-copy {
      grid-column: 2 / 7;
      max-width: 32rem;
      transition: transform .65s var(--ease);
    }
    .page-index .work-card-lettered:nth-of-type(4) h2 {
      max-width: 11ch;
      font-size: clamp(3.9rem, 6vw, 6.5rem);
    }
    .page-index .work-card-lettered:nth-of-type(4):is(:hover, :focus-within) .work-card-letter {
      transform: translate3d(-.75rem, .55rem, 0) rotate(.35deg) scale(1.01);
    }
    .page-index .work-card-lettered:nth-of-type(4):is(:hover, :focus-within) .overview-copy {
      transform: translateX(-.35rem);
    }

    /* 05 — Branding: a compact sign initiates a dominant typographic field. */
    .page-index .work-card-lettered:nth-of-type(5) .work-card-link {
      min-height: clamp(35rem, 68svh, 43rem);
      align-content: center;
    }
    .page-index .work-card-lettered:nth-of-type(5) .work-card-letter {
      top: 50%;
      left: 8.5%;
      font-size: clamp(7rem, 9vw, 10.5rem);
      line-height: .78;
      transform: translateY(-50%) rotate(-1deg);
    }
    .page-index .work-card-lettered:nth-of-type(5) .work-card-number { grid-column: 4 / 7; }
    .page-index .work-card-lettered:nth-of-type(5) h2 {
      grid-column: 4 / 12;
      font-size: clamp(5.4rem, 8.5vw, 9rem);
    }
    .page-index .work-card-lettered:nth-of-type(5) .work-card-meta { grid-column: 5 / 12; }
    .page-index .work-card-lettered:nth-of-type(5) .overview-copy {
      grid-column: 5 / 11;
      max-width: 36rem;
    }
    .page-index .work-card-lettered:nth-of-type(5):is(:hover, :focus-within) .work-card-letter {
      transform: translate3d(.25rem, -50%, 0) rotate(0) scale(1.045);
    }
  }
}

@layer utilities {
  @media (min-width: 75rem) and (prefers-reduced-motion: reduce) {
    .page-index .work-card-lettered .work-card-letter,
    .page-index .work-card-lettered .overview-copy,
    .page-index .work-card-lettered .work-card-link::after {
      transition: none !important;
    }
  }
}

/* V10 — the same five typographic attitudes across tablet and mobile. */
@layer pages {
  @media (max-width: 74.999rem) {
    .page-index .work-card-lettered .work-card-link {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      grid-template-rows: repeat(4, auto);
      column-gap: clamp(.75rem, 2vw, 1.5rem);
      row-gap: clamp(.75rem, 1.8vw, 1.05rem);
      min-height: clamp(34rem, 72svh, 44rem);
      padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
    }

    .page-index .work-card-lettered .work-card-letter {
      position: absolute;
      z-index: 0;
      display: block;
      grid-column: auto;
      grid-row: auto;
      align-self: auto;
      justify-self: auto;
      width: max-content;
      max-width: none;
      margin: 0;
      pointer-events: none;
      backface-visibility: hidden;
      transform-origin: center;
      transition: transform .68s var(--ease), opacity .4s var(--ease);
      will-change: transform;
    }

    .page-index .work-card-lettered :where(.work-card-number, h2, .work-card-meta, .overview-copy) {
      position: relative;
      z-index: 2;
      min-width: 0;
      max-width: none;
    }
    .page-index .work-card-lettered .work-card-number { grid-row: 1; align-self: end; }
    .page-index .work-card-lettered h2 {
      grid-row: 2;
      align-self: end;
      max-width: none;
      font-weight: 740;
      letter-spacing: -.07em;
      line-height: .9;
    }
    .page-index .work-card-lettered .work-card-meta { grid-row: 3; align-self: start; }
    .page-index .work-card-lettered .overview-copy {
      grid-row: 4;
      align-self: start;
      max-width: 30rem;
      font-size: clamp(1rem, 2vw, 1.15rem);
      line-height: 1.5;
    }

    /* Tablet — Atomic / fusion */
    .page-index .work-card-lettered:nth-of-type(1) .work-card-link {
      min-height: clamp(38rem, 78svh, 48rem);
      align-content: center;
    }
    .page-index .work-card-lettered:nth-of-type(1) .work-card-letter {
      top: -8%;
      left: -8%;
      font-size: clamp(24rem, 42vw, 38rem);
      line-height: .72;
      transform: rotate(-2deg);
    }
    .page-index .work-card-lettered:nth-of-type(1) :where(.work-card-number, .work-card-meta, .overview-copy) { grid-column: 7 / 12; }
    .page-index .work-card-lettered:nth-of-type(1) h2 {
      grid-column: 6 / 12;
      font-size: clamp(3.8rem, 8vw, 5.8rem);
    }
    .page-index .work-card-lettered:nth-of-type(1):is(:hover, :focus-within, :active) .work-card-letter {
      transform: rotate(-1.2deg) scale(1.018);
    }

    /* Tablet — Qtron / distance */
    .page-index .work-card-lettered:nth-of-type(2) .work-card-link {
      min-height: clamp(34rem, 68svh, 41rem);
      align-content: end;
    }
    .page-index .work-card-lettered:nth-of-type(2) .work-card-link::after {
      position: absolute;
      z-index: 1;
      top: 27%;
      left: 56%;
      width: 24%;
      height: 1px;
      content: "";
      background: currentColor;
      opacity: .2;
      transform-origin: left;
      transition: opacity .35s var(--ease), transform .6s var(--ease);
    }
    .page-index .work-card-lettered:nth-of-type(2) .work-card-letter {
      top: 8%;
      right: 8%;
      font-size: clamp(7rem, 14vw, 10rem);
      line-height: .78;
      transform: rotate(1.5deg);
    }
    .page-index .work-card-lettered:nth-of-type(2) :where(.work-card-number, h2, .work-card-meta, .overview-copy) { grid-column: 2 / 9; }
    .page-index .work-card-lettered:nth-of-type(2) h2 { font-size: clamp(4rem, 9vw, 6rem); }
    .page-index .work-card-lettered:nth-of-type(2):is(:hover, :focus-within, :active) .work-card-letter {
      transform: translate3d(-.3rem, .25rem, 0) rotate(0) scale(1.03);
    }
    .page-index .work-card-lettered:nth-of-type(2):is(:hover, :focus-within, :active) .work-card-link::after {
      opacity: .45;
      transform: scaleX(1.06);
    }

    /* Tablet — finanzblick / architecture */
    .page-index .work-card-lettered:nth-of-type(3) .work-card-link {
      min-height: clamp(39rem, 76svh, 46rem);
      align-content: center;
    }
    .page-index .work-card-lettered:nth-of-type(3) .work-card-letter {
      top: 50%;
      left: 0;
      font-size: clamp(27rem, 43vw, 36rem);
      line-height: .72;
      transform: translateY(-50%);
      transform-origin: left center;
    }
    .page-index .work-card-lettered:nth-of-type(3) :where(.work-card-number, h2, .work-card-meta, .overview-copy) { grid-column: 5 / 12; }
    .page-index .work-card-lettered:nth-of-type(3) h2 { font-size: clamp(3.8rem, 8vw, 5.8rem); }
    .page-index .work-card-lettered:nth-of-type(3):is(:hover, :focus-within, :active) .work-card-letter {
      transform: translate3d(.35rem, -50%, 0) scale(1.012);
    }

    /* Tablet — Perspectives / controlled shift */
    .page-index .work-card-lettered:nth-of-type(4) .work-card-link {
      min-height: clamp(40rem, 80svh, 49rem);
      align-content: center;
    }
    .page-index .work-card-lettered:nth-of-type(4) .work-card-letter {
      right: -9%;
      bottom: -14%;
      font-size: clamp(28rem, 45vw, 38rem);
      line-height: .72;
      transform: rotate(1.2deg);
      transform-origin: right bottom;
    }
    .page-index .work-card-lettered:nth-of-type(4) :where(.work-card-number, h2) { grid-column: 1 / 7; }
    .page-index .work-card-lettered:nth-of-type(4) :where(.work-card-meta, .overview-copy) { grid-column: 2 / 7; }
    .page-index .work-card-lettered:nth-of-type(4) h2 {
      max-width: 11ch;
      font-size: clamp(3.4rem, 7vw, 5rem);
    }
    .page-index .work-card-lettered:nth-of-type(4):is(:hover, :focus-within, :active) .work-card-letter {
      transform: translate3d(-.55rem, .4rem, 0) rotate(.4deg) scale(1.01);
    }

    /* Tablet — Branding / concentration */
    .page-index .work-card-lettered:nth-of-type(5) .work-card-link {
      min-height: clamp(33rem, 65svh, 40rem);
      align-content: center;
    }
    .page-index .work-card-lettered:nth-of-type(5) .work-card-letter {
      top: 50%;
      left: 8%;
      font-size: clamp(5.8rem, 10vw, 8rem);
      line-height: .78;
      transform: translateY(-50%) rotate(-1deg);
    }
    .page-index .work-card-lettered:nth-of-type(5) .work-card-number { grid-column: 4 / 7; }
    .page-index .work-card-lettered:nth-of-type(5) h2 {
      grid-column: 4 / 12;
      font-size: clamp(4.5rem, 9vw, 6.5rem);
    }
    .page-index .work-card-lettered:nth-of-type(5) :where(.work-card-meta, .overview-copy) { grid-column: 5 / 12; }
    .page-index .work-card-lettered:nth-of-type(5):is(:hover, :focus-within, :active) .work-card-letter {
      transform: translate3d(.2rem, -50%, 0) rotate(0) scale(1.04);
    }
  }

  @media (max-width: 45.999rem) {
    .page-index .work-index { padding-block: 0 3rem; }
    .page-index .work-card-lettered .work-card-link {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      grid-template-rows: repeat(4, auto);
      column-gap: .65rem;
      row-gap: .85rem;
      padding: clamp(2.75rem, 9vw, 4rem) var(--pad);
    }
    .page-index .work-card-lettered .work-card-number,
    .page-index .work-card-lettered .work-card-meta { font-size: .65rem; line-height: 1.4; }
    .page-index .work-card-lettered .overview-copy {
      max-width: 27rem;
      font-size: clamp(.98rem, 4.45vw, 1.08rem);
      line-height: 1.5;
    }

    /* Mobile — Atomic */
    .page-index .work-card-lettered:nth-of-type(1) .work-card-link {
      min-height: clamp(38rem, 78svh, 44rem);
      align-content: end;
    }
    .page-index .work-card-lettered:nth-of-type(1) .work-card-letter {
      top: -3%;
      left: -12%;
      font-size: clamp(20rem, 92vw, 27rem);
    }
    .page-index .work-card-lettered:nth-of-type(1) :is(.work-card-number, h2, .work-card-meta, .overview-copy) { grid-column: 2 / 7; }
    .page-index .work-card-lettered:nth-of-type(1) h2 { font-size: clamp(3.15rem, 15vw, 4.4rem); }

    /* Mobile — Qtron */
    .page-index .work-card-lettered:nth-of-type(2) .work-card-link {
      min-height: clamp(33rem, 68svh, 39rem);
      align-content: end;
    }
    .page-index .work-card-lettered:nth-of-type(2) .work-card-letter {
      top: 9%;
      right: 8%;
      font-size: clamp(5.8rem, 24vw, 7.5rem);
    }
    .page-index .work-card-lettered:nth-of-type(2) .work-card-link::after {
      top: 27%;
      left: 48%;
      width: 27%;
    }
    .page-index .work-card-lettered:nth-of-type(2) :is(.work-card-number, h2, .work-card-meta, .overview-copy) { grid-column: 1 / 6; }
    .page-index .work-card-lettered:nth-of-type(2) h2 { font-size: clamp(3.4rem, 17vw, 4.7rem); }

    /* Mobile — finanzblick */
    .page-index .work-card-lettered:nth-of-type(3) .work-card-link {
      min-height: clamp(37rem, 76svh, 43rem);
      align-content: center;
    }
    .page-index .work-card-lettered:nth-of-type(3) .work-card-letter {
      top: 50%;
      left: -7%;
      font-size: clamp(21rem, 96vw, 28rem);
    }
    .page-index .work-card-lettered:nth-of-type(3) :is(.work-card-number, h2, .work-card-meta, .overview-copy) { grid-column: 3 / 7; }
    .page-index .work-card-lettered:nth-of-type(3) h2 {
      font-size: clamp(2.35rem, 11.5vw, 3.3rem);
      overflow-wrap: normal;
    }

    /* Mobile — Perspectives */
    .page-index .work-card-lettered:nth-of-type(4) .work-card-link {
      min-height: clamp(39rem, 80svh, 46rem);
      align-content: start;
    }
    .page-index .work-card-lettered:nth-of-type(4) .work-card-letter {
      right: -20%;
      bottom: -10%;
      font-size: clamp(22rem, 102vw, 30rem);
    }
    .page-index .work-card-lettered:nth-of-type(4) :is(.work-card-number, h2, .work-card-meta, .overview-copy) { grid-column: 1 / 6; }
    .page-index .work-card-lettered:nth-of-type(4) h2 {
      max-width: 9ch;
      font-size: clamp(2.8rem, 13vw, 3.8rem);
    }

    /* Mobile — Branding */
    .page-index .work-card-lettered:nth-of-type(5) .work-card-link {
      min-height: clamp(32rem, 66svh, 38rem);
      align-content: center;
    }
    .page-index .work-card-lettered:nth-of-type(5) .work-card-letter {
      top: 12%;
      left: 8%;
      font-size: clamp(4.8rem, 22vw, 6.5rem);
      transform: rotate(-1deg);
    }
    .page-index .work-card-lettered:nth-of-type(5) :is(.work-card-number, h2, .work-card-meta, .overview-copy) { grid-column: 2 / 7; }
    .page-index .work-card-lettered:nth-of-type(5) h2 { font-size: clamp(3.5rem, 17vw, 4.9rem); }
    .page-index .work-card-lettered:nth-of-type(5):is(:hover, :focus-within, :active) .work-card-letter {
      transform: translate3d(.2rem, .1rem, 0) rotate(0) scale(1.04);
    }
  }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    .page-index .work-card-lettered .work-card-letter,
    .page-index .work-card-lettered .overview-copy,
    .page-index .work-card-lettered .work-card-link::after {
      transition: none !important;
    }
  }
}

/* V11 — iPhone/Safari width hardening and refined finanzblick contact. */
@layer pages {
  .page-branding,
  .page-branding .site-shell,
  .page-branding main,
  .page-branding .bombardier-special,
  .page-branding .bombardier-intro,
  .page-branding .bombardier-gallery {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .page-branding .identity-feature > *,
  .page-branding .identity-extension > *,
  .page-branding .identity-card > *,
  .page-branding .identity-card-copy > *,
  .page-branding .bombardier-intro > *,
  .page-branding .bombardier-intro > div > *,
  .page-branding .bombardier-gallery > * {
    min-width: 0;
    max-width: 100%;
  }

  .page-branding .bombardier-special { overflow: hidden; }
  .page-branding .bombardier-intro .case-badge {
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr);
    width: fit-content;
    max-width: 100%;
    align-items: start;
  }
  .page-branding .bombardier-intro .case-badge::before { margin-top: .72em; }
  .page-branding .bombardier-intro .case-badge > span,
  .page-branding .bombardier-intro .identity-role {
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: auto;
    text-wrap: pretty;
  }

  /* The image-filled F now leans into the wordmark, not the body copy. */
  @media (min-width: 75rem) {
    .page-index .work-card-lettered:nth-of-type(3) .work-card-letter {
      transform: translateY(-50%) rotate(-1.15deg);
    }
    .page-index .work-card-lettered:nth-of-type(3):is(:hover, :focus-within) .work-card-letter {
      transform: translate3d(.45rem, -50%, 0) rotate(-.35deg) scale(1.012);
    }
  }

  @media (min-width: 46rem) and (max-width: 74.999rem) {
    .page-index .work-card-lettered:nth-of-type(3) .work-card-letter {
      transform: translateY(-50%) rotate(-1.45deg);
    }
    .page-index .work-card-lettered:nth-of-type(3):is(:hover, :focus-within, :active) .work-card-letter {
      transform: translate3d(.35rem, -50%, 0) rotate(-.45deg) scale(1.012);
    }
  }

  @media (max-width: 45.999rem) {
    .page-branding,
    .page-branding .site-shell { overflow-x: hidden; }

    .page-branding .bombardier-intro .case-badge {
      width: 100%;
      line-height: 1.45;
    }
    .page-branding .bombardier-intro .identity-role {
      font-size: .62rem;
      letter-spacing: .095em;
      line-height: 1.6;
    }

    .page-index .work-card-lettered:nth-of-type(3) .work-card-letter {
      top: 46%;
      left: -4%;
      font-size: clamp(20.5rem, 94vw, 27.5rem);
      transform: translateY(-50%) rotate(-2.2deg);
      transform-origin: left center;
    }
    .page-index .work-card-lettered:nth-of-type(3):is(:hover, :focus-within, :active) .work-card-letter {
      transform: translate3d(.2rem, -50%, 0) rotate(-1.2deg) scale(1.01);
    }
  }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    .page-index .work-card-lettered:nth-of-type(3) .work-card-letter {
      transition: none !important;
    }
  }
}

/* V12 — tuned letter contact and a quiet mobile chapter indicator. */
@layer pages {
  @media (min-width: 75rem) {
    .page-index .work-card-lettered:nth-of-type(3) .work-card-letter {
      transform: translateY(-50%) rotate(.8deg);
    }
    .page-index .work-card-lettered:nth-of-type(3):is(:hover, :focus-within) .work-card-letter {
      transform: translate3d(.35rem, -50%, 0) rotate(.2deg) scale(1.012);
    }
  }

  @media (min-width: 46rem) and (max-width: 74.999rem) {
    .page-index .work-card-lettered:nth-of-type(3) .work-card-letter {
      transform: translateY(-50%) rotate(1.1deg);
    }
    .page-index .work-card-lettered:nth-of-type(3):is(:hover, :focus-within, :active) .work-card-letter {
      transform: translate3d(.25rem, -50%, 0) rotate(.35deg) scale(1.012);
    }
  }

  @media (max-width: 63.999rem) {
    .page-index .work-progress {
      position: sticky;
      z-index: 4;
      top: 50%;
      display: grid;
      grid-template-rows: auto 3.4rem;
      gap: .42rem;
      width: .9rem;
      height: 4.65rem;
      margin: 0 max(.72rem, env(safe-area-inset-right)) -4.65rem auto;
      color: var(--muted);
      font-size: .5rem;
      font-weight: 750;
      letter-spacing: .04em;
      line-height: 1;
      pointer-events: none;
      opacity: .72;
      transform: translateY(-50%);
    }
    .page-index .work-progress > span:last-child { display: none; }
    .page-index .work-progress-current {
      justify-self: center;
      color: var(--blue);
    }
    .page-index .work-progress-track {
      position: relative;
      justify-self: center;
      width: 1px;
      height: 100%;
      overflow: hidden;
      background: var(--line);
    }
    .page-index .work-progress-track i {
      position: absolute;
      inset: 0;
      display: block;
      background: var(--blue);
      transform: scaleY(var(--work-progress, .2));
      transform-origin: top;
      transition: transform .5s var(--ease);
    }
  }

  @media (max-width: 45.999rem) {
    .page-index .work-card-lettered:nth-of-type(3) .work-card-letter {
      top: 46%;
      left: -6%;
      transform: translateY(-50%) rotate(1.5deg);
    }
    .page-index .work-card-lettered:nth-of-type(3):is(:hover, :focus-within, :active) .work-card-letter {
      transform: translate3d(.15rem, -50%, 0) rotate(.65deg) scale(1.01);
    }

    .page-index .work-card-lettered:nth-of-type(4) .work-card-letter {
      right: -14%;
    }
  }

  @media (max-width: 22.49rem) {
    .page-index .work-progress { display: none; }
  }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    .page-index .work-progress-track i { transition: none !important; }
  }
}

/* V13 — exact German phone measure for the finanzblick overview copy */
@layer pages {
  .finance-copy-phone-de { display: none; }

  @media (max-width: 30rem) {
    html[lang="de"] .finance-copy-standard { display: none; }
    html[lang="de"] .finance-copy-phone-de {
      display: block;
      -webkit-hyphens: none;
      hyphens: none;
      overflow-wrap: normal;
      word-break: normal;
    }
    html[lang="de"] .finance-copy-phone-de > span {
      display: block;
      white-space: nowrap;
    }
  }
}