:root {
    --bg: #eceef1;
    --surface: #ffffff;
    --surface-alt: #f7f8fa;
    --text: #171b21;
    --muted: #656d7a;
    --line: #e3e5e9;
    --accent: #1550e0;
    --accent-strong: #1040b8;
    --accent-soft: #e4ecff;
    --warm: #0c6f97;
    /* Basel Blue accent family: cobalt -> azure -> cyan. One cool arc, so the
       accent lifts the navy base instead of fighting it the way ember did. */
    --hot0: #1e5eff;
    --hot1: #2f7fd1;
    --hot2: #2f9de0;
    --hot3: #35c4e8;
    --grad-hot: linear-gradient(96deg, var(--hot0) 0%, var(--hot2) 60%, var(--hot3) 100%);
    /* Accent TEXT is solid. The clipped dark gradient is precisely what made
       "Some Projects" and "Get in Touch" read heavy; a single luminous cobalt
       keeps them legible (6.5:1 on white) without the weight. */
    --accent-text: #1550e0;
    /* Kept for the few decorative clipped fills (hero word, step numbers) */
    --grad-hot-text: linear-gradient(94deg, #1550e0 0%, #1b86c9 100%);
    --hero-bg: #17355f;
    --hero-bg-soft: #2a5a9e;
    --shadow-soft: 0 8px 28px rgba(14, 30, 60, 0.08);
    --shadow-strong: 0 16px 42px rgba(10, 20, 50, 0.16);
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --container-max: 1620px;
}

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

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    width: 100%;
}

body {
    font-family: 'Public Sans', sans-serif;
    line-height: 1.7;
    color: var(--text);
    margin: 0;
    min-height: 100vh;
    width: 100%;
    background: var(--bg);
}

a,
button,
textarea {
    -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(29, 93, 201, 0.38);
    outline-offset: 2px;
}

/* Keyboard/screen-reader shortcut past the sidebar; visible only on focus */
.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10001;
    background: var(--accent-strong);
    color: #ffffff;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 11px 20px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: var(--shadow-strong);
    transform: translateY(-250%);
    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

h1, h2, h3, .sidebar nav a {
    font-family: 'Schibsted Grotesk', sans-serif;
    letter-spacing: -0.02em;
}

.sidebar {
    animation: riseIn 0.7s ease both;
}

@keyframes riseIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ringSpin {
    to { transform: rotate(360deg); }
}

/* "AI" hidden inside RAIMONDI, picked out on the hero photograph */
.hero-name .name-ai {
    color: #7fd8ff;
}

.main-content {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
    background: var(--surface);
}

/* ── Utility bar ─────────────────────────────────────────────────────── */
.topbar {
    background: #20262e;
    color: rgba(255, 255, 255, 0.82);
}

.topbar-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 28px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.topbar-social {
    display: flex;
    align-items: center;
    gap: 18px;
}

.topbar-social a {
    color: rgba(255, 255, 255, 0.82);
    display: inline-flex;
    transition: color 0.2s ease;
}

.topbar-social a:hover,
.topbar-social a:focus-visible {
    color: #ffffff;
}

.topbar-social svg {
    width: 17px;
    height: 17px;
    display: block;
}

.topbar-mail {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.topbar-mail:hover { color: #ffffff; }
.topbar-mail svg { width: 16px; height: 16px; }

/* ── Header: transparent over the hero, solid once it sticks ─────────── */
.sitehead {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: rgba(24, 28, 35, 0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Only the panel that carries the photograph floats the header over it */
body.has-hero .sitehead {
    position: absolute;
    top: 40px;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.has-hero .sitehead.is-stuck {
    position: fixed;
    top: 0;
    background: rgba(24, 28, 35, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
}

.sitehead-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 28px;
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.sitehead.is-stuck .sitehead-inner { min-height: 60px; }

.brand {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 1.28rem;
    letter-spacing: 0.06em;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    gap: 0.38em;
}

.brand strong { font-weight: 700; }
.brand span { font-weight: 300; }

.mainnav { min-width: 0; }

.main-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 26px;
}

.main-tab-link,
.main-tabs a.main-tab-btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.main-tab-btn {
    position: relative;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    background: none;
    border: 0;
    padding: 8px 0;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.main-tab-btn::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.24s ease;
}

.main-tab-btn:hover,
.main-tab-btn:focus-visible {
    color: #ffffff;
    outline: none;
}

.main-tab-btn.active {
    color: #ffffff;
}

.main-tab-btn.active::after,
.main-tab-btn:hover::after {
    transform: scaleX(1);
}

/* Burger, shown only where the rail cannot fit */
.navtoggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.navtoggle span {
    display: block;
    height: 2px;
    width: 24px;
    background: #ffffff;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
    .navtoggle { display: flex; }

    .mainnav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(20, 24, 30, 0.97);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.3s ease;
    }

    .mainnav > .main-tabs {
        overflow: hidden;
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 0 28px;
    }

    .sitehead.nav-open .mainnav { grid-template-rows: 1fr; }
    .sitehead.nav-open .mainnav > .main-tabs { padding: 10px 28px 20px; }

    .main-tab-btn {
        text-align: left;
        padding: 13px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .main-tab-btn::after { display: none; }
}

@media (max-width: 620px) {
    .topbar-inner,
    .sitehead-inner { padding: 0 18px; }
    .topbar-right { gap: 12px; }
    .topbar-mail span { display: none; }
    .brand { font-size: 1.08rem; }
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

@keyframes tickerMove {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* ── Photographic hero ──────────────────────────────────────────────────
   The image is position:fixed so the page scrolls over it. clip-path on
   the section makes it a containing block for that fixed child, which
   both clips the image to the hero and keeps the effect working on iOS
   Safari, where background-attachment:fixed is ignored outright. */
.hero-photo {
    /* Same trick as .page-hero: at 100svh the picture overflows this box by
       only a few pixels, so object-position had no travel and the framing
       drifted with window height, cropping the head on short screens.
       Binding the image to the band's height gives it real range. */
    --band: min(74svh, 660px);
    --topbar-h: 40px;
    position: relative;
    min-height: var(--band);
    max-width: none;
    padding: 0;
    display: flex;
    align-items: flex-end;
    clip-path: inset(0);
    background: #0d1117;
}

.hero-photo-img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* plus the utility bar the band starts below, plus a few px of slack
       so neither svh rounding nor a band grown past its min-height
       can leave an uncovered sliver */
    height: calc(var(--band) + var(--topbar-h) + 56px);
    object-fit: cover;
    object-position: 72% 0%;
    z-index: 0;
}

.hero-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(9, 13, 20, 0.9) 0%, rgba(9, 13, 20, 0.74) 36%, rgba(9, 13, 20, 0.16) 68%, rgba(9, 13, 20, 0.02) 100%),
        linear-gradient(180deg, rgba(9, 13, 20, 0.72) 0%, transparent 26%, transparent 62%, rgba(9, 13, 20, 0.5) 100%);
}

.hero-photo-inner {
    position: relative;
    z-index: 2;
    padding: 0 28px 76px;
    max-width: 680px;
    width: 100%;
    margin: 0 auto 0 max(28px, calc((100% - var(--container-max)) / 2));
}

.hero-kicker {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.74);
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 18px;
}

.hero-name {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: clamp(2.2rem, 5.4vw, 4.1rem);
    font-weight: 300;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.04;
    margin: 0 0 16px;
    text-wrap: balance;
}

.hero-claim {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: clamp(1.15rem, 2vw, 1.65rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #ffffff;
    line-height: 1.25;
    margin: 0 0 10px;
}

.hero-sub {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    max-width: 48ch;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.btn-line {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 12px 24px;
    cursor: pointer;
    text-decoration: none;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.45);
    transition: background 0.22s ease, border-color 0.22s ease;
}

.btn-line:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: #ffffff;
}

.hero-credit {
    position: absolute;
    z-index: 2;
    right: 26px;
    bottom: 18px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.58);
    margin: 0;
}

/* Scroll cue: the page below the fold is not otherwise announced */
.hero-scroll {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    width: 26px;
    height: 26px;
    color: rgba(255, 255, 255, 0.7);
    animation: heroNudge 2.4s ease-in-out infinite;
}

@keyframes heroNudge {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 7px); }
}

/* ── Intro: the bio the sidebar used to carry ───────────────────────── */
.intro {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 58px 28px 48px;
    text-align: center;
}

.intro-eyebrow {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 10px;
}

.intro-role {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 22px;
}

.intro-bio {
    max-width: 58ch;
    margin: 0 auto;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.75;
}

.intro-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 46px;
    margin: 30px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.intro-meta dt {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 3px;
}

.intro-meta dd {
    margin: 0;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text);
}

/* ── Track record ───────────────────────────────────────────────────── */
.trackrecord {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 28px 44px;
    text-align: center;
}

.trackrecord-label {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 22px;
}

.trackrecord-logos {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px 52px;
    margin: 0 0 28px;
    padding: 0;
}

