/* =========================================
   KRAZYDINZ
   BASE DESIGN SYSTEM
========================================= */


/* -----------------------------------------
   DESIGN TOKENS
----------------------------------------- */

:root {

    /* Colors */

    --kd-ivory: #F7F6F2;
    --kd-charcoal: #171717;
    --kd-gray: #6B6B6B;
    --kd-white: #FFFFFF;
    --kd-coral: #E85D4A;
    --kd-border: #E5E3DE;


    /* Typography */

    --font-display: "Manrope", sans-serif;
    --font-body: "DM Sans", sans-serif;


    /* Layout */

    --container-width: 1280px;

    --container-padding-desktop: 32px;
    --container-padding-tablet: 24px;
    --container-padding-mobile: 20px;


    /* Radius */

    --radius-card: 20px;
    --radius-input: 12px;
    --radius-button: 10px;


    /* Motion */

    --transition-fast: 150ms ease;
    --transition-standard: 300ms cubic-bezier(0.22, 1, 0.36, 1);
    --transition-slow: 700ms cubic-bezier(0.22, 1, 0.36, 1);


    /* Shadows */

    --shadow-soft:
        0 4px 20px rgba(23, 23, 23, 0.04);

    --shadow-hover:
        0 12px 35px rgba(23, 23, 23, 0.08);

}


/* -----------------------------------------
   RESET
----------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    background: var(--kd-ivory);
    color: var(--kd-charcoal);

    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


img,
svg {
    display: block;
    max-width: 100%;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    border: 0;
}


a {
    color: inherit;
    text-decoration: none;
}


p,
h1,
h2,
h3,
h4 {
    margin-top: 0;
}


h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
}


/* -----------------------------------------
   CONTAINER
----------------------------------------- */

.container {
    width: min(
        100% - (var(--container-padding-desktop) * 2),
        var(--container-width)
    );

    margin-inline: auto;
}


/* -----------------------------------------
   SECTIONS
----------------------------------------- */

.section {
    position: relative;
}


/* -----------------------------------------
   TYPOGRAPHY
----------------------------------------- */

.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 24px;

    color: var(--kd-gray);

    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;

    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}


.eyebrow-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: var(--kd-coral);
}


