/* =========================================================
   MACSO CONSULTANCY
   Responsive stylesheet
   Desktop / Tablet / Mobile
   ========================================================= */

:root{
    --gd:#062b20;
    --g:#0c4935;
    --gm:#176044;
    --gl:#e8f3ec;
    --y:#f4c842;
    --off:#f7f9f5;
    --t:#12221c;
    --m:#63736b;
    --b:#dce6df;
    --shadow:0 18px 50px rgba(6,43,32,.10);
}


/* =========================================================
   RESET
   ========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:"DM Sans",sans-serif;
    color:var(--t);
    background:#fff;
    line-height:1.6;
    overflow-x:hidden;
}

img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

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

button{
    font-family:inherit;
}

.container{
    width:min(1160px,calc(100% - 48px));
    margin:0 auto;
}


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

h1,
h2,
h3{
    font-family:"Manrope",sans-serif;
    line-height:1.12;
}

h1{
    font-size:clamp(46px,5vw,70px);
    letter-spacing:-3px;
}

h2{
    font-size:clamp(34px,4vw,50px);
    letter-spacing:-2px;
}

h3{
    line-height:1.25;
}

h1 em,
h2 em{
    color:var(--gm);
    font-style:normal;
}

.learning h2 em,
.cta h2 em{
    color:var(--y);
}


/* =========================================================
   EYEBROW
   ========================================================= */

.eyebrow{
    font-size:10px;
    font-weight:800;
    letter-spacing:2.2px;
    color:var(--y);
    margin-bottom:16px;
}

.eyebrow.green{
    color:var(--gm);
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    height:78px;

    background:rgba(255,255,255,.96);
    backdrop-filter:blur(15px);

    border-bottom:1px solid transparent;

    transition:.3s ease;
}

.site-header.scrolled{
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    border-bottom-color:var(--b);
}

.nav-inner{
    height:78px;

    display:flex;
    align-items:center;
    justify-content:space-between;
}


/* =========================================================
   BRAND
   ========================================================= */

.brand{
    display:inline-flex;
    align-items:center;
    gap:10px;
}

.brand-mark{
    width:38px;
    height:38px;

    border-radius:10px;

    background:var(--gd);
    color:var(--y);

    display:grid;
    place-items:center;

    font-family:"Manrope",sans-serif;
    font-weight:800;

    flex-shrink:0;
}

.brand strong{
    display:block;

    font-family:"Manrope",sans-serif;
    font-size:16px;
    letter-spacing:.5px;
    line-height:1;
}

.brand small{
    display:block;

    margin-top:3px;

    font-size:7px;
    letter-spacing:1.3px;
    color:var(--m);
    font-weight:700;
}


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

nav{
    display:flex;
    align-items:center;
    gap:30px;
}

nav a{
    font-size:12px;
    font-weight:600;
    color:#4e5d57;

    transition:.25s ease;
}

nav a:hover{
    color:var(--gm);
}

nav .nav-button{
    background:var(--gd);
    color:#fff;

    padding:11px 17px;

    border-radius:8px;
}

nav .nav-button:hover{
    background:var(--gm);
    color:#fff;

    transform:translateY(-2px);
}


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

.menu-toggle{
    display:none;

    width:42px;
    height:42px;

    border:1px solid var(--b);
    background:#fff;

    border-radius:8px;

    cursor:pointer;
}

.menu-toggle span{
    display:block;

    width:19px;
    height:2px;

    background:var(--gd);

    margin:4px auto;
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
    min-height:calc(100vh - 78px);

    padding:118px 0 55px;

    display:flex;
    align-items:center;

    background:
        linear-gradient(
            135deg,
            #fff 0%,
            #f7faf7 100%
        );
}

.hero-grid{
    display:grid;

    grid-template-columns:1fr .9fr;

    gap:70px;

    align-items:center;
}

.hero-content{
    max-width:640px;
}

.hero-content>p{
    color:var(--m);

    font-size:17px;
    line-height:1.7;

    max-width:570px;

    margin:20px 0 28px;
}


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

.actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.btn{
    display:inline-flex;

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

    gap:12px;

    padding:13px 18px;

    border-radius:9px;

    font-size:11px;
    font-weight:800;

    transition:.25s ease;
}

