/* ============================================================
   Teodora Casu — CV / Editorial
   Palette: paper white + royal blue accent
   ============================================================ */

:root{
    --ink:        #0d0d0d;
    --ink-soft:   #5a5750;
    --ink-mute:   #8a877f;
    --paper:      #ffffff;
    --paper-alt:  #f7f5ee;
    --blue:       #1d3a9e;
    --blue-deep:  #142a78;
    --blue-soft:  #e7ebf7;
    --num-gray:   #d8d4ca;
    --rule:       #e8e4d8;
    --rule-light: rgba(255,255,255,.22);

    --serif: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif;
    --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --max:        1280px;
    --gut:        clamp(20px, 4vw, 56px);
    --ease:       cubic-bezier(.65,.05,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

html, body{
    margin:0;
    padding:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-weight:400;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
}

body.no-scroll{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--blue); color:#fff; }

.ital{ font-style:italic; color:var(--blue); }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
    position:fixed; inset:0; z-index:9999;
    background:var(--paper);
    display:flex; align-items:center; justify-content:center;
    transition: opacity .8s var(--ease), visibility .8s var(--ease);
}
.preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader__inner{ text-align:center; padding:0 24px; }
.preloader__monogram{
    font-family:var(--serif);
    font-size:clamp(48px, 8vw, 88px);
    line-height:1;
    color:var(--ink);
    margin-bottom:32px;
    letter-spacing:-.01em;
}
.preloader__monogram .ital{ font-style:italic; color:var(--blue); }
.preloader__bar{
    width:min(280px, 60vw); height:1px;
    background:var(--rule);
    margin:0 auto 18px;
    overflow:hidden;
}
.preloader__bar span{
    display:block; height:100%;
    background:var(--blue);
    transform-origin:left;
    animation: prog 1.8s var(--ease) forwards;
}
@keyframes prog{
    0%{ transform:scaleX(0); }
    100%{ transform:scaleX(1); }
}
.preloader__caption{
    font-size:11px;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--ink-mute);
}

