/* BEGIN migrated inline CSS: base page sections */
/* Migrated from ru/branding/index.html. */
:root {
        --white: #ffffff;
        --bg: var(--white);
        --ink: #434343;
        --muted: #9d9d9d;
        --chip-text: var(--ink);
        --soft: #c9c9c9;
        --line: rgba(67, 67, 67, 0.16);
        --line-soft: rgba(67, 67, 67, 0.13);
        --line-medium: rgba(67, 67, 67, 0.28);
        --line-strong: var(--ink);
        --accent: #2060df;
        --surface: #f5f5f7;
        --surface-soft: #f9f9fa;
        --surface-hover: #e8e8ed;
        --surface-glass: rgba(245, 245, 247, 0.62);
        --white-glass: rgba(255, 255, 255, 0.46);
        --white-grid: rgba(255, 255, 255, 0.62);
        --white-line: rgba(255, 255, 255, 0.2);
        --header-bg: rgba(255, 255, 255, 0.92);
        --placeholder: var(--surface);
        --placeholder-deep: var(--surface-hover);
        --footer: var(--surface);
        --grid-gap: 20px;
        --pad-x: 20px;
        --page-x: var(--pad-x);
        --pad-y: 12px;

        /* Typography system: semantic roles for all non-display text. */
        --font-text: "Instrument Sans", "Instrument Sans Placeholder", sans-serif;
        --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
        --weight-hairline: 100;
        --weight-light: 300;
        --weight-regular: 400;
        --weight-medium: 500;
        --text-label: 11px;
        --text-badge: 12px;
        --text-ui: 16px;
        --text-body-copy: 16px;
        --text-meta: 16px;
        --text-action: 20px;
        --text-case-title: clamp(32px, 3.2vw, 62px);
        --text-case-index: clamp(64px, 7vw, 120px);
        --text-contact: clamp(29px, 4.32vw, 67px);
        --text-footer-copy: 17px;
        --leading-single: 1;
        --leading-compact: 1.2;
        --leading-ui: 1.4;
        --leading-body-copy: 1.5;
        --leading-case-title: 1.04;
        --leading-case-index: 0.82;
        --tracking-default: 0;
        --rhythm-body-row: 24px;
        --rhythm-text-group: 8px;
        --text-strip-title: var(--text-case-title);
        --space-case-title-tags: clamp(16px, 1.5vw, 22px);
        --space-case-tags-copy: clamp(34px, 3vw, 44px);
        --space-case-action: clamp(42px, 3.6vw, 56px);
        --space-preview-block: var(--space-preview);

        --sans: var(--font-text);
        --serif: "Instrument Sans", "Instrument Sans Placeholder", sans-serif;
        --instrument: "Instrument Sans", "Instrument Sans Placeholder", sans-serif;
        --mono: "Instrument Sans", "Instrument Sans Placeholder", sans-serif;
        --type-nav: 16px;
        --type-body: 32px;
        --type-body-mobile: 26px;
        --type-section: 32px;
        --type-footer: 17px;
        --type-mark: 180px;
      }

      :where(body.home-page.page-branding-home) * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body:where(.home-page.page-branding-home) {
        margin: 0;
        min-width: 320px;
        background: var(--bg);
        color: var(--ink);
        font-family: var(--sans);
        font-size: 12px;
        line-height: 1.2em;
        overflow-x: hidden;
      }

      :where(body.home-page.page-branding-home) a {
        color: inherit;
        text-decoration: none;
      }

      :where(body.home-page.page-branding-home) a:hover {
        color: var(--ink);
      }

      :where(body.home-page.page-branding-home) .cursor-dot {
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--accent);
        pointer-events: none;
        transform: translate3d(-50%, -50%, 0);
        mix-blend-mode: multiply;
        opacity: 0.94;
        transition: width 160ms ease, height 160ms ease, opacity 160ms ease;
      }

      :where(body.home-page.page-branding-home) .cursor-dot.is-hovering {
        width: 44px;
        height: 44px;
        opacity: 0.72;
      }

      :where(body.home-page.page-branding-home) .site-header {
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: start;
        padding: var(--pad-y) var(--pad-x);
        mix-blend-mode: difference;
        color: var(--white);
      }

      :where(body.home-page.page-branding-home) .time {
        justify-self: center;
        font-weight: 500;
        font-size: var(--type-nav);
        letter-spacing: 0;
      }

      :where(body.home-page.page-branding-home) .nav {
        justify-self: end;
        display: flex;
        gap: 60px;
        font-weight: 500;
        font-size: var(--type-nav);
        letter-spacing: -0.03em;
      }

      :where(body.home-page.page-branding-home) .hero {
        min-height: 100svh;
        position: relative;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto 1fr auto;
        gap: var(--grid-gap);
        padding: var(--pad-y) var(--pad-x);
        overflow: hidden;
      }

      :where(body.home-page.page-branding-home) .portrait-card {
        grid-column: 1 / span 2;
        width: 200px;
        aspect-ratio: 1 / 1;
        background: var(--placeholder);
        position: relative;
        overflow: hidden;
      }

      :where(body.home-page.page-branding-home) .portrait-card::before {
        display: none;
      }

      :where(body.home-page.page-branding-home) .portrait-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
      }

      :where(body.home-page.page-branding-home) .portrait-card span {
        display: none;
      }

      :where(body.home-page.page-branding-home) .hero-copy {
        grid-column: 1 / span 5;
        grid-row: 2;
        align-self: end;
        max-width: 600px;
        margin-bottom: 64px;
        font-size: 16px;
        line-height: 140%;
        font-weight: 400;
        letter-spacing: 0;
        text-align: center;
      }

      :where(body.home-page.page-branding-home) .role {
        position: absolute;
        left: var(--pad-x);
        right: auto;
        top: 39vh;
        max-width: 420px;
        font-family: var(--mono);
        font-size: 16px;
        line-height: 1.2em;
        font-weight: 500;
        letter-spacing: -0.03em;
        text-transform: uppercase;
      }

      :where(body.home-page.page-branding-home) .hero-mark,
      :where(body.home-page.page-branding-home) .contact-mark,
      :where(body.home-page.page-branding-home) .footer-mark {
        grid-column: 1 / -1;
        align-self: end;
        display: flex;
        align-items: baseline;
        width: 100%;
        white-space: nowrap;
        font-size: var(--type-mark);
        line-height: 0.74;
        letter-spacing: 0;
      }

      :where(body.home-page.page-branding-home) .mark-serif {
        font-family: var(--serif);
        font-weight: 500;
      }

      :where(body.home-page.page-branding-home) .mark-sans {
        font-family: var(--sans);
        font-weight: 800;
      }

      :where(body.home-page.page-branding-home) .mark-pixel {
        font-family: var(--mono);
        font-weight: 800;
        transform: scaleY(1.12);
        display: inline-block;
      }

      :where(body.home-page.page-branding-home) .accent-dot {
        position: absolute;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--accent);
      }

      :where(body.home-page.page-branding-home) .hero .accent-dot {
        right: 16.8vw;
        bottom: 23svh;
      }

      :where(body.home-page.page-branding-home) .section {
        min-height: 100svh;
        padding: 100px var(--pad-x);
        position: relative;
      }

      :where(body.home-page.page-branding-home) .info {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: var(--grid-gap);
      }

      :where(body.home-page.page-branding-home) .mini-work {
        grid-column: 10 / span 3;
        justify-self: end;
        width: 372px;
        aspect-ratio: 1.62;
        background: var(--placeholder);
        overflow: hidden;
        position: relative;
      }

      :where(body.home-page.page-branding-home) .mini-work::before,
      :where(body.home-page.page-branding-home) .mini-work::after {
        display: none;
      }

      :where(body.home-page.page-branding-home) .info-copy {
        grid-column: 7 / span 5;
        margin-top: 250px;
        max-width: 730px;
      }

      :where(body.home-page.page-branding-home) .info-copy p {
        margin: 0 0 34px;
        font-size: var(--type-body);
        line-height: 100%;
        font-weight: 400;
        letter-spacing: 0.4px;
      }

      :where(body.home-page.page-branding-home) .disciplines {
        grid-column: 7 / -1;
        margin-top: 64px;
        border-top: 0;
      }

      :where(body.home-page.page-branding-home) .discipline {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 28px;
        padding: 22px 0;
        font-family: var(--serif);
        font-size: var(--type-section);
        line-height: 100%;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: uppercase;
      }

      :where(body.home-page.page-branding-home) .discipline i {
        display: block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--ink);
      }

      :where(body.home-page.page-branding-home) .info .accent-dot {
        left: 43.8vw;
        top: 71%;
      }

      :where(body.home-page.page-branding-home) .work {
        padding-top: 160px;
      }

      :where(body.home-page.page-branding-home) .section-kicker {
        position: absolute;
        top: var(--pad-y);
        left: 50%;
        transform: translateX(-50%);
        font-family: var(--serif);
        font-size: var(--type-section);
        line-height: 100%;
        font-weight: 400;
        text-transform: uppercase;
      }

      :where(body.home-page.page-branding-home) .work-title {
        text-align: center;
        margin: 145px auto 150px;
        font-size: 150px;
        line-height: 0.84;
        text-transform: uppercase;
      }

      :where(body.home-page.page-branding-home) .work-title span:nth-child(odd) {
        font-family: var(--serif);
        font-weight: 500;
      }

      :where(body.home-page.page-branding-home) .work-title span:nth-child(even) {
        font-family: var(--sans);
        font-weight: 800;
      }

      :where(body.home-page.page-branding-home) .work-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: var(--grid-gap);
        align-items: start;
      }

      :where(body.home-page.page-branding-home) .work-card {
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 13px;
        --motion-x: 0px;
        --motion-y: 0px;
        --depth: 0.1;
        --cursor-depth: 1;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(1) {
        grid-column: 1 / span 4;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(2) {
        grid-column: 5 / span 4;
        margin-top: 32px;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(3) {
        grid-column: 9 / span 4;
        margin-top: -24px;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(4) {
        grid-column: 1 / span 4;
        margin-top: 80px;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(5) {
        grid-column: 5 / span 4;
        margin-top: 38px;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(6) {
        grid-column: 9 / span 4;
        margin-top: 160px;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(7) {
        grid-column: 2 / span 3;
        margin-top: 40px;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(8) {
        grid-column: 5 / span 4;
        margin-top: 118px;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(9) {
        grid-column: 9 / span 3;
        margin-top: 22px;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(10) {
        grid-column: 1 / span 4;
        margin-top: 110px;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(11) {
        grid-column: 7 / span 5;
        margin-top: 50px;
      }

      :where(body.home-page.page-branding-home) .work-visual {
        position: relative;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background: var(--placeholder);
        transform-origin: center center;
        transform: translate3d(var(--motion-x), var(--motion-y), 0) rotate(var(--tilt, 0deg));
        transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), filter 700ms cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform;
      }

      :where(body.home-page.page-branding-home) .work-card:hover .work-visual {
        transform: translate3d(var(--motion-x), calc(var(--motion-y) - 10px), 0) rotate(var(--tilt, 0deg)) scale(1.025);
      }

      :where(body.home-page.page-branding-home) .work-visual::before,
      :where(body.home-page.page-branding-home) .work-visual::after {
        display: none;
      }

      :where(body.home-page.page-branding-home) .case-blue {
        background: var(--placeholder);
      }

      :where(body.home-page.page-branding-home) .case-black {
        background: var(--placeholder-deep);
      }

      :where(body.home-page.page-branding-home) .case-black::before {
        border-color: var(--white-line);
      }

      :where(body.home-page.page-branding-home) .case-green {
        background: var(--placeholder);
      }

      :where(body.home-page.page-branding-home) .case-pink {
        background: var(--placeholder-deep);
      }

      :where(body.home-page.page-branding-home) .case-lavender {
        background: var(--placeholder);
      }

      :where(body.home-page.page-branding-home) .case-stone {
        background: var(--placeholder-deep);
      }

      :where(body.home-page.page-branding-home) .case-cobalt {
        background: var(--placeholder);
      }

      :where(body.home-page.page-branding-home) .case-cobalt::after {
        background: var(--placeholder);
      }

      :where(body.home-page.page-branding-home) .case-red {
        background: var(--placeholder-deep);
      }

      :where(body.home-page.page-branding-home) .case-gray {
        background: var(--placeholder);
      }

      :where(body.home-page.page-branding-home) .case-cream {
        background: var(--placeholder-deep);
      }

      :where(body.home-page.page-branding-home) .case-mint {
        background: var(--placeholder);
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(1) {
        --depth: -0.1;
        --cursor-depth: 0.8;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(1) .work-visual {
        aspect-ratio: 1.28;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(2) {
        --depth: 0.16;
        --cursor-depth: -0.7;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(2) .work-visual {
        aspect-ratio: 1.02;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(3) {
        --depth: -0.07;
        --cursor-depth: 0.55;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(3) .work-visual {
        aspect-ratio: 1.72;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(4) {
        --depth: 0.19;
        --cursor-depth: -1;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(4) .work-visual {
        aspect-ratio: 0.98;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(5) {
        --depth: -0.12;
        --cursor-depth: 0.45;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(5) .work-visual {
        aspect-ratio: 1.14;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(6) {
        --depth: 0.12;
        --cursor-depth: -0.6;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(6) .work-visual {
        aspect-ratio: 0.82;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(7) {
        --depth: -0.18;
        --cursor-depth: 0.9;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(7) .work-visual {
        aspect-ratio: 1;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(8) {
        --depth: 0.09;
        --cursor-depth: -0.5;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(8) .work-visual {
        aspect-ratio: 1.56;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(9) {
        --depth: -0.08;
        --cursor-depth: 0.7;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(9) .work-visual {
        aspect-ratio: 0.88;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(10) {
        --depth: 0.14;
        --cursor-depth: -0.4;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(10) .work-visual {
        aspect-ratio: 1.38;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(11) {
        --depth: -0.1;
        --cursor-depth: 0.65;
      }

      :where(body.home-page.page-branding-home) .work-card:nth-child(11) .work-visual {
        aspect-ratio: 1.92;
      }

      :where(body.home-page.page-branding-home) .work-meta {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px;
        align-items: start;
        font-size: 16px;
        line-height: 1.2em;
        letter-spacing: 0;
      }

      :where(body.home-page.page-branding-home) .work-meta h3 {
        margin: 0;
        font-size: inherit;
        font-weight: 500;
        letter-spacing: -0.03em;
        text-transform: uppercase;
      }

      :where(body.home-page.page-branding-home) .work-meta p {
        margin: 4px 0 0;
        color: var(--muted);
      }

      :where(body.home-page.page-branding-home) .work-meta .year {
        font-family: var(--mono);
        color: var(--muted);
      }

      :where(body.home-page.page-branding-home) .contact {
        min-height: 100svh;
        padding: 70px var(--pad-x) var(--pad-y);
        background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 35%, var(--footer) 100%);
        display: grid;
        grid-template-rows: auto 1fr auto;
        position: relative;
        overflow: hidden;
      }

      :where(body.home-page.page-branding-home) .contact-mark {
        justify-content: center;
        font-size: var(--type-mark);
        line-height: 0.78;
      }

      :where(body.home-page.page-branding-home) .contact-links {
        align-self: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
        font-size: 32px;
        font-weight: 500;
        letter-spacing: -0.03em;
        text-transform: uppercase;
      }

      :where(body.home-page.page-branding-home) .contact .accent-dot {
        right: 32%;
        bottom: 28%;
      }

      :where(body.home-page.page-branding-home) .footer {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: end;
        gap: 20px;
        font-size: var(--type-footer);
        font-weight: 400;
        letter-spacing: 0;
        text-transform: uppercase;
      }

      :where(body.home-page.page-branding-home) .footer small {
        color: inherit;
        font-size: inherit;
      }

      :where(body.home-page.page-branding-home) .footer .based {
        justify-self: center;
        font-family: var(--mono);
        font-weight: 400;
        text-transform: none;
      }

      :where(body.home-page.page-branding-home) .footer .availability {
        justify-self: end;
        text-align: right;
      }

      @media (min-width: 1500px) {:root {
          --type-mark: 250px;
        }

        :where(body.home-page.page-branding-home) .work-title {
          font-size: 190px;
        }}

      @media (max-width: 1020px) {:root {
          --type-body: 26px;
          --type-section: 26px;
          --type-mark: 120px;
        }

        :where(body.home-page.page-branding-home) .site-header {
          grid-template-columns: 1fr auto;
        }

        :where(body.home-page.page-branding-home) .time {
          display: none;
        }

        :where(body.home-page.page-branding-home) .portrait-card {
          grid-column: 1 / span 4;
        }

        :where(body.home-page.page-branding-home) .hero-copy {
          grid-column: 1 / span 8;
          text-align: left;
        }

        :where(body.home-page.page-branding-home) .role {
          position: static;
          grid-column: 8 / -1;
          grid-row: 1;
          align-self: start;
        }

        :where(body.home-page.page-branding-home) .mini-work {
          grid-column: 8 / -1;
          width: 260px;
        }

        :where(body.home-page.page-branding-home) .info-copy,
        :where(body.home-page.page-branding-home) .disciplines {
          grid-column: 4 / -1;
        }

        :where(body.home-page.page-branding-home) .work-card:nth-child(n) {
          grid-column: span 6;
          margin-top: 0;
        }

        :where(body.home-page.page-branding-home) .nav {
          gap: 20px;
        }

        :where(body.home-page.page-branding-home) .work-title {
          font-size: 100px;
        }}

      @media (max-width: 700px) {:root {
          --type-body: 26px;
          --type-section: 26px;
          --type-mark: 54px;
        }
        :where(body.home-page.page-branding-home) .site-header {
          position: absolute;
          mix-blend-mode: normal;
          color: var(--ink);
        }

        :where(body.home-page.page-branding-home) .nav {
          width: 100%;
          justify-content: space-between;
          gap: 10px;
        }

        :where(body.home-page.page-branding-home) .hero {
          min-height: 92svh;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-top: 76px;
        }

        :where(body.home-page.page-branding-home) .portrait-card {
          width: 160px;
          max-width: 160px;
        }

        :where(body.home-page.page-branding-home) .role {
          max-width: 250px;
          margin-left: auto;
          margin-top: -56px;
          text-align: right;
        }

        :where(body.home-page.page-branding-home) .hero-copy {
          max-width: 92%;
          margin: 80px 0 0;
          font-size: 16px;
        }

        :where(body.home-page.page-branding-home) .hero-mark,
        :where(body.home-page.page-branding-home) .footer-mark {
          overflow: visible;
        }

        :where(body.home-page.page-branding-home) .hero .accent-dot {
          right: 12vw;
          bottom: 30svh;
        }

        :where(body.home-page.page-branding-home) .section {
          min-height: auto;
          padding-top: 92px;
        }

        :where(body.home-page.page-branding-home) .info {
          display: block;
        }

        :where(body.home-page.page-branding-home) .mini-work {
          width: 260px;
          margin-left: auto;
        }

        :where(body.home-page.page-branding-home) .info-copy {
          margin-top: 95px;
        }

        :where(body.home-page.page-branding-home) .info-copy p {
          font-size: var(--type-body);
        }

        :where(body.home-page.page-branding-home) .discipline {
          font-size: var(--type-section);
        }

        :where(body.home-page.page-branding-home) .section-kicker {
          left: var(--pad-x);
          transform: none;
        }

        :where(body.home-page.page-branding-home) .work-title {
          margin-top: 92px;
          text-align: left;
          font-size: 58px;
        }

        :where(body.home-page.page-branding-home) .work-grid {
          display: block;
        }

        :where(body.home-page.page-branding-home) .work-card {
          min-height: auto;
          margin-bottom: 42px;
        }

        :where(body.home-page.page-branding-home) .work-visual {
          min-height: 0;
        }

        :where(body.home-page.page-branding-home) .contact-mark {
          justify-content: flex-start;
          margin-top: 14px;
        }

        :where(body.home-page.page-branding-home) .contact-links {
          align-items: flex-start;
          font-size: 32px;
        }

        :where(body.home-page.page-branding-home) .footer {
          grid-template-columns: 1fr;
          gap: 10px;
        }

        :where(body.home-page.page-branding-home) .footer .based,
        :where(body.home-page.page-branding-home) .footer .availability {
          justify-self: start;
          text-align: left;
        }}

@media (prefers-reduced-motion: reduce) {html {
          scroll-behavior: auto;
        }

        :where(body.home-page.page-branding-home) *,
        :where(body.home-page.page-branding-home) *::before,
        :where(body.home-page.page-branding-home) *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }}


      /* My work block variant based on the ls-portfolio.figma.site reference. */
      :where(body.home-page.page-branding-home) .work-alt {
        min-height: 100svh;
        padding: 84px 0 108px;
        overflow: hidden;
      }

      :where(body.home-page.page-branding-home) .mywork-heading {
        margin: 0;
        padding: 0 var(--pad-x);
        font-family: var(--sans);
        font-size: 32px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: -0.04em;
      }

      :where(body.home-page.page-branding-home) .mywork-showcase {
        margin-top: 29svh;
      }

      :where(body.home-page.page-branding-home) .mywork-track {
        display: flex;
        gap: 28px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 var(--pad-x);
        cursor: grab;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }

      :where(body.home-page.page-branding-home) .mywork-track::-webkit-scrollbar {
        display: none;
      }

      :where(body.home-page.page-branding-home) .mywork-track.is-dragging {
        cursor: grabbing;
      }

      :where(body.home-page.page-branding-home) .mywork-card {
        position: relative;
        flex: 0 0 clamp(330px, 33vw, 680px);
        aspect-ratio: 1 / 1;
        min-height: 360px;
        overflow: hidden;
        background: var(--surface);
        transform: translate3d(0, 0, 0);
        transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), background 420ms cubic-bezier(0.16, 1, 0.3, 1);
        user-select: none;
      }

      :where(body.home-page.page-branding-home) .mywork-card:nth-child(8n + 2) {
        flex-basis: clamp(440px, 48vw, 900px);
      }

      :where(body.home-page.page-branding-home) .mywork-card:nth-child(8n + 3) {
        flex-basis: clamp(440px, 46vw, 860px);
      }

      :where(body.home-page.page-branding-home) .mywork-card:hover {
        transform: translate3d(0, -10px, 0);
        background: var(--surface-hover);
      }

      :where(body.home-page.page-branding-home) .mywork-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        pointer-events: none;
      }

      :where(body.home-page.page-branding-home) .mywork-card--hover-preview img {
        position: absolute;
        inset: 0;
        transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      :where(body.home-page.page-branding-home) .mywork-card--hover-preview .mywork-img-color {
        opacity: 0;
      }

      :where(body.home-page.page-branding-home) .mywork-card--hover-preview:hover .mywork-img-color {
        opacity: 1;
      }

      :where(body.home-page.page-branding-home) .mywork-card--hover-preview:hover .mywork-img-bw {
        opacity: 0;
      }

      @media (max-width: 1020px), (hover: none) {:where(body.home-page.page-branding-home) .mywork-card--hover-preview .mywork-img-color {
          opacity: 1;
        }

        :where(body.home-page.page-branding-home) .mywork-card--hover-preview .mywork-img-bw {
          opacity: 0;
        }}

      :where(body.home-page.page-branding-home) .mywork-placeholder {
        position: absolute;
        inset: 0;
        background:
          linear-gradient(var(--white-grid) 1px, transparent 1px) 0 0 / 28% 28%,
          linear-gradient(90deg, var(--white-grid) 1px, transparent 1px) 0 0 / 28% 28%,
          var(--surface);
      }

      :where(body.home-page.page-branding-home) .mywork-placeholder::before {
        content: "";
        position: absolute;
        inset: 14%;
        border: 2px solid var(--line-soft);
      }

      :where(body.home-page.page-branding-home) .mywork-placeholder::after {
        content: attr(data-label);
        position: absolute;
        left: 8%;
        bottom: 8%;
        max-width: 74%;
        color: var(--line-medium);
        font-family: var(--sans);
        font-size: clamp(52px, 8vw, 132px);
        font-weight: 500;
        line-height: 0.86;
        letter-spacing: -0.05em;
      }

      :where(body.home-page.page-branding-home) .mywork-card:nth-child(8n + 1) .mywork-placeholder::after,
      :where(body.home-page.page-branding-home) .mywork-card:nth-child(8n + 4) .mywork-placeholder::after {
        left: -12%;
      }

      :where(body.home-page.page-branding-home) .mywork-card:nth-child(8n + 2) .mywork-placeholder::after {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
      }

      :where(body.home-page.page-branding-home) .mywork-caption {
        display: grid;
        grid-template-columns: 1fr minmax(340px, 25vw);
        gap: 40px;
        align-items: start;
        padding: 28px var(--pad-x) 0;
      }

      :where(body.home-page.page-branding-home) .mywork-project {
        display: grid;
        grid-template-columns: minmax(0, 360px);
        gap: 12px;
        font-size: 20px;
        line-height: 140%;
        letter-spacing: 0;
      }

      :where(body.home-page.page-branding-home) .mywork-project-label,
      :where(body.home-page.page-branding-home) .mywork-project-subtitle,
      :where(body.home-page.page-branding-home) .mywork-link {
        color: var(--muted);
      }

      :where(body.home-page.page-branding-home) .mywork-project h3,
      :where(body.home-page.page-branding-home) .mywork-project p,
      :where(body.home-page.page-branding-home) .mywork-description {
        margin: 0;
      }

      :where(body.home-page.page-branding-home) .mywork-project h3 {
        font-size: inherit;
        font-weight: 500;
      }

      :where(body.home-page.page-branding-home) .mywork-project-subtitle {
        margin-top: 4px;
        font-weight: 500;
      }

      :where(body.home-page.page-branding-home) .mywork-description {
        justify-self: end;
        max-width: 440px;
        font-size: 22px;
        font-weight: 300;
        line-height: 140%;
        letter-spacing: 0;
      }

      :where(body.home-page.page-branding-home) .mywork-link {
        display: inline-block;
        margin-top: 36px;
        font-size: 20px;
        line-height: 140%;
        letter-spacing: 0;
      }

      :where(body.home-page.page-branding-home) .mywork-link:hover {
        color: var(--ink);
      }

      @media (max-width: 1020px) {:where(body.home-page.page-branding-home) .work-alt {
          padding-top: 76px;
        }

        :where(body.home-page.page-branding-home) .mywork-showcase {
          margin-top: 22svh;
        }

        :where(body.home-page.page-branding-home) .mywork-card {
          flex-basis: clamp(300px, 62vw, 620px);
          min-height: 320px;
        }

        :where(body.home-page.page-branding-home) .mywork-card:nth-child(8n + 2),
        :where(body.home-page.page-branding-home) .mywork-card:nth-child(8n + 3) {
          flex-basis: clamp(340px, 72vw, 720px);
        }

        :where(body.home-page.page-branding-home) .mywork-caption {
          grid-template-columns: 1fr;
        }

        :where(body.home-page.page-branding-home) .mywork-description {
          justify-self: start;
        }}

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .work-alt {
          padding-top: 92px;
          padding-bottom: 72px;
        }

        :where(body.home-page.page-branding-home) .mywork-heading {
          font-size: 28px;
        }

        :where(body.home-page.page-branding-home) .mywork-showcase {
          margin-top: 17svh;
        }

        :where(body.home-page.page-branding-home) .mywork-track {
          gap: 14px;
        }

        :where(body.home-page.page-branding-home) .mywork-card,
        :where(body.home-page.page-branding-home) .mywork-card:nth-child(8n + 2),
        :where(body.home-page.page-branding-home) .mywork-card:nth-child(8n + 3) {
          flex-basis: 82vw;
          min-height: 0;
        }

        :where(body.home-page.page-branding-home) .mywork-placeholder::after {
          font-size: 64px;
        }

        :where(body.home-page.page-branding-home) .mywork-caption {
          gap: 22px;
          padding-top: 18px;
        }

        :where(body.home-page.page-branding-home) .mywork-project {
          grid-template-columns: minmax(0, 1fr);
          font-size: 16px;
        }

        :where(body.home-page.page-branding-home) .mywork-description {
          max-width: none;
          font-size: 18px;
        }

        :where(body.home-page.page-branding-home) .mywork-link {
          margin-top: 24px;
          font-size: 18px;
        }}



      /* Iteration tweak: clean square grey frames and page-safe wheel behavior. */
      :where(body.home-page.page-branding-home) .mywork-card,
      :where(body.home-page.page-branding-home) .mywork-card:nth-child(8n + 2),
      :where(body.home-page.page-branding-home) .mywork-card:nth-child(8n + 3) {
        flex-basis: clamp(330px, 33vw, 680px);
        aspect-ratio: 1 / 1;
      }

      :where(body.home-page.page-branding-home) .mywork-placeholder {
        background: var(--surface);
      }

      :where(body.home-page.page-branding-home) .mywork-placeholder::before,
      :where(body.home-page.page-branding-home) .mywork-placeholder::after {
        display: none;
      }

      @media (max-width: 1020px) {:where(body.home-page.page-branding-home) .mywork-card,
        :where(body.home-page.page-branding-home) .mywork-card:nth-child(8n + 2),
        :where(body.home-page.page-branding-home) .mywork-card:nth-child(8n + 3) {
          flex-basis: clamp(300px, 62vw, 620px);
          aspect-ratio: 1 / 1;
        }}

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .mywork-card,
        :where(body.home-page.page-branding-home) .mywork-card:nth-child(8n + 2),
        :where(body.home-page.page-branding-home) .mywork-card:nth-child(8n + 3) {
          flex-basis: 82vw;
          aspect-ratio: 1 / 1;
        }}



      /* RU layout iteration: unified section titles, raised info copy, compact work viewport. */
      :where(body.home-page.page-branding-home) .info {
        padding: 84px var(--pad-x) 100px;
        align-content: start;
      }

      :where(body.home-page.page-branding-home) .info .section-kicker,
      :where(body.home-page.page-branding-home) .mywork-heading {
        position: static;
        transform: none;
        margin: 0;
        padding: 0;
        font-family: var(--sans);
        font-size: 32px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: -0.04em;
        text-transform: none;
      }

      :where(body.home-page.page-branding-home) .info-copy {
        grid-column: 7 / span 5;
        margin-top: clamp(88px, 14svh, 136px);
      }

      :where(body.home-page.page-branding-home) .mini-work {
        display: none;
      }

      :where(body.home-page.page-branding-home) .work-alt {
        min-height: 100svh;
        padding: 84px 0 72px;
      }

      :where(body.home-page.page-branding-home) .work-alt .mywork-heading {
        padding-left: var(--pad-x);
      }

      :where(body.home-page.page-branding-home) .mywork-showcase {
        margin-top: clamp(72px, 12svh, 112px);
      }

      :where(body.home-page.page-branding-home) .mywork-card,
      :where(body.home-page.page-branding-home) .mywork-card:nth-child(8n + 2),
      :where(body.home-page.page-branding-home) .mywork-card:nth-child(8n + 3) {
        flex-basis: clamp(280px, 24vw, 380px);
        min-height: 0;
        aspect-ratio: 1 / 1;
      }

      :where(body.home-page.page-branding-home) .mywork-caption {
        padding-top: 22px;
        grid-template-columns: minmax(260px, 1fr) minmax(360px, 33vw);
      }

      :where(body.home-page.page-branding-home) .mywork-link {
        margin-top: 24px;
      }

      @media (max-width: 1020px) {:where(body.home-page.page-branding-home) .info {
          padding-top: 76px;
        }

        :where(body.home-page.page-branding-home) .info-copy {
          grid-column: 4 / -1;
          margin-top: 88px;
        }

        :where(body.home-page.page-branding-home) .mywork-showcase {
          margin-top: 88px;
        }

        :where(body.home-page.page-branding-home) .mywork-card,
        :where(body.home-page.page-branding-home) .mywork-card:nth-child(8n + 2),
        :where(body.home-page.page-branding-home) .mywork-card:nth-child(8n + 3) {
          flex-basis: clamp(260px, 44vw, 360px);
        }}

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .info {
          padding-top: 92px;
        }

        :where(body.home-page.page-branding-home) .info .section-kicker,
        :where(body.home-page.page-branding-home) .mywork-heading {
          font-size: 28px;
        }

        :where(body.home-page.page-branding-home) .info-copy {
          grid-column: 1 / -1;
          margin-top: 72px;
        }

        :where(body.home-page.page-branding-home) .work-alt {
          padding-top: 92px;
        }

        :where(body.home-page.page-branding-home) .mywork-showcase {
          margin-top: 72px;
        }

        :where(body.home-page.page-branding-home) .mywork-card,
        :where(body.home-page.page-branding-home) .mywork-card:nth-child(8n + 2),
        :where(body.home-page.page-branding-home) .mywork-card:nth-child(8n + 3) {
          flex-basis: 68vw;
        }

        :where(body.home-page.page-branding-home) .mywork-caption {
          grid-template-columns: 1fr;
        }}



      /* RU layout fix: prevent information heading from stretching as a grid item. */
      :where(body.home-page.page-branding-home) .info .section-kicker {
        grid-column: 1 / -1;
        align-self: start;
        justify-self: start;
        height: auto;
      }



      /* RU brand copy iteration: brand-focused positioning and discipline labels. */
      :where(body.home-page.page-branding-home) .role-brand {
        max-width: 560px;
        text-transform: none;
      }

      :where(body.home-page.page-branding-home) .discipline-tags {
        display: block;
        margin-top: 8px;
        color: var(--muted);
        font-family: var(--sans);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.1;
        letter-spacing: -0.02em;
        text-transform: none;
      }

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .discipline-tags {
          margin-top: 6px;
          font-size: 12px;
        }}



      /* Large display words: keep DESIGN and CONTACTS in one typographic system. */
      :where(body.home-page.page-branding-home) .hero-design-word,
      :where(body.home-page.page-branding-home) .contact-light-word {
        font-family: var(--instrument);
        font-size: clamp(120px, 16vw, 260px);
        font-weight: 300;
        line-height: 0.78;
        letter-spacing: 0;
        text-transform: uppercase;
      }

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .hero-design-word,
        :where(body.home-page.page-branding-home) .contact-light-word {
          font-size: clamp(54px, 18vw, 96px);
        }}



      /* Instrument Sans typography system for the branding page. */
      body:where(.home-page.page-branding-home) {
        font-family: var(--instrument);
        font-weight: 300;
      }

      :where(body.home-page.page-branding-home) .nav,
      :where(body.home-page.page-branding-home) .time,
      :where(body.home-page.page-branding-home) .role,
      :where(body.home-page.page-branding-home) .hero-copy,
      :where(body.home-page.page-branding-home) .info-copy p,
      :where(body.home-page.page-branding-home) .discipline,
      :where(body.home-page.page-branding-home) .section-kicker,
      :where(body.home-page.page-branding-home) .mywork-heading,
      :where(body.home-page.page-branding-home) .mywork-project,
      :where(body.home-page.page-branding-home) .mywork-description,
      :where(body.home-page.page-branding-home) .mywork-link,
      :where(body.home-page.page-branding-home) .contact-links,
      :where(body.home-page.page-branding-home) .footer {
        font-family: var(--instrument);
      }

      :where(body.home-page.page-branding-home) .nav,
      :where(body.home-page.page-branding-home) .time,
      :where(body.home-page.page-branding-home) .role,
      :where(body.home-page.page-branding-home) .mywork-project h3,
      :where(body.home-page.page-branding-home) .contact-links a {
        font-weight: 500;
      }

      :where(body.home-page.page-branding-home) .hero-copy,
      :where(body.home-page.page-branding-home) .info-copy p,
      :where(body.home-page.page-branding-home) .mywork-description,
      :where(body.home-page.page-branding-home) .mywork-link,
      :where(body.home-page.page-branding-home) .mywork-project,
      :where(body.home-page.page-branding-home) .discipline,
      :where(body.home-page.page-branding-home) .section-kicker,
      :where(body.home-page.page-branding-home) .mywork-heading {
        font-weight: 300;
      }

      :where(body.home-page.page-branding-home) .hero-design-word,
      :where(body.home-page.page-branding-home) .contact-light-word {
        font-family: var(--instrument);
        font-weight: 300;
        letter-spacing: 0;
      }

      :where(body.home-page.page-branding-home) .discipline {
        text-transform: none;
        letter-spacing: -0.04em;
      }

      :where(body.home-page.page-branding-home) .discipline-tags {
        font-family: var(--instrument);
        font-weight: 300;
      }



      /* Restore lighter wordmark feel for large display words. */
      :where(body.home-page.page-branding-home) .hero-design-word,
      :where(body.home-page.page-branding-home) .contact-light-word {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 100;
        letter-spacing: 0;
      }



      /* Text rhythm: body copy at 140% line-height. */
      :where(body.home-page.page-branding-home) .role,
      :where(body.home-page.page-branding-home) .hero-copy,
      :where(body.home-page.page-branding-home) .info-copy p,
      :where(body.home-page.page-branding-home) .mywork-project,
      :where(body.home-page.page-branding-home) .mywork-description,
      :where(body.home-page.page-branding-home) .mywork-link,
      :where(body.home-page.page-branding-home) .discipline-tags,
      :where(body.home-page.page-branding-home) .contact-links,
      :where(body.home-page.page-branding-home) .footer {
        line-height: 140%;
      }



      /* Hero services moved from About into the first screen. */
      :where(body.home-page.page-branding-home) .hero-services {
        position: absolute;
        top: 30svh;
        right: var(--pad-x);
        width: min(380px, 31vw);
        display: grid;
        gap: 13px;
        font-family: var(--instrument);
        font-size: clamp(15px, 1.2vw, 22px);
        font-weight: 300;
        line-height: 140%;
        letter-spacing: -0.04em;
      }

      :where(body.home-page.page-branding-home) .hero-service {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 18px;
      }

      :where(body.home-page.page-branding-home) .hero-service i {
        width: 5px;
        height: 5px;
        margin-top: 0.62em;
        border-radius: 50%;
        background: var(--ink);
      }

      :where(body.home-page.page-branding-home) .hero-service small {
        display: block;
        margin-top: 4px;
        color: var(--muted);
        font-size: 0.48em;
        font-weight: 300;
        line-height: 140%;
        letter-spacing: -0.02em;
      }

      @media (max-width: 1020px) {:where(body.home-page.page-branding-home) .hero-copy {
          grid-column: 1 / span 5;
        }

        :where(body.home-page.page-branding-home) .hero-services {
          position: static;
          grid-column: 7 / -1;
          grid-row: 2;
          align-self: end;
          width: auto;
          margin-bottom: 64px;
          gap: 10px;
          font-size: 15px;
        }}

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .hero {
          justify-content: flex-start;
        }

        :where(body.home-page.page-branding-home) .role {
          margin-left: 0;
          margin-top: 24px;
          text-align: left;
        }

        :where(body.home-page.page-branding-home) .hero-copy {
          max-width: 100%;
          margin-top: 56px;
        }

        :where(body.home-page.page-branding-home) .hero-services {
          position: static;
          width: 100%;
          margin: 26px 0 0;
          gap: 8px;
          font-size: 14px;
          letter-spacing: -0.03em;
        }

        :where(body.home-page.page-branding-home) .hero-service {
          gap: 14px;
        }

        :where(body.home-page.page-branding-home) .hero-service i {
          width: 4px;
          height: 4px;
        }

        :where(body.home-page.page-branding-home) .hero-mark {
          margin-top: auto;
        }}



      /* Mobile cleanup iteration: no empty About, calmer tools line, modern CTA. */
      :where(body.home-page.page-branding-home) .mywork-link {
        display: inline-flex;
        align-items: baseline;
        gap: 8px;
        width: fit-content;
        min-height: 0;
        padding: 0 0 4px;
        border: 0;
        border-bottom: 1px solid var(--line-medium);
        border-radius: 0;
        color: var(--ink);
        font-weight: 300;
        transition: color 180ms ease, border-color 180ms ease;
      }

      :where(body.home-page.page-branding-home) .mywork-link-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--ink);
        color: var(--bg);
        font-size: 12px;
        line-height: 1;
        transform: translateY(-1px);
      }

      :where(body.home-page.page-branding-home) .mywork-link:hover {
        border-color: var(--ink);
        color: var(--ink);
        transform: translateY(-1px);
      }

      :where(body.home-page.page-branding-home) .mywork-link:hover .mywork-link-icon {
        background: var(--accent);
      }

      :where(body.home-page.page-branding-home) .hero-service small {
        color: var(--muted);
        font-size: 0.56em;
        letter-spacing: -0.02em;
      }

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .site-header {
          padding-top: 14px;
        }

        :where(body.home-page.page-branding-home) .nav {
          justify-self: center;
          justify-content: center;
          width: auto;
          gap: clamp(11px, 4vw, 20px);
        }

        :where(body.home-page.page-branding-home) .hero {
          min-height: 90svh;
          padding-top: 54px;
        }

        :where(body.home-page.page-branding-home) .portrait-card {
          margin-top: 18px;
        }

        :where(body.home-page.page-branding-home) .role {
          margin-top: 22px;
        }

        :where(body.home-page.page-branding-home) .hero-copy {
          margin-top: 42px;
        }

        :where(body.home-page.page-branding-home) .hero-services {
          margin-top: 20px;
          gap: 7px;
        }

        :where(body.home-page.page-branding-home) .hero-service small {
          margin-top: 2px;
          font-size: 0.52em;
        }

        :where(body.home-page.page-branding-home) .work-alt {
          padding-top: 70px;
        }

        :where(body.home-page.page-branding-home) .mywork-showcase {
          margin-top: 46px;
        }

        :where(body.home-page.page-branding-home) .mywork-caption {
          gap: 16px;
          padding-top: 14px;
        }

        :where(body.home-page.page-branding-home) .mywork-description {
          max-width: 92%;
        }

        :where(body.home-page.page-branding-home) .mywork-link {
          margin-top: 18px;
          min-height: 36px;
          padding: 8px 13px 9px;
        }

        :where(body.home-page.page-branding-home) .contact {
          min-height: 100svh;
          padding-top: 56px;
        }

        :where(body.home-page.page-branding-home) .contact-links {
          align-self: center;
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 26px 28px;
          width: 100%;
          align-items: start;
          font-size: clamp(28px, 8vw, 48px);
        }

        :where(body.home-page.page-branding-home) .contact-links a {
          min-width: 0;
          overflow-wrap: anywhere;
        }}

      @media (max-width: 420px) {:where(body.home-page.page-branding-home) .nav {
          gap: 12px;
          font-size: 15px;
        }

        :where(body.home-page.page-branding-home) .portrait-card {
          margin-top: 12px;
        }

        :where(body.home-page.page-branding-home) .hero-copy {
          margin-top: 36px;
        }

        :where(body.home-page.page-branding-home) .hero-service small {
          display: inline;
          margin-left: 4px;
        }

        :where(body.home-page.page-branding-home) .contact-links {
          grid-template-columns: 1fr 1fr;
          font-size: clamp(24px, 7.5vw, 36px);
          gap: 22px 18px;
        }}




      /* Preview B: muted chips under selected service lines, no bullets. */
      :where(body.home-page.page-branding-home) .hero-services-preview-b {
        width: min(480px, 37vw);
        gap: 13px;
      }

      :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service {
        display: block;
      }

      :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service i {
        display: none;
      }

      :where(body.home-page.page-branding-home) .service-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 7px;
      }

      :where(body.home-page.page-branding-home) .service-chips span {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: 4px 10px 5px;
        border: 0;
        border-radius: 999px;
        color: var(--chip-text);
        background: var(--surface-glass);
        font-size: 11px;
        font-weight: 300;
        line-height: 1;
        letter-spacing: -0.01em;
      }

      @media (max-width: 1180px) {:where(body.home-page.page-branding-home) .hero {
          min-height: auto;
          grid-template-rows: auto auto auto auto auto;
          align-content: start;
          padding-top: clamp(44px, 5svh, 64px);
          padding-bottom: 24px;
          overflow: visible;
        }

        :where(body.home-page.page-branding-home) .portrait-card {
          grid-column: 1 / span 4;
          grid-row: 1;
          width: clamp(190px, 24vw, 250px);
        }

        :where(body.home-page.page-branding-home) .role-brand {
          position: static;
          grid-column: 1 / span 8;
          grid-row: 2;
          max-width: 620px;
          margin-top: clamp(18px, 2.4svh, 28px);
          text-align: left;
        }

        :where(body.home-page.page-branding-home) .hero-copy {
          grid-column: 1 / span 7;
          grid-row: 3;
          align-self: start;
          max-width: 620px;
          margin: clamp(30px, 4.6svh, 46px) 0 0;
        }

        :where(body.home-page.page-branding-home) .hero-services-preview-b {
          position: static;
          grid-column: 1 / span 7;
          grid-row: 4;
          align-self: start;
          display: grid;
          grid-template-columns: 1fr;
          width: min(620px, 100%);
          max-width: none;
          margin: clamp(28px, 4.8svh, 48px) 0 0;
          gap: 10px;
        }

        :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service,
        :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service-with-chips,
        :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service-wide {
          grid-column: auto;
        }

        :where(body.home-page.page-branding-home) .service-chips {
          max-width: 100%;
        }

        :where(body.home-page.page-branding-home) .hero .accent-dot {
          display: none;
        }

        :where(body.home-page.page-branding-home) .hero-mark {
          grid-column: 1 / -1;
          grid-row: 5;
          align-self: start;
          margin-top: clamp(32px, 5svh, 56px);
        }}

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .hero {
          padding-top: 52px;
        }

        :where(body.home-page.page-branding-home) .portrait-card {
          width: clamp(170px, 44vw, 220px);
        }

        :where(body.home-page.page-branding-home) .role-brand {
          max-width: 100%;
          margin-top: 18px;
        }

        :where(body.home-page.page-branding-home) .hero-copy {
          max-width: 100%;
          margin-top: 30px;
        }

        :where(body.home-page.page-branding-home) .hero-services-preview-b {
          grid-template-columns: 1fr;
          width: 100%;
          margin-top: 26px;
          row-gap: 10px;
        }

        :where(body.home-page.page-branding-home) .service-chips {
          gap: 5px;
          margin-top: 6px;
        }

        :where(body.home-page.page-branding-home) .service-chips span {
          min-height: 22px;
          padding: 4px 9px 5px;
          font-size: 10px;
        }

        :where(body.home-page.page-branding-home) .hero-mark {
          margin-top: 28px;
        }}

      @media (max-width: 420px) {:where(body.home-page.page-branding-home) .hero-services-preview-b {
          row-gap: 9px;
        }}




      /* Work caption typography cleanup: one calm system, no tight Cyrillic tracking. */
      :where(body.home-page.page-branding-home) .mywork-caption {
        gap: clamp(28px, 5vw, 92px);
        align-items: start;
      }

      :where(body.home-page.page-branding-home) .mywork-project {
        gap: 0;
        font-size: 20px;
        line-height: 140%;
        letter-spacing: 0;
      }

      :where(body.home-page.page-branding-home) .mywork-project h3 {
        font-size: inherit;
        font-weight: 400;
        line-height: 140%;
        letter-spacing: 0;
      }

      :where(body.home-page.page-branding-home) .mywork-project-subtitle {
        margin-top: 1px;
        color: var(--muted);
        font-size: inherit;
        font-weight: 300;
        line-height: 140%;
        letter-spacing: 0;
      }

      :where(body.home-page.page-branding-home) .mywork-description {
        max-width: 600px;
        font-family: var(--instrument);
        font-size: 16px;
        font-weight: 300;
        line-height: 140%;
        letter-spacing: 0;
      }

      :where(body.home-page.page-branding-home) .mywork-link {
        display: inline-flex;
        align-items: baseline;
        gap: 8px;
        min-height: 0;
        margin-top: 26px;
        padding: 0 0 4px;
        border: 0;
        border-bottom: 1px solid var(--line-medium);
        border-radius: 0;
        color: var(--ink);
        font-size: 20px;
        font-weight: 300;
        line-height: 140%;
        letter-spacing: 0;
        transition: color 180ms ease, border-color 180ms ease;
      }

      :where(body.home-page.page-branding-home) .mywork-link-icon {
        display: inline;
        width: auto;
        height: auto;
        border-radius: 0;
        background: transparent;
        color: currentColor;
        font-size: 0.9em;
        line-height: 1;
        transform: none;
      }

      :where(body.home-page.page-branding-home) .mywork-link:hover {
        border-color: var(--ink);
        color: var(--ink);
        transform: none;
      }

      :where(body.home-page.page-branding-home) .mywork-link:hover .mywork-link-icon {
        background: transparent;
      }

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .mywork-caption {
          gap: 18px;
        }

        :where(body.home-page.page-branding-home) .mywork-project {
          font-size: 18px;
        }

        :where(body.home-page.page-branding-home) .mywork-description {
          max-width: 100%;
          font-size: 16px;
        }

        :where(body.home-page.page-branding-home) .mywork-link {
          margin-top: 18px;
          padding: 0 0 4px;
          font-size: 18px;
        }}




      /* Work caption grid refinement: quieter labels, smaller CTA, balanced columns. */
      :where(body.home-page.page-branding-home) .mywork-caption {
        grid-template-columns: minmax(220px, 0.34fr) minmax(320px, 0.66fr);
        gap: clamp(32px, 6vw, 120px);
        padding-top: 18px;
        align-items: start;
      }

      :where(body.home-page.page-branding-home) .mywork-project {
        max-width: 320px;
        font-size: 16px;
        line-height: 140%;
      }

      :where(body.home-page.page-branding-home) .mywork-project h3 {
        font-size: 16px;
        font-weight: 500;
        line-height: 140%;
        letter-spacing: 0;
      }

      :where(body.home-page.page-branding-home) .mywork-project-subtitle {
        margin-top: 0;
        font-size: 16px;
        font-weight: 300;
        line-height: 140%;
      }

      :where(body.home-page.page-branding-home) .mywork-caption > div:last-child {
        justify-self: start;
        width: min(620px, 100%);
      }

      :where(body.home-page.page-branding-home) .mywork-description {
        max-width: 620px;
        font-size: 16px;
        line-height: 140%;
      }

      :where(body.home-page.page-branding-home) .mywork-link {
        margin-top: 18px;
        gap: 6px;
        padding-bottom: 3px;
        font-size: 16px;
        line-height: 140%;
      }

      :where(body.home-page.page-branding-home) .mywork-link-icon {
        font-size: 0.82em;
      }

      @media (max-width: 1020px) {:where(body.home-page.page-branding-home) .mywork-caption {
          grid-template-columns: minmax(180px, 0.36fr) minmax(260px, 0.64fr);
          gap: 32px;
        }}

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .mywork-caption {
          grid-template-columns: 1fr;
          gap: 14px;
          padding-top: 14px;
        }

        :where(body.home-page.page-branding-home) .mywork-project,
        :where(body.home-page.page-branding-home) .mywork-project h3,
        :where(body.home-page.page-branding-home) .mywork-project-subtitle,
        :where(body.home-page.page-branding-home) .mywork-description,
        :where(body.home-page.page-branding-home) .mywork-link {
          font-size: 16px;
        }

        :where(body.home-page.page-branding-home) .mywork-caption > div:last-child {
          width: 100%;
        }}








      /* Adaptive contacts: single muted column, no link wrapping. */
      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .contact-links {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          width: 100%;
          gap: clamp(12px, 2.6svh, 22px);
          color: var(--muted);
          font-size: clamp(26px, 8vw, 44px);
          font-weight: 300;
          line-height: 112%;
          letter-spacing: 0;
        }

        :where(body.home-page.page-branding-home) .contact-links a {
          white-space: nowrap;
          overflow-wrap: normal;
        }

        :where(body.home-page.page-branding-home) .contact-links a:hover {
          color: var(--ink);
        }}

      @media (max-width: 420px) {:where(body.home-page.page-branding-home) .contact-links {
          gap: clamp(10px, 2.4svh, 18px);
          font-size: clamp(24px, 7.2vw, 34px);
        }}


      /* Service list rhythm: tighter vertical stack after markup feedback. */
      :where(body.home-page.page-branding-home) .hero-services-preview-b {
        gap: 8px;
      }

      :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service {
        line-height: 128%;
      }

      :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service-with-chips {
        margin: 2px 0 6px;
      }

      :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service-with-chips + .hero-service {
        margin-top: 4px;
      }

      :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service-wide {
        margin-top: 8px;
      }

      :where(body.home-page.page-branding-home) .hero-services-preview-b .service-chips {
        margin-top: 5px;
        gap: 5px;
      }

      @media (max-width: 1180px) {:where(body.home-page.page-branding-home) .hero-services-preview-b {
          gap: 7px;
          margin-top: clamp(22px, 4svh, 38px);
        }

        :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service-wide {
          margin-top: 6px;
        }}

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .hero-services-preview-b {
          row-gap: 7px;
          margin-top: 22px;
        }

        :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service-with-chips {
          margin-bottom: 4px;
        }

        :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service-with-chips + .hero-service {
          margin-top: 2px;
        }

        :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service-wide {
          margin-top: 4px;
        }}


      /* Unified work caption: desktop follows the compact adaptive structure. */
      :where(body.home-page.page-branding-home) .mywork-caption {
        display: block;
        max-width: 720px;
        padding-top: 22px;
        padding-left: var(--pad-x);
        padding-right: var(--pad-x);
      }

      :where(body.home-page.page-branding-home) .mywork-project {
        max-width: 100%;
        font-size: 16px;
        line-height: 140%;
      }

      :where(body.home-page.page-branding-home) .mywork-project h3 {
        font-size: 16px;
        font-weight: 500;
        line-height: 140%;
        letter-spacing: 0;
      }

      :where(body.home-page.page-branding-home) .case-tags {
        margin-top: 8px;
      }

      :where(body.home-page.page-branding-home) .mywork-caption > div:last-child {
        width: min(620px, 100%);
        margin-top: 26px;
        margin-left: 0;
        text-align: left;
      }

      :where(body.home-page.page-branding-home) .mywork-description {
        max-width: 620px;
        margin-left: 0;
        justify-self: start;
        text-align: left;
        font-size: 16px;
        font-weight: 300;
        line-height: 140%;
        letter-spacing: 0;
      }

      :where(body.home-page.page-branding-home) .mywork-link {
        margin-top: 18px;
        gap: 6px;
        padding-bottom: 3px;
        font-size: 16px;
        font-weight: 300;
        line-height: 140%;
      }

      :where(body.home-page.page-branding-home) .mywork-link-icon {
        font-size: 0.82em;
      }

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .mywork-caption {
          max-width: none;
          padding-top: 16px;
        }

        :where(body.home-page.page-branding-home) .mywork-caption > div:last-child {
          margin-top: 22px;
        }}


      /* Smooth marquee: transform-based movement, no scrollLeft jumps. */
      :where(body.home-page.page-branding-home) .hero-copy {
        text-align: left;
      }

      /* Adaptive hero text parity: service lines match the intro copy. */
      @media (max-width: 1180px) {:where(body.home-page.page-branding-home) .hero-services-preview-b {
          font-size: 16px;
          font-weight: 300;
          line-height: 140%;
          letter-spacing: 0;
        }

        :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service {
          font-size: inherit;
          font-weight: inherit;
          line-height: 140%;
          letter-spacing: 0;
        }

        :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service > span {
          font: inherit;
          letter-spacing: 0;
        }}

      /* Unified text-link interaction for nav and work CTA. */
      :where(body.home-page.page-branding-home) .site-header {
        mix-blend-mode: normal;
        color: var(--ink);
      }

      :where(body.home-page.page-branding-home) .nav {
        font-weight: 300;
        letter-spacing: 0;
      }

      :where(body.home-page.page-branding-home) .nav a,
      :where(body.home-page.page-branding-home) .mywork-link {
        font-weight: 300;
        letter-spacing: 0;
      }

      :where(body.home-page.page-branding-home) .nav a,
      :where(body.home-page.page-branding-home) .mywork-link,
      :where(body.home-page.page-branding-home) .contact-links a {
        display: inline-flex;
        width: fit-content;
        padding-bottom: 3px;
        border-bottom: 1px solid transparent;
        text-decoration: none;
        transition: color 180ms ease, border-color 180ms ease;
      }

      :where(body.home-page.page-branding-home) .nav a,
      :where(body.home-page.page-branding-home) .mywork-link {
        line-height: 140%;
      }

      :where(body.home-page.page-branding-home) .nav a:hover,
      :where(body.home-page.page-branding-home) .mywork-link:hover,
      :where(body.home-page.page-branding-home) .contact-links a:hover {
        color: var(--ink);
        border-bottom-color: var(--ink);
      }

      /* Static accent dots removed; only the live cursor dot remains. */
      :where(body.home-page.page-branding-home) .accent-dot {
        display: none !important;
      }

      /* Section wordmarks: DESIGN changes into WORKS, then CONTACTS follows the same left rhythm. */
      :where(body.home-page.page-branding-home) .work-alt {
        min-height: 100svh;
        padding: clamp(56px, 7svh, 84px) 0 clamp(72px, 9svh, 112px);
        overflow: hidden;
      }

      :where(body.home-page.page-branding-home) .mywork-heading {
        margin: 0;
        padding: 0 var(--pad-x);
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: clamp(120px, 16vw, 260px);
        font-weight: 100;
        line-height: 0.78;
        letter-spacing: 0;
        text-transform: uppercase;
        white-space: nowrap;
      }

      :where(body.home-page.page-branding-home) .mywork-showcase {
        margin-top: clamp(58px, 7svh, 96px);
      }

      :where(body.home-page.page-branding-home) .contact {
        min-height: 100svh;
        padding: clamp(56px, 7svh, 84px) var(--pad-x) var(--pad-y);
        display: grid;
        grid-template-rows: auto auto 1fr;
        align-content: start;
        overflow: hidden;
      }

      :where(body.home-page.page-branding-home) .contact-mark {
        justify-content: flex-start;
        margin: 0;
      }

      :where(body.home-page.page-branding-home) .contact-links {
        align-self: start;
        justify-self: start;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: auto;
        margin-top: clamp(54px, 10svh, 112px);
        gap: clamp(12px, 2.4svh, 24px);
        color: var(--muted);
        font-size: clamp(32px, 4.8vw, 74px);
        font-weight: 300;
        line-height: 110%;
        letter-spacing: 0;
        text-align: left;
      }

      :where(body.home-page.page-branding-home) .contact-links a {
        line-height: 1.05;
        text-align: left;
      }

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .work-alt {
          padding-top: 52px;
          padding-bottom: 76px;
        }

        :where(body.home-page.page-branding-home) .mywork-heading,
        :where(body.home-page.page-branding-home) .contact-mark {
          font-size: clamp(54px, 18vw, 96px);
        }

        :where(body.home-page.page-branding-home) .mywork-showcase {
          margin-top: 42px;
        }

        :where(body.home-page.page-branding-home) .contact {
          padding-top: 52px;
        }

        :where(body.home-page.page-branding-home) .contact-links {
          width: 100%;
          margin-top: 42px;
          gap: clamp(10px, 2.4svh, 18px);
          font-size: clamp(24px, 7.2vw, 34px);
          line-height: 112%;
        }}

      :where(body.home-page.page-branding-home) .mywork-showcase {
        overflow: hidden;
      }

      :where(body.home-page.page-branding-home) .mywork-track {
        overflow-x: auto;
        overflow-y: hidden;
        transform: none;
        will-change: auto;
        touch-action: pan-x pan-y;
        scroll-behavior: auto;
      }

      /* Scroll morph word: DESIGN becomes WORKS during the hero-to-works transition. */
      :where(body.home-page.page-branding-home) .morph-word {
        --from-opacity: 1;
        --to-opacity: 0;
        --from-y: 0px;
        --to-y: 0.16em;
        --slot-shift: 0px;
        --tail-width: 0.62em;
        --tail-opacity: 1;
        margin: 0;
        display: flex;
        align-items: baseline;
        gap: 0.012em;
        width: fit-content;
        max-width: calc(100vw - (var(--pad-x) * 2));
        overflow: visible;
      }

      :where(body.home-page.page-branding-home) .morph-slot {
        position: relative;
        display: inline-block;
        width: var(--slot-width);
        height: 0.88em;
        flex: 0 0 auto;
        overflow: visible;
      }

      :where(body.home-page.page-branding-home) .morph-tail {
        width: var(--tail-width);
        opacity: var(--tail-opacity);
      }

      :where(body.home-page.page-branding-home) .morph-from,
      :where(body.home-page.page-branding-home) .morph-to {
        position: absolute;
        inset: 0 auto auto 0;
        display: block;
        line-height: inherit;
        will-change: transform, opacity;
      }

      :where(body.home-page.page-branding-home) .morph-from {
        opacity: var(--from-opacity);
        transform: translate3d(0, var(--from-y), 0);
      }

      :where(body.home-page.page-branding-home) .morph-to {
        opacity: var(--to-opacity);
        transform: translate3d(0, var(--to-y), 0);
      }

      :where(body.home-page.page-branding-home) .work-alt .mywork-heading {
        position: absolute !important;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
      }

      :where(body.home-page.page-branding-home) .work-alt .mywork-showcase {
        margin-top: clamp(40px, 6svh, 76px);
      }

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .morph-word {
          gap: 0.008em;
        }

        :where(body.home-page.page-branding-home) .work-alt .mywork-showcase {
          margin-top: 38px;
        }}

      /* Intact display-word morph and tighter works rhythm. */
      :where(body.home-page.page-branding-home) .morph-word {
        --from-opacity: 1;
        --to-opacity: 0;
        --from-y: 0px;
        --to-y: 10px;
        position: relative;
        display: block;
        width: max-content;
        max-width: calc(100vw - (var(--pad-x) * 2));
        height: 0.88em;
        margin: 0;
        overflow: visible;
      }

      :where(body.home-page.page-branding-home) .morph-layer {
        display: block;
        white-space: nowrap;
        line-height: inherit;
        will-change: transform, opacity;
      }

      :where(body.home-page.page-branding-home) .morph-word-from {
        opacity: var(--from-opacity);
        transform: translate3d(0, var(--from-y), 0);
      }

      :where(body.home-page.page-branding-home) .morph-word-to {
        position: absolute;
        left: 0;
        top: 0;
        opacity: var(--to-opacity);
        transform: translate3d(0, var(--to-y), 0);
      }

      :where(body.home-page.page-branding-home) .work-alt {
        padding-top: clamp(24px, 3.5svh, 48px);
      }

      :where(body.home-page.page-branding-home) .work-alt .mywork-showcase {
        margin-top: clamp(12px, 2.5svh, 32px);
      }

      :where(body.home-page.page-branding-home) .mywork-caption {
        padding-top: 16px;
      }

      :where(body.home-page.page-branding-home) .case-tags {
        margin-top: 6px;
      }

      :where(body.home-page.page-branding-home) .mywork-caption > div:last-child {
        margin-top: 16px;
      }

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .morph-word {
          height: 0.9em;
        }

        :where(body.home-page.page-branding-home) .work-alt {
          padding-top: 34px;
        }

        :where(body.home-page.page-branding-home) .work-alt .mywork-showcase {
          margin-top: 30px;
        }

        :where(body.home-page.page-branding-home) .mywork-caption {
          padding-top: 14px;
        }

        :where(body.home-page.page-branding-home) .mywork-caption > div:last-child {
          margin-top: 14px;
        }}

      /* Hero decorative SVG figures: label-style surface, word-height scale, scroll fade. */
      :where(body.home-page.page-branding-home) .hero-figures {
        --hero-figure-size: calc(clamp(120px, 16vw, 260px) * 0.78);
        --figures-opacity: 1;
        --figures-y: 0px;
        position: absolute;
        z-index: 4;
        top: 30svh;
        right: calc(var(--pad-x) + min(480px, 37vw) + clamp(28px, 4vw, 88px));
        display: flex;
        align-items: flex-start;
        gap: clamp(12px, 1.35vw, 28px);
        pointer-events: none;
        opacity: var(--figures-opacity);
        transform: translate3d(0, var(--figures-y), 0);
        will-change: opacity, transform;
      }

      :where(body.home-page.page-branding-home) .hero-figure-reveal,
      :where(body.home-page.page-branding-home) .hero-figure-spin {
        box-sizing: border-box;
        display: block;
        width: var(--hero-figure-size);
        height: var(--hero-figure-size);
        padding: clamp(10px, 0.8vw, 18px);
        border: 1px solid var(--line);
        background: var(--surface-glass);
      }

      :where(body.home-page.page-branding-home) .hero-figure-reveal {
        overflow: hidden;
        border-radius: 23%;
        clip-path: inset(0 100% 0 0);
        transition: clip-path 920ms cubic-bezier(0.16, 1, 0.3, 1);
        will-change: clip-path;
      }

      :where(body.home-page.page-branding-home) .hero-figure-spin {
        overflow: hidden;
        border-radius: 999px;
      }

      :where(body.home-page.page-branding-home) .hero-figures.is-revealing .hero-figure-reveal {
        clip-path: inset(0 0 0 0);
      }

      :where(body.home-page.page-branding-home) .hero-figure {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0.44;
        filter: grayscale(1);
      }

      :where(body.home-page.page-branding-home) .hero-figure-two {
        transform: none;
        transform-origin: 50% 50%;
        transition: none;
      }

      @media (max-width: 1180px) {:where(body.home-page.page-branding-home) .hero {
          grid-template-rows: auto auto auto auto auto auto;
        }

        :where(body.home-page.page-branding-home) .hero-figures {
          --hero-figure-size: calc(clamp(54px, 18vw, 96px) * 0.9);
          position: relative;
          top: auto;
          right: auto;
          grid-column: 1 / -1;
          grid-row: 5;
          justify-self: start;
          margin-top: clamp(14px, 2.8svh, 26px);
          gap: 10px;
        }

        :where(body.home-page.page-branding-home) .hero-figure-reveal,
        :where(body.home-page.page-branding-home) .hero-figure-spin {
          padding: clamp(7px, 1.5vw, 12px);
        }

        :where(body.home-page.page-branding-home) .hero-mark {
          grid-row: 6;
          margin-top: clamp(18px, 3svh, 34px);
        }}

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .hero-figures {
          --hero-figure-size: calc(clamp(54px, 18vw, 96px) * 0.78);
          gap: 8px;
          margin-top: 18px;
        }}


      /* Contact links scale and footer rhythm after Tilda Expert. */
      :where(body.home-page.page-branding-home) .contact-links {
        font-size: clamp(29px, 4.32vw, 67px);
      }

      :where(body.home-page.page-branding-home) .contact .footer {
        margin-top: 100px;
      }

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .contact {
          min-height: auto;
          grid-template-rows: auto auto auto;
          padding-bottom: 24px;
        }

        :where(body.home-page.page-branding-home) .contact-links {
          font-size: clamp(23px, 7.2vw, 40px);
        }

        :where(body.home-page.page-branding-home) .contact .footer {
          margin-top: 50px;
        }}

      @media (max-width: 420px) {:where(body.home-page.page-branding-home) .contact-links {
          font-size: clamp(22px, 6.48vw, 31px);
        }}


      /* Desktop contacts spacing: reduce the pre-heading air by one third. */
      :where(body.home-page.page-branding-home) .contact {
        padding-top: clamp(37px, 4.7svh, 56px);
      }

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .contact {
          padding-top: 35px;
        }}


      /* Hero left-column alignment: role and intro copy share one guide. */
      @media (min-width: 1181px) {:where(body.home-page.page-branding-home) .role-brand {
          left: var(--pad-x);
          top: 30svh;
        }

        :where(body.home-page.page-branding-home) .hero-copy {
          grid-column: 1 / span 5;
          justify-self: start;
          margin-left: 0;
          padding-left: 0;
          text-align: left;
        }}


      /* Final screen corrections: clean SVGs, masked word transition, slider BW preview, tighter Contacts rhythm. */
      :where(body.home-page.page-branding-home) .morph-word {
        --from-clip: inset(0 0 0% 0);
        --to-clip: inset(100% 0 0 0);
        overflow: hidden;
        isolation: isolate;
      }

      :where(body.home-page.page-branding-home) .morph-layer {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 1 !important;
        transform: none !important;
        clip-path: inset(0 0 0 0);
        will-change: clip-path;
      }

      :where(body.home-page.page-branding-home) .morph-word-from {
        clip-path: var(--from-clip);
      }

      :where(body.home-page.page-branding-home) .morph-word-to {
        clip-path: var(--to-clip);
      }

      @media (min-width: 1181px) {:where(body.home-page.page-branding-home) .hero-figures {
          --hero-figure-size: clamp(150px, 12.4vw, 210px);
          top: auto;
          right: clamp(92px, 7vw, 140px);
          bottom: clamp(18px, 2.5svh, 34px);
          left: auto;
          gap: clamp(22px, 2vw, 36px);
        }}

      :where(body.home-page.page-branding-home) .hero-figure-reveal,
      :where(body.home-page.page-branding-home) .hero-figure-spin {
        padding: 0;
        border: 0;
        background: transparent;
        border-radius: 0;
      }

      :where(body.home-page.page-branding-home) .hero-figure-spin {
        overflow: visible;
      }

      :where(body.home-page.page-branding-home) .hero-figure {
        opacity: 1;
        filter: none;
      }

      :where(body.home-page.page-branding-home) .work-alt {
        padding-bottom: clamp(48px, 6svh, 75px);
      }

      :where(body.home-page.page-branding-home) .contact {
        padding-top: clamp(25px, 3.15svh, 38px);
      }

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .work-alt {
          padding-bottom: 48px;
        }

        :where(body.home-page.page-branding-home) .contact {
          padding-top: 24px;
        }}

      @media (hover: hover) and (pointer: fine) and (min-width: 1021px) {:where(body.home-page.page-branding-home) .mywork-track img {
          filter: grayscale(1);
          transition:
            filter 520ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 420ms cubic-bezier(0.16, 1, 0.3, 1);
        }

        :where(body.home-page.page-branding-home) .mywork-track:hover img {
          filter: grayscale(0);
        }

        :where(body.home-page.page-branding-home) .mywork-track:hover .mywork-card--hover-preview .mywork-img-color {
          opacity: 1;
        }

        :where(body.home-page.page-branding-home) .mywork-track:hover .mywork-card--hover-preview .mywork-img-bw {
          opacity: 0;
        }}

      @media (max-width: 1020px), (hover: none) {:where(body.home-page.page-branding-home) .mywork-track img {
          filter: none;
        }}


      /* Fix after visual QA: keep the masked word visible, align SVGs to the services guide, remove slider hover jump. */
      :where(body.home-page.page-branding-home) .morph-word {
        position: relative;
        display: block;
        width: max-content;
        height: 0.88em;
        overflow: hidden;
      }

      :where(body.home-page.page-branding-home) .morph-word::after {
        content: "DESIGN";
        display: block;
        height: 0;
        overflow: hidden;
        visibility: hidden;
        white-space: nowrap;
      }

      :where(body.home-page.page-branding-home) .morph-layer {
        width: max-content;
      }

      @media (min-width: 1181px) {:where(body.home-page.page-branding-home) .hero-figures {
          left: calc(100% - var(--pad-x) - min(480px, 37vw));
          right: auto;
        }}

      :where(body.home-page.page-branding-home) .mywork-card:hover {
        transform: translate3d(0, 0, 0);
      }


      /* Final QA pass: unclipped morph word, guided hero copy levels, tighter Contacts entry. */
      :where(body.home-page.page-branding-home) .morph-word {
        max-width: none;
        padding-right: 0.16em;
        margin-right: -0.16em;
      }

      :where(body.home-page.page-branding-home) .morph-word::after {
        content: "DESIGN\00a0";
      }

      :where(body.home-page.page-branding-home) .desktop-copy-break {
        display: none;
      }

      @media (min-width: 1181px) {:where(body.home-page.page-branding-home) .role-brand {
          top: 30svh;
        }

        :where(body.home-page.page-branding-home) .hero-copy {
          position: absolute;
          left: var(--pad-x);
          top: 37.2svh;
          grid-column: auto;
          grid-row: auto;
          max-width: 760px;
          margin: 0;
          padding: 0;
          text-align: left;
        }

        :where(body.home-page.page-branding-home) .desktop-copy-break {
          display: block;
        }}

      :where(body.home-page.page-branding-home) .work-alt {
        min-height: auto;
        padding-bottom: clamp(32px, 4svh, 50px);
      }

      :where(body.home-page.page-branding-home) .contact {
        padding-top: clamp(16px, 2.1svh, 25px);
      }

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .work-alt {
          min-height: auto;
          padding-bottom: 32px;
        }

        :where(body.home-page.page-branding-home) .contact {
          padding-top: 16px;
        }}


      /* Current iteration: single role line, figures on DESIGN level, medium Contacts spacing. */
      @media (min-width: 1181px) {:where(body.home-page.page-branding-home) .hero-figures {
          --hero-figure-size: clamp(140px, 10.4vw, 185px);
          top: auto;
          bottom: clamp(42px, 5.4svh, 68px);
          left: calc(100% - var(--pad-x) - min(480px, 37vw));
          right: auto;
        }}

      :where(body.home-page.page-branding-home) .work-alt {
        padding-bottom: clamp(40px, 5svh, 62px);
      }

      :where(body.home-page.page-branding-home) .contact {
        padding-top: clamp(20px, 2.6svh, 31px);
      }

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .work-alt {
          padding-bottom: 40px;
        }

        :where(body.home-page.page-branding-home) .contact {
          padding-top: 20px;
        }}


      /* Micro-align hero SVGs with the DESIGN word baseline. */
      @media (min-width: 1181px) {:where(body.home-page.page-branding-home) .hero-figures {
          bottom: clamp(8px, 1.25svh, 18px);
        }}


      /* Align hero SVG figures inside the DESIGN word height band. */
      @media (min-width: 1181px) {:where(body.home-page.page-branding-home) .hero-figures {
          --hero-figure-size: clamp(136px, 10.4vw, 168px);
          bottom: clamp(54px, 7.8svh, 72px);
        }}


      /* Morph readability: dim the secondary clipped word while both words overlap. */
      :where(body.home-page.page-branding-home) .morph-word-from {
        opacity: var(--from-layer-opacity, 1) !important;
      }

      :where(body.home-page.page-branding-home) .morph-word-to {
        opacity: var(--to-layer-opacity, 0.3) !important;
      }


      /* Match SVG figure height to the large DESIGN/WORKS word band. */
      @media (min-width: 1181px) {:where(body.home-page.page-branding-home) .hero-figures {
          --hero-figure-size: clamp(160px, 13.2vw, 218px);
          bottom: clamp(32px, 4.7svh, 46px);
        }}


      /* Visual correction: keep SVG figures calmer inside the DESIGN band. */
      @media (min-width: 1181px) {:where(body.home-page.page-branding-home) .hero-figures {
          --hero-figure-size: clamp(136px, 10.4vw, 168px);
          bottom: clamp(54px, 7.8svh, 72px);
        }}


      /* Final Contacts spacing: exact 100px before the Contacts section on desktop. */
      @media (min-width: 701px) {:where(body.home-page.page-branding-home) .work-alt {
          padding-bottom: 0;
        }

        :where(body.home-page.page-branding-home) .contact {
          padding-top: 100px;
        }}


      /* Contacts spacing update: +100px on desktop, scaled down for adaptive layouts. */
      @media (min-width: 1181px) {:where(body.home-page.page-branding-home) .work-alt {
          padding-bottom: 0;
        }

        :where(body.home-page.page-branding-home) .contact {
          padding-top: 200px;
        }}

      @media (min-width: 701px) and (max-width: 1180px) {:where(body.home-page.page-branding-home) .work-alt {
          padding-bottom: 0;
        }

        :where(body.home-page.page-branding-home) .contact {
          padding-top: 120px;
        }}

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .work-alt {
          padding-bottom: 32px;
        }

        :where(body.home-page.page-branding-home) .contact {
          padding-top: 72px;
        }}

      @media (max-width: 420px) {:where(body.home-page.page-branding-home) .contact {
          padding-top: 56px;
        }}


      /* Contacts self-morph: same word, mask split, secondary part at 30%. */
      :where(body.home-page.page-branding-home) .contact-morph-word {
        --contact-from-clip: inset(0 0 0% 0);
        --contact-to-clip: inset(100% 0 0 0);
        --contact-from-layer-opacity: 1;
        --contact-to-layer-opacity: 0.3;
        position: relative;
        display: block;
        width: max-content;
        max-width: none;
        height: 0.88em;
        padding-right: 0.16em;
        margin-right: -0.16em;
        overflow: hidden;
        isolation: isolate;
      }

      :where(body.home-page.page-branding-home) .contact-morph-word::after {
        content: "CONTACTS\00a0";
        display: block;
        height: 0;
        overflow: hidden;
        visibility: hidden;
        white-space: nowrap;
      }

      :where(body.home-page.page-branding-home) .contact-morph-layer {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: max-content;
        white-space: nowrap;
        line-height: inherit;
        will-change: clip-path, opacity;
      }

      :where(body.home-page.page-branding-home) .contact-morph-from {
        clip-path: var(--contact-from-clip);
        opacity: var(--contact-from-layer-opacity);
      }

      :where(body.home-page.page-branding-home) .contact-morph-to {
        clip-path: var(--contact-to-clip);
        opacity: var(--contact-to-layer-opacity);
      }


      /* Morph color update: muted slices use the same paper color as chips and SVG forms. */
      :where(body.home-page.page-branding-home) .morph-word,
      :where(body.home-page.page-branding-home) .contact-morph-word {
        --morph-muted-slice: var(--surface-soft);
      }

      :where(body.home-page.page-branding-home) .morph-word-from {
        opacity: 1 !important;
        color: var(--from-layer-color, var(--ink)) !important;
      }

      :where(body.home-page.page-branding-home) .morph-word-to {
        opacity: 1 !important;
        color: var(--to-layer-color, var(--morph-muted-slice)) !important;
      }

      :where(body.home-page.page-branding-home) .contact-morph-from {
        opacity: 1 !important;
        color: var(--contact-from-layer-color, var(--ink)) !important;
      }

      :where(body.home-page.page-branding-home) .contact-morph-to {
        opacity: 1 !important;
        color: var(--contact-to-layer-color, var(--morph-muted-slice)) !important;
      }


      /* SVG figure exit mirrors the intro wipe instead of fading the whole group. */
      :where(body.home-page.page-branding-home) .hero-figures {
        --figure-one-exit-clip: inset(0 0 0 0);
        --figure-two-exit-clip: inset(0 0 0 0);
        opacity: 1 !important;
        will-change: transform;
      }

      :where(body.home-page.page-branding-home) .hero-figures.is-revealing .hero-figure-reveal {
        clip-path: var(--figure-one-exit-clip, inset(0 0 0 0)) !important;
      }

      :where(body.home-page.page-branding-home) .hero-figures.is-revealing .hero-figure-spin {
        clip-path: var(--figure-two-exit-clip, inset(0 0 0 0)) !important;
      }

      :where(body.home-page.page-branding-home) .hero-figure-spin {
        transition: clip-path 820ms cubic-bezier(0.16, 1, 0.3, 1);
        will-change: clip-path;
      }

      /* Manual slider controls: no autoplay, only arrows, drag, and horizontal wheel. */
      :where(body.home-page.page-branding-home) .mywork-showcase {
        position: relative;
      }

      :where(body.home-page.page-branding-home) .mywork-controls {
        position: absolute;
        top: 40px;
        right: max(var(--pad-x), 40px);
        z-index: 8;
        display: flex;
        align-items: center;
        gap: clamp(18px, 2vw, 34px);
        pointer-events: auto;
      }

      :where(body.home-page.page-branding-home) .mywork-arrow {
        appearance: none;
        border: 0;
        background: transparent;
        padding: 0;
        color: var(--ink);
        font-family: var(--sans);
        font-size: clamp(44px, 4.2vw, 76px);
        font-weight: 300;
        line-height: 1;
        letter-spacing: 0;
        cursor: pointer;
        transition: color 180ms ease, transform 180ms ease;
      }

      :where(body.home-page.page-branding-home) .mywork-arrow:hover {
        color: var(--ink);
        transform: translateY(-1px);
      }

      @media (max-width: 1180px) {:where(body.home-page.page-branding-home) .mywork-controls {
          top: 28px;
          right: var(--pad-x);
          gap: 18px;
        }

        :where(body.home-page.page-branding-home) .mywork-arrow {
          font-size: clamp(34px, 8vw, 54px);
        }}

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .mywork-controls {
          top: 16px;
          gap: 14px;
        }}

      /* Slider arrows iteration: thin corner markers, 20px edge rhythm, smooth frame steps. */
      :where(body.home-page.page-branding-home) .work-alt .mywork-showcase {
        margin-top: calc(clamp(12px, 2.5svh, 32px) + 40px);
      }

      :where(body.home-page.page-branding-home) .mywork-controls {
        top: calc((clamp(30px, 2.1vw, 40px) + 20px) * -1);
        right: 20px;
        gap: 20px;
      }

      :where(body.home-page.page-branding-home) .mywork-arrow {
        position: relative;
        width: clamp(25px, 1.85vw, 34px);
        height: clamp(30px, 2.1vw, 40px);
        display: grid;
        place-items: center;
        color: var(--ink);
        font-size: 0;
        font-weight: 300;
        opacity: 1;
        transform: none;
      }

      :where(body.home-page.page-branding-home) .mywork-arrow::before {
        content: none;
      }

      :where(body.home-page.page-branding-home) .mywork-arrow img {
        display: block;
        width: auto;
        height: clamp(30px, 2.1vw, 40px);
        opacity: 0.94;
        pointer-events: none;
        transition: opacity 180ms ease, transform 180ms ease;
      }

      :where(body.home-page.page-branding-home) .mywork-arrow:hover {
        color: var(--ink);
        transform: none;
      }

      :where(body.home-page.page-branding-home) .mywork-arrow[data-mywork-prev]:hover img {
        transform: translateX(-2px);
      }

      :where(body.home-page.page-branding-home) .mywork-arrow[data-mywork-next]:hover img {
        transform: translateX(2px);
      }

      @media (hover: hover) and (pointer: fine) and (min-width: 1021px) {:where(body.home-page.page-branding-home) .mywork-showcase:hover .mywork-track img {
          filter: grayscale(0);
        }

        :where(body.home-page.page-branding-home) .mywork-showcase:hover .mywork-card--hover-preview .mywork-img-color {
          opacity: 1;
        }

        :where(body.home-page.page-branding-home) .mywork-showcase:hover .mywork-card--hover-preview .mywork-img-bw {
          opacity: 0;
        }}

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .work-alt .mywork-showcase {
          margin-top: 54px;
        }

        :where(body.home-page.page-branding-home) .mywork-controls {
          top: calc((clamp(30px, 2.1vw, 40px) + 14px) * -1);
          right: 20px;
          gap: 14px;
        }}

      /* Slider arrows sit above the track; keep that area visible. */
      :where(body.home-page.page-branding-home) .work-alt .mywork-showcase {
        overflow: visible;
      }

      :where(body.home-page.page-branding-home) .work-alt .mywork-track {
        overflow-x: auto;
        overflow-y: hidden;
      }

      :where(body.home-page.page-branding-home) .work-alt .mywork-showcase::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: calc((clamp(30px, 2.1vw, 40px) + 20px) * -1);
        height: calc(clamp(30px, 2.1vw, 40px) + 20px);
        z-index: 2;
        pointer-events: none;
      }

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .work-alt .mywork-showcase::before {
          top: calc((clamp(30px, 2.1vw, 40px) + 14px) * -1);
          height: calc(clamp(30px, 2.1vw, 40px) + 14px);
        }}


      /* Canonical index page: stable CTA arrow and mobile-only hero simplification. */
      :where(body.home-page.page-branding-home) .mywork-link-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 10px;
        height: 10px;
        min-width: 10px;
        min-height: 10px;
        border-radius: 0;
        background: transparent !important;
        color: inherit;
        font-size: 0;
        line-height: 1;
        transform: translateY(1px);
      }

      :where(body.home-page.page-branding-home) .mywork-link-arrow {
        display: block;
        width: 10px;
        height: 10px;
      }

      :where(body.home-page.page-branding-home) .mywork-link:hover .mywork-link-icon {
        background: transparent !important;
      }

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .hero-figures {
          display: none !important;
        }

        :where(body.home-page.page-branding-home) .portrait-card {
          width: min(74vw, 320px);
          max-width: 320px;
          margin-top: 10px;
        }}

      @media (max-width: 420px) {:where(body.home-page.page-branding-home) .portrait-card {
          width: min(76vw, 300px);
          max-width: 300px;
        }}


    /* Final CTA/reference arrow behavior */
    :where(body.home-page.page-branding-home) .mywork-link,
    :where(body.home-page.page-branding-home) .project-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      min-height: auto;
      padding: 0;
      border: 0;
      border-radius: 0;
      color: var(--muted);
      font-weight: 300;
      text-decoration: none;
      background: transparent;
      transition: color 220ms ease;
    }

    :where(body.home-page.page-branding-home) .mywork-link:hover,
    :where(body.home-page.page-branding-home) .project-cta:hover {
      color: var(--ink);
      text-decoration: none;
      background: transparent;
      transform: none;
    }

    :where(body.home-page.page-branding-home) .mywork-link-icon,
    :where(body.home-page.page-branding-home) .project-cta-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      background: transparent !important;
      border-radius: 0;
      transform: translate3d(0, 1px, 0);
      transition: transform 260ms ease;
    }

    :where(body.home-page.page-branding-home) .mywork-link:hover .mywork-link-icon,
    :where(body.home-page.page-branding-home) .project-cta:hover .project-cta-icon {
      background: transparent !important;
      transform: translate3d(5px, 1px, 0);
    }

    :where(body.home-page.page-branding-home) .mywork-link-arrow,
    :where(body.home-page.page-branding-home) .project-cta-arrow {
      display: block;
      width: 14px;
      height: 14px;
      object-fit: contain;
    }

    :where(body.home-page.page-branding-home) .mywork-link-arrow {
      transform: translateY(0.13em) rotate(45deg);
    }

    @media (max-width: 700px) {:where(body.home-page.page-branding-home) .hero-figures {
        display: none !important;
      }

      :where(body.home-page.page-branding-home) .portrait-card {
        width: min(72vw, 310px);
        aspect-ratio: 1 / 1;
        margin-top: 18px;
      }}


      /* LS shared header behavior */
      :where(body.home-page.page-branding-home) .site-header {
        position: fixed;
        grid-template-columns: 1fr auto 1fr;
        padding-bottom: 0;
        color: var(--ink);
        mix-blend-mode: normal;
        background: var(--header-bg);
      }

      :where(body.home-page.page-branding-home) .site-header::after {
        content: "";
        position: absolute;
        left: var(--page-x);
        right: var(--page-x);
        bottom: 0;
        height: 1px;
        background: var(--ink);
        pointer-events: none;
      }

      :where(body.home-page.page-branding-home) .brand-mark {
        justify-self: start;
        color: inherit;
        font: inherit;
        font-size: var(--type-nav, 18px);
        font-weight: 400;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
      }

      :where(body.home-page.page-branding-home) .nav a,
      :where(body.home-page.page-branding-home) .mywork-link,
      :where(body.home-page.page-branding-home) .project-cta,
      :where(body.home-page.page-branding-home) .contact-links a {
        color: var(--ink) !important;
      }

      :where(body.home-page.page-branding-home) .mywork-link:hover,
      :where(body.home-page.page-branding-home) .project-cta:hover,
      :where(body.home-page.page-branding-home) .nav a:hover,
      :where(body.home-page.page-branding-home) .contact-links a:hover {
        color: var(--ink) !important;
      }

      :where(body.home-page.page-branding-home) .mywork-link-icon,
      :where(body.home-page.page-branding-home) .project-cta-icon {
        transform: translate3d(0, 1px, 0) rotate(0deg);
        transition: transform 260ms ease;
      }

      :where(body.home-page.page-branding-home) .mywork-link:hover .mywork-link-icon,
      :where(body.home-page.page-branding-home) .project-cta:hover .project-cta-icon {
        transform: translate3d(5px, 1px, 0) rotate(0deg) !important;
      }

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .site-header {
          grid-template-columns: auto 1fr auto;
        }

        :where(body.home-page.page-branding-home) .brand-mark {
          grid-column: 1;
          justify-self: start;
        }

        :where(body.home-page.page-branding-home) .time {
          display: none !important;
        }

        :where(body.home-page.page-branding-home) .nav {
          grid-column: 3;
          justify-self: end;
        }}


      :where(body.home-page.page-branding-home) main {
        padding-top: 50px;
      }

      /* Hero identity: fixed to the portrait, matching the reference spacing. */
      :where(body.home-page.page-branding-home) .hero-profile {
        grid-column: 1 / span 2;
        grid-row: 1;
        align-self: start;
        justify-self: start;
        width: 200px;
        position: relative;
        z-index: 4;
      }

      :where(body.home-page.page-branding-home) .hero-profile .portrait-card {
        grid-column: auto;
        width: 100%;
        max-width: none;
        margin: 0;
      }

      :where(body.home-page.page-branding-home) .hero-identity {
        margin-top: 12px;
        color: var(--ink);
        font-family: var(--sans);
        font-size: 16px;
        line-height: 1.2;
        letter-spacing: 0;
        text-align: left;
      }

      :where(body.home-page.page-branding-home) .hero-person-name {
        margin: 0;
        color: var(--ink);
        font: inherit;
        font-weight: 400;
        line-height: inherit;
        letter-spacing: 0;
      }

      :where(body.home-page.page-branding-home) .hero-identity .role {
        position: static !important;
        inset: auto !important;
        grid-column: auto !important;
        grid-row: auto !important;
        max-width: none;
        margin: 2px 0 0;
        color: var(--ink);
        font-family: var(--sans);
        font-size: inherit;
        font-weight: 500;
        line-height: inherit;
        letter-spacing: 0;
        text-align: left;
        text-transform: none;
        white-space: nowrap;
      }

      @media (max-width: 1180px) {:where(body.home-page.page-branding-home) .hero-profile {
          grid-column: 1 / span 4;
          grid-row: 1;
          width: clamp(190px, 24vw, 250px);
        }}

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .hero-profile {
          width: min(72vw, 310px);
          margin-top: 18px;
        }

        :where(body.home-page.page-branding-home) .hero-identity {
          margin-top: 11px;
        }}

      @media (max-width: 420px) {:where(body.home-page.page-branding-home) .hero-profile {
          width: min(76vw, 300px);
          max-width: 300px;
        }}

      /* Audience tabs draft: first state only */
      :where(body.home-page.page-branding-home) .audience-composition {
        z-index: 3;
      }

      :where(body.home-page.page-branding-home) .audience-tabs-draft {
        display: grid;
        grid-template-rows: repeat(2, auto);
        align-content: start;
        gap: 0;
        width: min(100%, 244px);
        min-height: 58px;
        background: transparent;
      }

      :where(body.home-page.page-branding-home) .audience-tab {
        appearance: none;
        border: 0;
        border-bottom: 1px solid transparent;
        background: transparent;
        min-height: 29px;
        padding: 0 0 7px;
        color: var(--soft);
        font: inherit;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: 0;
        text-align: left;
      }

      :where(body.home-page.page-branding-home) .audience-tab[disabled] {
        color: var(--soft);
        opacity: 1;
        cursor: default;
      }

      :where(body.home-page.page-branding-home) .audience-tabs-divider {
        display: none;
      }

      :where(body.home-page.page-branding-home) .audience-composition .hero-copy {
        position: static !important;
        inset: auto !important;
        grid-column: auto !important;
        grid-row: auto !important;
        align-self: start;
        width: auto;
        min-width: 0;
        max-width: 560px;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left;
      }

      @media (min-width: 1181px) {:where(body.home-page.page-branding-home) .audience-composition {
          position: absolute;
          left: var(--pad-x);
          top: 37.2svh;
          display: grid;
          grid-template-columns: 244px minmax(0, 1fr);
          column-gap: 58px;
          align-items: start;
          width: min(862px, calc(100vw - var(--pad-x) - var(--pad-x) - min(480px, 37vw) - 48px));
        }}

      @media (min-width: 701px) and (max-width: 1180px) {:where(body.home-page.page-branding-home) .audience-composition {
          grid-column: 1 / -1;
          grid-row: 2;
          align-self: end;
          display: grid;
          grid-template-columns: minmax(180px, 244px) minmax(0, 1fr);
          column-gap: 32px;
          width: 100%;
          margin-bottom: 128px;
        }}

      @media (max-width: 700px) {:where(body.home-page.page-branding-home) .audience-composition {
          grid-column: 1 / -1;
          grid-row: 2;
          align-self: end;
          display: grid;
          grid-template-columns: 1fr;
          gap: 16px;
          width: 100%;
          margin-bottom: 64px;
        }

        :where(body.home-page.page-branding-home) .audience-tabs-draft {
          grid-template-columns: 1fr 1fr;
          grid-template-rows: auto;
          width: 100%;
          min-height: 30px;
        }

        :where(body.home-page.page-branding-home) .audience-tab {
          min-height: 30px;
          padding: 0 0 7px;
          text-align: left;
        }}

    /* Functional audience tabs */
    :where(body.home-page.page-branding-home) .audience-tabs-draft {
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    :where(body.home-page.page-branding-home) .audience-tabs-draft::before {
      content: none;
      display: none;
    }

    :where(body.home-page.page-branding-home) .audience-tabs-draft.is-experts::before {
      transform: none;
    }

    :where(body.home-page.page-branding-home) .audience-tab {
      position: relative;
      z-index: 1;
      cursor: pointer;
      transition: color 0.3s ease;
    }

    :where(body.home-page.page-branding-home) .audience-tab[aria-selected="false"] {
      color: var(--soft);
      border-bottom-color: transparent;
    }

    :where(body.home-page.page-branding-home) .audience-tab[aria-selected="true"] {
      color: var(--ink);
      font-weight: 500;
      border-bottom-color: var(--ink);
    }

    :where(body.home-page.page-branding-home) .audience-reveal {
      animation: audience-reveal 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    @keyframes audience-reveal {
      from {
        clip-path: inset(0 0 100% 0);
        transform: translateY(8px);
        opacity: 0.35;
      }
      to {
        clip-path: inset(0 0 0 0);
        transform: translateY(0);
        opacity: 1;
      }
    }

    @media (min-width: 1181px) {:where(body.home-page.page-branding-home) .hero-services-preview-b {
        top: 37.2svh !important;
        bottom: auto !important;
      }}

    @media (max-width: 700px) {:where(body.home-page.page-branding-home) .audience-tabs-draft::before,
      :where(body.home-page.page-branding-home) .audience-tabs-draft.is-experts::before {
        transform: none;
      }}

    @media (prefers-reduced-motion: reduce) {:where(body.home-page.page-branding-home) .audience-tabs-draft::before {
        transition: none !important;
      }

      :where(body.home-page.page-branding-home) .audience-reveal {
        animation: none !important;
      }}

    /* Audience tabs rhythm: keep the underline inside the portrait guide and open up mobile spacing. */
    :where(body.home-page.page-branding-home) .audience-tabs-draft {
      width: min(100%, 200px);
    }

    @media (min-width: 701px) and (max-width: 1180px) {:where(body.home-page.page-branding-home) .audience-tabs-draft {
        width: min(100%, clamp(190px, 24vw, 220px));
      }}

    @media (max-width: 700px) {:where(body.home-page.page-branding-home) .audience-composition {
        margin-bottom: 64px;
        transform: translateY(clamp(40px, 4.4svh, 48px));
      }

      :where(body.home-page.page-branding-home) .audience-tabs-draft {
        grid-template-columns: repeat(2, minmax(0, clamp(102px, 32vw, 132px)));
        column-gap: clamp(32px, 9vw, 40px);
        width: fit-content;
        max-width: 100%;
      }

      :where(body.home-page.page-branding-home) .audience-tab {
        width: 100%;
        min-width: 0;
      }}

    :where(body.home-page.page-branding-home) .case-preview-stack {
      display: grid;
      gap: clamp(72px, 8vw, 132px);
      padding: clamp(76px, 8vw, 132px) var(--pad-x) 0;
    }

    :where(body.home-page.page-branding-home) .case-preview {
      display: grid;
      grid-template-columns: minmax(280px, 0.78fr) minmax(480px, 1.22fr);
      gap: clamp(44px, 6.2vw, 118px);
      align-items: center;
      min-height: clamp(430px, 58svh, 680px);
    }

    :where(body.home-page.page-branding-home) .case-preview--mirror {
      grid-template-columns: minmax(480px, 1.22fr) minmax(280px, 0.78fr);
    }

    :where(body.home-page.page-branding-home) .case-preview--mirror .case-preview-copy {
      grid-column: 2;
    }

    :where(body.home-page.page-branding-home) .case-preview--mirror .case-preview-visual {
      grid-column: 1;
      grid-row: 1;
    }

    :where(body.home-page.page-branding-home) .case-preview-copy {
      max-width: 580px;
    }

    :where(body.home-page.page-branding-home) .case-preview-meta {
      margin: 0 0 clamp(22px, 2.2vw, 34px);
      color: var(--muted);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.4;
      letter-spacing: 0;
    }

    :where(body.home-page.page-branding-home) .case-preview-title {
      margin: 0;
      max-width: 9.8em;
      color: var(--ink);
      font-size: clamp(32px, 3.2vw, 62px);
      font-weight: 400;
      line-height: 1.04;
      letter-spacing: 0;
    }

    :where(body.home-page.page-branding-home) .case-preview-text {
      margin: clamp(24px, 2.8vw, 42px) 0 0;
      max-width: 620px;
      color: var(--ink);
      font-size: 16px;
      font-weight: 300;
      line-height: 140%;
      letter-spacing: 0;
    }

    :where(body.home-page.page-branding-home) .case-preview-index {
      display: grid;
      gap: 10px;
      margin-top: clamp(42px, 5.2vw, 86px);
    }

    :where(body.home-page.page-branding-home) .case-preview-index span {
      color: var(--ink);
      font-size: clamp(64px, 7vw, 120px);
      font-weight: 500;
      line-height: 0.82;
      letter-spacing: 0;
    }

    :where(body.home-page.page-branding-home) .case-preview-index small {
      color: var(--muted);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.4;
      letter-spacing: 0;
    }

    :where(body.home-page.page-branding-home) .case-preview-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      margin-top: clamp(30px, 3.4vw, 52px);
      color: var(--muted);
      font-size: 20px;
      font-weight: 300;
      line-height: 140%;
      letter-spacing: 0;
      text-decoration: none;
      transition: color 220ms ease;
    }

    :where(body.home-page.page-branding-home) .case-preview-link:hover {
      color: var(--ink);
    }

    :where(body.home-page.page-branding-home) .case-preview-link-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      transform: translate3d(0, 1px, 0);
      transition: transform 260ms ease;
    }

    :where(body.home-page.page-branding-home) .case-preview-link:hover .case-preview-link-icon {
      transform: translate3d(5px, 1px, 0);
    }

    :where(body.home-page.page-branding-home) .case-preview-link-icon img {
      display: block;
      width: 14px;
      height: 14px;
      object-fit: contain;
    }

    :where(body.home-page.page-branding-home) .case-preview-visual {
      position: relative;
      display: grid;
      place-items: center;
      aspect-ratio: 1.42 / 1;
      min-height: 360px;
      overflow: hidden;
      border: 0;
      background: var(--surface);
    }

    :where(body.home-page.page-branding-home) .case-preview-board {
      display: none;
    }

    :where(body.home-page.page-branding-home) .case-preview--mirror .case-preview-board {
      transform: scaleX(-1);
    }

    :where(body.home-page.page-branding-home) .case-preview-panel {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line-soft);
      background: var(--white-glass);
    }

    :where(body.home-page.page-branding-home) .case-preview-panel::before,
    :where(body.home-page.page-branding-home) .case-preview-panel::after {
      content: "";
      position: absolute;
      left: 12%;
      right: 12%;
      height: 1px;
      background: var(--line);
    }

    :where(body.home-page.page-branding-home) .case-preview-panel::before {
      top: 18%;
    }

    :where(body.home-page.page-branding-home) .case-preview-panel::after {
      bottom: 18%;
    }

    :where(body.home-page.page-branding-home) .case-preview-panel--small {
      align-self: end;
      height: 72%;
    }

    :where(body.home-page.page-branding-home) .case-preview-panel--wide {
      align-self: start;
      height: 88%;
    }

    :where(body.home-page.page-branding-home) .case-preview-stack + .mywork-showcase {
      margin-top: clamp(84px, 8vw, 132px);
    }

    @media (max-width: 900px) {:where(body.home-page.page-branding-home) .case-preview,
      :where(body.home-page.page-branding-home) .case-preview--mirror {
        grid-template-columns: 1fr;
        gap: 28px;
        min-height: auto;
      }

      :where(body.home-page.page-branding-home) .case-preview--mirror .case-preview-copy,
      :where(body.home-page.page-branding-home) .case-preview--mirror .case-preview-visual {
        grid-column: auto;
        grid-row: auto;
      }

      :where(body.home-page.page-branding-home) .case-preview-copy {
        max-width: 680px;
      }

      :where(body.home-page.page-branding-home) .case-preview-visual {
        min-height: 280px;
      }}

    @media (max-width: 700px) {:where(body.home-page.page-branding-home) .case-preview-stack {
        gap: 68px;
        padding-top: 58px;
      }

      :where(body.home-page.page-branding-home) .case-preview-meta,
      :where(body.home-page.page-branding-home) .case-preview-index small {
        font-size: 15px;
      }

      :where(body.home-page.page-branding-home) .case-preview-text {
        font-size: 16px;
      }

      :where(body.home-page.page-branding-home) .case-preview-link {
        margin-top: 28px;
        font-size: 18px;
      }

      :where(body.home-page.page-branding-home) .case-preview-visual {
        min-height: 240px;
      }

      :where(body.home-page.page-branding-home) .case-preview-stack + .mywork-showcase {
        margin-top: 76px;
      }}

    :where(body.home-page.page-branding-home) .hero-copy,
    :where(body.home-page.page-branding-home) .hero-services-preview-b,
    :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service,
    :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service > span,
    :where(body.home-page.page-branding-home) .case-preview-text {
      color: var(--ink);
      font-family: var(--instrument);
      font-size: 16px;
      font-weight: 300;
      line-height: 140%;
      letter-spacing: 0;
    }

    @media (max-width: 700px) {:where(body.home-page.page-branding-home) .hero-copy,
      :where(body.home-page.page-branding-home) .hero-services-preview-b,
      :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service,
      :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service > span,
      :where(body.home-page.page-branding-home) .case-preview-text {
        font-size: 16px;
        line-height: 140%;
      }}


    :where(body.home-page.page-branding-home) .hero-floating-hi {
      position: absolute;
      z-index: 5;
      top: 18px;
      right: -36px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      pointer-events: none;
      animation: hero-hi-float 12s cubic-bezier(0.45, 0, 0.55, 1) infinite;
      will-change: transform;
    }

    :where(body.home-page.page-branding-home) .hero-floating-hi__cursor {
      width: 19px;
      height: 20px;
      background: var(--ink);
      clip-path: polygon(0 0, 100% 40%, 44% 55%, 32% 100%);
      transform: rotate(-14deg);
      transform-origin: 50% 50%;
    }

    :where(body.home-page.page-branding-home) .hero-floating-hi__label {
      display: inline-flex;
      align-items: center;
      min-height: 23px;
      padding: 5px 9px 6px;
      border-radius: 5px;
      background: var(--ink);
      color: var(--white);
      font-family: var(--instrument);
      font-size: 12px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0;
      white-space: nowrap;
    }

    @keyframes hero-hi-float {
      0%, 100% {
        transform: translate3d(-14px, 14px, 0);
      }

      50% {
        transform: translate3d(14px, -14px, 0);
      }
    }

    @media (max-width: 700px) {:where(body.home-page.page-branding-home) .hero-floating-hi {
        top: 14px;
        right: -18px;
        gap: 6px;
      }

      :where(body.home-page.page-branding-home) .hero-floating-hi__cursor {
        width: 17px;
        height: 18px;
      }

      :where(body.home-page.page-branding-home) .hero-floating-hi__label {
        min-height: 22px;
        padding: 5px 8px 6px;
        font-size: 11px;
      }}

    @media (prefers-reduced-motion: reduce) {:where(body.home-page.page-branding-home) .hero-floating-hi {
        animation: none !important;
        transform: translate3d(0, 0, 0);
      }}

    :where(body.home-page.page-branding-home) .work-alt .mywork-showcase + .mywork-showcase {
      margin-top: clamp(112px, 10vw, 168px);
    }

    @media (max-width: 700px) {:where(body.home-page.page-branding-home) .work-alt .mywork-showcase + .mywork-showcase {
        margin-top: 92px;
      }}

    /* Active typography roles. DESIGN / WORKS / CONTACTS keep their existing display rules. */
    :where(body.home-page.page-branding-home) .brand-mark,
    :where(body.home-page.page-branding-home) .time,
    :where(body.home-page.page-branding-home) .nav,
    :where(body.home-page.page-branding-home) .nav a,
    :where(body.home-page.page-branding-home) .hero-identity,
    :where(body.home-page.page-branding-home) .audience-tab,
    :where(body.home-page.page-branding-home) .hero-copy,
    :where(body.home-page.page-branding-home) .hero-services-preview-b,
    :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service,
    :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service > span,
    :where(body.home-page.page-branding-home) .case-preview-meta,
    :where(body.home-page.page-branding-home) .case-preview-title,
    :where(body.home-page.page-branding-home) .case-preview-text,
    :where(body.home-page.page-branding-home) .case-preview-link,
    :where(body.home-page.page-branding-home) .mywork-project,
    :where(body.home-page.page-branding-home) .mywork-project h3,
    :where(body.home-page.page-branding-home) .mywork-description,
    :where(body.home-page.page-branding-home) .mywork-link,
    :where(body.home-page.page-branding-home) .service-chips span,
    :where(body.home-page.page-branding-home) .case-preview-index small,
    :where(body.home-page.page-branding-home) .contact-links,
    :where(body.home-page.page-branding-home) .contact-links a,
    :where(body.home-page.page-branding-home) .hero-floating-hi__label,
    :where(body.home-page.page-branding-home) .footer,
    :where(body.home-page.page-branding-home) .footer small {
      font-family: var(--font-text);
      letter-spacing: var(--tracking-default);
    }

    :where(body.home-page.page-branding-home) .brand-mark {
      font-size: var(--text-ui);
      font-weight: var(--weight-regular);
      line-height: var(--leading-single);
    }

    :where(body.home-page.page-branding-home) .time {
      font-size: var(--text-ui);
      font-weight: var(--weight-medium);
      line-height: var(--leading-single);
    }

    :where(body.home-page.page-branding-home) .nav,
    :where(body.home-page.page-branding-home) .nav a {
      font-size: var(--text-ui);
      font-weight: var(--weight-light);
      line-height: var(--leading-ui);
    }

    :where(body.home-page.page-branding-home) .hero-identity {
      font-size: var(--text-ui);
      line-height: var(--leading-compact);
    }

    :where(body.home-page.page-branding-home) .hero-person-name {
      font-weight: var(--weight-light);
    }

    :where(body.home-page.page-branding-home) .hero-identity .role {
      font-weight: var(--weight-medium);
    }

    :where(body.home-page.page-branding-home) .audience-tab {
      font-size: var(--text-ui);
      font-weight: var(--weight-light);
      line-height: var(--leading-ui);
    }

    :where(body.home-page.page-branding-home) .audience-tab[aria-selected="true"] {
      font-weight: var(--weight-regular);
    }

    :where(body.home-page.page-branding-home) .audience-tab[aria-selected="false"] {
      font-weight: var(--weight-light);
    }

    :where(body.home-page.page-branding-home) .hero-copy,
    :where(body.home-page.page-branding-home) .hero-services-preview-b,
    :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service,
    :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service > span,
    :where(body.home-page.page-branding-home) .case-preview-text,
    :where(body.home-page.page-branding-home) .mywork-description {
      font-size: var(--text-body-copy);
      font-weight: var(--weight-light);
      line-height: var(--leading-body-copy);
    }

    :where(body.home-page.page-branding-home) .hero-services-preview-b {
      gap: 0;
      row-gap: 0;
    }

    :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service {
      min-height: var(--rhythm-body-row);
      margin: 0;
    }

    :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service-with-chips {
      margin: 0 0 var(--rhythm-text-group);
    }

    :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service-with-chips + .hero-service,
    :where(body.home-page.page-branding-home) .hero-services-preview-b .hero-service-wide {
      margin-top: var(--rhythm-text-group);
    }

    :where(body.home-page.page-branding-home) .case-preview-meta {
      font-size: var(--text-meta);
      font-weight: var(--weight-regular);
      line-height: var(--leading-ui);
    }

    :where(body.home-page.page-branding-home) .service-chips span {
      font-size: var(--text-label);
      font-weight: var(--weight-light);
      line-height: var(--leading-single);
    }

    :where(body.home-page.page-branding-home) .case-preview-title,
    :where(body.home-page.page-branding-home) .mywork-project h3 {
      font-size: var(--text-case-title);
      font-weight: var(--weight-regular);
      line-height: var(--leading-case-title);
    }

    :where(body.home-page.page-branding-home) .case-preview-index span {
      font-family: var(--font-display);
      font-size: var(--text-case-index);
      font-weight: var(--weight-hairline);
      line-height: var(--leading-case-index);
      letter-spacing: var(--tracking-default);
    }

    :where(body.home-page.page-branding-home) .case-preview-index small {
      font-size: var(--text-meta);
      font-weight: var(--weight-regular);
      line-height: var(--leading-ui);
    }

    :where(body.home-page.page-branding-home) .case-preview-link {
      font-size: var(--text-action);
      font-weight: var(--weight-light);
      line-height: var(--leading-ui);
    }

    :where(body.home-page.page-branding-home) .mywork-link {
      font-size: var(--text-ui);
      font-weight: var(--weight-light);
      line-height: var(--leading-ui);
    }

    :where(body.home-page.page-branding-home) .contact-links,
    :where(body.home-page.page-branding-home) .contact-links a {
      font-size: var(--text-contact);
      font-weight: var(--weight-medium);
      line-height: 1.05;
    }

    :where(body.home-page.page-branding-home) .hero-floating-hi__label {
      font-size: var(--text-badge);
      font-weight: var(--weight-medium);
      line-height: var(--leading-single);
    }

    :where(body.home-page.page-branding-home) .footer,
    :where(body.home-page.page-branding-home) .footer small {
      font-size: var(--text-footer-copy);
      font-weight: var(--weight-regular);
      line-height: var(--leading-ui);
    }

    @media (max-width: 700px) {:root {
        --text-label: 10px;
        --text-badge: 11px;
        --text-meta: 15px;
        --text-action: 18px;
        --text-contact: clamp(23px, 7.2vw, 40px);
      }}

    @media (max-width: 420px) {:root {
        --text-contact: clamp(22px, 6.48vw, 31px);
      }}

    /* Unified case information flow: title, tags, description, action. */
    :where(body.home-page.page-branding-home) .case-preview-copy {
      width: 100%;
      min-width: 0;
      max-width: none;
    }

    :where(body.home-page.page-branding-home) .case-preview-title {
      width: 100%;
      max-width: none;
    }

    :where(body.home-page.page-branding-home) .case-tags,
    :where(body.home-page.page-branding-home) .case-preview-tags {
      margin-top: var(--space-case-title-tags);
    }

    :where(body.home-page.page-branding-home) .case-preview-text {
      width: 100%;
      max-width: 100%;
      margin-top: var(--space-case-tags-copy);
    }

    :where(body.home-page.page-branding-home) .mywork-caption {
      display: block;
      width: 100%;
      max-width: none;
      padding-top: 22px;
      padding-right: var(--pad-x);
      padding-left: var(--pad-x);
    }

    :where(body.home-page.page-branding-home) .mywork-project,
    :where(body.home-page.page-branding-home) .mywork-project > div {
      display: block;
      width: 100%;
      max-width: none;
    }

    :where(body.home-page.page-branding-home) .mywork-project h3 {
      width: max-content;
      max-width: 100%;
      margin: 0;
      font-size: var(--text-strip-title);
      white-space: nowrap;
    }

    :where(body.home-page.page-branding-home) .case-preview-title,
    :where(body.home-page.page-branding-home) .mywork-project h3 {
      font-family: var(--font-display);
      font-weight: var(--weight-hairline);
    }

    :where(body.home-page.page-branding-home) .mywork-caption > div:last-child {
      width: min(620px, 100%);
      max-width: 100%;
      margin-top: var(--space-case-tags-copy);
      margin-left: 0;
      text-align: left;
    }

    :where(body.home-page.page-branding-home) .mywork-description {
      width: 100%;
      max-width: 620px;
      margin: 0;
    }

    :where(body.home-page.page-branding-home) .case-preview-link,
    :where(body.home-page.page-branding-home) .mywork-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      width: fit-content;
      min-height: 0;
      margin-top: var(--space-case-action);
      padding: 0;
      border: 0;
      border-radius: 0;
      color: var(--muted) !important;
      background: transparent;
      font-size: var(--text-action);
      font-weight: var(--weight-light);
      line-height: var(--leading-ui);
      text-decoration: none;
      transition: color 220ms ease;
    }

    :where(body.home-page.page-branding-home) .case-preview-link:hover,
    :where(body.home-page.page-branding-home) .mywork-link:hover {
      color: var(--ink) !important;
      border-color: transparent;
      background: transparent;
      transform: none;
    }

    :where(body.home-page.page-branding-home) .case-preview-link-icon,
    :where(body.home-page.page-branding-home) .mywork-link-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      transform: translate3d(0, 1px, 0);
      transition: transform 260ms ease;
    }

    :where(body.home-page.page-branding-home) .case-preview-link-icon img,
    :where(body.home-page.page-branding-home) .mywork-link-icon img,
    :where(body.home-page.page-branding-home) .mywork-link-arrow {
      display: block;
      width: 14px;
      height: 14px;
      object-fit: contain;
      transform: rotate(45deg) !important;
    }

    :where(body.home-page.page-branding-home) .case-preview-link:hover .case-preview-link-icon,
    :where(body.home-page.page-branding-home) .mywork-link:hover .mywork-link-icon {
      transform: translate3d(4px, 1px, 0) !important;
    }

    /* One vertical rhythm between every consecutive case preview block. */
    :where(body.home-page.page-branding-home) .case-preview-stack {
      gap: var(--space-preview-block);
    }

    :where(body.home-page.page-branding-home) .case-preview-stack + .mywork-showcase,
    :where(body.home-page.page-branding-home) .work-alt .mywork-showcase + .case-preview-stack,
    :where(body.home-page.page-branding-home) .work-alt .mywork-showcase + .mywork-showcase {
      margin-top: var(--space-preview-block);
    }

    @media (min-width: 701px) and (max-width: 1180px) {:root {
        --space-preview-block: var(--space-preview-tablet);
      }}

    @media (max-width: 700px) {:root {
        --space-preview-block: var(--space-preview-mobile);
      }}

    /* Audience tabs: state changes color only; underline stays within the active tab. */
    :where(body.home-page.page-branding-home) .audience-tab,
    :where(body.home-page.page-branding-home) .audience-tab[aria-selected="true"],
    :where(body.home-page.page-branding-home) .audience-tab[aria-selected="false"] {
      min-height: 0;
      padding: 0 0 2px;
      font-size: var(--text-ui);
      font-weight: var(--weight-light);
      line-height: var(--leading-ui);
    }

    :where(body.home-page.page-branding-home) .audience-tab[aria-selected="true"] {
      color: var(--ink);
      border-bottom-color: var(--ink);
    }

    :where(body.home-page.page-branding-home) .audience-tab[aria-selected="false"] {
      color: var(--soft);
      border-bottom-color: transparent;
    }

    @media (min-width: 701px) {:where(body.home-page.page-branding-home) .audience-tabs-draft {
        row-gap: 8px;
      }}

    /* Canonical rhythm for the two presentation case previews. */
    :where(body.home-page.page-branding-home) .case-preview {
      align-items: stretch;
    }

    :where(body.home-page.page-branding-home) .case-preview-copy {
      display: flex;
      flex-direction: column;
      align-self: stretch;
    }

    :where(body.home-page.page-branding-home) .case-preview-index {
      margin-top: auto;
    }

    :where(body.home-page.page-branding-home) .case-preview-index small,
    :where(body.home-page.page-branding-home) .case-preview-link {
      color: var(--ink) !important;
      font-family: var(--font-text);
      font-size: var(--text-body-copy);
      font-weight: var(--weight-light);
      line-height: var(--leading-body-copy);
      letter-spacing: var(--tracking-default);
    }

    :where(body.home-page.page-branding-home) .case-preview-link {
      margin-top: var(--space-case-tags-copy);
    }

    @media (max-width: 900px) {:where(body.home-page.page-branding-home) .case-preview-index {
        margin-top: var(--space-case-tags-copy);
      }

      :where(body.home-page.page-branding-home) .case-preview-link {
        margin-top: var(--space-case-tags-copy);
      }}

    @media (max-width: 700px) {:root {
        --text-strip-title: clamp(24px, 7vw, 32px);
        --space-case-title-tags: 14px;
        --space-case-tags-copy: 30px;
        --space-case-action: 40px;
      }

      :where(body.home-page.page-branding-home) .mywork-caption {
        padding-top: 16px;
      }

      :where(body.home-page.page-branding-home) .case-preview-title,
      :where(body.home-page.page-branding-home) .mywork-project h3 {
        font-weight: var(--weight-light);
      }}
    /* Disabled case CTA: one muted color for the label and arrow. */
    :where(body.home-page.page-branding-home) .case-preview-link--disabled,
    :where(body.home-page.page-branding-home) .case-preview-link--disabled:hover {
      color: var(--muted) !important;
      cursor: default;
      opacity: 1;
      transform: none;
    }

    :where(body.home-page.page-branding-home) .case-preview-link--disabled:hover .case-preview-link-icon {
      transform: translate3d(0, 1px, 0) !important;
    }

    :where(body.home-page.page-branding-home) .case-preview-link--disabled .case-preview-link-icon img,
    :where(body.home-page.page-branding-home) .case-preview-link--disabled:hover .case-preview-link-icon img {
      opacity: 0.52;
    }

    /* Mobile intro: a smaller portrait with a tighter header-to-image rhythm. */
    @media (max-width: 700px) {:where(body.home-page.page-branding-home) .hero {
        padding-top: 17px;
      }

      :where(body.home-page.page-branding-home) .hero-profile {
        width: min(48vw, 207px);
        margin-top: 6px;
      }}

    @media (max-width: 420px) {:where(body.home-page.page-branding-home) .hero-profile {
        width: min(50.6667vw, 200px);
      }}


    /* Final hero form alignment: match SVG forms to the DESIGN centerline. */
    @media (min-width: 1181px) {:where(body.home-page.page-branding-home) .hero-figures {
        --hero-figure-size: clamp(136px, 10.4vw, 168px);
        top: auto;
        bottom: 55px;
        left: calc(100% - var(--pad-x) - min(480px, 37vw));
        right: auto;
        gap: clamp(22px, 2vw, 36px);
      }

      :where(body.home-page.page-branding-home) .hero-figure-reveal,
      :where(body.home-page.page-branding-home) .hero-figure-spin {
        padding: 0;
        border: 0;
        background: transparent;
        border-radius: 0;
      }

      :where(body.home-page.page-branding-home) .hero-figure {
        opacity: 1;
        filter: none;
      }}

    /* Short desktop: move the complete hero composition as one scroll-like stage. */
    @media (min-width: 1181px) and (max-height: 799px) {:where(body.home-page.page-branding-home) .hero {
        --hero-short-shift: clamp(-220px, calc(100svh - 800px), 0px);
        min-height: 800px;
        margin-bottom: var(--hero-short-shift);
      }

      :where(body.home-page.page-branding-home) .audience-composition,
      :where(body.home-page.page-branding-home) .hero-services-preview-b {
        top: 297.6px !important;
      }

      :where(body.home-page.page-branding-home) .hero-figures {
        bottom: 55px;
      }

      :where(body.home-page.page-branding-home) .hero-profile,
      :where(body.home-page.page-branding-home) .audience-composition,
      :where(body.home-page.page-branding-home) .hero-services-preview-b,
      :where(body.home-page.page-branding-home) .hero-figures,
      :where(body.home-page.page-branding-home) .hero-mark {
        translate: 0 var(--hero-short-shift);
      }}


