/* Original: Theo Plawinski / Codrops, MIT. See vendor/STICKY-GRID-LICENSE.txt.
   Original rem = 100vw / 1440; converted locally to preserve store header/footer sizing. */
#main { --font-secondary: Times, serif; color: #000; font-family: Arial, sans-serif; font-size: calc(16 * 100vw / 1440); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
#main :where(figure, figcaption, h2, p, ul, li) { margin: 0; padding: 0; font-weight: 400; }
#main ul { list-style: none; }
#main img { display: block; }
#main .content__button { display: block; color: #000; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
/* ---------------- Block intro ---------------- */

.block--intro {
    position: relative;
    z-index: 1;
}

.media {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    padding: 0 calc(24 * 100vw / 1440);
}

.media__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: lightgray;
}

.media__caption {
    position: relative;
    width: 100%;
    line-height: 1.3;
    text-transform: none;
    text-align: center;
}

.hero-brand-title {
    display: block;
    width: min(91.52vw, 101.4vh, 1170px);
    margin-inline: auto;
    line-height: 0;
    color: #fff;
    opacity: 0.58;
    white-space: nowrap;
}

.hero-pixel-wordmark {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(3px 3px 0 rgb(255 255 255 / 15%));
}

.hero-brand-location {
    display: block;
    margin-top: 20px;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.24em;
    color: rgb(255 255 255 / 75%);
}

.hero-brand-subtitle {
    display: block;
    margin-top: 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(11px, 1.15vw, 17px);
    font-weight: 400;
    letter-spacing: 0.18em;
    color: rgb(255 255 255 / 85%);
}

/* ---------------- Block main ---------------- */

.block.block--main {
    height: 425vh;
}

.block__wrapper {
    position: sticky;
    top: 0;
    padding: 0 calc(24 * 100vw / 1440);
    will-change: transform;
    overflow: hidden;
}

.content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    text-align: center;
    z-index: 1;
}

@font-face {
    font-family: 'Fredoka';
    src: url('/assets/fonts/Fredoka.ttf') format('truetype');
    font-weight: 300 700;
    font-display: swap;
}

#main .content__title {
    color: #000;
    opacity: 1 !important;
    width: calc(924 * 100vw / 1440);
    font-family: 'Fredoka', sans-serif;
    font-weight: 550;
    font-variation-settings: 'wdth' 90;
    font-size: calc(104 * 100vw / 1440);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.content__description {
    width: calc(455 * 100vw / 1440);
    margin-top: calc(24 * 100vw / 1440);
    font-size: calc(14 * 100vw / 1440);
    line-height: 1.3;
    text-transform: uppercase;
}

.content__button {
    margin-top: calc(32 * 100vw / 1440);
    font-size: calc(14 * 100vw / 1440);
    text-transform: uppercase;

    &:hover {
        text-decoration: underline;
        text-underline-offset: 2px;
    }
}

/* ---------------- Gallery ---------------- */

.gallery {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: calc(736 * 100vw / 1440);
}

.gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: calc(32 * 100vw / 1440);
    row-gap: calc(40 * 100vw / 1440);
    will-change: transform;
}

.gallery__item {
    width: 100%;
    aspect-ratio: 1;
    will-change: transform;
}

.gallery__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: lightgray;
}

/* Two-line brand lockup in the pinned scroll scene. */
#main .content__title{width:min(90vw,1100px)}
.hero-design-name{display:block;font-family:"MS Pretendard",sans-serif;font-size:clamp(36px,6.2vw,90px);font-weight:500;line-height:1.1;letter-spacing:-.045em}
.hero-design-location{display:block;margin-top:6px;font-family:"MS Pretendard",sans-serif;font-size:clamp(16px,1.65vw,24px);font-weight:500;line-height:1.15;letter-spacing:.16em}

.hero-brand-title{width:100%;font-family:Arial,sans-serif;font-size:clamp(48px,12vw,180px);font-weight:800;line-height:1;letter-spacing:-.065em;color:#111;opacity:1;white-space:nowrap}.hero-brand-subtitle{color:#263344;font-size:clamp(14px,1.5vw,22px);letter-spacing:.12em}.media:after{content:"";position:absolute;inset:0;background:rgb(255 255 255 / 22%);pointer-events:none}.media__caption{z-index:1}.content__description{font-size:clamp(14px,1.4vw,20px);width:min(86vw,550px)}#main .content__button{font-size:clamp(14px,1.2vw,18px)}

/* Service labels travel with each animated hero tile. */
.gallery__item{position:relative;overflow:hidden}
.gallery__label{position:absolute;z-index:1;inset:auto 0 0;display:block;padding:24% 7% 8%;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;font-family:"MS Pretendard",sans-serif;font-size:clamp(9px,1.25vw,18px);font-weight:600;line-height:1.35;letter-spacing:-.025em;text-align:left;word-break:keep-all;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.3)}

.hero-brand-repair,.hero-brand-sim{display:block;margin-top:12px;font-family:Arial,sans-serif;font-size:clamp(48px,12vw,180px);font-weight:800;line-height:1;letter-spacing:-.065em;color:#111;white-space:nowrap}

.hero-brand-title,.hero-brand-repair,.hero-brand-sim{opacity:.6}