/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
.scroll-progress{
    position:fixed; top:0; left:0;
    height:2px; width:0%;
    background:var(--blue);
    z-index:999;
    transition: width .12s linear;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
    position:fixed; top:0; left:0; right:0;
    z-index:500;
    display:flex; align-items:center; justify-content:space-between;
    padding: 22px var(--gut);
    background: rgba(255,255,255,.0);
    transition: background .35s var(--ease), padding .35s var(--ease), border-color .35s var(--ease);
    border-bottom:1px solid transparent;
}
.nav.is-scrolled{
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 14px var(--gut);
    border-bottom:1px solid var(--rule);
}
.nav__brand{
    font-family:var(--serif);
    font-size:24px;
    letter-spacing:-.01em;
    color:var(--ink);
}
.nav__brand .ital{ font-style:italic; color:var(--blue); }
.nav__links{
    display:flex; gap:30px;
    font-size:13.5px;
    color:var(--ink);
    letter-spacing:.01em;
}
.nav__links a{
    position:relative;
    padding:6px 0;
    transition: color .25s var(--ease);
}
.nav__links a::after{
    content:''; position:absolute;
    left:0; right:0; bottom:0;
    height:1px; background:var(--blue);
    transform:scaleX(0); transform-origin:right;
    transition: transform .35s var(--ease);
}
.nav__links a:hover{ color:var(--blue); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__toggle{
    display:none;
    width:42px; height:42px;
    align-items:center; justify-content:center;
    flex-direction:column;
    gap:6px;
}
.nav__toggle span{
    width:22px; height:1.5px; background:var(--ink);
    transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav__toggle.is-active span:nth-child(1){ transform: translateY(3.7px) rotate(45deg); }
.nav__toggle.is-active span:nth-child(2){ transform: translateY(-3.7px) rotate(-45deg); }

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
.drawer{
    position:fixed; inset:0;
    z-index:400;
    background:var(--paper);
    transform: translateY(-100%);
    transition: transform .55s var(--ease), visibility 0s linear .55s;
    padding: 96px var(--gut) 40px;
    display:flex; flex-direction:column; justify-content:space-between;
    overflow:hidden;
    visibility:hidden;
    pointer-events:none;
}
.drawer.is-open{
    transform: translateY(0);
    visibility:visible;
    pointer-events:auto;
    transition: transform .55s var(--ease), visibility 0s linear 0s;
}
.drawer__nav{ display:flex; flex-direction:column; gap:8px; }
.drawer__nav a{
    display:flex; align-items:baseline; gap:18px;
    font-family:var(--serif);
    font-size:clamp(34px, 8vw, 56px);
    line-height:1.1;
    padding:10px 0;
    border-bottom:1px solid var(--rule);
    color:var(--ink);
}
.drawer__nav a span{
    font-family:var(--sans);
    font-size:12px; letter-spacing:.3em;
    color:var(--blue);
    text-transform:uppercase;
}
.drawer__cta{
    display:inline-flex; align-self:flex-start;
    padding:14px 24px;
    background:var(--blue); color:#fff;
    border-radius:999px;
    font-size:13px; letter-spacing:.08em;
    text-transform:uppercase;
}

/* ============================================================
   HERO  — grid: full-width label (top), main + portrait (middle),
   full-width stats rail (bottom). Top + bottom rails bind both columns.
   ============================================================ */
.hero{
    min-height:100vh;
    padding: clamp(80px, 12vh, 130px) var(--gut) clamp(28px, 4vh, 48px);
    max-width:var(--max);
    margin:0 auto;
    display:grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: clamp(28px, 4vh, 48px) clamp(32px, 4vw, 72px);
}
.hero__label{
    grid-column: 1 / -1;
    grid-row: 1;
}
.hero__main{
    grid-column: 1;
    grid-row: 2;
    display:flex; flex-direction:column; justify-content:space-between;
    gap: clamp(36px, 6vh, 72px);
    min-width: 0;
}
.hero__portrait{
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
}
.hero__stats{
    grid-column: 1 / -1;
    grid-row: 3;
    padding-top: clamp(22px, 3.5vh, 36px);
    border-top: 1px solid var(--rule);
}
/* PORTRAIT — soft rounded card.
   Defined corners with a warm filter that ties it to the gold/ink palette. */
.hero__portrait{
    position: relative;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.hero__portrait-wrap{
    position: relative;
    width: 100%;
    flex: 1 1 0;
    min-height: 320px;
    max-height: 680px;
}
.hero__portrait-card{
    position: absolute;
    inset: 0;
    border-radius: clamp(16px, 1.8vw, 26px);
    overflow: hidden;
    box-shadow:
        0 30px 60px -28px rgba(0, 0, 0, .55),
        0 1px 0 0 rgba(184, 148, 90, .12) inset,
        0 0 0 1px rgba(233, 227, 208, .04) inset;
}
.hero__portrait-card img{
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 60% 22%;
    display: block;
    filter: contrast(1.05) saturate(.78) sepia(.08) brightness(.96);
    transition: transform 1.6s var(--ease), filter 1.2s var(--ease);
}
.hero__portrait:hover .hero__portrait-card img{
    transform: scale(1.015);
    filter: contrast(1.07) saturate(.88) sepia(.05) brightness(1);
}
@media (max-width: 900px){
    .hero{
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        gap: clamp(24px, 4vh, 40px);
    }
    .hero__label{ grid-column: 1; grid-row: 1; }
    .hero__portrait{ grid-column: 1; grid-row: 2; align-self: stretch; }
    .hero__main{ grid-column: 1; grid-row: 3; }
    .hero__stats{ grid-column: 1; grid-row: 4; }
    .hero__portrait-wrap{
        min-height: 380px;
        max-height: 60vh;
    }
}
.hero__label{
    display:flex; align-items:center; flex-wrap:wrap; gap:14px;
    font-size:12px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--ink-soft);
}
.hero__label-line{
    display:inline-block;
    width:40px; height:1px;
    background:var(--ink-soft);
}
.hero__label .dot{ color:var(--blue); }

.hero__badge{
    margin-left:auto;
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 14px 7px 12px;
    background:var(--blue);
    color:var(--paper);
    border-radius:999px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    box-shadow: 0 8px 24px -12px rgba(0,0,0,.35);
}
.hero__badge-dot{
    width:7px; height:7px; border-radius:50%;
    background:var(--paper);
    box-shadow: 0 0 0 3px rgba(255,255,255,.18);
    animation: heroBadgePulse 2.2s ease-in-out infinite;
}
@keyframes heroBadgePulse{
    0%,100%{ opacity:1; transform:scale(1); }
    50%    { opacity:.55; transform:scale(.78); }
}
@media (max-width:720px){
    .hero__badge{ margin-left:0; width:100%; justify-content:center; margin-top:6px; }
}

.hero__title{
    font-family:var(--serif);
    font-weight:400;
    font-size: clamp(60px, 10.5vw, 152px);
    line-height:.92;
    letter-spacing:-.02em;
    margin: 0;
    color:var(--ink);
}
.hero__title .line{
    display:block;
    overflow:hidden;
}
.hero__title .ital{
    font-style:italic;
    color:var(--blue);
}

.hero__bottom{
    display:grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(30px, 4vw, 60px);
    align-items: end;
}
.hero__intro{
    margin: 0;
    font-size: clamp(16px, 1.3vw, 19px);
    line-height:1.6;
    max-width:600px;
    color:var(--ink);
}
.hero__intro strong{ color:var(--ink); font-weight:600; }
.hero__cta{
    display:flex;
    flex-direction: column;
    gap: 10px;
    justify-self:end;
    width: 100%;
    max-width: 280px;
}
.hero__cta .btn{
    padding-block: 12px;
}
.hero__cta > .btn--primary,
.hero__cta > .btn--outline{
    flex: 0 0 auto;
    width: 100%;
    justify-content: center;
}

/* ===== Download CTA — icon reveals + arrow bobs on hover ===== */
.btn--download{
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn--download:hover,
.btn--download:focus-visible{
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -12px rgba(0,0,0,.55);
}
.btn--download:active{
    transform: translateY(0);
}

.btn--download .btn__icon{
    width: 0;
    height: 1.15em;
    opacity: 0;
    margin-left: 0;
    overflow: visible;
    transform: translateX(-6px);
    transition: width .35s var(--ease),
                opacity .35s var(--ease),
                margin-left .35s var(--ease),
                transform .35s var(--ease);
}
.btn--download:hover .btn__icon,
.btn--download:focus-visible .btn__icon{
    width: 1.15em;
    opacity: 1;
    margin-left: .55em;
    transform: translateX(0);
}

/* Subtle downward bob on the arrow while hovering */
.btn--download .btn__icon-arrow{
    transform-box: fill-box;
    transform-origin: center;
}
.btn--download:hover .btn__icon-arrow,
.btn--download:focus-visible .btn__icon-arrow{
    animation: btnDownloadBob 1.1s var(--ease) infinite;
}
@keyframes btnDownloadBob{
    0%, 100% { transform: translateY(-1px); }
    50%      { transform: translateY(2px); }
}

@media (prefers-reduced-motion: reduce){
    .btn--download,
    .btn--download .btn__icon{ transition: none; }
    .btn--download:hover, .btn--download:focus-visible{ transform: none; }
    .btn--download:hover .btn__icon-arrow,
    .btn--download:focus-visible .btn__icon-arrow{ animation: none; }
}

.hero__stats{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 40px);
}
.hero__stat{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:6px;
}
.hero__stat-num{
    font-family:var(--serif);
    font-size: clamp(40px, 5vw, 64px);
    line-height:1;
    color:var(--ink);
}
.hero__stat-num--text{
    color:var(--blue);
    font-style:italic;
}
.hero__stat-num--langs{
    font-family: var(--serif);
    font-size: clamp(20px, 2.2vw, 32px);
    line-height: 1.1;
    letter-spacing: .04em;
    color: var(--ink);
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
    gap: .42em;
}
.hero__stat-num--langs .lang{
    display: inline-block;
}
.hero__stat-num--langs .lang + .lang::before{
    content: "·";
    color: var(--ink-mute);
    margin-right: .42em;
}
.hero__stat-label{
    font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--ink-soft);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
    display:inline-flex; align-items:center; gap:10px;
    padding: 14px 26px;
    font-size:13px;
    font-weight:500;
    letter-spacing:.04em;
    border-radius:999px;
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
    border:1px solid transparent;
    cursor:pointer;
    white-space:nowrap;
}
.btn--primary{
    background:var(--blue);
    color:#fff;
    border-color:var(--blue);
}
.btn--primary:hover{
    background:var(--blue-deep);
    border-color:var(--blue-deep);
    transform: translateY(-1px);
}
.btn--outline{
    background:transparent;
    color:var(--ink);
    border-color:var(--ink);
}
.btn--outline:hover{
    background:var(--ink);
    color:#fff;
}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section{
    padding: clamp(80px, 12vh, 140px) var(--gut);
    max-width:var(--max);
    margin: 0 auto;
}
.section--alt{
    background:var(--paper-alt);
    max-width:none;
    margin:0;
}
.section--alt > *{
    max-width:var(--max);
    margin-left:auto; margin-right:auto;
}
.section--blue{
    background:var(--blue);
    color:#fff;
    max-width:none;
    margin:0;
}
.section--blue > *{
    max-width:var(--max);
    margin-left:auto; margin-right:auto;
}

.section__head{
    display:grid;
    grid-template-columns: clamp(120px, 14vw, 220px) 1fr;
    gap: clamp(24px, 4vw, 60px);
    align-items:start;
}
.section__head--light{ color:#fff; }
.section__num{
    font-family:var(--serif);
    font-size: clamp(64px, 9vw, 140px);
    line-height:.85;
    color:var(--num-gray);
    letter-spacing:-.02em;
}
.section__num--light{
    color:rgba(255,255,255,.22);
}
.section__head-text{ display:flex; flex-direction:column; gap:18px; }
.section__label{
    font-size:11px;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--blue);
    font-weight:600;
}
.section--blue .section__label{ color:#cfd8f3; }

.section__title{
    font-family:var(--serif);
    font-weight:400;
    font-size: clamp(36px, 5vw, 64px);
    line-height:1.02;
    letter-spacing:-.015em;
    margin:0;
    color:inherit;
}
.section__title .ital{ font-style:italic; color:var(--blue); }
.section--blue .section__title .ital{ color:#fff; font-style:italic; opacity:.92; }

.section__lead{
    font-size:15px;
    line-height:1.65;
    color:var(--ink-soft);
    max-width:620px;
    margin:6px 0 0;
}
.section--blue .section__lead{ color:rgba(255,255,255,.78); }

.section__divider{
    height:1px;
    background:var(--rule);
    margin: clamp(50px, 8vh, 90px) 0 clamp(40px, 6vh, 70px);
}
.section__divider--light{ background:rgba(255,255,255,.18); }

/* ============================================================
   PROFILE
   ============================================================ */
.profile{
    display:grid;
    grid-template-columns: 1.25fr 1fr;
    gap: clamp(40px, 5vw, 80px);
    align-items:start;
}
.profile__text p{
    font-size: clamp(15px, 1.1vw, 17px);
    line-height:1.75;
    color:var(--ink);
    margin: 0 0 20px;
}
.profile__text strong{ font-weight:600; color:var(--ink); }

.profile__facts{
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.profile__fact{
    padding: 14px 18px 16px;
    border: 1px solid var(--rule);
    border-left: 3px solid var(--blue);
    background: var(--paper);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.profile__fact-label{
    font-size: 10.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--blue);
    font-weight: 600;
}
.profile__fact-value{
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ink);
}
@media (max-width: 720px){
    .profile__fact{ flex: 1 1 100%; }
}

.profile__langs{
    margin-top:36px;
    padding-top:30px;
    border-top:1px solid var(--rule);
}
.profile__langs-label{
    display:block;
    font-size:11px; letter-spacing:.28em; text-transform:uppercase;
    color:var(--blue); font-weight:600;
    margin-bottom:18px;
}

.pills{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{
    display:inline-flex; align-items:center;
    padding: 8px 16px;
    border: 1px solid var(--ink);
    border-radius:999px;
    font-size:12.5px; letter-spacing:.02em;
    color:var(--ink);
    background:transparent;
}
.pill--filled{
    background:var(--ink);
    color:var(--paper);
    border-color:var(--ink);
}
.pill--primary{
    background:var(--blue);
    color:var(--paper);
    border-color:var(--blue);
}

/* Language card — replaces the pills inside the profile aside */
.lang-card{
    border: 1px solid var(--rule);
    background: var(--paper-alt);
    padding: 22px 24px;
}
.lang-card__label{
    display:block;
    font-size: 10.5px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-weight: 600;
    margin-bottom: 14px;
}
.lang-card__list{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.lang-card__list li{
    display:flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 11px 0;
    border-top: 1px solid var(--rule);
    font-size: 14px;
}
.lang-card__list li:first-child{ border-top: 0; padding-top: 4px; }
.lang-card__list li strong{
    font-weight: 600;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 17px;
    letter-spacing: -.005em;
}
.lang-card__list li span{
    color: var(--ink-soft);
    font-size: 12.5px;
    letter-spacing: .04em;
}
.lang-card__list li.is-primary strong{ color: var(--blue); font-style: italic; }

.profile__side{ display:flex; flex-direction:column; gap:22px; }
.profile__photo{
    margin:0;
    aspect-ratio:4/5;
    overflow:hidden;
    background:var(--paper-alt);
    position:relative;
}
.profile__photo img{
    width:100%; height:100%; object-fit:cover;
    object-position: center 22%;
    filter: grayscale(4%) contrast(1.02);
    transition: transform .8s var(--ease), filter .8s var(--ease);
}
.profile__photo:hover img{
    transform:scale(1.03);
    filter: grayscale(0%) contrast(1.05);
}

.callout{
    padding: 22px 24px;
    background:#fff;
    border:1px solid var(--rule);
    border-left:3px solid var(--blue);
}
.callout__label{
    display:block;
    font-size:10.5px; letter-spacing:.3em; text-transform:uppercase;
    color:var(--blue); font-weight:600;
    margin-bottom:12px;
}
.callout__quote{
    font-family:var(--serif);
    font-size:18px;
    line-height:1.4;
    font-style:italic;
    color:var(--ink);
    margin:0;
}
.callout--list ul{
    display:flex; flex-direction:column; gap:8px;
}
.callout--list li{
    font-size:13.5px;
    line-height:1.5;
    color:var(--ink);
    padding-left:14px;
    position:relative;
}
.callout--list li::before{
    content:'·';
    position:absolute; left:2px; top:-2px;
    color:var(--blue);
    font-size:18px;
    font-weight:700;
}

/* ============================================================
   SKILLS (full-width grid inside Profile)
   ============================================================ */
.skills{
    margin-top: clamp(50px, 8vh, 80px);
    padding-top: clamp(40px, 5vh, 56px);
    border-top:1px solid var(--rule);
}
.skills__head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom: clamp(28px, 4vh, 44px);
}
.skills__label{
    font-family:var(--serif);
    font-size: clamp(28px, 3.4vw, 44px);
    line-height:1;
    letter-spacing:-.01em;
    color:var(--ink);
}
.skills__hint{
    font-size:11px;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--blue);
    font-weight:600;
}
.skills__grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.5vw, 40px);
}
.skills__group{
    background: var(--paper);
    border:1px solid var(--rule);
    padding: clamp(22px, 2.4vw, 32px);
    display:flex; flex-direction:column; gap:14px;
    transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
    position:relative;
    overflow:hidden;
}
.skills__group::after{
    content:'';
    position:absolute; left:0; top:0;
    width:3px; height:0;
    background:var(--blue);
    transition: height .45s var(--ease);
}
.skills__group:hover{
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: 0 24px 56px -28px rgba(0,0,0,.18);
}
.skills__group:hover::after{ height:100%; }

.skills__group-num{
    font-family:var(--serif);
    font-style:normal;
    font-size: clamp(40px, 5vw, 64px);
    color:var(--num-gray);
    line-height:.85;
    letter-spacing:-.02em;
    margin-bottom:4px;
}
.skills__group-label{
    font-family:var(--serif);
    font-size: clamp(18px, 1.5vw, 22px);
    line-height:1.2;
    color:var(--ink);
    letter-spacing:-.005em;
}
.skills__group ul{
    display:flex; flex-direction:column; gap:9px;
    margin-top:4px;
}
.skills__group li{
    font-size:14px;
    line-height:1.55;
    color:var(--ink-soft);
    padding-left:18px;
    position:relative;
}
.skills__group li::before{
    content:'';
    position:absolute; left:0; top:10px;
    width:8px; height:1px;
    background:var(--blue);
}

/* ============================================================
   EXPERIENCE
   ============================================================ */
.exp{
    display:flex; flex-direction:column;
}
.exp__item{
    display:grid;
    grid-template-columns: clamp(120px, 14vw, 220px) 1fr;
    gap: clamp(24px, 4vw, 60px);
    padding: clamp(28px, 4vh, 44px) 0;
    border-top:1px solid var(--rule);
}
.exp__item:last-child{ border-bottom:1px solid var(--rule); }
.exp__date{
    display:flex; flex-direction:column;
    font-size:12.5px;
    letter-spacing:.06em;
    color:var(--blue);
    text-transform:uppercase;
    font-weight:600;
    padding-top:6px;
}
.exp__date span:nth-child(2){
    color:var(--ink-soft);
    font-weight:500;
}
.exp__role{
    font-family:var(--serif);
    font-size: clamp(22px, 2.4vw, 32px);
    line-height:1.15;
    margin:0 0 6px;
    color:var(--ink);
    font-weight:400;
    letter-spacing:-.01em;
}
.exp__meta{
    margin: 0 0 16px;
    font-size:14px;
    color:var(--ink-soft);
}
.exp__co{ font-weight:600; color:var(--ink); }
.exp__loc{ color:var(--ink-soft); }
.exp__desc{
    font-size:15px;
    line-height:1.7;
    color:var(--ink);
    margin: 0 0 14px;
}
.exp__list{
    display:flex; flex-direction:column; gap:8px;
}
.exp__list li{
    font-size:14px;
    line-height:1.6;
    color:var(--ink-soft);
    padding-left:18px;
    position:relative;
}
.exp__list li::before{
    content:'';
    position:absolute; left:0; top:10px;
    width:8px; height:1px;
    background:var(--blue);
}
.exp__list strong{ color:var(--ink); font-weight:600; }

/* ============================================================
   HIGHLIGHTS
   ============================================================ */
.highlights{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2vw, 32px);
}
.hl{
    background:#fff;
    border:1px solid var(--rule);
    padding: clamp(28px, 3vw, 38px);
    display:flex; flex-direction:column; gap:14px;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
    position:relative;
    overflow:hidden;
}
.hl::after{
    content:'';
    position:absolute; left:0; top:0;
    width:3px; height:0;
    background:var(--blue);
    transition: height .45s var(--ease);
}
.hl:hover{
    transform: translateY(-4px);
    box-shadow: 0 24px 56px -28px rgba(0,0,0,.18);
    border-color:transparent;
}
.hl:hover::after{ height:100%; }
.hl__num{
    font-family:var(--serif);
    font-size:36px;
    line-height:1;
    color:var(--num-gray);
}
.hl__meta{
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--blue);
    font-weight:600;
}
.hl__title{
    font-family:var(--serif);
    font-size: clamp(20px, 1.8vw, 26px);
    line-height:1.2;
    color:var(--ink);
    margin:0;
    font-weight:400;
    letter-spacing:-.005em;
}
.hl__desc{
    font-size:14px;
    line-height:1.65;
    color:var(--ink-soft);
    margin:0;
}