/* Migrated from ru/branding/visual-brand-identity/index.html. */
:root {
      --bg: #ffffff;
      --ink: #434343;
      --soft: #f9f9fa;
      --muted: #727272;
      --line: #d1d1d1;
      --page-x: clamp(16px, 1.25vw, 28px);
      --type-nav: clamp(17px, 1.15vw, 22px);
      --type-body: clamp(20px, 1.55vw, 31px);
      --type-h1: clamp(74px, 7.8vw, 156px);
      --type-word: clamp(88px, 18vw, 340px);
    }

    :where(body.case-page.page-vbi) * { box-sizing: border-box; }

    html {
      background: var(--bg);
      color: var(--ink);
      font-family: "Instrument Sans", Arial, sans-serif;
      font-weight: 300;
      scroll-behavior: smooth;
    }

    body:where(.case-page.page-vbi) {
      min-width: 320px;
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      cursor: none;
      overflow-x: hidden;
    }

    :where(body.case-page.page-vbi) a { color: inherit; }

    :where(body.case-page.page-vbi) .cursor-dot {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 9999;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #2f66df;
      pointer-events: none;
      transform: translate3d(-50%, -50%, 0);
      transition: opacity 160ms ease, width 180ms ease, height 180ms ease;
      mix-blend-mode: normal;
    }

    :where(body.case-page.page-vbi) .site-header {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      z-index: 20;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 18px;
      height: 50px;
      padding: 0 var(--page-x);
      background: rgba(255, 255, 255, 0.92);
      color: var(--ink);
      font-size: var(--type-nav);
      font-weight: 400;
      line-height: 1;
    }

    :where(body.case-page.page-vbi) .site-header::after {
      content: "";
      position: absolute;
      left: var(--page-x);
      right: var(--page-x);
      bottom: 0;
      height: 1px;
      background: var(--ink);
      pointer-events: none;
    }

    :where(body.case-page.page-vbi) .brand-mark,
    :where(body.case-page.page-vbi) .nav a {
      color: inherit;
      text-decoration: none;
      white-space: nowrap;
    }

    :where(body.case-page.page-vbi) .brand-mark { justify-self: start; }
    :where(body.case-page.page-vbi) .time { justify-self: center; }

    :where(body.case-page.page-vbi) .nav {
      justify-self: end;
      display: flex;
      gap: clamp(28px, 4vw, 72px);
    }

    :where(body.case-page.page-vbi) .nav a,
    :where(body.case-page.page-vbi) .project-link,
    :where(body.case-page.page-vbi) .contact-links a,
    :where(body.case-page.page-vbi) .big-cta {
      text-decoration: none;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.16em;
      transition: color 220ms ease, text-decoration-color 220ms ease;
    }

    :where(body.case-page.page-vbi) .nav a:hover,
    :where(body.case-page.page-vbi) .project-link:hover,
    :where(body.case-page.page-vbi) .contact-links a:hover,
    :where(body.case-page.page-vbi) .big-cta:hover {
      text-decoration: underline;
      text-decoration-thickness: 1px;
    }

    :where(body.case-page.page-vbi) main {
      padding-top: 50px;
    }

    :where(body.case-page.page-vbi) .case-hero,
    :where(body.case-page.page-vbi) .gallery,
    :where(body.case-page.page-vbi) .other,
    :where(body.case-page.page-vbi) .contact {
      padding-left: var(--page-x);
      padding-right: var(--page-x);
    }

    :where(body.case-page.page-vbi) .case-hero {
      min-height: auto;
      padding-top: 25px;
      padding-bottom: 120px;
    }

    :where(body.case-page.page-vbi) .case-figures {
      display: flex;
      align-items: center;
      gap: clamp(18px, 2.2vw, 42px);
      width: fit-content;
      margin-left: 0;
      transform: none;
      margin-bottom: 25px;
    }

    :where(body.case-page.page-vbi) .case-figure {
      position: relative;
      display: grid;
      place-items: center;
      width: clamp(150px, 13vw, 250px);
      aspect-ratio: 1 / 1;
      background: transparent;
      border: 0;
      overflow: visible;
    }

    :where(body.case-page.page-vbi) .case-figure img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: 1;
      transition: transform 1200ms cubic-bezier(.2, .9, .16, 1);
    }

    :where(body.case-page.page-vbi) .case-figure-reveal {
      clip-path: inset(0 100% 0 0);
      transition: clip-path 1200ms cubic-bezier(.2, .9, .16, 1);
    }

    :where(body.case-page.page-vbi) .case-figure-reveal.is-visible { clip-path: inset(0 0 0 0); }

    :where(body.case-page.page-vbi) .case-intro {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
      gap: clamp(48px, 9vw, 180px);
      align-items: start;
    }

    :where(body.case-page.page-vbi) .case-kicker {
      display: none;
    }

    :where(body.case-page.page-vbi) h1,
    :where(body.case-page.page-vbi) h2,
    :where(body.case-page.page-vbi) p {
      margin: 0;
    }

    :where(body.case-page.page-vbi) h1 {
      max-width: 8.2em;
      font-size: clamp(56px, 5.5vw, 108px);
      font-weight: 200;
      line-height: 0.98;
      letter-spacing: 0;
    }

    :where(body.case-page.page-vbi) .case-copy {
      padding-top: 0;
    }

    :where(body.case-page.page-vbi) .case-copy p {
      max-width: 760px;
      font-size: clamp(18px, 1.85vw, 36px);
      font-weight: 200;
      line-height: 1.4;
      letter-spacing: 0;
    }

    :where(body.case-page.page-vbi) .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 12px;
      margin-top: clamp(28px, 3.2vw, 56px);
      max-width: 780px;
    }

    :where(body.case-page.page-vbi) .chips span {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 5px 18px 6px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--soft);
      color: var(--muted);
      font-size: clamp(15px, 1vw, 21px);
      font-weight: 300;
      line-height: 1;
      white-space: nowrap;
      transition:
        color 220ms ease,
        border-color 220ms ease,
        background-color 220ms ease,
        transform 220ms ease;
    }


    @media (hover: hover) and (pointer: fine) {:where(body.case-page.page-vbi) .chips span:hover {
        color: var(--ink);
        border-color: #a8a8aa;
        background: #f2f2f3;
        transform: translateY(-1px);
      }}

    @media (prefers-reduced-motion: reduce) {:where(body.case-page.page-vbi) .chips span {
        transition: none;
      }}

    :where(body.case-page.page-vbi) .gallery {
      display: grid;
      gap: clamp(18px, 1.6vw, 32px);
      padding-top: 0;
      padding-bottom: clamp(96px, 13vw, 220px);
    }

    :where(body.case-page.page-vbi) .mock-full,
    :where(body.case-page.page-vbi) .mock-square {
      display: block;
      overflow: hidden;
      background: var(--soft);
      border: 1px solid #ededee;
    }

    :where(body.case-page.page-vbi) .mock-full {
      min-height: 0;
    }

    :where(body.case-page.page-vbi) .mock-full img,
    :where(body.case-page.page-vbi) .mock-square img {
      display: block;
      width: 100%;
    }

    :where(body.case-page.page-vbi) .mock-full img {
      height: auto;
    }

    :where(body.case-page.page-vbi) .mock-square img {
      height: 100%;
      object-fit: cover;
    }

    :where(body.case-page.page-vbi) .mock-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(18px, 1.6vw, 32px);
    }

    :where(body.case-page.page-vbi) .mock-square { aspect-ratio: 1 / 1; }

    :where(body.case-page.page-vbi) .gallery :is(.mock-full, .mock-square) {
      position: relative;
      cursor: zoom-in;
      outline: none;
    }

    :where(body.case-page.page-vbi) .gallery :is(.mock-full, .mock-square):focus-visible {
      outline: 1px solid var(--ink);
      outline-offset: 4px;
    }

    :where(body.case-page.page-vbi) body.lightbox-open {
      overflow: hidden;
    }

    :where(body.case-page.page-vbi) .case-lightbox {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr) 64px;
      align-items: center;
      gap: 20px;
      padding: 24px;
      background: rgba(249, 249, 250, 0.98);
      color: var(--ink);
    }

    :where(body.case-page.page-vbi) .case-lightbox[hidden] {
      display: none;
    }

    :where(body.case-page.page-vbi) .lightbox-stage {
      min-width: 0;
      min-height: 0;
      margin: 0;
      display: grid;
      place-items: center;
    }

    :where(body.case-page.page-vbi) .lightbox-image {
      display: block;
      max-width: 100%;
      max-height: calc(100vh - 96px);
      object-fit: contain;
    }

    :where(body.case-page.page-vbi) .lightbox-close,
    :where(body.case-page.page-vbi) .lightbox-nav {
      appearance: none;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      cursor: pointer;
    }

    :where(body.case-page.page-vbi) .lightbox-close {
      position: absolute;
      top: 18px;
      right: 24px;
      width: 44px;
      height: 44px;
      font-size: 34px;
      font-weight: 300;
      line-height: 1;
    }

    :where(body.case-page.page-vbi) .lightbox-nav {
      width: 56px;
      height: 56px;
      font-size: 36px;
      font-weight: 300;
      line-height: 1;
    }

    :where(body.case-page.page-vbi) .lightbox-count {
      position: absolute;
      left: 24px;
      bottom: 18px;
      margin: 0;
      font-size: 14px;
      color: #7b7b7b;
    }

    @media (max-width: 700px) {:where(body.case-page.page-vbi) .case-lightbox {
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        gap: 6px;
        padding: 16px 8px;
      }

      :where(body.case-page.page-vbi) .lightbox-nav {
        width: 42px;
        height: 42px;
        font-size: 30px;
      }

      :where(body.case-page.page-vbi) .lightbox-close {
        top: 8px;
        right: 8px;
      }

      :where(body.case-page.page-vbi) .lightbox-count {
        left: 16px;
        bottom: 12px;
      }

      :where(body.case-page.page-vbi) .lightbox-image {
        max-height: calc(100vh - 72px);
      }}

    :where(body.case-page.page-vbi) .section-word {
      margin: 0;
      color: var(--ink);
      font-size: clamp(78px, 12.5vw, 220px);
      font-weight: 300;
      line-height: 0.82;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    :where(body.case-page.page-vbi) .other .section-word {
      font-size: clamp(38px, 6vw, 110px);
      font-weight: 100;
      font-variation-settings: "wght" 100;
      line-height: 0.9;
      letter-spacing: 0;
    }

    :where(body.case-page.page-vbi) .other .morph-layer {
      font-weight: 100;
      font-variation-settings: "wght" 100;
    }

    :where(body.case-page.page-vbi) .morph-word {
      position: relative;
      min-height: 0.86em;
      overflow: visible;
    }

    :where(body.case-page.page-vbi) .morph-layer {
      display: block;
      white-space: nowrap;
    }

    :where(body.case-page.page-vbi) .morph-from {
      color: var(--ink);
      clip-path: inset(0 0 var(--from-bottom, 0%) 0);
    }

    :where(body.case-page.page-vbi) .morph-to {
      position: absolute;
      inset: 0 auto auto 0;
      color: var(--soft);
      clip-path: inset(var(--to-top, 50%) 0 0 0);
      pointer-events: none;
    }

    :where(body.case-page.page-vbi) .other {
      padding-bottom: clamp(120px, 15vw, 260px);
    }

    :where(body.case-page.page-vbi) .other-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(18px, 1.6vw, 32px);
      margin-top: clamp(60px, 8vw, 150px);
    }

    :where(body.case-page.page-vbi) .other-card {
      display: grid;
      gap: 18px;
      align-content: start;
    }

    :where(body.case-page.page-vbi) .other-thumb {
      aspect-ratio: 1 / 1;
      background: var(--soft);
      border: 1px solid #ededee;
    }

    :where(body.case-page.page-vbi) .project-link,
    :where(body.case-page.page-vbi) .big-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      color: var(--ink);
      font-size: clamp(20px, 1.55vw, 31px);
      font-weight: 300;
      line-height: 1.15;
    }

    :where(body.case-page.page-vbi) .project-link img,
    :where(body.case-page.page-vbi) .big-cta img {
      display: block;
      width: 16px;
      height: 16px;
      transform: translate3d(0, 1px, 0);
      transition: transform 260ms ease;
    }

    :where(body.case-page.page-vbi) .project-link img {
      transform: translate3d(0, 0.13em, 0) rotate(45deg);
    }

    :where(body.case-page.page-vbi) .project-link:hover img,
    :where(body.case-page.page-vbi) .big-cta:hover img {
      transform: translate3d(5px, 1px, 0);
    }

    :where(body.case-page.page-vbi) .project-link:hover img {
      transform: translate3d(5px, 0.13em, 0) rotate(45deg);
    }

    :where(body.case-page.page-vbi) .closing {
      padding: 0 var(--page-x) clamp(120px, 13vw, 220px);
    }

    :where(body.case-page.page-vbi) .big-cta {
      font-size: clamp(32px, 4.7vw, 92px);
      line-height: 1.05;
    }

    :where(body.case-page.page-vbi) .other-title {
      margin: 0;
      color: var(--ink);
      font-size: clamp(32px, 4.7vw, 92px);
      font-weight: 300;
      line-height: 1.05;
      letter-spacing: 0;
    }

    :where(body.case-page.page-vbi) .big-cta img {
      width: clamp(22px, 3.3vw, 64px);
      height: clamp(22px, 3.3vw, 64px);
    }

    :where(body.case-page.page-vbi) .contact {
      min-height: 100svh;
      padding: clamp(37px, 4.7svh, 56px) var(--page-x) 28px;
      display: grid;
      grid-template-rows: auto auto 1fr;
      align-content: start;
      overflow: hidden;
    }

    :where(body.case-page.page-vbi) .contact-mark {
      justify-content: flex-start;
      margin: 0;
    }

    :where(body.case-page.page-vbi) .contact-light-word {
      color: var(--ink);
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: clamp(120px, 16vw, 260px);
      font-weight: 100;
      line-height: 0.78;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    :where(body.case-page.page-vbi) .contact-morph-word {
      --contact-from-clip: inset(0 0 0% 0);
      --contact-to-clip: inset(100% 0 0 0);
      --contact-from-layer-color: var(--ink);
      --contact-to-layer-color: var(--soft);
      position: relative;
      display: block;
      width: max-content;
      max-width: none;
      height: 0.88em;
      padding-right: 0.16em;
      margin-right: -0.16em;
      overflow: hidden;
      isolation: isolate;
    }

    :where(body.case-page.page-vbi) .contact-morph-word::after {
      content: "CONTACTS\00a0";
      display: block;
      height: 0;
      overflow: hidden;
      visibility: hidden;
      white-space: nowrap;
    }

    :where(body.case-page.page-vbi) .contact-morph-layer {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: max-content;
      white-space: nowrap;
      line-height: inherit;
      will-change: clip-path, color;
    }

    :where(body.case-page.page-vbi) .contact-morph-from {
      color: var(--contact-from-layer-color);
      clip-path: var(--contact-from-clip);
    }

    :where(body.case-page.page-vbi) .contact-morph-to {
      color: var(--contact-to-layer-color);
      clip-path: var(--contact-to-clip);
      pointer-events: none;
    }

    :where(body.case-page.page-vbi) .contact-links {
      align-self: start;
      justify-self: start;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: auto;
      margin-top: clamp(54px, 10svh, 112px);
      gap: clamp(12px, 2.4svh, 24px);
      color: #6f6f6f;
      font-size: clamp(29px, 4.32vw, 67px);
      font-weight: 300;
      line-height: 110%;
      letter-spacing: 0;
      text-align: left;
    }

    :where(body.case-page.page-vbi) .contact-links a {
      color: inherit;
      font-size: inherit;
      font-weight: inherit;
      line-height: 1.05;
      text-align: left;
      text-transform: uppercase;
      white-space: nowrap;
    }

    :where(body.case-page.page-vbi) .footer,
    :where(body.case-page.page-vbi) .contact .footer {
      margin-top: 100px;
      color: var(--ink);
      font-size: clamp(16px, 1.1vw, 22px);
      font-weight: 400;
      text-transform: uppercase;
    }

    :where(body.case-page.page-vbi) .contact .footer small {
      font: inherit;
    }

    @media (max-width: 900px) {
      :where(body.case-page.page-vbi) .time { display: none !important; }
      :where(body.case-page.page-vbi) .site-header {
        grid-template-columns: auto 1fr auto;
        height: 50px;
        padding: 0 var(--page-x);
      }
      :where(body.case-page.page-vbi) .brand-mark { grid-column: 1; }
      :where(body.case-page.page-vbi) .nav { grid-column: 3; gap: 20px; }
      :where(body.case-page.page-vbi) main { padding-top: 50px; }
      :where(body.case-page.page-vbi) .case-figures { display: none; }
      :where(body.case-page.page-vbi) .case-hero { min-height: auto; padding-top: 18px; padding-bottom: clamp(64px, 14vw, 96px); }
      :where(body.case-page.page-vbi) .case-intro { grid-template-columns: 1fr; gap: 42px; }
      :where(body.case-page.page-vbi) .case-copy { padding-top: 0; }
      :where(body.case-page.page-vbi) h1 { font-size: clamp(44px, 12.6vw, 96px); }
      :where(body.case-page.page-vbi) .case-copy p { font-size: clamp(18px, 5.1vw, 31px); }
      :where(body.case-page.page-vbi) .mock-row,
      :where(body.case-page.page-vbi) .other-grid { grid-template-columns: 1fr; }
      :where(body.case-page.page-vbi) .mock-full { min-height: 0; }
      :where(body.case-page.page-vbi) .section-word,
      :where(body.case-page.page-vbi) .other .section-word { font-size: clamp(30px, 9vw, 59px); }
      :where(body.case-page.page-vbi) .contact {
        min-height: auto;
        grid-template-rows: auto auto auto;
        padding-top: clamp(37px, 4.7svh, 56px);
        padding-bottom: 24px;
      }
      :where(body.case-page.page-vbi) .contact-light-word { font-size: clamp(54px, 18vw, 96px); }
      :where(body.case-page.page-vbi) .contact-links {
        margin-top: clamp(54px, 10svh, 112px);
        font-size: clamp(23px, 7.2vw, 40px);
      }
      :where(body.case-page.page-vbi) .contact .footer { margin-top: 50px; }}

    @media (max-width: 420px) {:where(body.case-page.page-vbi) .contact-links {
        font-size: clamp(22px, 6.48vw, 31px);
      }}

    /* Keep the project-page footer identical to the canonical index footer. */
    :where(body.case-page.page-vbi) .contact {
      background: var(--contact-bg);
    }

    :where(body.case-page.page-vbi) .contact-links {
      color: #434343;
      font-size: clamp(29px, 4.32vw, 67px);
      font-weight: 300;
      line-height: 110%;
      letter-spacing: 0;
    }

    :where(body.case-page.page-vbi) .contact-links a {
      display: inline-flex;
      width: fit-content;
      padding-bottom: 3px;
      border-bottom: 1px solid transparent;
      color: #434343 !important;
      font: inherit;
      line-height: 1.05;
      text-decoration: none;
      transition: color 180ms ease, border-color 180ms ease;
    }

    :where(body.case-page.page-vbi) .contact-links a:hover {
      color: #434343 !important;
      border-bottom-color: #2060df;
    }

    @media (max-width: 700px) {:where(body.case-page.page-vbi) .contact-links {
        font-size: clamp(22px, 6.48vw, 31px);
        line-height: 112%;
      }}
/* END migrated inline CSS: base page sections */

:root {
  --bg: #ffffff;
  --ink: #434343;
  --surface: #ececec;
  --soft: var(--surface);
  --muted: var(--ink);
  --inactive: #c3c3c3;
  --line: var(--surface);
  --placeholder: #f5f5f7;
  --contact-bg: #fbfbfd;
  --accent: #2f66df;
  --chip-text: var(--surface);

  --font-text: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: var(--font-text);
  --weight-hairline: 100;
  --weight-thin: 100;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  --text-h1: 46px;
  --leading-h1: 1.1;
  --text-story-title: var(--text-h1);
  --leading-story-title: var(--leading-h1);
  --text-body-copy: 16px;
  --leading-body-copy: 1.5;
  --text-label: 12px;
  --leading-label: 1.3;
  --text-ui: 16px;
  --leading-ui: 1.5;
  --text-action: 20px;
  --text-contact: clamp(29px, 4.32vw, 67px);
  --text-footer-copy: 16px;
  --leading-action: 1.5;
  --text-chip: 13px;
  --leading-chip: 1.5;
  --tracking-chip: 0.02em;
  --text-metric: 76px;
  --leading-metric: 1;
  --text-display: clamp(84px, 15vw, 220px);
  --text-display-desktop: clamp(114px, 15vw, 247px);
  --text-display-hero: clamp(155px, 11.8vw, 191px);
  --text-display-map: clamp(136px, 10.5vw, 172px);
  --leading-display: 0.82;

  --type-nav: var(--text-ui);
  --type-body: var(--text-body-copy);
  --text-case-title: var(--text-h1);
  --leading-case-title: var(--leading-h1);

  --grid-max: 1320px;
  --grid-gap: 20px;
  --page-x: max(60px, calc((100vw - var(--grid-max)) / 2));
  --pad-x: var(--page-x);
  --pad-y: 12px;
  --space-section: 160px;
  --case-section-gap: 150px;
  --space-block: 80px;
  --space-copy: 10px;
  --space-nav: 20px;
  --space-chip: 14px;
  --mobile-control-gap: 20px;
  --space-service-cluster: 16px;
  --display-leading-trim: 10px;
  --display-word-lift: 23px;
  --space-preview: 150px;
  --space-preview-tablet: clamp(128px, 13.05vw, 150px);
  --space-preview-mobile: 88px;
  --preview-copy-max: 753px;
  --preview-visual-size: 516px;
  --space-preview-title-tags: 20px;
  --space-preview-tags-copy: 50px;
  --space-preview-groups: 88px;
  --space-preview-metric-action: 20px;
  --preview-title-optical-y: -8px;
  --strip-card-size: 377px;
  --strip-gap: 30px;
  --strip-caption-max: 753px;
  --strip-caption-top: 20px;
  --strip-action-gap: 20px;
  --strip-arrow-gap: 24px;
  --work-first-preview-top: clamp(76px, 8vw, 132px);
  --space-story-heading: 30px;
  --space-story-insights: 41px;
  --space-story-content: 40px;
  --header-height: 60px;
  --hero-word-size: 176px;
  --hero-form-size: 132px;
  --hero-form-gap: 40px;
  --hero-profile-size: 200px;
  --hero-grid-column: 248px;
  --hero-copy-column: 516px;
  --hero-copy-width: 482px;
  --hero-audience-width: 784px;
  --hero-right-column-x: 804px;
  --hero-profile-top: 66px;
  --hero-content-top: 357px;
  --hero-lockup-top: 600px;
  --hero-left-optical-shift: -9px;
  --hero-identity-gap: 6px;
  --hero-tab-width: 91px;
  --hero-tabs-min-height: 50px;
  --hero-row-height: 24px;
  --hero-chip-offset: 4px;
  --hero-service-group-gap: 6px;
  --hero-form-flip-duration: 740ms;
  --hero-form-spin-flip-duration: 920ms;
  --hero-min-screen: 788px;
  --hero-short-shift-limit: -180px;
  --header-top: 20px;
  --nav-gap-desktop: 20px;
  --hero-figure-size-desktop: var(--hero-form-size);
  --contact-section-gap: 150px;
  --contact-bg-top: 150px;
  --contact-word-size: var(--hero-word-size);
  --contact-link-size: 60px;
  --contact-links-top: 60px;
  --contact-link-gap: 40px;
  --contact-footer-top: 60px;

  --icon-arrow-right: url("../icons/Arrow_right.svg");
  --arrow-width: 36px;
  --arrow-height: 16px;
  --arrow-gap: 14px;
  --arrow-hover-shift: 5px;

  --transition-ui: 180ms ease;
  --transition-action: 260ms ease;
  --transition-reveal: 550ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-display: 700ms cubic-bezier(0.16, 1, 0.3, 1);
  --media-hover-scale: 1.035;
  --preview-media-hover-scale: var(--media-hover-scale);
  --state-disabled-opacity: 0.45;
  --state-muted-opacity: 0.32;
  --cursor-color: var(--ink);
  --cursor-size: 28px;
  --cursor-size-hover: 44px;
  --cursor-opacity: 0.94;
  --cursor-opacity-hover: 0.72;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--ink);
  scroll-behavior: smooth;
}

