/* ==========================================================
   ABOUT PAGE
   Darpan Mishra — Personal Brand
========================================================== */


/* ==========================================================
   ABOUT PAGE HERO
========================================================== */

.about-page-hero{
    position:relative;

    padding:105px 0 115px;

    overflow:hidden;

    isolation:isolate;
}

.about-page-hero::before{
    content:"";

    position:absolute;

    width:520px;
    height:520px;

    right:-220px;
    top:-180px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(200,161,74,.10),
            transparent 70%
        );

    filter:blur(25px);

    pointer-events:none;

    z-index:-1;
}

.about-hero-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(430px,.95fr);

    gap:70px;

    align-items:center;
}


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

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

.about-page-label{
    display:block;

    margin-bottom:18px;

    color:var(--accent);

    font-size:.70rem;
    font-weight:800;

    letter-spacing:2.5px;

    text-transform:uppercase;
}

.about-hero-content h1{
    margin:0 0 28px;

    max-width:720px;

    color:var(--text-primary);

    font-size:
        clamp(3.4rem,5vw,5.7rem);

    line-height:.98;

    letter-spacing:-.065em;
}

.about-hero-content h1 span{
    display:block;

    color:var(--accent);
}

.about-hero-lead{
    max-width:650px;

    margin:0;

    color:var(--text-secondary);

    font-size:1rem;

    line-height:1.85;
}

.about-hero-actions{
    display:flex;

    align-items:center;

    gap:12px;

    margin-top:32px;
}