/* ============================================================
   BANNER (full-bleed editorial image)
   ============================================================ */
.banner{
    position:relative;
    margin: 0;
    width:100%;
    height: clamp(380px, 70vh, 640px);
    overflow:hidden;
    background:#0a0f1d;
}
.banner img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    object-position: center 78%;
    transform: scale(1.04);
    transition: transform 1.6s var(--ease);
}
.banner:hover img{ transform: scale(1.0); }
.banner::after{
    content:'';
    position:absolute; inset:0;
    background:
        linear-gradient(to top, rgba(10,15,29,.55) 0%, rgba(10,15,29,.05) 38%, rgba(10,15,29,0) 60%),
        linear-gradient(to right, rgba(10,15,29,.35) 0%, rgba(10,15,29,0) 55%);
    pointer-events:none;
}
.banner__caption{
    position:absolute;
    left: var(--gut);
    bottom: clamp(28px, 5vh, 56px);
    right: var(--gut);
    max-width: 720px;
    color:#fff;
    z-index:1;
    display:flex; flex-direction:column; gap:14px;
}
.banner__overline{
    font-size:11px;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:rgba(255,255,255,.85);
    font-weight:600;
    display:inline-flex; align-items:center; gap:14px;
}
.banner__overline::before{
    content:'';
    display:inline-block;
    width:36px; height:1px;
    background:#fff;
    opacity:.7;
}
.banner__quote{
    font-family:var(--serif);
    font-size: clamp(22px, 3vw, 40px);
    line-height:1.18;
    letter-spacing:-.005em;
    font-style:italic;
    color:#fff;
}
.banner__quote .ital{
    color:#cfd8f3;
    font-style:italic;
}