body {
  min-width: 0;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-body-copy);
  font-weight: var(--weight-light);
  line-height: var(--leading-body-copy);
  letter-spacing: 0;
}

main {
  padding-top: var(--header-height);
}

a {
  color: inherit;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--ink);
}

a:focus-visible,
button:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

img {
  max-width: 100%;
}

.type-h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-thin);
  line-height: var(--leading-h1);
  letter-spacing: 0;
}

.type-body {
  font-family: var(--font-text);
  font-size: var(--text-body-copy);
  font-weight: var(--weight-light);
  line-height: var(--leading-body-copy);
  letter-spacing: 0;
}

.type-body-strong {
  font-family: var(--font-text);
  font-size: var(--text-body-copy);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body-copy);
  letter-spacing: 0;
}

.type-label {
  font-family: var(--font-text);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
  letter-spacing: 0;
  text-transform: uppercase;
}

.type-ui {
  font-family: var(--font-text);
  font-size: var(--text-ui);
  font-weight: var(--weight-light);
  line-height: var(--leading-ui);
  letter-spacing: 0;
}

.type-action {
  font-family: var(--font-text);
  font-size: var(--text-action);
  font-weight: var(--weight-light);
  line-height: var(--leading-action);
  letter-spacing: 0;
}

.type-chip {
  font-family: var(--font-text);
  font-size: var(--text-chip);
  font-weight: var(--weight-regular);
  line-height: var(--leading-chip);
  letter-spacing: var(--tracking-chip);
}

