/* =========================================================
   IKETAN.ID
   About / Tentang Page Stylesheet
   ---------------------------------------------------------
   Scope:
   - Story opening
   - Origin story
   - Simple beginning
   - Name origin
   - Cart identity
   - Brand voice
   - Growth story
   - Product responsibility
   - Legal / certification
   - Closing story

   Global:
   /assets/css/global.css

   Responsive:
   /assets/css/responsive/tentang-responsive.css

   IMPORTANT:
   No responsive media queries in this file.
   ========================================================= */


/* =========================================================
   01. ABOUT PAGE GENERAL
   ========================================================= */

.about-origin,
.about-simple,
.about-name,
.about-cart,
.about-voice,
.about-growth,
.about-quality,
.about-legal,
.about-closing {
    position: relative;
}


/* =========================================================
   02. STORY OPENING / HERO
   ========================================================= */

.about-hero {
    position: relative;

    min-height: 100vh;
    min-height: 100svh;

    display: flex;
    align-items: stretch;

    overflow: hidden;

    color: var(--iketan-white);

    background-color:
        var(--iketan-maroon-dark);
}


/* ---------------------------------------------------------
   Hero Media
   --------------------------------------------------------- */

.about-hero-media {
    position: absolute;

    inset: -6% 0;

    z-index: 1;

    overflow: hidden;

    pointer-events: none;

    will-change: transform;
}


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

    object-fit: cover;
    object-position: 58% center;

    transform:
        scale(1.015);

    filter:
        saturate(0.9)
        contrast(1.03)
        brightness(0.88);
}


/* ---------------------------------------------------------
   Hero Overlay
   --------------------------------------------------------- */

.about-hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            rgba(31, 5, 5, 0.90) 0%,
            rgba(31, 5, 5, 0.76) 31%,
            rgba(31, 5, 5, 0.46) 55%,
            rgba(31, 5, 5, 0.12) 80%,
            rgba(31, 5, 5, 0.06) 100%
        ),

        linear-gradient(
            0deg,
            rgba(24, 4, 4, 0.78) 0%,
            rgba(24, 4, 4, 0.12) 42%,
            transparent 64%
        );
}


/* ---------------------------------------------------------
   Hero Container
   --------------------------------------------------------- */

.about-hero-container {
    position: relative;

    z-index: 4;

    min-height: 100vh;
    min-height: 100svh;

    display: flex;
    flex-direction: column;

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

    padding-bottom:
        34px;
}


/* ---------------------------------------------------------
   Hero Content
   --------------------------------------------------------- */

.about-hero-content {
    width: 100%;
    max-width: 820px;

    margin-top: auto;
    margin-bottom: auto;

    padding-block: 54px;
}


.about-hero-eyebrow {
    display: inline-flex;
    align-items: center;

    margin-bottom: 18px;

    color:
        rgba(
            255,
            255,
            255,
            0.74
        );

    font-size:
        var(--text-xs);

    font-weight:
        var(--weight-extrabold);

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}


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

    margin-bottom: 26px;

    color:
        var(--iketan-white);

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

    line-height:
        0.89;

    text-wrap:
        balance;
}


.about-hero-title span {
    display: block;

    color:
        var(--iketan-yellow);
}


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

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size:
        clamp(
            1rem,
            1.5vw,
            1.25rem
        );

    line-height:
        1.75;
}


/* ---------------------------------------------------------
   Hero Scroll Cue
   --------------------------------------------------------- */

.about-hero-scroll {
    display: flex;
    align-items: center;

    gap: 16px;

    color:
        rgba(
            255,
            255,
            255,
            0.48
        );

    font-size:
        0.68rem;

    font-weight:
        var(--weight-bold);

    letter-spacing:
        0.04em;
}


.about-hero-scroll-line {
    position: relative;

    width: 86px;
    height: 1px;

    overflow: hidden;

    background-color:
        rgba(
            255,
            255,
            255,
            0.18
        );
}


.about-hero-scroll-line::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 36%;
    height: 100%;

    background-color:
        rgba(
            255,
            255,
            255,
            0.88
        );

    transform:
        translateX(-120%);

    animation:
        aboutHeroScrollLine
        1.8s
        var(--ease-in-out)
        infinite;
}


@keyframes aboutHeroScrollLine {

    from {
        transform:
            translateX(-120%);
    }

    to {
        transform:
            translateX(320%);
    }
}