.section-title {
    max-width: 900px;

    margin-bottom: 32px;

    font-size: clamp(2.5rem, 4vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.03;
}


.section-title span {
    display: block;

    color: var(--kd-gray);
}


.section-description {
    max-width: 650px;

    color: var(--kd-gray);

    font-size: 1.125rem;
    line-height: 1.65;
}


/* -----------------------------------------
   FOCUS STATES
----------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--kd-coral);
    outline-offset: 4px;
}


/* -----------------------------------------
   RESPONSIVE CONTAINER
----------------------------------------- */

@media (max-width: 1023px) {

    .container {
        width: min(
            100% - (var(--container-padding-tablet) * 2),
            var(--container-width)
        );
    }

}


@media (max-width: 767px) {

    .container {
        width: min(
            100% - (var(--container-padding-mobile) * 2),
            var(--container-width)
        );
    }

}


/* =========================================
   KRAZYDINZ
   ANIMATION SYSTEM V1
========================================= */

[data-animate] {
    --animation-delay: 0ms;

    opacity: 0;

    transition:
        opacity 800ms
            cubic-bezier(0.22, 1, 0.36, 1)
            var(--animation-delay),

        transform 1100ms
            cubic-bezier(0.22, 1, 0.36, 1)
            var(--animation-delay);
}


/* -----------------------------------------
   FROM BELOW / BRING UP
----------------------------------------- */

[data-animate="up"] {
    transform:
        translate3d(0, 28px, 0);
    
}


/* -----------------------------------------
   FROM ABOVE / BRING DOWN
----------------------------------------- */

[data-animate="down"] {
    transform:
        translate3d(0, -28px, 0);
}


/* -----------------------------------------
   FROM LEFT
----------------------------------------- */

[data-animate="left"] {
    transform:
        translate3d(-36px, 0, 0);
}


/* -----------------------------------------
   FROM RIGHT
----------------------------------------- */

[data-animate="right"] {
    transform:
        translate3d(36px, 0, 0);
}


/* -----------------------------------------
   SOFT SCALE
----------------------------------------- */

[data-animate="scale"] {
    transform:
        scale(0.965);
}


/* -----------------------------------------
   FINAL / VISIBLE STATE
----------------------------------------- */

[data-animate].is-visible {
    opacity: 1;

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


/* =========================================
   KRAZYDINZ
   SHARED COMPONENTS
========================================= */


/* -----------------------------------------
   HEADER
----------------------------------------- */

.site-header {
    position: fixed;
    top: 0;
    left: 0;

    z-index: 1000;

    width: 100%;

    transition:
        background-color var(--transition-standard),
        border-color var(--transition-standard),
        backdrop-filter var(--transition-standard);
}


.site-header.is-scrolled {
    background: rgba(247, 246, 242, 0.88);

    border-bottom: 1px solid rgba(229, 227, 222, 0.8);

    backdrop-filter: blur(14px);
}


.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 88px;
}


/* -----------------------------------------
   BRAND
----------------------------------------- */

.brand {
    display: inline-flex;
    align-items: baseline;

    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;

    letter-spacing: -0.04em;
}


.brand-heavy {
    font-weight: 800;
}

/* -----------------------------------------
   BRAND LOGO IMAGE
----------------------------------------- */

/* -----------------------------------------
   BRAND LOGO IMAGE
----------------------------------------- */

.brand-logo {
    display: inline-flex;
    align-items: center;
}

.brand-logo-image {
    display: block;
    width: auto;
    height: 76px;
    object-fit: contain;

    opacity: 0;
    transform: translateX(-24px) scale(0.97);

    animation:
        krazyLogoEntrance 900ms
        cubic-bezier(0.22, 1, 0.36, 1)
        180ms forwards;

    transition:
        transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.brand-logo:hover .brand-logo-image {
    transform: translateX(0) scale(1.025);
}

@keyframes krazyLogoEntrance {

    from {
        opacity: 0;
        transform: translateX(-24px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

}

/* -----------------------------------------
   MAIN NAVIGATION
----------------------------------------- */

.main-navigation {
    display: flex;
    align-items: center;
    gap: 32px;
}


.main-navigation a,
.footer-navigation a {
    position: relative;

    color: var(--kd-gray);

    font-size: 0.9rem;
    font-weight: 500;

    transition: color var(--transition-fast);
}


.main-navigation a::after {
    position: absolute;
    bottom: -6px;
    left: 0;

    width: 100%;
    height: 1px;

    content: "";

    background: var(--kd-coral);

    transform: scaleX(0);
    transform-origin: right;

    transition: transform var(--transition-standard);
}


.main-navigation a:hover,
.footer-navigation a:hover {
    color: var(--kd-charcoal);
}


.main-navigation a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}


/* -----------------------------------------
   MOBILE MENU BUTTON
----------------------------------------- */

.menu-toggle {
    display: none;

    width: 42px;
    height: 42px;

    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;

    background: transparent;

    cursor: pointer;
}


.menu-toggle span {
    display: block;

    width: 22px;
    height: 1.5px;

    background: var(--kd-charcoal);

    transition: transform var(--transition-standard);
}


/* -----------------------------------------
   TEXT LINK
----------------------------------------- */

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;

    transition: gap var(--transition-standard),
                color var(--transition-fast);
}


.text-link span {
    color: var(--kd-coral);

    transition: transform var(--transition-standard);
}


.text-link:hover {
    color: var(--kd-coral);
}


.text-link:hover span {
    transform: translate(4px, -4px);
}


/* -----------------------------------------
   FOOTER
----------------------------------------- */

.site-footer {
    position: relative;

    margin: 0;

    padding-top: 72px;
    padding-bottom: 32px;

    background: #34312E;
    color: var(--kd-ivory);

    border-top: 1px solid rgba(23, 23, 23, 0.25);
}


.site-footer::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

background: var(--kd-charcoal);
    
}


.footer-inner {
    display: grid;

    grid-template-columns: 2fr 1fr 1fr;

    gap: 48px;
}


.site-footer .brand {
    color: var(--kd-white);
    font-weight: 700;
}


.footer-brand p {
    max-width: 300px;

    margin-top: 16px;

    color: rgba(247, 246, 242, 0.58);

    font-size: 0.9rem;
}


.footer-navigation {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.footer-navigation a {
    color: rgba(247, 246, 242, 0.72);

    transition: color var(--transition-fast);
}


.footer-navigation a:hover {
    color: var(--kd-white);
}


.footer-meta {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    color: rgba(247, 246, 242, 0.58);

    font-size: 0.8rem;
}


.footer-meta p {
    margin-bottom: 8px;
}

/* -----------------------------------------
   MOBILE COMPONENTS
----------------------------------------- */

@media (max-width: 767px) {

    .header-inner {
        min-height: 76px;
    }


    .menu-toggle {
        display: flex;
    }


    .main-navigation {
        position: absolute;

        top: calc(100% + 1px);
        left: 0;

        width: 100%;

        padding: 24px 20px 32px;

        flex-direction: column;
        align-items: flex-start;
        gap: 20px;

        background: var(--kd-ivory);

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

        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);

        transition:
            opacity var(--transition-standard),
            transform var(--transition-standard);
    }


    .main-navigation.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }


    .menu-toggle.is-open span:first-child {
        transform: translateY(3.75px) rotate(45deg);
    }


    .menu-toggle.is-open span:last-child {
        transform: translateY(-3.75px) rotate(-45deg);
    }


    .footer-inner {
        grid-template-columns: 1fr;

        gap: 32px;
    }

}

