/* ============================================
   NOWURD.co — cold, minimal, editorial
   Shared stylesheet across all pages
   Supports light + dark theme via [data-theme]
   ============================================ */

:root{
    --bg:#0A0A0A;
    --fg:#FFFFFF;
    --muted:#94938C;
    --accent:#C41E3A;
    --card:#141414;
    --line: rgba(255,255,255,0.09);
    --nav-bg: rgba(10,10,10,0.92);
    --thumb-fallback:#1D1D1D;

    --ff-display:'Syne', sans-serif;
    --ff-body:'DM Sans', -apple-system, sans-serif;
    --ff-serif: Georgia, 'Times New Roman', serif;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

[data-theme="light"]{
    --bg:#FBFAF8;
    --fg:#0A0A0A;
    --muted:#6B6A63;
    --accent:#C41E3A;
    --card:#F2F0EC;
    --line: rgba(10,10,10,0.1);
    --nav-bg: rgba(251,250,248,0.92);
    --thumb-fallback:#E9E7E1;
}

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

html{ scroll-behavior:smooth; }

body{
    background:var(--bg);
    color:var(--fg);
    font-family:var(--ff-body);
    font-weight:300;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    transition:background 0.4s var(--ease), color 0.4s var(--ease);
}

/* ── PRELOADER ────────────────────────────── */
.preloader{
    position:fixed;
    inset:0;
    z-index:500;
    background:var(--bg);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1.4rem;
    transition:opacity 0.6s var(--ease), visibility 0.6s;
}

.preloader.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.preloader-mark{
    height:400px;
    width:auto;
    filter:invert(1) hue-rotate(180deg);
    animation:preloaderPulse 2s ease-in-out infinite;
}

[data-theme="light"] .preloader-mark{ filter:none; }

.preloader-line{
    width:100px;
    height:1px;
    background:var(--line);
    overflow:hidden;
    position:relative;
}

.preloader-line::after{
    content:'';
    position:absolute;
    inset:0;
    background:var(--accent);
    transform:translateX(-100%);
    animation:preloaderSweep 1.1s ease-in-out infinite;
}

@keyframes preloaderPulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
@keyframes preloaderSweep{ 50%{ transform:translateX(0); } 100%{ transform:translateX(100%); } }

a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
img{ max-width:100%; display:block; }
button{ font-family:var(--ff-body); cursor:pointer; border:none; background:none; color:inherit; -webkit-tap-highlight-color:transparent; }
ul{ list-style:none; }

.container{ max-width:1280px; margin:0 auto; padding:0 3rem; }

/* ── NAV ─────────────────────────────────── */
#nav{
    position:fixed;
    top:0; left:0; width:100%;
    z-index:200;
    padding:calc(0.2rem + var(--safe-top)) 0 0.2rem;
    transition:background 0.4s var(--ease), padding 0.4s var(--ease), border-color 0.4s var(--ease);
    border-bottom:1px solid transparent;
}

#nav.scrolled{
    background:var(--nav-bg);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    padding:calc(0.2rem + var(--safe-top)) 0 0.2rem;
    border-bottom:1px solid var(--line);
}

.nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.nav-logo{ display:flex; align-items:center; }

.nav-logo img{
    width:140px;
    max-width:100%;
    height:auto;
    filter:invert(1) hue-rotate(180deg);
    transition:filter 0.3s;
}

[data-theme="light"] .nav-logo img{ filter:none; }

.nav-menu{
    display:flex;
    align-items:center;
    gap:1.25rem;
}

.nav-menu a{
    font-size:0.7rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--muted);
    position:relative;
    padding-bottom:4px;
    transition:color 0.3s;
}

.nav-menu a::after{
    content:'';
    position:absolute;
    bottom:0; left:0;
    width:0; height:1px;
    background:var(--accent);
    transition:width 0.3s var(--ease);
}

.nav-menu a:hover,
.nav-menu a.active{ color:var(--fg); }

.nav-menu a.active::after,
.nav-menu a:hover::after{ width:100%; }

.burger{
    display:none;
    flex-direction:column;
    gap:5px;
    padding:8px;
}

