:root {
    --paper:#FAFAF8;
    --paper2:#F1EEE4;
    --ink:#14171B;
    --slate:#5B6472;
    --line:#E3E0D4;
    --signal:#2F6F52;
    --signal2:#3D8565;
    --signal-dim:#E6F1EA;
    --white:#fff;
    --display:'Space Grotesk',system-ui,sans-serif;
    --body:'Inter',system-ui,sans-serif;
    --mono:'JetBrains Mono',monospace;
    --max:1160px;
    --radius:16px;
    --shadow:0 18px 50px -20px rgba(20,23,27,.25);
    --ease:cubic-bezier(.2,.8,.2,1)
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    line-height:1.65
}
body.modal-open {
    overflow:hidden
}
a {
    text-decoration:none;
    color:inherit
}
button {
    font:inherit;
    border:0;
    background:none;
    color:inherit;
    cursor:pointer
}
img {
    display:block;
    max-width:100%
}
.wrap {
    width:min(var(--max),calc(100% - 42px));
    margin:auto
}
.mono {
    font-family:var(--mono)
}
/* NAV */
.nav {
    position:fixed;
    z-index:50;
    left:0;
    right:0;
    top:0;
    height:76px;
    background:rgba(250,250,248,.86);
    backdrop-filter:blur(16px);
    border-bottom:1px solid transparent;
    transition:.35s var(--ease)
}
.nav.scrolled {
    border-color:var(--line);
    box-shadow:0 8px 30px rgba(20,23,27,.05)
}
.nav-inner {
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px
}
.brand {
    font:700 24px var(--display);
    letter-spacing:-.04em
}
.brand span {
    color:var(--signal)
}
.nav-links {
    display:flex;
    align-items:center;
    gap:23px
}
.nav-links a {
    font-size:12px;
    color:var(--slate);
    position:relative
}
.nav-links a:after {
    content:'';
    position:absolute;
    left:0;
    right:100%;
    bottom:-8px;
    height:2px;
    background:var(--signal);
    transition:.3s
}
.nav-links a:hover:after,.nav-links a.active:after {
    right:0
}
.nav-links a:hover,.nav-links a.active {
    color:var(--ink)
}
.nav-cta {
    padding:9px 15px;
    border:1px solid var(--signal);
    border-radius:999px;
    color:var(--signal)!important
}
.menu {
    display:none;
    font-size:25px
}
/* HERO */
.hero {
    min-height:100vh;
    display:grid;
    align-items:center;
    padding:125px 0 85px;
    background:radial-gradient(circle at 85% 20%,rgba(47,111,82,.08),transparent 30%),var(--paper);
    overflow:hidden;
    position:relative
}
.hero:before {
    content:'';
    position:absolute;
    right:-180px;
    top:130px;
    width:520px;
    height:520px;
    border:1px solid rgba(47,111,82,.14);
    border-radius:50%;
    box-shadow:0 0 0 65px rgba(47,111,82,.035),0 0 0 130px rgba(47,111,82,.02)
}
.hero-grid {
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:65px;
    align-items:center;
    position:relative;
    z-index:1
}
.eyebrow {
    font:11px var(--mono);
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--signal);
    margin:0 0 12px
}
.hero h1 {
    font:700 clamp(62px,8vw,108px)/.86 var(--display);
    letter-spacing:-.065em;
    margin:0
}
.hero h1 span {
    color:var(--signal)
}
.hero-lead {
    max-width:650px;
    color:var(--slate);
    font-size:18px;
    margin:28px 0
}
.hero-actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap
}
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:12px 18px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    transition:.3s var(--ease)
}
.btn-primary {
    background:var(--signal);
    color:white
}
.btn-primary:hover {
    background:var(--signal2);
    transform:translateY(-3px);
    box-shadow:var(--shadow)
}
.btn-outline {
    border:1px solid var(--line);
    background:white
}
.btn-outline:hover {
    border-color:var(--signal);
    color:var(--signal);
    transform:translateY(-3px)
}
.hero-portrait {
    height:530px;
    border-radius:26px;
    overflow:hidden;
    background:var(--paper2);
    border:1px solid var(--line);
    position:relative;
    box-shadow:var(--shadow)
}
.hero-portrait img {
    width:100%;
    height:100%;
    object-fit:cover
}
.portrait-fallback {
    height:100%;
    display:grid;
    place-items:center;
    font:700 140px var(--display);
    color:rgba(47,111,82,.12)
}
.hero-note {
    position:absolute;
    left:22px;
    bottom:22px;
    background:rgba(250,250,248,.92);
    border:1px solid var(--line);
    padding:13px 16px;
    border-radius:13px;
    box-shadow:0 10px 30px rgba(20,23,27,.08)
}
.hero-note strong {
    display:block;
    font:600 16px var(--display)
}
.hero-note small {
    font:10px var(--mono);
    color:var(--signal);
    text-transform:uppercase;
    letter-spacing:.08em
}
/* GENERAL */
.section {
    padding:110px 0
}
.section.alt {
    background:var(--paper2)
}
.section.dark {
    background:#15191d;
    color:white
}
.section-head {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:35px;
    margin-bottom:46px
}
.section-head>div {
    max-width:680px
}
.title {
    font:700 clamp(38px,5vw,65px)/.95 var(--display);
    letter-spacing:-.05em;
    margin:0
}
.sub {
    max-width:560px;
    color:var(--slate);
    font-size:15px
}
.dark .sub {
    color:#aab2ba
}
.rule {
    height:1px;
    background:var(--line);
    margin-top:20px
}
/* STATS */
.stats {
    background:var(--signal);
    color:white
}
.stats-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr)
}
.stat {
    text-align:center;
    padding:30px 15px;
    border-right:1px solid rgba(255,255,255,.18)
}
.stat:last-child {
    border-right:0
}
.stat b {
    font:700 48px var(--display)
}
.stat span {
    display:block;
    font:10px var(--mono);
    letter-spacing:.1em;
    text-transform:uppercase;
    opacity:.78
}
/* ABOUT */
.about-grid {
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:80px
}
.about-lead {
    font:500 26px/1.35 var(--display);
    letter-spacing:-.02em
}
.about-copy {
    color:var(--slate);
    font-size:15px
}
.about-list {
    list-style:none;
    padding:0;
    margin:28px 0 0
}
.about-list li {
    display:flex;
    gap:15px;
    padding:12px 0;
    border-bottom:1px solid var(--line);
    font-size:14px
}
.about-list b {
    font:10px var(--mono);
    color:var(--signal);
    width:80px;
    flex-shrink:0;
    text-transform:uppercase
}
/* ACHIEVEMENTS */
.achievement-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.achievement {
    min-height:350px;
    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden;
    position:relative;
    background:#25332c;
    text-align:left;
    isolation:isolate;
    transition:.5s var(--ease);
    box-shadow:0 10px 25px rgba(20,23,27,.04)
}
.achievement:hover {
    transform:translateY(-8px);
    box-shadow:0 28px 60px rgba(20,23,27,.16)
}
.achievement-photo {
    position:absolute;
    inset:0;
    z-index:-2;
    background:linear-gradient(135deg,#355542,#17251e)
}
.achievement-photo img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.7s var(--ease)
}
.achievement:hover img {
    transform:scale(1.06)
}
.achievement:after {
    content:'';
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(180deg,rgba(10,18,14,.08),rgba(10,18,14,.82) 82%)
}
.achievement-content {
    position:absolute;
    inset:auto 24px 23px;
    color:white
}
.achievement .mini {
    font:10px var(--mono);
    color:#d5eadc;
    letter-spacing:.1em;
    text-transform:uppercase
}
.achievement h3 {
    font:700 29px/1 var(--display);
    letter-spacing:-.04em;
    margin:10px 0 8px
}
.achievement p {
    font-size:13px;
    color:#d3dad5;
    margin:0;
    max-width:390px
}
.achievement-open {
    display:inline-block;
    margin-top:17px;
    font:10px var(--mono);
    color:white;
    letter-spacing:.08em;
    text-transform:uppercase
}
.achievement-open:after {
    content:'  ↗';
    color:#9ad0ae
}
/* PROJECTS */
.project-grid {
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:18px
}
.project {
    grid-column:span 4;
    background:white;
    border:1px solid var(--line);
    border-radius:18px;
    overflow:hidden;
    position:relative;
    text-align:left;
    transition:.4s var(--ease)
}
.project:nth-child(1),.project:nth-child(4) {
    grid-column:span 6
}
.project:hover {
    transform:translateY(-6px);
    box-shadow:var(--shadow);
    border-color:#c8d9ce
}
.project-photo {
    height:225px;
    background:var(--paper2);
    overflow:hidden
}
.project-photo img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.65s var(--ease)
}
.project:hover .project-photo img {
    transform:scale(1.06)
}
.fallback {
    height:100%;
    display:grid;
    place-items:center;
    color:rgba(47,111,82,.18);
    font:700 60px var(--display)
}
.project-body {
    padding:22px
}
.project-body small {
    font:10px var(--mono);
    color:var(--signal);
    letter-spacing:.1em;
    text-transform:uppercase
}
.project-body h3 {
    font:600 25px/1.05 var(--display);
    letter-spacing:-.035em;
    margin:9px 0
}
.project-body p {
    font-size:13.5px;
    color:var(--slate);
    margin:0
}
.project-arrow {
    position:absolute;
    right:18px;
    bottom:18px;
    width:34px;
    height:34px;
    border:1px solid var(--line);
    border-radius:50%;
    display:grid;
    place-items:center;
    color:var(--signal)
}
/* MOMENTS — natural masonry collage */
.moments {
    columns:3 280px;
    column-gap:14px;
    width:100%;
}
.moment {
    position:relative;
    display:block;
    width:100%;
    min-width:0;
    margin:0 0 14px;
    overflow:hidden;
    break-inside:avoid;
    border-radius:16px;
    background:var(--paper2);
    border:1px solid var(--line);
    box-shadow:0 8px 24px rgba(20,23,27,.04);
}
.moment img {
    display:block;
    width:100%;
    height:auto;
    max-height:none;
    object-fit:contain;
    background:var(--paper2);
    transition:transform .7s var(--ease),filter .7s var(--ease);
}
.moment:hover img {
    transform:scale(1.025);
    filter:saturate(1.04);
}
.moment-label {
    position:absolute;
    left:12px;
    bottom:12px;
    background:rgba(20,23,27,.75);
    color:white;
    border-radius:999px;
    padding:6px 10px;
    font:10px var(--mono);
    opacity:0;
    transform:translateY(5px);
    transition:.3s
}
.moment:hover .moment-label {
    opacity:1;
    transform:none
}
/* JOURNEY */
.journey {
    position:relative;
    max-width:950px
}
.journey:before {
    content:'';
    position:absolute;
    left:8px;
    top:8px;
    bottom:8px;
    width:1px;
    background:linear-gradient(var(--signal),rgba(47,111,82,.12))
}
.journey-item {
    display:grid;
    grid-template-columns:30px 110px 1fr;
    gap:22px;
    padding-bottom:45px;
    position:relative
}
.journey-dot {
    width:17px;
    height:17px;
    border:3px solid var(--signal);
    background:var(--paper);
    border-radius:50%;
    z-index:1
}
.dark .journey-dot {
    background:#15191d
}
.journey-year {
    font:10px var(--mono);
    color:var(--signal2);
    padding-top:3px
}
.dark .journey-year {
    color:#9ad0ae
}
.journey-item h3 {
    font:700 27px/1.05 var(--display);
    margin:0 0 7px;
    letter-spacing:-.03em
}
.journey-item p {
    color:var(--slate);
    font-size:14px;
    margin:0
}
.dark .journey-item p {
    color:#aab2ba
}
.journey-actions {
    margin-top:9px;
    display:flex;
    gap:12px;
    flex-wrap:wrap
}
.text-link {
    font:10px var(--mono);
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--signal)
}
.dark .text-link {
    color:#9ad0ae
}
/* EXPERIENCE */
.experience-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px
}
.experience-card {
    background:white;
    border:1px solid var(--line);
    border-radius:18px;
    padding:18px;
    display:grid;
    grid-template-columns:120px 1fr;
    gap:20px;
    transition:.4s var(--ease)
}
.experience-card:hover {
    transform:translateY(-5px);
    box-shadow:var(--shadow)
}
.experience-photo {
    height:120px;
    border-radius:12px;
    overflow:hidden;
    background:var(--paper2)
}
.experience-photo img {
    width:100%;
    height:100%;
    object-fit:cover
}
.experience-main small {
    font:10px var(--mono);
    color:var(--signal);
    letter-spacing:.08em;
    text-transform:uppercase
}
.experience-main h3 {
    font:600 23px/1.05 var(--display);
    margin:7px 0 3px
}
.experience-org {
    font-size:13px;
    color:var(--slate);
    font-weight:600
}
.experience-main p {
    font-size:13px;
    color:var(--slate);
    margin:10px 0
}
.experience-links {
    display:flex;
    gap:12px;
    flex-wrap:wrap
}
/* NEWS */
.news-grid {
    display:grid;
    grid-template-columns:1.25fr 1fr 1fr;
    gap:18px
}
.news-card {
    background:white;
    border:1px solid var(--line);
    border-radius:18px;
    overflow:hidden;
    text-align:left;
    transition:.4s var(--ease)
}
.news-card:hover {
    transform:translateY(-6px);
    box-shadow:var(--shadow)
}
.news-image {
    height:190px;
    background:var(--paper2);
    overflow:hidden
}
.news-image img {
    width:100%;
    height:100%;
    object-fit:cover
}
.news-body {
    padding:20px
}
.news-body small {
    font:10px var(--mono);
    color:var(--signal);
    letter-spacing:.1em;
    text-transform:uppercase
}
.news-body h3 {
    font:600 24px/1.05 var(--display);
    margin:9px 0
}
.news-body p {
    font-size:13px;
    color:var(--slate)
}
.news-more {
    font:10px var(--mono);
    color:var(--signal);
    text-transform:uppercase;
    letter-spacing:.08em
}
/* SKILLS */
.skills {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px
}
.skill-box {
    border:1px solid var(--line);
    border-radius:16px;
    padding:22px;
    background:white
}
.skill-box h3 {
    font:600 22px var(--display);
    margin:0 0 13px
}
.pill {
    display:inline-block;
    border:1px solid var(--line);
    border-radius:999px;
    padding:6px 10px;
    margin:3px;
    font-size:11px;
    color:var(--slate)
}
/* CONTACT */
.contact {
    background:#14191d;
    color:white
}
.contact-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px
}
.contact .sub {
    color:#aab2ba
}
.form {
    display:grid;
    gap:12px
}
.form input,.form textarea {
    width:100%;
    padding:13px 14px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:10px;
    background:rgba(255,255,255,.04);
    color:white;
    outline:none
}
.form textarea {
    min-height:145px;
    resize:vertical
}
.form input:focus,.form textarea:focus {
    border-color:#83b999
}
.status {
    font-size:12px;
    color:#9eb0a5
}
/* MODAL */
.modal {
    position:fixed;
    inset:0;
    z-index:100;
    background:rgba(20,23,27,.58);
    backdrop-filter:blur(12px);
    display:grid;
    place-items:center;
    padding:20px;
    opacity:0;
    pointer-events:none;
    transition:.3s
}
.modal.open {
    opacity:1;
    pointer-events:auto
}
.modal-panel {
    width:min(980px,100%);
    max-height:92vh;
    overflow:auto;
    background:var(--paper);
    border-radius:20px;
    box-shadow:0 40px 100px rgba(0,0,0,.28);
    transform:translateY(22px) scale(.985);
    transition:.4s var(--ease)
}
.modal.open .modal-panel {
    transform:none
}
.modal-head {
    padding:20px 24px 0;
    display:flex;
    justify-content:space-between;
    align-items:center
}
.modal-kicker {
    font:10px var(--mono);
    color:var(--signal);
    letter-spacing:.12em;
    text-transform:uppercase
}
.modal-close {
    width:38px;
    height:38px;
    border:1px solid var(--line);
    border-radius:50%;
    font-size:20px
}
.modal-content {
    padding:20px 24px 32px
}
.modal-content h2 {
    font:700 clamp(36px,6vw,62px)/.92 var(--display);
    letter-spacing:-.055em;
    margin:5px 0 15px
}
.modal-content>p {
    color:var(--slate);
    font-size:15px;
    max-width:760px
}
.modal-hero {
    width:100%;
    max-height:75vh;
    height:auto;
    min-height:360px;
    border-radius:15px;
    object-fit:contain;
    object-position:center;
    margin-bottom:22px;
    background:var(--paper2);
}