html,
body {
    margin-bottom: 0;
    padding-bottom: 0;
}

.site-footer {
    margin-bottom: 0;
}

.site-footer > :last-child {
    margin-bottom: 0;
}

/* -----------------------------------------
   FOOTER LOGO
----------------------------------------- */

.footer-logo {
    display: inline-flex;
    align-items: center;
}

.footer-logo-image {
    display: block;

    width: auto;
    height: 76px;

    object-fit: contain;
}

/* =========================================
   KRAZYDINZ
   ABOUT PAGE
========================================= */


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

.about-hero {
    padding-top: 180px;
    padding-bottom: 140px;

    background: var(--kd-ivory);
}

.about-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);

    gap: 96px;

    align-items: end;
}

.about-hero-heading {
    max-width: 860px;
}

.about-hero-title {
    margin-top: 28px;

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

    letter-spacing: -0.06em;
    line-height: 0.96;
}

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

/* Hero Title Reveal */

.about-hero-reveal {
    overflow: hidden;
}

.about-hero-line {
    display: block;

    opacity: 0;

    transform: translateX(-80px);

    animation: aboutHeroSlideIn 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.about-hero-line-dark {
    color: var(--kd-charcoal);

    animation-delay: 220ms;
}

.about-hero-line-gray {
    color: var(--kd-gray);

    animation-delay: 440ms;
}

@keyframes aboutHeroSlideIn {

    from {
        opacity: 0;

        transform: translateX(-80px);
    }

    to {
        opacity: 1;

        transform: translateX(0);
    }
}

.about-hero-copy {
    max-width: 520px;

    padding-bottom: 12px;

    color: var(--kd-gray);

    font-size: 1.08rem;
    line-height: 1.7;
}

.about-hero-copy p {
    margin-bottom: 24px;
}

.about-hero-copy p:last-child {
    margin-bottom: 0;
}

.about-hero-lead {
    color: var(--kd-charcoal);

    font-size: 1.3rem;
    font-weight: 500;

    line-height: 1.55;
}


/* -----------------------------------------
   ABOUT BELIEF
----------------------------------------- */

.about-belief {
    position: relative;

    padding-block: 160px;

    background: #F1E9E5;

    border-top: 1px solid rgba(232, 93, 74, 0.14);
    border-bottom: 1px solid rgba(232, 93, 74, 0.14);
}

.about-belief .eyebrow-dot {
    background: var(--kd-coral);
}

.about-belief-grid {
    display: grid;

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

    gap: 96px;

align-items: center;
    
}

.about-belief-label {
    top: 140px;

    align-self: start;
}
.about-belief-content {
    max-width: 880px;
}

.about-belief-title {
    margin-bottom: 56px;

    font-size: clamp(2.8rem, 5vw, 5.2rem);
    font-weight: 700;

    letter-spacing: -0.055em;
    line-height: 1;
}

.about-belief-copy {
    display: grid;

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

    gap: 32px 48px;

    max-width: 760px;
}

.about-belief-copy p {
    margin-bottom: 0;

    color: var(--kd-gray);

    font-size: 1.05rem;
    line-height: 1.7;
}

.about-belief-copy p:last-child {
    grid-column: 1 / -1;

    text-align: center;

    color: var(--kd-charcoal);

    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;

    letter-spacing: -0.02em;
}

/* -----------------------------------------
   ABOUT PRINCIPLES
----------------------------------------- */

.about-principles {
    padding-block: 160px;

    background: var(--kd-charcoal);
    color: var(--kd-ivory);
}

.about-principles .eyebrow {
    color: rgba(247, 246, 242, 0.6);
}

.about-principles .eyebrow-dot {
    background: var(--kd-coral);
}

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

    margin-top: 28px;
    margin-bottom: 96px;

    color: var(--kd-ivory);

    font-size: clamp(3rem, 5vw, 5.5rem);
    font-weight: 700;

    letter-spacing: -0.055em;
    line-height: 1;
}