.type-metric {
  font-family: var(--font-display);
  font-size: var(--text-metric);
  font-weight: var(--weight-thin);
  line-height: var(--leading-metric);
  letter-spacing: 0;
}

.type-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-thin);
  line-height: var(--leading-display);
  letter-spacing: 0;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: flex-start;
  width: 100%;
  height: var(--header-height);
  padding: var(--header-top) var(--page-x) 0;
  border: 0;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  font-size: var(--text-ui);
  font-weight: var(--weight-regular);
  line-height: var(--leading-ui);
  backdrop-filter: blur(8px);
}

.site-header::after {
  content: "";
  position: absolute;
  right: var(--page-x);
  bottom: 0;
  left: var(--page-x);
  height: 1px;
  background: var(--ink);
}

.brand-mark {
  grid-column: 1 / 3;
  display: inline-flex;
  align-items: flex-start;
  justify-self: start;
  min-height: calc(var(--text-ui) * var(--leading-ui));
  color: var(--ink);
  font: inherit;
  text-decoration: none;
}

.time {
  grid-column: 3;
  justify-self: center;
  min-height: calc(var(--text-ui) * var(--leading-ui));
  font: inherit;
}

.nav {
  grid-column: 5;
  display: flex;
  align-items: flex-start;
  justify-self: end;
  min-height: calc(var(--text-ui) * var(--leading-ui));
  gap: var(--space-nav);
  font: inherit;
}

