@layer components {
  .hero {
    position: relative;
    isolation: isolate;
    block-size: 263.5cqi;
    overflow: hidden;
    background-color: oklch(0.97 0 0);
  }

  .hero__photo-bg {
    position: absolute;
    z-index: -1;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100cqi;
    block-size: 153cqi;
    overflow: hidden;
  }

  .hero__photo-bg-img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    object-fit: cover;
  }

  .hero__slide {
    position: absolute;
    inline-size: 100cqi;
    block-size: 42cqi;
    pointer-events: none;
  }

  .hero__slide--top {
    inset-block-start: 0;
    inset-inline-start: 0;
    filter: drop-shadow(0.75cqi 1cqi 1cqi oklch(0.72 0 0 / 0.25));
    animation: hero-slide-top-marquee 24s linear infinite;
    will-change: transform;
  }

  .hero__slide--bottom {
    inset-block-start: 89.75cqi;
    inset-inline-start: 0;
  }

  .hero__slide-card {
    position: absolute;
    inline-size: 29cqi;
    block-size: 37cqi;
    max-inline-size: none;
    object-fit: cover;
    background-color: oklch(1 0 0);
  }

  .hero__slide-card--top-a {
    inset-inline-start: 0;
    inset-block-start: 5cqi;
  }

  .hero__slide-card--top-b {
    inset-inline-start: 30.75cqi;
    inset-block-start: 0;
  }

  .hero__slide-card--top-c {
    inset-inline-start: 62cqi;
    inset-block-start: 5cqi;
  }

  .hero__slide-card--top-d {
    inset-inline-start: 93cqi;
    inset-block-start: 0;
  }

  .hero__slide-card--top-e {
    inset-inline-start: 124cqi;
    inset-block-start: 5cqi;
  }

  .hero__slide-card--top-a-copy {
    inset-inline-start: 154.75cqi;
    inset-block-start: 5cqi;
  }

  .hero__slide-card--top-b-copy {
    inset-inline-start: 185.5cqi;
    inset-block-start: 0;
  }

  .hero__slide-card--top-c-copy {
    inset-inline-start: 216.75cqi;
    inset-block-start: 5cqi;
  }

  .hero__slide-card--top-d-copy {
    inset-inline-start: 247.75cqi;
    inset-block-start: 0;
  }

  .hero__slide-card--top-e-copy {
    inset-inline-start: 278.75cqi;
    inset-block-start: 5cqi;
  }

  .hero__slide-card--bottom-a {
    inset-inline-start: -53cqi;
    inset-block-start: 0;
  }

  .hero__slide-card--bottom-b {
    inset-inline-start: 9cqi;
    inset-block-start: -0.75cqi;
  }

  .hero__slide-card--bottom-c {
    inset-inline-start: 39.5cqi;
    inset-block-start: 5cqi;
  }

  .hero__slide-card--bottom-d {
    inset-inline-start: 71cqi;
    inset-block-start: -0.75cqi;
  }

  .hero__slide-card--bottom-e {
    inset-inline-start: 101.75cqi;
    inset-block-start: 5cqi;
  }

  .hero__copy {
    display: contents;
  }

  .hero__eyebrow {
    position: absolute;
    z-index: 3;
    inset-block-start: 45.45cqi;
    inset-inline-start: 7.25cqi;
    display: block;
    inline-size: 85.3cqi;
    block-size: 13.2cqi;
  }

  .hero__eyebrow-img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
  }

  .hero__headline {
    position: absolute;
    z-index: 4;
    inset-block-start: 57.25cqi;
    inset-inline-start: 5.4cqi;
    display: block;
    inline-size: 89.25cqi;
    block-size: 29.25cqi;
  }

  .hero__headline-img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
  }

  .hero__syatyo {
    position: absolute;
    z-index: 5;
    inset-block-start: 111.75cqi;
    inset-inline-start: 54cqi;
    inline-size: 42.25cqi;
    block-size: 27.5cqi;
    pointer-events: none;
    animation: hero-syatyo-float 3.6s ease-in-out infinite;
    will-change: transform;
  }

  .hero__syatyo-img {
    position: absolute;
    inset-inline-end: -4.25cqi;
    inset-block-start: 4.75cqi;
    inline-size: 38.25cqi;
    block-size: auto;
    max-inline-size: none;
    filter: drop-shadow(0.75cqi 1cqi 0.75cqi oklch(0 0 0 / 0.14));
  }

  .hero__badges {
    position: absolute;
    z-index: 4;
    inset-block-start: 137.75cqi;
    inset-inline-start: 2.5cqi;
    display: grid;
    grid-template-columns: repeat(3, 31cqi);
    gap: 1cqi;
  }

  .hero__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    inline-size: 31cqi;
    block-size: 31cqi;
    border-radius: var(--radius-full);
    background-color: oklch(0.45 0 0);
    background-image:
      linear-gradient(oklch(0.38 0 0 / 0.96), oklch(0.38 0 0 / 0.96)),
      url("../../assets/images/hero/badge-texture.png");
    background-size: cover;
    background-position: center;
    background-blend-mode: normal, multiply;
    color: oklch(0.96 0 0);
    font-family: var(--font-hero);
    font-size: 3.75cqi;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-align: center;
  }

  .hero__badge strong {
    color: var(--color-highlight);
    font-size: 4cqi;
    font-weight: 900;
  }

  .hero__cta {
    position: absolute;
    z-index: 3;
    inset-block-start: 174.75cqi;
    inset-inline-start: 3.75cqi;
    display: flex;
    flex-direction: column;
    align-items: center;
    inline-size: 92.5cqi;
    min-block-size: 76.75cqi;
    padding: 8cqi 2.25cqi 9cqi;
    border-radius: 7.5cqi;
    overflow: hidden;
    background-color: transparent;
    background-image: url("../../assets/images/cta/cta-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 8px 24px oklch(0 0 0 / 0.24);
  }

  .hero__cta-heading {
    inline-size: 88cqi;
    color: var(--color-instagram-dark);
    font-family: var(--font-hero);
    font-size: 5cqi;
    font-weight: 900;
    line-height: 1.6;
    letter-spacing: 0;
    text-align: center;
    text-shadow:
      0 -0.5cqi 0 oklch(1 0 0),
      0.5cqi -0.5cqi 0 oklch(1 0 0),
      0.5cqi 0 0 oklch(1 0 0),
      0.5cqi 0.5cqi 0 oklch(1 0 0),
      0 0.5cqi 0 oklch(1 0 0),
      -0.5cqi 0.5cqi 0 oklch(1 0 0),
      -0.5cqi 0 0 oklch(1 0 0),
      -0.5cqi -0.5cqi 0 oklch(1 0 0);
    margin-block-end: 1cqi;
  }

  .hero__cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 2cqi;
    inline-size: 88cqi;
    margin-block-end: 4cqi;
  }

  .hero__cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 20cqi;
    border-radius: 2.5cqi;
    font-family: var(--font-hero);
    text-align: center;
    text-decoration: none;
  }

  .hero__cta-btn--web {
    background-image: linear-gradient(101deg, oklch(0.69 0.17 45), var(--color-warm));
    box-shadow: inset 0 -4px 0 0 var(--color-warm-dark);
    color: var(--color-highlight);
    font-size: 5.5cqi;
    font-weight: 900;
    line-height: 1.6;
    letter-spacing: 0;
  }

  .hero__cta-btn--tel {
    flex-direction: column;
    gap: 0.5cqi;
    background-color: oklch(1 0 0);
    border: 2px solid oklch(1 0 0);
    box-shadow: inset 0 -4px 0 0 oklch(0.8 0.01 260);
    color: var(--color-instagram);
  }

  .hero__cta-btn-label {
    font-size: 3.75cqi;
    font-weight: 700;
    line-height: 1.35;
  }

  .hero__cta-btn-number {
    font-size: 5cqi;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0;
  }

  .hero__cta-hours {
    inline-size: 88cqi;
    color: oklch(1 0 0);
    font-family: var(--font-hero);
    font-size: 3.5cqi;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: center;
  }

  @keyframes hero-slide-top-marquee {
    from {
      transform: translate3d(0, 0, 0);
    }

    to {
      transform: translate3d(-154.75cqi, 0, 0);
    }
  }

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

    50% {
      transform: translate3d(0, -2cqi, 0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__slide--top,
    .hero__syatyo {
      animation: none;
      will-change: auto;
    }
  }
}