/* =========================================================
   03. ORIGIN / 2022
   ========================================================= */

.about-origin {
    overflow: hidden;

    background-color:
        var(--iketan-cream);
}


.about-origin-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap: 80px;
}


/* ---------------------------------------------------------
   Giant Year
   --------------------------------------------------------- */

.about-origin-year {
    color:
        var(--iketan-maroon);

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            8rem,
            18vw,
            15rem
        );

    line-height:
        0.75;

    letter-spacing:
        -0.045em;

    opacity:
        0.96;

    user-select:
        none;
}


/* ---------------------------------------------------------
   Origin Copy
   --------------------------------------------------------- */

.about-origin-content {
    width: 100%;
    max-width: 590px;
}


.about-origin-title {
    max-width: 580px;

    margin-bottom: 28px;

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

    line-height:
        0.98;
}


.about-origin-copy {
    display: grid;

    gap: 18px;

    max-width: 520px;
}


.about-origin-copy p {
    color:
        var(--iketan-muted);

    font-size:
        var(--text-base);

    line-height:
        1.85;
}


.about-origin-copy p:last-child {
    margin-top: 6px;

    color:
        var(--iketan-maroon);

    font-weight:
        var(--weight-extrabold);
}


/* =========================================================
   04. SIMPLE BEGINNING
   ========================================================= */

.about-simple {
    overflow: hidden;

    padding-block:
        clamp(
            92px,
            10vw,
            150px
        );

    background-color:
        var(--iketan-soft);
}


.about-simple-container {
    display: grid;

    gap: 70px;
}


/* ---------------------------------------------------------
   Editorial Heading
   --------------------------------------------------------- */

.about-simple-heading {
    display: grid;

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

    align-items: start;

    gap: 28px;

    max-width: 940px;
}


.about-simple-number {
    padding-top: 12px;

    color:
        var(--iketan-red);

    font-size:
        var(--text-xs);

    font-weight:
        var(--weight-extrabold);

    letter-spacing:
        0.08em;
}


.about-simple-heading h2 {
    max-width: 900px;

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

    line-height:
        0.92;
}


.about-simple-heading h2 span {
    color:
        var(--iketan-red);
}


/* ---------------------------------------------------------
   Simple Grid
   --------------------------------------------------------- */

.about-simple-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    align-items: center;

    gap: 90px;
}


/* ---------------------------------------------------------
   Simple Copy
   --------------------------------------------------------- */

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


.about-simple-copy p {
    color:
        var(--iketan-muted);

    line-height:
        1.85;
}


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


.about-simple-lead {
    color:
        var(--iketan-ink) !important;

    font-size:
        clamp(
            1.25rem,
            2vw,
            1.65rem
        );

    font-weight:
        var(--weight-bold);

    line-height:
        1.55 !important;
}


/* ---------------------------------------------------------
   Product Visual
   --------------------------------------------------------- */

.about-simple-visual {
    position: relative;

    min-height: 650px;

    display: grid;
    place-items: center;

    overflow: hidden;

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

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

    background-color:
        var(--iketan-white);
}


.about-simple-shape {
    position: absolute;

    top: 50%;
    left: 50%;

    width: min(72%, 450px);
    aspect-ratio: 1;

    border-radius: 50%;

    background-color:
        rgba(
            244,
            183,
            64,
            0.28
        );

    transform:
        translate(
            -50%,
            -50%
        );
}


/* Secondary ornament */

.about-simple-visual::before {
    content: "";

    position: absolute;

    top: -80px;
    left: -60px;

    width: 210px;
    height: 210px;

    border:
        44px solid
        rgba(
            92,
            13,
            13,
            0.05
        );

    border-radius: 50%;
}


.about-simple-visual::after {
    content: "";

    position: absolute;

    right: -50px;
    bottom: -55px;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background-color:
        rgba(
            185,
            40,
            46,
            0.08
        );
}


/* ---------------------------------------------------------
   Product Image
   --------------------------------------------------------- */

.about-simple-product {
    position: relative;

    z-index: 2;

    width: min(70%, 430px);
    height: auto;

    object-fit: contain;

    mix-blend-mode:
        multiply;

    will-change:
        transform;
}


/* ---------------------------------------------------------
   Price Label
   --------------------------------------------------------- */