.home-page .nav,
.case-page .nav {
  gap: var(--space-nav);
}

.nav a {
  display: inline-flex;
  align-items: flex-start;
  min-height: calc(var(--text-ui) * var(--leading-ui));
  padding: 0;
  border: 0;
  color: var(--ink);
  font: inherit;
  text-decoration: none;
}

.nav a:hover,
.nav a:focus-visible {
  text-decoration: underline;
}

.cursor-dot {
  position: fixed;
  z-index: 1000;
  width: var(--cursor-size);
  height: var(--cursor-size);
  border-radius: 50%;
  background: var(--cursor-color);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  mix-blend-mode: normal;
  transition: width var(--transition-ui), height var(--transition-ui), opacity var(--transition-ui);
}

.cursor-dot.is-visible {
  opacity: var(--cursor-opacity);
}

.cursor-dot.is-visible.is-hovering {
  width: var(--cursor-size-hover);
  height: var(--cursor-size-hover);
  opacity: var(--cursor-opacity-hover);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-chip);
}

.home-page .service-chips,
.home-page .case-tags,
.home-page .case-preview-tags,
.home-page .work-alt .mywork-project .case-tags {
  gap: var(--space-chip);
}

.chips span {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 12px;
  border: 0;
  border-radius: 20px;
  background: var(--ink);
  color: var(--chip-text);
  font-family: var(--font-text);
  font-size: var(--text-chip);
  font-weight: var(--weight-regular);
  line-height: var(--leading-chip);
  letter-spacing: var(--tracking-chip);
  white-space: nowrap;
}


/* Shared project-page hero treatment. */
.case-page .case-figures {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: clamp(22px, 2vw, 36px);
  width: fit-content;
  margin: 0 0 12px;
}

.case-page .case-figure {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--hero-figure-size-desktop);
  height: var(--hero-figure-size-desktop);
  aspect-ratio: 1 / 1;
  overflow: visible;
  border: 0;
  background: transparent;
}

.case-page .case-figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: 50% 50%;
  opacity: 1;
  filter: none;
  transition: transform 1200ms cubic-bezier(0.2, 0.9, 0.16, 1);
}

.case-page .case-figure-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1200ms cubic-bezier(0.2, 0.9, 0.16, 1);
}

.case-page .case-figure-reveal.is-visible {
  clip-path: inset(0 0 0 0);
}

.case-page .case-hero .case-copy > p {
  font-size: clamp(18px, 1.85vw, 36px);
  font-weight: var(--weight-light);
  line-height: 1.4;
}

.case-page .case-hero .chips {
  margin-top: 30px;
}

.action-link {
  display: inline-flex;
  align-items: center;
  gap: var(--arrow-gap);
  width: fit-content;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--transition-ui);
}

.ui-arrow {
  display: block;
  width: var(--arrow-width);
  height: var(--arrow-height);
  flex: 0 0 var(--arrow-width);
  transition: transform var(--transition-action);
}

.action-link > .ui-arrow {
  width: var(--arrow-width);
  height: var(--arrow-height);
  flex-basis: var(--arrow-width);
  transform: none;
}

.journey-step:not(:last-child)::after,
.wireframe-item:not(:last-child)::after,
.lightbox-nav {
  background-image: var(--icon-arrow-right);
}

.action-link:hover .ui-arrow,
.action-link:focus-visible .ui-arrow {
  transform: translateX(var(--arrow-hover-shift));
}

.action-link:disabled,
.action-link[aria-disabled="true"] {
  opacity: var(--state-disabled-opacity);
  pointer-events: none;
}

.placeholder-surface {
  border: 0;
  background: var(--placeholder);
}

/* Shared component: detail-page story section based on the five-column Figma grid. */
.case-page .case-story {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 var(--page-x) var(--case-section-gap);
  border: 0;
}

.case-page .story-label {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
  letter-spacing: 0;
  text-transform: uppercase;
}

.case-page .story-title {
  grid-column: 1 / 4;
  grid-row: 2;
  max-width: none;
  margin: var(--space-story-heading) 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-story-title);
  font-weight: var(--weight-thin);
  line-height: var(--leading-story-title);
  letter-spacing: 0;
}

.case-page .story-intro {
  grid-column: 4 / 6;
  grid-row: 2;
  max-width: none;
  margin: var(--space-story-heading) 0 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-body-copy);
  font-weight: var(--weight-light);
  line-height: var(--leading-body-copy);
  letter-spacing: 0;
}

.case-page .insight-grid {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  margin-top: var(--space-story-content);
  border-top: 1px solid var(--line);
}

.case-page .insight {
  min-width: 0;
  padding: var(--space-story-content) 0 0;
  border: 0;
}

.case-page .insight h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
  letter-spacing: 0;
  text-transform: uppercase;
}

.case-page .insight p {
  margin: var(--space-copy) 0 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-body-copy);
  font-weight: var(--weight-light);
  line-height: var(--leading-body-copy);
  letter-spacing: 0;
}

.case-page .case-story > .journeys-layout,
.case-page .case-story > .wireframes-scroll {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: var(--space-story-content);
}

/* Shared component: paired user journeys with a supporting media surface. */
.case-page .case-story.case-story--journeys {
  grid-template-rows: auto auto auto auto;
}

.case-page .case-story--journeys .story-label {
  grid-column: 1 / 3;
  grid-row: 1;
}

.case-page .case-story--journeys .story-title {
  grid-column: 1 / 4;
  grid-row: 2;
  width: 100%;
  max-width: 784px;
  margin-top: var(--space-story-heading);
}

.case-page .case-story--journeys .journey-title-line {
  display: block;
}

.case-page .case-story--journeys .story-intro {
  grid-column: 1 / 3;
  grid-row: 3;
  width: 100%;
  max-width: 516px;
  margin-top: 24px;
}

.case-page .case-story--journeys > .journeys-layout {
  display: contents;
  margin: 0;
}

.case-page .case-story--journeys .journeys {
  grid-column: 1 / 3;
  grid-row: 4;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 219px));
  column-gap: 50px;
  width: 100%;
  max-width: 488px;
  margin-top: 90px;
  border: 0;
}

.case-page .case-story--journeys .journey-lane,
.case-page .case-story--journeys .journey-lane + .journey-lane {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.case-page .case-story--journeys .journey-lane h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
  letter-spacing: 0;
  text-transform: uppercase;
}

.case-page .case-story--journeys .journey-lane h3 span {
  display: block;
  margin: 0;
  color: var(--ink);
  font-size: var(--text-body-copy);
  font-weight: var(--weight-light);
  line-height: var(--leading-body-copy);
  text-transform: none;
}

.case-page .case-story--journeys .journey-steps {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0 0 0 16px;
  list-style: none;
}

.case-page .case-story--journeys .journey-steps::before {
  content: "";
  position: absolute;
  top: 0.35em;
  bottom: 0.35em;
  left: 0;
  width: 1px;
  background: var(--surface);
}

.case-page .case-story--journeys .journey-step {
  position: relative;
  margin: 0;
  padding-left: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-body-copy);
  font-weight: var(--weight-light);
  line-height: var(--leading-body-copy);
}

.case-page .case-story--journeys .journey-step::before {
  content: none;
  display: none;
}

.case-page .case-story--journeys .journey-step::after {
  content: none;
  display: none;
}

.case-page .case-story--journeys .journeys-visual {
  grid-column: 4 / 6;
  grid-row: 1 / 5;
  align-self: start;
  width: 100%;
  max-width: 516px;
  aspect-ratio: 516 / 480;
  border: 0;
  background: var(--placeholder);
}

/* Shared component: horizontally connected wireframe sequence. */
.case-page .case-story--wireframes > .wireframes-scroll {
  grid-column: 1 / -1;
  grid-row: 3;
  min-width: 0;
  margin-top: var(--space-block);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.case-page .case-story--wireframes > .wireframes-scroll::-webkit-scrollbar {
  display: none;
}

.case-page .case-story--wireframes .wireframes-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  min-width: 0;
  padding: 0;
}

.case-page .case-story--wireframes .wireframe-item {
  position: relative;
  flex: 0 0 146.208px;
  width: 146.208px;
  min-width: 0;
}

.case-page .case-story--wireframes .wireframe-item:not(:last-child) {
  margin-right: 121px;
}

.case-page .case-story--wireframes .wireframe-item h3 {
  width: 100%;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-body-copy);
  font-weight: var(--weight-light);
  line-height: var(--leading-body-copy);
  letter-spacing: 0;
  text-align: center;
}

.case-page .case-story--wireframes .wireframe-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 186.5px;
  right: auto;
  left: calc(100% + 42.5px);
  width: var(--arrow-width);
  height: var(--arrow-height);
  margin: 0;
  background-image: var(--icon-arrow-right);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transform: none;
}

.case-page .case-story--wireframes .wireframe-placeholder {
  display: block;
  width: 146px;
  height: 353px;
  margin: 12px auto 0;
  aspect-ratio: auto;
  border: 1px solid var(--ink);
  border-right-width: 3px;
  border-left-width: 3px;
  border-radius: 16px;
  background: var(--placeholder);
  object-fit: cover;
}

.case-page .case-story--wireframes .wireframe-notes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  width: 100%;
  margin-top: var(--space-block);
  border-top: 1px solid var(--line);
}

.case-page .case-story--wireframes .wireframe-note {
  min-width: 0;
  padding-top: var(--space-story-content);
}

.case-page .case-story--wireframes .wireframe-note h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
  letter-spacing: 0;
}

.case-page .case-story--wireframes .wireframe-note p {
  margin: var(--space-copy) 0 0;
  padding: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-body-copy);
  font-weight: var(--weight-light);
  line-height: var(--leading-body-copy);
  letter-spacing: 0;
}

/* Shared component: audience tabs. */
.tabs {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.tabs--stacked {
  flex-direction: column;
}

.tab {
  appearance: none;
  width: fit-content;
  min-height: 0;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-ui);
  font-weight: var(--weight-light);
  line-height: var(--leading-ui);
  letter-spacing: 0;
  text-align: left;
  opacity: var(--state-muted-opacity);
  transition: color var(--transition-ui), opacity var(--transition-ui), border-color var(--transition-ui);
}

.tab[aria-selected="true"],
.tab.is-active {
  border-bottom-color: var(--ink);
  color: var(--ink);
  font-weight: var(--weight-light);
  opacity: 1;
}

.tab:hover,
.tab:focus-visible {
  color: var(--ink);
  opacity: 1;
}

.tab-panel-reveal {
  animation: tab-panel-reveal var(--transition-reveal);
}

@keyframes tab-panel-reveal {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0.35;
    transform: translateY(8px);
  }

  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: translateY(0);
  }
}

/* Shared component: split case preview. */
.preview-stack {
  display: grid;
  gap: var(--space-preview);
}

.preview-split {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
}

.preview-split__copy {
  grid-column: 1 / 4;
  display: flex;
  width: min(var(--preview-copy-max), 100%);
  min-width: 0;
  flex-direction: column;
  justify-self: start;
}

.preview-split__visual {
  grid-column: 4 / 6;
  width: 100%;
  min-width: 0;
  max-width: var(--preview-visual-size);
  aspect-ratio: 1;
  align-self: start;
  overflow: hidden;
  border: 0;
  background: var(--placeholder);
}

.preview-split__visual--image {
  overflow: hidden;
}

.preview-split__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transform-origin: center;
  transition: transform var(--transition-display);
  will-change: transform;
}

.preview-split:hover .preview-split__image,
.preview-split:focus-within .preview-split__image {
  transform: scale(var(--media-hover-scale));
}

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

  .preview-split:hover .preview-split__image,
  .preview-split:focus-within .preview-split__image {
    transform: none;
  }
}

.preview-split--mirror .preview-split__copy {
  grid-column: 3 / 6;
  justify-self: end;
}

.preview-split--mirror .preview-split__visual {
  grid-column: 1 / 3;
  grid-row: 1;
}

.preview-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-case-title);
  font-weight: var(--weight-thin);
  line-height: var(--leading-case-title);
  letter-spacing: 0;
}

.preview-copy {
  margin: var(--space-preview-tags-copy) 0 0;
  color: var(--ink);
  font: var(--weight-light) var(--text-body-copy) / var(--leading-body-copy) var(--font-text);
}

.preview-metric {
  display: grid;
  gap: 0;
  margin-top: auto;
  padding-top: 0;
}

.preview-metric__value {
  font-family: var(--font-display);
  font-size: var(--text-metric);
  font-weight: var(--weight-thin);
  line-height: var(--leading-metric);
}

.preview-metric__label {
  font: var(--weight-light) var(--text-body-copy) / var(--leading-body-copy) var(--font-text);
}

/* Shared component: horizontal case strip and slider controls. */
.case-strip {
  position: relative;
  overflow: visible;
}

