/* =========================================================
   IKETAN.ID
   Partnership / Kemitraan Page Stylesheet
   ---------------------------------------------------------
   Scope:
   - Hero
   - Business concept
   - Benefits
   - Packages
   - Product system
   - How to start
   - Legal / trust route
   - Area lead form
   - Field moments
   - FAQ
   - Closing CTA

   Global:
   /assets/css/global.css

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

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


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

.partnership-hero,
.partnership-concept,
.partnership-benefits,
.partnership-packages,
.partnership-product,
.partnership-steps,
.partnership-trust,
.partnership-area,
.partnership-moments,
.partnership-faq,
.partnership-closing {
    position: relative;
}


/* =========================================================
   02. HERO
   ========================================================= */

.partnership-hero {
    position: relative;

    min-height: 820px;

    display: flex;
    align-items: stretch;

    overflow: hidden;

    color:
        var(--iketan-white);

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


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

.partnership-hero-media {
    position: absolute;

    inset: -5% 0;

    z-index: 1;

    pointer-events: none;

    will-change: transform;
}


.partnership-hero-image {
    width: 100%;
    height: 110%;

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

    filter:
        saturate(0.9)
        contrast(1.04)
        brightness(0.78);

    transform:
        scale(1.02);
}


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

.partnership-hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            rgba(35, 5, 5, 0.94) 0%,
            rgba(35, 5, 5, 0.80) 32%,
            rgba(35, 5, 5, 0.50) 57%,
            rgba(35, 5, 5, 0.14) 84%,
            rgba(35, 5, 5, 0.08) 100%
        ),

        linear-gradient(
            0deg,
            rgba(29, 4, 4, 0.78) 0%,
            rgba(29, 4, 4, 0.15) 42%,
            transparent 68%
        );
}


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

.partnership-hero-container {
    position: relative;

    z-index: 4;

    min-height: 820px;

    display: flex;
    flex-direction: column;

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

    padding-bottom: 36px;
}


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

.partnership-hero-content {
    width: 100%;
    max-width: 850px;

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

    padding-block: 58px;
}


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

    margin-bottom: 18px;

    color:
        var(--iketan-yellow);

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

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

    letter-spacing:
        0.12em;

    text-transform: uppercase;
}


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

    margin-bottom: 25px;

    color:
        var(--iketan-white);

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

    line-height: 0.9;

    text-wrap: balance;
}


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

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


.partnership-hero-description {
    max-width: 520px;

    margin-bottom: 31px;

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

    font-size:
        clamp(
            1rem,
            1.4vw,
            1.2rem
        );

    line-height: 1.75;
}


/* ---------------------------------------------------------
   Hero Actions
   --------------------------------------------------------- */

.partnership-hero-actions {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 12px;
}


/* ---------------------------------------------------------
   Hero Note
   --------------------------------------------------------- */

.partnership-hero-note {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-top: 18px;

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

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

    font-size:
        0.68rem;
}


.partnership-hero-note span {
    font-weight:
        var(--weight-bold);
}


