/* =========================================================
   IKETAN.ID
   About / Tentang Responsive Stylesheet
   ---------------------------------------------------------
   Base:
   /assets/css/tentang.css

   Global responsive:
   /assets/css/responsive/global-responsive.css

   Scope:
   - About hero
   - Origin story
   - Simple beginning
   - Name story
   - Cart identity
   - Brand voice
   - Growth
   - Quality
   - Legal
   - Closing

   Breakpoints:
   <= 1180px
   <= 1024px
   <= 900px
   <= 768px
   <= 576px
   <= 380px
   ========================================================= */


/* =========================================================
   01. SMALL DESKTOP / LAPTOP
   <= 1180px
   ========================================================= */

@media (max-width: 1180px) {

    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .about-hero-content {
        max-width: 760px;
    }


    .about-hero-title {
        font-size:
            clamp(
                4.5rem,
                7.5vw,
                7rem
            );
    }


    /* -----------------------------------------------------
       ORIGIN
       ----------------------------------------------------- */

    .about-origin-layout {
        gap: 64px;
    }


    .about-origin-year {
        font-size:
            clamp(
                7rem,
                16vw,
                13rem
            );
    }


    /* -----------------------------------------------------
       SIMPLE
       ----------------------------------------------------- */

    .about-simple-grid {
        gap: 70px;
    }


    .about-simple-visual {
        min-height: 600px;
    }


    /* -----------------------------------------------------
       NAME
       ----------------------------------------------------- */

    .about-name-layout {
        gap: 72px;
    }


    .about-name-step {
        min-height: 300px;
    }


    /* -----------------------------------------------------
       CART
       ----------------------------------------------------- */

    .about-cart-layout {
        gap: 70px;
    }


    .about-cart-visual,
    .about-cart-image {
        min-height: 600px;
    }


    /* -----------------------------------------------------
       QUALITY
       ----------------------------------------------------- */

    .about-quality-layout {
        gap: 70px;
    }


    .about-quality-visual {
        min-height: 540px;
    }


    /* -----------------------------------------------------
       LEGAL
       ----------------------------------------------------- */

    .about-legal-card {
        min-height: 500px;
    }

}


/* =========================================================
   02. TABLET LANDSCAPE
   <= 1024px
   ========================================================= */

@media (max-width: 1024px) {

    /* =====================================================
       HERO
       ===================================================== */

    .about-hero-container {
        padding-top:
            calc(
                var(--navbar-height) +
                58px
            );

        padding-bottom: 30px;
    }


    .about-hero-title {
        font-size:
            clamp(
                4.2rem,
                8vw,
                6.4rem
            );
    }


    .about-hero-description {
        max-width: 470px;
    }


    /* =====================================================
       ORIGIN
       ===================================================== */

    .about-origin-layout {
        grid-template-columns:
            minmax(0, 0.8fr)
            minmax(0, 1.2fr);

        gap: 54px;
    }


    .about-origin-year {
        font-size:
            clamp(
                6.5rem,
                15vw,
                11rem
            );
    }


    /* =====================================================
       SIMPLE
       ===================================================== */

    .about-simple-container {
        gap: 56px;
    }


    .about-simple-grid {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);

        gap: 54px;
    }


    .about-simple-heading h2 {
        font-size:
            clamp(
                3.8rem,
                7vw,
                6rem
            );
    }


    .about-simple-visual {
        min-height: 540px;
    }


    .about-simple-product {
        width:
            min(
                72%,
                390px
            );
    }


    /* =====================================================
       NAME STORY
       ===================================================== */

    .about-name-layout {
        grid-template-columns:
            minmax(0, 0.75fr)
            minmax(0, 1.25fr);

        gap: 52px;
    }


    .about-name-sticky
    .section-title {
        font-size:
            clamp(
                3.3rem,
                5.5vw,
                4.8rem
            );
    }


    .about-name-step {
        min-height: 270px;

        grid-template-columns:
            56px
            minmax(0, 1fr);
    }


    /* =====================================================
       CART
       ===================================================== */

    .about-cart-layout {
        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(0, 0.95fr);

        gap: 54px;
    }


    .about-cart-visual,
    .about-cart-image {
        min-height: 540px;
    }


    /* =====================================================
       BRAND VOICE
       ===================================================== */

    .about-voice-heading {
        margin-bottom: 52px;
    }


    .about-voice-track {
        animation-duration: 34s;
    }


    /* =====================================================
       GROWTH
       ===================================================== */

    .about-growth-step {
        min-height: 270px;

        padding:
            30px
            26px
            32px;
    }


    /* =====================================================
       QUALITY
       ===================================================== */

    .about-quality-layout {
        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(0, 1.05fr);

        gap: 54px;
    }


    .about-quality-visual {
        min-height: 500px;
    }


    /* =====================================================
       LEGAL
       ===================================================== */

    .about-legal-card {
        min-height: 480px;

        padding: 30px;
    }


    .about-legal-meta {
        grid-template-columns: 1fr;
    }


    /* =====================================================
       CLOSING
       ===================================================== */

    .about-closing {
        min-height: 620px;
    }

}