.trackrecord-logos img {
    /* Cap BOTH axes: at a uniform height a wide wordmark (Accenture, 240x63)
       swamps a squarish mark (MDPI, 450x296). */
    height: auto;
    width: auto;
    max-height: 34px;
    max-width: 124px;
    object-fit: contain;
    filter: grayscale(1) contrast(1.15);
    opacity: 0.8;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

.trackrecord-logos img:hover {
    filter: grayscale(0);
    opacity: 1;
}

.hero-chips { justify-content: center; }

@media (max-width: 820px) {
    /* Narrow screens have no empty half to put the type in, so the scrim
       turns bottom-up and the frame shifts to keep the face clear of it. */
    .hero-photo::before {
        background: linear-gradient(180deg,
            rgba(9, 13, 20, 0.62) 0%,
            rgba(9, 13, 20, 0.22) 26%,
            rgba(9, 13, 20, 0.82) 58%,
            rgba(9, 13, 20, 0.95) 100%);
    }

    .hero-photo { --band: min(78svh, 600px); --topbar-h: 46px; }
    .hero-photo-inner { padding: 0 20px 64px; margin-left: 0; }
    .hero-photo-img { object-position: 62% 0%; }
    .intro { padding: 42px 20px 36px; }
    .trackrecord { padding: 0 20px 34px; }
    .trackrecord-logos { gap: 16px 30px; }
    .trackrecord-logos img { max-height: 26px; max-width: 96px; }
    .hero-credit { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-scroll { animation: none; }
}

.hero-rotator {
    display: inline-block;
    /* Sits on the photograph, so a single luminous cyan rather than a
       clipped gradient: it stays readable over whatever the image does */
    color: #7fd8ff;
    transition: opacity 0.38s ease, transform 0.38s ease;
}

.hero-rotator.is-out {
    opacity: 0;
    transform: translateY(14px);
}

.hero-rotator.is-in {
    animation: wordIn 0.42s ease;
}

@keyframes wordIn {
    from { opacity: 0; transform: translateY(-14px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.hero-chips span {
    font-size: 0.79rem;
    font-weight: 500;
    color: #3d4553;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 7px;
    padding: 5px 12px;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.hero-chips span:hover {
    border-color: var(--accent);
    color: var(--accent);
}

section {
    padding: 36px 44px;
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
}

#experience,
#projects,
#skills {
    margin-top: 10px;
}

.section-alt {
    background: transparent;
}

h1.section-title,
h2.section-title {
    font-size: clamp(1.6rem, 3vw, 2.45rem);
    margin-bottom: 10px;
    font-weight: 800;
    color: #0e1e30;
    padding-bottom: 13px;
}

h1.section-title::after,
h2.section-title::after {
    content: '';
    display: block;
    width: 48px;
    height: 4px;
    border-radius: 999px;
    margin-top: 10px;
    background: linear-gradient(90deg, var(--accent), var(--hot2));
}

/* One word per section title rendered in the (text-safe) hot gradient */
.title-accent {
    color: var(--accent-text);
}

.section-subtitle {
    font-size: 1rem;
    color: var(--muted);
    margin-bottom: 34px;
    max-width: 68ch;
}

.experience-card {
    background: linear-gradient(180deg, #ffffff 0%, var(--surface-alt) 100%);
    border-radius: var(--radius-lg);
    padding: 20px 18px 17px;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--line);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.experience-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(20, 55, 110, 0.16);
    border-color: #93b8e8;
}

.experience-card h3 {
    font-size: 1.05rem;
    margin-bottom: 3px;
    color: #0e2a4a;
    font-weight: 700;
}

.card-header-brand {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.card-header-brand h3 {
    margin-bottom: 0;
    flex: 1;
}

.company-logo {
    width: 80px;
    height: 28px;
    object-fit: contain;
    object-position: right center;
    flex-shrink: 0;
    border-radius: 6px;
    filter: grayscale(20%) opacity(0.85);
    transition: filter 0.25s ease;
}

.experience-card:hover .company-logo {
    filter: grayscale(0%) opacity(1);
}

.card-company-link {
    color: #1d5dc9;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.2s ease;
}

.card-company-link:hover {
    color: var(--accent-strong);
    text-decoration: underline;
}

.experience-card .company {
    font-size: 0.9rem;
    color: #1d5dc9;
    font-weight: 700;
    margin-bottom: 2px;
}

.experience-card .period {
    font-size: 0.82rem;
    color: #5a6a80;
    margin-bottom: 8px;
    font-weight: 600;
}

.experience-card p {
    font-size: 0.92rem;
    color: #2d4066;
    line-height: 1.55;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.project-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--line);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.project-card:hover,
.project-card:focus-within {
    transform: translateY(-8px) rotate(-0.2deg);
    box-shadow: var(--shadow-strong);
    border-color: #a9c8ef;
}

.project-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
    transition: transform 0.45s ease;
}

.project-media {
    position: relative;
    overflow: hidden;
}

.project-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 280px;
    object-fit: cover;
    opacity: 0;
    cursor: zoom-in;
    transition: opacity 0.3s ease, transform 0.45s ease;
    pointer-events: none;
}

.project-card:hover img,
.project-card:focus-within img {
    transform: scale(1.28);
}

.project-card:hover .project-media video,
.project-card:focus-within .project-media video {
    opacity: 1;
    transform: scale(1.28);
    pointer-events: auto;
}

.project-carousel {
    height: 280px;
}

.project-carousel .project-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.project-carousel .project-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.project-carousel .project-slide img,
.project-carousel .project-slide video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
    transition: opacity 0.3s ease, transform 0.45s ease;
}

.project-carousel .project-slide video {
    opacity: 0;
    pointer-events: none;
}

.project-card:hover .project-carousel .project-slide.is-active img,
.project-card:focus-within .project-carousel .project-slide.is-active img {
    transform: scale(1.28);
}

.project-card:hover .project-carousel .project-slide.is-active video,
.project-card:focus-within .project-carousel .project-slide.is-active video {
    opacity: 1;
    transform: scale(1.28);
    pointer-events: auto;
}

.project-carousel .project-slide:not(.is-active) video {
    opacity: 0 !important;
    pointer-events: none !important;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(10, 20, 36, 0.55);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s ease, background 0.25s ease;
}

.project-carousel:hover .carousel-arrow,
.project-carousel:focus-within .carousel-arrow {
    opacity: 1;
}

.carousel-arrow:hover,
.carousel-arrow:focus-visible {
    background: rgba(10, 20, 36, 0.85);
    outline: none;
}

.carousel-prev {
    left: 10px;
}

.carousel-next {
    right: 10px;
}

.carousel-dots {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    padding: 0;
}

.carousel-dot.is-active {
    background: #fff;
}

.project-lightbox {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
    z-index: 1400;
    background:
        radial-gradient(circle at 20% 10%, rgba(29, 93, 201, 0.32), transparent 42%),
        rgba(6, 15, 29, 0.92);
    backdrop-filter: blur(8px);
}

.project-lightbox.is-open {
    display: flex;
    animation: lightboxIn 0.28s ease;
}

.project-lightbox img,
.project-lightbox video {
    width: min(1100px, 92vw);
    max-height: 86vh;
    object-fit: contain;
    border-radius: 16px;
    border: 1px solid rgba(208, 225, 252, 0.55);
    box-shadow: 0 26px 50px rgba(0, 0, 0, 0.45);
    background: rgba(10, 20, 36, 0.85);
    padding: 6px;
}

.project-lightbox-close {
    position: absolute;
    top: 18px;
    right: 18px;
    border: 1px solid rgba(200, 221, 250, 0.7);
    background: rgba(12, 30, 54, 0.72);
    color: #f6fbff;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.project-lightbox-close:hover,
.project-lightbox-close:focus-visible {
    background: rgba(24, 53, 90, 0.95);
    outline: none;
}

.project-content {
    padding: 22px;
}

.project-card h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    color: #0e2040;
    font-weight: 800;
}

.project-card p {
    color: #3d4f6a;
    margin-bottom: 16px;
    line-height: 1.55;
    font-size: 0.92rem;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.tag {
    background: var(--surface-alt);
    color: #2e4f7f;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    border: 1px solid var(--line);
}

.project-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-strong);
    text-decoration: none;
    font-weight: 800;
    transition: all 0.25s ease;
    padding: 10px 16px;
    background: var(--surface-alt);
    border-radius: 11px;
    font-size: 0.84rem;
    border: 1px solid var(--line);
}

.project-link:hover,
.project-link:focus {
    gap: 12px;
    color: #fff;
    background: linear-gradient(110deg, var(--accent), var(--accent-strong));
    border-color: transparent;
    outline: none;
}

.project-link::after {
    content: '→';
    font-size: 1.1em;
}

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

.project-private-badge {
    padding: 10px 15px;
    background: var(--surface-alt);
    border-radius: 12px;
    font-size: 0.82rem;
    color: #1f5fb4;
    font-weight: 800;
    text-align: center;
    display: block;
    border: 1px solid #cfe0f7;
}

/* ===== PUBLICATIONS ===== */
.publications-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.publication-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 30px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--line);
    padding: 26px;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.publication-card:hover,
.publication-card:focus-within {
    transform: translateY(-6px);
    box-shadow: var(--shadow-strong);
    border-color: #a9c8ef;
}

.publication-cover {
    position: relative;
    border: none;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(14, 30, 60, 0.18);
    cursor: zoom-in;
    align-self: start;
    background: transparent;
}

.publication-cover:not(.pub-open) {
    cursor: default;
}

.publication-cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 682 / 1024;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.publication-card:hover .publication-cover img {
    transform: scale(1.04);
}

.pub-read-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 18, 36, 0);
    color: #fff;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.3s ease;
}

