/* ==========================================================
   ABOUT SECTION
========================================================== */

.about{

    padding-block:var(--gap);

}

.about-grid{

    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:clamp(40px,5vw,80px);
    align-items:start;

}

@media (max-width:900px){

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

}

/* ==========================================================
   PILLARS
========================================================== */

.pillars{

    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:8px;

}

.pillar{

    padding:22px 24px;
    border:1px solid var(--line);
    border-radius:var(--r);
    background:linear-gradient(
        180deg,
        var(--carbon),
        transparent
    );

    transition:
        border-color .3s,
        transform .3s;
}

.pillar:hover{

    border-color:var(--azure);
    transform:translateX(6px);

}

.pillar h4{

    margin-bottom:6px;
    font-family:var(--display);
    font-size:19px;
    font-weight:700;

}

.pillar p{

    color:var(--muted);
    font-size:14.5px;

}

.pillar .k{

    color:var(--azure);
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.2em;

}



/* ==========================================================
   ABOUT IMAGE
========================================================== */

.about-photo{

    aspect-ratio:5/3;
    margin-bottom:36px;
    border:1px solid var(--line);
    border-radius:calc(var(--r) + 4px);

    background:
        linear-gradient(
            120deg,
            rgba(30,134,214,.1),
            transparent
        ),
        linear-gradient(
            rgba(5,5,7,.18),
            rgba(5,5,7,.5)
        ),
        var(--img-about)
        center/cover;

    box-shadow:
        0 30px 60px -30px
        rgba(0,0,0,.8);

}



/* ==========================================================
   TIMELINE
========================================================== */

.timeline{

    position:relative;
    padding-left:30px;

}

.timeline::before{

    content:"";
    position:absolute;

    left:5px;
    top:6px;
    bottom:6px;
    width:1px;

    background:linear-gradient(
        var(--azure),
        transparent
    );

}

.tl-item{

    position:relative;
    padding:0 0 30px;

}

.tl-item::before{

    content:"";
    position:absolute;

    left:-29px;
    top:5px;

    width:11px;
    height:11px;

    border-radius:50%;
    background:var(--void);

    border:2px solid var(--azure);
    box-shadow:
        0 0 0 4px
        rgba(30,134,214,.12);

}

.tl-item .yr{

    color:var(--azure);
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.16em;

}

.tl-item h4{

    margin:4px 0;
    font-family:var(--display);
    font-size:18px;
    font-weight:700;

}

.tl-item p{

    color:var(--muted);
    font-size:14px;

}

/* ==========================================================
   SERVICES
========================================================== */

.services{

    padding-block:var(--gap);

}

.svc-grid{

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

}

@media (max-width:980px){

    .svc-grid{

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

    }

}

@media (max-width:560px){

    .svc-grid{

        grid-template-columns:1fr;

    }

}



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

.svc{

    position:relative;
    overflow:hidden;
    padding:30px 26px 34px;
    border:1px solid var(--line);
    border-radius:var(--r);
    background:var(--carbon);
    transition:
        transform .45s var(--ease),
        border-color .4s;

}

.svc::before{

    content:"";
    position:absolute;
    inset:0;
    opacity:0;
    background:radial-gradient(
        120% 80% at 50% 0%,
        rgba(30,134,214,.16),
        transparent 60%
    );

    transition:opacity .45s;

}

.svc:hover{

    transform:translateY(-6px);
    border-color:var(--azure);

}

.svc:hover::before{

    opacity:1;

}

.svc .ic{

    display:grid;
    place-items:center;

    width:48px;
    height:48px;

    margin-bottom:20px;
    border-radius:12px;
    background:rgba(30,134,214,.12);
    color:var(--electric);

}

.svc .ic svg{

    width:24px;
    height:24px;

}

.svc .no{

    position:absolute;
    top:24px;
    right:26px;
    color:var(--faint);
    font-family:var(--mono);
    font-size:12px;

}