.about-simple-price {
    position: absolute;

    top: 34px;
    right: 34px;

    z-index: 5;

    width: 120px;
    height: 120px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color:
        var(--iketan-white);

    background-color:
        var(--iketan-maroon);

    text-align: center;

    transform:
        rotate(7deg);

    box-shadow:
        var(--shadow-sm);
}


.about-simple-price span {
    margin-bottom: 3px;

    font-size:
        0.64rem;

    font-weight:
        var(--weight-bold);
}


.about-simple-price strong {
    font-family:
        var(--font-heading);

    font-size:
        1.85rem;

    font-weight:
        400;

    line-height:
        1;
}


/* =========================================================
   05. WHY IKETAN / NAME STORY
   ========================================================= */

.about-name {
    overflow: visible;
}


.about-name-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1.2fr);

    align-items: start;

    gap: 100px;
}


/* ---------------------------------------------------------
   Sticky Intro
   --------------------------------------------------------- */

.about-name-sticky {
    position: sticky;

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

    max-width: 470px;
}


.about-name-sticky
.section-eyebrow {
    color:
        var(--iketan-yellow);
}


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

    margin-bottom: 0;

    color:
        var(--iketan-white);

    font-size:
        clamp(
            3.7rem,
            6vw,
            5.8rem
        );

    line-height:
        0.95;
}


/* ---------------------------------------------------------
   Name Story
   --------------------------------------------------------- */

.about-name-story {
    display: grid;

    min-width: 0;
}


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

    display: grid;

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

    align-items: center;

    gap: 30px;

    padding-block:
        42px;

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


.about-name-step:first-child {
    border-top:
        1px solid
        var(--white-16);
}


.about-name-step-number {
    align-self: start;

    padding-top: 9px;

    color:
        var(--iketan-yellow);

    font-size:
        var(--text-xs);

    font-weight:
        var(--weight-extrabold);

    letter-spacing:
        0.08em;
}


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

    color:
        var(--iketan-white);

    font-size:
        clamp(
            3rem,
            5vw,
            4.4rem
        );

    line-height:
        0.95;
}


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

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

    line-height:
        1.8;
}


/* =========================================================
   06. CART / VISUAL IDENTITY
   ========================================================= */

.about-cart {
    overflow: hidden;

    background-color:
        var(--iketan-cream);
}


.about-cart-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, 0.85fr);

    align-items: center;

    gap: 86px;
}


/* ---------------------------------------------------------
   Cart Visual
   --------------------------------------------------------- */

.about-cart-visual {
    position: relative;

    min-height: 650px;

    overflow: hidden;

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

    background-color:
        var(--iketan-soft);
}


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

    min-height: 650px;

    object-fit: cover;

    transition:
        transform
        900ms
        var(--ease-smooth);
}


.about-cart-visual:hover
.about-cart-image {
    transform:
        scale(1.025);
}


.about-cart-visual::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            0deg,
            rgba(36, 7, 7, 0.40) 0%,
            rgba(36, 7, 7, 0.08) 38%,
            transparent 60%
        );
}


/* ---------------------------------------------------------
   Figure Caption
   --------------------------------------------------------- */

.about-cart-visual figcaption {
    position: absolute;

    left: 24px;
    bottom: 22px;

    z-index: 4;

    padding:
        10px
        14px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.16
        );

    border-radius:
        var(--radius-pill);

    color:
        var(--iketan-white);

    background-color:
        rgba(
            61,
            10,
            10,
            0.66
        );

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    font-size:
        0.72rem;

    font-weight:
        var(--weight-bold);
}


/* ---------------------------------------------------------
   Cart Content
   --------------------------------------------------------- */

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


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

    font-size:
        clamp(
            3.5rem,
            5.5vw,
            5.2rem
        );

    line-height:
        0.97;
}


.about-cart-copy {
    display: grid;

    gap: 19px;
}


.about-cart-copy p {
    color:
        var(--iketan-muted);

    line-height:
        1.85;
}


/* =========================================================
   07. BRAND VOICE
   ========================================================= */

.about-voice {
    overflow: hidden;

    padding-block:
        clamp(
            100px,
            10vw,
            150px
        );

    background-color:
        var(--iketan-soft);
}


/* ---------------------------------------------------------
   Voice Heading
   --------------------------------------------------------- */

.about-voice-heading {
    max-width: 720px;

    margin-bottom: 64px;
}


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

    font-size:
        clamp(
            3.8rem,
            6vw,
            5.8rem
        );
}


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

    color:
        var(--iketan-muted);

    line-height:
        1.8;
}