.about-principles .section-title span {
    display: block;

    color: rgba(247, 246, 242, 0.48);
}


/* Principles List */

.about-principles-list {
    border-top: 1px solid rgba(247, 246, 242, 0.18);
}

.about-principle {
    display: grid;

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

    gap: 48px;

    padding-block: 64px;

    border-bottom: 1px solid rgba(247, 246, 242, 0.18);
}

.about-principle-number {
    padding-top: 8px;

    color: var(--kd-coral);

    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;

    letter-spacing: 0.08em;
}

.about-principle-content {
    display: grid;

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

    gap: 64px;

align-items: center;
    
}

.about-principle-kicker {
    margin-bottom: 12px;

    color: rgba(247, 246, 242, 0.55);

    font-size: 0.85rem;
    font-weight: 600;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about-principle-content h3 {
    grid-column: 1;

    margin: 0;

    color: var(--kd-ivory);

    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 3rem);
    font-weight: 600;

    letter-spacing: -0.04em;
    line-height: 1.1;
}

.about-principle-content > p:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;

    max-width: 560px;

    margin: 0;

    color: rgba(247, 246, 242, 0.65);

    font-size: 1.05rem;
    line-height: 1.7;
}

/* -----------------------------------------
   ABOUT STATEMENT
----------------------------------------- */

.about-statement {
    position: relative;

    padding-block: 180px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 82%,
            rgba(232, 93, 74, 0.32) 0%,
            rgba(232, 93, 74, 0.18) 18%,
            rgba(232, 93, 74, 0.08) 34%,
            transparent 52%
        ),
        linear-gradient(
            135deg,
            #F6DDD2 0%,
            #F8E9DF 38%,
            #F5E7DC 68%,
            #F7EEE7 100%
        );
}

.about-statement .container {
    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;
}

.about-statement-kicker {
    margin-bottom: 28px;

    color: var(--kd-coral);

    font-size: 0.85rem;
    font-weight: 700;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.about-statement-title {
    max-width: 980px;

    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(4rem, 7vw, 7.5rem);
    font-weight: 700;

    letter-spacing: -0.06em;
    line-height: 0.95;
}

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

    color: var(--kd-gray);
}