.burger span{
    display:block;
    width:22px; height:1px;
    background:var(--fg);
    transition:transform 0.3s var(--ease), opacity 0.3s, background 0.3s;
}

.mobile-menu{
    position:fixed; inset:0;
    background:var(--bg);
    z-index:199;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:translateY(-100%);
    transition:transform 0.5s var(--ease), background 0.4s var(--ease);
    padding-top:var(--safe-top);
    padding-bottom:var(--safe-bottom);
}

.mobile-menu.open{ transform:translateY(0); }

.mobile-menu ul{ text-align:center; }
.mobile-menu li{ margin:1.4rem 0; }

.mobile-menu a{
    font-family:var(--ff-display);
    font-weight:700;
    font-size:2rem;
    letter-spacing:-0.02em;
    color:var(--fg);
    transition:color 0.3s;
}

.mobile-menu a:hover,
.mobile-menu a.active{ color:var(--accent); }

.mobile-close{
    position:absolute;
    top:calc(1.75rem + var(--safe-top)); right:2rem;
    font-size:1.75rem;
    color:var(--muted);
    transition:color 0.3s;
    min-width:44px; min-height:44px;
    display:flex; align-items:center; justify-content:center;
}

.mobile-close:hover{ color:var(--accent); }

/* ── THEME TOGGLE ─────────────────────────── */
.theme-toggle{
    position:fixed;
    bottom:calc(2rem + var(--safe-bottom));
    right:2rem;
    z-index:250;
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--card);
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    transition:background 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.25s var(--ease);
}

.theme-toggle:hover{ transform:translateY(-2px); border-color:var(--accent); }
.theme-toggle:active{ transform:translateY(0) scale(0.94); }

.theme-toggle svg{
    width:19px;
    height:19px;
    stroke:var(--fg);
    fill:none;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:opacity 0.25s, transform 0.4s var(--ease);
}

.theme-toggle .icon-sun{ position:absolute; opacity:0; transform:rotate(-40deg) scale(0.6); }
.theme-toggle .icon-moon{ position:absolute; opacity:1; transform:rotate(0) scale(1); }

[data-theme="light"] .theme-toggle .icon-sun{ opacity:1; transform:rotate(0) scale(1); }
[data-theme="light"] .theme-toggle .icon-moon{ opacity:0; transform:rotate(40deg) scale(0.6); }

/* ── HERO (Home only) ────────────────────── */
.hero{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:calc(6rem + var(--safe-top)) 2rem 4rem;
    position:relative;
    overflow:hidden;
}

.hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
    opacity:0;
    transition:opacity 1s var(--ease);
}

.hero.has-video .hero-video{ opacity:0.5; }

.hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    display:none;
    background:linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.8) 100%);
}

[data-theme="light"] .hero-overlay{
    background:linear-gradient(180deg, rgba(251,250,248,0.55) 0%, rgba(251,250,248,0.85) 100%);
}

.hero.has-video .hero-overlay{ display:block; }

.hero > *:not(.hero-video):not(.hero-overlay){
    position:relative;
    z-index:2;
}

.hero-logo{
    height:auto;
    width:240px;
    margin-bottom:1.75rem;
    filter:invert(1) hue-rotate(180deg);
    transition:filter 0.3s;
}

[data-theme="light"] .hero-logo{ filter:none; }

.hero-word{
    font-family:var(--ff-display);
    font-weight:800;
    font-size:clamp(3.2rem, 11vw, 8.5rem);
    line-height:0.92;
    letter-spacing:-0.04em;
}

.hero-sub{
    font-family:var(--ff-serif);
    font-style:italic;
    font-weight:400;
    font-size:1.05rem;
    color:var(--muted);
    margin-top:1.25rem;
}

.hero-line{
    width:0;
    height:1px;
    background:var(--accent);
    margin:2.5rem auto 0;
    transition:width 1.8s var(--ease);
}

.hero-line.drawn{ width:140px; }

.scroll-cue{
    position:absolute;
    bottom:2.5rem;
    left:50%;
    transform:translateX(-50%);
    font-size:0.65rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--muted);
    opacity:0;
    animation:fadeIn 1s var(--ease) 2s forwards;
}

@keyframes fadeIn{ to{ opacity:0.6; } }