.publication-cover:hover .pub-read-overlay,
.publication-cover:focus-visible .pub-read-overlay {
    opacity: 1;
    background: rgba(8, 18, 36, 0.45);
}

.publication-content {
    display: flex;
    flex-direction: column;
}

.publication-kicker {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
}

.publication-content h3 {
    font-size: 1.5rem;
    line-height: 1.2;
    color: #0e2040;
    font-weight: 800;
    margin-bottom: 6px;
}

.publication-subtitle {
    font-size: 1rem;
    font-style: italic;
    color: #3d4f6a;
    margin-bottom: 14px;
}

.publication-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #50637f;
    margin-bottom: 14px;
}

.publication-desc {
    color: #3d4f6a;
    line-height: 1.6;
    font-size: 0.92rem;
    margin-bottom: 18px;
}

.publication-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
}

.pub-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 11px 18px;
    font-size: 0.86rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.pub-btn svg {
    width: 18px;
    height: 18px;
}

.pub-btn-primary {
    color: #fff;
    background: linear-gradient(110deg, var(--accent), var(--accent-strong));
    border-color: transparent;
}

.pub-btn-primary:hover,
.pub-btn-primary:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(19, 62, 158, 0.32);
    outline: none;
}

.pub-btn-disabled {
    cursor: default;
    opacity: 0.75;
}

.pub-btn-disabled:hover,
.pub-btn-disabled:focus-visible {
    transform: none;
    box-shadow: none;
}

.pub-btn-ghost {
    color: var(--accent-strong);
    background: var(--surface-alt);
}

.pub-btn-ghost:hover,
.pub-btn-ghost:focus-visible {
    color: #fff;
    background: linear-gradient(110deg, var(--accent), var(--accent-strong));
    border-color: transparent;
    outline: none;
}

/* PDF reader modal */
.pub-reader {
    position: fixed;
    inset: 0;
    display: none;
    flex-direction: column;
    z-index: 1500;
    background: rgba(6, 15, 29, 0.94);
    backdrop-filter: blur(8px);
}

.pub-reader.is-open {
    display: flex;
    animation: lightboxIn 0.28s ease;
}

.pub-reader-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(208, 225, 252, 0.2);
}

.pub-reader-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #f6fbff;
    margin-right: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pub-reader-bar a,
.pub-reader-bar button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(200, 221, 250, 0.5);
    background: rgba(12, 30, 54, 0.72);
    color: #f6fbff;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.pub-reader-bar a:hover,
.pub-reader-bar button:hover,
.pub-reader-bar a:focus-visible,
.pub-reader-bar button:focus-visible {
    background: rgba(24, 53, 90, 0.95);
    outline: none;
}

.pub-reader-frame {
    flex: 1;
    width: 100%;
    border: none;
    background: #525a68;
}

@media (max-width: 768px) {
    .publication-card {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }

    .publication-cover {
        max-width: 200px;
        margin: 0 auto;
    }

    .publication-content h3 {
        font-size: 1.3rem;
    }

    .pub-read-overlay {
        opacity: 1;
        background: rgba(8, 18, 36, 0.32);
    }

    .pub-reader-title {
        display: none;
    }

    .pub-reader-bar a,
    .pub-reader-bar button {
        padding: 8px 11px;
        font-size: 0.78rem;
    }
}

/* ===== FEATURED TALK VIDEO ===== */

.talk-video-feature {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    background: var(--surface);
    border: 1px solid #d2dbe9;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 18px;
    margin-bottom: 36px;
}

.talk-video-wrap {
    aspect-ratio: 5 / 4;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #cfd9e8;
    background: #07142a;
}

.talk-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.talk-video-caption h3 {
    font-size: 1.15rem;
    color: #0e2a4a;
    font-weight: 800;
    margin: 10px 0 6px;
}

.talk-video-caption p {
    color: #3d4f6a;
    font-size: 0.92rem;
    line-height: 1.6;
    max-width: 52ch;
}

.talk-video-caption .hl-tag {
    background: rgba(29, 93, 201, 0.9);
}

@media (max-width: 900px) {
    .talk-video-feature {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 14px;
    }
}

/* ===== TALKS TIMELINE ===== */

.talks-timeline {
    position: relative;
    padding-left: 64px;
    margin-top: 12px;
}

/* Gradient vertical line */
.talks-timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(180deg,
        #3a9af5 0%,
        #2d7bd6 20%,
        #1a5fa8 50%,
        #0e2a4a 80%,
        rgba(14, 42, 74, 0.15) 100%
    );
    border-radius: 2px;
}

.talks-year {
    position: relative;
    margin-bottom: 52px;
}

.talks-year:last-child {
    margin-bottom: 0;
}

/* Timeline node circle */
.talks-year::before {
    content: '';
    position: absolute;
    /* Centers a 22px dot on the line at left:20px from timeline
       (timeline padding-left: 64px → .talks-year left edge is 64px from timeline)
       dot left edge = 20px - 11px(half) - 64px = -55px from .talks-year */
    left: -55px;
    top: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2d7bd6, #0e2a4a);
    border: 3px solid #f0f6ff;
    box-shadow: 0 0 0 3px rgba(45, 123, 214, 0.22);
    z-index: 2;
}

/* Pulsing node for upcoming/latest year */
.talks-year:first-child::before {
    background: linear-gradient(135deg, #3a9af5, #2d7bd6);
    animation: timeline-pulse 2.4s ease-in-out infinite;
}

@keyframes timeline-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(45, 123, 214, 0.22); }
    50%       { box-shadow: 0 0 0 10px rgba(45, 123, 214, 0.08); }
}

/* Connector from dot to year pill */
.talks-year::after {
    content: '';
    position: absolute;
    left: -33px;  /* dot right edge: -55px + 22px = -33px */
    top: 19px;    /* vertically centered: 8px + 22px/2 = 19px */
    width: 33px;
    height: 1px;
    background: linear-gradient(90deg, rgba(45, 123, 214, 0.5), rgba(45, 123, 214, 0.12));
}

