/* ============================================
   Hero Mosaic - asymmetric overlapping tiles
   (positions taken from the Chloe template's own desktop/mobile layout)
   ============================================ */
/* Capped at a max-width and centered (like the template's own fixed 1200px
   canvas) instead of stretching edge-to-edge - otherwise on wide monitors
   the mosaic keeps growing taller (since height tracks the full viewport
   width) and the bleeding tiles reach all the way to the browser edge,
   neither of which happens in the template. */
.hero-mosaic-grid {
    position: relative;
    width: 100%;
    max-width: 1500px;
    aspect-ratio: 1200 / 924;
    margin: 0 auto;
    z-index: 0;
}

.hero-mosaic-item {
    position: absolute;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 16px 34px rgba(35, 31, 32, 0.28);
}

    .hero-mosaic-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Desktop tile positions (design box 1200x924) */
.hero-mosaic-item:nth-child(1) { left: -15.08%; top: 31.39%; width: 28.08%; height: 48.6%; }
.hero-mosaic-item:nth-child(2) { left: 28.83%; top: 6.49%; width: 42.67%; height: 75.22%; }
.hero-mosaic-item:nth-child(3) { left: 8.33%; top: 16.45%; width: 25.67%; height: 43.4%; }
.hero-mosaic-item:nth-child(4) { left: 66.92%; top: 39.29%; width: 22.75%; height: 38.53%; }
.hero-mosaic-item:nth-child(5) { left: 95.33%; top: 35.93%; width: 18.67%; height: 32.79%; }
.hero-mosaic-item:nth-child(6) { left: 81.42%; top: 25.97%; width: 16.42%; height: 24.03%; }

/* Small tracked caption near the bottom of the hero, matching the template's
   treatment (a single uppercase Lato line, not a big serif headline). */
.hero-caption {
    /* Centered via left/right + margin auto rather than a transform, since
       .fly-in-element.is-visible sets its own transform (translateY) with
       higher specificity and would otherwise clobber a translateX centering
       transform once the reveal animation kicks in. */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8%;
    z-index: 2;
    width: 90%;
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

    /* .hero-mosaic prefix bumps specificity above the generic .hero p rule
       (used by other pages' plain hero headers) which shares the same
       specificity as a bare .hero-caption p selector and could otherwise
       win depending on stylesheet load order. */
    .hero-mosaic .hero-caption p {
        margin: 0;
        font-family: 'Lato', sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.4;
        color: var(--earth-text-dark);
        text-shadow: 0 1px 3px rgba(255, 255, 246, 0.6), 0 0 14px rgba(255, 255, 246, 0.5);
    }

/* ============================================
   Intro Band
   ============================================ */
.intro-band {
    width: 100%;
    background: var(--earth-brand);
    color: var(--earth-lightest);
    padding: 5rem 3rem 9rem;
}

.intro-band-inner {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.intro-band-title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    max-width: 620px;
    margin: 0 auto 1rem;
    line-height: 1.3;
}

.intro-band-subtitle {
    max-width: 560px;
    margin: 0 auto;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 1.05rem;
    line-height: 1.8;
    opacity: 0.9;
}

/* ============================================
   My Approach
   ============================================ */
.my-approach {
    padding-bottom: 7rem;
}

/* Collage strip: images that bleed up into the intro band above,
   positioned exactly as in the Chloe template (percentages derived from
   its own 1200x390 design box for this zone). This is intentionally
   much wider than .my-approach-body below - it's allowed to stretch
   close to full viewport width on large screens instead of being capped
   at the same reading-width container as the text/image content. */
.my-approach-collage {
    position: relative;
    width: 100%;
    max-width: 1900px;
    margin: 0 auto 3rem;
    aspect-ratio: 1200 / 390;
}

.my-approach-tile {
    position: absolute;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 16px 36px rgba(35, 31, 32, 0.22);
}

    .my-approach-tile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.my-approach-tile-left   { left: -6%;  top: -18%; width: 28%; height: 62%; }
.my-approach-tile-cycle  { left: 63%;  top: -18%; width: 21%; height: 66%; }
.my-approach-tile-right  { left: 86%;  top: -32%; width: 20%; height: 78%; }
.my-approach-tile-corner { left: 86%;  top: 49%;  width: 18%; height: 42%; }

.my-approach-tile-cycle .cycle-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: myApproachCycle 9s infinite ease-in-out;
    will-change: opacity;
}

    .my-approach-tile-cycle .cycle-img-2 {
        animation-delay: -4.5s;
    }

