/* ==========================================================
   About / Why Healthy Knots Exists
========================================================== */

.hk-about-page{
    background:
        radial-gradient(circle at top left, rgba(22,101,52,.10), transparent 34%),
        linear-gradient(180deg, #f8faf9 0%, #ffffff 42%, #f8faf9 100%);
    color:#102018;
    overflow:hidden;
}

.hk-about-page section{
    max-width:1120px;
    margin:0 auto;
    padding:88px 20px;
}

.hk-about-hero{
    min-height:58vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
}

.hk-about-kicker,
.hk-about-label{
    display:inline-flex;
    width:max-content;
    margin:0 auto 20px;
    padding:8px 16px;
    border-radius:999px;
    background:#ecfdf5;
    color:#166534;
    font-weight:700;
    font-size:.9rem;
    letter-spacing:.04em;
}

.hk-about-hero h1{
    max-width:940px;
    margin:0 auto 24px;
    font-size:clamp(2.7rem,7vw,6.8rem);
    line-height:.95;
    letter-spacing:-.07em;
}

.hk-about-hero p{
    max-width:760px;
    margin:0 auto;
    font-size:clamp(1.1rem,2vw,1.35rem);
    line-height:1.8;
    color:#435247;
}

.hk-about-section{
    border-top:1px solid rgba(22,101,52,.12);
}

.hk-about-section h2,
.hk-about-final h2{
    max-width:820px;
    margin:0 auto 26px;
    text-align:center;
    font-size:clamp(2rem,4vw,4.4rem);
    line-height:1.05;
    letter-spacing:-.045em;
}

.hk-about-section p,
.hk-about-final p{
    max-width:760px;
    margin:0 auto 18px;
    font-size:1.12rem;
    line-height:1.9;
    color:#435247;
}

.hk-about-card-grid,
.hk-principle-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-top:44px;
}

.hk-about-card-grid article,
.hk-principle-grid article{
    min-height:150px;
    padding:28px;
    border-radius:28px;
    background:rgba(255,255,255,.78);
    border:1px solid rgba(22,101,52,.13);
    box-shadow:0 22px 60px rgba(15,23,42,.06);
    backdrop-filter:blur(12px);
}

.hk-about-card-grid article{
    display:flex;
    align-items:flex-end;
    font-size:1.35rem;
    font-weight:800;
    color:#12351f;
}

.hk-principle-grid article strong{
    display:block;
    font-size:1.28rem;
    line-height:1.3;
    margin-bottom:12px;
    color:#12351f;
}

.hk-principle-grid article p{
    margin:0;
    font-size:1rem;
    line-height:1.7;
}

.hk-about-not{
    max-width:980px !important;
}

.hk-about-not ul{
    max-width:760px;
    margin:36px auto 0;
    padding:0;
    list-style:none;
}

.hk-about-not li{
    position:relative;
    margin-bottom:14px;
    padding:18px 22px 18px 54px;
    border-radius:20px;
    background:#fff;
    border:1px solid rgba(22,101,52,.13);
    color:#374151;
    line-height:1.6;
}

.hk-about-not li::before{
    content:"";
    position:absolute;
    left:22px;
    top:24px;
    width:12px;
    height:12px;
    border-radius:50%;
    background:#166534;
}

.hk-about-timeline{
    max-width:820px;
    margin:46px auto 0;
    position:relative;
}