/* Year label pill */
.talks-year-title {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #1a5fa8, #2d7bd6);
    display: inline-flex;
    align-items: center;
    padding: 5px 18px;
    border-radius: 999px;
    margin-bottom: 22px;
    box-shadow: 0 4px 14px rgba(45, 123, 214, 0.28);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Upcoming year gets a brighter pill */
.talks-year:first-child .talks-year-title {
    background: linear-gradient(135deg, #2d7bd6, #3a9af5);
    box-shadow: 0 4px 18px rgba(58, 154, 245, 0.35);
}

/* Hide old dot from ::before */
.talks-year-title::before {
    display: none;
}

.talks-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* Subtle left accent on cards for timeline continuity */
.talk-card {
    border-left: 3px solid #c8ddf5;
}

.talk-card:hover {
    border-left-color: #2d7bd6;
}

.talk-card,
.sport-card {
    background: linear-gradient(180deg, #ffffff 0%, var(--surface-alt) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: var(--shadow-soft);
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.talk-card:hover,
.sport-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(22, 54, 95, 0.14);
    border-color: #aac9ef;
}

.talk-card h4,
.sport-card h3 {
    font-size: 1.03rem;
    color: #0e2a4a;
    margin-bottom: 5px;
    font-weight: 800;
    line-height: 1.35;
}

.talk-meta,
.sport-meta {
    color: #1d5dc9;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

.talk-card p,
.sport-card p {
    color: #3d4f6a;
    font-size: 0.9rem;
    line-height: 1.56;
}

.talk-links,
.sport-links {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.talk-links a,
.sport-links a {
    color: var(--accent-strong);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--surface-alt);
    border: 1px solid var(--line);
    transition: all 0.2s ease;
}

.talk-links a:hover,
.talk-links a:focus,
.sport-links a:hover,
.sport-links a:focus {
    color: #ffffff;
    background: linear-gradient(110deg, var(--accent), var(--accent-strong));
    border-color: transparent;
    outline: none;
}

.sport-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.sport-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 12px;
    align-items: start;
}

.sport-primary-column {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
}

#sport .section-subtitle {
    margin-bottom: 24px;
}

.sport-video-card,
.sport-photo-card {
    background: var(--surface);
    border: 1px solid #d2dbe9;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.sport-video-card:hover,
.sport-photo-card:hover {
    transform: translateY(-4px);
    border-color: #aac9ef;
    box-shadow: 0 16px 30px rgba(22, 54, 95, 0.18);
}

.sport-video-wrap {
    position: relative;
    background:
        radial-gradient(circle at 85% 15%, rgba(29, 93, 201, 0.2), transparent 52%),
        linear-gradient(180deg, #061022 0%, #17355f 100%);
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.sport-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sport-photo-rail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
}

.sport-photo-card {
    position: relative;
    padding: 5px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%, rgba(233, 240, 250, 0.95) 52%, rgba(231, 241, 255, 0.92) 100%);
}

.sport-photo-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #cdd8e8;
    background: #0f223f;
}

.sport-photo-trigger {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: zoom-in;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.sport-photo-trigger::after {
    content: 'View';
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
    color: #eaf2ff;
    background: rgba(11, 30, 56, 0.68);
    border: 1px solid rgba(198, 221, 255, 0.45);
    border-radius: 999px;
    padding: 4px 8px;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.24s ease, transform 0.24s ease;
    pointer-events: none;
}

.sport-photo-card:hover .sport-photo-trigger::after,
.sport-photo-trigger:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.sport-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.sport-photo-card:hover .sport-photo-frame img {
    transform: scale(1.05);
}

.sport-photo-card--misano {
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.98) 0%, rgba(232, 239, 249, 0.95) 60%, rgba(231, 241, 255, 0.94) 100%);
}

.sport-photo-card--misano .sport-photo-frame {
    aspect-ratio: 16 / 10;
    background:
        radial-gradient(circle at 78% 16%, rgba(29, 93, 201, 0.32), transparent 48%),
        linear-gradient(180deg, #102747 0%, #0b1e38 100%);
}

.sport-photo-card--misano .sport-photo-frame img {
    object-fit: contain;
    object-position: center;
    padding: 5px;
}

.sport-photo-trigger:focus-visible {
    outline: 3px solid rgba(29, 93, 201, 0.45);
    outline-offset: 2px;
}

.sport-photo-lightbox {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
    z-index: 1200;
    background:
        radial-gradient(circle at 20% 10%, rgba(29, 93, 201, 0.32), transparent 42%),
        rgba(6, 15, 29, 0.92);
    backdrop-filter: blur(8px);
}

.sport-photo-lightbox.is-open {
    display: flex;
    animation: lightboxIn 0.28s ease;
}

@keyframes lightboxIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.sport-photo-lightbox img {
    width: min(1100px, 92vw);
    max-height: 82vh;
    object-fit: contain;
    border-radius: 16px;
    border: 1px solid rgba(208, 225, 252, 0.55);
    box-shadow: 0 26px 50px rgba(0, 0, 0, 0.45);
    background: rgba(10, 20, 36, 0.85);
    padding: 6px;
}

.sport-photo-lightbox-close {
    position: absolute;
    top: 18px;
    right: 18px;
    border: 1px solid rgba(200, 221, 250, 0.7);
    background: rgba(12, 30, 54, 0.72);
    color: #f6fbff;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.sport-photo-lightbox-close:hover,
.sport-photo-lightbox-close:focus-visible {
    background: rgba(24, 53, 90, 0.95);
    outline: none;
}

.sport-photo-lightbox-caption {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    color: #eff5ff;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    text-align: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(8, 23, 43, 0.72);
}

#sport .sport-grid {
    margin-top: 0;
    grid-template-columns: 1fr;
    gap: 12px;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

/* One accent across every card. Four different hues per grid made the
   page read as a palette test; colour is a signal, not decoration. */
.skill-card,
.consulting-card {
    --ca: var(--accent);
}

.skill-card {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    padding: 24px 24px 22px 26px;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(18, 24, 36, 0.05), 0 8px 22px rgba(18, 24, 36, 0.05);
    border: 1px solid var(--line);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.skill-card::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 0;
    width: 3px;
    height: 34px;
    border-radius: 0 3px 3px 0;
    background: var(--ca);
    opacity: 0.3;
    transition: height 0.3s ease, opacity 0.3s ease;
}

.skill-card:hover::before {
    height: calc(100% - 48px);
    opacity: 1;
}

.skill-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(18, 24, 36, 0.05), 0 16px 34px rgba(18, 24, 36, 0.11);
    border-color: #d2d6dd;
}

.skill-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 16px;
}

.skill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    /* Quiet by default; the card picks up the accent only on hover, so a
       grid of four does not read as four coloured badges */
    color: #3d4553;
    background: var(--surface-alt);
    border: 1px solid var(--line);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.skill-card:hover .skill-icon {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.skill-icon svg {
    width: 22px;
    height: 22px;
}

.skill-card h3 {
    font-size: 1.14rem;
    color: #16294a;
    font-weight: 800;
    letter-spacing: -0.015em;
    margin: 0;
}

.skill-card ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.skill-card li {
    padding: 6px 13px;
    border-radius: 7px;
    color: #3d4553;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.35;
    border: 1px solid transparent;
    background: var(--surface-alt);
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.skill-card li:hover {
    border-color: var(--accent-soft);
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.passions-section {
    position: relative;
    color: var(--text);
    width: 100%;
}

.passions-section .section-title {
    color: var(--text);
}

.passions-section .section-subtitle {
    color: #5f6878;
}

.passions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

@media (min-width: 1000px) {
    .passions-grid { grid-template-columns: repeat(3, 1fr); }
}

.focus-item {
    padding: 16px 14px;
    background: rgba(255, 255, 255, 0.82);
    border-radius: 14px;
    border: 1px solid var(--line);
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.focus-item:hover {
    background: #ffffff;
    border-color: #b8c9e7;
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(21, 40, 71, 0.11);
}

.focus-label {
    display: inline-block;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1d5dc9;
    background: #dce7f8;
    border-radius: 999px;
    padding: 3px 9px;
    margin-bottom: 8px;
    font-weight: 700;
}

.focus-item h3 {
    font-size: 0.95rem;
    color: #1d3f74;
    margin-bottom: 4px;
}

.focus-item p {
    font-size: 0.82rem;
    color: #5f6878;
    line-height: 1.45;
}

/* ===== HIGHLIGHTS CAROUSEL ===== */

.highlights-section {
    max-width: none;
    padding: 34px max(44px, calc((100% - var(--container-max)) / 2 + 28px)) 38px;
    border-top: 1px solid var(--line);
    background:
        radial-gradient(circle at 12% 20%, rgba(29, 93, 201, 0.10), transparent 38%),
        radial-gradient(circle at 88% 80%, rgba(14, 116, 144, 0.10), transparent 36%),
        linear-gradient(180deg, #f8fafd 0%, #edf2f9 100%);
}

.highlights-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.highlights-head .section-subtitle {
    margin-bottom: 0;
}

.hl-nav {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.hl-nav button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #c2cfe2;
    background: #ffffff;
    color: #1c3f73;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.hl-nav button:hover,
.hl-nav button:focus-visible {
    background: linear-gradient(115deg, var(--accent), var(--accent-strong));
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-2px);
    outline: none;
}

.hl-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 4px 4px 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.hl-track::-webkit-scrollbar {
    display: none;
}

.hl-slide {
    position: relative;
    flex: 0 0 min(640px, 90%);
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid #cfd9e8;
    box-shadow: 0 14px 30px rgba(30, 38, 60, 0.14);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hl-slide:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(30, 38, 60, 0.2);
}

.hl-slide--photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hl-slide--top img {
    object-position: center 22%;
}

.hl-slide--photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 18, 36, 0) 38%, rgba(8, 18, 36, 0.82) 100%);
    pointer-events: none;
}

.hl-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 18px 20px 16px;
    color: #f4f8ff;
}

.hl-tag {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(29, 93, 201, 0.78);
    border: 1px solid rgba(170, 201, 239, 0.55);
    border-radius: 999px;
    padding: 4px 10px;
    margin-bottom: 8px;
    backdrop-filter: blur(3px);
}

.hl-tag--warm {
    background: rgba(14, 116, 144, 0.82);
    border-color: rgba(165, 230, 245, 0.5);
}

.hl-caption h3 {
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 3px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.hl-caption p {
    font-size: 0.84rem;
    color: rgba(228, 238, 252, 0.88);
    line-height: 1.45;
    max-width: 46ch;
}

.hl-slide-year {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: #ffffff;
    background: rgba(10, 24, 46, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    padding: 4px 11px;
    backdrop-filter: blur(3px);
}

footer {
    background: #1b2027;
    color: white;
    padding: 34px;
    text-align: center;
    width: 100%;
    border-radius: 0 0 24px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

footer p {
    color: #d3e5fb;
    font-size: 0.9rem;
}

/* Scrollbars */
.sidebar::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(45, 123, 214, 0.3);
    border-radius: 20px;
}

/* ===== AI CHATBOT STYLES ===== */

.chat-container {
    position: fixed;
    bottom: 18px;
    right: 18px;
    width: clamp(340px, 28vw, 430px);
    max-height: min(700px, calc(100vh - 36px));
    border: 1px solid rgba(29, 93, 201, 0.18);
    border-radius: 20px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 20px 48px rgba(29, 93, 201, 0.22);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transition: transform 0.22s ease, height 0.3s ease, max-height 0.3s ease, width 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
}

.chat-container:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 56px rgba(29, 93, 201, 0.28);
}

.chat-header {
    position: relative;
    background: linear-gradient(120deg, #122e75 0%, #1d5dc9 58%, #0e7fa6 100%);
    color: white;
    padding: 1.1rem 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 16px rgba(29, 93, 201, 0.28);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.chat-header-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.chat-header-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    object-fit: cover;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.45), 0 2px 8px rgba(0, 0, 0, 0.2);
}

.chat-header-text .chat-header-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    font-family: 'Schibsted Grotesk', sans-serif;
}

.chat-header-text .status {
    font-size: 0.78rem;
    opacity: 0.94;
    margin-top: 2px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.chat-header-text .status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5ff2c8;
    box-shadow: 0 0 0 4px rgba(95, 242, 200, 0.25);
    animation: statusPulse 2.2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(95, 242, 200, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(95, 242, 200, 0.12); }
}

.chat-header-buttons {
    display: flex;
    gap: 0.5rem;
}

.clear-btn,
.minimize-btn {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.2s ease, transform 0.2s ease;
    line-height: 1;
}

.clear-btn {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.45rem 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.minimize-btn {
    font-size: 1.25rem;
    padding: 0.42rem 0.72rem;
}

.clear-btn:hover,
.minimize-btn:hover {
    background: rgba(255, 255, 255, 0.32);
    transform: translateY(-1px);
}

/* Minimized = circular FAB: Daniele's face in a gradient ring, pulsing
   halo and a chat badge. The persistent teaser pill next to it does the
   talking; the button itself just has to feel alive and clickable */
.chat-container.minimized {
    width: 74px;
    height: 74px;
    max-height: 74px;
    border-radius: 50%;
    border: none;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    animation: fabPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.chat-container.minimized:hover {
    transform: scale(1.07);
    box-shadow: none;
}

.chat-container.minimized .chat-messages,
.chat-container.minimized .chat-input-container,
.chat-container.minimized .chat-disclaimer {
    display: none;
}

/* Pulsing halo ring radiating from the FAB */
.chat-container.minimized::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(29, 93, 201, 0.55);
    animation: fabPing 2.6s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
    pointer-events: none;
}

/* Chat badge pinned to the FAB, with a periodic attention wiggle */
.chat-container.minimized::after {
    content: '💬';
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    border-radius: 50%;
    background: linear-gradient(120deg, #122e75 0%, #1d5dc9 58%, #0e7fa6 100%);
    border: 2px solid #ffffff;
    box-shadow: 0 4px 10px rgba(18, 49, 126, 0.4);
    animation: badgeWiggle 9s ease-in-out 5s infinite;
    pointer-events: none;
}

@keyframes fabPop {
    from { opacity: 0; transform: scale(0.4); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fabPing {
    0% { transform: scale(0.85); opacity: 0.8; }
    70%, 100% { transform: scale(1.45); opacity: 0; }
}

@keyframes badgeWiggle {
    0%, 92%, 100% { transform: rotate(0); }
    94% { transform: rotate(-12deg) scale(1.12); }
    97% { transform: rotate(9deg) scale(1.08); }
}

.chat-container.minimized .chat-header {
    cursor: pointer;
    width: 100%;
    height: 100%;
    padding: 4px;
    border-radius: 50%;
    border: none;
    justify-content: center;
    background: linear-gradient(120deg, #122e75 0%, #1d5dc9 58%, #0e7fa6 100%);
    box-shadow: 0 16px 38px rgba(18, 49, 126, 0.42);
}

.chat-container.minimized .chat-header:hover {
    background: linear-gradient(120deg, #16399a 0%, #2570e8 58%, #1095c2 100%);
}

.chat-container.minimized .chat-header-info {
    gap: 0;
}

.chat-container.minimized .chat-header-avatar {
    width: 66px;
    height: 66px;
    border-width: 0;
    box-shadow: none;
}

.chat-container.minimized .chat-header-text {
    display: none;
}

.chat-container.minimized .clear-btn {
    display: none;
}

/* Keyboard/screen-reader path: the minimize button stretches into an
   invisible overlay covering the whole FAB, so the "open chat" action
   stays a real focusable button */
.chat-container.minimized .minimize-btn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: transparent;
    font-size: 0;
}

.chat-container.minimized .minimize-btn:hover {
    background: transparent;
    transform: none;
}

.chat-messages {
    height: 472px;
    overflow-y: auto;
    padding: 1.2rem;
    background: var(--surface-alt);
    flex: 1;
    scroll-behavior: smooth;
}

.chat-message {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.2rem;
    animation: chatSlide 0.25s ease-out;
    align-items: flex-end;
}

@keyframes chatSlide {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.message-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    border: 2px solid white;
}

.message-content {
    max-width: 79%;
    position: relative;
}

.message-bubble {
    padding: 0.72rem 0.95rem;
    border-radius: 12px;
    word-wrap: break-word;
    line-height: 1.52;
    font-size: 0.9rem;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.07);
}

/* Live-typing caret while the answer streams in */
.message-bubble.streaming::after {
    content: '▍';
    display: inline-block;
    margin-left: 1px;
    color: var(--accent);
    animation: caretBlink 0.9s steps(2, start) infinite;
}

@keyframes caretBlink {
    50% { opacity: 0; }
}

.user-message {
    flex-direction: row-reverse;
}

.user-message .message-content {
    margin-left: auto;
}

.user-message .message-bubble {
    background: linear-gradient(135deg, #d8e7fd 0%, #c5dbfb 100%);
    color: #123461;
    border-bottom-right-radius: 4px;
    font-weight: 600;
}

.assistant-message .message-bubble {
    background: #ffffff;
    color: #1d2b45;
    border-bottom-left-radius: 4px;
    border: 1px solid #dbe4f2;
}

/* Emails and URLs in an answer are linkified by js/chatbot.js: a contact
   detail the visitor has to retype is not a contact detail. Long addresses
   must wrap rather than widen the bubble. */
.message-bubble a {
    color: #1d5fae;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

.message-bubble a:hover,
.message-bubble a:focus-visible {
    color: #12457f;
}

.user-message .message-bubble a {
    color: #123461;
}

.message-bubble .inline-code {
    background: var(--surface-alt);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.85em;
    color: #1d5fae;
}

.message-time {
    font-size: 0.7rem;
    color: #76839a;
    margin-top: 0.27rem;
    text-align: right;
    font-weight: 600;
}

.assistant-message .message-time {
    text-align: left;
}

.typing-indicator-container {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.2rem;
    align-items: flex-end;
}

.typing-bubble {
    background: white;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid var(--line);
}

.typing-text {
    font-size: 0.84rem;
    color: #5e6e80;
    font-style: italic;
    font-weight: 600;
}

.typing-indicator {
    display: flex;
    gap: 4px;
    align-items: center;
}

.typing-indicator span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6fa3e0;
    animation: typing 1.4s infinite;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-8px); opacity: 1; }
}

.suggested-questions {
    margin: 1rem 0;
    padding: 0;
}

.suggestions-title {
    font-weight: 800;
    color: #3d5375;
    margin-bottom: 0.85rem;
    font-size: 0.83rem;
    text-align: center;
    letter-spacing: 0.03em;
}

.suggestion-btn {
    display: block;
    width: 100%;
    margin: 0.55rem auto;
    max-width: 90%;
    padding: 0.8rem 1rem;
    background: white;
    border: 1.5px solid #d3e0f1;
    border-radius: 11px;
    color: #243a5e;
    cursor: pointer;
    text-align: left;
    font-size: 0.84rem;
    transition: all 0.2s;
    font-family: inherit;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    font-weight: 600;
    min-height: 44px;
}

.suggestion-btn:hover {
    background: var(--surface-alt);
    border-color: #8ab4ed;
    transform: translateX(4px);
    box-shadow: 0 5px 12px rgba(29, 93, 201, 0.15);
}

.chat-input-container {
    display: flex;
    padding: 0.95rem 1.1rem;
    background: #ffffff;
    border-top: 1px solid var(--line);
    gap: 0.8rem;
    align-items: flex-end;
    position: relative;
}

#chat-input {
    flex: 1;
    padding: 0.82rem 1rem;
    border: 1.5px solid #d6e1f1;
    border-radius: 22px;
    background: var(--surface-alt);
    resize: none;
    overflow-y: hidden;
    font-family: inherit;
    font-size: 0.9rem;
    max-height: 120px;
    transition: all 0.2s;
}

#chat-input:focus {
    outline: none;
    border-color: #5b9bea;
    background: white;
    box-shadow: 0 0 0 3px rgba(29, 93, 201, 0.11);
}

#chat-input:disabled {
    background: var(--surface-alt);
    cursor: not-allowed;
    opacity: 0.7;
}

#chat-send {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1d5dc9 0%, #0e7fa6 100%);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 5px 14px rgba(29, 93, 201, 0.35);
}

.clear-btn,
.minimize-btn,
#chat-send {
    min-height: 40px;
    touch-action: manipulation;
}