/* =========================================================
   03. LARGE TABLET
   <= 900px
   ========================================================= */

@media (max-width: 900px) {

    /* =====================================================
       HERO
       ===================================================== */

    .about-hero {
        min-height: 92svh;
    }


    .about-hero-container {
        min-height: 92svh;

        padding-top:
            calc(
                var(--navbar-height) +
                52px
            );
    }


    .about-hero-media {
        inset: -3% 0;
    }


    .about-hero-image {
        object-position: 64% center;
    }


    .about-hero-overlay {
        background:

            linear-gradient(
                90deg,
                rgba(31, 5, 5, 0.88) 0%,
                rgba(31, 5, 5, 0.70) 42%,
                rgba(31, 5, 5, 0.24) 78%,
                rgba(31, 5, 5, 0.10) 100%
            ),

            linear-gradient(
                0deg,
                rgba(24, 4, 4, 0.82) 0%,
                rgba(24, 4, 4, 0.14) 50%,
                transparent 72%
            );
    }


    /* =====================================================
       ORIGIN
       ===================================================== */

    .about-origin-layout {
        grid-template-columns: 1fr;

        align-items: start;

        gap: 36px;
    }


    .about-origin-year {
        font-size:
            clamp(
                7rem,
                22vw,
                10rem
            );

        line-height: 0.8;
    }


    .about-origin-content {
        max-width: 650px;
    }


    /* =====================================================
       SIMPLE
       ===================================================== */

    .about-simple-heading {
        max-width: 800px;
    }


    .about-simple-grid {
        grid-template-columns: 1fr;

        gap: 44px;
    }


    .about-simple-copy {
        max-width: 620px;
    }


    .about-simple-visual {
        min-height: 590px;
    }


    /* =====================================================
       NAME STORY
       ===================================================== */

    /*
       Sticky mulai dimatikan di portrait-ish layout.

       Story tetap kuat, tapi UX lebih natural:
       heading → steps.
    */

    .about-name-layout {
        grid-template-columns: 1fr;

        gap: 46px;
    }


    .about-name-sticky {
        position: static;

        max-width: 620px;
    }


    .about-name-story {
        width: 100%;
    }


    .about-name-step {
        min-height: 240px;

        grid-template-columns:
            60px
            minmax(0, 1fr);
    }


    /* =====================================================
       CART
       ===================================================== */

    .about-cart-layout {
        grid-template-columns: 1fr;

        gap: 44px;
    }


    .about-cart-visual {
        min-height: 600px;
    }


    .about-cart-image {
        min-height: 600px;
    }


    .about-cart-content {
        max-width: 650px;
    }


    /* =====================================================
       QUALITY
       ===================================================== */

    .about-quality-layout {
        grid-template-columns: 1fr;

        gap: 46px;
    }


    .about-quality-content {
        max-width: 650px;
    }


    .about-quality-visual {
        min-height: 560px;
    }


    /* =====================================================
       LEGAL
       ===================================================== */

    .about-legal-grid {
        gap: 16px;
    }


    .about-legal-card {
        padding: 26px;
    }

}


