/* Selected care hero: Diagonalna pot, without the decorative green stripe. */
.design-care[data-hero="07"] .design-hero-art {
  animation: none;
  transform: scale(calc(1 + var(--art-scroll-zoom, 0)));
}

@media (min-width: 881px) {
  .design-care .hero::before { background: #f6faf8; }

  .design-care .hero-headline,
  .design-care .hero-meta {
    width: min(46%, 620px);
  }

  .design-care .design-hero-media,
  .design-care .design-hero-media:hover {
    top: 128px;
    left: 50%;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #f2eee6;
    box-shadow: none;
    filter: drop-shadow(-12px 18px 24px rgba(33, 35, 34, .18));
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
    transform: none;
    animation: careDiagonalPanelIn .82s cubic-bezier(.2, .72, .22, 1);
  }

  .design-care .design-hero-media::after { display: none; }

  .design-care[data-hero="07"] .design-hero-art {
    inset: 0;
    clip-path: none;
    background-position: var(--care-hero-position, 66% center);
    transform: scale(calc(1 + var(--art-scroll-zoom, 0)));
    transform-origin: center;
  }

  .design-care .design-hero-frames { inset: 0; }

  @keyframes careDiagonalPanelIn {
    from {
      opacity: 0;
      clip-path: polygon(18% 0, 100% 0, 100% 100%, 6% 100%);
      transform: none;
    }
    to {
      opacity: 1;
      clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
      transform: none;
    }
  }
}

/* Services overview: a shorter editorial split with the homepage card language. */
@media (min-width: 881px) {
  .design-care .services-overview-hero {
    position: relative;
    height: auto;
    min-height: calc(100svh * var(--site-zoom-fill));
    padding: 128px 0 72px;
    overflow: hidden;
    background: #f6faf8;
  }

  .design-care .services-overview-hero__inner {
    display: grid;
    grid-template-rows: auto 1fr;
    height: auto;
    min-height: calc((100svh * var(--site-zoom-fill)) - 200px);
  }

  .design-care .services-overview-hero .breadcrumb {
    position: relative;
    z-index: 2;
    width: min(46%, 620px);
    margin-bottom: 0;
  }

  .design-care .services-overview-copy {
    position: relative;
    z-index: 2;
    align-self: center;
    width: min(46%, 620px);
    padding-top: 18px;
  }

  .design-care .services-overview-hero h1 {
    max-width: 9ch;
    font-size: clamp(4.2rem, 6.7vw, 6.4rem);
    line-height: .92;
  }

  .design-care .services-overview-hero .lede {
    max-width: 48ch;
    margin-top: 22px;
    font-size: clamp(.98rem, 1.15vw, 1.08rem);
    line-height: 1.58;
  }

  .design-care .services-overview-art {
    position: absolute;
    inset: 128px 0 0 50%;
    z-index: 1;
    overflow: hidden;
    background: #f2eee6;
    filter: drop-shadow(-12px 18px 24px rgba(33, 35, 34, .18));
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
  }

  .design-care .services-overview-art picture,
  .design-care .services-overview-art img {
    width: 100%;
    height: 100%;
  }

  .design-care .services-overview-art img {
    display: block;
    object-fit: cover;
    object-position: center;
  }
}

/* Individual services use the same full-height diagonal hero language. */
@media (min-width: 881px) {
  .design-care .service-hero {
    position: relative;
    min-height: calc(100svh * var(--site-zoom-fill));
    padding: 128px 0 72px;
    overflow: hidden;
    background: #f6faf8;
  }

  .design-care .service-hero > .wrap {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: calc((100svh * var(--site-zoom-fill)) - 200px);
  }

  .design-care .service-hero .breadcrumb {
    position: relative;
    z-index: 2;
    width: min(46%, 620px);
    margin-bottom: 0;
  }

  .design-care .service-hero-inner {
    position: static;
    display: flex;
    align-items: center;
    padding-top: 28px;
    opacity: 1 !important;
    transform: none !important;
  }

  .design-care .service-hero-copy {
    position: relative;
    z-index: 2;
    width: min(46%, 620px);
  }

  .design-care .service-hero h1 {
    max-width: 11ch;
    font-size: clamp(3.8rem, 4.9vw, 5.35rem);
    line-height: .95;
  }

  .design-care .service-hero-art {
    position: absolute;
    inset: 128px 0 0 50%;
    z-index: 1;
    width: auto;
    height: auto;
    min-width: 0;
    aspect-ratio: auto;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #f2eee6;
    box-shadow: none;
    filter: drop-shadow(-12px 18px 24px rgba(33, 35, 34, .18));
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
  }

  .design-care .service-hero-art picture,
  .design-care .service-hero-art img {
    width: 100%;
    height: 100%;
  }

  .design-care .service-hero-art img {
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    box-shadow: none;
  }
}

/* A simple, high-contrast cue makes the full-height service heroes feel intentional. */
.design-care .service-scroll-cue { display: none; }

@media (min-width: 881px) {
  .design-care .service-scroll-cue {
    position: absolute;
    /* Follow the centre of the copy column inside the max-width wrapper. */
    left: max(calc(50% - 326px), calc(23% + 30px));
    bottom: 45px;
    z-index: 4;
    display: grid;
    width: 60px;
    height: 60px;
    place-items: center;
    border: 0;
    background: transparent;
    color: #38413f;
    transform: translateX(-50%);
    transition: color .2s ease;
  }

  .design-care .service-scroll-cue:hover {
    color: #26312e;
  }

  .design-care .service-scroll-cue:focus-visible {
    border-radius: 6px;
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .design-care .service-scroll-cue__arrow {
    position: relative;
    display: block;
    width: 29px;
    height: 36px;
    animation: careServiceScrollArrow 1.8s cubic-bezier(.45, 0, .25, 1) infinite;
  }

  .design-care .service-scroll-cue__arrow::before,
  .design-care .service-scroll-cue__arrow::after {
    content: "";
    position: absolute;
    left: 50%;
  }

  .design-care .service-scroll-cue__arrow::before {
    top: 0;
    width: 2.25px;
    height: 25px;
    background: currentColor;
    transform: translateX(-50%);
  }

  .design-care .service-scroll-cue__arrow::after {
    bottom: 1px;
    width: 14px;
    height: 14px;
    border-right: 2.25px solid currentColor;
    border-bottom: 2.25px solid currentColor;
    transform: translateX(-50%) rotate(45deg);
  }
}

@keyframes careServiceScrollArrow {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(4px); }
}

/* Izkušnje mirrors the selected hero: full-bleed art on the left, story on the right. */
@media (min-width: 1200px) {
  .design-care .experience-stats {
    position: relative;
    min-height: 800px;
    padding: 0;
    overflow: hidden;
  }

  .design-care .experience-stats > .wrap {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .design-care .experience-stats .intro-grid {
    grid-template-columns: 50% 50%;
    grid-template-rows: auto 1fr;
    gap: 0;
    height: clamp(800px, 100svh, 900px);
    min-height: 0;
    align-items: stretch;
  }

  .design-care .experience-art {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
    filter: drop-shadow(12px 18px 24px rgba(33, 35, 34, .18));
  }

  .design-care .experience-art img {
    object-position: center 18%;
  }

  .design-care .experience-stats .intro-text {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    padding: 86px max(var(--gutter), calc((100vw - 1200px) / 2)) 24px clamp(54px, 5vw, 88px);
  }

  .design-care .experience-stats .intro-stats {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-self: start;
    padding: 8px max(var(--gutter), calc((100vw - 1200px) / 2)) 72px clamp(54px, 5vw, 88px);
  }

  .design-care .experience-stats .stat {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 18px;
    padding: 22px 0;
    border-top: 1px solid var(--line);
    border-bottom: 0;
  }

  .design-care .experience-stats .stat-num,
  .design-care .experience-stats .stat-num[data-count="5000"] {
    font-size: clamp(2.65rem, 3.35vw, 4rem);
  }
}

@media (min-width: 881px) and (max-width: 1199px) {
  .design-care .experience-stats .intro-grid {
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1fr);
  }

  .design-care .experience-art {
    grid-column: 1;
    grid-row: 1;
  }

  .design-care .experience-stats .intro-text {
    grid-column: 2;
    grid-row: 1;
  }

  .design-care .experience-stats .intro-stats {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (min-width: 881px) and (max-width: 1100px) {
  .design-care[data-hero="07"] .design-hero-art {
    background-image:
      linear-gradient(180deg, rgba(240,248,244,.025), rgba(23,53,45,.035)),
      var(--care-hero-mobile-image, var(--care-hero-image));
    background-position: center;
    background-size: 100% 100%, cover;
  }

  .design-care .service-hero .breadcrumb,
  .design-care .service-hero-copy {
    width: 48%;
  }

  .design-care .service-hero h1 {
    font-size: clamp(3.25rem, 6vw, 4.25rem);
  }
}

/* Every care illustration responds to scroll with scale only: no lift, tilt, or jumping. */
.design-care :is(.experience-art, .faq-art, .service-hero-art, .services-overview-art, .sketch-map-card) {
  transform: none !important;
}

.design-care :is(.experience-art, .faq-art, .service-hero-art, .services-overview-art) img,
.design-care .sketch-map-card__media img {
  transform: scale(calc(1 + var(--art-scroll-zoom, 0)));
  transform-origin: center;
  will-change: transform;
}

@media (max-width: 880px) {
  .design-care .services-overview-hero {
    height: auto;
    min-height: 0;
    padding: 98px 0 48px;
    overflow: hidden;
  }

  .design-care .services-overview-hero__inner {
    display: block;
    height: auto;
  }

  .design-care .services-overview-hero .breadcrumb {
    margin-bottom: 28px;
  }

  .design-care .services-overview-copy {
    width: 100%;
  }

  .design-care .services-overview-hero h1 {
    max-width: none;
    font-size: clamp(3.4rem, 14vw, 4.7rem);
  }

  .design-care .services-overview-hero .lede {
    max-width: 34ch;
    margin-top: 20px;
    font-size: 1rem;
    line-height: 1.6;
  }

  .design-care .services-overview-art {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 4 / 5;
    margin-top: 34px;
    overflow: hidden;
    border-radius: 24px;
    background: #f2eee6;
    box-shadow: 0 26px 56px rgba(38, 40, 39, .2);
    clip-path: none;
  }

  .design-care .services-overview-art picture,
  .design-care .services-overview-art img {
    width: 100%;
    height: 100%;
  }

  .design-care .services-overview-art img {
    display: block;
    object-fit: cover;
    object-position: center;
  }

  .design-care .hero {
    padding-bottom: 20px;
  }

  .design-care .design-hero-media {
    width: calc(100% - var(--gutter) - var(--gutter));
    margin-right: var(--gutter);
    margin-left: var(--gutter);
  }

  .design-care .design-hero-art {
    transform: scale(calc(1 + var(--art-scroll-zoom, 0)));
  }

  .design-care .service-hero-copy {
    order: 0;
  }

  .design-care .service-hero-art {
    order: 1;
  }
}

@media (max-width: 650px) {
  .design-care .waits {
    padding-top: 24px;
  }

  .design-care[data-hero="07"] .design-hero-art {
    background-image:
      linear-gradient(180deg, rgba(240,248,244,.025), rgba(23,53,45,.035)),
      var(--care-hero-mobile-image, var(--care-hero-image));
    background-position: center, center;
    background-size: 100% 100%, 100% auto;
    background-repeat: no-repeat;
  }
}

@media (min-width: 881px) and (prefers-reduced-motion: reduce) {
  .design-care .design-hero-media {
    animation: none;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .design-care .service-scroll-cue__arrow { animation: none; }
  .design-care .design-hero-art,
  .design-care :is(.experience-art, .faq-art, .service-hero-art, .services-overview-art) img,
  .design-care .sketch-map-card__media img {
    transform: none !important;
    will-change: auto;
  }
}

@media (forced-colors: active) {
  .design-care .design-hero-media {
    border: 2px solid CanvasText;
    filter: none;
  }
}