.slider-track {
  display: flex;
  gap: var(--grid-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  touch-action: pan-x;
}

.slider-track::-webkit-scrollbar {
  display: none;
}

.slider-track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.slider-item {
  flex: 0 0 auto;
  min-width: 0;
}

.slider-controls {
  display: flex;
  align-items: center;
  gap: var(--grid-gap);
}

.slider-button {
  appearance: none;
  display: grid;
  place-items: center;
  width: var(--arrow-width);
  height: var(--arrow-height);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.slider-button .ui-arrow {
  transform-origin: center;
}

.slider-button--previous .ui-arrow {
  transform: rotate(180deg);
}

.slider-button--previous:hover .ui-arrow,
.slider-button--previous:focus-visible .ui-arrow {
  transform: translateX(calc(var(--arrow-hover-shift) * -1)) rotate(180deg);
}

.slider-button--next:hover .ui-arrow,
.slider-button--next:focus-visible .ui-arrow {
  transform: translateX(var(--arrow-hover-shift));
}

/* Shared component: scroll-driven display morph. JS only updates these custom properties. */
.display-morph {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.display-morph__layer {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: max-content;
  max-width: none;
  white-space: nowrap;
  will-change: clip-path, color, transform;
  transition: color var(--transition-display);
}

.display-morph__layer--from {
  color: var(--morph-from-color, var(--ink));
  clip-path: var(--morph-from-clip, inset(0 0 0 0));
  transform: translateY(var(--morph-from-y, 0));
}

.display-morph__layer--to {
  color: var(--morph-to-color, var(--surface));
  clip-path: var(--morph-to-clip, inset(100% 0 0 0));
  transform: translateY(var(--morph-to-y, 0));
  pointer-events: none;
}

/* Home page maps its established composition onto the shared grid and tokens. */
.home-page {
  --white: var(--bg);
  --muted: var(--ink);
  --soft: var(--surface);
  --line-soft: var(--surface);
  --line-medium: var(--surface);
  --line-strong: var(--ink);
  --surface-soft: var(--placeholder);
  --surface-hover: var(--surface);
  --header-bg: rgba(255, 255, 255, 0.96);
  --footer: var(--placeholder);
  --instrument: var(--font-text);
  --sans: var(--font-text);
  --serif: var(--font-text);
  --mono: var(--font-text);
  min-width: 320px;
}

.home-page main {
  padding-top: var(--header-height);
}

.home-page .hero,
.home-page .section,
.home-page .contact,
.home-page .case-preview-stack,
.home-page .mywork-caption {
  padding-right: var(--page-x);
  padding-left: var(--page-x);
}

.home-page .hero {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.home-page .audience-tabs-draft {
  gap: 8px;
}

.home-page .audience-tab,
.home-page .audience-tab[aria-selected="true"],
.home-page .audience-tab[aria-selected="false"] {
  color: var(--ink);
  font-size: var(--text-ui);
  font-weight: var(--weight-light);
  line-height: var(--leading-ui);
}

.home-page .audience-tab[aria-selected="false"] {
  opacity: var(--state-muted-opacity);
}

.home-page .audience-tab[aria-selected="true"] {
  border-bottom-color: var(--ink);
  opacity: 1;
}

.home-page .service-chips span,
.home-page .case-tags span {
  min-height: 27px;
  padding: 4px 12px;
  border: 0;
  border-radius: 20px;
  background: var(--ink);
  color: var(--chip-text);
  font-family: var(--font-text);
  font-size: var(--text-chip);
  font-weight: var(--weight-regular);
  line-height: var(--leading-chip);
  letter-spacing: var(--tracking-chip);
}

.home-page .case-preview-stack {
  gap: var(--space-preview);
  padding: 0;
}

.home-page .work-alt > .case-preview-stack:first-of-type {
  padding-top: var(--work-first-preview-top);
}

.home-page .case-preview {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
  min-height: 0;
}

.home-page .case-preview-copy {
  grid-column: 1 / 4;
  width: min(var(--preview-copy-max), 100%);
  justify-self: start;
}

.home-page .case-preview-visual {
  grid-column: 4 / 6;
  width: 100%;
  max-width: var(--preview-visual-size);
  min-height: 0;
  aspect-ratio: 1;
  align-self: start;
  border: 0;
  background: var(--placeholder);
}

.home-page .case-preview--mirror .case-preview-copy {
  grid-column: 3 / 6;
  justify-self: end;
}

.home-page .case-preview--mirror .case-preview-visual {
  grid-column: 1 / 3;
  grid-row: 1;
}

.home-page .case-preview-tags {
  gap: var(--space-chip);
  margin-top: var(--space-preview-title-tags);
}

.home-page .case-preview-text.preview-copy {
  margin-top: var(--space-preview-tags-copy);
}

.home-page .case-preview-index.preview-metric {
  gap: 0;
  margin-top: var(--space-preview-groups);
  padding-top: 0;
}

.home-page .case-preview-link {
  margin-top: var(--space-preview-metric-action);
  font-size: var(--text-body-copy);
  line-height: var(--leading-body-copy);
}

.home-page .case-preview-title,
.home-page .mywork-project h3 {
  font-family: var(--font-display);
  font-size: var(--text-case-title);
  font-weight: var(--weight-thin);
  line-height: var(--leading-case-title);
}

.home-page .case-preview-index span {
  font-family: var(--font-display);
  font-size: var(--text-metric);
  font-weight: var(--weight-thin);
  line-height: var(--leading-metric);
}

.home-page .case-preview-link,
.home-page .mywork-link {
  gap: var(--arrow-gap);
  color: var(--ink) !important;
  font-size: var(--text-action);
  font-weight: var(--weight-light);
  line-height: var(--leading-action);
}

.home-page .case-preview-link-icon,
.home-page .mywork-link-icon {
  width: var(--arrow-width);
  height: var(--arrow-height);
  transform: none;
}

.home-page .case-preview-link-icon img,
.home-page .mywork-link-icon img,
.home-page .mywork-link-arrow {
  width: var(--arrow-width);
  height: var(--arrow-height);
  transform: none !important;
}

.home-page .case-preview-link:hover .case-preview-link-icon,
.home-page .mywork-link:hover .mywork-link-icon {
  transform: translateX(var(--arrow-hover-shift)) !important;
}

.home-page .case-preview-link--disabled,
.home-page .case-preview-link--disabled:hover {
  opacity: var(--state-disabled-opacity);
}

.home-page .case-preview-link--disabled:hover .case-preview-link-icon {
  transform: none !important;
}

.home-page .mywork-controls {
  right: var(--page-x);
  gap: var(--grid-gap);
}

.home-page .mywork-arrow {
  width: var(--arrow-width);
  height: var(--arrow-height);
}

.home-page .mywork-arrow img {
  width: var(--arrow-width);
  height: var(--arrow-height);
}

.home-page .mywork-arrow[data-mywork-prev] img {
  transform: rotate(180deg);
}

.home-page .mywork-arrow[data-mywork-prev]:hover img {
  transform: translateX(calc(var(--arrow-hover-shift) * -1)) rotate(180deg);
}

.home-page .mywork-arrow[data-mywork-next]:hover img {
  transform: translateX(var(--arrow-hover-shift));
}

/* Home page: canonical horizontal preview from the Figma case-strip frame. */
.home-page .work-alt .mywork-showcase {
  position: relative;
  overflow: visible;
}

.home-page .work-alt .mywork-track {
  gap: var(--strip-gap);
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}

.home-page .work-alt .mywork-card,
.home-page .work-alt .mywork-card:nth-child(8n + 2),
.home-page .work-alt .mywork-card:nth-child(8n + 3) {
  flex: 0 0 var(--strip-card-size);
  width: var(--strip-card-size);
  min-height: 0;
  aspect-ratio: 1;
}

.home-page .work-alt .mywork-placeholder {
  background: var(--placeholder);
}

.home-page .work-alt .mywork-controls {
  top: calc((var(--arrow-height) + var(--strip-arrow-gap)) * -1);
  right: 0;
  gap: var(--grid-gap);
}

.home-page .work-alt .mywork-arrow,
.home-page .work-alt .mywork-arrow img {
  width: var(--arrow-width);
  height: var(--arrow-height);
}

.home-page .work-alt .mywork-caption {
  display: block;
  width: min(var(--strip-caption-max), 100%);
  max-width: none;
  padding: var(--strip-caption-top) 0 0;
}

.home-page .work-alt .mywork-project,
.home-page .work-alt .mywork-project > div,
.home-page .work-alt .mywork-caption > div:last-child {
  width: 100%;
  max-width: none;
}

.home-page .work-alt .mywork-project h3 {
  width: 100%;
  max-width: none;
  margin: 0;
  white-space: normal;
}

.home-page .work-alt .mywork-project .case-tags {
  gap: var(--space-chip);
  margin-top: var(--space-preview-title-tags);
}

.home-page .work-alt .mywork-caption > div:last-child {
  margin-top: var(--space-preview-tags-copy);
}

.home-page .work-alt .mywork-description {
  width: 100%;
  max-width: none;
  margin: 0;
}

.home-page .work-alt .mywork-link {
  margin-top: var(--strip-action-gap);
  font-size: var(--text-body-copy);
  line-height: var(--leading-body-copy);
}

@media (min-width: 1181px) {
  .home-page .hero-design-word,
  .home-page .contact-light-word {
    font-size: var(--text-display-desktop);
  }

  .home-page .hero-mark {
    margin-bottom: var(--display-word-lift);
  }

  .home-page .contact {
    padding-top: calc(clamp(56px, 7svh, 84px) - var(--display-leading-trim));
  }
}

.case-page .other-thumb {
  border: 0;
  background: var(--placeholder);
}

@media (min-width: 701px) and (max-width: 1180px) {
  :root {
    --page-x: 32px;
    --case-section-gap: clamp(128px, 13.05vw, 150px);
    --strip-card-size: clamp(320px, 36.82vw, 377px);
    --strip-gap: 20px;
  }

  .home-page .case-preview-stack {
    gap: var(--space-preview-tablet);
  }
}

@media (max-width: 900px) {
  .case-page .case-story {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-page .story-title {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .case-page .story-intro {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: var(--space-copy);
  }

  .case-page .insight-grid,
  .case-page .case-story > .journeys-layout,
  .case-page .case-story > .wireframes-scroll {
    grid-row: 4;
  }

  .case-page .insight-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .case-page .case-story--journeys .story-label,
  .case-page .case-story--journeys .story-title,
  .case-page .case-story--journeys .story-intro {
    grid-column: 1 / -1;
  }

  .case-page .case-story--journeys .journey-title-line {
    display: inline;
  }

  .case-page .case-story--journeys .journey-title-line::before {
    content: " ";
  }

  .case-page .case-story--journeys .story-intro {
    max-width: 760px;
  }

  .case-page .case-story--journeys .journeys {
    grid-column: 1 / -1;
    grid-row: 4;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    max-width: none;
    margin-top: var(--space-block);
  }

  .case-page .case-story--journeys .journeys-visual {
    grid-column: 1 / -1;
    grid-row: 5;
    width: 100%;
    max-width: none;
    margin-top: var(--space-block);
  }

  .case-page .case-story--wireframes .wireframe-notes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .preview-split,
  .preview-split--mirror,
  .home-page .case-preview,
  .home-page .case-preview--mirror {
    grid-template-columns: 1fr;
  }

  .preview-split__copy,
  .preview-split__visual,
  .preview-split--mirror .preview-split__copy,
  .preview-split--mirror .preview-split__visual,
  .home-page .case-preview-copy,
  .home-page .case-preview-visual,
  .home-page .case-preview--mirror .case-preview-copy,
  .home-page .case-preview--mirror .case-preview-visual {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  .preview-metric {
    margin-top: var(--space-block);
  }

  .home-page .case-preview-index.preview-metric {
    margin-top: var(--space-block);
  }

  .home-page .case-preview-link {
    margin-top: var(--space-block);
  }
}

@media (max-width: 700px) {
  :root {
    --page-x: 20px;
    --text-h1: 32px;
    --text-case-title: 32px;
    --text-metric: 64px;
    --text-action: 18px;
    --space-section: 96px;
    --case-section-gap: 96px;
    --space-block: 40px;
    --space-preview-title-tags: 14px;
    --space-preview-tags-copy: 30px;
    --space-preview-groups: 40px;
    --space-preview-metric-action: 40px;
    --work-first-preview-top: 58px;
    --strip-card-size: min(68vw, 320px);
    --strip-gap: 14px;
    --space-chip: 10px;
  }

  .home-page .work-alt .mywork-controls {
    top: calc((var(--arrow-height) + var(--strip-arrow-gap)) * -1);
  }

  .case-page .case-story {
    grid-template-columns: 1fr;
  }

  .case-page .case-figures {
    display: none;
  }

  .case-page .case-hero .case-copy > p {
    font-size: clamp(18px, 5.1vw, 31px);
  }

  .case-page .insight-grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-block);
  }

  .case-page .case-story--journeys .journeys {
    grid-template-columns: 1fr;
    row-gap: var(--space-block);
  }

  .case-page .case-story--journeys .journeys-visual {
    aspect-ratio: 1;
  }

  .case-page .case-story--wireframes .wireframe-notes {
    grid-template-columns: 1fr;
    row-gap: 35px;
    margin-top: 35px;
  }

  .case-page .case-story--wireframes .wireframe-note {
    padding-top: 27px;
  }

  .case-page .insight {
    padding-top: 30px;
  }

  .case-page .insight + .insight {
    padding-top: 0;
  }

  .tabs--stacked {
    flex-direction: row;
    gap: var(--mobile-control-gap);
  }

  .home-page .nav,
  .case-page .nav {
    gap: var(--space-nav);
  }

  .home-page .audience-tabs-draft,
  .case-page .tabs--stacked {
    gap: var(--mobile-control-gap);
  }

  .case-page .chips,
  .home-page .service-chips,
  .home-page .case-tags,
  .home-page .case-preview-tags,
  .home-page .work-alt .mywork-project .case-tags {
    gap: var(--space-chip);
  }

  .preview-stack,
  .home-page .case-preview-stack {
    gap: var(--space-preview-mobile);
  }

  .home-page .hero {
    display: flex;
  }

  .home-page .service-chips span,
  .home-page .case-tags span {
    min-height: 25px;
    font-size: var(--text-chip);
  }

  .home-page .audience-composition {
    margin-bottom: 44px;
    transform: translateY(clamp(30px, calc(4.4svh - 10px), 38px));
  }

  .home-page .hero-services-preview-b .hero-service-with-chips:not(.hero-service-wide) {
    margin-bottom: 0;
  }

  .home-page .hero-services-preview-b .hero-service-with-chips + .hero-service-wide {
    margin-top: var(--space-service-cluster);
  }
}

@media (hover: hover) and (pointer: fine) {
  body,
  a,
  button {
    cursor: none;
  }
}


/* Hide custom cursor only on touch/coarse-pointer devices. */
@media (hover: none), (pointer: coarse) {
  body.home-page.page-branding-home,
  body.case-page.page-vbi,
  body.case-page.page-eqlio,
  body.not-found-page,
  body.map-page {
    cursor: auto;
  }

  body.home-page.page-branding-home .cursor-dot,
  body.case-page.page-vbi .cursor-dot,
  body.case-page.page-eqlio .cursor-dot,
  body.not-found-page .cursor-dot,
  body.map-page .cursor-dot {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Final shared alignment for homepage type-1 previews and active contact sections. */
@media (min-width: 901px) {
  .home-page .case-preview {
    min-height: var(--preview-visual-size);
    align-items: start;
  }

  .home-page .case-preview-copy {
    display: flex;
    height: var(--preview-visual-size);
    min-height: var(--preview-visual-size);
    flex-direction: column;
  }

  .home-page .case-preview-title {
    transform: translateY(var(--preview-title-optical-y));
  }

  .home-page .case-preview-tags {
    margin-top: calc(var(--space-preview-title-tags) + var(--preview-title-optical-y));
  }

  .home-page .case-preview-index.preview-metric {
    margin-top: auto;
  }

  .home-page .case-preview-link {
    gap: 17px;
    margin-top: var(--space-preview-metric-action);
    font-size: var(--text-body-copy);
    line-height: var(--leading-body-copy);
  }
}

@media (max-width: 900px) {
  .home-page .case-preview-link {
    margin-top: var(--space-preview-mobile);
  }
}

/* Shared project header baseline. */
.case-page .case-hero {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  min-height: 0;
  padding-top: var(--case-hero-top);
  padding-bottom: var(--space-section);
}

.case-page .case-intro {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: start;
}

.case-page .case-title-wrap {
  grid-column: 1 / 4;
  max-width: none;
}

.case-page .case-title-wrap h1 {
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-thin);
  line-height: var(--leading-h1);
  letter-spacing: 0;
}

.case-page .case-copy {
  grid-column: 4 / 6;
  max-width: 516px;
  min-width: 0;
  margin-top: 0;
  padding-top: 0;
}

/* Canonical contact stack: large thin links, no competing CONTACTS word. */
.home-page .contact,
.case-page .contact {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(132px, 17svh, 210px) var(--page-x) 36px;
  border-top: 0;
  background: var(--contact-bg);
  overflow: hidden;
}

.home-page .contact-mark,
.case-page .contact-mark {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.home-page .contact-links,
.case-page .contact-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  grid-template-columns: none;
  gap: clamp(24px, 3.2svh, 56px);
  width: 100%;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: clamp(40px, 7.2vw, 120px);
  font-weight: var(--weight-light);
  line-height: 0.92;
  letter-spacing: 0;
  text-align: left;
}

.home-page .contact-links a,
.case-page .contact-links a {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  color: var(--ink) !important;
  font: inherit;
  line-height: 0.92;
  text-align: left;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}


.home-page .contact-links a:hover,
.case-page .contact-links a:hover,
.home-page .contact-links a:focus-visible,
.case-page .contact-links a:focus-visible {
  border: 0;
  color: var(--ink) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

.home-page .contact .footer,
.case-page .contact .footer {
  margin-top: auto;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: clamp(18px, 1.6vw, 32px);
  font-weight: var(--weight-light);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.home-page .contact .footer small,
.case-page .contact .footer small {
  font: inherit;
}

@media (max-width: 900px) {
  .case-page .case-hero {
    grid-template-columns: 1fr;
    padding-top: 48px;
  }

  .case-page .case-intro {
    grid-template-columns: 1fr;
    row-gap: 42px;
  }

  .case-page .case-title-wrap,
  .case-page .case-copy {
    grid-column: 1;
    max-width: none;
  }

  .home-page .contact,
  .case-page .contact {
    min-height: 100svh;
    padding-top: clamp(96px, 14svh, 132px);
    padding-bottom: 28px;
  }

  .home-page .contact-links,
  .case-page .contact-links {
    gap: clamp(18px, 3svh, 32px);
    font-size: clamp(38px, 10.8vw, 72px);
    line-height: 0.94;
  }
}

/* Final hero display/form lockup: DESIGN matches SVG form height on desktop. */
@media (min-width: 1181px) {
  .home-page .hero-design-word {
    font-size: var(--text-display-hero) !important;
  }
}

/* Final shared SVG figure size guard across active pages. */
@media (min-width: 1181px) {
  .home-page .hero-figures {
    --hero-figure-size: var(--hero-figure-size-desktop) !important;
  }
}



/* Figma rebuild: RU branding first screen and shared chips. */
.chips span,
.home-page .service-chips span,
.home-page .case-tags span,
.home-page .case-preview-tags span,
.home-page .work-alt .mywork-project .case-tags span,
.case-page .chips span,
.case-page .case-tags span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 23px !important;
  height: 23px !important;
  padding: 4px 12px 6px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: var(--ink) !important;
  color: var(--chip-text) !important;
  font-family: var(--font-text) !important;
  font-size: var(--text-chip) !important;
  font-weight: var(--weight-regular) !important;
  line-height: 1 !important;
  letter-spacing: var(--tracking-chip) !important;
  white-space: nowrap;
}

.home-page .portrait-card {
  background: transparent !important;
}

.home-page .portrait-card .portrait-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity var(--transition-action);
}

.home-page .portrait-card .portrait-image--base {
  opacity: 1;
}

.home-page .portrait-card .portrait-image--hover {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .home-page .portrait-card:hover .portrait-image--base,
  .home-page .portrait-card:focus-within .portrait-image--base {
    opacity: 0;
  }

  .home-page .portrait-card:hover .portrait-image--hover,
  .home-page .portrait-card:focus-within .portrait-image--hover {
    opacity: 1;
  }
}

@media (min-width: 1181px) {
  .home-page main {
    padding-top: 0 !important;
  }

  .home-page .hero {
    position: relative;
    display: grid !important;
    min-height: max(var(--hero-min-screen), 100svh);
    grid-template-columns: repeat(5, minmax(0, var(--hero-grid-column))) !important;
    column-gap: var(--grid-gap) !important;
    padding: 0 var(--page-x) !important;
    overflow: hidden;
  }

  .home-page .hero-profile {
    position: absolute !important;
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: auto !important;
    justify-self: auto !important;
    top: var(--hero-profile-top) !important;
    left: var(--page-x) !important;
    width: var(--hero-profile-size) !important;
    margin: 0 !important;
    translate: none !important;
    transform: none !important;
  }

  .home-page .hero-profile .portrait-card {
    width: var(--hero-profile-size) !important;
    height: var(--hero-profile-size) !important;
    aspect-ratio: 1 / 1;
  }

  .home-page .hero-identity {
    margin-top: var(--hero-identity-gap) !important;
    color: var(--ink);
    font-family: var(--font-text) !important;
    font-size: var(--text-ui) !important;
    line-height: var(--leading-ui) !important;
    letter-spacing: 0 !important;
  }

  .home-page .hero-person-name {
    font-weight: var(--weight-light) !important;
  }

  .home-page .hero-identity .role {
    position: static !important;
    max-width: none !important;
    margin: 0 !important;
    font-family: var(--font-text) !important;
    font-size: var(--text-ui) !important;
    font-weight: var(--weight-medium) !important;
    line-height: var(--leading-ui) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .home-page .audience-composition {
    position: absolute !important;
    top: var(--hero-content-top) !important;
    left: var(--page-x) !important;
    display: grid !important;
    width: var(--hero-audience-width) !important;
    grid-template-columns: var(--hero-grid-column) var(--hero-copy-column) !important;
    column-gap: var(--grid-gap) !important;
    margin: 0 !important;
    translate: none !important;
    transform: none !important;
  }

  .home-page .audience-tabs-draft {
    width: var(--hero-tab-width) !important;
    min-height: var(--hero-tabs-min-height) !important;
    gap: 0 !important;
    margin: 0 !important;
  }

  .home-page .audience-tabs-draft::before {
    display: none !important;
  }

  .home-page .audience-tab,
  .home-page .audience-tab[aria-selected="true"],
  .home-page .audience-tab[aria-selected="false"] {
    min-height: var(--hero-row-height) !important;
    padding: 0 !important;
    border-bottom-width: 1px !important;
    color: var(--ink) !important;
    font-size: var(--text-ui) !important;
    font-weight: var(--weight-light) !important;
    line-height: var(--leading-ui) !important;
    opacity: 1 !important;
  }

  .home-page .audience-tab[aria-selected="false"] {
    border-bottom-color: transparent !important;
    color: var(--inactive) !important;
  }

  .home-page .audience-tab[aria-selected="true"] {
    border-bottom-color: var(--ink) !important;
    color: var(--ink) !important;
  }

  .home-page .audience-tabs-divider {
    display: none !important;
  }

  .home-page .audience-composition .hero-copy {
    width: var(--hero-copy-width) !important;
    max-width: var(--hero-copy-width) !important;
    margin: 0 !important;
    color: var(--ink);
    font-family: var(--font-text) !important;
    font-size: var(--text-ui) !important;
    font-weight: var(--weight-light) !important;
    line-height: var(--leading-ui) !important;
    letter-spacing: 0 !important;
    text-align: left !important;
  }

  .home-page .hero-services-preview-b {
    position: absolute !important;
    top: var(--hero-content-top) !important;
    left: calc(var(--page-x) + var(--hero-right-column-x)) !important;
    display: block !important;
    width: var(--hero-copy-column) !important;
    max-width: var(--hero-copy-column) !important;
    margin: 0 !important;
    translate: none !important;
    transform: none !important;
  }

  .home-page .hero-services-preview-b,
  .home-page .hero-services-preview-b .hero-service,
  .home-page .hero-services-preview-b .hero-service > span {
    color: var(--ink);
    font-family: var(--font-text) !important;
    font-size: var(--text-ui) !important;
    font-weight: var(--weight-light) !important;
    line-height: var(--leading-ui) !important;
    letter-spacing: 0 !important;
  }

  .home-page .hero-services-preview-b .hero-service {
    min-height: var(--hero-row-height) !important;
    margin: 0 !important;
  }

  .home-page .hero-service-with-chips {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .home-page .hero-service-with-chips .service-chips {
    gap: var(--space-chip) !important;
    margin-top: var(--hero-chip-offset) !important;
  }

  .home-page .hero-services-preview-b .hero-service-wide {
    margin-top: var(--hero-service-group-gap) !important;
  }

  .home-page .hero-mark {
    position: absolute !important;
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: auto !important;
    justify-self: auto !important;
    top: var(--hero-lockup-top) !important;
    left: calc(var(--page-x) + var(--hero-left-optical-shift)) !important;
    width: auto !important;
    max-width: calc(100vw - var(--page-x) * 2) !important;
    height: var(--hero-form-size) !important;
    margin: 0 !important;
    color: var(--ink);
    font-family: var(--font-display) !important;
    font-size: var(--hero-word-size) !important;
    font-weight: var(--weight-hairline) !important;
    line-height: 0.75 !important;
    letter-spacing: 0 !important;
    translate: none !important;
    transform: none !important;
  }

  .home-page .hero-figures {
    --hero-figure-size: var(--hero-form-size) !important;
    position: absolute !important;
    top: var(--hero-lockup-top) !important;
    right: auto !important;
    bottom: auto !important;
    left: calc(var(--page-x) + var(--hero-right-column-x)) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--hero-form-gap) !important;
    margin: 0 !important;
    pointer-events: none;
    opacity: 1 !important;
    translate: none !important;
    transform: none !important;
  }

  .home-page .hero-form-frame,
  .home-page .hero-figure-reveal,
  .home-page .hero-figure-spin {
    width: var(--hero-form-size) !important;
    height: var(--hero-form-size) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    clip-path: none !important;
    overflow: visible !important;
  }

  .home-page .hero-form-frame--flip,
  .home-page .hero-form-frame--spin {
    transform-style: preserve-3d;
    perspective: 700px;
  }

  .home-page .hero-form-frame--flip {
    transition: transform var(--hero-form-flip-duration) cubic-bezier(0.16, 1, 0.3, 1);
  }

  .home-page .hero-form-frame--spin {
    transition: transform var(--hero-form-spin-flip-duration) cubic-bezier(0.16, 1, 0.3, 1);
  }

  .home-page .hero-form-frame--flip.is-flipping {
    transform: rotateY(90deg) !important;
  }

  .home-page .hero-form-frame--spin.is-flipping-reverse {
    transform: rotateY(-90deg) !important;
  }

  .home-page .hero-form,
  .home-page .hero-figure {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    opacity: 1 !important;
    filter: none !important;
    transform-origin: 50% 50%;
  }

  .home-page .hero-figure-two {
    transform: none !important;
    transition: none !important;
  }

  .home-page .contact-mark,
  .case-page .contact-mark {
    font-size: var(--hero-word-size) !important;
    line-height: 0.75 !important;
  }
}

@media (min-width: 1181px) and (max-height: 799px) {
  .home-page .hero {
    --hero-short-shift: clamp(var(--hero-short-shift-limit), calc(100svh - var(--hero-min-screen)), 0px);
    min-height: var(--hero-min-screen);
    margin-bottom: var(--hero-short-shift);
  }

  .home-page .hero-profile,
  .home-page .audience-composition,
  .home-page .hero-services-preview-b,
  .home-page .hero-figures,
  .home-page .hero-mark {
    translate: 0 var(--hero-short-shift) !important;
  }
}

@media (max-width: 1180px) {
  .home-page .hero-form-frame,
  .home-page .hero-figure-reveal,
  .home-page .hero-figure-spin {
    border: 0 !important;
    background: transparent !important;
  }

  .home-page .hero-form,
  .home-page .hero-figure {
    opacity: 1 !important;
    filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .portrait-card .portrait-image {
    transition: none !important;
  }
}

/* Final adaptive behavior for mirrored case preview placeholders. */
@media (min-width: 1281px) {
  .home-page .case-preview {
    --preview-visual-fluid-size: min(
      var(--preview-visual-size),
      calc(((100vw - (var(--page-x) * 2) - (var(--grid-gap) * 4)) / 5 * 2) + var(--grid-gap))
    );
    min-height: var(--preview-visual-fluid-size) !important;
  }

  .home-page .case-preview-copy {
    height: var(--preview-visual-fluid-size) !important;
    min-height: var(--preview-visual-fluid-size) !important;
  }

  .home-page .case-preview-visual {
    width: var(--preview-visual-fluid-size) !important;
    max-width: var(--preview-visual-fluid-size) !important;
    height: var(--preview-visual-fluid-size) !important;
    aspect-ratio: 1 / 1 !important;
  }
}

@media (min-width: 1141px) and (max-width: 1280px) {
  .home-page .case-preview,
  .home-page .case-preview--mirror {
    --preview-adaptive-square: calc((100vw - (var(--page-x) * 2) - var(--grid-gap)) / 2);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: var(--grid-gap) !important;
    min-height: var(--preview-adaptive-square) !important;
    align-items: start !important;
  }

  .home-page .case-preview-copy,
  .home-page .case-preview--mirror .case-preview-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    height: var(--preview-adaptive-square) !important;
    min-height: var(--preview-adaptive-square) !important;
    align-self: start !important;
    justify-self: stretch !important;
  }

  .home-page .case-preview-visual,
  .home-page .case-preview--mirror .case-preview-visual {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: var(--preview-adaptive-square) !important;
    max-width: var(--preview-adaptive-square) !important;
    height: var(--preview-adaptive-square) !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    align-self: start !important;
    justify-self: stretch !important;
  }

  .home-page .case-preview--mirror .case-preview-visual {
    grid-column: 1 !important;
  }

  .home-page .case-preview--mirror .case-preview-copy {
    grid-column: 2 !important;
  }

  .home-page .case-preview-index.preview-metric {
    margin-top: auto !important;
  }

  .home-page .case-preview-link {
    margin-top: var(--space-preview-metric-action) !important;
  }
}

@media (max-width: 1140px) {
  .home-page .case-preview,
  .home-page .case-preview--mirror {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: max(var(--page-x), var(--space-preview-tags-copy)) !important;
    min-height: auto !important;
    align-items: start !important;
  }

  .home-page .case-preview-copy,
  .home-page .case-preview-visual,
  .home-page .case-preview--mirror .case-preview-copy,
  .home-page .case-preview--mirror .case-preview-visual {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
    justify-self: stretch !important;
  }

  .home-page .case-preview-visual,
  .home-page .case-preview--mirror .case-preview-visual {
    aspect-ratio: 1 / 1 !important;
  }

  .home-page .case-preview-index.preview-metric {
    margin-top: var(--space-preview-tags-copy) !important;
  }

  .home-page .case-preview-link {
    gap: var(--arrow-gap) !important;
    margin-top: var(--space-preview-tags-copy) !important;
    color: var(--muted) !important;
    font-family: var(--font-text) !important;
    font-size: var(--text-body-copy) !important;
    font-weight: var(--weight-light) !important;
    line-height: var(--leading-body-copy) !important;
    letter-spacing: 0 !important;
  }
}

/* Canonical footer/contact component across active pages. */
.home-page .contact,
.case-page .contact {
  display: flex !important;
  min-height: 100svh;
  flex-direction: column;
  align-items: flex-start;
  margin-top: var(--contact-section-gap) !important;
  padding: var(--contact-bg-top) var(--page-x) 36px !important;
  border-top: 0 !important;
  background: var(--contact-bg) !important;
  overflow: hidden;
}

.home-page .contact-mark,
.case-page .contact-mark {
  position: relative !important;
  display: block !important;
  align-self: flex-start !important;
  width: max-content !important;
  max-width: 100%;
  height: calc(var(--contact-word-size) * 0.75) !important;
  min-height: 0 !important;
  margin: 0 -0.16em 0 0 !important;
  padding: 0 0.16em 0 0 !important;
  overflow: hidden !important;
  clip: auto !important;
  clip-path: none !important;
  color: var(--ink);
  font-family: var(--font-display) !important;
  font-size: var(--contact-word-size) !important;
  font-weight: var(--weight-hairline) !important;
  line-height: 0.75 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
  white-space: nowrap;
  isolation: isolate;
}

.home-page .contact-morph-word::after,
.case-page .contact-morph-word::after {
  content: "CONTACTS\00a0";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  white-space: nowrap;
}

.home-page .contact-morph-layer,
.case-page .contact-morph-layer {
  position: absolute !important;
  top: 0;
  left: 0;
  display: block;
  width: max-content;
  line-height: inherit;
  white-space: nowrap;
  will-change: clip-path, color;
}

.home-page .contact-morph-from,
.case-page .contact-morph-from {
  color: var(--contact-from-layer-color, var(--ink)) !important;
  clip-path: var(--contact-from-clip, inset(0 0 0% 0));
}

.home-page .contact-morph-to,
.case-page .contact-morph-to {
  color: var(--contact-to-layer-color, var(--surface-soft, var(--placeholder))) !important;
  clip-path: var(--contact-to-clip, inset(100% 0 0 0));
  pointer-events: none;
}

.home-page .contact-links,
.case-page .contact-links {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  grid-template-columns: none !important;
  width: auto !important;
  max-width: 100%;
  margin: var(--contact-links-top) 0 0 !important;
  gap: var(--contact-link-gap) !important;
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-size: var(--contact-link-size) !important;
  font-weight: var(--weight-hairline) !important;
  line-height: 0.82 !important;
  letter-spacing: 0 !important;
  text-align: left;
}

.home-page .contact-links a,
.case-page .contact-links a {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  color: var(--ink) !important;
  font: inherit !important;
  line-height: 0.82 !important;
  text-align: left;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}


.home-page .contact-links a:hover,
.case-page .contact-links a:hover,
.home-page .contact-links a:focus-visible,
.case-page .contact-links a:focus-visible {
  border: 0 !important;
  color: var(--ink) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

.home-page .contact .footer,
.case-page .contact .footer {
  margin-top: var(--contact-footer-top) !important;
  color: var(--ink);
  font-family: var(--font-text) !important;
  font-size: var(--text-footer-copy, 17px) !important;
  font-weight: var(--weight-light) !important;
  line-height: var(--leading-ui) !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}

.home-page .contact .footer small,
.case-page .contact .footer small {
  font: inherit !important;
}

@media (max-width: 1180px) {
  .home-page .contact,
  .case-page .contact {
    --contact-word-size: clamp(96px, 16vw, var(--hero-word-size));
    --contact-link-size: clamp(35px, 5vw, 60px);
    --contact-link-gap: clamp(24px, 3.4vw, 40px);
    --contact-links-top: clamp(42px, 5.1vw, 60px);
    --contact-footer-top: clamp(50px, 5.1vw, 60px);
    margin-top: clamp(96px, 12vw, var(--contact-section-gap)) !important;
    padding-top: clamp(96px, 12vw, var(--contact-bg-top)) !important;
  }
}

@media (max-width: 700px) {
  .home-page .contact,
  .case-page .contact {
    --contact-word-size: clamp(54px, 18vw, 96px);
    --contact-link-size: calc(var(--contact-word-size) / 2);
    --contact-link-gap: clamp(18px, 5vw, 32px);
    --contact-links-top: 42px;
    --contact-footer-top: 50px;
    min-height: auto;
    margin-top: 96px !important;
    padding-top: 96px !important;
    padding-bottom: 24px !important;
  }

  .home-page .contact-links,
  .case-page .contact-links {
    margin-top: 42px !important;
    gap: clamp(18px, 3svh, 32px) !important;
    font-size: var(--contact-link-size) !important;
    line-height: 0.94 !important;
  }

  .home-page .contact .footer,
  .case-page .contact .footer {
    margin-top: 50px !important;
    font-size: 13px !important;
  }
}

/* Shared animated forms component. */
.brand-forms {
  display: flex;
  align-items: flex-start;
  gap: var(--hero-form-gap);
  width: fit-content;
  pointer-events: none;
}

.brand-form-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--hero-form-size);
  height: var(--hero-form-size);
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  clip-path: none;
  transform-style: preserve-3d;
  perspective: 700px;
}

.brand-forms .brand-form-frame--flip {
  transition: transform var(--hero-form-flip-duration) cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-forms .brand-form-frame--spin {
  transition: transform var(--hero-form-spin-flip-duration) cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-forms .brand-form-frame--flip.is-flipping {
  transform: rotateY(90deg) !important;
}

.brand-forms .brand-form-frame--spin.is-flipping-reverse {
  transform: rotateY(-90deg) !important;
}

.brand-form {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: 50% 50%;
  opacity: 1;
  filter: none;
  transform: none;
  transform-origin: 50% 50%;
  transition: none;
}

.home-page .hero-forms.brand-forms,
.case-page .case-forms.brand-forms {
  gap: var(--hero-form-gap) !important;
}

.home-page .hero-forms .brand-form-frame,
.case-page .case-forms .brand-form-frame {
  width: var(--hero-form-size) !important;
  height: var(--hero-form-size) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
  clip-path: none !important;
}

.home-page .hero-forms .brand-form,
.case-page .case-forms .brand-form {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none;
  transition: none !important;
}

.case-page .case-forms {
  grid-column: 1 / -1;
  align-items: flex-start;
  margin: 0 0 12px;
}

@media (max-width: 700px) {
  .case-page .case-forms {
    display: none !important;
  }
}
/* BEGIN migrated inline CSS: page override sections */
/* Migrated from ru/branding/eqlio/index.html. */
body.case-page.page-eqlio .case-hero,
    body.case-page.page-eqlio .case-story,
    body.case-page.page-eqlio .gallery,
    body.case-page.page-eqlio .other,
    body.case-page.page-eqlio .closing,
    body.case-page.page-eqlio .contact {
      width: 100%;
      max-width: none;
      margin: 0;
      padding-right: var(--page-x);
      padding-left: var(--page-x);
    }

    body.case-page.page-eqlio .case-hero {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      column-gap: var(--grid-gap);
      min-height: 0;
      padding-top: var(--case-hero-top);
      padding-bottom: var(--space-section);
    }

    body.case-page.page-eqlio .case-intro {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      column-gap: var(--grid-gap);
      align-items: start;
    }

    body.case-page.page-eqlio .case-title-wrap {
      grid-column: 1 / 4;
      max-width: 644px;
    }

    body.case-page.page-eqlio .case-title-wrap h1 {
      max-width: none;
      margin: 0;
      color: var(--ink);
      font-family: var(--font-display);
      font-size: var(--text-h1);
      font-weight: var(--weight-thin);
      line-height: var(--leading-h1);
      letter-spacing: 0;
    }

    body.case-page.page-eqlio .case-copy {
      grid-column: 4 / 6;
      max-width: 516px;
      min-width: 0;
    }

    body.case-page.page-eqlio .case-copy p,
    body.case-page.page-eqlio .case-overview-detail p,
    body.case-page.page-eqlio .case-fact dd,
    body.case-page.page-eqlio .story-intro,
    body.case-page.page-eqlio .insight p,
    body.case-page.page-eqlio .wireframe-notes p {
      margin: 0;
      color: var(--ink);
      font-family: var(--font-text);
      font-size: var(--text-body-copy);
      font-weight: var(--weight-light);
      line-height: var(--leading-body-copy);
      letter-spacing: 0;
    }

    body.case-page.page-eqlio .chips {
      margin-top: 30px;
    }

    body.case-page.page-eqlio .case-overview-details {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      column-gap: var(--grid-gap);
      margin-top: var(--case-hero-overview-gap);
      padding: 37px 0 39px;
      border-top: 1px solid var(--line);
    }

    body.case-page.page-eqlio .case-overview-detail {
      min-width: 0;
      padding: 0;
      border: 0;
    }

    body.case-page.page-eqlio .case-overview-detail:first-child {
      grid-column: 1 / 4;
      max-width: 644px;
    }

    body.case-page.page-eqlio .case-overview-detail:last-child {
      grid-column: 4 / 6;
      max-width: 516px;
    }

    body.case-page.page-eqlio .case-overview-detail h2,
    body.case-page.page-eqlio .case-fact dt,
    body.case-page.page-eqlio .story-label,
    body.case-page.page-eqlio .insight h3,
    body.case-page.page-eqlio .wireframe-item h3 {
      margin: 0;
      color: var(--ink);
      font-family: var(--font-text);
      font-size: var(--text-label);
      font-weight: var(--weight-medium);
      line-height: var(--leading-label);
      letter-spacing: 0;
    }

    body.case-page.page-eqlio .case-overview-detail h2,
    body.case-page.page-eqlio .case-fact dt,
    body.case-page.page-eqlio .story-label {
      text-transform: uppercase;
    }

    body.case-page.page-eqlio .case-overview-detail p {
      margin-top: var(--space-copy);
    }

    body.case-page.page-eqlio .case-facts {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      column-gap: var(--grid-gap);
      width: 100%;
      margin: 0;
      padding: 30px 0 0;
      border-top: 1px solid var(--line);
    }

    body.case-page.page-eqlio .case-fact {
      min-width: 0;
      margin: 0;
      padding: 0;
      border: 0;
    }

    body.case-page.page-eqlio .case-fact dd {
      margin-top: var(--space-copy);
    }

    body.case-page.page-eqlio .case-story {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      column-gap: var(--grid-gap);
      padding-top: var(--space-section);
      padding-bottom: var(--space-section);
      border-top: 1px solid var(--line);
    }

    body.case-page.page-eqlio .story-label {
      grid-column: 1 / -1;
      text-transform: uppercase;
    }

    body.case-page.page-eqlio .story-title {
      grid-column: 1 / 4;
      max-width: 784px;
      margin: var(--text-label) 0 0;
      color: var(--ink);
      font-family: var(--font-display);
      font-size: var(--text-story-title);
      font-weight: var(--weight-thin);
      line-height: var(--leading-story-title);
      letter-spacing: 0;
    }

    body.case-page.page-eqlio .story-intro {
      grid-column: 1 / 4;
      max-width: 784px;
      margin-top: var(--space-copy);
    }

    body.case-page.page-eqlio .story-intro a {
      text-decoration-line: underline;
    }

    body.case-page.page-eqlio .insight-grid {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: var(--grid-gap);
      margin-top: var(--space-block);
      border-top: 1px solid var(--line);
    }

    body.case-page.page-eqlio .insight {
      min-width: 0;
      padding: 30px 20px 0 0;
      border: 0;
    }

    body.case-page.page-eqlio .insight p {
      margin-top: var(--space-copy);
    }

    body.case-page.page-eqlio .journeys-layout {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--grid-gap);
      align-items: start;
      margin-top: var(--space-block);
    }

    body.case-page.page-eqlio .journeys {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--grid-gap);
      min-width: 0;
      border-top: 1px solid var(--line);
    }

    body.case-page.page-eqlio .journey-lane {
      min-width: 0;
      padding: 30px 20px 0 0;
    }

    body.case-page.page-eqlio .journey-lane + .journey-lane {
      padding-left: 20px;
      border-left: 1px solid var(--line);
    }

    body.case-page.page-eqlio .journey-lane h3 {
      margin: 0;
      color: var(--ink);
      font-family: var(--font-text);
      font-size: var(--text-body-copy);
      font-weight: var(--weight-medium);
      line-height: var(--leading-body-copy);
      letter-spacing: 0;
    }

    body.case-page.page-eqlio .journey-lane h3 span {
      display: block;
      color: var(--ink);
      font-weight: var(--weight-light);
    }

    body.case-page.page-eqlio .journey-steps {
      display: grid;
      gap: 10px;
      margin: 54px 0 0;
      padding: 0;
      list-style: none;
    }

    body.case-page.page-eqlio .journey-step {
      margin: 0;
      color: var(--ink);
      font-size: var(--text-body-copy);
      font-weight: var(--weight-light);
      line-height: var(--leading-body-copy);
    }

    body.case-page.page-eqlio .journey-step:not(:last-child)::after {
      content: "";
      display: block;
      width: var(--arrow-width);
      height: var(--arrow-height);
      margin: 10px 0;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      transform: rotate(90deg);
      transform-origin: center;
    }

    body.case-page.page-eqlio .journeys-visual {
      width: 100%;
      aspect-ratio: 1;
      border: 0;
      background: var(--placeholder);
    }

    body.case-page.page-eqlio .wireframes-scroll {
      grid-column: 1 / -1;
      min-width: 0;
      margin-top: var(--space-block);
      overflow: visible;
    }

    body.case-page.page-eqlio .wireframes-track {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: var(--grid-gap);
      min-width: 0;
      padding: 0;
    }

    body.case-page.page-eqlio .wireframe-item {
      position: relative;
      min-width: 0;
    }

    body.case-page.page-eqlio .wireframe-item:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 0;
      right: calc((var(--grid-gap) + var(--arrow-width)) / -2);
      z-index: 1;
      width: var(--arrow-width);
      height: var(--arrow-height);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }

    body.case-page.page-eqlio .wireframe-placeholder {
      width: 100%;
      margin-top: 14px;
      aspect-ratio: 9 / 16;
      border: 0;
      border-radius: 0;
      background: var(--placeholder);
    }

    body.case-page.page-eqlio .wireframe-notes {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: var(--grid-gap);
      margin-top: 60px;
      border-top: 1px solid var(--line);
    }

    body.case-page.page-eqlio .wireframe-notes p {
      padding-top: 30px;
    }

    body.case-page.page-eqlio .gallery {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: var(--grid-gap);
      padding-top: 0;
      padding-bottom: var(--space-section);
    }

    body.case-page.page-eqlio .gallery .mock-full,
    body.case-page.page-eqlio .gallery .mock-row {
      grid-column: 1 / -1;
      margin: 0;
    }

    body.case-page.page-eqlio .gallery .mock-full {
      width: 100%;
      aspect-ratio: 1320 / 620;
      border: 0;
      background: var(--placeholder);
    }

    body.case-page.page-eqlio .gallery .mock-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--grid-gap);
    }

    body.case-page.page-eqlio .gallery .mock-square {
      width: 100%;
      aspect-ratio: 1;
      border: 0;
      background: var(--placeholder);
    }

    body.case-page.page-eqlio .other {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      column-gap: var(--grid-gap);
      padding-top: var(--space-section);
      padding-bottom: var(--space-section);
      border-top: 1px solid var(--line);
    }

    body.case-page.page-eqlio .other-title {
      grid-column: 1 / -1;
      margin: 0;
      color: var(--ink);
      font-family: var(--font-display);
      font-size: var(--text-story-title);
      font-weight: var(--weight-thin);
      line-height: var(--leading-story-title);
      letter-spacing: 0;
    }

    body.case-page.page-eqlio .other-grid {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--grid-gap);
      margin-top: var(--space-block);
    }

    body.case-page.page-eqlio .other-card {
      min-width: 0;
    }

    body.case-page.page-eqlio .other-thumb {
      width: 100%;
      aspect-ratio: 1;
      border: 0;
      background: var(--placeholder);
    }

    body.case-page.page-eqlio .project-link {
      margin-top: 24px;
      font-family: var(--font-text);
      font-size: var(--text-body-copy);
      font-weight: var(--weight-light);
      line-height: var(--leading-body-copy);
    }

    body.case-page.page-eqlio .closing {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      column-gap: var(--grid-gap);
      padding-top: var(--space-section);
      padding-bottom: var(--space-section);
      border-top: 1px solid var(--line);
    }

    body.case-page.page-eqlio .big-cta {
      grid-column: 1 / -1;
      font-family: var(--font-display);
      font-size: var(--text-story-title);
      font-weight: var(--weight-thin);
      line-height: var(--leading-story-title);
    }

    body.case-page.page-eqlio .contact {
      position: relative;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      column-gap: var(--grid-gap);
      min-height: 0;
      padding-top: var(--space-section);
      padding-bottom: 40px;
      border-top: 1px solid var(--line);
      background: var(--bg);
    }

    body.case-page.page-eqlio .contact-mark {
      grid-column: 1 / -1;
      position: relative;
      min-height: 0;
      margin: 0;
      color: var(--ink);
      font-family: var(--font-display);
      font-size: clamp(84px, 15vw, 220px);
      font-weight: var(--weight-thin);
      line-height: 0.82;
      letter-spacing: 0;
    }

    body.case-page.page-eqlio .contact-morph-word {
      --contact-from-clip: inset(0 0 0% 0);
      --contact-to-clip: inset(100% 0 0 0);
      --contact-from-layer-color: var(--ink);
      --contact-to-layer-color: var(--surface);
    }

    body.case-page.page-eqlio .contact-morph-layer {
      position: static;
      display: block;
    }

    body.case-page.page-eqlio .contact-morph-from {
      color: var(--contact-from-layer-color);
      clip-path: var(--contact-from-clip);
    }

    body.case-page.page-eqlio .contact-morph-to {
      position: absolute;
      inset: 0 auto auto 0;
      color: var(--contact-to-layer-color);
      clip-path: var(--contact-to-clip);
    }

    body.case-page.page-eqlio .contact-links {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px var(--grid-gap);
      margin-top: var(--space-block);
      color: var(--ink);
      font-family: var(--font-text);
      font-size: var(--text-body-copy);
      font-weight: var(--weight-light);
      line-height: var(--leading-body-copy);
    }

    body.case-page.page-eqlio .contact-links a {
      display: inline-flex;
      width: fit-content;
      padding: 0;
      border: 0;
      color: var(--ink) !important;
      text-decoration: none;
    }

    body.case-page.page-eqlio .contact-links a:hover {
      border: 0;
      color: var(--ink) !important;
      text-decoration: underline;
      text-underline-offset: 0.16em;
    }

    body.case-page.page-eqlio .contact .footer {
      grid-column: 1 / -1;
      margin-top: var(--space-block);
    }

    body.case-page.page-eqlio .contact .footer small {
      color: var(--ink);
      font-size: var(--text-label);
      font-weight: var(--weight-regular);
      line-height: var(--leading-label);
    }

    body.case-page.page-eqlio .case-lightbox[hidden] {
      display: none !important;
    }

    body.case-page.page-eqlio .case-lightbox {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr) 64px;
      align-items: center;
      padding: 24px;
      background: rgba(255, 255, 255, 0.97);
    }

    body.case-page.page-eqlio .lightbox-stage {
      display: grid;
      place-items: center;
      min-width: 0;
      margin: 0;
    }

    body.case-page.page-eqlio .lightbox-image {
      max-width: 100%;
      max-height: calc(100vh - 96px);
      object-fit: contain;
    }

    body.case-page.page-eqlio .lightbox-close,
    body.case-page.page-eqlio .lightbox-nav {
      border: 0;
      background: transparent;
      color: var(--ink);
      font: inherit;
      cursor: pointer;
    }

    body.case-page.page-eqlio .lightbox-close {
      position: absolute;
      top: 18px;
      right: 24px;
      font-size: 34px;
    }

    body.case-page.page-eqlio .lightbox-nav {
      width: 100%;
      height: 64px;
      font-size: 0;
      background-repeat: no-repeat;
      background-position: center;
      background-size: var(--arrow-width) var(--arrow-height);
    }

    body.case-page.page-eqlio .lightbox-prev {
      transform: rotate(180deg);
    }

    body.case-page.page-eqlio .lightbox-count {
      position: absolute;
      right: 24px;
      bottom: 18px;
      margin: 0;
      color: var(--ink);
      font-size: var(--text-label);
    }

    @media (min-width: 901px) and (max-width: 1180px) {body.case-page.page-eqlio {
        --page-x: 32px;
        --space-section: 128px;
        --space-block: 72px;
      }

      body.case-page.page-eqlio .case-title-wrap {
        max-width: none;
      }}

    @media (max-width: 900px) {body.case-page.page-eqlio {
        --page-x: 24px;
        --space-section: 112px;
        --space-block: 64px;
      }

      body.case-page.page-eqlio .site-header {
        grid-template-columns: auto 1fr auto;
      }

      body.case-page.page-eqlio .brand-mark {
        grid-column: 1;
      }

      body.case-page.page-eqlio .time {
        display: none !important;
      }

      body.case-page.page-eqlio .nav {
        grid-column: 3;
      }

      body.case-page.page-eqlio .case-hero,
      body.case-page.page-eqlio .case-story,
      body.case-page.page-eqlio .gallery,
      body.case-page.page-eqlio .other,
      body.case-page.page-eqlio .closing,
      body.case-page.page-eqlio .contact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      body.case-page.page-eqlio .case-hero {
        padding-top: var(--case-hero-top);
      }

      body.case-page.page-eqlio .case-intro,
      body.case-page.page-eqlio .case-overview-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      body.case-page.page-eqlio .case-title-wrap,
      body.case-page.page-eqlio .case-copy {
        grid-column: 1 / -1;
        max-width: 700px;
      }

      body.case-page.page-eqlio .case-copy {
        margin-top: 48px;
      }

      body.case-page.page-eqlio .case-overview-detail:first-child {
        grid-column: 1;
        max-width: none;
      }

      body.case-page.page-eqlio .case-overview-detail:last-child {
        grid-column: 2;
        max-width: none;
      }

      body.case-page.page-eqlio .case-facts {
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }

      body.case-page.page-eqlio .story-title,
      body.case-page.page-eqlio .story-intro {
        grid-column: 1 / -1;
        max-width: 760px;
      }

      body.case-page.page-eqlio .journeys-layout {
        grid-template-columns: 1fr;
        row-gap: var(--grid-gap);
      }

      body.case-page.page-eqlio .wireframes-scroll {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
      }

      body.case-page.page-eqlio .wireframes-track {
        grid-template-columns: repeat(6, 180px);
        width: max-content;
        min-width: 100%;
        padding-bottom: 14px;
      }

      body.case-page.page-eqlio .other-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }}

    @media (max-width: 700px) {body.case-page.page-eqlio {
        --page-x: 20px;
        --space-section: 96px;
        --space-block: 52px;
        --text-h1: 36px;
        --text-story-title: 32px;
        --text-body-copy: 16px;
        --text-label: 12px;
        --text-chip: 12px;
      }

      body.case-page.page-eqlio .site-header {
        height: var(--header-height);
      }

      body.case-page.page-eqlio .nav {
        gap: 24px;
      }

      body.case-page.page-eqlio .case-hero,
      body.case-page.page-eqlio .case-story,
      body.case-page.page-eqlio .gallery,
      body.case-page.page-eqlio .other,
      body.case-page.page-eqlio .closing,
      body.case-page.page-eqlio .contact,
      body.case-page.page-eqlio .case-intro,
      body.case-page.page-eqlio .case-overview-details,
      body.case-page.page-eqlio .case-facts {
        grid-template-columns: 1fr;
      }

      body.case-page.page-eqlio .case-hero {
        padding-top: var(--case-hero-top);
      }

      body.case-page.page-eqlio .case-title-wrap,
      body.case-page.page-eqlio .case-copy {
        grid-column: 1;
      }

      body.case-page.page-eqlio .case-copy {
        margin-top: 40px;
      }

      body.case-page.page-eqlio .chips {
        gap: 10px;
        margin-top: 24px;
      }

      body.case-page.page-eqlio .chips span {
        min-height: 26px;
        padding: 4px 10px;
      }

      body.case-page.page-eqlio .case-overview-details {
        margin-top: var(--case-hero-overview-gap);
        padding: 30px 0 0;
      }

      body.case-page.page-eqlio .case-overview-detail:first-child,
      body.case-page.page-eqlio .case-overview-detail:last-child {
        grid-column: 1;
      }

      body.case-page.page-eqlio .case-overview-detail + .case-overview-detail {
        margin-top: 40px;
      }

      body.case-page.page-eqlio .case-facts {
        gap: 30px;
        margin-top: 40px;
        padding-top: 30px;
      }

      body.case-page.page-eqlio .insight-grid,
      body.case-page.page-eqlio .journeys,
      body.case-page.page-eqlio .wireframe-notes,
      body.case-page.page-eqlio .gallery .mock-row,
      body.case-page.page-eqlio .other-grid,
      body.case-page.page-eqlio .contact-links {
        grid-template-columns: 1fr;
      }

      body.case-page.page-eqlio .insight-grid {
        row-gap: 40px;
      }

      body.case-page.page-eqlio .insight {
        padding: 30px 0 0;
      }

      body.case-page.page-eqlio .insight + .insight {
        padding-top: 0;
      }

      body.case-page.page-eqlio .journey-lane {
        padding: 30px 0 0;
      }

      body.case-page.page-eqlio .journey-lane + .journey-lane {
        margin-top: 52px;
        padding: 30px 0 0;
        border-top: 1px solid var(--line);
        border-left: 0;
      }

      body.case-page.page-eqlio .journey-steps {
        margin-top: 40px;
      }

      body.case-page.page-eqlio .wireframes-track {
        grid-template-columns: repeat(6, 156px);
      }

      body.case-page.page-eqlio .wireframe-notes {
        row-gap: 30px;
      }

      body.case-page.page-eqlio .wireframe-notes p + p {
        padding-top: 0;
      }

      body.case-page.page-eqlio .gallery {
        padding-bottom: var(--space-section);
      }

      body.case-page.page-eqlio .gallery .mock-full {
        aspect-ratio: 4 / 3;
      }

      body.case-page.page-eqlio .other-grid {
        row-gap: 52px;
      }

      body.case-page.page-eqlio .big-cta {
        gap: 16px;
      }

      body.case-page.page-eqlio .contact-mark {
        min-width: 0;
        max-width: 100%;
        font-size: clamp(54px, 18vw, 90px);
        line-height: 0.86;
      }

      body.case-page.page-eqlio .contact-links {
        row-gap: 10px;
      }

      body.case-page.page-eqlio .case-lightbox {
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        padding: 16px 8px;
      }}

    @media (max-width: 420px) {body.case-page.page-eqlio {
        --page-x: 16px;
        --text-h1: 32px;
        --text-story-title: 29px;
      }

      body.case-page.page-eqlio .site-header,
      body.case-page.page-eqlio .nav {
        font-size: 15px;
      }

      body.case-page.page-eqlio .nav {
        gap: 18px;
      }}


    /* Final shared project-page baseline: header rhythm and contact stack. */
    body.case-page.page-eqlio .case-hero {
      padding-top: var(--case-hero-top);
    }

    body.case-page.page-eqlio .contact {
      display: flex;
      min-height: 100svh;
      flex-direction: column;
      align-items: flex-start;
      padding: clamp(132px, 17svh, 210px) var(--page-x) 36px;
      border-top: 0;
      background: var(--contact-bg);
      overflow: hidden;
    }

    body.case-page.page-eqlio .contact-mark {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    body.case-page.page-eqlio .contact-links {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: clamp(24px, 3.2svh, 56px);
      width: 100%;
      margin: 0;
      color: var(--ink);
      font-family: var(--font-text);
      font-size: clamp(40px, 7.2vw, 120px);
      font-weight: var(--weight-light);
      line-height: 0.92;
      letter-spacing: 0;
      text-align: left;
    }

    body.case-page.page-eqlio .contact-links a {
      display: inline-flex;
      width: fit-content;
      max-width: 100%;
      padding: 0;
      border: 0;
      color: var(--ink) !important;
      font: inherit;
      line-height: 0.92;
      text-align: left;
      text-decoration: none;
      text-transform: uppercase;
      white-space: nowrap;
    }

    body.case-page.page-eqlio .contact-links a:hover,
    body.case-page.page-eqlio .contact-links a:focus-visible {
      border: 0;
      color: var(--ink) !important;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.12em;
    }

    body.case-page.page-eqlio .contact .footer {
      margin-top: auto;
      color: var(--ink);
      font-family: var(--font-text);
      font-size: clamp(18px, 1.6vw, 32px);
      font-weight: var(--weight-light);
      line-height: 1.1;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    body.case-page.page-eqlio .contact .footer small {
      font: inherit;
    }

    @media (max-width: 900px) {body.case-page.page-eqlio .contact {
        min-height: 100svh;
        padding-top: clamp(96px, 14svh, 132px);
        padding-bottom: 28px;
      }

      body.case-page.page-eqlio .contact-links {
        gap: clamp(18px, 3svh, 32px);
        font-size: clamp(38px, 10.8vw, 72px);
        line-height: 0.94;
      }}


    /* Final narrow-mobile consistency with shared tokens. */
    @media (max-width: 420px) {body.case-page.page-eqlio {
        --page-x: 20px;
        --text-story-title: var(--text-h1);
      }

      body.case-page.page-eqlio .site-header,
      body.case-page.page-eqlio .nav {
        font-size: var(--text-ui);
      }

      body.case-page.page-eqlio .nav {
        gap: var(--space-nav);
      }}


/* END migrated inline CSS: page override sections */

/* Eqlio system cleanup: keep migrated story/layout rules, but preserve current shared hero/contact geometry. */
body.case-page.page-eqlio .case-title-wrap {
  max-width: none;
}

body.case-page.page-eqlio .case-hero .case-copy > p {
  font-size: clamp(18px, 1.85vw, 36px);
  font-weight: var(--weight-light);
  line-height: 1.4;
}

@media (max-width: 900px) {
  body.case-page.page-eqlio .case-hero {
    padding-top: var(--case-hero-top);
  }

  body.case-page.page-eqlio .case-copy {
    margin-top: 0;
  }
}

@media (max-width: 700px) {
  body.case-page.page-eqlio .contact {
    min-height: auto;
    margin-top: 96px;
    padding-top: 96px;
    padding-bottom: 24px;
  }
}

/* Case story components: final shared layer after migrated page sections. */

/* Shared component: detail-page story section based on the five-column Figma grid. */
body.case-page .case-story.case-story {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 var(--page-x) var(--case-section-gap);
  border: 0;
}

body.case-page .case-story .story-label {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
  letter-spacing: 0;
  text-transform: uppercase;
}

body.case-page .case-story .story-title {
  grid-column: 1 / 4;
  grid-row: 2;
  max-width: none;
  margin: var(--space-story-heading) 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-story-title);
  font-weight: var(--weight-thin);
  line-height: var(--leading-story-title);
  letter-spacing: 0;
}

body.case-page .case-story .story-intro {
  grid-column: 4 / 6;
  grid-row: 2;
  max-width: none;
  margin: var(--space-story-heading) 0 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-body-copy);
  font-weight: var(--weight-light);
  line-height: var(--leading-body-copy);
  letter-spacing: 0;
}