@keyframes myApproachCycle {
    0%, 35% {
        opacity: 1;
    }

    50%, 85% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.my-approach-body {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.my-approach-image-main {
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 20px 45px rgba(35, 31, 32, 0.2);
}

    .my-approach-image-main img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.my-approach-content {
    text-align: left;
}

    .my-approach-content .section-title {
        text-align: left;
        margin-bottom: 1.5rem;
    }

    .my-approach-content p {
        font-size: 1.05rem;
        line-height: 1.9;
        font-weight: 300;
        opacity: 0.85;
        margin-bottom: 2rem;
    }

/* ============================================
   Meet The Team (dark band)
   ============================================ */
.team-band {
    background: var(--earth-darkest);
    color: var(--earth-lightest);
    padding: 6rem 4rem;
}

/* Constrains the text+image pair to a reasonable width and centers that
   whole unit in the (full-bleed) dark band, so the two sit snugly next
   to each other instead of each floating within an oversized half-width
   column. */
.team-band-inner {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 4rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.team-band-image {
    aspect-ratio: 4/5;
    overflow: hidden;
    border-radius: 4px;
}

    .team-band-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.team-band-content {
    text-align: left;
}

.team-band-title {
    text-align: left;
    color: var(--earth-lightest);
    margin-bottom: 0.75rem;
}

.team-band-tagline {
    margin-bottom: 1.75rem;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.8rem;
    font-weight: 300;
    opacity: 0.7;
}

.team-band-content p {
    font-size: 1.05rem;
    line-height: 1.9;
    font-weight: 300;
    opacity: 0.85;
    margin-bottom: 2rem;
}

/* ============================================
   Portfolio - single-slide carousel
   ============================================ */
.portfolio-carousel {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 4rem 5rem 3rem;
}

.portfolio-slide-viewport {
    position: relative;
    min-height: 420px;
}

.portfolio-slide {
    display: none;
    grid-template-columns: 1fr 0.75fr 1fr;
    gap: 1.5rem;
    align-items: end;
}

    .portfolio-slide.active {
        display: grid;
    }

.portfolio-slide-images {
    display: contents;
}

.portfolio-img-large {
    height: 52vh;
    overflow: hidden;
    border-radius: 4px;
}

.portfolio-img-small {
    height: 38vh;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 0;
}

    .portfolio-img-large img, .portfolio-img-small img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.portfolio-slide-text {
    grid-column: 3;
    align-self: center;
    text-align: left;
    margin-top: 0;
}

    .portfolio-slide-text h2 {
        font-family: 'Literata', serif;
        font-weight: 200;
        font-size: 1.9rem;
        margin-bottom: 1rem;
    }

    .portfolio-slide-text p {
        font-size: 1rem;
        line-height: 1.8;
        font-weight: 300;
        opacity: 0.85;
        margin-bottom: 1.5rem;
        max-width: 640px;
    }

.portfolio-nav-btn {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    z-index: 5;
}

    .portfolio-nav-btn:hover {
        transform: translateY(-50%) scale(1.06);
    }

    .portfolio-nav-btn:active {
        transform: translateY(-50%) scale(0.96);
    }

    .portfolio-nav-btn svg {
        width: 22px;
        height: 22px;
    }

.portfolio-prev {
    left: 0.5rem;
}

.portfolio-next {
    right: 0.5rem;
}

.portfolio-counter {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
    font-family: 'Lato', sans-serif;
    letter-spacing: 0.1em;
    font-size: 1rem;
    color: var(--earth-brand);
}

.portfolio-counter-divider {
    display: inline-block;
    width: 1.5rem;
    height: 1px;
    background: var(--earth-border-accent);
}

/* ============================================
   Testimonials ("Love Letters")
   ============================================ */
.testimonials {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 6rem 4rem;
    text-align: center;
}

.testimonial-image {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 2rem;
}

    .testimonial-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.testimonial-slide-viewport {
    margin-top: 3rem;
    min-height: 160px;
}

.testimonial-slide {
    display: none;
}

    .testimonial-slide.active {
        display: block;
    }

    .testimonial-slide p {
        font-family: 'Nanum Myeongjo', serif;
        font-size: 1.2rem;
        line-height: 2;
        font-style: italic;
    }

    .testimonial-slide h3 {
        margin-top: 1.5rem;
        font-family: 'Lato', sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        font-size: 0.85rem;
        font-weight: 300;
        color: var(--earth-brand);
    }

.testimonial-nav-btn {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
}

    .testimonial-nav-btn:hover {
        transform: translateY(-50%) scale(1.06);
    }

    .testimonial-nav-btn:active {
        transform: translateY(-50%) scale(0.96);
    }

    .testimonial-nav-btn svg {
        width: 18px;
        height: 18px;
    }

.testimonial-prev {
    left: 0.5rem;
}

.testimonial-next {
    right: 0.5rem;
}

/* ============================================
   Teaser ("Behind the Scenes")
   ============================================ */
.teaser {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 6rem 3rem;
}

.teaser-images {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 1.5rem;
    align-items: end;
}

.teaser-img-large {
    aspect-ratio: 4/5;
    overflow: hidden;
    border-radius: 4px;
}

.teaser-img-small {
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 2rem;
}

    .teaser-img-large img, .teaser-img-small img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.teaser-content {
    text-align: left;
}

    .teaser-content .section-title {
        text-align: left;
        margin-bottom: 2rem;
    }

/* ============================================
   Final CTA ("Let's Connect")
   ============================================ */
.contact {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 8rem 4rem;
    text-align: center;
}

/* ============================================
   Responsive - Tablet
   ============================================ */
@media (max-width: 1024px) {
    .section-title {
        font-size: 2.5rem;
    }

    .my-approach {
        padding: 0 2rem 4rem;
    }

    .my-approach-body {
        padding: 0;
    }

    .my-approach-body {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }

    .team-band {
        padding: 4rem 2rem;
        text-align: center;
    }

    .team-band-inner,
    .teaser {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }

    .teaser {
        padding: 4rem 2rem;
    }

        .my-approach-content, .team-band-content, .teaser-content {
            text-align: center;
            max-width: none;
            margin: 0 auto;
        }

            .my-approach-content .section-title,
            .team-band-title,
            .teaser-content .section-title {
                text-align: center;
            }

    .portfolio-slide {
        grid-template-columns: 1fr 1fr;
    }

    .portfolio-img-large,
    .portfolio-img-small {
        height: 42vh;
    }

    .portfolio-slide-text {
        grid-column: 1 / -1;
        text-align: center;
        margin-top: 2rem;
    }

        .portfolio-slide-text p {
            max-width: none;
            margin-left: auto;
            margin-right: auto;
        }
}

/* ============================================
   Responsive - Mobile
   ============================================ */
@media (max-width: 768px) {
    /* Mobile tile positions (design box 341x485) - the big background tile is dropped */
    .hero.hero-mosaic {
        min-height: 400px;
    }

    .hero-mosaic-grid {
        max-width: none;
        aspect-ratio: 341 / 485;
    }

    .hero-mosaic-item:nth-child(1) {
        display: none;
    }

    .hero-mosaic-item:nth-child(2) { left: 11.14%; top: 7.22%; width: 71.55%; height: 71.34%; }
    .hero-mosaic-item:nth-child(3) { left: -35.19%; top: 19.79%; width: 44.28%; height: 46.39%; }
    .hero-mosaic-item:nth-child(4) { left: -6.45%; top: 54.43%; width: 30.2%; height: 29.9%; }
    .hero-mosaic-item:nth-child(5) { left: 85.04%; top: 38.14%; width: 32.84%; height: 32.78%; }
    .hero-mosaic-item:nth-child(6) { left: 73.61%; top: 19.79%; width: 31.97%; height: 30.31%; }

    .intro-band {
        padding: 3rem 1.5rem 7rem;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .my-approach {
        padding: 0 1.5rem 3rem;
    }

    .my-approach-body {
        padding: 0;
    }

    .team-band,
    .teaser {
        padding: 3rem 1.5rem;
    }

    /* Mobile collage positions (design box 341x167) - the left tile is dropped */
    .my-approach-collage {
        aspect-ratio: 341 / 167;
    }

    .my-approach-tile-left {
        display: none;
    }

    .my-approach-tile-cycle  { left: 30%; top: -10%; width: 30%; height: 45%; }
    .my-approach-tile-right  { left: 65%; top: -20%; width: 33%; height: 58%; }
    .my-approach-tile-corner { left: 65%; top: 42%;  width: 30%; height: 40%; }

    .portfolio-carousel {
        padding: 3rem 1.5rem 3rem;
    }

    .portfolio-slide, .teaser-images {
        grid-template-columns: 1fr;
    }

    .portfolio-img-large {
        height: 48vh;
    }

    .portfolio-img-small {
        height: 36vh;
        margin-bottom: 1.5rem;
    }

    .portfolio-slide-text {
        grid-column: 1;
        margin-top: 1.5rem;
    }

    .portfolio-nav-btn {
        top: auto;
        bottom: -1rem;
        transform: none;
        width: 48px;
        height: 48px;
    }

        .portfolio-nav-btn:hover {
            transform: scale(1.06);
        }

        .portfolio-nav-btn:active {
            transform: scale(0.96);
        }

    .portfolio-prev {
        left: 0.5rem;
    }

    .portfolio-next {
        right: 0.5rem;
    }

    .testimonials {
        padding: 4rem 3rem;
    }

    .testimonial-nav-btn {
        width: 36px;
        height: 36px;
    }

    .contact {
        padding: 4rem 1.5rem;
    }

    .contact-link {
        padding: 1rem 2rem;
    }
}