#chat-send:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(29, 93, 201, 0.45);
}

#chat-send:disabled {
    background: #c4d4ef;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.65;
}

.chat-disclaimer {
    padding: 0.75rem 1.1rem;
    text-align: center;
    background: var(--surface-alt);
    border-top: 1px solid var(--line);
    font-size: 0.76rem;
    color: #5a6a80;
    font-weight: 600;
    line-height: 1.55;
}

.chat-disclaimer a {
    color: #143a92;
    text-decoration: none;
    font-weight: 700;
    margin: 0 2px;
}

.chat-disclaimer a:hover {
    text-decoration: underline;
    color: #1d5dc9;
}

/* Persistent teaser pill sitting beside the FAB */
.chat-teaser {
    position: fixed;
    right: 100px;
    bottom: 32px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 280px;
    background: #ffffff;
    color: #1c3055;
    border: 1px solid #c4d4ef;
    border-radius: 14px 14px 4px 14px;
    box-shadow: 0 14px 30px rgba(18, 49, 126, 0.24);
    padding: 11px 13px;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    animation: riseIn 0.5s ease both;
}

.chat-teaser:hover {
    border-color: #8ab4ed;
}

.chat-teaser-close {
    border: none;
    background: var(--surface-alt);
    color: #3d5375;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    flex-shrink: 0;
}