.about-statement-description {
    max-width: 560px;

    margin-top: 40px;
    margin-bottom: 0;

color: #66615E;

    font-size: 1.1rem;
    line-height: 1.7;
}


/* -----------------------------------------
   ABOUT PROCESS
----------------------------------------- */

.about-process {
    padding-block: 160px;

    background: #EFEEE9;
}

.about-process .about-section-heading {
    margin-bottom: 96px;
}

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

    margin-top: 28px;

    font-size: clamp(3.2rem, 5vw, 5.8rem);
    font-weight: 700;

    letter-spacing: -0.055em;
    line-height: 0.98;
}

.about-process .section-title span {
    display: block;

    color: var(--kd-gray);
}


/* Process List */

.process-list {
    border-top: 1px solid var(--kd-border);
}

.process-step {
    display: grid;

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

    gap: 48px;

align-items: center;

    padding-block: 48px;

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

.process-number {
    padding-top: 6px;

    color: var(--kd-coral);

    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;

    letter-spacing: 0.08em;
}

.process-step h3 {
    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 3rem);
    font-weight: 600;

    letter-spacing: -0.04em;
    line-height: 1.05;
}

.process-step p {
    max-width: 560px;

    margin: 0;

    color: var(--kd-gray);

    font-size: 1.05rem;
    line-height: 1.7;
}


/* -----------------------------------------
   ABOUT CTA
----------------------------------------- */

.about-cta {
    padding-top: 160px;
    padding-bottom: 80px;

    background: #292724;
    color: var(--kd-ivory);
}

.about-cta-inner {
    display: grid;

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

    gap: 80px;

    align-items: end;
}

.about-cta .eyebrow {
    color: rgba(247, 246, 242, 0.6);
}

.about-cta .eyebrow-dot {
    background: var(--kd-coral);
}

.about-cta-title {
    max-width: 860px;

    margin-top: 28px;
    margin-bottom: 0;

    font-family: var(--font-display);
    font-size: clamp(3.4rem, 5.5vw, 6.2rem);
    font-weight: 700;

    letter-spacing: -0.055em;
    line-height: 0.98;
}

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

    color: rgba(247, 246, 242, 0.48);
}


/* CTA Actions */

.about-cta-actions {
    display: flex;
    flex-direction: column;

    border-top: 1px solid rgba(247, 246, 242, 0.2);
}

.about-cta-link {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 24px;

    padding-block: 28px;

    border-bottom: 1px solid rgba(247, 246, 242, 0.2);

    color: var(--kd-ivory);

    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    
    transform-origin: center;

transition:
    color var(--transition-fast),
    padding-left var(--transition-standard),
    transform var(--transition-standard);
    
}

.about-cta-link > span:last-child {
    color: var(--kd-coral);

    font-size: 1.15rem;

    transition:
        transform var(--transition-standard);
}

.about-cta-link:hover {
    padding-left: 10px;

    color: var(--kd-coral);

    transform: scale(0.97);
}
.about-cta-link:hover > span:last-child {
    transform: translate(4px, -4px);
}

.about-cta-primary {
    font-size: 1.35rem;
}

/* -----------------------------------------
   ABOUT TYPOGRAPHY POLISH
----------------------------------------- */

.about-hero-title,
.about-belief-title,
.about-principles .section-title,
.about-statement-title,
.about-process .section-title,
.about-cta-title {
    text-wrap: balance;
}

.about-hero-copy,
.about-belief-copy,
.about-statement-description,
.process-step p {
    text-wrap: pretty;
}

/* -----------------------------------------
   TABLET
----------------------------------------- */