.modal-gallery {
    width:100%;
    overflow:hidden;
    margin:22px 0;
    position:relative;
}

.modal-gallery-track {
    display:flex;
    flex-direction:row;
    gap:10px;
    width:max-content;
    animation:gallerySlide 35s linear infinite;
}

.modal-gallery:hover .modal-gallery-track {
    animation-play-state:paused;
}

.modal-gallery button {
    flex:0 0 250px;
    width:250px;
    height:170px;
    border-radius:10px;
    overflow:hidden;
    background:var(--paper2);
    border:1px solid var(--line);
    padding:0;
    cursor:pointer;
}

.modal-gallery img {
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    background:var(--paper2);
    transition:transform .5s ease;
}

.modal-gallery button:hover img {
    transform:scale(1.04);
}

@keyframes gallerySlide {
    from {
        transform:translateX(0);
    }

    to {
        transform:translateX(-50%);
    }
}

/* ==========================================
   NEWS OF THIS JOURNEY — ACHIEVEMENT MODAL
   ========================================== */

.journey-news {
    margin-top:26px;
}

.journey-news-list {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:14px;
    align-items:stretch;
}

.journey-news-item {
    position:relative;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--paper2);
    padding:10px;
    min-width:0;
    transition:transform .3s ease, box-shadow .3s ease;
}