/* ── INTRO LINE (Home only) ──────────────── */
.intro-line{
    padding:6rem 2rem;
    text-align:center;
    border-top:1px solid var(--line);
}

.intro-line p{
    font-family:var(--ff-display);
    font-weight:500;
    font-size:clamp(1.15rem, 2.6vw, 1.7rem);
    letter-spacing:-0.01em;
    max-width:620px;
    margin:0 auto;
    color:var(--fg);
}

/* ── HOME: WHAT THIS IS ──────────────────── */
.what-grid{
    display:grid;
    grid-template-columns:0.8fr 1.2fr;
    gap:4rem;
    align-items:start;
}

.what-lead{
    font-family:var(--ff-display);
    font-weight:800;
    font-size:clamp(1.7rem, 3vw, 2.4rem);
    line-height:1.2;
    letter-spacing:-0.02em;
}

.service-list{ display:flex; flex-direction:column; }

.service-item{
    display:grid;
    grid-template-columns:2.5rem 1fr;
    gap:1.25rem;
    padding:1.6rem 0;
    border-bottom:1px solid var(--line);
}

.service-item:first-child{ padding-top:0; }
.service-item:last-child{ border-bottom:none; }

.service-num{
    font-family:var(--ff-display);
    font-size:0.75rem;
    color:var(--accent);
    letter-spacing:0.05em;
}

.service-item h3{
    font-family:var(--ff-display);
    font-weight:700;
    font-size:1.05rem;
    letter-spacing:-0.01em;
    margin-bottom:0.5rem;
}

.service-item p{
    font-size:0.85rem;
    color:var(--muted);
    line-height:1.7;
}

/* ── HOME: STATS ──────────────────────────── */
.stats-strip{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.stat-block{
    padding:3rem 2rem;
    text-align:center;
    border-right:1px solid var(--line);
}

.stat-block:last-child{ border-right:none; }

.stat-block .num{
    display:block;
    font-family:var(--ff-display);
    font-weight:800;
    font-size:clamp(2rem, 4vw, 3rem);
    letter-spacing:-0.02em;
    color:var(--fg);
}

.stat-block .label{
    display:block;
    margin-top:0.5rem;
    font-size:0.68rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--muted);
}

/* ── HOME: TEASERS ────────────────────────── */
.teaser-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
}

.teaser-card{
    padding:3rem 2.5rem;
    border-right:1px solid var(--line);
    transition:background 0.35s var(--ease);
}

.teaser-card:last-child{ border-right:none; }
.teaser-card:hover{ background:var(--card); }

.teaser-num{
    font-family:var(--ff-display);
    font-size:0.75rem;
    color:var(--accent);
    letter-spacing:0.1em;
    display:block;
    margin-bottom:1.5rem;
}

.teaser-card h3{
    font-family:var(--ff-display);
    font-weight:700;
    font-size:1.3rem;
    letter-spacing:-0.01em;
    margin-bottom:0.75rem;
}

.teaser-card p{
    font-size:0.85rem;
    color:var(--muted);
    line-height:1.7;
    margin-bottom:1.4rem;
}

.teaser-link{
    font-size:0.7rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--fg);
    display:inline-flex;
    align-items:center;
    gap:0.4rem;
    transition:color 0.3s, gap 0.3s;
}

.teaser-card:hover .teaser-link{ color:var(--accent); gap:0.6rem; }

/* ── HOME: FINAL CTA BANNER ───────────────── */
.cta-banner{
    padding:7rem 0;
    text-align:center;
    border-top:1px solid var(--line);
}

.cta-banner h2{
    font-family:var(--ff-display);
    font-weight:800;
    font-size:clamp(2rem, 5vw, 3.4rem);
    letter-spacing:-0.03em;
    margin-bottom:2rem;
}

/* ── PAGE INTRO (non-home pages) ─────────── */
.page-intro{
    padding:calc(11rem + var(--safe-top)) 0 4rem;
    border-bottom:1px solid var(--line);
}

.page-intro .section-label{ margin-bottom:1.25rem; }
.page-intro .section-title{ margin-bottom:1rem; }