.chat-teaser-close:hover {
    background: #dce7f8;
}

/* Contact CTA card inside the chat flow */
.chat-cta-card {
    margin: 0.4rem 0 1.1rem;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(120deg, #122e75 0%, #1d5dc9 58%, #0e7fa6 100%);
    color: #f2f7ff;
    box-shadow: 0 10px 24px rgba(18, 49, 126, 0.3);
    animation: chatSlide 0.3s ease-out;
}

.chat-cta-title {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 3px;
}

.chat-cta-card p {
    font-size: 0.82rem;
    color: rgba(230, 240, 255, 0.85);
    margin-bottom: 10px;
    line-height: 1.45;
}

.chat-cta-btn {
    display: inline-block;
    background: #ffffff;
    color: #14387e;
    font-weight: 800;
    font-size: 0.84rem;
    text-decoration: none;
    border-radius: 999px;
    padding: 8px 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chat-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

/* Quick-reply chips under the latest answer */
.followup-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0.2rem 0 1.1rem 46px;
}

.followup-chips button {
    border: 1px solid #c9d9f0;
    background: #ffffff;
    color: #1d4a8f;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: all 0.2s ease;
}

.followup-chips button:hover {
    background: linear-gradient(110deg, var(--accent), var(--accent-strong));
    color: #ffffff;
    border-color: transparent;
}

/* CONSULTING */

.consulting-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0b6e4f;
    background: #dcf5ea;
    border: 1px solid #b5e6d2;
    border-radius: 999px;
    padding: 5px 14px;
    margin-bottom: 18px;
}

.consulting-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #12b981;
    box-shadow: 0 0 0 0 rgba(18, 185, 129, 0.5);
    animation: availablePulse 2.2s ease-out infinite;
}

@keyframes availablePulse {
    0% { box-shadow: 0 0 0 0 rgba(18, 185, 129, 0.45); }
    70% { box-shadow: 0 0 0 9px rgba(18, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(18, 185, 129, 0); }
}

.consulting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 20px;
    margin-bottom: 44px;
}

.consulting-card {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    padding: 24px 24px 22px 26px;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(18, 24, 36, 0.05), 0 8px 22px rgba(18, 24, 36, 0.05);
    border: 1px solid var(--line);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.consulting-card::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 0;
    width: 3px;
    height: 34px;
    border-radius: 0 3px 3px 0;
    background: var(--ca);
    opacity: 0.3;
    transition: height 0.3s ease, opacity 0.3s ease;
}

.consulting-card:hover::before {
    height: calc(100% - 48px);
    opacity: 1;
}

.consulting-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(18, 24, 36, 0.05), 0 16px 34px rgba(18, 24, 36, 0.11);
    border-color: #d2d6dd;
}

.consulting-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 12px;
}

.consulting-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: #3d4553;
    background: var(--surface-alt);
    border: 1px solid var(--line);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.consulting-card:hover .consulting-icon {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.consulting-icon svg {
    width: 22px;
    height: 22px;
}

.consulting-card h3 {
    font-size: 1.08rem;
    color: #14243c;
}

.consulting-card p {
    color: var(--muted);
    font-size: 0.93rem;
    line-height: 1.65;
}

.consulting-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.consulting-card-tags span {
    font-size: 0.74rem;
    font-weight: 500;
    color: #3d4553;
    background: var(--surface-alt);
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 4px 11px;
}

.consulting-how {
    margin-bottom: 44px;
}

.consulting-how h3.consulting-subhead,
.consulting-cta-copy h3 {
    font-size: 1.3rem;
    color: #14243c;
}

.consulting-how h3.consulting-subhead {
    margin-bottom: 20px;
}

.consulting-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    counter-reset: step;
}

.consulting-step {
    position: relative;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 20px 20px 18px 20px;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.consulting-step:hover {
    transform: translateY(-4px);
    border-color: #b8c9e7;
    box-shadow: 0 12px 24px rgba(21, 40, 71, 0.11);
}

.consulting-step::before {
    counter-increment: step;
    content: '0' counter(step);
    display: block;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 10px;
    background: var(--grad-hot-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

@supports not (background-clip: text) {
    .consulting-step::before { color: #1550e0; -webkit-text-fill-color: currentColor; }
}

.consulting-step h4 {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 1rem;
    color: #14243c;
    margin-bottom: 6px;
}

.consulting-step p {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.consulting-nda {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--surface-alt);
    border: 1px dashed #b9c8de;
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 44px;
}

.consulting-nda svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 3px;
    color: var(--accent);
}

.consulting-nda p {
    color: #46536a;
    font-size: 0.92rem;
    line-height: 1.65;
}

/* Shared CTA banner (consulting tab + contact section) */

.cta-banner {
    position: relative;
    background: linear-gradient(150deg, #232a34 0%, #1b2027 68%, #181c23 100%);
    border-radius: var(--radius-lg);
    padding: 34px 34px 32px;
    overflow: hidden;
    box-shadow: var(--shadow-strong);
}

.cta-banner::after {
    content: '';
    position: absolute;
    top: -110px;
    right: -80px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(21, 80, 224, 0.24), transparent 66%);
    pointer-events: none;
}

.cta-banner-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
}

.consulting-cta-copy h3,
.cta-banner h3 {
    color: #ffffff;
    font-size: 1.35rem;
    margin-bottom: 6px;
}

.cta-banner p {
    color: rgba(228, 238, 252, 0.85);
    font-size: 0.95rem;
    max-width: 52ch;
}

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

.btn-hot,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 12px 22px;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.btn-hot {
    color: #ffffff;
    background: var(--grad-hot);
    box-shadow: 0 8px 22px rgba(21, 80, 224, 0.32);
}

.btn-hot:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(21, 80, 224, 0.42);
}

.btn-ghost {
    color: #eaf1fc;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.32);
}

.btn-ghost:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.16);
}

.btn-hot svg,
.btn-ghost svg {
    width: 17px;
    height: 17px;
}

/* CONTACT */

.contact-section {
    margin-top: 46px;
    padding-top: 8px;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin-bottom: 26px;
}

.contact-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    box-shadow: var(--shadow-soft);
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(24, 68, 125, 0.15);
    border-color: #a9c8ef;
}

.contact-card-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
}

.contact-card-icon svg {
    width: 22px;
    height: 22px;
}

/* The text column must be allowed to shrink (flex min-width) and long
   unbreakable strings (the email address) must wrap inside the card */
.contact-card > span:last-child {
    min-width: 0;
}

.contact-card strong,
.contact-card small {
    overflow-wrap: anywhere;
}

/* The address is the longest unbreakable string of the three cards:
   slightly smaller, and the <wbr> before the @ gives it a clean
   two-line break when the card gets narrow */
.contact-card strong.contact-email {
    font-size: 0.95rem;
    letter-spacing: -0.02em;
}

.contact-card-icon {
    background: var(--surface-alt);
    border: 1px solid var(--line);
    color: #3d4553;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.contact-card:hover .contact-card-icon {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.contact-card-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 2px;
}

.contact-card strong {
    display: block;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 1.02rem;
    color: #14243c;
    letter-spacing: -0.01em;
}