/* =========================================================
   08. BRAND VOICE MARQUEE
   ========================================================= */

.about-voice-marquee {
    width: 100%;

    overflow: hidden;

    padding-block:
        27px;

    border-top:
        1px solid
        var(--iketan-border);

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

    background-color:
        var(--iketan-yellow);
}


.about-voice-track {
    display: flex;

    width:
        max-content;

    will-change:
        transform;

    animation:
        aboutVoiceMarquee
        30s
        linear
        infinite;
}


.about-voice-group {
    display: flex;
    align-items: center;

    flex-shrink: 0;
}


.about-voice-group span {
    display: inline-flex;
    align-items: center;

    padding-inline:
        34px;

    color:
        var(--iketan-maroon-dark);

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            2.3rem,
            4vw,
            3.7rem
        );

    line-height:
        1;

    white-space:
        nowrap;
}


.about-voice-group i {
    color:
        var(--iketan-maroon);

    font-size:
        0.8rem;

    font-style:
        normal;
}


@keyframes aboutVoiceMarquee {

    from {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

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


/* ---------------------------------------------------------
   Voice Note
   --------------------------------------------------------- */

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


.about-voice-note p {
    color:
        var(--iketan-maroon);

    font-size:
        var(--text-sm);

    font-weight:
        var(--weight-extrabold);
}


/* =========================================================
   09. GROWTH
   ========================================================= */

.about-growth {
    overflow: hidden;

    background-color:
        var(--iketan-cream);
}


/* ---------------------------------------------------------
   Growth Header
   --------------------------------------------------------- */

.about-growth-header {
    max-width: 850px;

    margin-bottom:
        68px;
}


.about-growth-title {
    max-width: 850px;

    margin-bottom:
        22px;

    font-size:
        clamp(
            4rem,
            7vw,
            6.8rem
        );

    line-height:
        0.92;
}


.about-growth-title span {
    display: block;

    color:
        var(--iketan-red);
}


.about-growth-header > p {
    max-width:
        530px;

    color:
        var(--iketan-muted);

    line-height:
        1.8;
}


/* ---------------------------------------------------------
   Growth Path
   --------------------------------------------------------- */

.about-growth-path {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        var(--iketan-border);

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


.about-growth-step {
    position: relative;

    min-height:
        300px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    gap:
        40px;

    padding:
        34px
        34px
        38px;

    border-right:
        1px solid
        var(--iketan-border);

    transition:
        background-color
        var(--duration-normal)
        var(--ease-smooth);
}


.about-growth-step:last-child {
    border-right: 0;
}


.about-growth-step:hover {
    background-color:
        var(--iketan-soft);
}


/* ---------------------------------------------------------
   Growth Number
   --------------------------------------------------------- */

.about-growth-index {
    color:
        var(--iketan-red);

    font-size:
        var(--text-xs);

    font-weight:
        var(--weight-extrabold);

    letter-spacing:
        0.08em;
}


/* ---------------------------------------------------------
   Growth Place
   --------------------------------------------------------- */

.about-growth-place {
    display: block;

    margin-bottom:
        10px;

    color:
        var(--iketan-muted);

    font-size:
        0.72rem;

    font-weight:
        var(--weight-extrabold);

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


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

    color:
        var(--iketan-maroon);

    font-size:
        clamp(
            2rem,
            3vw,
            2.8rem
        );

    line-height:
        1;
}


/* =========================================================
   10. PRODUCT RESPONSIBILITY
   ========================================================= */

.about-quality {
    overflow: hidden;

    background-color:
        var(--iketan-soft);
}


.about-quality-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: 86px;
}


/* ---------------------------------------------------------
   Quality Copy
   --------------------------------------------------------- */

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


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

    font-size:
        clamp(
            3.5rem,
            5.4vw,
            5.2rem
        );

    line-height:
        0.98;
}


.about-quality-copy {
    display: grid;

    gap: 19px;
}


.about-quality-copy p {
    color:
        var(--iketan-muted);

    line-height:
        1.85;
}


/* ---------------------------------------------------------
   Quality Visual
   --------------------------------------------------------- */

.about-quality-visual {
    position: relative;

    min-height:
        580px;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

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

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

    background-color:
        var(--iketan-white);
}


.about-quality-visual::before {
    content: "";

    position: absolute;

    width: 440px;
    aspect-ratio: 1;

    border-radius: 50%;

    background-color:
        rgba(
            244,
            183,
            64,
            0.25
        );
}


.about-quality-visual::after {
    content: "";

    position: absolute;

    right: -45px;
    top: -55px;

    width: 180px;
    height: 180px;

    border:
        38px solid
        rgba(
            92,
            13,
            13,
            0.055
        );

    border-radius:
        50%;
}


.about-quality-visual img {
    position: relative;

    z-index: 2;

    width:
        min(
            68%,
            390px
        );

    height:
        auto;

    object-fit:
        contain;

    mix-blend-mode:
        multiply;
}


/* =========================================================
   11. LEGALITY / CERTIFICATION
   ========================================================= */

.about-legal {
    overflow: hidden;

    background-color:
        var(--iketan-cream);
}


/* ---------------------------------------------------------
   Legal Header
   --------------------------------------------------------- */

.about-legal-header {
    max-width:
        850px;

    margin-bottom:
        56px;
}


.about-legal-header
.section-title {
    max-width:
        820px;

    margin-bottom:
        20px;

    font-size:
        clamp(
            3.6rem,
            6vw,
            5.8rem
        );

    line-height:
        0.96;
}


.about-legal-header
.section-title span {
    display: block;

    color:
        var(--iketan-red);
}


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


/* =========================================================
   12. LEGAL GRID
   ========================================================= */

.about-legal-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        20px;
}


