/*
 * Large-desktop proportions for the primary BELLSWORK experience.
 *
 * Every selector is rooted in .site-shell so dynamically mounted project
 * overlays, legal panels, and image viewers retain their existing sizing.
 */

@media (min-width: 2400px) and (min-height: 1300px) {
  .site-shell > .site-nav {
    min-height: clamp(104px, 3.4vw, 132px);
    gap: clamp(56px, 3.2vw, 96px);
    padding-inline: clamp(88px, 4.5vw, 176px);
  }

  .site-shell > .site-nav .site-nav__brand,
  .site-shell > .site-nav .site-nav__wordmark {
    height: clamp(17px, .52vw, 21px);
    min-height: clamp(17px, .52vw, 21px);
  }

  .site-shell > .site-nav .site-nav__links {
    gap: clamp(58px, 3vw, 96px);
  }

  .site-shell > .site-nav .site-nav__masked-control {
    flex-basis: clamp(340px, 10vw, 420px);
    width: clamp(340px, 10vw, 420px);
  }

  html[data-locale="de"] .site-shell > .site-nav .site-nav__masked-control {
    flex-basis: clamp(380px, 11vw, 460px);
    width: clamp(380px, 11vw, 460px);
  }

  .site-shell > .site-nav .site-nav__identity {
    gap: clamp(48px, 2.5vw, 72px);
  }

  .site-shell > .site-nav .site-nav__locale {
    gap: 6px;
    padding-left: clamp(38px, 1.7vw, 58px);
  }

  .site-shell > .site-nav .site-nav__locale::before {
    height: 17px;
  }

  .site-shell > .site-nav .site-nav__locale button {
    min-width: 28px;
    padding: 11px 4px 10px;
    font-size: clamp(10px, .3vw, 12px);
  }

  .site-shell > .site-nav .site-nav__track {
    gap: clamp(46px, 1.55vw, 60px);
    padding-inline: clamp(170px, 5vw, 210px);
  }

  .site-shell > .site-nav .site-nav__track > a,
  .site-shell > .site-nav .site-nav__resume {
    padding-block: 17px 16px;
    font-size: clamp(11px, .32vw, 13px);
  }

  .site-shell > main > section .eyebrow {
    font-size: clamp(13px, .4vw, 16px);
  }

  .site-shell > main > .hero .hero__glass {
    width: 55vw;
    padding: clamp(150px, 8vw, 230px) clamp(120px, 6.5vw, 250px);
  }

  .site-shell > main > .hero .hero__copy {
    width: min(700px, 44vw);
  }

  .site-shell > main > .hero .hero__character,
  .site-shell > main > .hero .hero__glass-character {
    right: 2.5vw;
    width: clamp(1180px, 52vw, 2000px);
    height: 110%;
  }

  .site-shell > main > .hero .hero-kora__trigger {
    width: clamp(1280px, 55vw, 2100px);
  }

  .site-shell > main > .hero .hero__identity {
    --hero-title-size: clamp(88px, 6.7vw, 112px);
    gap: clamp(28px, 1.5vw, 46px);
  }

  .site-shell > main > .hero h1 {
    font-size: var(--hero-title-size);
  }

  .site-shell > main > .hero .hero__lead {
    max-width: 580px;
    margin-top: clamp(64px, 2.1vw, 82px);
    font-size: clamp(22px, .68vw, 26px);
  }

  .site-shell > main > .hero .hero__actions {
    column-gap: clamp(42px, 1.8vw, 68px);
    margin-top: clamp(60px, 1.8vw, 72px);
  }

  .site-shell > main > .hero .text-link {
    gap: 15px;
    font-size: clamp(11px, .34vw, 13px);
  }

  .site-shell > main > .hero .hero-kora__card {
    top: clamp(180px, 16svh, 260px);
    left: calc(var(--handoff-glass-width) + clamp(44px, 2.4vw, 92px));
    gap: 14px;
    width: 150px;
    padding: 18px;
    border-radius: 75px 75px 8px 8px;
  }

  .site-shell > main > .hero .hero-kora__portrait-shell {
    width: 112px;
    height: 112px;
  }

  .site-shell > main > .hero .hero-kora__kicker {
    font-size: 9px;
  }

  .site-shell > main > .hero .hero-kora__name {
    font-size: 30px;
  }

  .site-shell > main > .hero .hero-kora__bio {
    font-size: 12px;
  }

  .site-shell > main > .approach .approach__sticky {
    --approach-card-bottom: clamp(80px, 4.5svh, 118px);
    --approach-card-height: clamp(520px, 40svh, 860px);
    --approach-card-start-height: clamp(416px, 32svh, 688px);
    --approach-card-lift-unit: clamp(1.25px, .0926svh, 2px);
    --approach-card-step: clamp(780px, 40vw, 1540px);
  }

  .site-shell > main > .approach .approach__title {
    bottom: calc(
      var(--approach-card-bottom) + var(--approach-card-start-height) +
      clamp(32px, calc(4.167vw - 68px), 88px)
    );
    padding-inline: clamp(72px, 5vw, 180px);
  }

  .site-shell > main > .approach h2 {
    font-size: clamp(110px, 4.6vw, 154px);
  }

  .site-shell > main > .approach .approach__title .eyebrow {
    margin-bottom: clamp(18px, .8vw, 28px);
  }

  .site-shell > main > .approach .approach-card,
  .site-shell > main > .approach .approach-card-number {
    width: clamp(680px, 24vw, 860px);
    left: clamp(110px, 5vw, 190px);
  }

  .site-shell > main > .approach .approach-card {
    transform: translate3d(
      calc(var(--distance) * var(--approach-card-step)),
      calc(var(--card-lift, 0) * var(--approach-card-lift-unit)),
      0
    ) scale(var(--card-scale));
  }

  .site-shell > main > .approach .approach-card {
    padding: clamp(58px, 2.1vw, 72px);
  }

  .site-shell > main > .approach .approach-card > p {
    margin-bottom: clamp(34px, 1.4vw, 52px);
    font-size: clamp(10px, .32vw, 12px);
  }

  .site-shell > main > .approach .approach-card > div:not(.approach-card__backdrop) {
    font-size: clamp(20px, .55vw, 21px);
    line-height: 1.7;
  }

  .site-shell > main > .approach .approach-card-number {
    bottom: calc(var(--approach-card-bottom) + var(--approach-card-height) - clamp(150px, 7vw, 210px) + var(--number-rise) * clamp(200px, 13svh, 280px));
    font-size: clamp(460px, 26svh, 620px);
    transform: translate3d(
      calc(var(--distance) * var(--approach-card-step)),
      0,
      0
    ) scale(var(--card-scale));
  }

  .site-shell > main > .approach .approach__progress {
    bottom: clamp(34px, 2.2svh, 50px);
    gap: 14px;
  }

  .site-shell > main > .approach .approach__progress span {
    width: calc(34px + var(--segment-fill, 0) * 28px);
    height: 3px;
  }

  .site-shell > main > .explorations .explorations__cards a::before {
    font-size: 14px;
  }

  .site-shell > main > .explorations .explorations__cards a::after {
    font-size: 48px;
  }

  .site-shell > main > .explorations .explorations__sticky {
    padding: clamp(170px, 7vw, 240px) clamp(150px, 7.5vw, 280px);
  }

  .site-shell > main > .explorations .explorations__panel {
    width: min(100%, 2400px);
    min-height: clamp(760px, 48svh, 1040px);
    padding: clamp(88px, 3.5vw, 126px) clamp(116px, 5vw, 190px);
  }

  .site-shell > main > .explorations .explorations__panel .eyebrow {
    margin-bottom: clamp(28px, .9vw, 36px);
  }

  .site-shell > main > .explorations h2 {
    font-size: clamp(116px, 3.6vw, 140px);
  }

  .site-shell > main > .explorations .explorations__panel > p:not(.eyebrow) {
    width: min(100%, 780px);
    margin-top: clamp(34px, 1.3vw, 50px);
    font-size: clamp(20px, .62vw, 24px);
  }

  .site-shell > main > .explorations .explorations__cards {
    gap: clamp(16px, .65vw, 24px);
    margin-block: clamp(46px, 1.5vw, 58px);
  }

  .site-shell > main > .explorations .explorations__cards a {
    width: clamp(140px, 5.4vw, 203px);
    border-radius: clamp(14px, .5vw, 19px);
  }

  .site-shell > main > :is(.explorations, .contact) .button {
    border-radius: 24px;
    padding: 30px clamp(64px, 2.2vw, 82px);
    font-size: clamp(12px, .36vw, 14px);
  }

  .site-shell > main > .contact {
    padding: clamp(210px, 6.8vw, 260px) clamp(150px, 7.5vw, 280px) 58px;
  }

  .site-shell > main > .contact .contact__header,
  .site-shell > main > .contact .contact-dashboard,
  .site-shell > main > .contact footer {
    width: min(100%, clamp(1440px, 50vw, 1840px));
  }

  .site-shell > main > .contact h2 {
    max-width: 1460px;
    font-size: clamp(120px, 3.7vw, 144px);
  }

  .site-shell > main > .contact .contact-dashboard {
    grid-template-columns: minmax(390px, .72fr) minmax(680px, 1.28fr);
    margin-top: clamp(120px, 3.4vw, 132px);
    border-radius: 36px;
  }

  .site-shell > main > .contact .contact-dashboard__identity,
  .site-shell > main > .contact .contact-dashboard__form {
    padding: clamp(68px, 2.5vw, 92px);
  }

  .site-shell > main > .contact .contact-dashboard__status,
  .site-shell > main > .contact .contact-dashboard__links a,
  .site-shell > main > .contact .contact-form label > span,
  .site-shell > main > .contact footer {
    font-size: clamp(10px, .3vw, 12px);
  }

  .site-shell > main > .contact .contact-dashboard__identity h3 {
    font-size: clamp(80px, 2.5vw, 96px);
  }

  .site-shell > main > .contact .contact-dashboard__identity p {
    margin-bottom: 30px;
    font-size: clamp(13px, .4vw, 16px);
  }

  .site-shell > main > .contact .contact-dashboard__identity > a,
  .site-shell > main > .contact .contact-form input,
  .site-shell > main > .contact .contact-form textarea {
    font-size: clamp(16px, .48vw, 19px);
  }

  .site-shell > main > .contact .contact-dashboard__links {
    gap: 18px;
    margin-top: 58px;
  }

  .site-shell > main > .contact .contact-dashboard__links a {
    padding-top: 16px;
  }

  .site-shell > main > .contact .contact-dashboard__coordinates {
    gap: 30px;
    margin-bottom: 46px;
    font-size: clamp(9px, .28vw, 11px);
  }

  .site-shell > main > .contact .contact-form {
    gap: 28px;
  }

  .site-shell > main > .contact .contact-form label {
    gap: 13px;
  }

  .site-shell > main > .contact .contact-form input {
    height: 58px;
  }

  .site-shell > main > .contact .contact-form textarea {
    min-height: 170px;
  }

  .site-shell > main > .contact footer {
    margin-top: 58px;
    padding-top: 30px;
  }
}