.btn b{
    font-size:15px;
}

.btn.primary{
    background:var(--gd);
    color:#fff;
}

.btn.primary:hover{
    background:var(--gm);

    transform:translateY(-3px);

    box-shadow:
        0 12px 25px rgba(6,43,32,.16);
}

.btn.secondary{
    background:#fff;

    border:1px solid var(--b);
}

.btn.secondary:hover{
    border-color:var(--gm);
    color:var(--gm);

    transform:translateY(-3px);
}

.btn.yellow{
    background:var(--y);
    color:var(--gd);
}

.btn.yellow:hover{
    transform:translateY(-3px);

    box-shadow:
        0 12px 25px rgba(244,200,66,.22);
}


/* =========================================================
   HERO IMAGE
   ========================================================= */

.hero-image-wrap{
    height:520px;
    min-height:520px;

    position:relative;
}

.hero-image{
    height:100%;

    border-radius:26px;

    overflow:hidden;

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

.hero-image img{
    transition:transform .7s ease;
}

.hero-image-wrap:hover .hero-image img{
    transform:scale(1.035);
}

.image-card{
    position:absolute;

    background:#fff;

    border-radius:13px;

    padding:13px 16px;

    box-shadow:
        0 14px 35px rgba(0,0,0,.12);

    display:flex;
    align-items:center;

    gap:10px;
}

.image-card b{
    color:var(--gd);

    font-family:"Manrope",sans-serif;

    font-size:25px;
}

.image-card span{
    font-size:8px;

    font-weight:800;

    line-height:1.3;

    letter-spacing:1px;

    color:var(--m);
}

.card-top{
    top:28px;
    left:-25px;
}

.card-bottom{
    bottom:28px;
    right:-25px;
}


/* =========================================================
   NUMBERS
   ========================================================= */

.numbers{
    background:var(--gd);
}

.number-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.number-grid>div{
    padding:22px 20px;

    border-right:
        1px solid rgba(255,255,255,.12);
}

.number-grid>div:last-child{
    border-right:0;
}

.number-grid b{
    display:block;

    font-family:"Manrope",sans-serif;

    font-size:29px;

    color:var(--y);
}

.number-grid span{
    font-size:11px;
    color:#c8d7d0;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section{
    padding:78px 0;
}

.about,
.programs,
.other-services,
.reach,
.cta{
    min-height:calc(100vh - 78px);

    display:flex;
    align-items:center;
}


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

.two-col{
    display:grid;

    grid-template-columns:.7fr 1.3fr;

    gap:85px;
}

.lead{
    font-size:18px;

    color:#3e5048;

    line-height:1.7;
}

.vm{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

    margin-top:28px;

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

    padding-top:25px;
}

.vm b{
    font-size:10px;

    letter-spacing:1.8px;

    color:var(--gm);
}

.vm p{
    font-size:12px;

    color:var(--m);

    margin-top:7px;
}


/* =========================================================
   LIGHT SECTIONS
   ========================================================= */

.solutions,
.programs,
.other-services{
    background:var(--off);

    position:relative;

    overflow:hidden;
}

.solutions::before{
    content:"";

    position:absolute;

    inset:0;

    background-image:
        linear-gradient(
            rgba(247,249,245,.82),
            rgba(247,249,245,.82)
        ),
        url("https://images.unsplash.com/photo-1677594333327-c9f221ab0cfa?auto=format&fit=crop&w=1800&q=80");

    background-size:cover;
    background-position:center;

    opacity:.9;

    pointer-events:none;
}

.solutions>.container{
    position:relative;
    z-index:1;
}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.section-head{
    max-width:700px;

    margin-bottom:32px;
}

.section-head.center{
    text-align:center;

    margin-left:auto;
    margin-right:auto;
}

.section-head p{
    color:var(--m);

    font-size:14px;

    margin-top:11px;
}


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

.pillar-grid{
    display:grid;

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

    gap:12px;
}

.pillar-grid .pillar:nth-child(-n+4){
    grid-column:span 5;
}

.pillar-grid .pillar:nth-child(n+5){
    grid-column:span 4;
}

.pillar{
    padding:20px;

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

    border-radius:16px;

    background:#fff;

    min-height:175px;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.pillar:hover{
    transform:translateY(-6px);

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

.pillar.dark{
    background:var(--gd);
    color:#fff;
}

.pillar>span{
    font-size:20px;

    color:var(--gm);

    display:block;

    margin-bottom:16px;
}

.pillar.dark>span{
    color:var(--y);
}

.pillar h3{
    font-size:16px;

    margin-bottom:7px;
}

.pillar p{
    font-size:11px;

    color:var(--m);

    line-height:1.55;
}

.pillar.dark p{
    color:#c7d7d0;
}


/* =========================================================
   LEARNING
   ========================================================= */

.learning{
    background:var(--gd);

    color:#fff;

    padding-bottom:62px;
}

.learning-grid{
    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:55px;

    align-items:center;
}

.learning-photo{
    height:440px;

    border-radius:23px;

    overflow:hidden;

    position:relative;
}

.learning-photo img{
    transition:.6s ease;
}

.learning-photo:hover img{
    transform:scale(1.04);
}

.learning-photo>span{
    position:absolute;

    bottom:15px;
    left:15px;

    background:var(--y);

    color:var(--gd);

    padding:8px 11px;

    border-radius:7px;

    font-size:8px;

    font-weight:900;
}

.learning-copy>p{
    color:#bfd0c8;

    font-size:14px;

    margin:13px 0 19px;
}


/* =========================================================
   BENEFITS
   ========================================================= */

.benefits{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;
}

.benefits>div{
    border:1px solid rgba(255,255,255,.14);

    border-radius:12px;

    padding:14px;

    min-height:120px;

    transition:.25s ease;
}

.benefits>div:hover{
    border-color:rgba(244,200,66,.45);

    transform:translateY(-3px);
}

.benefits b{
    display:block;

    color:var(--y);

    font-family:"Manrope",sans-serif;

    font-size:21px;
}

.benefits strong{
    font-size:11px;

    display:block;

    margin-top:4px;
}

.benefits small{
    display:block;

    color:#9fb3aa;

    font-size:9.5px;

    margin-top:4px;

    line-height:1.45;
}


/* =========================================================
   GREEN BAR
   ========================================================= */

.green-bar{
    margin-top:32px;

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

    padding-top:15px;

    display:flex;

    align-items:center;

    gap:24px;

    flex-wrap:wrap;
}

.green-bar span{
    font-size:8px;

    letter-spacing:1.5px;

    color:#a9beb4;

    margin-right:auto;
}

.green-bar b{
    font-size:11px;
}


/* =========================================================
   PROGRAMS
   ========================================================= */

.program-grid{
    display:grid;

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

    gap:12px;
}

.program{
    background:#fff;

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

    border-radius:16px;

    padding:22px;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.program:hover{
    transform:translateY(-6px);

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

.program h3{
    font-size:18px;

    margin-bottom:11px;
}

.program p{
    font-size:10.5px;

    color:var(--m);

    line-height:1.75;
}


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

.other-grid{
    display:grid;

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

    gap:13px;
}

.other-card{
    background:#fff;

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

    border-radius:17px;

    padding:25px;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.other-card:hover{
    transform:translateY(-6px);

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

.other-card>span{
    font-family:"Manrope",sans-serif;

    font-weight:800;

    font-size:10px;

    color:var(--gm);

    letter-spacing:1px;
}

.other-card h3{
    font-size:20px;

    margin:17px 0 8px;
}

.other-card p{
    font-size:11.5px;

    color:var(--m);
}


/* =========================================================
   ADMISSIONS
   ========================================================= */

.admissions{
    background:#fff;
}

.admissions-grid{
    display:grid;

    grid-template-columns:1.08fr .92fr;

    gap:50px;

    align-items:center;
}

.admission-copy>p{
    color:var(--m);

    font-size:15px;

    margin:13px 0 20px;
}

.admission-numbers{
    display:grid;

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

    gap:8px;

    margin-bottom:20px;
}

.admission-numbers div{
    background:var(--gl);

    border-radius:11px;

    padding:13px;
}

.admission-numbers b{
    display:block;

    font-family:"Manrope",sans-serif;

    font-size:17px;

    color:var(--gd);
}

.admission-numbers span{
    font-size:7.5px;

    letter-spacing:1px;

    font-weight:800;

    color:var(--m);
}


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

.flow{
    border-top:1px solid var(--b);
}

.flow>div{
    padding:10px 0;

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

.flow span{
    display:block;

    font-weight:800;

    font-size:11.5px;
}

.flow small{
    display:block;

    font-size:9.5px;

    color:var(--m);

    line-height:1.45;
}


/* =========================================================
   200+ VERIFIED SUB-AGENCIES
   CLEAN 3D CAMERA / LENS EFFECT
   ========================================================= */

.agency-art{

    width:100%;
    max-width:560px;

    height:460px;

    margin:0 auto;

    position:relative;

    display:flex;

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

    /*
       IMPORTANT:
       Do not hide the outer frames.
    */
    overflow:visible;

    isolation:isolate;

    --frame-w:200px;
    --frame-h:172px;
    --frame-scale:1.9;
}


/* =========================================================
   BACKGROUND FRAMES
   ========================================================= */

.agency-layer{

    position:absolute;
    left:50%;
    top:50%;

    /* every frame starts exactly at the card size and grows from there */
    width:var(--frame-w,200px);
    height:var(--frame-h,172px);

    border-radius:12px;
    pointer-events:none;
    opacity:0;
    will-change:transform,opacity;

    border:1.5px solid transparent;
    background:
        linear-gradient(
            135deg,
            rgba(6,43,32,.95),
            rgba(23,96,68,.75) 42%,
            rgba(244,200,66,.68)
        ) border-box;

    box-shadow:0 14px 34px rgba(6,43,32,.10);

    /* linear = constant speed, no ease in/out, so it never feels like a pulse */
    animation:agencyGrow 4.5s linear infinite;
}

.agency-layer::after{

    content:"";
    position:absolute;
    inset:7px;
    border-radius:6px;
    border:1px solid rgba(255,255,255,.22);
    background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(6,43,32,.025));
}

/* 3 frames, evenly spaced: one new frame every 1.5s.
   Negative delays = animation is already running on page load. */
.layer-1{ animation-delay:0s; }
.layer-2{ animation-delay:-1.5s; }
.layer-3{ animation-delay:-3s; }
.layer-4,
.layer-5{ display:none; }

/* Steady outward growth: fades in softly, fades out softly, never shrinks back */
@keyframes agencyGrow{

    0%{
        transform:translate(-50%,-50%) scale(1);
        opacity:0;
    }
    18%{
        opacity:.55;
    }
    65%{
        opacity:.30;
    }
    100%{
        transform:translate(-50%,-50%) scale(var(--frame-scale,1.9));
        opacity:0;
    }
}

@media (prefers-reduced-motion:reduce){
    .agency-layer{ animation:none; opacity:.25; }
    .layer-1{ transform:translate(-50%,-50%) scale(1.25); }
    .layer-2{ transform:translate(-50%,-50%) scale(1.55); }
    .layer-3{ transform:translate(-50%,-50%) scale(1.85); }
}


/* =========================================================
   CENTER 200+ CARD
   ========================================================= */

.agency-card{

    width:190px;
    height:165px;

    position:relative;

    z-index:30;

    flex-shrink:0;

    display:flex;

    flex-direction:column;

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

    text-align:center;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.90);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.92),
            rgba(232,243,236,.66)
        );

    backdrop-filter:blur(18px);

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

    box-shadow:
        0 28px 65px rgba(6,43,32,.18),
        0 6px 18px rgba(6,43,32,.08),
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(23,96,68,.14);

    transform-style:preserve-3d;

}


/* =========================================================
   CARD INNER GOLD FRAME
   ========================================================= */

.agency-card::before{

    content:"";

    position:absolute;

    inset:8px;

    border-radius:7px;

    border:
        1px solid rgba(244,200,66,.60);

    pointer-events:none;
}


/* =========================================================
   GLASS REFLECTION
   ========================================================= */

.agency-card::after{

    content:"";

    position:absolute;

    width:110px;
    height:110px;

    top:-48px;
    left:-48px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.65),
            rgba(255,255,255,0)
        );

    pointer-events:none;
}


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

.agency-card strong{

    position:relative;

    z-index:2;

    font-family:"Manrope",sans-serif;

    font-size:44px;

    line-height:1;

    letter-spacing:-2px;

    color:var(--gd);
}


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

.agency-card span{

    position:relative;

    z-index:2;

    margin-top:10px;

    font-size:8px;

    line-height:1.5;

    letter-spacing:1.7px;

    font-weight:900;

    color:var(--gm);
}


/* =========================================================
   VERY SUBTLE CENTER CARD FLOAT
   ========================================================= */



/* =========================================================
   REACH
   ========================================================= */

.reach{

    background:var(--gd);

    color:#fff;

    padding:78px 0;
}

.reach-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;
}

.reach .eyebrow.green{
    color:var(--y);
}

.reach h2{

    color:#fff;

    margin-bottom:18px;
}

.reach h2 em{

    color:var(--y);

    font-style:normal;
}

.reach p{

    max-width:580px;

    color:#bfd0c8;

    font-size:14px;

    line-height:1.75;
}

.chips{

    display:flex;

    flex-wrap:wrap;

    gap:9px;

    margin-top:25px;
}

.chips span{

    display:inline-flex;

    align-items:center;

    padding:8px 13px;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius:999px;

    background:
        rgba(255,255,255,.04);

    color:
        rgba(255,255,255,.82);

    font-size:10px;

    font-weight:700;

    transition:.25s ease;
}

.chips span:hover{

    transform:translateY(-3px);

    border-color:var(--y);

    color:var(--y);

    background:
        rgba(244,200,66,.06);
}


/* =========================================================
   REACH ART
   ========================================================= */

.reach-art{

    height:360px;

    position:relative;

    display:grid;

    place-items:center;

    border-radius:28px;

    overflow:hidden;

    background-image:
        linear-gradient(
            rgba(6,43,32,.68),
            rgba(6,43,32,.78)
        ),
        url("https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1600&q=85");

    background-size:cover;

    background-position:center;

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

.reach-core{

    width:200px;
    height:200px;

    border-radius:50%;

    background:
        rgba(6,43,32,.88);

    border:
        1px solid rgba(255,255,255,.3);

    backdrop-filter:blur(5px);

    display:flex;

    flex-direction:column;

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

    text-align:center;

    color:#fff;

    position:relative;

    z-index:5;

    box-shadow:
        0 15px 45px rgba(0,0,0,.28);
}

.reach-core small{

    font-size:9px;

    font-weight:800;

    letter-spacing:2px;
}

.reach-core b{

    display:block;

    margin:2px 0;

    font-family:"Manrope",sans-serif;

    font-size:46px;

    line-height:1;

    color:var(--y);
}

.reach-core span{

    font-size:9px;

    font-weight:800;

    letter-spacing:2px;
}


/* =========================================================
   REACH PULSE
   ========================================================= */

.reach-art>i{

    position:absolute;

    left:50%;
    top:50%;

    width:200px;
    height:200px;

    border:
        1px solid rgba(244,200,66,.35);

    border-radius:50%;

    transform:
        translate(-50%,-50%)
        scale(.2);

    opacity:0;

    animation:
        reachPulse
        5s
        ease-out
        infinite;
}

.reach-art>i:nth-of-type(1){
    animation-delay:0s;
}

.reach-art>i:nth-of-type(2){
    animation-delay:1.25s;
}

.reach-art>i:nth-of-type(3){
    animation-delay:2.5s;
}

.reach-art>i:nth-of-type(4){
    animation-delay:3.75s;
}

@keyframes reachPulse{

    0%{

        transform:
            translate(-50%,-50%)
            scale(.2);

        opacity:0;
    }

    10%{
        opacity:.65;
    }

    65%{
        opacity:.25;
    }

    100%{

        transform:
            translate(-50%,-50%)
            scale(2.4);

        opacity:0;
    }

}


/* =========================================================
   CTA
   ========================================================= */

.cta{

    background:var(--y);

    color:var(--gd);

    padding:78px 0;
}

.cta .eyebrow{
    color:var(--gd);
}

.cta h2{

    color:var(--gd);

    margin-bottom:15px;
}

.cta h2 em{
    color:var(--gd);
}

.cta p{

    max-width:650px;

    color:rgba(6,43,32,.72);

    font-size:14px;

    line-height:1.7;

    margin-bottom:24px;
}

.cta .btn.yellow{

    background:var(--gd);

    color:#fff;
}

.cta .btn.yellow:hover{
    background:var(--g);
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{

    background:#031c15;

    color:#fff;

    padding:58px 0 24px;
}

.footer-grid{

    display:grid;

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

    gap:60px;
}

footer .brand{
    margin-bottom:15px;
}

footer .brand-mark{

    background:var(--y);

    color:var(--gd);
}

footer .brand strong{
    color:#fff;
}

footer .brand small{
    color:#91a59c;
}

footer p{

    max-width:350px;

    color:rgba(255,255,255,.55);

    font-size:12px;

    line-height:1.7;
}

footer h4{

    margin-bottom:17px;

    color:var(--y);

    font-size:10px;

    letter-spacing:1.8px;

    text-transform:uppercase;
}

footer .footer-grid>div:not(:first-child) a{

    display:block;

    width:fit-content;

    margin-bottom:9px;

    color:rgba(255,255,255,.62);

    font-size:12px;

    transition:.2s ease;
}

footer .footer-grid>div:not(:first-child) a:hover{

    color:var(--y);

    transform:translateX(3px);
}

.footer-bottom{

    margin-top:45px;

    padding-top:20px;

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

    color:rgba(255,255,255,.38);

    font-size:10px;
}


/* =========================================================
   FLOATING BUTTONS
   ========================================================= */

.floating{

    position:fixed;

    right:20px;
    bottom:20px;

    z-index:2000;

    display:flex;

    flex-direction:column;

    gap:10px;
}

.floating .wa{

    width:48px;
    height:48px;

    border-radius:50%;

    display:grid;

    place-items:center;

    background:#25D366;

    color:#fff;

    box-shadow:
        0 8px 25px rgba(0,0,0,.22);

    transition:.25s ease;
}

.floating .wa svg{

    width:26px;
    height:26px;

    fill:#fff;

    display:block;
}

.floating .wa:hover{

    transform:
        translateY(-4px)
        scale(1.04);

    box-shadow:
        0 12px 30px rgba(0,0,0,.28);
}

#topBtn{

    width:48px;
    height:48px;

    border:0;

    border-radius:50%;

    background:var(--y);

    color:var(--gd);

    font-size:19px;

    font-weight:800;

    cursor:pointer;

    box-shadow:
        0 8px 25px rgba(0,0,0,.18);

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:.25s ease;
}

#topBtn.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
}

#topBtn:hover{

    transform:translateY(-4px);
}