/* =========================================================
   13. LEGAL CARD
   ========================================================= */

.about-legal-card {
    position: relative;

    min-width: 0;
    min-height: 520px;

    display: grid;

    grid-template-rows:
        auto
        minmax(0, 1fr);

    overflow: hidden;

    padding:
        34px;

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

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

    background-color:
        var(--iketan-white);

    transition:
        transform
        var(--duration-slow)
        var(--ease-smooth),

        border-color
        var(--duration-slow)
        var(--ease-smooth),

        box-shadow
        var(--duration-slow)
        var(--ease-smooth);
}


.about-legal-card:hover {
    transform:
        translateY(-4px);

    border-color:
        var(--maroon-14);

    box-shadow:
        var(--shadow-md);
}


/* Decorative subtle pattern */

.about-legal-card::after {
    content: "";

    position: absolute;

    right: -70px;
    bottom: -70px;

    width: 180px;
    height: 180px;

    border:
        38px solid
        rgba(
            92,
            13,
            13,
            0.035
        );

    border-radius:
        50%;

    pointer-events:
        none;
}


/* =========================================================
   14. LEGAL LOGO
   ========================================================= */

.about-legal-logo {
    position: relative;

    z-index: 2;

    min-height:
        110px;

    display:
        flex;

    align-items:
        center;

    margin-bottom:
        34px;
}


.about-legal-logo img {
    width:
        auto;

    max-width:
        150px;

    max-height:
        86px;

    object-fit:
        contain;
}


/* =========================================================
   15. LEGAL CONTENT
   ========================================================= */

.about-legal-content {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;

    min-width: 0;
}