.about-primary-btn,
.about-secondary-btn{
    display:inline-flex;

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

    gap:11px;

    min-height:46px;

    padding:0 20px;

    border-radius:999px;

    font-size:.70rem;
    font-weight:700;

    text-decoration:none;

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

.about-primary-btn{
    background:var(--accent);

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

    color:#111;
}

.about-primary-btn:hover{
    transform:translateY(-2px);

    background:#E2BC4D;
}

.about-primary-btn span{
    transition:transform .3s ease;
}

.about-primary-btn:hover span{
    transform:translateX(4px);
}

.about-secondary-btn{
    background:transparent;

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

    color:var(--text-primary);
}

.about-secondary-btn:hover{
    transform:translateY(-2px);

    border-color:var(--accent);

    color:var(--accent);
}


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

.about-hero-visual{
    position:relative;

    min-height:600px;

    display:flex;

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

.about-portrait-wrap{
    position:relative;

    width:500px;
    height:570px;

    display:flex;

    align-items:flex-end;
    justify-content:center;
}

.about-portrait-glow{
    position:absolute;

    width:430px;
    height:430px;

    left:50%;
    bottom:40px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(200,161,74,.20),
            rgba(200,161,74,.06) 48%,
            transparent 72%
        );

    filter:blur(10px);

    z-index:-2;
}

.about-portrait-ring{
    position:absolute;

    width:445px;
    height:445px;

    left:50%;
    bottom:50px;

    transform:translateX(-50%);

    border:1px solid rgba(200,161,74,.28);

    border-radius:50%;

    z-index:-1;
}

.about-page-portrait{
    position:relative;

    width:450px;
    height:550px;

    display:block;

    object-fit:contain;
    object-position:center bottom;

    z-index:2;
}


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

.about-experience-card{
    position:absolute;

    right:0;
    bottom:85px;

    width:145px;
    min-height:125px;

    padding:20px;

    display:flex;
    flex-direction:column;

    justify-content:center;

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

    border-radius:20px;

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

    box-shadow:
        0 20px 50px rgba(15,23,42,.10);

    backdrop-filter:blur(15px);

    z-index:5;
}

.about-experience-card strong{
    display:block;

    margin-bottom:7px;

    color:var(--accent);

    font-size:2.6rem;

    line-height:1;

    font-weight:800;
}

.about-experience-card span{
    color:var(--text-secondary);

    font-size:.70rem;

    line-height:1.4;
}


/* ==========================================================
   INTRODUCTION
========================================================== */

.about-introduction{
    position:relative;

    padding:120px 0;

    background:var(--surface-soft);

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

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

.about-intro-grid{
    display:grid;

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

    gap:80px;
}

.about-intro-label{
    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    padding-top:10px;
}

.about-intro-label span{
    color:var(--accent);

    font-size:.65rem;

    font-weight:800;

    letter-spacing:2px;
}

.about-intro-label strong{
    color:var(--accent);

    font-size:.70rem;

    letter-spacing:1px;
}

.about-intro-content{
    max-width:800px;
}

.about-intro-content h2{
    margin:0 0 35px;

    color:var(--text-primary);

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

    line-height:1.02;

    letter-spacing:-.055em;
}

.about-intro-content h2 span{
    display:block;

    color:var(--accent);
}

.about-intro-content p{
    max-width:730px;

    margin:0 0 18px;

    color:var(--text-secondary);

    font-size:.94rem;

    line-height:1.85;
}


/* ==========================================================
   COMMON SECTION HEADING
========================================================== */

.about-section-heading{
    max-width:760px;

    margin-bottom:55px;
}

.about-section-heading > span{
    display:block;

    margin-bottom:15px;

    color:var(--accent);

    font-size:.68rem;

    font-weight:800;

    letter-spacing:2.5px;

    text-transform:uppercase;
}

.about-section-heading h2{
    margin:0 0 18px;

    color:var(--text-primary);

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

    line-height:1;

    letter-spacing:-.055em;
}

.about-section-heading h2 span{
    display:block;

    color:var(--accent);
}

.about-section-heading p{
    max-width:620px;

    margin:0;

    color:var(--text-secondary);

    font-size:.88rem;

    line-height:1.75;
}


/* ==========================================================
   PHILOSOPHY
========================================================== */

.about-philosophy{
    padding:125px 0;
}

.philosophy-grid{
    display:grid;

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

    gap:15px;
}

.philosophy-card{
    position:relative;

    min-height:255px;

    padding:30px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

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

    border-radius:20px;

    background:var(--surface);

    overflow:hidden;

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

.philosophy-card::after{
    content:"";

    position:absolute;

    width:180px;
    height:180px;

    right:-90px;
    bottom:-100px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(200,161,74,.10),
            transparent 70%
        );

    pointer-events:none;
}

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

    border-color:rgba(200,161,74,.45);

    box-shadow:
        0 20px 45px rgba(15,23,42,.07);
}

.philosophy-number{
    color:var(--accent);

    font-size:.68rem;

    font-weight:800;

    letter-spacing:2px;
}

.philosophy-card h3{
    margin:0 0 13px;

    color:var(--text-primary);

    font-size:1.25rem;

    line-height:1.25;
}

.philosophy-card p{
    max-width:560px;

    margin:0;

    color:var(--text-secondary);

    font-size:.78rem;

    line-height:1.75;
}


/* ==========================================================
   WHAT I BRING
========================================================== */

.about-capabilities{
    padding:125px 0;

    background:var(--surface-soft);

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

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

.about-capabilities-grid{
    display:grid;

    grid-template-columns:
        minmax(280px,.75fr)
        minmax(0,1.25fr);

    gap:100px;

    align-items:start;
}

.about-capabilities-intro{
    position:sticky;

    top:110px;
}

.about-capabilities-intro > span{
    display:block;

    margin-bottom:15px;

    color:var(--accent);

    font-size:.68rem;

    font-weight:800;

    letter-spacing:2.5px;
}

.about-capabilities-intro h2{
    margin:0 0 20px;

    color:var(--text-primary);

    font-size:
        clamp(2.2rem,3.5vw,3.7rem);

    line-height:1.02;

    letter-spacing:-.05em;
}

.about-capabilities-intro p{
    max-width:430px;

    margin:0;

    color:var(--text-secondary);

    font-size:.85rem;

    line-height:1.8;
}


/* ==========================================================
   CAPABILITY LIST
========================================================== */

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

.capability-row{
    display:grid;

    grid-template-columns:60px 1fr;

    gap:20px;

    padding:27px 0;

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

    transition:
        padding-left .3s ease;
}

.capability-row:hover{
    padding-left:8px;
}

.capability-row > span{
    padding-top:3px;

    color:var(--accent);

    font-size:.66rem;

    font-weight:800;

    letter-spacing:1.5px;
}

.capability-row h3{
    margin:0 0 8px;

    color:var(--text-primary);

    font-size:1.05rem;
}

.capability-row p{
    max-width:650px;

    margin:0;

    color:var(--text-secondary);

    font-size:.76rem;

    line-height:1.7;
}


/* ==========================================================
   PERSONAL APPROACH
========================================================== */

.about-approach{
    padding:125px 0;
}

.approach-box{
    position:relative;

    overflow:hidden;

    padding:75px 80px;

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            #111827,
            #0C1321
        );

    border:1px solid #263247;

    box-shadow:
        0 25px 60px rgba(15,23,42,.10);
}

.approach-box::after{
    content:"";

    position:absolute;

    width:450px;
    height:450px;

    right:-180px;
    top:-240px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.13),
            transparent 70%
        );

    pointer-events:none;
}