.journey-news-item:hover {
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(10,20,24,.08);
}

.journey-news-item h4 {
    margin:2px 4px 9px;
    font-size:.86rem;
    line-height:1.35;
}

.journey-news-frame {
    display:block;
    position:relative;
    height:150px;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--paper);
}

.journey-news-frame iframe {
    width:100%;
    height:100%;
    border:0;
    background:#fff;
    pointer-events:none;
}

.journey-news-overlay {
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
    padding:8px;
    background:linear-gradient(transparent 55%, rgba(10,20,24,.58));
    color:#fff;
    font-size:.68rem;
    font-weight:700;
    pointer-events:none;
}

.journey-news-open {
    display:block;
    margin-top:8px;
    padding:7px 9px;
    border-radius:7px;
    border:1px solid var(--line);
    font-size:.7rem;
    font-weight:700;
    text-align:center;
}

.journey-news-open:hover {
    background:var(--ink);
    color:#fff;
}

@media (max-width:700px) {
    .journey-news-list {
        grid-template-columns:1fr;
    }

    .journey-news-frame {
        height:180px;
    }
}

.resource-title {
    font:700 22px var(--display);
    margin:30px 0 12px
}
.resources {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px
}
.resource {
    border:1px solid var(--line);
    border-radius:12px;
    padding:13px;
    background:white;
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
    transition:.3s
}
.resource:hover {
    border-color:#b7d0bf;
    transform:translateY(-2px)
}
.resource small {
    display:block;
    color:var(--slate);
    font-size:11px
}
.resource strong {
    display:block;
    font-size:14px
}
.resource span {
    color:var(--signal)
}
.facts {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin-top:20px
}
.fact {
    border-top:1px solid var(--line);
    padding:12px 0
}
.fact b {
    display:block;
    font:10px var(--mono);
    color:var(--signal);
    text-transform:uppercase;
    letter-spacing:.08em
}
.fact span {
    display:block;
    margin-top:3px;
    font-size:14px
}
.modal-story {
    margin-top:25px;
    padding:18px;
    border-left:3px solid var(--signal);
    background:var(--signal-dim);
    color:#34453b;
    border-radius:0 12px 12px 0
}
.modal-story p {
    margin:0;
    color:#405148
}
/* FOOTER */
footer {
    padding:40px 0;
    background:#0f1418;
    color:#8d979f
}
.footer-grid {
    display:flex;
    justify-content:space-between;
    gap:25px;
    align-items:center
}
.footer-brand {
    font:600 22px var(--display);
    color:white
}
.socials {
    display:flex;
    gap:18px;
    font:10px var(--mono)
}
.socials a:hover {
    color:#9ad0ae
}
/* ANIMATION */
.reveal {
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s var(--ease),transform .7s var(--ease)
}
.reveal.show {
    opacity:1;
    transform:none
}
.d1 {
    transition-delay:.07s
}
.d2 {
    transition-delay:.14s
}
.d3 {
    transition-delay:.21s
}
.d4 {
    transition-delay:.28s
}
/* CINEMATIC MOTION LAYER */
html {
    scroll-behavior:auto
}
body:before {
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:9998;
    opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")
}
.page-progress {
    position:fixed;
    top:0;
    left:0;
    height:3px;
    width:0;
    background:linear-gradient(90deg,var(--signal),#9ad0ae,var(--signal));
    z-index:10000;
    box-shadow:0 0 18px rgba(47,111,82,.55)
}
.loader {
    position:fixed;
    inset:0;
    z-index:10001;
    background:var(--paper);
    display:grid;
    place-items:center;
    transition:opacity .55s var(--ease),visibility .55s;
    animation:loaderSafety .55s 1.8s forwards
}
.loader.hide {
    opacity:0;
    visibility:hidden;
    pointer-events:none
}
@keyframes loaderSafety {
    to {
        opacity:0;
        visibility:hidden;
        pointer-events:none
    }
}
.loader-inner {
    width:min(460px,80%);
    text-align:center
}
.loader-mark {
    font:700 64px/.9 var(--display);
    letter-spacing:-.07em
}
.loader-mark span {
    color:var(--signal)
}
.loader-line {
    height:1px;
    background:var(--line);
    margin:25px 0 13px;
    overflow:hidden
}
.loader-line:after {
    content:'';
    display:block;
    width:35%;
    height:100%;
    background:var(--signal);
    animation:loader 1.2s ease-in-out infinite
}
.loader-copy {
    font:10px var(--mono);
    color:var(--slate);
    letter-spacing:.16em;
    text-transform:uppercase
}
@keyframes loader {
    0% {
        transform:translateX(-120%)
    }
    100% {
        transform:translateX(360%)
    }
}
.cursor-dot,.cursor-ring {
    position:fixed;
    pointer-events:none;
    z-index:10000;
    border-radius:50%;
    display:none
}
.cursor-dot {
    width:6px;
    height:6px;
    background:var(--signal);
    transform:translate(-50%,-50%)
}
.cursor-ring {
    width:34px;
    height:34px;
    border:1px solid rgba(47,111,82,.45);
    transform:translate(-50%,-50%);
    transition:width .25s,height .25s,border-color .25s,background .25s
}
.cursor-ring.hover {
    width:62px;
    height:62px;
    background:rgba(47,111,82,.06);
    border-color:var(--signal)
}
@media(pointer:fine) {
    .cursor-dot,.cursor-ring {
        display:block
    }
}
.hero {
    perspective:1200px
}
.hero:after {
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,transparent 0 49.7%,rgba(47,111,82,.045) 50%,transparent 50.3%),linear-gradient(0deg,transparent 0 49.7%,rgba(47,111,82,.045) 50%,transparent 50.3%);
    background-size:80px 80px;
    mask-image:linear-gradient(to bottom,black,transparent 78%);
    opacity:.65;
    animation:gridDrift 16s linear infinite
}
@keyframes gridDrift {
    to {
        background-position:80px 80px
    }
}
.hero-grid {
    transform-style:preserve-3d
}
.hero h1 {
    animation:heroText 1s cubic-bezier(.16,1,.3,1) both
}
.hero-portrait {
    transform:translateZ(0);
    transition:transform .15s linear;
    will-change:transform
}
.hero-portrait:before {
    content:'';
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.16) 50%,transparent 70%);
    transform:translateX(-120%);
    animation:sweep 5.5s 1.2s infinite
}
@keyframes sweep {
    55%,100% {
        transform:translateX(120%)
    }
}
@keyframes heroText {
    from {
        opacity:0;
        transform:translateY(40px) scale(.97);
        filter:blur(8px)
    }
    to {
        opacity:1;
        transform:none;
        filter:none
    }
}
.section {
    position:relative;
    overflow:hidden
}
.section:before {
    content:attr(id);
    position:absolute;
    right:-20px;
    top:30px;
    font:700 clamp(90px,16vw,220px)/1 var(--display);
    letter-spacing:-.08em;
    color:rgba(47,111,82,.035);
    pointer-events:none
}
.section-head,.wrap {
    position:relative;
    z-index:1
}
.section-head .title {
    transition:letter-spacing .7s var(--ease)
}
.section-head:hover .title {
    letter-spacing:-.065em
}
.reveal {
    opacity:0;
    transform:translateY(38px) scale(.985);
    filter:blur(4px);
    transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)
}
.reveal.show {
    opacity:1;
    transform:none;
    filter:none
}
.stat {
    position:relative;
    overflow:hidden
}
.stat:before {
    content:'';
    position:absolute;
    inset:auto 0 0;
    height:2px;
    background:rgba(255,255,255,.5);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 1.2s var(--ease)
}
.stat.show:before {
    transform:scaleX(1)
}
.achievement,.project,.experience-card,.news-card,.skill-box,.moment {
    will-change:transform
}
.achievement:before,.project:before,.experience-card:before,.news-card:before {
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);
    transform:translateX(-130%);
    transition:transform .8s var(--ease);
    z-index:4
}
.achievement:hover:before,.project:hover:before,.experience-card:hover:before,.news-card:hover:before {
    transform:translateX(130%)
}
.achievement {
    transform-style:preserve-3d
}
.achievement:hover {
    transform:translateY(-10px) rotateX(1.5deg) rotateY(-1.5deg) scale(1.01)
}
.achievement-content {
    transform:translateZ(22px)
}
.project,.experience-card,.news-card,.skill-box {
    transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .35s
}
.project:hover,.experience-card:hover,.news-card:hover {
    transform:translateY(-10px) scale(1.008)
}
.moment {
    transition:transform .6s var(--ease),box-shadow .6s var(--ease)
}
.moment:hover {
    transform:translateY(-7px) scale(1.015);
    box-shadow:var(--shadow)
}
.journey-item {
    transition:transform .5s var(--ease)
}
.journey-item:hover {
    transform:translateX(10px)
}
.journey-dot {
    transition:transform .4s var(--ease),box-shadow .4s
}
.journey-item:hover .journey-dot {
    transform:scale(1.3);
    box-shadow:0 0 0 8px rgba(47,111,82,.1)
}
.social-placeholder {
    font:10px var(--mono);
    letter-spacing:.08em;
    text-transform:uppercase;
    border:1px dashed var(--line);
    color:#9aa2a8;
    background:rgba(255,255,255,.45);
    padding:8px 11px;
    border-radius:999px;
    cursor:help
}
.hero-socials {
    display:flex;
    gap:9px;
    flex-wrap:wrap;
    margin-top:24px
}
.hero-socials a {
    font:10px var(--mono);
    letter-spacing:.08em;
    text-transform:uppercase;
    border:1px solid var(--line);
    background:rgba(255,255,255,.72);
    padding:8px 11px;
    border-radius:999px;
    transition:.35s var(--ease)
}
.hero-socials a:hover {
    color:var(--signal);
    border-color:var(--signal);
    transform:translateY(-3px)
}
.social-dock {
    position:fixed;
    right:20px;
    bottom:22px;
    z-index:40;
    display:flex;
    flex-direction:column;
    gap:8px
}
.social-dock a {
    width:42px;
    height:42px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(250,250,248,.9);
    border:1px solid var(--line);
    box-shadow:0 12px 30px rgba(20,23,27,.12);
    font:10px var(--mono);
    transition:.35s var(--ease)
}
.social-dock a:hover {
    background:var(--signal);
    color:white;
    transform:translateX(-5px) scale(1.08)
}
.news-card {
    position:relative
}
.news-live {
    position:absolute;
    right:13px;
    top:13px;
    z-index:3;
    padding:6px 9px;
    border-radius:999px;
    background:rgba(250,250,248,.92);
    border:1px solid var(--line);
    font:9px var(--mono);
    color:var(--signal);
    letter-spacing:.08em;
    text-transform:uppercase
}
.news-live:before {
    content:'';
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--signal);
    margin-right:6px;
    animation:pulse 1.5s infinite
}
@keyframes pulse {
    50% {
        opacity:.3;
        transform:scale(.7)
    }
}
.news-preview {
    width:100%;
    height:430px;
    border:1px solid var(--line);
    border-radius:15px;
    overflow:hidden;
    background:white;
    margin:0 0 22px;
    position:relative
}
.news-preview iframe {
    width:100%;
    height:100%;
    border:0;
    background:white
}
.news-preview-fallback {
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    text-align:center;
    padding:30px;
    background:var(--paper2);
    z-index:-1
}
.news-preview-fallback strong {
    font:600 25px var(--display)
}
.mentor {
    background:linear-gradient(120deg,#e8f1eb 0%,#fafaf8 50%,#edf0ea 100%)
}
.mentor-grid {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:60px;
    align-items:start
}
.mentor-card {
    background:white;
    border:1px solid var(--line);
    border-radius:22px;
    padding:25px;
    box-shadow:var(--shadow)
}
.mentor-form {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}
.mentor-form textarea,.mentor-form input,.mentor-form select {
    width:100%;
    padding:13px 14px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    color:var(--ink);
    outline:none;
    font:14px var(--body);
    transition:.3s
}
.mentor-form textarea {
    min-height:130px;
    resize:vertical;
    grid-column:1/-1
}
.mentor-form .full {
    grid-column:1/-1
}
.mentor-form input:focus,.mentor-form textarea:focus,.mentor-form select:focus {
    border-color:var(--signal);
    box-shadow:0 0 0 4px rgba(47,111,82,.08)
}
.mentor-meta {
    display:grid;
    gap:12px;
    margin-top:25px
}
.mentor-meta div {
    padding:14px 0;
    border-top:1px solid var(--line)
}
.mentor-meta b {
    font:10px var(--mono);
    color:var(--signal);
    text-transform:uppercase;
    letter-spacing:.08em
}
.mentor-meta span {
    display:block;
    font-size:13px;
    color:var(--slate);
    margin-top:3px
}
.modal-panel {
    border:1px solid rgba(255,255,255,.2);
    transform:translateY(35px) scale(.96);
    opacity:.85
}
.modal.open .modal-panel {
    transform:none;
    opacity:1
}
.modal-content {
    animation:modalIn .65s var(--ease)
}
@keyframes modalIn {
    from {
        opacity:0;
        transform:translateY(18px)
    }
    to {
        opacity:1;
        transform:none
    }
}
.resource {
    position:relative;
    overflow:hidden
}
.resource:after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(47,111,82,.08),transparent);
    transform:translateX(-120%);
    transition:.6s
}
.resource:hover:after {
    transform:translateX(120%)
}
.footer-socials {
    display:flex;
    gap:9px;
    flex-wrap:wrap;
    margin-top:15px
}
.footer-socials a {
    border:1px solid rgba(255,255,255,.13);
    border-radius:999px;
    padding:7px 10px;
    font:10px var(--mono);
    transition:.3s
}
.footer-socials a:hover {
    border-color:#83b999;
    color:#9ad0ae;
    transform:translateY(-2px)
}
@media(max-width:950px) {
    .mentor-grid {
        grid-template-columns:1fr
    }
    .social-dock {
        display:none
    }
}
@media(max-width:650px) {
    .mentor-form {
        grid-template-columns:1fr
    }
    .mentor-form textarea,.mentor-form .full {
        grid-column:auto
    }
    .news-preview {
        height:300px
    }
}
@media(max-width:950px) {
    .nav-links {
        display:none
    }
    .menu {
        display:block
    }
    .nav-links.mobile {
        position:absolute;
        left:15px;
        right:15px;
        top:68px;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        background:var(--paper);
        border:1px solid var(--line);
        padding:12px;
        border-radius:14px;
        box-shadow:var(--shadow)
    }
    .nav-links.mobile a {
        padding:9px
    }
    .hero-grid,.about-grid,.contact-grid {
        grid-template-columns:1fr
    }
    .hero-portrait {
        height:440px
    }
    .achievement-grid {
        grid-template-columns:1fr 1fr
    }
    .project {
        grid-column:span 6!important
    }
    .skills {
        grid-template-columns:1fr 1fr
    }
    .news-grid {
        grid-template-columns:1fr 1fr
    }
    .news-card:first-child {
        grid-column:span 2
    }
    .experience-grid {
        grid-template-columns:1fr
    }
}
@media(max-width:650px) {
    .wrap {
        width:min(var(--max),calc(100% - 30px))
    }
    .hero {
        padding-top:105px
    }
    .hero h1 {
        font-size:66px
    }
    .hero-portrait {
        height:380px
    }
    .section {
        padding:82px 0
    }
    .section-head {
        display:block;
        margin-bottom:34px
    }
    .stats-grid {
        grid-template-columns:1fr 1fr
    }
    .stat:nth-child(2) {
        border-right:0
    }
    .stat:nth-child(3),.stat:nth-child(4) {
        border-top:1px solid rgba(255,255,255,.18)
    }
    .achievement-grid,.skills,.news-grid {
        grid-template-columns:1fr
    }
    .news-card:first-child {
        grid-column:auto
    }
    .project {
        grid-column:span 12!important
    }
    .moments {
        columns:2 180px;
        column-gap:10px;
    }
    .moment {
        margin-bottom:10px;
        border-radius:13px;
    }
    .journey:before {
        left:7px
    }
    .journey-item {
        grid-template-columns:25px 65px 1fr;
        gap:12px
    }
    .journey-item h3 {
        font-size:23px
    }
    .experience-card {
        grid-template-columns:1fr
    }
    .experience-photo {
        height:180px
    }
    .modal-gallery {
        grid-template-columns:repeat(2,1fr)
    }
    .resources,.facts {
        grid-template-columns:1fr
    }
    .modal-hero {
        height:230px
    }
    .footer-grid {
        display:block
    }
    .socials {
        margin-top:18px;
        flex-wrap:wrap
    }
}