/* Retina and scaled 4K displays often expose a desktop viewport below 2400
   CSS pixels. Bridge only the Approach choreography into that range without
   widening the site-wide large-screen treatment. */
@media (min-width: 1800px) and (max-width: 2399px) and (min-height: 1000px) and (min-aspect-ratio: 4/3) and (hover: hover) and (pointer: fine) {
  .site-shell > main > .approach .approach__sticky {
    --approach-card-bottom: clamp(80px, 4.5svh, 118px);
    --approach-card-height: clamp(500px, 44svh, 860px);
    --approach-card-start-height: clamp(400px, 35.2svh, 688px);
    --approach-card-lift-unit: clamp(1.25px, .14svh, 2px);
    --approach-card-step: clamp(720px, 40vw, 1540px);
  }

  .site-shell > main > .approach .approach__title {
    bottom: calc(
      var(--approach-card-bottom) + var(--approach-card-start-height) +
      clamp(-8px, calc(4.167vw - 68px), 32px)
    );
  }

  .site-shell > main > .approach .approach-card {
    transform: translate3d(
      calc(var(--distance) * var(--approach-card-step)),
      calc(var(--card-lift, 0) * var(--approach-card-lift-unit)),
      0
    ) scale(var(--card-scale));
  }

  .site-shell > main > .approach .approach-card-number {
    bottom: calc(var(--approach-card-bottom) + var(--approach-card-height) - clamp(145px, 7vw, 210px) + var(--number-rise) * clamp(150px, 13svh, 280px));
    font-size: clamp(460px, 26svh, 620px);
    transform: translate3d(
      calc(var(--distance) * var(--approach-card-step)),
      0,
      0
    ) scale(var(--card-scale));
  }
}