.page-intro-sub{
    font-family:var(--ff-serif);
    font-style:italic;
    font-size:1rem;
    color:var(--muted);
    max-width:540px;
    line-height:1.7;
}

/* ── SECTION COMMON ──────────────────────── */
.section{
    padding:8rem 0;
    border-top:1px solid var(--line);
}

.section:first-of-type{ border-top:none; }

.section-label{
    font-size:0.7rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:1.5rem;
}

.section-title{
    font-family:var(--ff-display);
    font-weight:800;
    font-size:clamp(2rem, 4vw, 3.2rem);
    letter-spacing:-0.03em;
    line-height:1.05;
    margin-bottom:3.5rem;
}

.section-title em{
    font-style:normal;
    color:var(--accent);
}

/* ── ABOUT ───────────────────────────────── */
.about-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:4rem;
    align-items:start;
}

.about-left{
    position:sticky;
    top:8rem;
}

.about-portrait{
    width:100%;
    aspect-ratio:3 / 4;
    background:var(--thumb-fallback);
    overflow:hidden;
    position:relative;
}

.about-portrait img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    filter:grayscale(100%) contrast(1.05);
}

.about-portrait::after{
    content:'';
    position:absolute;
    top:0; left:0;
    width:26%;
    height:22%;
    background:var(--accent);
}

.about-portrait.no-photo img{ display:none; }

.about-portrait.no-photo::before{
    content:'Portrait pending';
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--ff-display);
    font-weight:700;
    font-size:0.9rem;
    letter-spacing:0.04em;
    color:var(--muted);
    text-transform:uppercase;
}

.about-caption{
    margin-top:1.25rem;
    font-family:var(--ff-display);
    font-weight:700;
    font-size:1.1rem;
    letter-spacing:-0.01em;
    border-left:2px solid var(--accent);
    padding-left:1rem;
}

.about-right p{
    font-size:0.95rem;
    line-height:1.9;
    color:var(--muted);
    margin-bottom:1.4rem;
}

.about-right p:first-child{ color:var(--fg); }
.about-right p:last-of-type{ margin-bottom:0; }

.skills-label{
    font-size:0.68rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--muted);
    margin-top:2.5rem;
    margin-bottom:1.2rem;
}

.skills-wrap{
    display:flex;
    flex-wrap:wrap;
    gap:0.65rem;
}

.skill-pill{
    font-size:0.7rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--muted);
    border:1px solid var(--line);
    padding:0.55rem 1rem;
    transition:border-color 0.3s, color 0.3s;
}

.skill-pill:hover{
    border-color:var(--accent);
    color:var(--fg);
}

/* ── PORTFOLIO ───────────────────────────── */
.portfolio-group{ margin-bottom:3.5rem; }
.portfolio-group:last-child{ margin-bottom:0; }

.portfolio-group-label{
    font-size:0.68rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:1.5rem;
    padding-bottom:1rem;
    border-bottom:1px solid var(--line);
}

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
}

.proj-card{
    position:relative;
    background:var(--card);
    display:flex;
    flex-direction:column;
    transition:background 0.35s var(--ease);
}

.proj-thumb{
    position:relative;
    aspect-ratio:16 / 10;
    overflow:hidden;
    background:var(--thumb-fallback);
}

.proj-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(85%) contrast(1.05);
    transition:filter 0.5s var(--ease), transform 0.6s var(--ease);
}

.proj-card:hover .proj-thumb img{
    filter:grayscale(0%) contrast(1);
    transform:scale(1.04);
}

.proj-thumb.brand-mark{
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--thumb-fallback);
}

.proj-thumb.brand-mark img{
    width:56%;
    height:auto;
    object-fit:contain;
    filter:invert(1) hue-rotate(180deg);
}

[data-theme="light"] .proj-thumb.brand-mark img{ filter:none; }

.proj-card:hover .proj-thumb.brand-mark img{
    filter:invert(1) hue-rotate(180deg) !important;
    transform:scale(1.04);
}

[data-theme="light"] .proj-card:hover .proj-thumb.brand-mark img{ filter:none !important; }

.proj-thumb.no-thumb::before{
    content:attr(data-fallback);
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1.5rem;
    text-align:center;
    font-family:var(--ff-display);
    font-weight:700;
    font-size:1.1rem;
    letter-spacing:-0.01em;
    color:var(--muted);
}