/* ============================================================
   FOR ROLE
   ============================================================ */
.for-role{
    display:grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(40px, 5vw, 80px);
    align-items:start;
}
.for-role__text p{
    font-size: clamp(15px, 1.1vw, 17px);
    line-height:1.75;
    color:var(--ink);
    margin: 0 0 20px;
}
.for-role__text strong{ font-weight:600; color:var(--ink); }
.for-role__text em{ font-style:italic; color:var(--blue); }

.for-role__aside{
    background:var(--paper-alt);
    padding: clamp(28px, 3vw, 40px);
    border-left:3px solid var(--blue);
    position:sticky;
    top: 100px;
}
.for-role__aside .callout__label{ margin-bottom:18px; }
.for-role__bullets{
    display:flex; flex-direction:column; gap:14px;
}
.for-role__bullets li{
    font-size:14.5px;
    line-height:1.55;
    color:var(--ink);
    padding-left:18px;
    position:relative;
}
.for-role__bullets li::before{
    content:'';
    position:absolute; left:0; top:10px;
    width:10px; height:1px;
    background:var(--blue);
}
.for-role__bullets strong{ font-weight:600; color:var(--ink); }

.for-role__status{
    display:flex; align-items:center; gap:10px;
    margin-top:26px;
    padding-top:20px;
    border-top:1px solid var(--rule);
    font-size:13px;
    color:var(--ink);
    font-weight:500;
}
.dotpulse{
    width:9px; height:9px;
    border-radius:50%;
    background:var(--blue);
    position:relative;
    flex-shrink:0;
}
.dotpulse::before{
    content:'';
    position:absolute; inset:-4px;
    border-radius:50%;
    background:var(--blue);
    opacity:.35;
    animation: pulse 2s ease-out infinite;
}
@keyframes pulse{
    0%{ transform:scale(.6); opacity:.4; }
    100%{ transform:scale(2); opacity:0; }
}