@media (max-width: 1023px) {

    /* About Hero */

    .about-hero {
        padding-top: 160px;
        padding-bottom: 120px;
    }

    .about-hero-grid {
        grid-template-columns: 1fr;
        gap: 64px;
    }
    

    /* About Belief */

    .about-belief {
        padding-block: 120px;
    }

    .about-belief-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .about-belief-label {
        position: static;
    }

    .about-belief-content {
        max-width: none;
    }


    /* About Principles */

    .about-principles {
        padding-block: 120px;
    }

    .about-principles .section-title {
        margin-bottom: 72px;
    }

    .about-principle {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 32px;

        padding-block: 52px;
    }

    .about-principle-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .about-principle-content > p:last-child {
        grid-column: 1;
        grid-row: auto;

        max-width: 680px;
    }

    /* About Statement */

    .about-statement {
        padding-block: 140px;
    }

    .about-statement-title {
        font-size: clamp(3.5rem, 8vw, 6rem);
    }


    /* About Process */

    .about-process {
        padding-block: 120px;
    }

    .about-process .about-section-heading {
        margin-bottom: 72px;
    }

    .process-step {
        grid-template-columns:
            64px
            minmax(180px, 0.4fr)
            minmax(0, 1fr);

        gap: 32px;

        padding-block: 42px;
    }


    /* About CTA */

    .about-cta {
        padding-block: 120px;
    }

    .about-cta-inner {
        grid-template-columns: 1fr;

        gap: 72px;
    }

    .about-cta-title {
        max-width: 780px;
    }

    .about-cta-actions {
        max-width: 680px;
    }
}