.proj-body{
    position:relative;
    padding:1.75rem 2rem 2rem;
    flex:1;
    display:flex;
    flex-direction:column;
}

.proj-cat{
    font-size:0.65rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:0.6rem;
}

.proj-name{
    font-family:var(--ff-display);
    font-weight:700;
    font-size:1.2rem;
    letter-spacing:-0.01em;
    line-height:1.25;
    margin-bottom:0.6rem;
}

.proj-desc{
    font-size:0.82rem;
    color:var(--muted);
    line-height:1.65;
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height 0.4s var(--ease), opacity 0.3s, margin 0.3s;
}

.proj-card:hover .proj-desc{
    max-height:130px;
    opacity:1;
    margin-bottom:0.75rem;
}

.proj-link{
    margin-top:auto;
    font-size:0.7rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--fg);
    opacity:0;
    transform:translateY(6px);
    transition:opacity 0.3s, transform 0.3s;
}

.proj-card:hover .proj-link{
    opacity:1;
    transform:translateY(0);
}

.proj-card-link{
    position:absolute;
    inset:0;
    z-index:2;
}

/* ══════════════════════════════════════════
   CREDENTIALS — improved layout
   ══════════════════════════════════════════ */

.credentials{ padding-top:5rem; }

/* Each group (Education / Certificates / Experience / Awards) */
.cred-group{
    margin-bottom:5rem;
    padding-bottom:5rem;
    border-bottom:1px solid var(--line);
}

.cred-group:last-of-type{
    margin-bottom:0;
    padding-bottom:0;
    border-bottom:none;
}

/* Group header row — label left, note right */
.cred-group-header{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:2.5rem;
    padding-bottom:1rem;
    border-bottom:1px solid var(--line);
}

.cred-group-label{
    font-family:var(--ff-display);
    font-weight:700;
    font-size:0.7rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--fg);
    margin-bottom:0; /* override old rule */
}

.cred-group-note{
    font-size:0.65rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--muted);
    white-space:nowrap;
}

/* Sub-category divider inside Professional Certificates */
.cred-sub-label{
    font-size:0.65rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--accent);
    padding:1.75rem 0 0.9rem;
    border-top:1px solid var(--line);
    margin-top:0.5rem;
}

.cred-sub-label:first-of-type{
    border-top:none;
    padding-top:0;
}

/* Individual credential row */
.cred-item{
    position:relative;
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto auto;
    column-gap:2rem;
    row-gap:0;
    padding:1.75rem 0;
    border-bottom:1px solid var(--line);
    transition:padding 0.3s var(--ease), background 0.3s var(--ease);
}

.cred-item:last-child{ border-bottom:none; }

/* Linked rows get hover treatment */
a.cred-item{
    cursor:pointer;
    border-radius:0;
    display:grid;
}

a.cred-item:hover{
    padding-left:1.25rem;
    padding-right:1.25rem;
    background:var(--card);
}

/* Main cell: title + org stacked */
.cred-item-main{
    display:flex;
    flex-direction:column;
    gap:0.3rem;
    grid-column:1;
    grid-row:1;
}

.cred-title{
    font-family:var(--ff-display);
    font-weight:700;
    font-size:1rem;
    color:var(--fg);
    line-height:1.3;
}

.cred-org{
    font-size:0.78rem;
    color:var(--accent);
    font-family:var(--ff-body);
    font-weight:400;
    letter-spacing:0.02em;
}

/* Date sits top-right */
.cred-date{
    font-size:0.72rem;
    letter-spacing:0.05em;
    color:var(--muted);
    white-space:nowrap;
    grid-column:2;
    grid-row:1;
    padding-top:0.15rem;
    text-align:right;
}

/* Description spans full width below title */
.cred-desc{
    grid-column:1 / -1;
    grid-row:2;
    font-size:0.85rem;
    color:var(--muted);
    line-height:1.8;
    margin-top:0.75rem;
    max-width:72ch;
}