.contact-card small {
    display: block;
    color: var(--muted);
    font-size: 0.85rem;
    margin-top: 1px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* NEWSLETTER (contact section) */

.newsletter-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px 30px;
    box-shadow: var(--shadow-soft);
}

.newsletter-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-width: 40ch;
}

.newsletter-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent);
}

.newsletter-copy strong {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 1.08rem;
    color: #14243c;
    letter-spacing: -0.01em;
}

.newsletter-copy small {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.newsletter-form {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
    width: 100%;
    max-width: 380px;
}

.newsletter-input {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Public Sans', sans-serif;
    font-size: 0.95rem;
    color: var(--text);
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.newsletter-input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.newsletter-submit {
    flex: 0 0 auto;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    background: var(--grad-hot);
    border: none;
    border-radius: var(--radius-md);
    padding: 12px 20px;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(21, 80, 224, 0.32);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.newsletter-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(21, 80, 224, 0.42);
}

.newsletter-status {
    flex-basis: 100%;
    font-size: 0.85rem;
    color: var(--accent-strong);
}

.newsletter-status[data-state="error"] {
    color: #b3261e;
}

@media (max-width: 640px) {
    .newsletter-block {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    .newsletter-form {
        max-width: none;
    }
}

/* Hot marker on the Consulting nav entries */

.main-tab-btn[data-tab-target="tab-consulting"]::after,
.sidebar nav a[data-tab-link="tab-consulting"]::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--grad-hot);
    margin-left: 7px;
    vertical-align: 2px;
}

@media (max-width: 768px) {
    .cta-banner {
        padding: 26px 22px 24px;
    }

    .cta-banner-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .consulting-grid,
    .consulting-steps {
        grid-template-columns: 1fr;
    }
}

/* Responsive */

/* Short laptop screens: compact the fixed sidebar. The summary is
   never clamped: full text always shows; the sidebar scrolls if
   it truly runs out of room. */
@media (min-width: 1121px) and (max-height: 800px) {
    .sidebar {
        padding: 14px 20px;
    }

    .sidebar nav a {
        min-height: 25px;
        padding: 1px 0;
    }

    .sidebar nav {
        margin: 6px 0;
    }
}

@media (max-width: 1400px) {
    body {
        grid-template-columns: 300px minmax(0, 1fr);
        padding: 14px;
    }

    /* Narrower sidebar: keep the single-line name from overflowing */
    .sidebar h1 {
        font-size: 1.4rem;
    }

    .skills-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1120px) {
    body {
        grid-template-columns: 1fr;
        grid-template-areas:
            "sidebar"
            "main";
        gap: 14px;
        padding: 12px;
        /* fixed attachment repaints the whole gradient on every scroll
           frame on mobile; the fixed constellation canvas stays anyway */
        background-attachment: scroll;
    }

    .sidebar {
        position: relative;
        width: 100%;
        height: auto;
        max-height: none;
        margin: 0;
        top: auto;
        border-radius: 20px;
    }

    .main-content {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        border-radius: 20px;
    }

    section,
    .passions-section,
    .profile-columns {
        padding: 30px 18px;
    }

    .projects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .talks-timeline {
        padding-left: 44px;
    }

    .talks-timeline::before {
        left: 14px;
    }

    .talks-year::before {
        left: -37px;
        width: 18px;
        height: 18px;
        top: 9px;
    }

    .talks-year::after {
        left: -19px;
        top: 18px;
        width: 19px;
    }

    .talks-grid,
    .sport-grid,
    .background-grid,
    .education-grid,
    .profile-columns {
        grid-template-columns: 1fr;
    }

    .sport-showcase {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .sport-primary-column {
        gap: 10px;
    }

    .sport-photo-rail {
        grid-template-columns: 1fr;
    }

    .sport-photo-card--misano .sport-photo-frame {
        aspect-ratio: 16 / 10;
    }

    .sport-photo-card--misano .sport-photo-frame img {
        object-fit: contain;
        object-position: center;
    }
}

@media (max-width: 768px) {
    .sidebar {
        margin: 0;
        padding: 22px 16px;
    }

    section,
    .passions-section,
    .profile-columns {
        padding: 24px 12px;
    }

    .projects-grid,
    .skills-grid,
    .talks-grid,
    .sport-grid {
        grid-template-columns: 1fr;
    }

    .talks-timeline {
        padding-left: 36px;
    }

    .talks-timeline::before {
        left: 11px;
    }

    .talks-year::before {
        left: -30px;
        width: 16px;
        height: 16px;
        top: 10px;
    }

    .talks-year::after {
        left: -14px;
        top: 18px;
        width: 14px;
    }

    .sport-photo-rail {
        grid-template-columns: 1fr;
    }

    .sport-photo-card--misano .sport-photo-frame {
        aspect-ratio: 16 / 9;
    }

    .sport-photo-card--misano .sport-photo-frame img {
        object-fit: contain;
        object-position: center;
        padding: 4px;
    }

    .sport-photo-lightbox {
        padding: 12px;
    }

    .sport-photo-lightbox img {
        width: min(96vw, 96vw);
        max-height: 76vh;
    }

    .passions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Nav collapses from 6 rows to wrapped pill chips */
    .sidebar nav {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin: 14px 0 6px;
    }

    .sidebar nav a {
        min-height: 0;
        margin-left: 0;
        padding: 7px 14px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 999px;
        font-size: 0.82rem;
    }

    .sidebar nav a:hover,
    .sidebar nav a:focus,
    .sidebar nav a.nav-active {
        border-color: var(--hot2);
        background: rgba(21, 80, 224, 0.18);
        padding-left: 14px;
    }

    .highlights-section {
        padding: 24px 12px 28px;
    }

    .highlights-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .hl-nav {
        display: none;
    }

    /* Taller slides on mobile: 16/9 leaves the photo too short */
    .hl-slide {
        flex: 0 0 88%;
        aspect-ratio: 1 / 1;
    }

    .hl-caption h3 {
        font-size: 1.02rem;
    }

    footer {
        padding: 28px 16px;
    }

    .company-logo {
        width: 60px;
        height: 24px;
    }

    .university-logo {
        width: 36px;
        height: 36px;
    }

    .chat-container {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-height: 87vh;
        border-radius: 18px 18px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }

    .chat-container:hover {
        transform: none;
    }

    .chat-container.minimized {
        left: auto;
        right: 14px;
        bottom: 14px;
        width: 64px;
        height: 64px;
        max-height: 64px;
        border: none;
        border-radius: 50%;
    }

    .chat-container.minimized .chat-header-avatar {
        width: 56px;
        height: 56px;
    }

    .chat-teaser {
        right: 88px;
        bottom: 25px;
        max-width: min(60vw, 240px);
        font-size: 0.82rem;
    }

    .chat-header {
        padding-top: max(0.95rem, env(safe-area-inset-top));
    }

    .chat-messages {
        height: 360px;
    }

    .message-content {
        max-width: 84%;
    }

    .suggestion-btn {
        font-size: 0.8rem;
        padding: 0.72rem 0.88rem;
        max-width: 96%;
    }

    .chat-input-container {
        padding-bottom: max(0.9rem, env(safe-area-inset-bottom));
    }

    .chat-disclaimer {
        padding-bottom: max(0.72rem, env(safe-area-inset-bottom));
    }
}

@media (max-width: 560px) {
    .chat-header {
        padding: 0.9rem 0.85rem;
    }

    .chat-header-buttons {
        gap: 0.35rem;
    }

    .chat-header-text .chat-header-name {
        font-size: 0.92rem;
    }

    .chat-header-text .status {
        font-size: 0.72rem;
    }

    .clear-btn {
        padding: 0.4rem 0.56rem;
        font-size: 0.67rem;
        min-width: 54px;
    }

    .minimize-btn {
        padding: 0.4rem 0.56rem;
        font-size: 1.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* ─── Language toggle ──────────────────────────────────────────── */
/* Sits in the utility bar, so it no longer floats over the hero type */
.topbar-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.lang-toggle {
    display: flex;
    gap: 4px;
    align-items: center;
}
.lang-btn {
    border: 0;
    background: none;
    padding: 2px;
    cursor: pointer;
    border-radius: 5px;
    line-height: 0;
    opacity: 0.45;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.lang-btn svg {
    width: 24px;
    height: 15px;
    border-radius: 3px;
    display: block;
}
.lang-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.lang-btn.active { opacity: 1; box-shadow: 0 0 0 2px rgba(31, 79, 143, 0.35); }
@media (max-width: 768px) {
    .lang-toggle { top: 10px; right: 10px; padding: 5px 8px; }
    .lang-btn svg { width: 31px; height: 19px; }
}

/* ── Reveal on scroll ───────────────────────────────────────────────────
   .will-reveal is applied by script, never in the served HTML, so content
   is visible at rest and stays visible if the script never runs. */
.will-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
}

.will-reveal.is-revealed {
    opacity: 1;
    transform: none;
}

/* ── Collapsible skill lists ────────────────────────────────────────────
   Animates on grid-template-rows so the panel expands to its real height
   without a hard-coded max-height. */
.skill-more {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.skill-more > ul {
    overflow: hidden;
    min-height: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 0;
    transition: padding-top 0.34s ease;
}

.skill-card.is-open .skill-more {
    grid-template-rows: 1fr;
}

.skill-card.is-open .skill-more > ul {
    padding-top: 8px;
}

.skill-toggle {
    margin-top: 12px;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    background: none;
    border: 0;
    padding: 4px 0;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.skill-toggle:hover {
    border-bottom-color: var(--accent);
}

.skill-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .will-reveal,
    .skill-more,
    .skill-more > ul {
        transition: none;
    }
}

/* ── Education cards (restored: these were removed with the sidebar block,
      which left .university-logo with no base rule, so the Bicocca mark
      rendered at its natural size) ─────────────────────────────────────── */
.education-card {
    background: var(--surface);
    border-radius: 16px;
    padding: 20px 18px 17px;
    box-shadow: 0 1px 2px rgba(18, 24, 36, 0.05), 0 8px 22px rgba(18, 24, 36, 0.05);
    border: 1px solid var(--line);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.education-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(18, 24, 36, 0.05), 0 16px 34px rgba(18, 24, 36, 0.11);
    border-color: #d2d6dd;
}

.education-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.education-card h3 {
    font-size: 1rem;
    margin-bottom: 4px;
    font-weight: 700;
    color: var(--text);
}

.education-head h3 {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}

.university-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #ffffff;
    padding: 4px;
    flex: 0 0 auto;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

.education-card:hover .university-logo {
    filter: grayscale(0);
    opacity: 1;
}

.card-university-link,
.education-card .university {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    transition: color 0.2s ease;
}

.card-university-link:hover {
    color: var(--accent-strong);
    text-decoration: underline;
}

.education-card .university { margin-bottom: 2px; }

.education-card .year {
    font-size: 0.82rem;
    color: var(--muted);
}

.education-card .year + .year { margin-top: 1px; }

.education-note {
    margin-top: 2px;
    padding: 14px 18px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--muted);
    background: var(--surface-alt);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
}

/* ── Page hero ──────────────────────────────────────────────────────────
   The home hero's treatment at inner-page scale: same fixed image and
   clip-path containing block, shorter, with the section heading on it. */
.page-hero {
    /* The image is fixed at exactly the band's height rather than 100svh.
       At full viewport height a 3:2 photo overflows this box by only ~44px,
       so object-position had almost no travel and every hero showed the top
       of its picture. Matching the heights gives it real range. */
    --band: min(66svh, 560px);
    --topbar-h: 40px;
    position: relative;
    min-height: var(--band);
    max-width: none;
    padding: 0;
    display: flex;
    align-items: flex-end;
    clip-path: inset(0);
    background: #0d1117;
    overflow: hidden;
}

.page-hero-img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* The image is fixed to the viewport top, but the band starts below the
       utility bar. Without that extra height the last 40px of the band had
       no image behind it and showed the section's own dark ground. */
    height: calc(var(--band) + var(--topbar-h) + 56px);
    object-fit: cover;
    object-position: 50% 50%;
    z-index: 0;
}

/* Framed per picture, so each subject sits inside the visible band */
.page-hero--talks .page-hero-img { object-position: 50% 56%; }
.page-hero--sport .page-hero-img { object-position: 52% 21%; }

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(8, 12, 19, 0.9) 0%, rgba(8, 12, 19, 0.7) 40%, rgba(8, 12, 19, 0.2) 76%, rgba(8, 12, 19, 0.05) 100%),
        linear-gradient(180deg, rgba(8, 12, 19, 0.74) 0%, transparent 32%, transparent 58%, rgba(8, 12, 19, 0.6) 100%);
}

.page-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container-max);
    padding: 0 44px 52px;
    margin: 0 auto 0 max(0px, calc((100% - var(--container-max)) / 2));
}