.approach-number{
    position:absolute;

    top:35px;
    right:40px;

    color:rgba(212,175,55,.60);

    font-size:.65rem;

    font-weight:800;

    letter-spacing:2px;
}

.approach-content{
    position:relative;

    z-index:1;

    max-width:850px;
}

.approach-content > span{
    display:block;

    margin-bottom:17px;

    color:var(--accent);

    font-size:.65rem;

    font-weight:800;

    letter-spacing:2.5px;
}

.approach-content h2{
    max-width:800px;

    margin:0 0 28px;

    color:#fff;

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

    line-height:1.03;

    letter-spacing:-.055em;
}

.approach-content p{
    max-width:700px;

    margin:0 0 15px;

    color:#AAB4C5;

    font-size:.85rem;

    line-height:1.8;
}


/* ==========================================================
   EXPERIENCE SNAPSHOT
========================================================== */

.about-experience{
    padding:125px 0;
}

.experience-snapshot-grid{
    display:grid;

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

    gap:14px;
}

.snapshot-card{
    min-height:185px;

    padding:27px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

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

    border-radius:19px;

    background:var(--surface);

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

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

    border-color:rgba(200,161,74,.45);
}

.snapshot-card strong{
    display:block;

    margin-bottom:10px;

    color:var(--accent);

    font-size:2.1rem;

    line-height:1;

    letter-spacing:-.04em;
}

.snapshot-card span{
    color:var(--text-secondary);

    font-size:.70rem;

    line-height:1.55;
}


/* ==========================================================
   PERSONAL NOTE
========================================================== */

.about-note{
    padding:125px 0;

    background:var(--surface-soft);

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

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

.about-note-inner{
    max-width:850px;

    margin:0 auto;

    text-align:center;
}

.about-note-inner > span{
    display:block;

    margin-bottom:18px;

    color:var(--accent);

    font-size:.66rem;

    font-weight:800;

    letter-spacing:2.5px;
}

.about-note-inner h2{
    margin:0 0 25px;

    color:var(--text-primary);

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

    line-height:1.02;

    letter-spacing:-.055em;
}

.about-note-inner h2 span{
    display:block;

    color:var(--accent);
}

.about-note-inner > p{
    max-width:680px;

    margin:0 auto;

    color:var(--text-secondary);

    font-size:.87rem;

    line-height:1.85;
}

.about-note-signature{
    margin-top:35px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;
}

.about-note-signature img{
    width:135px;
    height:50px;

    object-fit:contain;
}

.about-note-signature span{
    color:var(--text-secondary);

    font-size:.58rem;

    font-weight:700;

    letter-spacing:1.8px;
}


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

.about-final-cta{
    padding:100px 0 120px;
}

.about-final-box{
    position:relative;

    overflow:hidden;

    padding:80px 50px;

    border-radius:24px;

    text-align:center;

    background:
        linear-gradient(
            135deg,
            #111827,
            #0B1220
        );

    border:1px solid #263247;
}

.about-final-box::after{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    left:-200px;
    bottom:-260px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.12),
            transparent 70%
        );

    pointer-events:none;
}

.about-final-box > span{
    position:relative;

    z-index:1;

    display:block;

    margin-bottom:17px;

    color:var(--accent);

    font-size:.66rem;

    font-weight:800;

    letter-spacing:2.5px;
}

.about-final-box h2{
    position:relative;

    z-index:1;

    max-width:780px;

    margin:0 auto 20px;

    color:#fff;

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

    line-height:1.03;

    letter-spacing:-.055em;
}

.about-final-box h2 span{
    display:block;

    color:var(--accent);
}

.about-final-box > p{
    position:relative;

    z-index:1;

    max-width:620px;

    margin:0 auto;

    color:#AAB4C5;

    font-size:.84rem;

    line-height:1.75;
}

.about-final-actions{
    position:relative;

    z-index:1;

    display:flex;

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

    gap:12px;

    margin-top:32px;
}


/* ==========================================================
   DARK MODE
========================================================== */

html[data-theme="dark"] .about-experience-card{
    background:rgba(15,23,42,.90);

    border-color:#263247;

    box-shadow:
        0 20px 50px rgba(0,0,0,.28);
}

html[data-theme="dark"] .philosophy-card,
html[data-theme="dark"] .snapshot-card{
    background:#0F172A;

    border-color:#263247;
}

html[data-theme="dark"] .philosophy-card:hover,
html[data-theme="dark"] .snapshot-card:hover{
    border-color:rgba(212,175,55,.42);
}