/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 767px) {

/* About Hero */

    .about-hero {
        padding-top: 130px;
        padding-bottom: 90px;
    }

    .about-hero-grid {
        gap: 48px;
    }

    .about-hero-title {
        font-size: clamp(3.2rem, 15vw, 5.2rem);
    }

    .about-hero-copy {
        font-size: 1rem;
    }

    .about-hero-lead {
        font-size: 1.15rem;
    }


    /* About Belief */

    .about-belief {
        padding-block: 96px;
    }

    .about-belief-grid {
        gap: 40px;
    }

    .about-belief-title {
        margin-bottom: 40px;

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

    .about-belief-copy {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .about-belief-copy p {
        font-size: 1rem;
    }

    .about-belief-copy p:last-child {
        font-size: 1.2rem;
    }


    /* About Principles */

    .about-principles {
        padding-block: 96px;
    }

    .about-principles .section-title {
        margin-bottom: 56px;

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

    .about-principle {
        grid-template-columns: 1fr;
        gap: 20px;

        padding-block: 40px;
    }

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

    .about-principle-content {
        gap: 18px;
    }

    .about-principle-content h3 {
        font-size: clamp(1.8rem, 9vw, 2.6rem);
    }

    .about-principle-content > p:last-child {
        font-size: 1rem;
    }
    
    /* About Statement */

    .about-statement {
        padding-block: 110px;
    }

    .about-statement-kicker {
        margin-bottom: 22px;
    }

    .about-statement-title {
        font-size: clamp(3rem, 14vw, 4.8rem);
        line-height: 0.98;
    }

    .about-statement-description {
        margin-top: 32px;

        font-size: 1rem;
    }


    /* About Process */

    .about-process {
        padding-block: 96px;
    }

    .about-process .about-section-heading {
        margin-bottom: 56px;
    }

    .about-process .section-title {
        font-size: clamp(2.8rem, 12vw, 4.2rem);
    }

    .process-step {
        grid-template-columns: 1fr;

        gap: 16px;

        padding-block: 34px;
    }

    .process-number {
        padding-top: 0;

        margin-bottom: 2px;
    }

    .process-step h3 {
        font-size: clamp(1.9rem, 9vw, 2.7rem);
    }

    .process-step p {
        font-size: 1rem;
    }


    /* About CTA */

    .about-cta {
        padding-block: 96px;
    }

    .about-cta-inner {
        gap: 56px;
    }

    .about-cta-title {
        font-size: clamp(2.8rem, 12vw, 4.4rem);
    }

    .about-cta-actions {
        width: 100%;
        max-width: none;
    }

    .about-cta-link {
        gap: 18px;

        padding-block: 24px;

        font-size: 1.05rem;
    }

    .about-cta-primary {
        font-size: 1.2rem;
    }
    
        .about-hero-title,
    .about-belief-title,
    .about-principles .section-title,
    .about-statement-title,
    .about-process .section-title,
    .about-cta-title {
        overflow-wrap: break-word;
    }
}

/* =========================================
   MISSION AND VISION
========================================= */

.about-mission-vision {
    padding-block: 160px;

    background: #171717;
    color: #F7F6F2;
}


/* =========================================
   DESKTOP LAYOUT
========================================= */

.about-mission-vision > .container {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.72fr)
        minmax(0, 1.55fr);

    gap: 88px;

    align-items: start;
}


/* =========================================
   INTRO
========================================= */

.mission-vision-intro {
    position: sticky;
    top: 140px;
}

.mission-vision-intro .eyebrow {
    color: rgba(247, 246, 242, 0.6);
}

.mission-vision-intro .eyebrow-dot {
    background: #E85D4A;
}

.mission-vision-title {
    max-width: 520px;

    margin-top: 28px;

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

    font-size: clamp(3.4rem, 5vw, 5.8rem);
    font-weight: 700;

    letter-spacing: -0.055em;
    line-height: 0.96;

    text-wrap: balance;
}

.mission-vision-title span {
    display: block;

    color: rgba(247, 246, 242, 0.45);
}

.mission-vision-description {
    max-width: 430px;

    margin-top: 36px;

    color: rgba(247, 246, 242, 0.64);

    font-size: 1.05rem;
    line-height: 1.72;

    text-wrap: pretty;
}


/* =========================================
   FLOWCHART WRAPPER
========================================= */

.mission-vision-flow {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 72px;

    padding-top: 88px;
}


/* =========================================
   FLOW GROUP
========================================= */

.flow-group {
    position: relative;

    display: grid;

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

    gap: 44px;

    align-items: center;
}


/* =========================================
   HUB
========================================= */

.flow-hub {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;

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

    width: 124px;
    height: 124px;

    border-radius: 50%;

    background: #171717;

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

    text-align: center;
    text-transform: uppercase;
}

.flow-hub span {
    font-size: 0.78rem;
    font-weight: 500;

    letter-spacing: 0.09em;
}

.flow-hub strong {
    margin-top: 4px;

    font-size: 1rem;
    font-weight: 700;

    letter-spacing: -0.015em;
}


/* Mission Hub */

.flow-hub-mission {
    border: 1px solid #E85D4A;
    color: #E85D4A;
}


/* Vision Hub */

.flow-hub-vision {
    border: 1px solid #79C7D3;
    color: #79C7D3;
}


/* =========================================
   HUB TO BRANCH CONNECTOR
========================================= */

.flow-group::before {
    content: "";

    position: absolute;

    left: 124px;
    top: 50%;

    width: 50px;
    height: 1px;

    background: rgba(247, 246, 242, 0.28);

    transform: translateY(-50%);
}


/* =========================================
   BRANCH CONTAINER
========================================= */

.flow-branches {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 14px;
}


/* Main vertical branch */

.flow-branches::before {
    content: "";

    position: absolute;

    left: -22px;
    top: 34px;
    bottom: 34px;

    width: 1px;

    background: rgba(247, 246, 242, 0.28);
}


/* =========================================
   FLOW ITEM
========================================= */

.flow-item {
    position: relative;

    display: grid;

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

    gap: 14px;

    align-items: center;
}


/* Horizontal branch */

.flow-item::before {
    content: "";

    position: absolute;

    left: -22px;
    top: 50%;

    width: 22px;
    height: 1px;

    background: rgba(247, 246, 242, 0.28);

    transform: translateY(-50%);
}


/* =========================================
   NUMBER NODE
========================================= */

.flow-number {
    position: relative;
    z-index: 2;

    display: flex;

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

    width: 44px;
    height: 44px;

    border-radius: 50%;

    background: #171717;

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

    font-size: 0.86rem;
    font-weight: 600;
}


/* Mission Number */

.flow-item-mission .flow-number {
    border: 1px solid #E85D4A;
    color: #E85D4A;
}


/* Vision Number */

.flow-item-vision .flow-number {
    border: 1px solid #79C7D3;
    color: #79C7D3;
}


/* =========================================
   CARD
========================================= */

.flow-card {
    position: relative;

    display: grid;

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

    gap: 28px;

    align-items: center;

    min-height: 92px;

    padding: 22px 24px;

    border: 1px solid rgba(247, 246, 242, 0.24);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.012);
}


/* Connector dot */

.flow-card::before {
    content: "";

    position: absolute;

    left: -6px;
    top: 50%;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #171717;

    transform: translateY(-50%);
}


/* Mission dot */

.flow-item-mission .flow-card::before {
    border: 2px solid #E85D4A;
}


/* Vision dot */

.flow-item-vision .flow-card::before {
    border: 2px solid #79C7D3;
}


/* =========================================
   CARD TYPOGRAPHY
========================================= */

.flow-card h3 {
    margin: 0;

    color: #F7F6F2;

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

    font-size: clamp(1.12rem, 1.7vw, 1.45rem);
    font-weight: 600;

    letter-spacing: -0.03em;
    line-height: 1.18;
}

.flow-card p {
    margin: 0;

    color: rgba(247, 246, 242, 0.64);

    font-size: 0.94rem;
    line-height: 1.58;
}


/* =========================================
   MISSION TO VISION CONNECTOR
========================================= */

.flow-transition {
    position: absolute;

    left: 61px;

    top: 140px;
    bottom: 140px;

    width: 1px;

    background: linear-gradient(
        to bottom,
        rgba(232, 93, 74, 0.5),
        rgba(247, 246, 242, 0.18),
        rgba(121, 199, 211, 0.5)
    );
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1023px) {

    .about-mission-vision {
        padding-block: 120px;
    }

    .about-mission-vision > .container {
        grid-template-columns: 1fr;

        gap: 72px;
    }

    .mission-vision-intro {
        position: static;

        max-width: 760px;
    }

    .mission-vision-title {
        max-width: 680px;
    }

    .mission-vision-description {
        max-width: 620px;
    }

    .mission-vision-flow {
        padding-top: 0;
    }

    .flow-group {
        grid-template-columns:
            130px
            minmax(0, 1fr);

        gap: 38px;
    }

    .flow-hub {
        width: 110px;
        height: 110px;
    }

    .flow-group::before {
        left: 110px;
        width: 42px;
    }

    .flow-transition {
        left: 54px;
    }

    .flow-card {
        grid-template-columns: 1fr;

        gap: 10px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .about-mission-vision {
        padding-block: 96px;
    }

    .about-mission-vision > .container {
        display: block;
    }

    .mission-vision-intro {
        margin-bottom: 64px;
    }

    .mission-vision-title {
        font-size: clamp(2.8rem, 12vw, 4.2rem);
    }

    .mission-vision-description {
        margin-top: 28px;

        font-size: 1rem;
    }

    .mission-vision-flow {
        gap: 56px;

        padding-top: 0;
    }

    .flow-group {
        display: block;
    }

    .flow-hub {
        width: 100px;
        height: 100px;

        margin-bottom: 32px;
    }

    .flow-group::before {
        display: none;
    }

    .flow-transition {
        display: none;
    }

    .flow-branches {
        gap: 14px;

        padding-left: 22px;
    }

    .flow-branches::before {
        left: 0;
        top: 24px;
        bottom: 24px;
    }

    .flow-item {
        grid-template-columns:
            46px
            minmax(0, 1fr);

        gap: 12px;
    }

    .flow-item::before {
        left: -22px;

        width: 22px;
    }

    .flow-number {
        width: 40px;
        height: 40px;

        font-size: 0.78rem;
    }

    .flow-card {
        display: block;

        min-height: 0;

        padding: 20px 18px;

        border-radius: 12px;
    }

    .flow-card h3 {
        font-size: 1.18rem;
    }

    .flow-card p {
        margin-top: 10px;

        font-size: 0.92rem;
    }

}