body.case-page .case-story > .insight-grid {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  margin-top: var(--space-story-insights);
  border-top: 1px solid var(--line);
}

body.case-page .case-story > .insight-grid > .insight {
  min-width: 0;
  padding: var(--space-story-content) 0 0;
  border: 0;
}

body.case-page .case-story > .insight-grid > .insight h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
  letter-spacing: 0;
  text-transform: uppercase;
}

body.case-page .case-story > .insight-grid > .insight p {
  margin: var(--space-copy) 0 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-body-copy);
  font-weight: var(--weight-light);
  line-height: var(--leading-body-copy);
  letter-spacing: 0;
}

body.case-page .case-story.case-story > .journeys-layout,
body.case-page .case-story.case-story > .wireframes-scroll {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: var(--space-story-content);
}

/* Shared component: paired user journeys with a supporting media surface. */
body.case-page .case-story.case-story--journeys {
  grid-template-rows: auto auto auto auto;
}

body.case-page .case-story--journeys .story-label {
  grid-column: 1 / 3;
  grid-row: 1;
}

body.case-page .case-story--journeys .story-title {
  grid-column: 1 / 4;
  grid-row: 2;
  width: 100%;
  max-width: 784px;
  margin-top: var(--space-story-heading);
}

body.case-page .case-story--journeys .journey-title-line {
  display: block;
}

body.case-page .case-story--journeys .story-intro {
  grid-column: 1 / 3;
  grid-row: 3;
  width: 100%;
  max-width: 516px;
  margin-top: 24px;
}

body.case-page .case-story--journeys > .journeys-layout {
  display: contents;
  margin: 0;
}

body.case-page .case-story--journeys .journeys {
  grid-column: 1 / 3;
  grid-row: 4;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 219px));
  column-gap: 50px;
  width: 100%;
  max-width: 488px;
  margin-top: 90px;
  border: 0;
}

body.case-page .case-story--journeys .journey-lane,
body.case-page .case-story--journeys .journey-lane + .journey-lane {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

body.case-page .case-story--journeys .journey-lane h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
  letter-spacing: 0;
  text-transform: uppercase;
}

body.case-page .case-story--journeys .journey-lane h3 span {
  display: block;
  margin: 0;
  color: var(--ink);
  font-size: var(--text-body-copy);
  font-weight: var(--weight-light);
  line-height: var(--leading-body-copy);
  text-transform: none;
}

body.case-page .case-story--journeys .journey-steps {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0 0 0 16px;
  list-style: none;
}

body.case-page .case-story--journeys .journey-steps::before {
  content: "";
  position: absolute;
  top: 0.35em;
  bottom: 0.35em;
  left: 0;
  width: 1px;
  background: var(--surface);
}

body.case-page .case-story--journeys .journey-step {
  position: relative;
  margin: 0;
  padding-left: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-body-copy);
  font-weight: var(--weight-light);
  line-height: var(--leading-body-copy);
}

body.case-page .case-story--journeys .journey-step::before {
  content: none;
  display: none;
}

body.case-page .case-story--journeys .journey-step::after {
  content: none;
  display: none;
}

body.case-page .case-story--journeys .journeys-visual {
  grid-column: 4 / 6;
  grid-row: 1 / 5;
  align-self: start;
  width: 100%;
  max-width: 516px;
  aspect-ratio: 516 / 480;
  border: 0;
  background: var(--placeholder);
}

/* Shared component: horizontally connected wireframe sequence. */
body.case-page .case-story--wireframes > .wireframes-scroll {
  grid-column: 1 / -1;
  grid-row: 3;
  min-width: 0;
  margin-top: var(--space-block);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

body.case-page .case-story--wireframes > .wireframes-scroll::-webkit-scrollbar {
  display: none;
}

body.case-page .case-story--wireframes .wireframes-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  min-width: 0;
  padding: 0;
}

body.case-page .case-story--wireframes .wireframe-item {
  position: relative;
  flex: 0 0 146.208px;
  width: 146.208px;
  min-width: 0;
}

body.case-page .case-story--wireframes .wireframe-item:not(:last-child) {
  margin-right: 121px;
}

body.case-page .case-story--wireframes .wireframe-item h3 {
  width: 100%;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-body-copy);
  font-weight: var(--weight-light);
  line-height: var(--leading-body-copy);
  letter-spacing: 0;
  text-align: center;
}

body.case-page .case-story--wireframes .wireframe-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 186.5px;
  right: auto;
  left: calc(100% + 42.5px);
  width: var(--arrow-width);
  height: var(--arrow-height);
  margin: 0;
  background-image: var(--icon-arrow-right);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transform: none;
}

body.case-page .case-story--wireframes .wireframe-placeholder {
  display: block;
  width: 146px;
  height: 353px;
  margin: 12px auto 0;
  aspect-ratio: auto;
  border: 1px solid var(--ink);
  border-right-width: 3px;
  border-left-width: 3px;
  border-radius: 16px;
  background: var(--placeholder);
  object-fit: cover;
}

body.case-page .case-story--wireframes .wireframe-notes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  width: 100%;
  margin-top: var(--space-block);
  border-top: 1px solid var(--line);
}

body.case-page .case-story--wireframes .wireframe-note {
  min-width: 0;
  padding-top: var(--space-story-content);
}