.partnership-hero-note strong {
    color:
        rgba(255, 255, 255, 0.82);

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


/* =========================================================
   03. BUSINESS CONCEPT
   ========================================================= */

.partnership-concept {
    overflow: hidden;

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


/* ---------------------------------------------------------
   Concept Header
   --------------------------------------------------------- */

.partnership-concept-header {
    max-width: 920px;

    margin-bottom: 62px;
}


.partnership-concept-title {
    max-width: 900px;

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

    line-height: 0.93;
}


.partnership-concept-title span {
    display: block;

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


/* =========================================================
   04. CONCEPT GRID
   ========================================================= */

.partnership-concept-grid {
    display: grid;

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

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

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


.partnership-concept-item {
    min-height: 330px;

    display: flex;
    flex-direction: column;

    padding:
        30px;

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

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


.partnership-concept-item:last-child {
    border-right: 0;
}


.partnership-concept-item:hover {
    background-color:
        var(--iketan-soft);
}


.partnership-concept-number {
    margin-bottom: auto;

    color:
        var(--iketan-red);

    font-size:
        0.68rem;

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

    letter-spacing:
        0.08em;
}


.partnership-concept-item h3 {
    max-width: 330px;

    margin-bottom: 14px;

    color:
        var(--iketan-maroon);

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

    line-height: 1;
}


.partnership-concept-item p {
    max-width: 330px;

    color:
        var(--iketan-muted);

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

    line-height: 1.7;
}


/* =========================================================
   05. BENEFITS
   ========================================================= */

.partnership-benefits {
    overflow: hidden;
}


.partnership-benefits-header {
    max-width: 780px;

    margin-bottom: 56px;
}


.partnership-benefits-header
.section-eyebrow {
    color:
        var(--iketan-yellow);
}


.partnership-benefits-header
.section-title {
    max-width: 760px;

    margin-bottom: 20px;

    color:
        var(--iketan-white);

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

    line-height: 0.95;
}


.partnership-benefits-header > p {
    max-width: 530px;

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

    line-height: 1.75;
}


/* =========================================================
   06. BENEFIT GRID
   Dynamic renderer
   ========================================================= */

.partnership-benefit-grid {
    display: grid;

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

    gap: 14px;
}


/* ---------------------------------------------------------
   Benefit Card
   JS expected:
   .partnership-benefit-card
   .partnership-benefit-icon
   .partnership-benefit-index
   .partnership-benefit-title
   .partnership-benefit-description
   --------------------------------------------------------- */

.partnership-benefit-card {
    position: relative;

    min-height: 340px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    padding: 26px;

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

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

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

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

        background-color
        var(--duration-normal)
        var(--ease-smooth),

        border-color
        var(--duration-normal)
        var(--ease-smooth);
}


.partnership-benefit-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(255, 255, 255, 0.22);

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


.partnership-benefit-icon {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    margin-bottom: auto;

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

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

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


.partnership-benefit-icon img {
    width: 24px;
    height: 24px;

    object-fit: contain;
}


.partnership-benefit-index {
    margin-bottom: 12px;

    color:
        var(--iketan-yellow);

    font-size:
        0.64rem;

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

    letter-spacing:
        0.08em;
}


.partnership-benefit-title {
    margin-bottom: 11px;

    color:
        var(--iketan-white);

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

    font-size:
        1.18rem;

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

    line-height: 1.35;
}


.partnership-benefit-description {
    color:
        rgba(255, 255, 255, 0.58);

    font-size:
        0.78rem;

    line-height: 1.65;
}


/* ---------------------------------------------------------
   Benefit Skeleton
   --------------------------------------------------------- */

.partnership-benefit-skeleton {
    min-height: 340px;

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

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

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 20%,
            rgba(255, 255, 255, 0.075) 50%,
            rgba(255, 255, 255, 0.035) 80%
        );

    background-size:
        220% 100%;

    animation:
        partnershipSkeleton
        1.5s
        linear
        infinite;
}


/* =========================================================
   07. PACKAGES
   ========================================================= */

.partnership-packages {
    overflow: hidden;

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

    scroll-margin-top:
        calc(
            var(--navbar-height) +
            24px
        );
}


/* ---------------------------------------------------------
   Package Header
   --------------------------------------------------------- */

.partnership-packages-header {
    display: grid;

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

    align-items: end;

    gap: 70px;

    margin-bottom: 58px;
}


.partnership-packages-title {
    max-width: 700px;

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

    line-height: 0.93;
}


.partnership-packages-title span {
    color:
        var(--iketan-red);
}


.partnership-packages-intro {
    max-width: 470px;

    color:
        var(--iketan-muted);

    line-height: 1.75;
}


/* =========================================================
   08. PACKAGE GRID
   ========================================================= */

.partnership-package-grid {
    display: grid;

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

    gap: 20px;
}


/* =========================================================
   09. PACKAGE CARD
   Dynamic renderer
   ========================================================= */

.partnership-package-card {
    position: relative;

    min-width: 0;

    overflow: hidden;

    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);
}


.partnership-package-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(92, 13, 13, 0.18);

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


.partnership-package-card.is-featured {
    border-color:
        rgba(92, 13, 13, 0.24);
}


/* ---------------------------------------------------------
   Package Media
   --------------------------------------------------------- */

.partnership-package-media {
    position: relative;

    min-height: 410px;

    overflow: hidden;

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


.partnership-package-media::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            0deg,
            rgba(40, 5, 5, 0.40) 0%,
            rgba(40, 5, 5, 0.04) 42%,
            transparent 66%
        );
}


.partnership-package-image {
    width: 100%;
    height: 410px;

    object-fit: cover;

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


.partnership-package-card:hover
.partnership-package-image {
    transform:
        scale(1.025);
}


/* ---------------------------------------------------------
   Package Badge
   --------------------------------------------------------- */

.partnership-package-badge {
    position: absolute;

    top: 20px;
    left: 20px;

    z-index: 4;

    display: inline-flex;
    align-items: center;

    min-height: 34px;

    padding:
        7px
        12px;

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

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

    color:
        var(--iketan-maroon);

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

    font-size:
        0.64rem;

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


/* ---------------------------------------------------------
   Package Price Floating
   --------------------------------------------------------- */

.partnership-package-price {
    position: absolute;

    right: 20px;
    bottom: 20px;

    z-index: 4;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    color:
        var(--iketan-white);

    text-align: right;
}


.partnership-package-price-prefix {
    margin-bottom: 3px;

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

    font-size:
        0.65rem;

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


.partnership-package-price-value {
    font-family:
        var(--font-heading);

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

    font-weight: 400;

    line-height: 0.95;
}


/* ---------------------------------------------------------
   Package Content
   --------------------------------------------------------- */

.partnership-package-content {
    padding:
        30px;
}


.partnership-package-heading {
    margin-bottom: 26px;
}


.partnership-package-name {
    margin-bottom: 9px;

    color:
        var(--iketan-maroon);

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

    font-size:
        clamp(
            1.6rem,
            2.3vw,
            2.2rem
        );

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

    line-height: 1.25;
}


.partnership-package-tagline {
    margin-bottom: 10px;

    color:
        var(--iketan-ink);

    font-size:
        0.88rem;

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

    line-height: 1.6;
}


.partnership-package-description {
    max-width: 520px;

    color:
        var(--iketan-muted);

    font-size:
        0.8rem;

    line-height: 1.65;
}


/* =========================================================
   10. PACKAGE INCLUDES
   ========================================================= */

.partnership-package-includes {
    display: grid;

    gap: 10px;

    margin-bottom: 26px;
}


.partnership-package-includes-title {
    margin-bottom: 3px;

    color:
        var(--iketan-red);

    font-size:
        0.65rem;

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

    letter-spacing:
        0.08em;

    text-transform: uppercase;
}


.partnership-package-include {
    display: grid;

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

    align-items: start;

    gap: 13px;

    padding:
        13px
        14px;

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

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

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


.partnership-package-include-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

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

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


.partnership-package-include-icon img {
    width: 21px;
    height: 21px;

    object-fit: contain;
}


.partnership-package-include h4 {
    margin-bottom: 3px;

    color:
        var(--iketan-maroon);

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

    font-size:
        0.78rem;

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


.partnership-package-include p {
    color:
        var(--iketan-muted);

    font-size:
        0.68rem;

    line-height: 1.5;
}


/* =========================================================
   11. PACKAGE NOTES
   ========================================================= */

.partnership-package-notes {
    display: grid;

    gap: 7px;

    margin-bottom: 26px;

    padding-top: 19px;

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


.partnership-package-note {
    position: relative;

    padding-left: 15px;

    color:
        var(--iketan-muted);

    font-size:
        0.68rem;

    line-height: 1.55;
}


.partnership-package-note::before {
    content: "";

    position: absolute;

    top: 0.58em;
    left: 0;

    width: 5px;
    height: 5px;

    border-radius: 50%;

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


/* ---------------------------------------------------------
   Package CTA
   --------------------------------------------------------- */

.partnership-package-cta {
    width: 100%;
}


/* ---------------------------------------------------------
   Draft Price Indicator
   --------------------------------------------------------- */

.partnership-package-draft {
    display: inline-flex;

    margin-top: 10px;

    color:
        var(--iketan-muted);

    font-size:
        0.62rem;

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


/* =========================================================
   12. PACKAGE DISCLAIMER
   ========================================================= */

.partnership-package-disclaimer {
    max-width: 720px;

    margin-top: 24px;

    padding:
        15px
        17px;

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

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

    color:
        var(--iketan-muted);

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

    font-size:
        0.72rem;

    line-height: 1.6;
}


.partnership-package-disclaimer[hidden] {
    display: none;
}


/* =========================================================
   13. PACKAGE SKELETON
   ========================================================= */

.partnership-package-skeleton {
    overflow: hidden;

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

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

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


.partnership-package-skeleton-media {
    height: 410px;

    background:
        linear-gradient(
            90deg,
            var(--iketan-soft) 20%,
            #f0e2d7 50%,
            var(--iketan-soft) 80%
        );

    background-size:
        220% 100%;

    animation:
        partnershipSkeleton
        1.5s
        linear
        infinite;
}


.partnership-package-skeleton-content {
    display: grid;

    gap: 12px;

    padding: 30px;
}


.partnership-package-skeleton-content span {
    display: block;

    height: 14px;

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

    background:
        linear-gradient(
            90deg,
            var(--iketan-soft) 20%,
            #f0e2d7 50%,
            var(--iketan-soft) 80%
        );

    background-size:
        220% 100%;

    animation:
        partnershipSkeleton
        1.5s
        linear
        infinite;
}


.partnership-package-skeleton-content span:nth-child(1) {
    width: 48%;
}


.partnership-package-skeleton-content span:nth-child(2) {
    width: 78%;
}


.partnership-package-skeleton-content span:nth-child(3) {
    width: 92%;
}


.partnership-package-skeleton-content span:nth-child(4) {
    width: 64%;
}


/* =========================================================
   14. PRODUCT SYSTEM
   ========================================================= */

.partnership-product {
    overflow: hidden;

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

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


.partnership-product-layout {
    display: grid;

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

    align-items: center;

    gap: 86px;
}


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

.partnership-product-visual {
    position: relative;

    min-height: 640px;

    display: grid;
    place-items: center;

    overflow: hidden;

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

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

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


.partnership-product-shape {
    position: absolute;

    top: 50%;
    left: 50%;

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

    border-radius: 50%;

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

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


.partnership-product-visual::before {
    content: "";

    position: absolute;

    top: -70px;
    right: -55px;

    width: 190px;
    height: 190px;

    border:
        42px solid
        rgba(92, 13, 13, 0.045);

    border-radius: 50%;
}


.partnership-product-visual img {
    position: relative;

    z-index: 2;

    width:
        min(
            70%,
            410px
        );

    height: auto;

    object-fit: contain;

    mix-blend-mode: multiply;

    will-change: transform;
}


/* ---------------------------------------------------------
   Product Content
   --------------------------------------------------------- */

.partnership-product-content {
    max-width: 540px;
}


.partnership-product-content
.section-title {
    margin-bottom: 27px;

    font-size:
        clamp(
            3.6rem,
            5.5vw,
            5.3rem
        );

    line-height: 0.97;
}


.partnership-product-copy {
    display: grid;

    gap: 18px;
}


.partnership-product-copy p {
    color:
        var(--iketan-muted);

    line-height: 1.8;
}


/* =========================================================
   15. STEPS
   ========================================================= */

.partnership-steps {
    overflow: hidden;

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


/* ---------------------------------------------------------
   Step Header
   --------------------------------------------------------- */

.partnership-steps-header {
    max-width: 790px;

    margin-bottom: 58px;
}


.partnership-steps-header
.section-eyebrow {
    color:
        var(--iketan-maroon);
}


.partnership-steps-title {
    max-width: 760px;

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

    line-height: 0.93;
}


.partnership-steps-title span {
    color:
        var(--iketan-red);
}


/* =========================================================
   16. STEP LIST
   ========================================================= */

.partnership-step-list {
    display: grid;

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

    border-top:
        1px solid
        rgba(92, 13, 13, 0.18);

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


/* JS expected */

.partnership-step-card {
    min-height: 310px;

    display: flex;
    flex-direction: column;

    padding:
        30px;

    border-right:
        1px solid
        rgba(92, 13, 13, 0.18);

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


.partnership-step-card:last-child {
    border-right: 0;
}


.partnership-step-card:hover {
    background-color:
        rgba(255, 255, 255, 0.18);
}


.partnership-step-number {
    margin-bottom: auto;

    color:
        var(--iketan-red);

    font-size:
        0.7rem;

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

    letter-spacing:
        0.08em;
}


.partnership-step-card h3 {
    margin-bottom: 12px;

    color:
        var(--iketan-maroon);

    font-size:
        clamp(
            2.2rem,
            3.4vw,
            3.2rem
        );

    line-height: 0.98;
}


.partnership-step-card p {
    color:
        rgba(61, 10, 10, 0.72);

    font-size:
        0.8rem;

    line-height: 1.65;
}


/* ---------------------------------------------------------
   Step Skeleton
   --------------------------------------------------------- */

.partnership-step-skeleton {
    min-height: 310px;

    border-right:
        1px solid
        rgba(92, 13, 13, 0.14);

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.10) 20%,
            rgba(255, 255, 255, 0.24) 50%,
            rgba(255, 255, 255, 0.10) 80%
        );

    background-size:
        220% 100%;

    animation:
        partnershipSkeleton
        1.5s
        linear
        infinite;
}


.partnership-step-skeleton:last-child {
    border-right: 0;
}


/* =========================================================
   17. TRUST / LEGAL ROUTE
   ========================================================= */

.partnership-trust {
    padding-block:
        0
        clamp(
            90px,
            9vw,
            130px
        );

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


.partnership-trust-card {
    position: relative;

    min-height: 370px;

    display: grid;

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

    align-items: center;

    gap: 60px;

    overflow: hidden;

    padding:
        42px;

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

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

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


/* ---------------------------------------------------------
   Trust Content
   --------------------------------------------------------- */

.partnership-trust-content {
    position: relative;

    z-index: 3;

    max-width: 650px;
}


.partnership-trust-eyebrow {
    display: inline-flex;

    margin-bottom: 12px;

    color:
        var(--iketan-red);

    font-size:
        0.65rem;

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

    letter-spacing:
        0.08em;

    text-transform: uppercase;
}


.partnership-trust-content h2 {
    max-width: 610px;

    margin-bottom: 16px;

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

    line-height: 0.96;
}


.partnership-trust-content p {
    max-width: 520px;

    margin-bottom: 24px;

    color:
        var(--iketan-muted);

    line-height: 1.75;
}


.partnership-trust-link {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding-bottom: 4px;

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

    color:
        var(--iketan-maroon);

    font-size:
        0.78rem;

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


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


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


/* ---------------------------------------------------------
   Trust Mark
   --------------------------------------------------------- */

.partnership-trust-mark {
    display: grid;
    place-items: center;

    min-height: 220px;
}


.partnership-trust-mark span {
    color:
        rgba(92, 13, 13, 0.07);

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

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

    font-weight: 800;

    letter-spacing:
        -0.07em;

    transform:
        rotate(-6deg);
}


/* =========================================================
   18. AREA LEAD FORM
   ========================================================= */

.partnership-area {
    overflow: hidden;

    scroll-margin-top:
        calc(
            var(--navbar-height) +
            24px
        );
}


.partnership-area-layout {
    display: grid;

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

    align-items: start;

    gap: 90px;
}


/* ---------------------------------------------------------
   Area Intro
   --------------------------------------------------------- */

.partnership-area-intro {
    position: sticky;

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

    max-width: 560px;
}


.partnership-area-intro
.section-eyebrow {
    color:
        var(--iketan-yellow);
}


.partnership-area-intro
.section-title {
    margin-bottom: 22px;

    color:
        var(--iketan-white);

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

    line-height: 0.95;
}


.partnership-area-intro
.section-title span {
    display: block;

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


.partnership-area-intro > p {
    max-width: 500px;

    margin-bottom: 28px;

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

    line-height: 1.75;
}


/* ---------------------------------------------------------
   Area Hours
   --------------------------------------------------------- */

.partnership-area-hours {
    display: grid;

    gap: 4px;
}


.partnership-area-hours span {
    color:
        rgba(255, 255, 255, 0.46);

    font-size:
        0.66rem;

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


.partnership-area-hours strong {
    color:
        var(--iketan-white);

    font-size:
        0.76rem;

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


/* =========================================================
   19. AREA FORM CARD
   ========================================================= */

.partnership-area-form-card {
    padding:
        34px;

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

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

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

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


.partnership-area-form {
    display: grid;

    gap: 22px;
}


/* ---------------------------------------------------------
   Area Form Labels
   --------------------------------------------------------- */

.partnership-area-form
.form-label {
    display: block;

    margin-bottom: 8px;

    color:
        var(--iketan-ink);

    font-size:
        0.76rem;

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


/* ---------------------------------------------------------
   Area Form Inputs
   --------------------------------------------------------- */

.partnership-area-form
.form-control {
    width: 100%;

    min-height: 52px;

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

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

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

        box-shadow
        var(--duration-fast)
        var(--ease-default),

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


.partnership-area-form
.form-control:focus {
    border-color:
        var(--iketan-maroon);

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

    box-shadow:
        0 0 0 4px
        var(--maroon-08);
}


.partnership-area-form
.form-textarea {
    min-height: 130px;

    resize: vertical;
}


/* =========================================================
   20. LOCATION STATUS
   ========================================================= */

.partnership-location-status {
    margin: 0;
    padding: 0;

    border: 0;
}


.partnership-location-options {
    display: grid;

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

    gap: 10px;
}


.partnership-location-option {
    position: relative;

    cursor: pointer;
}


.partnership-location-option input {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip-path:
        inset(50%);

    white-space: nowrap;
}


.partnership-location-option span {
    min-height: 52px;

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

    padding:
        12px
        14px;

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

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

    color:
        var(--iketan-maroon);

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

    font-size:
        0.76rem;

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

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

        background-color
        var(--duration-fast)
        var(--ease-default),

        box-shadow
        var(--duration-fast)
        var(--ease-default);
}


.partnership-location-option
input:checked + span {
    border-color:
        var(--iketan-maroon);

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

    box-shadow:
        0 0 0 3px
        var(--maroon-06);
}


.partnership-location-option
input:focus-visible + span {
    outline:
        3px solid
        var(--iketan-yellow);

    outline-offset:
        3px;
}


/* =========================================================
   21. AREA FORM ERRORS
   ========================================================= */

.partnership-area-form
.form-error {
    display: block;

    margin-top: 6px;

    color:
        var(--iketan-red);

    font-size:
        0.68rem;

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


.partnership-area-form
.form-error[hidden] {
    display: none;
}


.partnership-area-form
.form-control.is-invalid {
    border-color:
        var(--iketan-red);

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


/* ---------------------------------------------------------
   Area Submit
   --------------------------------------------------------- */

.partnership-area-submit {
    min-height: 54px;

    gap: 10px;
}


.partnership-area-submit span {
    transition:
        transform
        var(--duration-normal)
        var(--ease-smooth);
}


.partnership-area-submit:hover span {
    transform:
        translate(
            3px,
            -3px
        );
}


/* ---------------------------------------------------------
   Form Disclaimer
   --------------------------------------------------------- */

.partnership-area-disclaimer {
    margin-top: -7px;

    color:
        var(--iketan-muted);

    font-size:
        0.66rem;

    line-height: 1.55;

    text-align: center;
}


/* =========================================================
   22. MOMENTS
   ========================================================= */

.partnership-moments {
    overflow: hidden;

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


.partnership-moments-header {
    max-width: 760px;

    margin-bottom: 52px;
}


.partnership-moments-title {
    margin-bottom: 18px;

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

    line-height: 0.95;
}


.partnership-moments-title span {
    color:
        var(--iketan-red);
}


.partnership-moments-header > p {
    max-width: 500px;

    color:
        var(--iketan-muted);

    line-height: 1.75;
}


/* =========================================================
   23. MOMENT GRID
   ========================================================= */

.partnership-moment-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(0, 0.65fr);

    grid-template-rows:
        repeat(
            2,
            290px
        );

    gap: 16px;
}


.partnership-moment {
    position: relative;

    overflow: hidden;

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

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


.partnership-moment-large {
    grid-row:
        1 / 3;
}


.partnership-moment img {
    width: 100%;
    height: 100%;

    object-fit: cover;

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


.partnership-moment:hover img {
    transform:
        scale(1.03);
}


.partnership-moment-product img {
    object-position: center;
}


/* =========================================================
   24. FAQ
   ========================================================= */

.partnership-faq {
    overflow: hidden;

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


.partnership-faq-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.75fr)
        minmax(0, 1.25fr);

    align-items: start;

    gap: 90px;
}


/* ---------------------------------------------------------
   FAQ Intro
   --------------------------------------------------------- */

.partnership-faq-intro {
    position: sticky;

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

    max-width: 520px;
}


.partnership-faq-intro
.section-title {
    margin-bottom: 20px;

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

    line-height: 0.96;
}


.partnership-faq-intro > p {
    max-width: 450px;

    color:
        var(--iketan-muted);

    line-height: 1.75;
}


/* =========================================================
   25. FAQ LIST
   Dynamic
   ========================================================= */

.partnership-faq-list {
    display: grid;

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


/* ---------------------------------------------------------
   FAQ Item
   JS expected:
   .partnership-faq-item
   .partnership-faq-trigger
   .partnership-faq-question
   .partnership-faq-icon
   .partnership-faq-panel
   .partnership-faq-answer
   .partnership-faq-link
   --------------------------------------------------------- */

.partnership-faq-item {
    border-bottom:
        1px solid
        var(--iketan-border);
}


.partnership-faq-trigger {
    width: 100%;

    display: grid;

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

    align-items: center;

    gap: 24px;

    padding:
        25px
        0;

    border: 0;

    color:
        var(--iketan-ink);

    background: transparent;

    text-align: left;

    cursor: pointer;
}


.partnership-faq-question {
    font-size:
        0.95rem;

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

    line-height: 1.45;
}


.partnership-faq-icon {
    position: relative;

    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

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

    border-radius: 50%;
}


.partnership-faq-icon::before,
.partnership-faq-icon::after {
    content: "";

    position: absolute;

    width: 11px;
    height: 1.5px;

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

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

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


.partnership-faq-icon::after {
    transform:
        rotate(90deg);
}


.partnership-faq-trigger[aria-expanded="true"]
.partnership-faq-icon::after {
    transform:
        rotate(0deg);
}


/* ---------------------------------------------------------
   FAQ Panel
   --------------------------------------------------------- */

.partnership-faq-panel {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows
        var(--duration-slow)
        var(--ease-smooth);
}


.partnership-faq-item.is-open
.partnership-faq-panel {
    grid-template-rows: 1fr;
}


.partnership-faq-panel-inner {
    overflow: hidden;
}


.partnership-faq-answer {
    max-width: 660px;

    padding:
        0
        60px
        26px
        0;

    color:
        var(--iketan-muted);

    font-size:
        0.84rem;

    line-height: 1.75;
}


.partnership-faq-link {
    width: fit-content;

    display: inline-flex;

    margin-top: 12px;

    color:
        var(--iketan-maroon);

    font-size:
        0.76rem;

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


/* ---------------------------------------------------------
   FAQ Skeleton
   --------------------------------------------------------- */

.partnership-faq-skeleton {
    height: 82px;

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

    background:
        linear-gradient(
            90deg,
            transparent 15%,
            rgba(92, 13, 13, 0.045) 50%,
            transparent 85%
        );

    background-size:
        220% 100%;

    animation:
        partnershipSkeleton
        1.5s
        linear
        infinite;
}


/* =========================================================
   26. NO SCRIPT / DATA ERROR
   ========================================================= */

.partnership-noscript,
.partnership-data-error {
    padding:
        16px
        18px;

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

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

    color:
        var(--iketan-muted);

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

    font-size:
        0.78rem;

    line-height: 1.6;
}


.partnership-benefits
.partnership-data-error {
    border-color:
        rgba(255, 255, 255, 0.12);

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

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


/* =========================================================
   27. CLOSING CTA
   ========================================================= */

.partnership-closing {
    min-height: 690px;

    display: flex;
    align-items: center;

    overflow: hidden;

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


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

.partnership-closing-container {
    position: relative;

    z-index: 3;
}


.partnership-closing-content {
    position: relative;

    z-index: 3;

    max-width: 760px;
}


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

    margin-bottom: 15px;

    color:
        var(--iketan-yellow);

    font-size:
        0.66rem;

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

    letter-spacing:
        0.10em;

    text-transform: uppercase;
}


.partnership-closing h2 {
    max-width: 740px;

    margin-bottom: 20px;

    color:
        var(--iketan-white);

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

    line-height: 0.9;
}


.partnership-closing h2 span {
    color:
        var(--iketan-yellow);
}


.partnership-closing-content > p {
    max-width: 470px;

    margin-bottom: 30px;

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

    line-height: 1.75;
}


/* ---------------------------------------------------------
   Closing Hours
   --------------------------------------------------------- */

.partnership-closing-hours {
    display: grid;

    gap: 4px;

    margin-top: 28px;
}


.partnership-closing-hours span {
    color:
        rgba(255, 255, 255, 0.44);

    font-size:
        0.64rem;

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


.partnership-closing-hours strong {
    color:
        var(--iketan-white);

    font-size:
        0.74rem;

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


/* ---------------------------------------------------------
   Closing Giant Word
   --------------------------------------------------------- */

.partnership-closing-word {
    position: absolute;

    right: -3%;
    bottom: -22%;

    z-index: 1;

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

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

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

    font-weight: 800;

    line-height: 1;

    letter-spacing:
        -0.08em;

    white-space: nowrap;

    pointer-events: none;

    user-select: none;
}


/* =========================================================
   28. LOADING STATES
   ========================================================= */

[data-partnership-benefits][aria-busy="true"],
[data-partnership-packages][aria-busy="true"],
[data-partnership-steps][aria-busy="true"],
[data-partnership-faq][aria-busy="true"] {
    cursor: progress;
}


/* =========================================================
   29. FORM SUBMIT STATE
   ========================================================= */

.partnership-area-form.is-submitting {
    pointer-events: none;
}


.partnership-area-form.is-submitting
.partnership-area-submit {
    opacity: 0.72;
}


/* =========================================================
   30. FORM STATUS
   ========================================================= */

.partnership-form-status {
    padding:
        13px
        15px;

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

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

    color:
        var(--iketan-muted);

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

    font-size:
        0.74rem;

    line-height: 1.55;
}


.partnership-form-status.is-error {
    border-color:
        rgba(185, 40, 46, 0.24);

    color:
        var(--iketan-red);

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


/* =========================================================
   31. PARALLAX HELPERS
   ========================================================= */

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

    backface-visibility: hidden;

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


/* =========================================================
   32. FOCUS STATES
   ========================================================= */

.partnership-package-cta:focus-visible,
.partnership-trust-link:focus-visible,
.partnership-faq-trigger:focus-visible,
.partnership-faq-link:focus-visible {
    outline:
        3px solid
        var(--iketan-yellow);

    outline-offset: 4px;
}


/* =========================================================
   33. SKELETON ANIMATION
   ========================================================= */

@keyframes partnershipSkeleton {

    from {
        background-position:
            200% 0;
    }

    to {
        background-position:
            -20% 0;
    }

}


/* =========================================================
   END OF PARTNERSHIP BASE STYLES
   ========================================================= */