.svc h3{

    margin-bottom:8px;
    font-size:21px;
    font-weight:700;

}

.svc p{

    color:var(--muted);
    font-size:14px;

}

/* ==========================================================
   WHY CHOOSE US
========================================================== */

.why{

    padding-block:var(--gap);

}

.why-grid{

    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:clamp(40px,5vw,80px);
    align-items:center;

}

@media (max-width:900px){

    .why-grid{

        grid-template-columns:1fr;

    }

}



/* ==========================================================
   WHY IMAGE
========================================================== */

.why-photo{

    aspect-ratio:16/10;
    margin-top:30px;
    border:1px solid var(--line);
    border-radius:calc(var(--r) + 4px);

    background:
        linear-gradient(
            120deg,
            rgba(30,134,214,.12),
            transparent
        ),
        linear-gradient(
            rgba(5,5,7,.25),
            rgba(5,5,7,.55)
        ),
        var(--img-why)
        center/cover;

    box-shadow:
        0 30px 60px -30px
        rgba(0,0,0,.8);

}

@media (max-width:900px){

    .why-photo{

        display:none;

    }

}



/* ==========================================================
   PROGRESS BARS
========================================================== */

.bars{

    display:flex;
    flex-direction:column;
    gap:24px;

}

.bar .top{

    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:9px;

}

.bar .top b{

    font-family:var(--display);
    font-size:16px;
    font-weight:700;

}

.bar .top span{

    color:var(--azure);
    font-family:var(--mono);
    font-size:13px;

}

.bar .track{

    height:6px;
    overflow:hidden;
    border-radius:6px;
    background:rgba(255,255,255,.06);

}

.bar .fill{

    width:0;
    height:100%;
    border-radius:6px;
    background:linear-gradient(
        90deg,
        var(--azure),
        var(--electric)
    );

    transition:width 1.3s var(--ease);

}



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

.why-card{

    position:relative;
    overflow:hidden;
    padding:34px;
    border:1px solid var(--line);
    border-radius:calc(var(--r) + 6px);

    background:linear-gradient(
        160deg,
        var(--carbon-2),
        var(--graphite)
    );

}

.why-card .badge{

    color:var(--azure);
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.2em;

}

.why-card h3{

    margin:14px 0 18px;
    font-size:clamp(26px,3.2vw,38px);

}



/* ==========================================================
   CHIPS
========================================================== */

.chips{

    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;

}

.chip{

    padding:8px 14px;
    border:1px solid var(--line-2);
    border-radius:100px;
    color:var(--muted);
    font-size:13px;

}

.chip b{

    color:var(--electric);

}

/* ==========================================================
   TRANSFORMATION (BEFORE / AFTER)
========================================================== */

.trans{

    padding-block:var(--gap);

}

.ba-grid{

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

}

@media (max-width:900px){

    .ba-grid{

        grid-template-columns:1fr;
        max-width:460px;
        margin-inline:auto;

    }

}

.ba{

    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--r);
    background:var(--carbon);
    user-select:none;
    touch-action:none;

}

.ba .pane{

    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-family:var(--display);
    font-size:42px;
    font-weight:900;
    letter-spacing:.1em;

}

.ba .before{

    background:linear-gradient(
        150deg,
        #1a1c22,
        #0d0e12
    );

    color:#2c3038;

}

.ba .after{

    background:linear-gradient(
        150deg,
        #0d2236,
        #06263c
    );

    color:rgba(59,184,255,.4);

    clip-path:inset(0 0 0 50%);

}

.ba .tag{

    position:absolute;
    bottom:14px;
    padding:5px 10px;

    border-radius:6px;
    background:rgba(0,0,0,.5);
    backdrop-filter:blur(6px);

    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.18em;

}

.ba .tag.b{

    left:14px;
    color:var(--muted);

}

.ba .tag.a{

    right:14px;
    color:var(--electric);

}