/* ============================================================
   AWARDS (blue)
   ============================================================ */
.awards{
    display:flex; flex-direction:column;
}
.award-row{
    display:grid;
    grid-template-columns: clamp(120px, 14vw, 220px) 1fr auto;
    gap: clamp(20px, 3vw, 40px);
    align-items:start;
    padding: 24px 0;
    border-top:1px solid rgba(255,255,255,.18);
}
.award-row:last-child{ border-bottom:1px solid rgba(255,255,255,.18); }
.award-row__year{
    font-size:13px;
    letter-spacing:.06em;
    color:#fff;
    font-weight:600;
    padding-top:4px;
}
.award-row__main{
    display:flex; flex-direction:column; gap:6px;
    color:#fff;
}
.award-row__main strong{
    font-family:var(--serif);
    font-size: clamp(18px, 1.7vw, 22px);
    line-height:1.25;
    color:#fff;
    font-weight:400;
    letter-spacing:-.005em;
}
.award-row__main span{
    font-size:13.5px;
    color:rgba(255,255,255,.7);
    line-height:1.55;
}
.award-row__badge{
    display:inline-flex; align-items:center;
    padding: 6px 14px;
    font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    color:rgba(255,255,255,.85);
    border:1px solid rgba(255,255,255,.4);
    border-radius:999px;
    white-space:nowrap;
}
.award-row__badge--accent{
    background:#fff;
    color:var(--blue);
    border-color:#fff;
    font-weight:600;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 100px);
    align-items:start;
}
.contact__title{
    font-family:var(--serif);
    font-weight:400;
    font-size: clamp(40px, 5vw, 72px);
    line-height:1.02;
    letter-spacing:-.015em;
    margin:0;
    color:var(--ink);
}
.contact__title .ital{ font-style:italic; color:var(--blue); }
.contact__intro{
    font-size: clamp(15px, 1.1vw, 17px);
    line-height:1.7;
    color:var(--ink);
    margin: 0 0 32px;
    padding-bottom:24px;
    border-bottom:1px solid var(--rule);
}
.contact__row{
    display:grid;
    grid-template-columns: 110px 1fr;
    gap: 16px;
    padding: 14px 0;
    border-bottom:1px solid var(--rule);
}
.contact__row-label{
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--ink-soft);
    padding-top:3px;
    font-weight:500;
}
.contact__row-value{
    font-size:15px;
    color:var(--ink);
    line-height:1.5;
    transition: color .25s var(--ease);
}
a.contact__row-value:hover{ color:var(--blue); }

