/* =========================
   SAVIÉR — CASE STUDY
   ========================= */

   :root {
    --savier-dark: #2e2e2e;
    --savier-light: #fefefe;
    --savier-muted: #cfcfcf;
    --savier-accent: #f76c6c;
  }
  
  
  /* =========================
     BASE
     ========================= */
  
  .savier-case {
    overflow: hidden;
  }
  
  .savier-case h1,
  .savier-case h2,
  .savier-case p {
    font-family: var(--sans);
  }
  
  
  /* =========================
     01 INTRO
     ========================= */
  
  .savier-intro {
    padding: 96px 0 128px;
  }
  
  .savier-intro-grid {
    min-height: 520px;
  
    display: grid;
    grid-template-columns:
      minmax(0, 1.08fr)
      minmax(320px, 0.92fr);
  
    gap: 96px;
    align-items: stretch;
  }
  
  .savier-intro .project-gallery {
    min-width: 0;
  }
  
  .savier-intro-copy {
    width: min(430px, 100%);
    height: 100%;
  
    align-self: stretch;
    justify-self: end;
  
    padding: 0;
  
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .savier-intro-copy h1 {
    margin: 0 0 16px;
  
    color: var(--ink);
  
    font-size: 40px;
    font-weight: 550;
    line-height: 1;
  }
  
  .savier-intro-copy p {
    margin: 0;
  
    color: var(--ink);
  
    font-size: 17px;
    font-weight: 500;
    line-height: 1.45;
  }
  
  .savier-try {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  
  .savier-try-label {
    font-size: 12px;
    font-weight: 450;
    line-height: 1.2;
  }
  
  .savier-try-actions {
    display: flex;
    gap: 8px;
  }
  
  .savier-link-button {
    min-height: 46px;
    padding: 0 20px;
  
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  
    overflow: hidden;
  
    border: 1px solid var(--line);
    border-radius: 23px;
  
    background: #fefefe;
    color: var(--ink);
  
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
  
    cursor: pointer;
  
    transform: translateZ(0);
  
    transition:
      transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
      background-color 260ms ease;
  }
  
  .savier-link-button img {
    width: 16px;
    height: 16px;
  
    flex: 0 0 16px;
  
    display: block;
  
    object-fit: contain;
  }
  
  
  @keyframes savier-button-liquid-wobble {
    0% {
      transform: translateY(0) scaleX(1) scaleY(1);
      border-radius: 23px;
    }
  
    24% {
      transform: translateY(-1px) scaleX(1.035) scaleY(0.965);
      border-radius: 21px 25px 22px 24px;
    }
  
    48% {
      transform: translateY(-1px) scaleX(0.985) scaleY(1.025);
      border-radius: 25px 21px 24px 22px;
    }
  
    72% {
      transform: translateY(-1px) scaleX(1.015) scaleY(0.99);
      border-radius: 22px 24px 21px 25px;
    }
  
    100% {
      transform: translateY(-1px) scaleX(1) scaleY(1);
      border-radius: 23px;
    }
  }
  
  @keyframes savier-button-idle-wobble {
    0%,
    100% {
      transform: translateY(-1px) scaleX(1) scaleY(1);
    }
  
    25% {
      transform: translateY(-1px) scaleX(1.006) scaleY(0.996);
    }
  
    50% {
      transform: translateY(-1px) scaleX(0.997) scaleY(1.004);
    }
  
    75% {
      transform: translateY(-1px) scaleX(1.004) scaleY(0.998);
    }
  }
  
  @media (hover: hover) and (pointer: fine) {
    .savier-link-button:hover {
      animation:
        savier-button-liquid-wobble
          420ms
          cubic-bezier(0.22, 1, 0.36, 1)
          both,
        savier-button-idle-wobble
          1800ms
          420ms
          ease-in-out
          infinite;
    }
  }
  
  
  /* =========================
     02 ASSETS
     ========================= */
  
  .savier-assets {
    padding: 96px 0 120px;
  
    background: var(--savier-dark);
  }
  
  .savier-eyebrow-light {
    color: var(--savier-light);
  }
  
  .savier-eyebrow-light::before {
    background: rgba(254, 254, 254, 0.72);
  }
  
  .savier-assets-grid {
    margin-top: 56px;
  
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:
      88px
      96px;
  }
  
  .savier-asset-block,
  .savier-style-block {
    min-width: 0;
  }
  
  .savier-asset-block {
    display: grid;
    grid-template-rows: 136px 104px;
    align-content: start;
  }
  
  .savier-asset-copy h2,
  .savier-style-copy h2 {
    margin: 0 0 16px;
  
    color: var(--savier-light);
  
    font-size: 40px;
    font-weight: 550;
    line-height: 1;
  }
  
  .savier-asset-copy p,
  .savier-style-copy p {
    margin: 0;
  
    color: var(--savier-light);
  
    font-size: 17px;
    font-weight: 500;
    line-height: 1.45;
  }
  
  .savier-carousel {
    margin-top: 0;
  
    width: 100%;
  
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 12px;
    align-items: center;
  }
  
  .savier-carousel-viewport {
    min-width: 0;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    touch-action: pan-x;

    scrollbar-width: none;
    cursor: grab;
  }

  .savier-carousel-viewport::-webkit-scrollbar {
    display: none;
  }

  .savier-carousel-viewport:active {
    cursor: grabbing;
  }
  
  .savier-carousel-track {
    display: flex;
    align-items: center;
    gap: 28px;
  
    width: max-content;
  
    will-change: transform;
  }
  
  .savier-carousel-item {
    width: 58px;
    height: 58px;
  
    flex: 0 0 58px;
  
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .savier-carousel-item img {
    width: 100%;
    height: 100%;
  
    display: block;
  
    object-fit: contain;
  }
  
  .savier-carousel-item--animation {
    width: 86px;
    height: 86px;
  
    flex-basis: 86px;
  }
  
  .savier-carousel-item video {
    width: 100%;
    height: 100%;
  
    display: block;
  
    object-fit: contain;
  
    border: 0;
    outline: 0;
    background: transparent;
  }
  
  .savier-carousel-arrow {
    width: 36px;
    height: 36px;
  
    padding: 0;
  
    display: grid;
    place-items: center;
  
    border: 1px solid rgba(254, 254, 254, 0.32);
    border-radius: 50%;
  
    background: transparent;
    color: var(--savier-light);
  
    font-family: Arial, sans-serif;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
  
    cursor: pointer;
  
    transition:
      background-color 180ms ease,
      border-color 180ms ease,
      transform 180ms ease;
  }
  
  @media (hover: hover) and (pointer: fine) {
    .savier-carousel-arrow:hover {
      background: rgba(254, 254, 254, 0.1);
      border-color: rgba(254, 254, 254, 0.62);
      transform: scale(1.06);
    }
  }
  
  
  .savier-style-block {
    grid-column: 1 / -1;
  
    display: grid;
    grid-template-columns:
      minmax(280px, 0.8fr)
      minmax(0, 1.2fr);
  
    gap: 96px;
    align-items: start;
  }
  
  .savier-style-copy {
    padding-top: 8px;
  }
  
  .savier-pdf-shell {
    width: 100%;
    height: 560px;
  
    overflow-x: hidden;
    overflow-y: auto;
  
    border-radius: 24px;
  
    background: #fff;
  
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }
  
  .savier-style-guide-image {
    width: 100%;
    height: auto;
  
    display: block;
  
    object-fit: contain;
  }
  
  
  /* =========================
     TABLET
     ========================= */
  
  @media (max-width: 900px) {
  
    .savier-intro {
      padding: 72px 0 96px;
    }
  
    .savier-intro-grid {
      grid-template-columns: 1fr;
      gap: 56px;
    }
  
    .savier-intro-copy {
      width: min(620px, 100%);
      min-height: 0;
  
      align-self: auto;
      justify-self: start;
  
      gap: 32px;
    }
  
    .savier-try {
      align-items: flex-start;
    }
  
  
    .savier-assets-grid {
      grid-template-columns: 1fr;
      gap: 72px;
    }
  
    .savier-style-block {
      grid-column: auto;
  
      grid-template-columns: 1fr;
      gap: 32px;
    }
  
    .savier-pdf-shell {
      width: 100%;
      height: min(72vh, 620px);
  
      overflow-x: hidden;
      overflow-y: auto;
  
      border-radius: 20px;
  
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
  
    .savier-style-guide-image {
      width: 100%;
      height: auto;
  
      display: block;
    }
  }
  
  
  @media (prefers-reduced-motion: reduce) {
    .savier-link-button {
      animation: none !important;
      transition: none;
    }
  }
  
  
  .savier-carousel-arrow img {
    width: 12px;
    height: 12px;
  
    display: block;
  
    object-fit: contain;
  
    pointer-events: none;
  }
  
  .savier-carousel-arrow--prev img {
    transform: rotate(180deg);
  }
  
  @media (max-width: 900px) {
    .savier-asset-block {
      grid-template-rows: auto auto;
    }
  
    .savier-carousel {
      margin-top: 40px;
    }
  }
  

/* =========================
   SAVIÉR CAROUSEL — TOUCH
   ========================= */

@media (hover: none), (pointer: coarse) {
  .savier-carousel-viewport {
    scroll-snap-type: x proximity;
  }

  .savier-carousel-item {
    scroll-snap-align: center;
  }

  .savier-carousel-arrow {
    width: 40px;
    height: 40px;
  }

  .savier-carousel-arrow img {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 600px) {
  .savier-carousel {
    width: 100%;

    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 8px;
  }

  .savier-carousel-viewport {
    width: 100%;
    min-width: 0;
  }

  .savier-carousel-track {
    gap: 24px;
  }

  .savier-carousel-item {
    width: 64px;
    height: 64px;

    flex: 0 0 64px;
  }

  .savier-carousel-item--animation {
    width: 84px;
    height: 84px;

    flex: 0 0 84px;
  }
}