.ba .handle{

    position:absolute;

    top:0;
    bottom:0;
    left:50%;

    width:2px;
    z-index:3;
    background:var(--electric);
    box-shadow:0 0 16px var(--electric);

}

.ba .knob{

    position:absolute;

    top:50%;
    left:50%;

    translate:-50% -50%;
    display:grid;
    place-items:center;

    width:42px;
    height:42px;
    z-index:4;

    border:2px solid var(--electric);
    border-radius:50%;
    background:var(--void);
    color:var(--electric);
    font-size:13px;

}

.ba .meta{

    position:absolute;
    top:14px;
    left:14px;

    z-index:5;
    padding:4px 9px;
    border-radius:6px;
    background:rgba(30,134,214,.7);

    color:#fff;
    font-family:var(--mono);
    font-size:11px;

}

.ba-note{

    margin-top:18px;
    color:var(--faint);
    font-family:var(--mono);
    font-size:12px;

}

/* ==========================================================
   EQUIPMENT
========================================================== */

.equip{

    padding-block:var(--gap);

}

.eq-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;

}

@media (max-width:980px){

    .eq-grid{

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

    }

}

@media (max-width:520px){

    .eq-grid{

        grid-template-columns:1fr;

    }

}

.eq{

    position:relative;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    aspect-ratio:3/4;
    overflow:hidden;
    padding:26px;

    border:1px solid var(--line);
    border-radius:var(--r);
    background:linear-gradient(
        170deg,
        var(--carbon-2),
        var(--void)
    );

    transform-style:preserve-3d;
    transition:transform .5s var(--ease);

}

.eq .glow{

    position:absolute;
    inset:0;
    z-index:1;
    background:radial-gradient(
        80% 50% at 50% 100%,
        rgba(30,134,214,.22),
        transparent 70%
    );

}

.eq-img{

    position:absolute;
    inset:0;

    z-index:0;
    background-size:cover;
    background-position:center;

    opacity:.5;
    transition:
        opacity .5s,
        transform .7s var(--ease);

}

.eq::after{

    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(
        transparent 20%,
        rgba(5,5,7,.5) 55%,
        rgba(5,5,7,.94)
    );

}

.eq:hover .eq-img{

    opacity:.78;
    transform:scale(1.07);

}

.eq .num,
.eq h4,
.eq .spec{

    position:relative;
    z-index:2;

}

.eq h4{

    font-family:var(--display);
    font-size:20px;
    font-weight:700;

}

.eq .spec{

    position:relative;
    overflow:hidden;
    max-height:0;
    opacity:0;
    z-index:2;

    transition:
        max-height .5s var(--ease),
        opacity .4s,
        margin .4s;

}

.eq:hover .spec{

    max-height:120px;
    margin-top:10px;
    opacity:1;

}

.eq .spec li{

    list-style:none;
    padding:3px 0;
    color:var(--muted);
    font-family:var(--mono);
    font-size:13px;

}

.eq .num{

    position:absolute;
    top:22px;
    left:26px;
    z-index:2;

    color:var(--azure);
    font-family:var(--mono);
    font-size:12px;

}

/* ==========================================================
   REHABILITATION
========================================================== */

.rehab{

    padding-block:var(--gap);

}

.rehab-wrap{

    overflow:hidden;
    border:1px solid var(--line);
    border-radius:calc(var(--r) + 10px);

    background:linear-gradient(
        120deg,
        var(--graphite),
        var(--void)
    );

}

.rehab-grid{

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

}

@media (max-width:860px){

    .rehab-grid{

        grid-template-columns:1fr;

    }

}


/* ==========================================================
   REHAB CONTENT
========================================================== */

.rehab-left{

    padding:clamp(34px,4vw,60px);

}

.rehab-left h2{

    margin:16px 0 18px;
    font-size:clamp(30px,4.4vw,52px);

}

.rehab-left p{

    max-width:46ch;
    margin-bottom:26px;
    color:var(--muted);

}