.hk-about-timeline::before{
    content:"";
    position:absolute;
    left:18px;
    top:10px;
    bottom:10px;
    width:2px;
    background:linear-gradient(#166534, rgba(22,101,52,.08));
}

.hk-about-timeline article{
    position:relative;
    padding:0 0 34px 62px;
}

.hk-about-timeline article::before{
    content:"";
    position:absolute;
    left:9px;
    top:5px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#fff;
    border:5px solid #166534;
}

.hk-about-timeline span{
    display:block;
    margin-bottom:8px;
    font-weight:800;
    color:#12351f;
    font-size:1.15rem;
}

.hk-about-timeline p{
    margin:0;
}

.hk-about-final{
    max-width:980px !important;
    margin:80px auto;
    border-radius:44px;
    background:
        radial-gradient(circle at top right, rgba(34,197,94,.18), transparent 34%),
        linear-gradient(135deg, #0f2f1d, #12351f);
    color:#fff;
    text-align:center;
    box-shadow:0 34px 90px rgba(15,47,29,.22);
}

.hk-about-final .hk-about-label{
    background:rgba(255,255,255,.14);
    color:#dcfce7;
}

.hk-about-final h2{
    color:#fff;
}

.hk-about-final p{
    color:#e5f7ea;
}

@media (max-width:900px){
    .hk-about-page section{
        padding:70px 18px;
    }

    .hk-about-card-grid,
    .hk-principle-grid{
        grid-template-columns:1fr 1fr;
    }

    .hk-about-hero{
         min-height:auto;
    }
}

@media (max-width:640px){
    .hk-about-page section{
        padding:58px 18px;
    }

    .hk-about-hero h1{
        font-size:clamp(2.6rem,15vw,4.2rem);
        letter-spacing:-.06em;
    }

    .hk-about-card-grid,
    .hk-principle-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .hk-about-card-grid article,
    .hk-principle-grid article{
        border-radius:24px;
        padding:24px;
    }

    .hk-about-final{
        margin:48px 18px;
        border-radius:34px;
    }
}
@media (max-width:640px){

    .hk-about-section h2,
    .hk-about-final h2{
        font-size:2rem;
        line-height:1.12;
        letter-spacing:-.035em;
    }

    .hk-about-section p,
    .hk-about-final p{
        font-size:1rem;
        line-height:1.75;
    }

    .hk-about-kicker,
    .hk-about-label{
        font-size:.78rem;
    }
}
/* World-class layer: Hero + Problem */

.hk-about-hero{
    position:relative;
    isolation:isolate;
}

.hk-about-hero::before{
    content:"";
    position:absolute;
    inset:42px 20px;
    max-width:1180px;
    margin:auto;
    border-radius:56px;
    background:
        radial-gradient(circle at 20% 20%, rgba(34,197,94,.18), transparent 32%),
        radial-gradient(circle at 80% 10%, rgba(20,184,166,.14), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.82), rgba(236,253,245,.62));
    border:1px solid rgba(22,101,52,.12);
    box-shadow:0 40px 120px rgba(15,23,42,.08);
    z-index:-1;
}

.hk-about-hero-inner{
    max-width:980px;
    margin:0 auto;
}

.hk-about-belief{
    max-width:820px;
    margin:42px auto 0;
    padding:26px 30px;
    border-radius:28px;
    background:#102018;
    color:#fff;
    text-align:left;
    box-shadow:0 24px 70px rgba(16,32,24,.22);
}

.hk-about-belief span{
    display:block;
    margin-bottom:10px;
    color:#bbf7d0;
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.hk-about-belief strong{
    display:block;
    font-size:clamp(1.15rem,2vw,1.55rem);
    line-height:1.55;
    letter-spacing:-.02em;
}

.hk-about-split{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:56px;
    align-items:start;
}

.hk-about-split .hk-about-label{
    margin-left:0;
    margin-right:0;
}

.hk-about-split h2{
    text-align:left;
    margin-left:0;
    margin-right:0;
}

.hk-about-copy-card{
    padding:38px;
    border-radius:34px;
    background:#fff;
    border:1px solid rgba(22,101,52,.12);
    box-shadow:0 24px 70px rgba(15,23,42,.07);
}

.hk-about-copy-card p{
    margin-left:0;
    margin-right:0;
}

@media (max-width:800px){
    .hk-about-hero::before{
        inset:22px 12px;
        border-radius:36px;
    }

    .hk-about-belief{
        padding:22px;
        border-radius:24px;
    }

    .hk-about-split{
        grid-template-columns:1fr;
        gap:26px;
    }

    .hk-about-copy-card{
        padding:26px;
        border-radius:26px;
    }
}
/* ==========================================================
   Healthy Knots Pathway — Metro
========================================================== */

.hk-about-pathway{
    max-width:1220px;
    margin:0 auto;
    padding:120px 20px;
    text-align:center;
    position:relative;
}

.hk-about-pathway::before{
    content:"";
    position:absolute;
    inset:74px 20px 70px;
    border-radius:60px;
    background:
        radial-gradient(circle at 18% 18%, rgba(34,197,94,.13), transparent 32%),
        radial-gradient(circle at 88% 12%, rgba(20,184,166,.12), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.72), rgba(236,253,245,.45));
    border:1px solid rgba(22,101,52,.10);
    box-shadow:0 34px 100px rgba(15,23,42,.05);
    z-index:-1;
}

.hk-about-pathway h2{
    max-width:820px;
    margin:18px auto 22px;
    font-size:clamp(2.4rem,5vw,5.2rem);
    line-height:1.02;
    letter-spacing:-.06em;
}

.hk-pathway-intro{
    max-width:760px;
    margin:0 auto 78px;
    font-size:1.14rem;
    line-height:1.9;
    color:#435247;
}

.hk-metro{
    position:relative;
    max-width:1060px;
    margin:0 auto;
}

.hk-metro-line{
    position:absolute;
    left:10%;
    right:10%;
    top:56px;
    height:4px;
    border-radius:999px;
    background:rgba(22,101,52,.14);
    overflow:hidden;
}

.hk-metro-fill{
    display:block;
    width:33.333%;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#166534,#22c55e);
    transition:width .38s ease;
}

.hk-metro[data-active="awareness"] .hk-metro-fill{width:0%;}
.hk-metro[data-active="literacy"] .hk-metro-fill{width:33.333%;}
.hk-metro[data-active="behaviour"] .hk-metro-fill{width:66.666%;}
.hk-metro[data-active="community"] .hk-metro-fill{width:100%;}

.hk-metro-stations{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-bottom:54px;
}

.hk-metro-station{
    appearance:none;
    border:0;
    background:transparent;
    padding:0;
    cursor:pointer;
    font:inherit;
    color:#102018;
    text-align:center;
}

.hk-metro-num{
    display:block;
    margin-bottom:18px;
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.18em;
    color:#16a34a;
    opacity:.75;
}

.hk-metro-dot{
    position:relative;
    z-index:2;
    display:block;
    width:28px;
    height:28px;
    margin:0 auto 18px;
    border-radius:999px;
    background:#fff;
    border:7px solid #bbf7d0;
    box-shadow:0 0 0 8px rgba(236,253,245,.95);
    transition:all .28s ease;
}

.hk-metro-station strong{
    display:block;
    margin-bottom:8px;
    font-size:1.2rem;
    letter-spacing:-.03em;
}

.hk-metro-station small{
    display:block;
    max-width:170px;
    margin:0 auto;
    color:#5b6b60;
    line-height:1.5;
}

.hk-metro-station.is-active .hk-metro-dot{
    background:#166534;
    border-color:#22c55e;
    box-shadow:
        0 0 0 8px rgba(34,197,94,.15),
        0 16px 34px rgba(22,101,52,.22);
    transform:scale(1.12);
}

.hk-metro-station.is-active strong{
    color:#166534;
}

.hk-metro-station:hover .hk-metro-dot,
.hk-metro-station:focus-visible .hk-metro-dot{
    transform:scale(1.12);
}

.hk-metro-station:focus-visible{
    outline:3px solid rgba(22,101,52,.24);
    outline-offset:8px;
    border-radius:18px;
}

.hk-metro-panel{
    max-width:850px;
    margin:0 auto;
    padding:44px;
    border-radius:38px;
    background:#102018;
    color:#fff;
    text-align:left;
    box-shadow:0 34px 90px rgba(16,32,24,.22);
    transition:opacity .22s ease, transform .22s ease;
}

.hk-metro-panel.is-changing{
    opacity:.15;
    transform:translateY(8px);
}

.hk-metro-panel-kicker{
    display:block;
    margin-bottom:14px;
    color:#bbf7d0;
    font-size:.78rem;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.hk-metro-panel h3{
    margin:0 0 18px;
    font-size:clamp(1.8rem,3vw,3rem);
    line-height:1.08;
    letter-spacing:-.045em;
}

.hk-metro-panel p{
    max-width:720px;
    margin:0;
    color:#e5f7ea;
    font-size:1.08rem;
    line-height:1.85;
}

.hk-metro-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:28px;
}

.hk-metro-tags span{
    padding:8px 13px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.14);
    color:#dcfce7;
    font-size:.9rem;
    font-weight:700;
}