html[data-theme="dark"] .about-introduction,
html[data-theme="dark"] .about-capabilities,
html[data-theme="dark"] .about-note{
    border-color:#263247;
}

html[data-theme="dark"] .about-capabilities{
    background:#0B1220;
}

html[data-theme="dark"] .about-introduction,
html[data-theme="dark"] .about-note{
    background:#0C1321;
}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    .about-page-hero *,
    .about-introduction *,
    .about-philosophy *,
    .about-capabilities *,
    .about-approach *,
    .about-experience *,
    .about-note *,
    .about-final-cta *{

        transition:none !important;

        animation:none !important;

    }

}

/* ==========================================================
   ABOUT PAGE — HEADER COMPATIBILITY FIX
========================================================== */

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


/* Existing global header ko override na karne do */

.site-header{
    position:relative;
    width:100%;
    z-index:1000;
}

.site-header .container{
    width:100%;
}

.header-inner{
    min-height:72px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;
}


/* Logo */

.site-logo{
    display:flex;

    align-items:center;

    flex:none;

    text-decoration:none;
}

.site-logo img{
    display:block;

    width:auto;

    height:auto;

    max-width:190px;
    max-height:48px;

    object-fit:contain;
}


/* Navigation */

.main-nav{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:30px;

    margin-left:auto;
}

.main-nav a{
    position:relative;

    color:var(--text-primary);

    font-size:.70rem;
    font-weight:600;

    text-decoration:none;

    white-space:nowrap;

    transition:color .25s ease;
}

.main-nav a:hover,
.main-nav a.active{
    color:var(--accent);
}

.main-nav a.active::after{
    content:"";

    position:absolute;

    left:0;
    right:0;

    bottom:-10px;

    width:100%;
    height:2px;

    margin:auto;

    background:var(--accent);

    border-radius:2px;
}


/* Header Actions */

.header-actions{
    display:flex;

    align-items:center;

    gap:12px;

    flex:none;
}

.theme-toggle{
    width:42px;
    height:42px;

    display:flex;

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

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

    border-radius:50%;

    background:var(--surface);

    color:var(--text-primary);

    cursor:pointer;
}

.header-connect{
    display:inline-flex;

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

    gap:10px;

    min-height:42px;

    padding:0 18px;

    border-radius:999px;

    background:#0B1220;

    color:#fff;

    font-size:.68rem;
    font-weight:700;

    text-decoration:none;
}

.header-connect span{
    color:var(--accent);
}


/* Mobile button */

.mobile-menu-toggle{
    display:none;

    width:42px;
    height:42px;

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

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

    border-radius:50%;

    background:var(--surface);

    color:var(--text-primary);

    cursor:pointer;
}


/* ==========================================================
   ABOUT HERO — DESKTOP BALANCE
========================================================== */

.about-hero-grid{
    min-height:590px;
}

.about-hero-content{
    padding-bottom:20px;
}

.about-hero-content h1{
    max-width:650px;
}

.about-hero-lead{
    max-width:590px;
}


/* ==========================================================
   ABOUT IMAGE — BETTER SCALE
========================================================== */

.about-hero-visual{
    min-height:580px;
}

.about-portrait-wrap{
    width:500px;
    height:560px;
}

.about-page-portrait{
    width:450px;
    height:540px;
}


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

@media (max-width:992px){

    .main-nav{
        gap:18px;
    }

    .main-nav a{
        font-size:.62rem;
    }

    .header-connect{
        padding:0 14px;

        font-size:.62rem;
    }

    .site-logo img{
        max-width:160px;
    }

    .about-hero-grid{
        grid-template-columns:
            minmax(0,1fr)
            minmax(320px,.8fr);

        gap:35px;
    }

}


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

@media (max-width:768px){

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

    .site-logo img{
        max-width:145px;
        max-height:40px;
    }

    .main-nav,
    .header-actions{
        display:none;
    }

    .mobile-menu-toggle{
        display:flex;
    }

    .about-page-hero{
        padding-top:60px;
    }

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

        gap:40px;

        text-align:left;
    }

    .about-hero-content{
        max-width:650px;
    }

    .about-hero-visual{
        min-height:440px;
    }

    .about-portrait-wrap{
        width:360px;
        height:420px;
    }

    .about-page-portrait{
        width:340px;
        height:410px;
    }

    .about-experience-card{
        right:10px;
        bottom:45px;

        width:120px;

        min-height:105px;

        padding:16px;
    }

    .about-experience-card strong{
        font-size:2.1rem;
    }

}


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