.rehab-right{

    position:relative;
    display:grid;
    place-items:center;
    min-height:340px;

    border-left:1px solid var(--line);
    background:
        linear-gradient(
            135deg,
            rgba(13,34,54,.5),
            rgba(5,5,7,.86)
        ),
        var(--img-rehab)
        center/cover
        no-repeat;

}


/* ==========================================================
   PULSE ANIMATION
========================================================== */

.pulse{

    position:relative;
    width:120px;
    height:120px;

}

.pulse i{

    position:absolute;
    inset:0;
    border:1px solid var(--electric);
    border-radius:50%;
    animation:pulse 3s ease-out infinite;

}

.pulse i:nth-child(2){

    animation-delay:1s;

}

.pulse i:nth-child(3){

    animation-delay:2s;

}

.pulse b{

    position:absolute;
    inset:0;

    display:grid;
    place-items:center;

    color:var(--electric);

    font-family:var(--mono);
    font-size:13px;

}

@keyframes pulse{

    0%{

        transform:scale(.4);
        opacity:.8;

    }

    100%{

        transform:scale(1.6);
        opacity:0;

    }

}



/* ==========================================================
   REHAB LIST
========================================================== */

.rehab-list{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;

}

@media (max-width:520px){

    .rehab-list{

        grid-template-columns:1fr;

    }

}

.rehab-list div{

    display:flex;
    align-items:center;
    gap:10px;

    padding:16px 18px;
    border:1px solid var(--line);
    border-radius:12px;
    font-size:14px;

}

.rehab-list svg{

    width:18px;
    height:18px;
    flex-shrink:0;
    color:var(--electric);

}



/* ==========================================================
   MEMBERSHIP
========================================================== */

.member{

    padding-block:var(--gap);

}

.plans{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;

}

@media (max-width:980px){

    .plans{

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

    }

}

@media (max-width:560px){

    .plans{

        grid-template-columns:1fr;

    }

}



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

.plan{

    position:relative;
    padding:30px 26px;
    border:1px solid var(--line);
    border-radius:var(--r);
    background:var(--carbon);

    transition:
        transform .4s var(--ease),
        border-color .4s;

}

.plan:hover{

    transform:translateY(-6px);

    border-color:var(--line-2);

}

.plan.pop{

    border-color:var(--azure);
    background:linear-gradient(
        180deg,
        rgba(30,134,214,.1),
        var(--carbon)
    );

}

.plan.pop::before{

    content:"MOST POPULAR";
    position:absolute;

    top:-1px;
    right:18px;
    transform:translateY(-50%);
    padding:5px 12px;
    border-radius:100px;

    background:var(--azure);
    color:#fff;
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.16em;

}

.plan .name{

    color:var(--muted);
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.18em;
    text-transform:uppercase;

}

.plan .price{

    margin:14px 0 2px;
    font-family:var(--display);
    font-size:clamp(34px,4vw,46px);
    font-weight:900;
    letter-spacing:-.02em;

}

.plan .price small{

    color:var(--faint);
    font-family:var(--body);
    font-size:15px;
    font-weight:500;

}

.plan .save{

    color:var(--electric);
    font-family:var(--mono);
    font-size:11px;

}

.plan ul{

    display:flex;
    flex-direction:column;
    gap:11px;
    margin:22px 0 26px;
    list-style:none;

}

.plan li{

    display:flex;
    align-items:flex-start;
    gap:9px;
    color:var(--muted);
    font-size:13.5px;

}

.plan li svg{

    width:15px;
    height:15px;
    flex-shrink:0;
    margin-top:3px;
    color:var(--azure);

}

.plan .btn{

    width:100%;
    justify-content:center;

}

.price-note{

    margin-top:18px;
    color:var(--faint);
    font-family:var(--mono);
    font-size:12px;

}

/* ==========================================================
   TRAINERS
========================================================== */

.trainers{

    padding-block:var(--gap);

}

.tr-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;

}

@media (max-width:980px){

    .tr-grid{

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

    }

}