/* =========================================================
   REVEAL
   ========================================================= */

.reveal{

    opacity:0;

    transform:translateY(18px);

    transition:
        opacity .65s ease,
        transform .65s ease;
}

.reveal.visible{

    opacity:1;

    transform:translateY(0);
}


/* =========================================================
   TABLET / SMALL LAPTOP
   <= 1100px
   ========================================================= */

@media(max-width:1100px){

    .container{

        width:
            min(
                100% - 36px,
                1000px
            );
    }

    .hero-grid{
        gap:40px;
    }

    .two-col{
        gap:45px;
    }

    .admissions-grid{
        gap:30px;
    }

    .pillar{

        min-height:190px;

        padding:17px;
    }

    .agency-art{

        height:400px;

        max-width:500px;
    }

}


/* =========================================================
   TABLET
   <= 900px
   ========================================================= */

@media(max-width:900px){

    .container{
        width:calc(100% - 36px);
    }


    /* ---------- NAV ---------- */

    .menu-toggle{
        display:block;
    }

    nav{

        position:absolute;

        top:78px;
        left:18px;
        right:18px;

        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:0;

        padding:10px;

        background:#fff;

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

        border-radius:14px;

        box-shadow:
            0 20px 45px rgba(0,0,0,.12);

        opacity:0;

        visibility:hidden;

        transform:
            translateY(-10px);

        transition:.25s ease;
    }

    nav.open{

        opacity:1;

        visibility:visible;

        transform:
            translateY(0);
    }

    nav a{

        padding:13px 14px;

        border-radius:8px;
    }

    nav a:hover{
        background:var(--gl);
    }

    nav .nav-button{

        text-align:center;

        margin-top:5px;
    }


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

    .hero{

        min-height:auto;

        padding:105px 0 55px;
    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:45px;
    }

    .hero-content{
        max-width:720px;
    }

    .hero-image-wrap{

        height:420px;

        min-height:420px;
    }

    .card-top{
        left:15px;
    }

    .card-bottom{
        right:15px;
    }


    /* ---------- NUMBERS ---------- */

    .number-grid{

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

    .number-grid>div:nth-child(2){
        border-right:0;
    }

    .number-grid>div{

        border-bottom:
            1px solid rgba(255,255,255,.12);
    }

    .number-grid>div:nth-child(3),
    .number-grid>div:nth-child(4){

        border-bottom:0;
    }


    /* ---------- FULL HEIGHT RESET ---------- */

    .about,
    .programs,
    .other-services,
    .reach,
    .cta{

        min-height:auto;

        display:block;
    }


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

    .two-col{

        grid-template-columns:1fr;

        gap:35px;
    }


    /* ---------- PILLARS ---------- */

    .pillar-grid{

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

    .pillar-grid .pillar:nth-child(-n+4),
    .pillar-grid .pillar:nth-child(n+5){

        grid-column:auto;
    }


    /* ---------- LEARNING ---------- */

    .learning-grid{

        grid-template-columns:1fr;

        gap:40px;
    }

    .learning-photo{
        height:380px;
    }


    /* ---------- PROGRAMS ---------- */

    .program-grid{

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


    /* ---------- SERVICES ---------- */

    .other-grid{

        grid-template-columns:1fr;

        max-width:650px;

        margin:0 auto;
    }


    /* ---------- ADMISSIONS ---------- */

    .admissions-grid{

        grid-template-columns:1fr;

        gap:45px;
    }

    .agency-art{

        width:100%;

        max-width:560px;

        height:400px;

        margin:0 auto;
    }


    /* ---------- REACH ---------- */

    .reach-grid{

        grid-template-columns:1fr;

        gap:40px;
    }

    .reach-art{
        height:340px;
    }


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

    .footer-grid{

        grid-template-columns:
            1fr 1fr;

        gap:40px;
    }

}


/* =========================================================
   MOBILE
   <= 600px
   ========================================================= */

@media(max-width:600px){

    .container{
        width:calc(100% - 28px);
    }


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

    .site-header{
        height:70px;
    }

    .nav-inner{
        height:70px;
    }

    nav{

        top:70px;

        left:14px;
        right:14px;
    }

    .brand-mark{

        width:35px;
        height:35px;
    }

    .brand strong{
        font-size:15px;
    }

    .brand small{
        font-size:6.5px;
    }


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

    .hero{

        padding:95px 0 45px;
    }

    h1{

        font-size:
            clamp(
                38px,
                11vw,
                52px
            );

        letter-spacing:-2.2px;
    }

    h2{

        font-size:
            clamp(
                30px,
                9vw,
                40px
            );

        letter-spacing:-1.5px;
    }

    .hero-content>p{

        font-size:14px;

        line-height:1.65;

        margin:17px 0 23px;
    }

    .actions{

        flex-direction:column;

        align-items:stretch;
    }

    .btn{

        width:100%;

        padding:13px 15px;
    }

    .hero-image-wrap{

        height:340px;

        min-height:340px;
    }

    .hero-image{
        border-radius:20px;
    }

    .image-card{
        padding:10px 12px;
    }

    .image-card b{
        font-size:21px;
    }

    .image-card span{
        font-size:7px;
    }

    .card-top{

        top:15px;

        left:10px;
    }

    .card-bottom{

        bottom:15px;

        right:10px;
    }


    /* ---------- NUMBERS ---------- */

    .number-grid{

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

    .number-grid>div{
        padding:18px 12px;
    }

    .number-grid b{
        font-size:24px;
    }

    .number-grid span{
        font-size:9px;
    }


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

    .section{
        padding:58px 0;
    }


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

    .lead{
        font-size:15px;
    }

    .vm{

        grid-template-columns:1fr;

        gap:22px;
    }


    /* ---------- PILLARS ---------- */

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

    .pillar{

        min-height:auto;

        padding:18px;
    }

    .pillar h3{
        font-size:16px;
    }


    /* ---------- LEARNING ---------- */

    .learning{

        padding-bottom:45px;
    }

    .learning-photo{

        height:300px;

        border-radius:19px;
    }

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

    .benefits>div{
        min-height:auto;
    }

    .green-bar{

        gap:12px;

        margin-top:28px;
    }

    .green-bar span{

        width:100%;

        margin-right:0;
    }


    /* ---------- PROGRAMS ---------- */

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

    .program{
        padding:20px;
    }


    /* ---------- SERVICES ---------- */

    .other-card{
        padding:21px;
    }


    /* ---------- ADMISSIONS ---------- */

    .admissions-grid{

        display:flex;

        flex-direction:column;

        gap:10px;
    }

    .admission-copy{
        width:100%;
    }

    .admission-numbers{

        grid-template-columns:1fr;
    }

    .admission-numbers div{

        display:flex;

        align-items:center;

        justify-content:space-between;

        gap:15px;
    }

    .admission-numbers b{
        font-size:16px;
    }

    .admission-numbers span{
        text-align:right;
    }


    /* =====================================================
       MOBILE AGENCY / CAMERA LENS
       ===================================================== */

    .agency-art{

        width:100%;

        max-width:360px;

        height:330px;

        --frame-w:165px;
        --frame-h:148px;
        --frame-scale:1.8;

        margin:5px auto 0;

        /*
           Keep everything centered.
        */

        display:flex;

        align-items:center;

        justify-content:center;

        overflow:visible;

    }


    /*
       Center card becomes smaller,
       but remains exactly in the center.
    */

    .agency-card{

        width:155px;

        height:140px;

        border-radius:10px;

        transform-style:preserve-3d;
    }

    .agency-card strong{
        font-size:35px;
    }

    .agency-card span{

        font-size:7px;

        letter-spacing:1.35px;
    }

    .agency-card::before{
        inset:7px;
    }


    /*
       IMPORTANT:
       Mobile layers ONLY change size.
       They keep:
           left:50%
           top:50%
           translate(-50%,-50%)

       Therefore they cannot drift away
       from the main card.
    */







    /* ---------- REACH ---------- */

    .reach{

        padding:58px 0;
    }

    .reach-art{

        height:300px;

        border-radius:20px;
    }

    .reach-core{

        width:165px;

        height:165px;
    }

    .reach-core b{
        font-size:38px;
    }

    .chips{
        gap:7px;
    }

    .chips span{

        padding:7px 10px;

        font-size:9px;
    }


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

    .cta{
        padding:58px 0;
    }


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

    .footer-grid{

        grid-template-columns:1fr;

        gap:32px;
    }

    .footer-bottom{
        margin-top:30px;
    }


    /* ---------- FLOATING ---------- */

    .floating{

        right:14px;

        bottom:14px;

        gap:8px;
    }

    .floating .wa,
    #topBtn{

        width:44px;

        height:44px;
    }

    .floating .wa svg{

        width:23px;

        height:23px;
    }

}


/* =========================================================
   VERY SMALL PHONES
   <= 380px
   ========================================================= */

@media(max-width:380px){

    .container{
        width:calc(100% - 22px);
    }

    h1{
        font-size:36px;
    }

    h2{
        font-size:29px;
    }

    .hero-image-wrap{

        height:300px;

        min-height:300px;
    }


    /* =====================================================
       SMALL PHONE AGENCY
       ===================================================== */

    .agency-art{

        width:100%;

        max-width:330px;

        height:300px;

        --frame-w:155px;
        --frame-h:138px;
        --frame-scale:1.65;

        margin:0 auto;

    }

    .agency-card{

        width:145px;

        height:130px;
    }

    .agency-card strong{
        font-size:32px;
    }

    .agency-card span{

        font-size:6.5px;

        letter-spacing:1.2px;
    }







}