.hk-metro-tags:empty{
    display:none;
}

@media(max-width:760px){

    .hk-about-pathway{
        padding:88px 18px;
    }

    .hk-about-pathway::before{
        inset:42px 12px 42px;
        border-radius:38px;
    }

    .hk-pathway-intro{
        margin-bottom:46px;
    }

    .hk-metro-line{
        left:30px;
        right:auto;
        top:18px;
        bottom:calc(100% - 306px);
        width:4px;
        height:288px;
    }

    .hk-metro-fill{
        width:100%;
        height:33.333%;
        transition:height .38s ease;
    }

    .hk-metro[data-active="awareness"] .hk-metro-fill{height:0%;}
    .hk-metro[data-active="literacy"] .hk-metro-fill{height:33.333%;}
    .hk-metro[data-active="behaviour"] .hk-metro-fill{height:66.666%;}
    .hk-metro[data-active="community"] .hk-metro-fill{height:100%;}

    .hk-metro-stations{
        grid-template-columns:1fr;
        gap:22px;
        margin-bottom:38px;
    }

    .hk-metro-station{
        display:grid;
        grid-template-columns:60px 1fr;
        grid-template-areas:
            "dot num"
            "dot title"
            "dot copy";
        text-align:left;
        align-items:center;
        column-gap:18px;
    }

    .hk-metro-num{
        grid-area:num;
        margin:0 0 4px;
    }

    .hk-metro-dot{
        grid-area:dot;
        margin:0 auto;
    }

    .hk-metro-station strong{
        grid-area:title;
        margin:0 0 4px;
    }

    .hk-metro-station small{
        grid-area:copy;
        margin:0;
        max-width:none;
    }

    .hk-metro-panel{
        padding:30px;
        border-radius:30px;
    }
}

@media (prefers-reduced-motion: reduce){
    .hk-metro-fill,
    .hk-metro-dot,
    .hk-metro-panel{
        transition:none !important;
    }
}

/* Pathway final readability polish */

.hk-metro-panel h3{
    color:#ffffff;
}

.hk-metro-panel p{
    color:#e5f7ea;
}

.hk-about-pathway h2{
    max-width:980px;
}

.hk-metro-tags span{
    color:#ffffff;
}

@media(max-width:760px){

    .hk-about-pathway{
        padding-bottom:130px;
    }

    .hk-metro{
        padding-top:20px;
    }

    .hk-metro-panel{
        margin-bottom:90px;
    }

    .hk-about-pathway h2{
        font-size:2.45rem;
        line-height:1.05;
        letter-spacing:-.045em;
    }
}

/* ==========================================================
   About Typography Rhythm Fix
========================================================== */

/* Hero can stay cinematic */
.hk-about-hero h1{
    font-size:clamp(2.6rem,6.2vw,6.2rem);
}

/* Normal section titles should be strong, not gigantic */
.hk-about-section h2,
.hk-about-final h2{
    font-size:clamp(2rem,3.6vw,3.8rem);
    line-height:1.08;
    letter-spacing:-.04em;
}

/* Pathway title: important, but currently too aggressive */
.hk-about-pathway h2{
    font-size:clamp(2rem,4vw,4.2rem);
    line-height:1.08;
    letter-spacing:-.045em;
}

/* Body copy calmer */
.hk-about-section p,
.hk-about-final p,
.hk-pathway-intro{
    line-height:1.85;
}

/* Mobile rhythm */
@media(max-width:640px){

    .hk-about-hero h1{
        font-size:3.15rem;
        line-height:1.02;
        letter-spacing:-.055em;
    }

    .hk-about-section h2,
    .hk-about-final h2{
        font-size:2.05rem;
        line-height:1.12;
        letter-spacing:-.035em;
    }

    .hk-about-pathway h2{
        font-size:2.25rem;
        line-height:1.08;
        letter-spacing:-.04em;
    }

    .hk-about-page section{
        padding-top:64px;
        padding-bottom:64px;
    }
}
/* ==========================================================
   Healthy Knots About Design System
========================================================== */