@media (max-width:520px){

    .tr-grid{

        grid-template-columns:1fr;

    }

}



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

.tr{

    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--r);

    background:var(--carbon);
    transition:
        transform .4s var(--ease),
        border-color .4s;

}

.tr:hover{

    transform:translateY(-6px);
    border-color:var(--azure);

}

.tr .ph{

    position:relative;
    display:block;
    width:100%;
    height:360px;
    overflow:hidden;
    background:#111;

}

.tr .ph img{

    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    transition:.4s;

}

.tr:hover .ph img{

    transform:scale(1.05);

}

.tr .ph::after{

    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.35),
        transparent 60%
    );

    pointer-events:none;

}

.tr .body{

    padding:20px 22px 24px;

}

.tr .body h4{

    font-family:var(--display);
    font-size:18px;
    font-weight:700;

}

.tr .role{

    margin:5px 0 12px;
    color:var(--azure);
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.12em;

}

.tr .cert{

    color:var(--muted);
    font-size:13px;

}



/* ==========================================================
   TRAINER SOCIAL LINKS
========================================================== */

.tr .soc{

    display:flex;
    gap:10px;
    margin-top:14px;

}

.tr .soc a{

    display:grid;
    place-items:center;
    width:32px;
    height:32px;

    border:1px solid var(--line);
    border-radius:8px;
    color:var(--muted);
    transition:.25s;

}

.tr .soc a:hover{

    color:var(--electric);
    border-color:var(--azure);

}

.tr .soc svg{

    width:15px;
    height:15px;

}



/* ==========================================================
   TESTIMONIALS
========================================================== */

.testi{

    overflow:hidden;
    padding-block:var(--gap);

}

.testi-track{

    display:flex;
    gap:18px;
    transition:transform .6s var(--ease);

}

.t-card{

    flex:0 0 clamp(290px,42vw,440px);
    padding:30px;
    border:1px solid var(--line);
    border-radius:var(--r);
    background:var(--carbon);

}

.t-card .stars{

    color:var(--azure);
    font-size:15px;
    letter-spacing:3px;

}

.t-card blockquote{

    margin:16px 0 22px;
    font-size:clamp(16px,2vw,19px);
    font-weight:500;
    line-height:1.55;

}


/* ==========================================================
   TESTIMONIAL AUTHOR
========================================================== */

.t-card .who{

    display:flex;
    align-items:center;
    gap:13px;

}

.t-card .av{

    display:grid;
    place-items:center;

    width:44px;
    height:44px;

    border-radius:50%;
    background:linear-gradient(
        135deg,
        var(--azure),
        var(--azure-deep)
    );

    color:#fff;
    font-family:var(--display);
    font-size:17px;
    font-weight:700;

}

.t-card .who b{

    display:block;
    font-family:var(--display);
    font-size:15px;

}

.t-card .who span{

    color:var(--faint);
    font-family:var(--mono);
    font-size:11px;

}



/* ==========================================================
   TESTIMONIAL NAVIGATION
========================================================== */

.testi-nav{

    display:flex;
    gap:10px;
    margin-top:26px;

}

.testi-nav button{

    display:grid;
    place-items:center;

    width:46px;
    height:46px;

    border:1px solid var(--line-2);
    border-radius:50%;
    transition:.25s;

}

.testi-nav button:hover{

    background:var(--azure);
    border-color:var(--azure);

}

.testi-nav svg{

    width:18px;
    height:18px;

}

/* ==========================================================
   PERFORMANCE LAB
========================================================== */

.lab{

    padding-block:var(--gap);

}

.lab-shell{

    overflow:hidden;
    border:1px solid var(--line);
    border-radius:calc(var(--r) + 8px);
    background:linear-gradient(
        160deg,
        var(--graphite),
        var(--void)
    );

}



/* ==========================================================
   LAB TABS
========================================================== */

.lab-tabs{

    display:flex;
    flex-wrap:wrap;
    gap:4px;

    padding:14px;
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.015);

}