/* =====================================================
   FINAL COMPACT LAYOUT + MEDIA DETAILS
   ===================================================== */
.section {
    padding:78px 0;
}
.section-head {
    margin-bottom:32px;
    gap:24px;
}
.title {
    font-size:clamp(34px,4.2vw,54px);
}
.sub {
    font-size:14px;
    line-height:1.55;
}
.achievement {
    min-height:300px;
}
.achievement-content {
    inset:auto 19px 19px;
}
.achievement h3 {
    font-size:25px;
}
.project-photo {
    height:190px;
}
.project-body {
    padding:18px;
}
.project-body h3 {
    font-size:22px;
}
.experience-card {
    padding:15px;
}
.experience-photo {
    height:105px;
}
.experience-main h3 {
    font-size:21px;
}
.skill-box {
    padding:18px;
}
.skill-box h3 {
    font-size:20px;
}
.mentor-grid,
.contact-grid {
    gap:42px;
}
.mentor-card {
    padding:20px;
}
.modal-content {
    padding:18px 22px 28px;
}
.modal-content h2 {
    font-size:clamp(32px,5vw,52px);
}
.modal-hero {
    min-height:280px;
    max-height:68vh;
}
.modal-gallery-track {
    animation-duration:var(--gallery-duration,35s);
}
.modal-gallery button {
    flex-basis:220px;
    width:220px;
    height:145px;
}
.moment-iframe-modal {
    width:100%;
    height:430px;
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    background:white;
    margin-bottom:22px;
}
.moment-iframe-modal iframe {
    width:100%;
    height:100%;
    border:0;
}
.moment-embed {
    position:relative;
}
.moment-embed iframe {
    width:100%;
    height:100%;
    min-height:100%;
    border:0;
    background:white;
}
.moment-label.always {
    opacity:1;
    transform:none;
}
.hero-socials a,
.social-dock a {
    display:grid;
    place-items:center;
}
.hero-socials a {
    width:38px;
    height:38px;
    padding:8px;
}
.hero-socials svg,
.social-dock svg {
    width:18px;
    height:18px;
}
.social-dock a {
    width:40px;
    height:40px;
}
@media (max-width:800px) {
    .section {
        padding:64px 0;
    }
    .modal-gallery button {
        flex-basis:190px;
        width:190px;
        height:130px;
    }
}
@media (max-width:500px) {
    .section {
        padding:54px 0;
    }
    .modal-gallery button {
        flex-basis:170px;
        width:170px;
        height:120px;
    }
    .moment-iframe-modal {
        height:330px;
    }
}