/* View link */
.cred-view{
    grid-column:1 / -1;
    grid-row:3;
    font-size:0.68rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--accent);
    margin-top:0.65rem;
    opacity:0;
    transform:translateY(4px);
    transition:opacity 0.25s, transform 0.25s;
}

a.cred-item:hover .cred-view{
    opacity:1;
    transform:translateY(0);
}

/* Award row — accent left border */
.cred-item--award{
    border-left:2px solid var(--accent);
    padding-left:1.25rem;
}

a.cred-item--award:hover{
    padding-left:2rem;
}

/* ── CREDENTIALS CTA ──────────────────────── */
.section-cta{
    margin-top:5rem;
    padding-top:3.5rem;
    border-top:1px solid var(--line);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:1.5rem;
}

.cta-line{
    font-family:var(--ff-display);
    font-weight:700;
    font-size:clamp(1.1rem, 2vw, 1.4rem);
    letter-spacing:-0.01em;
    color:var(--muted);
}

/* ── CONTACT ─────────────────────────────── */
.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4rem;
    align-items:start;
}

.contact-headline{
    font-family:var(--ff-display);
    font-weight:800;
    font-size:clamp(2.2rem, 4.5vw, 3.6rem);
    letter-spacing:-0.03em;
    line-height:1.05;
}

.contact-subline{
    font-family:var(--ff-serif);
    font-style:italic;
    color:var(--muted);
    font-size:1rem;
    margin-top:1rem;
    margin-bottom:2.75rem;
}

.contact-methods{
    display:flex;
    flex-direction:column;
    gap:1.4rem;
}

.cm-item{ display:flex; flex-direction:column; gap:0.25rem; }

.cm-label{
    font-size:0.65rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--accent);
}

.cm-val{
    font-size:0.95rem;
    color:var(--fg);
    transition:color 0.3s;
}

a.cm-val:hover{ color:var(--accent); }

.contact-form{
    display:flex;
    flex-direction:column;
    gap:1.6rem;
}

.field{ display:flex; flex-direction:column; gap:0.5rem; }

.field label{
    font-size:0.65rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--muted);
}

.field input,
.field textarea{
    background:transparent;
    border:none;
    border-bottom:1px solid var(--line);
    padding:0.85rem 0;
    font-family:var(--ff-body);
    font-size:1rem;
    color:var(--fg);
    outline:none;
    resize:none;
    width:100%;
    transition:border-color 0.3s;
}

.field input::placeholder,
.field textarea::placeholder{ color:var(--muted); opacity:0.55; }

.field input:focus,
.field textarea:focus{ border-bottom-color:var(--accent); }

/* ── FORM ACTIONS ─────────────────────────── */
.form-actions{
    display:flex;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
}

.btn-send{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.6rem;
    background:var(--accent);
    color:#FFFFFF;
    padding:1rem 2rem;
    min-height:48px;
    font-size:0.75rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    align-self:flex-start;
    transition:background 0.3s, color 0.3s, opacity 0.3s;
}

.btn-send:hover:not(:disabled){
    background:var(--fg);
    color:var(--bg);
}

.btn-send:disabled{ opacity:0.55; cursor:not-allowed; }

.whatsapp-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.6rem;
    background:transparent;
    color:var(--fg);
    border:1px solid var(--line);
    padding:1rem 1.75rem;
    min-height:48px;
    font-size:0.75rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    white-space:nowrap;
    transition:border-color 0.3s, color 0.3s, background 0.3s;
}

.whatsapp-btn svg{
    width:16px;
    height:16px;
    flex-shrink:0;
    fill:#25D366;
    transition:fill 0.3s;
}

.whatsapp-btn:hover{
    border-color:#25D366;
    color:#25D366;
}

.form-feedback{
    font-size:0.82rem;
    color:var(--muted);
    display:none;
}

.form-feedback.show{ display:block; }
.form-feedback.success{ color:var(--fg); }

/* ── FOOTER ──────────────────────────────── */
footer{
    border-top:1px solid var(--line);
    padding:2rem 0 calc(2rem + var(--safe-bottom));
}

.footer-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:0.75rem;
}

.footer-row img{
    height:16px;
    width:auto;
    filter:invert(1) hue-rotate(180deg);
    transition:filter 0.3s;
}