.lab-tabs button{

    padding:10px 16px;
    border-radius:10px;
    color:var(--muted);

    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.08em;
    white-space:nowrap;
    transition:.25s;

}

.lab-tabs button.on{

    background:var(--azure);
    color:#fff;

}

.lab-tabs button:hover:not(.on){

    background:rgba(255,255,255,.05);
    color:#fff;

}


/* ==========================================================
   LAB CONTENT
========================================================== */

.lab-body{

    padding:clamp(26px,4vw,48px);

}

#labPanels{

    padding:clamp(26px,4vw,48px);

}

.lab-panel{

    display:none;

}

.lab-panel.on{

    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:start;
    gap:clamp(30px,4vw,56px);
    animation:fade .5s var(--ease);

}

@media (max-width:760px){

    .lab-panel.on{
        grid-template-columns:1fr;

    }

}

.lab-panel h3{

    margin-bottom:6px;
    font-size:24px;
    font-weight:700;

}

.lab-panel > p{

    margin-bottom:22px;
    color:var(--muted);
    font-size:14px;

}



/* ==========================================================
   FORM FIELDS
========================================================== */

.field{

    margin-bottom:16px;

}

.field label{

    display:block;
    margin-bottom:7px;
    color:var(--muted);

    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;

}

.field input,
.field select{

    width:100%;
    padding:12px 14px;
    border:1px solid var(--line-2);
    border-radius:10px;

    background:var(--carbon);
    color:#fff;
    font-family:var(--body);
    font-size:15px;
    transition:border-color .25s;

}

.field input:focus,
.field select:focus{

    outline:none;
    border-color:var(--azure);
    box-shadow:0 0 0 3px rgba(30,134,214,.15);

}

/* ==========================================================
   SEGMENT BUTTONS
========================================================== */

.seg{

    display:flex;

    gap:8px;

}

.seg button{

    flex:1;
    padding:11px;
    border:1px solid var(--line-2);
    border-radius:10px;

    color:var(--muted);
    font-size:13px;
    transition:.2s;

}

.seg button.on{

    background:var(--azure);
    border-color:var(--azure);
    color:#fff;

}



/* ==========================================================
   LAB OUTPUT
========================================================== */

.lab-out{

    position:relative;
    overflow:hidden;

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

    min-height:240px;
    padding:30px;

    border:1px solid var(--line);
    border-radius:var(--r);
    background:var(--void);

}

.lab-out::before{

    content:"";
    position:absolute;
    inset:0;

    background:radial-gradient(
        100% 70% at 70% 0%,
        rgba(30,134,214,.12),
        transparent 60%
    );

}

.lab-out .read{

    position:relative;

}

.lab-out .big{

    color:transparent;

    font-family:var(--display);
    font-size:clamp(48px,7vw,76px);
    font-weight:900;

    line-height:1;
    letter-spacing:-.03em;
    background:linear-gradient(
        120deg,
        #fff,
        var(--electric)
    );

    -webkit-background-clip:text;
    background-clip:text;

}

.lab-out .big small{

    color:var(--faint);
    font-size:20px;
    -webkit-text-fill-color:var(--faint);

}

.lab-out .cat{

    margin-top:14px;
    color:var(--azure);
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:.1em;

}

.lab-out .desc{

    margin-top:12px;
    color:var(--muted);
    font-size:14px;
    line-height:1.5;

}

.lab-out .placeholder{

    color:var(--faint);
    font-family:var(--mono);
    font-size:13px;

}

/* ==========================================================
   LAB STATS
========================================================== */

.lab-bars{

    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:18px;

}

.lab-bars .lb{

    display:flex;
    justify-content:space-between;
    color:var(--muted);
    font-family:var(--mono);
    font-size:12px;

}



/* ==========================================================
   LAB DISCLAIMER
========================================================== */