.about-legal-type {
    display:
        inline-flex;

    width:
        fit-content;

    margin-bottom:
        9px;

    color:
        var(--iketan-red);

    font-size:
        0.67rem;

    font-weight:
        var(--weight-extrabold);

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.about-legal-content h3 {
    margin-bottom:
        12px;

    color:
        var(--iketan-maroon);

    font-family:
        var(--font-body);

    font-size:
        clamp(
            1.45rem,
            2vw,
            1.8rem
        );

    font-weight:
        var(--weight-extrabold);

    line-height:
        1.3;
}


.about-legal-content > p {
    max-width:
        470px;

    margin-bottom:
        28px;

    color:
        var(--iketan-muted);

    font-size:
        var(--text-sm);

    line-height:
        1.7;
}


/* =========================================================
   16. LEGAL META
   ========================================================= */

.about-legal-meta {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        14px;

    margin:
        0
        0
        26px;
}


.about-legal-meta > div {
    min-width: 0;

    padding:
        14px
        15px;

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

    border-radius:
        var(--radius-md);

    background-color:
        var(--iketan-soft);
}


.about-legal-meta dt {
    margin-bottom:
        5px;

    color:
        var(--iketan-muted);

    font-size:
        0.64rem;

    font-weight:
        var(--weight-bold);
}


.about-legal-meta dd {
    margin:
        0;

    color:
        var(--iketan-maroon);

    font-size:
        0.78rem;

    font-weight:
        var(--weight-extrabold);

    line-height:
        1.45;

    overflow-wrap:
        anywhere;
}


/* =========================================================
   17. LEGAL DOCUMENT LINK
   ========================================================= */

.about-legal-link {
    width:
        fit-content;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        auto;

    padding-bottom:
        4px;

    border-bottom:
        1px solid
        rgba(
            92,
            13,
            13,
            0.24
        );

    color:
        var(--iketan-maroon);

    font-size:
        0.78rem;

    font-weight:
        var(--weight-extrabold);

    transition:
        color
        var(--duration-fast)
        var(--ease-default),

        border-color
        var(--duration-fast)
        var(--ease-default);
}


.about-legal-link span {
    transition:
        transform
        var(--duration-normal)
        var(--ease-smooth);
}


.about-legal-link:hover {
    color:
        var(--iketan-red);

    border-color:
        var(--iketan-red);
}


.about-legal-link:hover span {
    transform:
        translate(
            3px,
            -3px
        );
}


/* =========================================================
   18. LEGAL NOTE
   ========================================================= */

.about-legal-note {
    max-width:
        680px;

    margin-top:
        24px;

    color:
        var(--iketan-muted);

    font-size:
        0.72rem;

    line-height:
        1.65;
}


/* =========================================================
   19. CLOSING STORY
   ========================================================= */

.about-closing {
    position: relative;

    min-height:
        680px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    padding-block:
        clamp(
            90px,
            10vw,
            150px
        );
}


/* ---------------------------------------------------------
   Closing Decorative Glow
   --------------------------------------------------------- */

.about-closing::before {
    content: "";

    position: absolute;

    top: 15%;
    right: 8%;

    width: 240px;
    height: 240px;

    border:
        54px solid
        rgba(
            244,
            183,
            64,
            0.055
        );

    border-radius: 50%;

    pointer-events:
        none;
}


/* ---------------------------------------------------------
   Closing Container
   --------------------------------------------------------- */

.about-closing-container {
    position: relative;

    z-index: 3;
}


/* ---------------------------------------------------------
   Closing Content
   --------------------------------------------------------- */

.about-closing-content {
    position: relative;

    z-index: 3;

    max-width:
        740px;
}


.about-closing-eyebrow {
    display:
        inline-flex;

    margin-bottom:
        18px;

    color:
        var(--iketan-yellow);

    font-size:
        var(--text-xs);

    font-weight:
        var(--weight-extrabold);

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


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

    margin-bottom:
        22px;

    color:
        var(--iketan-white);

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

    line-height:
        0.9;
}


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

    margin-bottom:
        32px;

    color:
        rgba(
            255,
            255,
            255,
            0.64
        );

    line-height:
        1.8;
}


/* ---------------------------------------------------------
   Closing Actions
   --------------------------------------------------------- */

.about-closing-actions {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;
}


/* ---------------------------------------------------------
   Giant Background Typography
   --------------------------------------------------------- */

.about-closing-decoration {
    position: absolute;

    right: -4%;
    bottom: -24%;

    z-index: 1;

    color:
        rgba(
            255,
            255,
            255,
            0.045
        );

    font-family:
        var(--font-heading);

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

    line-height:
        1;

    white-space:
        nowrap;

    pointer-events:
        none;

    user-select:
        none;
}


/* =========================================================
   20. ABOUT PARALLAX HELPERS
   ========================================================= */

[data-about-parallax],
[data-about-product] {
    will-change:
        transform;

    backface-visibility:
        hidden;

    transform:
        translate3d(
            0,
            0,
            0
        );
}


/* =========================================================
   21. IMAGE BASE / LOADING POLISH
   ========================================================= */

.about-hero-image,
.about-simple-product,
.about-cart-image,
.about-quality-visual img,
.about-legal-logo img {
    background-color:
        var(--iketan-soft);
}


/* =========================================================
   22. INTERACTION SAFETY
   ========================================================= */

.about-legal-link:focus-visible {
    outline:
        3px solid
        var(--iketan-yellow);

    outline-offset:
        5px;
}


/* =========================================================
   23. END OF ABOUT BASE STYLES
   ========================================================= */