/* PROFESSIONAL FOOTER + THEME SYSTEM */
:root{--theme-accent:#2F6F52}
body{transition:background .3s var(--ease),color .3s var(--ease)}
.nav-controls{display:flex;align-items:center;gap:12px}
.theme-toggle{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.72);font:10px var(--mono);letter-spacing:.06em;text-transform:uppercase;transition:.3s var(--ease)}
.theme-toggle:hover{border-color:var(--signal);color:var(--signal);transform:translateY(-2px)}
.theme-icon{font-size:16px;line-height:1}
.site-footer{padding:0;background:#0f1418;color:#aeb7bd}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1.25fr 1fr;gap:38px;padding:58px 0 42px}
.footer-brand{font:600 24px var(--display);color:#fff}
.footer-intro p{max-width:410px;font-size:13px;line-height:1.7;margin:10px 0 15px}
.footer-email{font:12px var(--mono);color:#cf9d7b;word-break:break-word}
.footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.footer-label{margin-bottom:4px;color:#fff;font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.footer-column>a{font-size:13px;transition:.25s}
.footer-column>a:hover,.footer-email:hover{color:#fff}
.footer-action{padding:9px 14px;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#fff;font:10px var(--mono);letter-spacing:.07em;text-transform:uppercase;transition:.3s;background:transparent}
.footer-action:hover{border-color:#CF9D7B;color:#CF9D7B;transform:translateY(-2px)}
.footer-link-btn{padding:0;color:inherit;font-size:13px;text-align:left}
.footer-legal-note{font-size:11px;line-height:1.6;color:#77828a;margin:5px 0 0;max-width:230px}
.footer-socials{display:flex;gap:8px;flex-wrap:wrap}
.footer-socials a{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.15);border-radius:50%;transition:.3s}
.footer-socials a:hover{border-color:#cf9d7b;color:#cf9d7b;transform:translateY(-3px)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding:20px 0;border-top:1px solid rgba(255,255,255,.09);font-size:11px;color:#77828a}
.legal-section{padding:72px 0;background:var(--paper2);border-top:1px solid var(--line)}
.legal-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px}
.legal-section h2{font:600 clamp(32px,4vw,48px)/1 var(--display);letter-spacing:-.045em;margin:0}
.legal-copy h3{font:600 18px var(--display);margin:0 0 7px}
.legal-copy p{margin:0 0 24px;color:var(--slate);font-size:13px}
html[data-theme="dark"]{color-scheme:dark;--paper:#0C1519;--paper2:#162127;--ink:#F2EEE9;--slate:#B8C0C2;--line:#3A3534;--signal:#CF9D7B;--signal2:#E0B18F;--signal-dim:#243136;--white:#162127;--shadow:0 18px 50px -20px rgba(0,0,0,.65)}
html[data-theme="dark"] body{background:#0C1519;color:#F2EEE9}
html[data-theme="dark"] .nav{background:rgba(12,21,25,.88)}
html[data-theme="dark"] .btn-outline,html[data-theme="dark"] .project,html[data-theme="dark"] .experience-card,html[data-theme="dark"] .news-card,html[data-theme="dark"] .skill-box,html[data-theme="dark"] .resource,html[data-theme="dark"] .mentor-card{background:#162127}
html[data-theme="dark"] .hero{background:radial-gradient(circle at 85% 20%,rgba(207,157,123,.10),transparent 30%),#0C1519}
html[data-theme="dark"] .hero:before{border-color:rgba(207,157,123,.18);box-shadow:0 0 0 65px rgba(207,157,123,.035),0 0 0 130px rgba(207,157,123,.02)}
html[data-theme="dark"] .theme-toggle{background:#162127}
html[data-theme="dark"] .section.alt,html[data-theme="dark"] .legal-section{background:#162127}
html[data-theme="dark"] .mentor{background:linear-gradient(120deg,#162127,#0C1519 55%,#3A3534)}
html[data-theme="dark"] .mentor-form textarea,html[data-theme="dark"] .mentor-form input,html[data-theme="dark"] .mentor-form select{background:#0C1519;color:#F2EEE9}
html[data-theme="dark"] .modal-panel{background:#162127}
html[data-theme="dark"] .moment,html[data-theme="dark"] .journey-news-item{background:#162127}
html[data-theme="dark"] .hero-note{background:rgba(22,33,39,.92)}
html[data-theme="dark"] .site-footer{background:#0C1519}
@media(max-width:950px){.footer-top{grid-template-columns:1.5fr 1fr 1fr}.footer-intro{grid-column:1/-1}.legal-grid{grid-template-columns:1fr}}

@media(max-width:650px){.theme-text{display:none}.theme-toggle{padding:8px 10px}.footer-top{grid-template-columns:1fr 1fr;gap:28px}.footer-intro{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom small{display:block;margin:5px 0}.legal-section{padding:54px 0}}

/* FINAL VISUAL REFINEMENT — CONSISTENCY, HIERARCHY & FOOTER */
.section-head{align-items:flex-end}.section-head .eyebrow{margin-bottom:10px}.title{max-width:760px}.sub{margin:12px 0 0}
.section.alt{border-top:1px solid rgba(20,23,27,.025);border-bottom:1px solid rgba(20,23,27,.025)}
.project,.experience-card,.news-card,.skill-box,.mentor-card{box-shadow:0 8px 26px rgba(20,23,27,.035)}
.project:hover,.experience-card:hover,.news-card:hover{border-color:rgba(47,111,82,.35)}
.achievement,.project,.experience-card,.news-card,.skill-box,.mentor-card{border-radius:18px}
.site-footer{position:relative;overflow:hidden;background:linear-gradient(135deg,#0c1114 0%,#10181d 55%,#0c1114 100%);color:#aab4ba}
.site-footer:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 8% 0%,rgba(207,157,123,.11),transparent 27%),radial-gradient(circle at 100% 100%,rgba(47,111,82,.12),transparent 30%)}
.site-footer .wrap{position:relative;z-index:1}
.footer-top{grid-template-columns:1.7fr .8fr 1.25fr 1fr;gap:46px;padding:68px 0 48px}
.footer-intro{padding-right:14px}.footer-brand{font-size:26px;letter-spacing:-.045em}.footer-brand:after{content:'';display:block;width:42px;height:2px;margin-top:14px;background:linear-gradient(90deg,#CF9D7B,transparent)}
.footer-intro p{margin-top:16px;color:#8e9aa1;font-size:13px;line-height:1.8}
.footer-label{color:#fff;font-size:9px;letter-spacing:.16em;margin-bottom:9px}.footer-column{gap:11px}.footer-column>a,.footer-link-btn{color:#9da8ae;font-size:13px;transition:color .25s,transform .25s}.footer-column>a:hover,.footer-link-btn:hover{color:#fff;transform:translateX(3px)}
.footer-connect-copy{font-size:12px;line-height:1.6;color:#7e8a91;margin:0 0 3px;max-width:270px}
.footer-socials-primary{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.footer-socials-primary #footerSocials{display:flex;gap:8px;flex-wrap:wrap}.footer-socials-primary a,.footer-socials-primary #footerSocials a{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:50%;color:#b8c1c5;background:rgba(255,255,255,.025);transition:.3s var(--ease)}
.footer-socials-primary a:hover,.footer-socials-primary #footerSocials a:hover{border-color:#CF9D7B;color:#CF9D7B;background:rgba(207,157,123,.08);transform:translateY(-3px)}
.footer-socials-primary svg{width:17px;height:17px}.footer-email{font:11px var(--mono);letter-spacing:.015em;color:#CF9D7B!important;padding:3px 0}.footer-email:hover{color:#f1c4a4!important;transform:none!important}
.footer-action{margin-top:3px;display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border-color:rgba(207,157,123,.38);background:rgba(207,157,123,.06);color:#f3eee9}.footer-action span{font-size:14px;transition:transform .25s}.footer-action:hover{background:rgba(207,157,123,.12)}.footer-action:hover span{transform:translate(2px,-2px)}
.footer-legal{padding-left:4px}.footer-legal-note{margin-top:8px;color:#707c83;max-width:220px}.footer-bottom{padding:22px 0 26px;color:#66737a}.footer-bottom small:last-child{letter-spacing:.02em}
html[data-theme="dark"] .section.alt{border-color:rgba(255,255,255,.025)}html[data-theme="dark"] .project:hover,html[data-theme="dark"] .experience-card:hover,html[data-theme="dark"] .news-card:hover{border-color:rgba(207,157,123,.38)}html[data-theme="dark"] .site-footer{background:linear-gradient(135deg,#091116,#0C1519 58%,#10191d)}
@media(max-width:950px){.footer-top{grid-template-columns:1.3fr 1fr 1.15fr;gap:34px}.footer-intro{grid-column:1/-1;padding-right:0}.footer-intro p{max-width:600px}.footer-legal{padding-left:0}}
@media(max-width:650px){.footer-top{grid-template-columns:1fr;gap:30px;padding:50px 0 32px}.footer-intro{grid-column:auto}.footer-brand{font-size:24px}.footer-column{gap:9px}.footer-bottom{padding:17px 0 22px}.footer-bottom small:last-child{margin-top:8px}.footer-socials-primary a,.footer-socials-primary #footerSocials a{width:36px;height:36px}}