.hk-about-page{
    --hk-green:#166534;
    --hk-green-soft:#ecfdf5;
    --hk-ink:#102018;
    --hk-muted:#435247;
    --hk-card:#ffffff;

    --hk-radius-sm:20px;
    --hk-radius-md:32px;
    --hk-radius-lg:48px;

    --hk-section-desktop:108px;
    --hk-section-mobile:68px;
}

/* Section rhythm */
.hk-about-page section{
    padding-top:var(--hk-section-desktop);
    padding-bottom:var(--hk-section-desktop);
}

/* Labels */
.hk-about-kicker,
.hk-about-label{
    padding:9px 17px;
    font-size:.8rem;
    font-weight:850;
    letter-spacing:.075em;
    text-transform:uppercase;
}

/* Hero title */
.hk-about-hero h1{
    font-size:clamp(2.8rem,6vw,6.1rem);
    line-height:.98;
    letter-spacing:-.065em;
}

/* Chapter titles */
.hk-about-section h2,
.hk-about-final h2{
    font-size:clamp(2.05rem,3.7vw,3.9rem);
    line-height:1.08;
    letter-spacing:-.042em;
}

/* Signature component title */
.hk-about-pathway h2{
    font-size:clamp(2.05rem,4vw,4.2rem);
    line-height:1.08;
    letter-spacing:-.045em;
}

/* Body copy */
.hk-about-section p,
.hk-about-final p,
.hk-about-hero p,
.hk-pathway-intro,
.hk-metro-panel p{
    line-height:1.85;
}

/* Cards / panels consistency */
.hk-about-belief,
.hk-about-copy-card,
.hk-metro-panel,
.hk-about-card-grid article,
.hk-principle-grid article{
    border-radius:var(--hk-radius-md);
}

.hk-about-final{
    border-radius:var(--hk-radius-lg);
}

/* Mobile system */
@media(max-width:640px){

    .hk-about-page section{
        padding-top:var(--hk-section-mobile);
        padding-bottom:var(--hk-section-mobile);
    }

    .hk-about-hero h1{
        font-size:3.05rem;
        line-height:1.03;
        letter-spacing:-.055em;
    }

    .hk-about-section h2,
    .hk-about-final h2{
        font-size:2.05rem;
        line-height:1.13;
        letter-spacing:-.035em;
    }

    .hk-about-pathway h2{
        font-size:2.15rem;
        line-height:1.1;
        letter-spacing:-.038em;
    }

    .hk-about-hero p,
    .hk-about-section p,
    .hk-about-final p,
    .hk-pathway-intro,
    .hk-metro-panel p{
        font-size:1rem;
        line-height:1.75;
    }

    .hk-about-label,
    .hk-about-kicker{
        font-size:.72rem;
        padding:8px 14px;
    }

    .hk-about-belief,
    .hk-about-copy-card,
    .hk-metro-panel,
    .hk-about-card-grid article,
    .hk-principle-grid article{
        border-radius:24px;
    }

    .hk-about-final{
        border-radius:32px;
    }
}
/* ==========================================================
   Our Approach
========================================================== */

.hk-about-approach{
    text-align:center;
}

.hk-about-approach h2{
    max-width:920px;
}

.hk-approach-statement{
    max-width:860px;
    margin:42px auto 0;
    padding:42px;
    border-radius:var(--hk-radius-md);
    background:
        linear-gradient(180deg, rgba(255,255,255,.9), rgba(236,253,245,.58));
    border:1px solid rgba(22,101,52,.12);
    box-shadow:0 28px 80px rgba(15,23,42,.06);
}

.hk-approach-statement p{
    max-width:760px;
    margin:0 auto 18px;
    font-size:1.18rem;
    line-height:1.9;
    color:var(--hk-muted);
}

.hk-approach-statement p:first-child{
    font-size:1.45rem;
    line-height:1.65;
    letter-spacing:-.025em;
    color:var(--hk-ink);
    font-weight:750;
}

.hk-approach-statement p:last-child{
    margin-bottom:0;
}

@media(max-width:640px){
    .hk-approach-statement{
        margin-top:30px;
        padding:26px;
        border-radius:24px;
    }

    .hk-approach-statement p:first-child{
        font-size:1.16rem;
        line-height:1.65;
    }

    .hk-approach-statement p{
        font-size:1rem;
        line-height:1.75;
    }
}

/* ==========================================================
   Problem Section — Editorial Weight
========================================================== */

.hk-about-problem-v2{
    position:relative;
    max-width:1180px !important;
    padding-top:120px;
    padding-bottom:120px;
}

.hk-about-problem-v2::before{
    content:"";
    position:absolute;
    inset:40px 20px;
    border-radius:var(--hk-radius-lg);
    background:
        radial-gradient(circle at 10% 20%, rgba(22,101,52,.10), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.65), rgba(236,253,245,.35));
    border:1px solid rgba(22,101,52,.08);
    z-index:-1;
}

.hk-problem-editorial{
    max-width:980px;
    margin:0 auto;
}

.hk-about-problem-v2 .hk-about-label{
    margin-left:0;
    margin-right:0;
}

.hk-about-problem-v2 h2{
    max-width:860px;
    margin:0 0 46px;
    text-align:left;
    font-size:clamp(2.6rem,5.5vw,6rem);
    line-height:.98;
    letter-spacing:-.065em;
}

.hk-problem-copy{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:28px;
    margin-top:20px;
}

.hk-problem-copy p{
    margin:0;
    padding-top:22px;
    border-top:2px solid rgba(22,101,52,.18);
    font-size:1.08rem;
    line-height:1.85;
    color:var(--hk-muted);
}