body.case-page .case-story--wireframes .wireframe-note h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
  letter-spacing: 0;
}

body.case-page .case-story--wireframes .wireframe-note p {
  margin: var(--space-copy) 0 0;
  padding: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-body-copy);
  font-weight: var(--weight-light);
  line-height: var(--leading-body-copy);
  letter-spacing: 0;
}

@media (max-width: 900px) {
  body.case-page .case-story.case-story {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.case-page .case-story .story-title {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  body.case-page .case-story .story-intro {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: var(--space-copy);
  }

  body.case-page .case-story > .insight-grid,
  body.case-page .case-story.case-story > .journeys-layout,
  body.case-page .case-story.case-story > .wireframes-scroll {
    grid-row: 4;
  }

  body.case-page .case-story > .insight-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.case-page .case-story--journeys .story-label,
  body.case-page .case-story--journeys .story-title,
  body.case-page .case-story--journeys .story-intro {
    grid-column: 1 / -1;
  }

  body.case-page .case-story--journeys .journey-title-line {
    display: inline;
  }

  body.case-page .case-story--journeys .journey-title-line::before {
    content: " ";
  }

  body.case-page .case-story--journeys .story-intro {
    max-width: 760px;
  }

  body.case-page .case-story--journeys .journeys {
    grid-column: 1 / -1;
    grid-row: 4;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    max-width: none;
    margin-top: var(--space-block);
  }

  body.case-page .case-story--journeys .journeys-visual {
    grid-column: 1 / -1;
    grid-row: 5;
    width: 100%;
    max-width: none;
    margin-top: var(--space-block);
  }

  body.case-page .case-story--wireframes .wireframe-notes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  body.case-page .case-story.case-story {
    grid-template-columns: 1fr;
  }

  .case-page .case-figures {
    display: none;
  }

  .case-page .case-hero .case-copy > p {
    font-size: clamp(18px, 5.1vw, 31px);
  }

  body.case-page .case-story > .insight-grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-block);
  }

  body.case-page .case-story--journeys .journeys {
    grid-template-columns: 1fr;
    row-gap: var(--space-block);
  }

  body.case-page .case-story--journeys .journeys-visual {
    aspect-ratio: 1;
  }

  body.case-page .case-story--wireframes .wireframe-notes {
    grid-template-columns: 1fr;
    row-gap: 35px;
    margin-top: 35px;
  }

  body.case-page .case-story--wireframes .wireframe-note {
    padding-top: 27px;
  }
}

body.case-page .case-story--journeys .journey-step:not(:last-child)::after {
  content: none;
  display: none;
}

body.case-page .case-story--journeys .journey-lane + .journey-lane {
  border-left: 0;
}

/* Shared component: header/menu final layer after migrated page sections. */
body.home-page,
body.case-page,
body.not-found-page,
body.map-page {
  --header-height: 60px;
  --space-nav: var(--nav-gap-desktop);
}

body.home-page .site-header,
body.case-page .site-header,
body.not-found-page .site-header,
body.map-page .site-header {
  align-items: flex-start;
  height: var(--header-height);
  min-height: var(--header-height);
  padding: var(--header-top) var(--page-x) 0;
  font-family: var(--font-text);
  font-size: var(--text-ui);
  font-weight: var(--weight-light);
  line-height: var(--leading-ui);
  letter-spacing: 0;
}

body.home-page .brand-mark,
body.home-page .time,
body.case-page .brand-mark,
body.case-page .time,
body.not-found-page .brand-mark,
body.not-found-page .time,
body.map-page .brand-mark,
body.map-page .time {
  min-height: calc(var(--text-ui) * var(--leading-ui));
  font: inherit;
  letter-spacing: inherit;
}

body.home-page .brand-mark,
body.case-page .brand-mark,
body.not-found-page .brand-mark,
body.map-page .brand-mark {
  display: inline-flex;
  align-items: flex-start;
}

body.home-page .nav,
body.case-page .nav,
body.not-found-page .nav,
body.map-page .nav {
  align-items: flex-start;
  min-height: calc(var(--text-ui) * var(--leading-ui));
  gap: var(--space-nav);
  font: inherit;
  letter-spacing: inherit;
}

body.home-page .nav a,
body.case-page .nav a,
body.not-found-page .nav a,
body.map-page .nav a {
  display: inline-flex;
  align-items: flex-start;
  min-height: calc(var(--text-ui) * var(--leading-ui));
  padding: 0;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
}

body.home-page .nav a:hover,
body.home-page .nav a:focus-visible,
body.case-page .nav a:hover,
body.case-page .nav a:focus-visible,
body.not-found-page .nav a:hover,
body.not-found-page .nav a:focus-visible,
body.map-page .nav a:hover,
body.map-page .nav a:focus-visible {
  border: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

/* Shared page: 404. */
body.not-found-page {
  --not-found-title: var(--text-display-hero);
  --not-found-content-top: clamp(150px, 20svh, 250px);
  --not-found-text-gap: clamp(30px, 3vw, 50px);
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-ui);
  font-weight: var(--weight-light);
  line-height: var(--leading-ui);
  letter-spacing: 0;
}

body.not-found-page *,
body.not-found-page *::before,
body.not-found-page *::after {
  box-sizing: border-box;
}

body.not-found-page a {
  color: inherit;
  text-decoration: none;
}

body.not-found-page a:hover,
body.not-found-page a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

.not-found {
  min-height: calc(100svh - var(--header-height));
  padding: var(--not-found-content-top) var(--page-x) var(--space-section);
}

.not-found__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.not-found__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--not-found-title);
  font-weight: var(--weight-hairline);
  line-height: var(--leading-display);
  letter-spacing: 0;
  color: var(--ink);
}

.not-found__text {
  max-width: 780px;
  margin: var(--not-found-text-gap) 0 0;
  font-size: var(--text-body-copy);
  font-weight: var(--weight-light);
  line-height: var(--leading-body-copy);
  letter-spacing: 0;
}

.not-found__text a {
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}

@media (max-width: 900px) {
  body.not-found-page {
    --not-found-content-top: 128px;
  }

  .not-found__text {
    max-width: 100%;
  }
}

@media (max-width: 700px) {
  body.not-found-page {
    --page-x: 20px;
    --not-found-title: clamp(96px, 30vw, 148px);
    --not-found-content-top: 96px;
    --not-found-text-gap: 28px;
  }

  body.not-found-page .site-header,
  body.map-page .site-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }

  body.not-found-page .brand-mark,
  body.map-page .brand-mark {
    flex: 0 0 auto;
  }

  body.not-found-page .time,
  body.map-page .time {
    display: none;
  }

  body.not-found-page .nav,
  body.map-page .nav {
    flex: 0 0 auto;
    gap: clamp(12px, 4vw, 20px);
  }
}

@media (max-width: 420px) {
  body.not-found-page .nav,
  body.map-page .nav {
    gap: 12px;
    font-size: 15px;
  }
}

/* Internal page map: private working index, not part of public navigation. */
body.map-page {
  --map-content-top: clamp(120px, 15svh, 170px);
  --map-title-size: var(--text-display-map);
  --map-lead-top: 20px;
  --map-tree-top: 110px;
  --map-niche-gap: 90px;
  --map-niche-head-gap: 20px;
  --map-niche-note-top: 20px;
  --map-language-gap: 90px;
  --map-group-gap: 70px;
  --map-row-gap: 12px;
  --map-meta-size: 16px;

  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-ui);
  font-weight: var(--weight-light);
  line-height: var(--leading-ui);
  letter-spacing: 0;
}

body.map-page *,
body.map-page *::before,
body.map-page *::after {
  box-sizing: border-box;
}

body.map-page a {
  color: inherit;
  text-decoration: none;
}

body.map-page a:hover,
body.map-page a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

.page-map {
  min-height: calc(100svh - var(--header-height));
  padding: var(--map-content-top) var(--page-x) var(--space-section);
}

.page-map__intro {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

.page-map__title {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--map-title-size);
  font-weight: var(--weight-hairline);
  line-height: var(--leading-display);
  letter-spacing: 0;
}

.page-map__lead {
  grid-column: 1 / span 3;
  max-width: 780px;
  margin: var(--map-lead-top) 0 0;
  color: var(--ink);
  font-size: var(--text-body-copy);
  font-weight: var(--weight-light);
  line-height: var(--leading-body-copy);
  letter-spacing: 0;
}

.page-map__tree {
  display: grid;
  gap: var(--map-niche-gap);
  margin-top: var(--map-tree-top);
}

.page-map__niche {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--map-niche-head-gap) var(--grid-gap);
  width: 100%;
}

.page-map__niche-head {
  grid-column: 1 / -1;
  min-width: 0;
}

.page-map__niche-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-hairline);
  line-height: var(--leading-h1);
  letter-spacing: 0;
}

.page-map__niche-note {
  max-width: 780px;
  margin: var(--map-niche-note-top) 0 0;
  color: var(--ink);
  font-size: var(--text-body-copy);
  font-weight: var(--weight-light);
  line-height: var(--leading-body-copy);
  letter-spacing: 0;
}

.page-map__niche-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--map-group-gap) var(--map-language-gap);
  min-width: 0;
}

.page-map__group {
  min-width: 0;
  padding-top: 20px;
  border-top: var(--stroke-thin) solid var(--line);
}

.page-map__group h3 {
  margin: 0 0 26px;
  color: var(--ink);
  font-size: var(--text-ui);
  font-weight: var(--weight-medium);
  line-height: var(--leading-ui);
  letter-spacing: 0;
  text-transform: uppercase;
}

.page-map__list {
  display: grid;
  gap: var(--map-row-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-map__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
  gap: 20px;
  align-items: baseline;
  min-width: 0;
}

.page-map__list a,
.page-map__planned {
  min-width: 0;
  color: var(--ink);
  font-size: var(--text-body-copy);
  font-weight: var(--weight-light);
  line-height: var(--leading-body-copy);
  letter-spacing: 0;
}

body.map-page .page-map__list a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

.page-map__planned {
  color: var(--muted);
}

.page-map__list span:last-child {
  justify-self: start;
  text-align: left;
  color: var(--muted);
  font-size: var(--map-meta-size);
  font-weight: var(--weight-light);
  line-height: var(--leading-ui);
  letter-spacing: 0;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  body.map-page {
    --map-content-top: 128px;
    --map-tree-top: 82px;
    --map-niche-gap: 72px;
    --map-language-gap: 48px;
    --map-group-gap: 52px;
  }

  .page-map__intro,
  .page-map__niche {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-map__lead,
  .page-map__niche-head,
  .page-map__niche-grid {
    grid-column: 1 / -1;
  }

  .page-map__niche-note {
    margin-top: var(--map-niche-note-top);
  }
}

@media (max-width: 700px) {
  body.map-page {
    --page-x: 20px;
    --map-title-size: clamp(82px, 26vw, 124px);
    --map-content-top: 96px;
    --map-lead-top: 20px;
    --map-tree-top: 70px;
    --map-niche-gap: 64px;
  }

  .page-map__intro,
  .page-map__niche,
  .page-map__niche-grid {
    display: block;
  }

  .page-map__niche-grid {
    margin-top: 38px;
  }

  .page-map__group + .page-map__group {
    margin-top: 52px;
  }

  .page-map__list li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Shared component: other projects block from Figma node 65:1046. */
body.case-page .other.other-projects {
  --other-title-gap: 30px;
  --other-grid-gap: 33px;
  --other-card-gap: 10px;
  --other-card-copy-gap: var(--rhythm-text-group);
  --other-action-gap: 17px;
  --other-arrow-height: 18px;

  display: flex;
  flex-direction: column;
  gap: var(--other-title-gap);
  width: 100%;
  margin: 0;
  padding: 0 var(--page-x);
  border: 0;
}

body.case-page .other.other-projects .other-title {
  width: 100%;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-thin);
  line-height: var(--leading-h1);
  letter-spacing: 0;
}

body.case-page .other.other-projects .other-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--other-grid-gap);
  width: 100%;
  margin: 0;
}

body.case-page .other.other-projects .other-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--other-card-gap);
}

body.case-page .other.other-projects .other-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 0;
  background: var(--placeholder);
  color: inherit;
  text-decoration: none;
}

body.case-page .other.other-projects .other-thumb__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

body.case-page .other.other-projects .other-card-copy {
  display: flex;
  max-width: min(100%, 28em);
  flex-direction: column;
  gap: var(--other-card-copy-gap);
}

body.case-page .other.other-projects .other-card-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-case-title);
  font-weight: var(--weight-hairline);
  line-height: var(--leading-case-title);
  letter-spacing: 0;
}

body.case-page .other.other-projects .other-card-description {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-body-copy);
  font-weight: var(--weight-light);
  line-height: var(--leading-body-copy);
  letter-spacing: 0;
}

body.case-page .other.other-projects .project-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  gap: var(--other-action-gap);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-body-copy);
  font-weight: var(--weight-light);
  line-height: var(--leading-body-copy);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

body.case-page .other.other-projects .project-link .ui-arrow,
body.case-page .other.other-projects .project-link img.ui-arrow {
  width: var(--arrow-width);
  height: var(--other-arrow-height);
  flex: 0 0 var(--arrow-width);
  object-fit: contain;
  transform: none;
}

body.case-page .other.other-projects .project-link:hover .ui-arrow,
body.case-page .other.other-projects .project-link:focus-visible .ui-arrow,
body.case-page .other.other-projects .project-link:hover img.ui-arrow,
body.case-page .other.other-projects .project-link:focus-visible img.ui-arrow {
  transform: translateX(var(--arrow-hover-shift));
}

@media (max-width: 700px) {
  body.case-page .other.other-projects {
    --other-title-gap: 24px;
    --other-grid-gap: 40px;
  }

  body.case-page .other.other-projects .other-grid {
    grid-template-columns: 1fr;
  }
}




/* Shared component rhythm: case detail closing blocks use one 150px external gap. */
body.case-page .gallery.gallery {
  padding-bottom: var(--case-section-gap);
}

body.case-page .other.other-projects + .closing.discussion-cta,
body.case-page .other.other-projects + .discussion-cta {
  margin-top: var(--case-section-gap);
}

body.case-page .discussion-cta + .contact {
  margin-top: var(--case-section-gap) !important;
}

/* Shared component: discussion CTA from Figma node 65:1067. */
body.case-page .closing.discussion-cta,
body.case-page .discussion-cta {
  --discussion-cta-font-size: var(--text-h1);
  --discussion-cta-leading: var(--leading-h1);
  --discussion-cta-gap: 12px;
  --discussion-cta-icon-size: 1.02em;
  --discussion-cta-arrow-width: 1.28em;
  --discussion-cta-arrow-height: 0.56em;
  --discussion-cta-arrow-stroke: 1px;
  --discussion-cta-arrow-line-width: 0.94em;
  --discussion-cta-arrow-head-size: 0.34em;

  display: flex;
  align-items: flex-start;
  width: 100%;
  margin: 0;
  padding: 0 var(--page-x);
  border: 0;
}

body.case-page .discussion-cta__link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  gap: var(--discussion-cta-gap);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--discussion-cta-font-size);
  font-weight: var(--weight-hairline);
  font-variation-settings: "wght" 100;
  line-height: var(--discussion-cta-leading);
  letter-spacing: 0;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

body.case-page .discussion-cta__link:hover,
body.case-page .discussion-cta__link:focus-visible {
  color: var(--ink);
  text-decoration: none;
}

body.case-page .discussion-cta__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--discussion-cta-icon-size);
  height: var(--discussion-cta-icon-size);
  flex: 0 0 var(--discussion-cta-icon-size);
  transition: transform var(--transition-action);
}

body.case-page .discussion-cta__arrow,
body.case-page .discussion-cta__icon .ui-arrow {
  display: block;
  width: var(--discussion-cta-arrow-width);
  height: var(--discussion-cta-arrow-height);
  flex: 0 0 var(--discussion-cta-arrow-width);
  max-width: none;
  object-fit: contain;
  transform: rotate(-45deg);
  transform-origin: center;
  transition: transform var(--transition-action);
}

body.case-page .discussion-cta__icon .ui-arrow {
  display: none;
}

body.case-page .discussion-cta__icon::before,
body.case-page .discussion-cta__icon::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
}

body.case-page .discussion-cta__icon::before {
  top: 50%;
  left: 0.08em;
  width: var(--discussion-cta-arrow-line-width);
  border-top: var(--discussion-cta-arrow-stroke) solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
  transform-origin: center;
}

body.case-page .discussion-cta__icon::after {
  top: 0.12em;
  right: 0.08em;
  width: var(--discussion-cta-arrow-head-size);
  height: var(--discussion-cta-arrow-head-size);
  border-top: var(--discussion-cta-arrow-stroke) solid currentColor;
  border-right: var(--discussion-cta-arrow-stroke) solid currentColor;
}


body.case-page .discussion-cta__link:hover .discussion-cta__icon,
body.case-page .discussion-cta__link:focus-visible .discussion-cta__icon {
  transform: translate3d(4px, -4px, 0);
}

@media (max-width: 700px) {
  body.case-page .closing.discussion-cta,
  body.case-page .discussion-cta {
    --discussion-cta-font-size: var(--text-h1);
    --discussion-cta-icon-size: 0.96em;
    --discussion-cta-arrow-width: 1.18em;
    --discussion-cta-arrow-height: 0.52em;
  }

  body.case-page .discussion-cta__link {
    white-space: normal;
  }
}

/* Shared component: case hero spacing from Figma node 25:1217. */
body.case-page {
  --case-hero-top: 50px;
  --case-hero-forms-gap: 50px;
  --case-hero-overview-gap: 150px;
}

body.case-page .case-hero {
  padding-top: var(--case-hero-top);
}

body.case-page .case-forms {
  margin: 0 0 var(--case-hero-forms-gap);
}

body.case-page .case-overview-details {
  margin-top: var(--case-hero-overview-gap);
}

@media (max-width: 900px) {
  body.case-page {
    --case-hero-top: 48px;
    --case-hero-forms-gap: 42px;
    --case-hero-overview-gap: var(--space-section);
  }
}

@media (max-width: 700px) {
  body.case-page {
    --case-hero-forms-gap: 0px;
    --case-hero-overview-gap: var(--space-section);
  }
}

/* Shared component: paired user journeys from Figma node 25:1217. */
body.case-page .case-story.case-story--journeys {
  --journeys-title-width: 780px;
  --journeys-copy-width: 516px;
  --journeys-copy-column-width: 536px;
  --journeys-title-copy-gap: 10px;
  --journeys-content-gap: 60px;
  --journeys-lanes-gap: 50px;
  --journeys-lane-width: 219px;
  --journeys-line-gap: 12px;
  --journeys-line-inset: 3px;
  --journeys-line-color: var(--inactive);
  --journeys-visual-width: 516px;
  --journeys-visual-height: 480px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--grid-gap);
}

body.case-page .case-story--journeys .journeys-copy {
  display: flex;
  width: var(--journeys-copy-column-width);
  flex: 0 0 var(--journeys-copy-column-width);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--journeys-content-gap);
}

body.case-page .case-story--journeys .journeys-heading {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-story-heading);
}

body.case-page .case-story--journeys .journeys-title-group {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--journeys-title-copy-gap);
}

body.case-page .case-story--journeys .story-label {
  margin: 0;
}

body.case-page .case-story--journeys .story-title {
  width: var(--journeys-title-width);
  max-width: var(--journeys-title-width);
  margin: 0;
}

body.case-page .case-story--journeys .journey-title-line {
  display: block;
}

body.case-page .case-story--journeys .story-intro {
  width: var(--journeys-copy-width);
  max-width: var(--journeys-copy-width);
  margin: 0;
}

body.case-page .case-story--journeys .journeys {
  display: flex;
  align-items: flex-start;
  width: auto;
  max-width: none;
  gap: var(--journeys-lanes-gap);
  margin: 0;
  border: 0;
}

body.case-page .case-story--journeys .journey-lane,
body.case-page .case-story--journeys .journey-lane + .journey-lane {
  display: flex;
  width: var(--journeys-lane-width);
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 0;
  border: 0;
}

body.case-page .case-story--journeys .journey-lane h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
  letter-spacing: 0;
  text-transform: uppercase;
}

body.case-page .case-story--journeys .journey-lane h3 span {
  display: block;
  margin: 0;
  color: var(--ink);
  font-size: var(--text-body-copy);
  font-weight: var(--weight-light);
  line-height: var(--leading-body-copy);
  text-transform: none;
}

body.case-page .case-story--journeys .journey-steps {
  position: relative;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 0 0 var(--journeys-line-gap);
  list-style: none;
}

body.case-page .case-story--journeys .journey-steps::before {
  content: "";
  position: absolute;
  top: var(--journeys-line-inset);
  bottom: var(--journeys-line-inset);
  left: 0;
  width: 1px;
  background: var(--journeys-line-color);
}

body.case-page .case-story--journeys .journey-step {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-body-copy);
  font-weight: var(--weight-light);
  line-height: var(--leading-body-copy);
}

body.case-page .case-story--journeys .journey-step::before,
body.case-page .case-story--journeys .journey-step::after,
body.case-page .case-story--journeys .journey-step:not(:last-child)::after {
  content: none;
  display: none;
}

body.case-page .case-story--journeys .journeys-visual {
  width: var(--journeys-visual-width);
  flex: 0 0 var(--journeys-visual-width);
  max-width: var(--journeys-visual-width);
  height: var(--journeys-visual-height);
  aspect-ratio: 516 / 480;
  border: 0;
  background: var(--placeholder);
}

@media (max-width: 1180px) {
  body.case-page .case-story.case-story--journeys {
    --journeys-title-width: 100%;
    --journeys-copy-width: min(760px, 100%);
    --journeys-copy-column-width: 100%;
    --journeys-title-copy-gap: var(--space-copy);
    --journeys-content-gap: var(--space-block);
    --journeys-lanes-gap: var(--grid-gap);

    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-block);
  }

  body.case-page .case-story--journeys .story-title,
  body.case-page .case-story--journeys .story-intro {
    width: var(--journeys-title-width);
    max-width: var(--journeys-title-width);
  }

  body.case-page .case-story--journeys .story-intro {
    width: var(--journeys-copy-width);
    max-width: var(--journeys-copy-width);
  }

  body.case-page .case-story--journeys .journey-title-line {
    display: inline;
  }

  body.case-page .case-story--journeys .journey-title-line::before {
    content: " ";
  }

  body.case-page .case-story--journeys .journeys {
    width: 100%;
  }

  body.case-page .case-story--journeys .journey-lane,
  body.case-page .case-story--journeys .journey-lane + .journey-lane {
    width: 100%;
  }

  body.case-page .case-story--journeys .journeys-visual {
    width: 100%;
    flex-basis: auto;
    max-width: var(--journeys-visual-width);
    height: auto;
    margin-top: 0;
  }
}

@media (max-width: 700px) {
  body.case-page .case-story--journeys .journeys {
    flex-direction: column;
    row-gap: var(--space-block);
  }

  body.case-page .case-story--journeys .journeys-visual {
    max-width: none;
    aspect-ratio: 1;
  }
}

/* Component pass: keep the Figma first-screen system through the 1150-1160px breakpoint. */
@media (min-width: 1021px) and (max-width: 1180px) {
  .home-page main {
    padding-top: 0 !important;
  }

  .home-page .hero {
    --hero-grid-column: calc((100vw - var(--page-x) * 2 - var(--grid-gap) * 4) / 5);
    --hero-copy-column: calc(var(--hero-grid-column) * 2 + var(--grid-gap));
    --hero-copy-width: min(482px, var(--hero-copy-column));
    --hero-audience-width: calc(var(--hero-grid-column) * 3 + var(--grid-gap) * 2);
    --hero-right-column-x: calc((var(--hero-grid-column) + var(--grid-gap)) * 3);
    --hero-word-size: clamp(150px, 15.3vw, 176px);
    --hero-form-size: clamp(116px, 11.5vw, 132px);
    --hero-form-gap: clamp(28px, 3.5vw, 40px);
    --hero-profile-size: clamp(178px, 17.4vw, 200px);
    position: relative;
    display: grid !important;
    min-height: max(var(--hero-min-screen), 100svh);
    grid-template-columns: repeat(5, minmax(0, var(--hero-grid-column))) !important;
    column-gap: var(--grid-gap) !important;
    padding: 0 var(--page-x) !important;
    overflow: hidden;
  }

  .home-page .hero-profile {
    position: absolute !important;
    top: var(--hero-profile-top) !important;
    left: var(--page-x) !important;
    width: var(--hero-profile-size) !important;
    margin: 0 !important;
    translate: none !important;
    transform: none !important;
  }

  .home-page .hero-profile .portrait-card {
    width: var(--hero-profile-size) !important;
    height: var(--hero-profile-size) !important;
  }

  .home-page .hero-identity {
    margin-top: var(--hero-identity-gap) !important;
  }

  .home-page .hero-identity .role {
    position: static !important;
    margin: 0 !important;
    text-transform: none !important;
  }

  .home-page .audience-composition {
    position: absolute !important;
    top: var(--hero-content-top) !important;
    left: var(--page-x) !important;
    display: grid !important;
    width: var(--hero-audience-width) !important;
    grid-template-columns: var(--hero-grid-column) var(--hero-copy-column) !important;
    column-gap: var(--grid-gap) !important;
    margin: 0 !important;
    translate: none !important;
    transform: none !important;
  }

  .home-page .audience-tabs-draft {
    width: var(--hero-tab-width) !important;
    min-height: var(--hero-tabs-min-height) !important;
    gap: 0 !important;
    margin: 0 !important;
  }

  .home-page .audience-tabs-draft::before,
  .home-page .audience-tabs-divider {
    display: none !important;
  }

  .home-page .audience-tab,
  .home-page .audience-tab[aria-selected="true"],
  .home-page .audience-tab[aria-selected="false"] {
    min-height: var(--hero-row-height) !important;
    padding: 0 !important;
    border-bottom-width: 1px !important;
    font-size: var(--text-ui) !important;
    font-weight: var(--weight-light) !important;
    line-height: var(--leading-ui) !important;
    opacity: 1 !important;
  }

  .home-page .audience-tab[aria-selected="false"] {
    border-bottom-color: transparent !important;
    color: var(--inactive) !important;
  }

  .home-page .audience-tab[aria-selected="true"] {
    border-bottom-color: var(--ink) !important;
    color: var(--ink) !important;
  }

  .home-page .audience-composition .hero-copy {
    width: var(--hero-copy-width) !important;
    max-width: var(--hero-copy-width) !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .home-page .hero-services-preview-b {
    position: absolute !important;
    top: var(--hero-content-top) !important;
    left: calc(var(--page-x) + var(--hero-right-column-x)) !important;
    display: block !important;
    width: var(--hero-copy-column) !important;
    max-width: var(--hero-copy-column) !important;
    margin: 0 !important;
    translate: none !important;
    transform: none !important;
  }

  .home-page .hero-services-preview-b .hero-service {
    min-height: var(--hero-row-height) !important;
    margin: 0 !important;
  }

  .home-page .hero-service-with-chips .service-chips {
    margin-top: var(--hero-chip-offset) !important;
  }

  .home-page .hero-services-preview-b .hero-service-wide {
    margin-top: var(--hero-service-group-gap) !important;
  }

  .home-page .hero-mark {
    position: absolute !important;
    top: var(--hero-lockup-top) !important;
    left: calc(var(--page-x) + var(--hero-left-optical-shift)) !important;
    width: auto !important;
    height: var(--hero-form-size) !important;
    margin: 0 !important;
    font-size: var(--hero-word-size) !important;
    line-height: 0.75 !important;
    translate: none !important;
    transform: none !important;
  }

  .home-page .hero-figures {
    --hero-figure-size: var(--hero-form-size) !important;
    position: absolute !important;
    top: var(--hero-lockup-top) !important;
    right: auto !important;
    bottom: auto !important;
    left: calc(var(--page-x) + var(--hero-right-column-x)) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--hero-form-gap) !important;
    margin: 0 !important;
    opacity: 1 !important;
    translate: none !important;
    transform: none !important;
  }

  .home-page .hero-form-frame,
  .home-page .hero-figure-reveal,
  .home-page .hero-figure-spin {
    width: var(--hero-form-size) !important;
    height: var(--hero-form-size) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    clip-path: none !important;
    overflow: visible !important;
  }
}

/* Shared component: case lightbox controls. */
body.lightbox-open {
  overflow: hidden;
}


/* Shared component: detail-page media frame hover. */
body.case-page .case-media-frame,
body.case-page .gallery :is(.mock-full, .mock-square) {
  position: relative;
  overflow: hidden;
  background: var(--placeholder);
}

body.case-page .case-media-frame__image,
body.case-page .gallery :is(.mock-full, .mock-square) > img {
  display: block;
  width: 100%;
  transform: scale(1);
  transform-origin: center;
  transition: transform var(--transition-display);
  will-change: transform;
}

body.case-page .case-media-frame--cover .case-media-frame__image {
  height: 100%;
  object-fit: cover;
}

body.case-page .gallery .mock-full > img,
body.case-page .mock-full .case-media-frame__image {
  height: auto;
  object-fit: contain;
}

body.case-page .gallery .mock-square > img,
body.case-page .mock-square .case-media-frame__image {
  height: 100%;
  object-fit: cover;
}

body.case-page.page-eqlio .gallery .mock-full.mock-full--image {
  aspect-ratio: auto;
}

body.case-page .case-media-frame:hover .case-media-frame__image,
body.case-page .case-media-frame:focus-within .case-media-frame__image,
body.case-page .gallery :is(.mock-full, .mock-square):hover > img,
body.case-page .gallery :is(.mock-full, .mock-square):focus-within > img {
  transform: scale(var(--media-hover-scale));
}

@media (prefers-reduced-motion: reduce) {
  body.case-page .case-media-frame__image,
  body.case-page .gallery :is(.mock-full, .mock-square) > img {
    transition: none;
  }

  body.case-page .case-media-frame:hover .case-media-frame__image,
  body.case-page .case-media-frame:focus-within .case-media-frame__image,
  body.case-page .gallery :is(.mock-full, .mock-square):hover > img,
  body.case-page .gallery :is(.mock-full, .mock-square):focus-within > img {
    transform: none;
  }
}

body.case-page .case-lightbox.case-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  gap: var(--grid-gap);
  padding: 24px var(--page-x);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  color: var(--ink);
}

body.case-page .case-lightbox.case-lightbox[hidden] {
  display: none;
}

body.case-page .lightbox-stage.lightbox-stage {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  margin: 0;
}

body.case-page .lightbox-image.lightbox-image {
  display: block;
  max-width: 100%;
  max-height: calc(100svh - 96px);
  object-fit: contain;
}

body.case-page .lightbox-control.lightbox-control {
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  background-image: none;
  color: var(--ink);
  cursor: pointer;
}

body.case-page .lightbox-close.lightbox-control {
  position: absolute;
  top: 18px;
  right: var(--page-x);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font-family: var(--font-text);
  font-size: 34px;
  font-weight: var(--weight-light);
  line-height: 1;
}

body.case-page .lightbox-nav.lightbox-control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: 0;
  font-size: 0;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0;
}

body.case-page .lightbox-prev.lightbox-control {
  grid-column: 1;
  transform: none;
}

body.case-page .lightbox-next.lightbox-control {
  grid-column: 3;
  transform: none;
}

body.case-page .lightbox-arrow {
  width: var(--arrow-width);
  height: var(--arrow-height);
  flex: 0 0 var(--arrow-width);
}

body.case-page .lightbox-prev .lightbox-arrow {
  transform: rotate(180deg);
}

body.case-page .lightbox-next:hover .lightbox-arrow,
body.case-page .lightbox-next:focus-visible .lightbox-arrow {
  transform: translateX(var(--arrow-hover-shift));
}

body.case-page .lightbox-prev:hover .lightbox-arrow,
body.case-page .lightbox-prev:focus-visible .lightbox-arrow {
  transform: rotate(180deg) translateX(var(--arrow-hover-shift));
}

body.case-page .lightbox-count.lightbox-count {
  position: absolute;
  left: var(--page-x);
  bottom: 18px;
  margin: 0;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  line-height: var(--leading-label);
}

@media (max-width: 700px) {
  body.case-page .case-lightbox.case-lightbox {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 6px;
    padding: 16px 8px;
  }

  body.case-page .lightbox-nav.lightbox-control {
    width: 42px;
    height: 42px;
  }

  body.case-page .lightbox-close.lightbox-control {
    top: 8px;
    right: 8px;
  }

  body.case-page .lightbox-count.lightbox-count {
    left: 16px;
    bottom: 12px;
  }

  body.case-page .lightbox-image.lightbox-image {
    max-height: calc(100svh - 72px);
  }
}