/* =========================================================
   04. TABLET PORTRAIT
   <= 768px
   ========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       HERO
       ===================================================== */

    .about-hero {
        min-height: 88svh;
    }


    .about-hero-container {
        min-height: 88svh;

        padding-top:
            calc(
                var(--navbar-height) +
                46px
            );

        padding-bottom: 26px;
    }


    .about-hero-content {
        max-width: 610px;

        padding-block: 44px;
    }


    .about-hero-title {
        margin-bottom: 22px;

        font-size:
            clamp(
                4rem,
                12vw,
                5.6rem
            );
    }


    .about-hero-description {
        max-width: 430px;

        font-size: 1rem;
    }


    .about-hero-scroll {
        gap: 12px;

        font-size: 0.64rem;
    }


    .about-hero-scroll-line {
        width: 70px;
    }


    /* =====================================================
       ORIGIN
       ===================================================== */

    .about-origin-year {
        font-size:
            clamp(
                6.5rem,
                24vw,
                9rem
            );
    }


    .about-origin-title {
        margin-bottom: 24px;

        font-size:
            clamp(
                3rem,
                8vw,
                4.3rem
            );
    }


    /* =====================================================
       SIMPLE
       ===================================================== */

    .about-simple {
        padding-block: 84px;
    }


    .about-simple-container {
        gap: 48px;
    }


    .about-simple-heading {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .about-simple-number {
        padding-top: 0;
    }


    .about-simple-heading h2 {
        font-size:
            clamp(
                3.7rem,
                10vw,
                5.2rem
            );
    }


    .about-simple-visual {
        min-height: 520px;
    }


    .about-simple-price {
        top: 26px;
        right: 26px;

        width: 105px;
        height: 105px;
    }


    .about-simple-price strong {
        font-size: 1.65rem;
    }


    /* =====================================================
       NAME STORY
       ===================================================== */

    .about-name-sticky
    .section-title {
        font-size:
            clamp(
                3.4rem,
                9vw,
                4.5rem
            );
    }


    .about-name-step {
        min-height: 220px;

        grid-template-columns:
            48px
            minmax(0, 1fr);

        gap: 22px;
    }


    .about-name-step h3 {
        font-size:
            clamp(
                2.7rem,
                8vw,
                3.8rem
            );
    }


    /* =====================================================
       CART
       ===================================================== */

    .about-cart-visual,
    .about-cart-image {
        min-height: 520px;
    }


    .about-cart-content
    .section-title {
        font-size:
            clamp(
                3.2rem,
                8vw,
                4.5rem
            );
    }


    /* =====================================================
       BRAND VOICE
       ===================================================== */

    .about-voice {
        padding-block: 84px;
    }


    .about-voice-heading {
        margin-bottom: 46px;
    }


    .about-voice-heading
    .section-title {
        font-size:
            clamp(
                3.4rem,
                9vw,
                4.8rem
            );
    }


    .about-voice-marquee {
        padding-block: 23px;
    }


    .about-voice-group span {
        padding-inline: 28px;

        font-size:
            clamp(
                2.1rem,
                6vw,
                3rem
            );
    }


    /* =====================================================
       GROWTH
       ===================================================== */

    .about-growth-header {
        margin-bottom: 48px;
    }


    .about-growth-title {
        font-size:
            clamp(
                3.7rem,
                10vw,
                5.3rem
            );
    }


    /*
       3 kolom → 1 kolom editorial timeline.
    */

    .about-growth-path {
        grid-template-columns: 1fr;

        border-bottom: 0;
    }


    .about-growth-step {
        min-height: 220px;

        padding:
            28px
            24px;

        border-right: 0;

        border-bottom:
            1px solid
            var(--iketan-border);
    }


    .about-growth-step h3 {
        max-width: 430px;
    }


    /* =====================================================
       QUALITY
       ===================================================== */

    .about-quality-content
    .section-title {
        font-size:
            clamp(
                3.2rem,
                8vw,
                4.5rem
            );
    }


    .about-quality-visual {
        min-height: 500px;
    }


    /* =====================================================
       LEGAL
       ===================================================== */

    .about-legal-header {
        margin-bottom: 44px;
    }


    .about-legal-header
    .section-title {
        font-size:
            clamp(
                3.3rem,
                9vw,
                4.7rem
            );
    }


    .about-legal-grid {
        grid-template-columns: 1fr;
    }


    .about-legal-card {
        min-height: auto;

        padding: 30px;
    }


    .about-legal-meta {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    /* =====================================================
       CLOSING
       ===================================================== */

    .about-closing {
        min-height: 570px;
    }


    .about-closing-content h2 {
        font-size:
            clamp(
                4rem,
                11vw,
                5.8rem
            );
    }


    .about-closing-decoration {
        right: -8%;
        bottom: -15%;
    }

}


/* =========================================================
   05. MOBILE
   <= 576px
   ========================================================= */

@media (max-width: 576px) {

    /* =====================================================
       HERO
       ===================================================== */

    .about-hero {
        min-height: 86svh;
    }


    .about-hero-media {
        inset: 0;
    }


    .about-hero-image {
        width: 100%;
        height: 100%;

        object-position: 68% center;

        transform: none;
    }


    /*
       Mobile overlay lebih berat.
       Background tetap kelihatan,
       tapi headline gak tenggelam.
    */

    .about-hero-overlay {
        background:

            linear-gradient(
                90deg,
                rgba(31, 5, 5, 0.84) 0%,
                rgba(31, 5, 5, 0.68) 60%,
                rgba(31, 5, 5, 0.28) 100%
            ),

            linear-gradient(
                0deg,
                rgba(24, 4, 4, 0.90) 0%,
                rgba(24, 4, 4, 0.35) 48%,
                rgba(24, 4, 4, 0.10) 78%
            );
    }


    .about-hero-container {
        min-height: 86svh;

        padding-top:
            calc(
                var(--navbar-height) +
                34px
            );

        padding-bottom: 22px;
    }


    .about-hero-content {
        margin-top: auto;
        margin-bottom: 0;

        padding-block:
            80px
            44px;
    }


    .about-hero-eyebrow {
        margin-bottom: 13px;

        font-size: 0.65rem;
    }


    .about-hero-title {
        max-width: 430px;

        margin-bottom: 18px;

        font-size:
            clamp(
                3.7rem,
                17vw,
                4.8rem
            );

        line-height: 0.91;
    }


    .about-hero-description {
        max-width: 330px;

        font-size: 0.9rem;

        line-height: 1.65;
    }


    .about-hero-scroll {
        font-size: 0.6rem;
    }


    /* =====================================================
       ORIGIN
       ===================================================== */

    .about-origin-layout {
        gap: 28px;
    }


    .about-origin-year {
        font-size:
            clamp(
                5.9rem,
                29vw,
                8rem
            );

        opacity: 0.94;
    }


    .about-origin-title {
        margin-bottom: 20px;

        font-size:
            clamp(
                2.9rem,
                12vw,
                3.8rem
            );
    }


    .about-origin-copy {
        gap: 15px;
    }


    .about-origin-copy p {
        font-size: 0.88rem;

        line-height: 1.75;
    }


    /* =====================================================
       SIMPLE
       ===================================================== */

    .about-simple {
        padding-block: 70px;
    }


    .about-simple-container {
        gap: 38px;
    }


    .about-simple-heading {
        gap: 8px;
    }


    .about-simple-number {
        font-size: 0.65rem;
    }


    .about-simple-heading h2 {
        font-size:
            clamp(
                3.3rem,
                14vw,
                4.3rem
            );

        line-height: 0.94;
    }


    .about-simple-grid {
        gap: 34px;
    }


    .about-simple-lead {
        font-size: 1.12rem;

        line-height: 1.52 !important;
    }


    .about-simple-copy p {
        font-size: 0.86rem;

        line-height: 1.75;
    }


    .about-simple-copy p + p {
        margin-top: 18px;
    }


    .about-simple-visual {
        min-height: 430px;

        border-radius:
            var(--radius-xl);
    }


    .about-simple-product {
        width:
            min(
                76%,
                340px
            );
    }


    .about-simple-shape {
        width: 78%;
    }


    .about-simple-price {
        top: 18px;
        right: 18px;

        width: 92px;
        height: 92px;
    }


    .about-simple-price span {
        font-size: 0.56rem;
    }


    .about-simple-price strong {
        font-size: 1.45rem;
    }


    /* =====================================================
       WHY IKETAN
       ===================================================== */

    .about-name-layout {
        gap: 34px;
    }


    .about-name-sticky
    .section-eyebrow {
        margin-bottom: 12px;
    }


    .about-name-sticky
    .section-title {
        max-width: 390px;

        font-size:
            clamp(
                3.2rem,
                13vw,
                4rem
            );
    }


    .about-name-step {
        min-height: auto;

        grid-template-columns: 1fr;

        gap: 16px;

        padding-block: 38px;
    }


    .about-name-step-number {
        padding-top: 0;

        font-size: 0.64rem;
    }


    .about-name-step h3 {
        margin-bottom: 10px;

        font-size:
            clamp(
                2.7rem,
                12vw,
                3.4rem
            );
    }


    .about-name-step p {
        max-width: 420px;

        font-size: 0.86rem;

        line-height: 1.7;
    }


    /* =====================================================
       CART
       ===================================================== */

    .about-cart-layout {
        gap: 34px;
    }


    .about-cart-visual,
    .about-cart-image {
        min-height: 440px;
    }


    .about-cart-visual {
        border-radius:
            var(--radius-xl);
    }


    .about-cart-visual figcaption {
        left: 16px;
        bottom: 16px;

        padding:
            8px
            12px;

        font-size: 0.66rem;
    }


    .about-cart-content
    .section-title {
        margin-bottom: 22px;

        font-size:
            clamp(
                3rem,
                12vw,
                3.9rem
            );
    }


    .about-cart-copy {
        gap: 15px;
    }


    .about-cart-copy p {
        font-size: 0.86rem;

        line-height: 1.75;
    }


    /* =====================================================
       BRAND VOICE
       ===================================================== */

    .about-voice {
        padding-block: 70px;
    }


    .about-voice-heading {
        margin-bottom: 36px;
    }


    .about-voice-heading
    .section-title {
        margin-bottom: 16px;

        font-size:
            clamp(
                3.1rem,
                13vw,
                4rem
            );
    }


    .about-voice-heading p {
        max-width: 400px;

        font-size: 0.86rem;

        line-height: 1.7;
    }


    .about-voice-marquee {
        padding-block: 20px;
    }


    .about-voice-track {
        animation-duration: 38s;
    }


    .about-voice-group span {
        padding-inline: 22px;

        font-size:
            clamp(
                1.9rem,
                9vw,
                2.5rem
            );
    }


    .about-voice-note {
        margin-top: 28px;
    }


    .about-voice-note p {
        font-size: 0.78rem;
    }


    /* =====================================================
       GROWTH
       ===================================================== */

    .about-growth-header {
        margin-bottom: 38px;
    }


    .about-growth-title {
        margin-bottom: 18px;

        font-size:
            clamp(
                3.3rem,
                14vw,
                4.4rem
            );

        line-height: 0.94;
    }


    .about-growth-header > p {
        font-size: 0.86rem;

        line-height: 1.7;
    }


    .about-growth-step {
        min-height: 190px;

        gap: 28px;

        padding:
            24px
            18px;
    }


    .about-growth-index {
        font-size: 0.64rem;
    }


    .about-growth-place {
        font-size: 0.64rem;
    }


    .about-growth-step h3 {
        max-width: 330px;

        font-size:
            clamp(
                1.9rem,
                8vw,
                2.5rem
            );
    }


    /* =====================================================
       QUALITY
       ===================================================== */

    .about-quality-layout {
        gap: 34px;
    }


    .about-quality-content
    .section-title {
        margin-bottom: 22px;

        font-size:
            clamp(
                3rem,
                12vw,
                3.9rem
            );
    }


    .about-quality-copy {
        gap: 15px;
    }


    .about-quality-copy p {
        font-size: 0.86rem;

        line-height: 1.75;
    }


    .about-quality-visual {
        min-height: 430px;

        border-radius:
            var(--radius-xl);
    }


    .about-quality-visual::before {
        width: 78%;
    }


    .about-quality-visual img {
        width:
            min(
                72%,
                320px
            );
    }


    /* =====================================================
       LEGAL
       ===================================================== */

    .about-legal-header {
        margin-bottom: 34px;
    }


    .about-legal-header
    .section-title {
        margin-bottom: 17px;

        font-size:
            clamp(
                3rem,
                13vw,
                4rem
            );

        line-height: 0.95;
    }


    .about-legal-header
    .section-description {
        max-width: 420px;

        font-size: 0.86rem;

        line-height: 1.7;
    }


    .about-legal-grid {
        gap: 14px;
    }


    .about-legal-card {
        padding:
            24px
            22px;

        border-radius:
            var(--radius-xl);
    }


    .about-legal-logo {
        min-height: 88px;

        margin-bottom: 26px;
    }


    .about-legal-logo img {
        max-width: 130px;
        max-height: 72px;
    }


    .about-legal-type {
        font-size: 0.62rem;
    }


    .about-legal-content h3 {
        font-size: 1.3rem;
    }


    .about-legal-content > p {
        margin-bottom: 22px;

        font-size: 0.82rem;

        line-height: 1.65;
    }


    .about-legal-meta {
        grid-template-columns: 1fr;

        gap: 9px;

        margin-bottom: 22px;
    }


    .about-legal-meta > div {
        padding:
            12px
            13px;
    }


    .about-legal-meta dt {
        font-size: 0.6rem;
    }


    .about-legal-meta dd {
        font-size: 0.74rem;
    }


    .about-legal-link {
        font-size: 0.75rem;
    }


    .about-legal-note {
        margin-top: 18px;

        font-size: 0.67rem;
    }


    /* =====================================================
       CLOSING
       ===================================================== */

    .about-closing {
        min-height: 530px;

        align-items: flex-end;

        padding-block:
            72px
            62px;
    }


    .about-closing::before {
        top: 18%;
        right: -50px;

        width: 170px;
        height: 170px;

        border-width: 40px;
    }


    .about-closing-eyebrow {
        margin-bottom: 14px;

        font-size: 0.65rem;
    }


    .about-closing-content h2 {
        max-width: 430px;

        margin-bottom: 18px;

        font-size:
            clamp(
                3.7rem,
                16vw,
                4.8rem
            );

        line-height: 0.92;
    }


    .about-closing-content > p {
        max-width: 380px;

        margin-bottom: 26px;

        font-size: 0.86rem;

        line-height: 1.7;
    }


    .about-closing-actions {
        gap: 9px;
    }


    .about-closing-decoration {
        right: -5%;
        bottom: -3%;

        font-size: 8rem;
    }

}


/* =========================================================
   06. SMALL MOBILE
   <= 380px
   ========================================================= */

@media (max-width: 380px) {

    /* =====================================================
       HERO
       ===================================================== */

    .about-hero-container {
        padding-top:
            calc(
                var(--navbar-height) +
                28px
            );
    }


    .about-hero-title {
        font-size:
            clamp(
                3.4rem,
                17vw,
                4.2rem
            );
    }


    .about-hero-description {
        max-width: 290px;

        font-size: 0.84rem;
    }


    .about-hero-scroll span {
        display: none;
    }


    /* =====================================================
       ORIGIN
       ===================================================== */

    .about-origin-year {
        font-size:
            clamp(
                5.5rem,
                28vw,
                7rem
            );
    }


    .about-origin-title {
        font-size:
            clamp(
                2.7rem,
                12vw,
                3.5rem
            );
    }


    /* =====================================================
       SIMPLE
       ===================================================== */

    .about-simple-heading h2 {
        font-size:
            clamp(
                3rem,
                14vw,
                3.9rem
            );
    }


    .about-simple-visual {
        min-height: 390px;
    }


    .about-simple-price {
        width: 84px;
        height: 84px;
    }


    .about-simple-price strong {
        font-size: 1.32rem;
    }


    /* =====================================================
       NAME
       ===================================================== */

    .about-name-sticky
    .section-title {
        font-size:
            clamp(
                2.9rem,
                13vw,
                3.6rem
            );
    }


    /* =====================================================
       CART
       ===================================================== */

    .about-cart-visual,
    .about-cart-image {
        min-height: 400px;
    }


    /* =====================================================
       QUALITY
       ===================================================== */

    .about-quality-visual {
        min-height: 390px;
    }


    /* =====================================================
       LEGAL
       ===================================================== */

    .about-legal-card {
        padding:
            22px
            18px;
    }


    .about-legal-logo img {
        max-width: 116px;
    }


    /* =====================================================
       CLOSING
       ===================================================== */

    .about-closing-content h2 {
        font-size:
            clamp(
                3.4rem,
                16vw,
                4.2rem
            );
    }


    .about-closing-actions {
        width: 100%;

        align-items: stretch;

        flex-direction: column;
    }


    .about-closing-actions .btn {
        width: 100%;
    }

}


/* =========================================================
   07. TOUCH DEVICE
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    /*
       Hindari hover states yang nyangkut di touch device.
    */

    .about-cart-visual:hover
    .about-cart-image {
        transform: none;
    }


    .about-growth-step:hover {
        background-color:
            transparent;
    }


    .about-legal-card:hover {
        transform: none;

        box-shadow: none;
    }


    .about-legal-link:hover span {
        transform: none;
    }

}