.hk-problem-copy p:first-child{
    font-size:1.28rem;
    color:var(--hk-ink);
    font-weight:750;
    letter-spacing:-.02em;
}

.hk-problem-truth{
    max-width:860px;
    margin:64px 0 0;
    padding:34px 38px;
    border-radius:var(--hk-radius-md);
    background:#102018;
    color:#fff;
    font-size:clamp(1.45rem,2.6vw,2.4rem);
    line-height:1.28;
    letter-spacing:-.035em;
    font-weight:850;
    box-shadow:0 32px 90px rgba(16,32,24,.20);
}

@media(max-width:800px){

    .hk-about-problem-v2{
        padding-top:78px;
        padding-bottom:78px;
    }

    .hk-about-problem-v2::before{
        inset:24px 12px;
        border-radius:34px;
    }

    .hk-about-problem-v2 h2{
        font-size:2.75rem;
        line-height:1.02;
        margin-bottom:34px;
    }

    .hk-problem-copy{
        grid-template-columns:1fr;
        gap:22px;
    }

    .hk-problem-copy p{
        padding-top:18px;
        font-size:1rem;
        line-height:1.75;
    }

    .hk-problem-copy p:first-child{
        font-size:1.18rem;
    }

    .hk-problem-truth{
        margin-top:42px;
        padding:26px;
        border-radius:26px;
        font-size:1.45rem;
        line-height:1.35;
    }
}
/* Problem section final polish */

.hk-problem-copy p{
    min-height:150px;
}

.hk-problem-truth{
    position:relative;
    overflow:hidden;
}

.hk-problem-truth::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top right, rgba(34,197,94,.18), transparent 35%);
    pointer-events:none;
}

@media(max-width:800px){

    .hk-problem-copy p{
        min-height:auto;
    }

    .hk-problem-truth{
        margin-bottom:28px;
    }
}
/*==========================================================
WHAT WE BUILD Ecosystem 2.0
==========================================================*/

.hk-build-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;

}