.lab-disclaimer{

    padding:16px clamp(26px,4vw,48px);
    border-top:1px solid var(--line);
    color:var(--faint);
    font-family:var(--mono);
    font-size:12px;

}

/* ==========================================================
   BRANCHES
========================================================== */

.branches{

    padding-block:var(--gap);

}

.br-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;

}

@media (max-width:860px){

    .br-grid{

        grid-template-columns:1fr;

    }

}

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

.br{

    overflow:hidden;
    border:1px solid var(--line);
    border-radius:calc(var(--r) + 6px);

    background:var(--carbon);
    transition:border-color .4s;

}

.br:hover{

    border-color:var(--azure);

}

.br .map{

    aspect-ratio:16/9;
    border-bottom:1px solid var(--line);
    background:var(--graphite);

}

.br .map iframe{

    width:100%;
    height:100%;
    border:0;
    filter:
        grayscale(.4)
        invert(.92)
        hue-rotate(180deg)
        contrast(.9);

}

.br .info{

    padding:28px;

}

.br .info .k{

    color:var(--azure);
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.18em;

}

.br .info h3{

    margin:8px 0 14px;
    font-size:24px;
    font-weight:700;

}

.br .row{

    display:flex;
    align-items:center;
    gap:11px;

    padding:7px 0;
    color:var(--muted);
    font-size:14.5px;

}

.br .row svg{

    width:17px;
    height:17px;
    flex-shrink:0;
    color:var(--electric);

}

.br .acts{

    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:18px;

}

.br .acts a{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:11px 18px;
    border:1px solid var(--line-2);
    border-radius:100px;
    font-size:13px;
    transition:.25s;

}

.br .acts a:hover{

    border-color:var(--azure);
    background:rgba(30,134,214,.1);

}

.br .acts svg{

    width:15px;
    height:15px;

}



/* ==========================================================
   CONTACT
========================================================== */

.contact{

    padding-block:var(--gap);

}

.ct-grid{

    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:clamp(40px,5vw,72px);

}

@media (max-width:900px){

    .ct-grid{

        grid-template-columns:1fr;

    }

}



/* ==========================================================
   CONTACT INFO
========================================================== */

.ct-left h2{

    margin:16px 0 18px;
    font-size:clamp(32px,5vw,60px);

}

.ct-left p{

    max-width:40ch;
    margin-bottom:30px;
    color:var(--muted);

}

.ct-quick{

    display:flex;
    flex-direction:column;
    gap:14px;

}

.ct-quick a{

    display:flex;
    align-items:center;

    gap:14px;
    padding:18px 20px;
    border:1px solid var(--line);
    border-radius:var(--r);

    background:var(--carbon);
    transition:.3s;

}

.ct-quick a:hover{

    transform:translateX(5px);
    border-color:var(--azure);

}

.ct-quick .ic{

    display:grid;
    place-items:center;

    width:44px;
    height:44px;

    border-radius:11px;
    background:rgba(30,134,214,.12);
    color:var(--electric);

}

.ct-quick svg{

    width:20px;
    height:20px;

}

.ct-quick b{

    display:block;
    font-family:var(--display);
    font-size:15px;
    font-weight:700;

}

.ct-quick span{

    color:var(--muted);
    font-size:13px;

}



/* ==========================================================
   CONTACT FORM
========================================================== */

.form{

    padding:clamp(26px,3.5vw,40px);

    border:1px solid var(--line);
    border-radius:calc(var(--r) + 6px);

    background:linear-gradient(
        160deg,
        var(--carbon-2),
        var(--graphite)
    );

}

.form-row{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;

}

@media (max-width:520px){

    .form-row{

        grid-template-columns:1fr;

    }

}

.form .field textarea{

    width:100%;
    min-height:96px;
    resize:vertical;
    padding:12px 14px;
    border:1px solid var(--line-2);
    border-radius:10px;

    background:var(--carbon);
    color:#fff;
    font-family:var(--body);
    font-size:15px;
    transition:border-color .25s;

}