@media (max-width:576px){

    .site-logo img{
        max-width:135px;
    }

    .about-page-hero{
        padding-top:45px;
    }

    .about-hero-content h1{
        font-size:2.9rem;
    }

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

    .about-hero-actions{
        flex-wrap:wrap;
    }

    .about-hero-visual{
        min-height:390px;
    }

    .about-portrait-wrap{
        width:320px;
        height:380px;
    }

    .about-page-portrait{
        width:305px;
        height:370px;
    }

    .about-experience-card{
        right:0;
        bottom:35px;

        width:108px;

        min-height:95px;
    }

}

/* ==========================================================
   ABOUT HERO — FINAL SIZE & BALANCE FIX
========================================================== */

.about-page-hero{
    padding:75px 0 85px;

    min-height:auto;
}

.about-hero-grid{
    min-height:0;

    grid-template-columns:
        minmax(0,1fr)
        minmax(430px,.85fr);

    gap:55px;

    align-items:center;
}


/* ----------------------------------------------------------
   LEFT CONTENT
---------------------------------------------------------- */

.about-hero-content{
    max-width:620px;
}

.about-page-label{
    margin-bottom:14px;

    font-size:.62rem;
    letter-spacing:2.2px;
}

.about-hero-content h1{
    max-width:620px;

    margin-bottom:22px;

    font-size:
        clamp(3rem,4.3vw,4.65rem);

    line-height:.98;

    letter-spacing:-.06em;
}

.about-hero-lead{
    max-width:570px;

    font-size:.88rem;

    line-height:1.75;
}

.about-hero-actions{
    margin-top:25px;
}


/* ----------------------------------------------------------
   RIGHT IMAGE
---------------------------------------------------------- */

.about-hero-visual{
    min-height:470px;

    display:flex;

    align-items:flex-end;
    justify-content:center;
}

.about-portrait-wrap{
    width:450px;
    height:480px;
}

.about-portrait-ring{
    width:380px;
    height:380px;

    bottom:35px;
}

.about-portrait-glow{
    width:380px;
    height:380px;

    bottom:25px;
}

.about-page-portrait{
    width:400px;
    height:465px;
}

.about-experience-card{
    right:5px;
    bottom:55px;

    width:125px;
    min-height:110px;

    padding:17px;

    border-radius:17px;
}

.about-experience-card strong{
    font-size:2.25rem;
}


/* ==========================================================
   DESKTOP 1200+
========================================================== */

@media (min-width:1200px){

    .about-page-hero{
        padding-top:70px;
        padding-bottom:80px;
    }

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

    .about-hero-content h1{
        font-size:4.55rem;
    }

    .about-hero-visual{
        min-height:500px;
    }

}


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

@media (max-width:992px){

    .about-page-hero{
        padding:65px 0 75px;
    }

    .about-hero-grid{
        grid-template-columns:
            minmax(0,1fr)
            minmax(340px,.8fr);

        gap:30px;
    }

    .about-hero-content h1{
        font-size:3.4rem;
    }

    .about-hero-visual{
        min-height:430px;
    }

    .about-portrait-wrap{
        width:380px;
        height:440px;
    }

    .about-page-portrait{
        width:350px;
        height:425px;
    }

    .about-portrait-ring,
    .about-portrait-glow{
        width:330px;
        height:330px;
    }

}


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

@media (max-width:768px){

    .about-page-hero{
        padding:55px 0 65px;
    }

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

        gap:35px;
    }

    .about-hero-content h1{
        font-size:
            clamp(2.7rem,9vw,3.5rem);
    }

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

    .about-hero-visual{
        min-height:390px;
    }

    .about-portrait-wrap{
        width:340px;
        height:390px;
    }

    .about-page-portrait{
        width:315px;
        height:375px;
    }

    .about-portrait-ring,
    .about-portrait-glow{
        width:300px;
        height:300px;

        bottom:25px;
    }

    .about-experience-card{
        right:5px;
        bottom:30px;

        width:105px;
        min-height:92px;

        padding:14px;
    }

    .about-experience-card strong{
        font-size:1.9rem;
    }

}


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

@media (max-width:576px){

    .about-page-hero{
        padding:45px 0 55px;
    }

    .about-hero-content h1{
        font-size:2.75rem;
    }

    .about-hero-actions{
        gap:8px;
    }

    .about-primary-btn,
    .about-secondary-btn{
        min-height:42px;

        padding:0 16px;

        font-size:.64rem;
    }

}