.page-hero-title {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.08;
    color: #ffffff;
    margin: 0 0 12px;
    text-wrap: balance;
}

.page-hero-title .hero-accent { color: #7fd8ff; }

.page-hero-sub {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    max-width: 54ch;
}

/* The panels below must paint their own ground, or the fixed image
   shows through the page as it scrolls past the hero. */
#sport,
#talks {
    position: relative;
    z-index: 2;
    background: var(--surface);
}

@media (max-width: 820px) {
    /* Must track .topbar-inner's taller mobile min-height, or the band's
       last pixels lose their image again. */
    .page-hero { --band: min(54svh, 400px); --topbar-h: 46px; }
    .page-hero--talks .page-hero-img { object-position: 50% 60%; }
    .page-hero--sport .page-hero-img { object-position: 54% 19%; }
    .page-hero-inner { padding: 0 20px 34px; margin-left: 0; }

    .page-hero::before {
        background: linear-gradient(180deg,
            rgba(8, 12, 19, 0.66) 0%,
            rgba(8, 12, 19, 0.3) 30%,
            rgba(8, 12, 19, 0.8) 62%,
            rgba(8, 12, 19, 0.94) 100%);
    }
}

/* ── Background & Education ─────────────────────────────────────────────
   Restored (these rules sat inside the sidebar block and went out with it)
   and rebuilt: two stacked chapters instead of two cramped boxed columns,
   each opening with a large heading over its own tinted band. */
.profile-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    max-width: none;
}

.profile-column {
    padding: 62px max(28px, calc((100% - var(--container-max)) / 2 + 28px));
    border-top: 1px solid var(--line);
}

/* Alternating grounds keep the two chapters visibly apart */
.profile-column:nth-child(1) { background: var(--surface); }
.profile-column:nth-child(2) { background: var(--surface-alt); }

.profile-column h2 {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text);
    margin: 0;
}

.profile-column h2::after {
    content: '';
    display: block;
    width: 62px;
    height: 5px;
    border-radius: 999px;
    margin-top: 16px;
    background: linear-gradient(90deg, var(--hot0), var(--hot3));
}

.profile-column:nth-child(2) h2::after {
    background: linear-gradient(90deg, var(--hot3), var(--hot0));
}

.profile-column .column-subtitle {
    font-size: 1.02rem;
    color: var(--muted);
    margin: 20px 0 34px;
    max-width: 58ch;
}

/* Both chapters now span the full width, so their cards get real columns */
.background-grid,
.education-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 18px;
    align-items: start;
}

.education-note {
    grid-column: 1 / -1;
}

@media (max-width: 820px) {
    .profile-column { padding: 40px 20px; }
    .profile-column .column-subtitle { margin: 14px 0 24px; }
    .background-grid,
    .education-grid { grid-template-columns: 1fr; }
}

/* Logo cards: a brand wordmark, not a screenshot, so it is contained and
   centred on its own ground instead of cropped to fill. The imparer.ai asset
   is trimmed to the wordmark's exact bounds, which is what makes centring
   here true centring - the original PNG sits high in its canvas. */
.project-media--logo {
    height: 280px;
    display: grid;
    place-items: center;
    padding: 0 clamp(24px, 8%, 56px);
    background:
        radial-gradient(120% 140% at 50% 0%, #f4f0ff 0%, #ffffff 62%);
    border-bottom: 1px solid var(--line);
}

.project-card .project-media--logo img {
    width: 100%;
    height: auto;
    max-height: 104px;
    object-fit: contain;
    cursor: default;
}

/* The 1.28 zoom is for screenshots; on a wordmark it just clips the edges */
.project-card:hover .project-media--logo img,
.project-card:focus-within .project-media--logo img {
    transform: scale(1.05);
}

@media (max-width: 820px) {
    .project-media--logo { height: 220px; }
    .project-card .project-media--logo img { max-height: 86px; }
}

/* AlphaQuants ships as a 16:9 banner with its own dark ground, so it fills
   the slot like a screenshot; framed a touch high to centre the wordmark. */
.project-card .project-media img[src$="alphaquants.jpeg"] {
    object-position: 50% 44%;
}


/* ── Mobile ergonomics ──────────────────────────────────────────────────
   The utility bar's controls were 16-17px tap targets. Padding lifts them
   to ~40px without changing how they look, and the mono micro-labels come
   up to a size that survives a phone screen. */
@media (max-width: 820px) {
    .topbar-inner { min-height: 46px; }

    .topbar-social { gap: 6px; }

    .topbar-social a {
        padding: 11px 8px;
    }

    .topbar-mail {
        padding: 11px 6px;
        margin-right: -6px;
    }

    .lang-btn {
        padding: 9px 5px;
    }

    .lang-toggle { gap: 0; }

    body.has-hero .sitehead { top: 46px; }

    .intro-eyebrow,
    .trackrecord-label { font-size: 0.72rem; }

    .intro-meta dt { font-size: 0.7rem; }

    .hl-tag { font-size: 0.7rem; }

    /* Chat teaser was landing on top of the intro copy */
    .chat-teaser { max-width: calc(100vw - 108px); }
}