[data-theme="light"] .footer-row img{ filter:none; }

.footer-row span{
    font-size:0.7rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted);
}

/* ── REVEAL ──────────────────────────────── */
.reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity 0.8s var(--ease), transform 0.8s var(--ease);
    transition-delay:var(--d, 0s);
}

.reveal.in-view{ opacity:1; transform:translateY(0); }

.d1{ --d:0.08s; } .d2{ --d:0.16s; } .d3{ --d:0.24s; }
.d4{ --d:0.32s; } .d5{ --d:0.4s; }

/* ── RESPONSIVE ──────────────────────────── */
@media (max-width:1000px){
    .container{ padding:0 2rem; }
    .portfolio-grid{ grid-template-columns:repeat(2, 1fr); }
    .nav-menu{ display:none; }
    .burger{ display:flex; min-width:44px; min-height:44px; align-items:center; justify-content:center; }
    .what-grid{ grid-template-columns:1fr; gap:2.5rem; }
    .stats-strip{ grid-template-columns:1fr; }
    .stat-block{ border-right:none; border-bottom:1px solid var(--line); }
    .stat-block:last-child{ border-bottom:none; }
    .teaser-grid{ grid-template-columns:1fr; }
    .teaser-card{ border-right:none; border-bottom:1px solid var(--line); }
    .teaser-card:last-child{ border-bottom:none; }
}

@media (max-width:760px){
    .about-grid,
    .contact-grid{ grid-template-columns:1fr; gap:2.75rem; }
    .about-left{ position:static; }
    .about-portrait{ aspect-ratio:4 / 3; }
    .portfolio-grid{ grid-template-columns:1fr; }
    .section{ padding:4.5rem 0; }
    .credentials{ padding-top:3rem; }
    .page-intro{ padding:calc(8.5rem + var(--safe-top)) 0 2.25rem; }
    .container{ padding:0 1.35rem; }
    .hero{ padding:calc(5rem + var(--safe-top)) 1.35rem 3.5rem; }

    .hero-video,
    .hero-overlay{ display:none !important; }

    /* Credential rows: collapse to single column on mobile */
    .cred-item{
        grid-template-columns:1fr;
        grid-template-rows:auto auto auto auto;
    }

    .cred-item-main{ grid-column:1; grid-row:1; }
    .cred-date{ grid-column:1; grid-row:2; text-align:left; margin-top:0.4rem; }
    .cred-desc{ grid-row:3; }
    .cred-view{ grid-row:4; opacity:0.7 !important; transform:none !important; }

    a.cred-item:hover{
        padding-left:0;
        padding-right:0;
        background:transparent;
    }

    .cred-item--award{
        padding-left:1rem;
    }

    .cred-group-header{
        flex-direction:column;
        gap:0.4rem;
    }

    .cred-group-note{ display:none; }

    /* Cards: no hover on touch — show content statically */
    .proj-desc{
        max-height:none !important;
        opacity:1 !important;
        overflow:visible;
        margin-bottom:0.75rem !important;
    }
    .proj-link{
        opacity:1 !important;
        transform:none !important;
        position:static;
    }
    .proj-thumb img{ filter:grayscale(20%) contrast(1.02); }

    .theme-toggle{
        bottom:calc(1.25rem + var(--safe-bottom));
        right:1.25rem;
        width:46px;
        height:46px;
    }

    .btn-send{ width:100%; align-self:stretch; }

    .form-actions{ flex-direction:column; align-items:stretch; }
    .whatsapp-btn{ width:100%; }

    .field input,
    .field textarea{ font-size:16px; }

    .section-cta{ align-items:stretch; }
}

@media (prefers-reduced-motion:reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    .hero-line{ transition:none; }
    *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ── TOUCH DEVICE REFINEMENTS ─────────────── */
@media (hover:none){
    .proj-desc{
        max-height:none;
        opacity:1;
        overflow:visible;
        margin-bottom:0.75rem;
    }
    .proj-link{
        opacity:1;
        transform:none;
        position:static;
    }
    a.cred-item .cred-view{ opacity:0.7; transform:none; }
    a.cred-item:hover{
        padding-left:0;
        padding-right:0;
        background:transparent;
    }
}