.form .field textarea:focus{

    outline:none;
    border-color:var(--azure);
    box-shadow:0 0 0 3px rgba(30,134,214,.15);

}

.form .btn{

    width:100%;
    justify-content:center;
    margin-top:6px;

}

.form .hint{

    margin-top:14px;
    color:var(--faint);

    font-family:var(--mono);
    font-size:11px;
    text-align:center;

}

/* ==========================================================
   GLASSMORPHISM THEME
========================================================== */

:root{

    --glass:rgba(17,20,26,.5);
    --glass-2:rgba(22,26,33,.55);

    --glass-brd:rgba(255,255,255,.12);

    --s1:url("https://images.unsplash.com/photo-1623874106686-5be2b325c8f1?w=1600&q=70&auto=format&fit=crop");
    --s2:url("https://images.unsplash.com/photo-1734630341082-0fec0e10126c?w=1600&q=70&auto=format&fit=crop");
    --s3:url("https://images.unsplash.com/photo-1672344048213-76b6e77304bd?w=1600&q=70&auto=format&fit=crop");
    --s4:url("https://images.unsplash.com/photo-1697129392091-d08875930fec?w=1600&q=70&auto=format&fit=crop");
    --s5:url("https://images.unsplash.com/photo-1576678927484-cc907957088c?w=1600&q=70&auto=format&fit=crop");
    --s6:url("https://images.unsplash.com/photo-1540497077202-7c8a3999166f?w=1600&q=70&auto=format&fit=crop");
    --s7:url("https://images.unsplash.com/photo-1722925541321-f52d45b29c17?w=1600&q=70&auto=format&fit=crop");

}



/* ==========================================================
   SECTION BACKGROUNDS
========================================================== */

.sec-bg{

    position:relative;

    isolation:isolate;

}

.sec-bg::before{

    content:"";
    position:absolute;
    inset:0;
    z-index:-2;

    background-image:var(--sbg);
    background-size:cover;
    background-position:center;
    opacity:.13;

}

.sec-bg::after{

    content:"";
    position:absolute;
    inset:0;
    z-index:-2;

    background:linear-gradient(
        var(--void),
        rgba(5,5,7,.5) 26%,
        rgba(5,5,7,.5) 74%,
        var(--void)
    );

}



/* ==========================================================
   GLASS PANELS
========================================================== */

.svc,
.pillar,
.why-card,
.plan,
.tr,
.t-card,
.lab-shell,
.br,
.form,
.rehab-wrap,
.ct-quick a{

    background:var(--glass)!important;
    border-color:var(--glass-brd);
    -webkit-backdrop-filter:blur(15px) saturate(140%);
    backdrop-filter:blur(15px) saturate(140%);

}

.why-card,
.form,
.rehab-wrap{

    background:var(--glass-2)!important;

}

.plan.pop{

    background:linear-gradient(
        180deg,
        rgba(30,134,214,.2),
        var(--glass-2)
    )!important;

    border-color:var(--azure);

}

.svc,
.plan,
.tr,
.t-card,
.br,
.why-card,
.form,
.rehab-wrap{

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 30px 60px -42px rgba(0,0,0,.9);

}



/* ==========================================================
   GLASS FORM ELEMENTS
========================================================== */

.lab-out{

    background:rgba(8,9,12,.46)!important;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);

}

.field input,
.field select,
.form .field textarea{

    background:rgba(10,12,16,.5)!important;
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);

}

.lab-tabs{

    background:rgba(255,255,255,.02)!important;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);

}



/* ==========================================================
   EQUIPMENT CARD OVERRIDE
========================================================== */

.eq{

    background:linear-gradient(
        170deg,
        var(--carbon-2),
        var(--void)
    )!important;

}



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

@media (max-width:600px){

    .svc,
    .pillar,
    .why-card,
    .plan,
    .tr,
    .t-card,
    .lab-shell,
    .br,
    .form,
    .rehab-wrap,
    .ct-quick a{

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

    }

}