.contact__cta{ margin-top:32px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
    max-width:var(--max);
    margin: 0 auto;
    padding: 32px var(--gut) 40px;
    display:flex; justify-content:space-between; align-items:center;
    gap:16px;
    border-top:1px solid var(--rule);
    font-size:12px;
    letter-spacing:.06em;
    color:var(--ink-soft);
}
.footer__role{ text-align:right; }

/* ============================================================
   REVEAL
   ============================================================ */
[data-reveal]{
    opacity:0;
    transform: translateY(20px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-visible{
    opacity:1;
    transform: translateY(0);
}

[data-reveal-line]{
    opacity:0;
    transform: translateY(40px);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
}
[data-reveal-line].is-visible{
    opacity:1;
    transform: translateY(0);
}

/* ============================================================
   HERO LOAD CASCADE
   Choreographed entrance: each piece fades in with stagger
   when <html> gets .is-loaded (after preloader dismiss)
   ============================================================ */
/* Initial hidden state — held until <html> gets .is-loaded */
html:not(.is-loaded) .nav{ opacity:0; transform: translateY(-100%); }
html:not(.is-loaded) .hero__label{ opacity:0; transform: translateY(-6px); }
html:not(.is-loaded) .hero__title .line{ opacity:0; transform: translateY(48px); }
html:not(.is-loaded) .hero__portrait{ opacity:0; transform: scale(.965); }
html:not(.is-loaded) .hero__intro,
html:not(.is-loaded) .hero__cta .btn,
html:not(.is-loaded) .hero__stat{ opacity:0; transform: translateY(22px); }

/* Animations fire fresh when .is-loaded class is added */
html.is-loaded .nav{                              animation: heroDropDown .9s  var(--ease)    0ms both; }
html.is-loaded .hero__label{                      animation: heroDrop     1.1s var(--ease)  120ms both; }
html.is-loaded .hero__title .line:nth-of-type(1){ animation: heroLineUp   1.25s var(--ease) 280ms both; }
html.is-loaded .hero__title .line:nth-of-type(2){ animation: heroLineUp   1.25s var(--ease) 430ms both; }
html.is-loaded .hero__portrait{                   animation: heroPortrait 1.45s var(--ease) 520ms both; }
html.is-loaded .hero__intro{                      animation: heroRise     1.1s var(--ease)  640ms both; }
html.is-loaded .hero__cta .btn:nth-child(1){      animation: heroRise     1.1s var(--ease)  800ms both; }
html.is-loaded .hero__cta .btn:nth-child(2){      animation: heroRise     1.1s var(--ease)  900ms both; }
html.is-loaded .hero__cta .btn:nth-child(3){      animation: heroRise     1.1s var(--ease) 1000ms both; }
html.is-loaded .hero__stat:nth-child(1){          animation: heroRise     1.1s var(--ease) 1180ms both; }
html.is-loaded .hero__stat:nth-child(2){          animation: heroRise     1.1s var(--ease) 1280ms both; }
html.is-loaded .hero__stat:nth-child(3){          animation: heroRise     1.1s var(--ease) 1380ms both; }

/* Language codes — subtle stagger inside the first stat */
html:not(.is-loaded) .hero__stat-num--langs .lang{ opacity:0; transform: translateY(8px); }
html.is-loaded .hero__stat-num--langs .lang:nth-child(1){ animation: heroRise .85s var(--ease) 1280ms both; }
html.is-loaded .hero__stat-num--langs .lang:nth-child(2){ animation: heroRise .85s var(--ease) 1360ms both; }
html.is-loaded .hero__stat-num--langs .lang:nth-child(3){ animation: heroRise .85s var(--ease) 1440ms both; }
html.is-loaded .hero__stat-num--langs .lang:nth-child(4){ animation: heroRise .85s var(--ease) 1520ms both; }
html.is-loaded .hero__stat-num--langs .lang:nth-child(5){ animation: heroRise .85s var(--ease) 1600ms both; }

@keyframes heroDropDown{
    from{ opacity:0; transform: translateY(-100%); }
    to  { opacity:1; transform: translateY(0); }
}
@keyframes heroDrop{
    from{ opacity:0; transform: translateY(-6px); }
    to  { opacity:1; transform: translateY(0); }
}
@keyframes heroLineUp{
    from{ opacity:0; transform: translateY(48px); }
    to  { opacity:1; transform: translateY(0); }
}
@keyframes heroRise{
    from{ opacity:0; transform: translateY(22px); }
    to  { opacity:1; transform: translateY(0); }
}
@keyframes heroPortrait{
    from{ opacity:0; transform: scale(.965); }
    to  { opacity:1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce){
    html:not(.is-loaded) .nav,
    html:not(.is-loaded) .hero__label,
    html:not(.is-loaded) .hero__title .line,
    html:not(.is-loaded) .hero__intro,
    html:not(.is-loaded) .hero__cta .btn,
    html:not(.is-loaded) .hero__portrait,
    html:not(.is-loaded) .hero__stat,
    html:not(.is-loaded) .hero__stat-num--langs .lang{
        opacity:1 !important;
        transform:none !important;
    }
    html.is-loaded .nav,
    html.is-loaded .hero__label,
    html.is-loaded .hero__title .line,
    html.is-loaded .hero__intro,
    html.is-loaded .hero__cta .btn,
    html.is-loaded .hero__portrait,
    html.is-loaded .hero__stat,
    html.is-loaded .hero__stat-num--langs .lang{
        animation: none !important;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
    .nav__links{ display:none; }
    .nav__toggle{ display:flex; }

    .hero__bottom{
        grid-template-columns:1fr;
        gap:30px;
    }
    .hero__cta{ justify-self:start; }

    .hero__stats{ grid-template-columns: repeat(2, 1fr); gap:30px; }

    .profile{ grid-template-columns:1fr; }
    .profile__side{ order:-1; max-width:480px; }

    .for-role{ grid-template-columns:1fr; }
    .for-role__aside{ position:static; }

    .highlights{ grid-template-columns:1fr; }
    .skills__grid{ grid-template-columns:1fr; }

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

    .section__head{ grid-template-columns:1fr; gap:20px; }
    .section__num{ font-size: clamp(56px, 14vw, 100px); }
}

@media (max-width: 640px){
    .exp__item{
        grid-template-columns:1fr;
        gap:14px;
    }
    .exp__date{
        flex-direction:row;
        gap:10px;
    }
    .award-row{
        grid-template-columns:1fr;
        gap:8px;
    }
    .award-row__badge{ justify-self:start; }
    .contact__row{
        grid-template-columns:1fr;
        gap:4px;
    }
    .footer{
        flex-direction:column;
        gap:8px;
        text-align:center;
    }
    .footer__role{ text-align:center; }
}