.hk-build-card{

    --accent:#16a34a;

    position:relative;
    overflow:hidden;

    display:flex;
    flex-direction:column;

    min-height:290px;

    padding:34px;

    text-decoration:none;

    color:inherit;

    border-radius:30px;

    background:linear-gradient(180deg,#ffffff,#fbfffd);

    border:1.5px solid color-mix(in srgb,var(--accent) 28%,#d8e6dd);

    box-shadow:0 18px 45px rgba(16,24,40,.05);

    transition:.35s;

}

.hk-build-card:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 80px rgba(16,24,40,.10);

    border-color:var(--accent);


}

.hk-build-type{

    display:inline-flex;

    width:max-content;

    padding:7px 13px;

    border-radius:999px;

    background:color-mix(in srgb,var(--accent) 12%,white);

    color:var(--accent);

    font-size:.72rem;

    font-weight:800;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.hk-build-icon{

    position:absolute;

    top:26px;

    right:26px;

    width:62px;

    height:62px;

    border-radius:50%;

    background:color-mix(in srgb,var(--accent) 12%,white);

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--accent);

    font-size:28px;

    transition:.35s;

}

.hk-build-card:hover .hk-build-icon{

    transform:scale(1.12) rotate(12deg);

}

.hk-build-card h3{

    margin-top:70px;

    margin-bottom:14px;

    font-size:1.55rem;

    line-height:1.2;

}

.hk-build-card p{

    margin:0;

    color:var(--hk-muted);

    line-height:1.75;

}

.hk-build-arrow{

    margin-top:auto;

    margin-left:auto;

    width:46px;

    height:46px;

    border-radius:50%;

    background:var(--accent);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    transition:.3s;

}

.hk-build-card:hover .hk-build-arrow{

    transform:translateX(4px);

}

/* Decorative Shape */



/* Decorative Shape Base */

.hk-build-card::before,
.hk-build-card::after{
    content:"";
    position:absolute;
    pointer-events:none;
    transition:.45s ease;
}

/* Learn: soft hill */

.hk-card-learn::before{
    left:-12%;
    bottom:-32px;
    width:140%;
    height:115px;
    border-radius:50% 50% 0 0;
    background:var(--accent);
    opacity:.08;
}

.hk-card-learn::after{
    left:28px;
    bottom:34px;
    width:54px;
    height:86px;
    border-left:6px solid var(--accent);
    border-radius:50%;
    opacity:.10;
}

/* Access: speech bubbles */

.hk-card-access::before{
    left:28px;
    bottom:38px;
    width:76px;
    height:48px;
    border-radius:18px;
    background:var(--accent);
    opacity:.08;
}

.hk-card-access::after{
    left:82px;
    bottom:78px;
    width:52px;
    height:36px;
    border-radius:16px;
    background:var(--accent);
    opacity:.06;
}

/* Reflect: river lines */

.hk-card-reflect::before{
    left:-20%;
    bottom:34px;
    width:150%;
    height:70px;
    border-radius:50%;
    border-top:8px solid var(--accent);
    opacity:.09;
}

.hk-card-reflect::after{
    left:-25%;
    bottom:12px;
    width:150%;
    height:70px;
    border-radius:50%;
    border-top:8px solid var(--accent);
    opacity:.06;
}

/* Share: emotional wave */

.hk-card-share::before{
    left:-12%;
    bottom:-30px;
    width:145%;
    height:110px;
    border-radius:50% 50% 0 0;
    background:var(--accent);
    opacity:.08;
}

.hk-card-share::after{
    left:34px;
    bottom:80px;
    width:82px;
    height:82px;
    border-radius:50%;
    background:var(--accent);
    opacity:.06;
}

/* Commit: ripple */

.hk-card-commit::before{
    right:-46px;
    bottom:-46px;
    width:170px;
    height:170px;
    border:5px solid var(--accent);
    border-radius:50%;
    opacity:.09;
}

.hk-card-commit::after{
    right:10px;
    bottom:10px;
    width:82px;
    height:82px;
    border:4px solid var(--accent);
    border-radius:50%;
    opacity:.07;
}

/* Connect: human connection */

.hk-card-connect::before{
    right:22px;
    bottom:48px;
    width:68px;
    height:68px;
    border-radius:50%;
    background:var(--accent);
    opacity:.09;
}

.hk-card-connect::after{
    right:76px;
    bottom:34px;
    width:58px;
    height:58px;
    border-radius:50%;
    background:var(--accent);
    opacity:.07;
}

/* Shape hover */

.hk-build-card:hover::before,
.hk-build-card:hover::after{
    transform:translateY(-8px) scale(1.04);
    opacity:.13;
}

/* Accent Colors */

.hk-card-learn{

    --accent:#16a34a;

}

.hk-card-access{

    --accent:#8b5cf6;

}

.hk-card-reflect{

    --accent:#2563eb;

}

.hk-card-share{

    --accent:#f97316;

}

.hk-card-commit{

    --accent:#d97706;

}

.hk-card-connect{

    --accent:#ec4899;

}

@media(max-width:900px){

.hk-build-grid{

grid-template-columns:1fr;

}

.hk-build-card{

min-height:auto;

padding:28px;

}

}

/* ==========================================================
   How We Work — Principles Manifesto
========================================================== */

.hk-about-principles{
    max-width:1120px !important;
    position:relative;
    text-align:center;
}

.hk-principles-intro{
    max-width:760px;
    margin:0 auto 72px;
    color:var(--hk-muted);
    line-height:1.85;
}

.hk-principles-list{
    max-width:980px;
    margin:0 auto;
    position:relative;
}

.hk-principles-list::before{
    content:"";
    position:absolute;
    left:50%;
    top:10px;
    bottom:10px;
    width:1px;
    background:linear-gradient(
        180deg,
        transparent,
        rgba(22,101,52,.18),
        transparent
    );
}

.hk-principle{
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:center;
    padding:54px 0;
    text-align:left;
}

.hk-principle:nth-child(even) .hk-principle-number{
    grid-column:2;
    text-align:left;
}

.hk-principle:nth-child(even) .hk-principle-content{
    grid-column:1;
    grid-row:1;
    text-align:right;
}

.hk-principle-number{
    color:rgba(22,101,52,.10);
    font-size:clamp(4rem,10vw,8rem);
    line-height:1;
    font-weight:900;
    letter-spacing:-.08em;
    position:relative;
    z-index:0;
}

.hk-principle-content{
    position:relative;
    padding:28px 0;
    z-index:2;
}

.hk-principle-content::before{
    content:"";
    position:absolute;
    top:50%;
    width:72px;
    height:2px;
    background:rgba(22,101,52,.24);
}

.hk-principle:nth-child(odd) .hk-principle-content::before{
    left:-82px;
}

.hk-principle:nth-child(even) .hk-principle-content::before{
    right:-82px;
}

.hk-principle h3{
    margin:0 0 12px;
    font-size:clamp(1.8rem,3vw,3.2rem);
    line-height:1.05;
    letter-spacing:-.055em;
    color:var(--hk-ink);
}

.hk-principle p{
    margin:0;
    max-width:420px;
    color:var(--hk-muted);
    font-size:1.05rem;
    line-height:1.75;
}

.hk-principle:nth-child(even) p{
    margin-left:auto;
}

.hk-principle:hover .hk-principle-number{
    color:rgba(22,101,52,.18);
}

.hk-principle:hover h3{
    color:var(--hk-green);
}

.hk-principle h3{

    transition:.4s;

}

.hk-principle:hover h3{

    transform:translateX(6px);

}

@media(max-width:760px){

    .hk-principles-intro{
        margin-bottom:38px;
    }

    .hk-principles-list::before{
        left:22px;
    }

    .hk-principle{
        grid-template-columns:1fr;
        gap:10px;
        padding:38px 0 38px 54px;
    }

    .hk-principle:nth-child(even) .hk-principle-number,
    .hk-principle:nth-child(even) .hk-principle-content{
        grid-column:auto;
        grid-row:auto;
        text-align:left;
    }

    .hk-principle-number{
        font-size:3.4rem;
        letter-spacing:-.06em;
    }

    .hk-principle h3{
        font-size:2rem;
        line-height:1.08;
    }

    .hk-principle p,
    .hk-principle:nth-child(even) p{
        max-width:none;
        margin:0;
    }

    .hk-principle-content::before{
        display:none;
    }
}
/* Principles final polish */

.hk-principle{
    padding:58px 0;
}

.hk-principles-list::before{
    background:repeating-linear-gradient(
        180deg,
        rgba(22,101,52,.20) 0,
        rgba(22,101,52,.20) 10px,
        transparent 10px,
        transparent 20px
    );
}

.hk-principle-number{
    transition:.45s cubic-bezier(.2,.8,.2,1);
}

.hk-principle-content::before{
    transition:.45s cubic-bezier(.2,.8,.2,1);
}

.hk-principle:hover .hk-principle-content::before{
    width:82px;
    background:var(--hk-green);
}

@media(max-width:760px){
    .hk-principle{
        padding:38px 0 38px 54px;
    }
}

/* ==========================================================
   Boundaries — Expectation to Reality
========================================================== */

.hk-about-boundaries{
    max-width:1100px !important;
    text-align:center;
}

.hk-boundaries-intro{
    max-width:720px;
    margin:0 auto 58px;
    color:var(--hk-muted);
    line-height:1.85;
}

.hk-boundary-list{
    max-width:980px;
    margin:0 auto;
    display:grid;
    gap:18px;
}

.hk-boundary-item{
    display:grid;
    grid-template-columns:1fr 76px 1.35fr;
    align-items:stretch;
    min-height:150px;
    border-radius:30px;
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(22,101,52,.12);
    box-shadow:0 20px 60px rgba(15,23,42,.055);
    transition:.35s ease;
}

.hk-boundary-item:hover{
    transform:translateY(-4px);
    box-shadow:0 30px 80px rgba(15,23,42,.085);
}

.hk-boundary-expect,
.hk-boundary-reality{
    padding:30px;
    text-align:left;
}

.hk-boundary-expect{
    background:
        radial-gradient(circle at 15% 20%, rgba(148,163,184,.12), transparent 34%),
        linear-gradient(180deg,#fff,#fafafa);
}

.hk-boundary-reality{
    background:
        radial-gradient(circle at 90% 20%, rgba(34,197,94,.12), transparent 30%),
        linear-gradient(180deg,#ffffff,#f7fffb);
}

.hk-boundary-expect span,
.hk-boundary-reality span{
    display:block;
    margin-bottom:12px;
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.hk-boundary-expect span{
    color:#64748b;
}

.hk-boundary-reality span{
    color:var(--hk-green);
}

.hk-boundary-expect strong,
.hk-boundary-reality strong{
    display:block;
    margin:0;
    font-size:clamp(1.35rem,2.2vw,2rem);
    line-height:1.15;
    letter-spacing:-.04em;
    color:var(--hk-ink);
}

.hk-boundary-reality p{
    margin:12px 0 0;
    max-width:520px;
    color:var(--hk-muted);
    line-height:1.7;
}

.hk-boundary-arrow{
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(180deg, rgba(236,253,245,.65), rgba(255,255,255,.9));
    color:var(--hk-green);
    font-size:2rem;
    font-weight:900;
    border-left:1px solid rgba(22,101,52,.10);
    border-right:1px solid rgba(22,101,52,.10);
}

.hk-boundary-item:hover .hk-boundary-arrow{
    background:var(--hk-green);
    color:#fff;
}

@media(max-width:760px){

    .hk-boundaries-intro{
        margin-bottom:36px;
    }

    .hk-boundary-list{
        gap:22px;
    }

    .hk-boundary-item{
        grid-template-columns:1fr;
        min-height:auto;
        border-radius:26px;
    }

    .hk-boundary-arrow{
        min-height:54px;
        transform:rotate(90deg);
        border-left:0;
        border-right:0;
        border-top:1px solid rgba(22,101,52,.10);
        border-bottom:1px solid rgba(22,101,52,.10);
    }

    .hk-boundary-expect,
    .hk-boundary-reality{
        padding:26px;
    }
}
/* Boundaries mobile fix */

@media(max-width:760px){

    .hk-boundary-item{
        display:block;
        overflow:hidden;
    }

    .hk-boundary-arrow{
        transform:none;
        min-height:46px;
        width:100%;
        font-size:1.6rem;
    }

    .hk-boundary-expect,
    .hk-boundary-reality{
        width:100%;
    }

    .hk-boundary-expect strong,
    .hk-boundary-reality strong{
        font-size:1.45rem;
        line-height:1.15;
    }
}

/* ==========================================================
   Growing With Purpose
========================================================== */

.hk-about-growing{
    max-width:1120px !important;
    text-align:center;
    position:relative;
}

.hk-growing-intro{
    max-width:760px;
    margin:0 auto 72px;
    color:var(--hk-muted);
    line-height:1.85;
}

.hk-growing-list{
    max-width:920px;
    margin:0 auto;
    position:relative;
}

.hk-growing-list::before{
    content:"";
    position:absolute;
    left:28px;
    top:16px;
    bottom:16px;
    width:2px;
    background:linear-gradient(
        180deg,
        rgba(22,101,52,.10),
        rgba(22,101,52,.35),
        rgba(22,101,52,.10)
    );
}

.hk-growing-item{
    position:relative;
    display:grid;
    grid-template-columns:56px 1fr;
    gap:26px;
    padding:34px 0;
    text-align:left;
}

.hk-growing-dot{
    position:relative;
    z-index:2;
    width:18px;
    height:18px;
    margin:12px auto 0;
    border-radius:50%;
    background:#fff;
    border:5px solid var(--hk-green);
    box-shadow:0 0 0 8px #ecfdf5;
}

.hk-growing-content{
    padding:32px 36px;
    border-radius:32px;
    background:
        radial-gradient(circle at 95% 10%, rgba(34,197,94,.10), transparent 28%),
        linear-gradient(180deg,#fff,#fbfffd);
    border:1px solid rgba(22,101,52,.12);
    box-shadow:0 22px 70px rgba(15,23,42,.055);
    transition:.35s ease;
}

.hk-growing-item:not(:last-child):hover .hk-growing-content{
    transform:translateX(8px);
    border-color:rgba(22,101,52,.24);
    box-shadow:0 30px 90px rgba(15,23,42,.08);
}

.hk-growing-year{
    display:inline-flex;
    margin-bottom:14px;
    padding:7px 12px;
    border-radius:999px;
    background:#ecfdf5;
    color:var(--hk-green);
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.hk-growing-content h3{
    margin:0 0 12px;
    font-size:clamp(1.6rem,2.8vw,2.6rem);
    line-height:1.08;
    letter-spacing:-.045em;
    color:var(--hk-ink);
}

.hk-growing-content p{
    margin:0;
    max-width:720px;
    color:var(--hk-muted);
    line-height:1.78;
}

.hk-growing-item:last-child .hk-growing-content{
    padding:42px;
transform:scale(1.02);
    background:
        radial-gradient(circle at 92% 12%, rgba(34,197,94,.18), transparent 32%),
        linear-gradient(135deg,#102018,#12351f);
    color:#fff;
}

.hk-growing-item:last-child .hk-growing-content h3,
.hk-growing-item:last-child .hk-growing-content p{
    color:#fff;
}

.hk-growing-item:last-child .hk-growing-year{
    background:rgba(255,255,255,.14);
    color:#dcfce7;
}

@media(max-width:760px){

    .hk-growing-intro{
        margin-bottom:42px;
    }

    .hk-growing-list::before{
        left:19px;
    }

    .hk-growing-item{
        grid-template-columns:38px 1fr;
        gap:18px;
        padding:24px 0;
    }

    .hk-growing-dot{
        width:15px;
        height:15px;
        border-width:4px;
        box-shadow:0 0 0 6px #ecfdf5;
    }

    .hk-growing-content{
        padding:24px;
        border-radius:26px;
    }

    .hk-growing-item:hover .hk-growing-content{
        transform:none;
    }

    .hk-growing-content h3{
        font-size:1.75rem;
        line-height:1.1;
    }
}
/* ==========================================================
   Founder Closing
========================================================== */

.hk-about-founder-close{
    max-width:1120px !important;
    border-top:0;
}

.hk-founder-close-card{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:0;
    overflow:hidden;
    border-radius:44px;
    background:#102018;
    box-shadow:0 34px 100px rgba(15,47,29,.22);
}

.hk-founder-close-media{
    min-height:520px;
    background:
        radial-gradient(circle at 20% 20%, rgba(34,197,94,.18), transparent 35%),
        linear-gradient(135deg,#0f2f1d,#12351f);
}

.hk-founder-close-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    opacity:.92;
}

.hk-founder-close-copy{
    position:relative;
    padding:58px;
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.hk-founder-close-copy::before{
    content:"";
    position:absolute;
    right:-70px;
    bottom:-70px;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(34,197,94,.12);
}

.hk-founder-close-copy .hk-about-label{
    margin:0 0 24px;
    background:rgba(255,255,255,.12);
    color:#dcfce7;
}

.hk-founder-close-copy h2{
    margin:0 0 26px;
    text-align:left;
    color:#fff;
    font-size:clamp(2.2rem,4vw,4.4rem);
    line-height:1.02;
    letter-spacing:-.055em;
}

.hk-founder-close-copy p{
    margin:0 0 22px;
    color:#e5f7ea;
    line-height:1.85;
}

.hk-founder-signature{
    margin-top:12px !important;
    font-size:1.25rem;
    font-weight:800;
    color:#fff !important;
}

.hk-founder-signature span{
    font-size:.95rem;
    font-weight:600;
    color:#bbf7d0;
}

.hk-founder-link{
    width:max-content;
    margin-top:18px;
    padding:13px 18px;
    border-radius:999px;
    background:#ecfdf5;
    color:#166534;
    font-weight:850;
    text-decoration:none;
    transition:.3s ease;
}

.hk-founder-link:hover{
    transform:translateY(-2px);
    background:#fff;
}

@media(max-width:760px){

    .hk-founder-close-card{
        grid-template-columns:1fr;
        border-radius:32px;
    }

    .hk-founder-close-media{
        min-height:330px;
    }

    .hk-founder-close-copy{
        padding:32px 26px;
    }

    .hk-founder-close-copy h2{
        font-size:2.35rem;
        line-height:1.05;
    }
}
@media(max-width:760px){

    .hk-founder-close-media{
        min-height:260px;
        max-height:280px;
    }

    .hk-founder-close-media img{
        object-position:center 30%;
    }

    .hk-founder-close-copy h2{
        font-size:2rem;
    }

    .hk-founder-close-copy{
        padding:28px 24px 34px;
    }
}

/* ==========================================================
   About FAQ
========================================================== */

.hk-about-faq{
    max-width:980px !important;
    text-align:center;
}

.hk-faq-list{
    max-width:820px;
    margin:48px auto 0;
    display:grid;
    gap:14px;
    text-align:left;
}

.hk-faq-list details{
    border-radius:24px;
    background:#fff;
    border:1px solid rgba(22,101,52,.12);
    box-shadow:0 18px 50px rgba(15,23,42,.045);
    overflow:hidden;
}

.hk-faq-list summary{
    cursor:pointer;
    padding:22px 26px;
    font-size:1.08rem;
    font-weight:850;
    color:var(--hk-ink);
    list-style:none;
}

.hk-faq-list summary::-webkit-details-marker{
    display:none;
}

.hk-faq-list summary::after{
    content:"+";
    float:right;
    color:var(--hk-green);
    font-size:1.4rem;
    line-height:1;
}

.hk-faq-list details[open] summary::after{
    content:"–";
}

.hk-faq-list p{
    margin:0;
    padding:0 26px 24px;
    color:var(--hk-muted);
    line-height:1.75;
}

@media(max-width:640px){
    .hk-faq-list{
        margin-top:34px;
    }

    .hk-faq-list summary{
        padding:20px 22px;
        font-size:1rem;
    }

    .hk-faq-list p{
        padding:0 22px 22px;
    }
}