/* =========================================================
   08. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .about-hero-scroll-line::after {
        animation: none;
    }


    .about-voice-track {
        animation: none;
    }


    .about-hero-media,
    .about-simple-product {
        transform: none !important;
    }


    .about-cart-image,
    .about-growth-step,
    .about-legal-card,
    .about-legal-link,
    .about-legal-link span {
        transition: none;
    }

}


/* =========================================================
   09. MOBILE LANDSCAPE
   ========================================================= */

@media
    (max-width: 900px)
    and (orientation: landscape)
    and (max-height: 520px) {

    /* =====================================================
       HERO
       ===================================================== */

    .about-hero {
        min-height: 620px;
    }


    .about-hero-container {
        min-height: 620px;

        padding-top:
            calc(
                var(--navbar-height) +
                26px
            );

        padding-bottom: 20px;
    }


    .about-hero-content {
        max-width: 600px;

        padding-block:
            50px
            28px;
    }


    .about-hero-title {
        max-width: 550px;

        font-size: 4.2rem;
    }


    .about-hero-description {
        max-width: 380px;

        font-size: 0.84rem;
    }


    /* =====================================================
       SIMPLE
       ===================================================== */

    .about-simple-grid {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);

        align-items: center;
    }


    .about-simple-visual {
        min-height: 430px;
    }


    /* =====================================================
       CART
       ===================================================== */

    .about-cart-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        align-items: center;
    }


    .about-cart-visual,
    .about-cart-image {
        min-height: 430px;
    }


    /* =====================================================
       QUALITY
       ===================================================== */

    .about-quality-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        align-items: center;
    }


    .about-quality-visual {
        min-height: 420px;
    }

}


/* =========================================================
   10. VERY WIDE SCREEN
   >= 1600px
   ========================================================= */

@media (min-width: 1600px) {

    .about-hero-content {
        max-width: 900px;
    }


    .about-origin-layout {
        gap: 110px;
    }


    .about-simple-grid,
    .about-cart-layout,
    .about-quality-layout {
        gap: 110px;
    }


    .about-name-layout {
        gap: 130px;
    }


    .about-simple-visual {
        min-height: 700px;
    }


    .about-cart-visual,
    .about-cart-image {
        min-height: 700px;
    }


    .about-quality-visual {
        min-height: 620px;
    }

}


/* =========================================================
   END OF ABOUT RESPONSIVE
   ========================================================= */