/* Profile refresh: retain the existing dark palette and project artwork. */
:root { --profile-accent: #a5dfff; }
.site-section { max-width: 1140px; margin: 0 auto; padding: 64px 0; scroll-margin-top: 24px; }
.site-section h2, #me-contact h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.2; margin-bottom: 28px; }
.site-section h3 { font-size: 1.2rem; font-weight: 600; line-height: 1.5; margin-bottom: 12px; }
.site-section p { line-height: 1.8; }
.site-nav { max-width: 1240px; margin: auto; padding: 22px 30px; }
.site-nav nav { display: flex; align-items: center; gap: 32px; }
.site-nav ul { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.site-nav a { font-size: 14px; }
.site-nav a:hover, .text-link:hover { color: var(--profile-accent); }
.nav-email { margin-left: auto; }
.profile-hero { display: grid; grid-template-columns: 1fr 290px; align-items: center; gap: 80px; padding-top: 62px; padding-bottom: 92px; }
.eyebrow { color: var(--profile-accent); font-size: 13px; font-weight: 500; letter-spacing: .06em; margin-bottom: 18px; }
.profile-hero h1 { font-size: clamp(2.5rem, 4.5vw, 3.9rem); font-weight: 600; line-height: 1.13; letter-spacing: -.025em; }
.hero-role { font-size: 18px; margin-top: 24px; color: var(--profile-accent); }
.hero-intro { font-size: 18px; margin-top: 18px; max-width: 640px; }
.hero-detail { font-size: 13px; margin-top: 22px; }
.hero-portrait img { width: 100%; height: auto; border-radius: 12px; border: 1px solid #7598bb; }
.hero-portrait figcaption { font-size: 12px; margin-top: 14px; color: #c2cedb; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; margin-top: 30px; }
.primary-link { display: inline-block; background: #b5e4ff; color: #14213c; border-radius: 6px; padding: 13px 18px; font-weight: 600; font-size: 14px; }
.primary-link:hover { background: #e0f3ff; }
.text-link { font-size: 14px; }
#me-expertise, #me-about, #me-learning, #me-latest, #me-involvements { border-top: 1px solid #ffffff29; }
.expertise-grid, .about-grid, .learning-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px 60px; }
.expertise-grid article { padding-top: 10px; }
.about-grid .content p { margin-bottom: 18px; }
.show-more-btn { color: var(--profile-accent); font-size: 14px; margin-top: 12px; padding: 8px 0; }
.learning-grid article { border-left: 2px solid #82b4d6; padding-left: 24px; }
.qualification-date, .qualification-detail { font-size: 13px; color: #c2cedb; }
.qualification-date { margin-bottom: 9px; }
.qualification-detail { margin-top: 10px; }
.section-intro { max-width: 740px; margin-bottom: 28px; }
.partner-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; margin-top: 36px; }
.partner-grid img { max-width: 180px; height: 70px; object-fit: contain; object-position: left center; margin-bottom: 24px; }
.partner-grid p { font-size: 15px; }
.experiences-image { width: 100%; }
.containerTab { max-height: none; }
#me-contact { max-width: 1140px; padding-top: 64px; }
#me-contact .section-intro { font-size: 18px; }
:where(a,button,input,textarea):focus-visible { outline: 3px solid #a5dfff; outline-offset: 5px; }
[hidden] { display: none !important; }
@media(max-width: 800px) {
 .site-nav { padding: 20px; } .site-nav nav { flex-wrap: wrap; gap: 18px; } .site-nav ul { order: 3; width: 100%; gap: 10px 22px; } .site-nav a { font-size: 13px; }
 .site-section { padding: 44px 0; } .profile-hero { grid-template-columns: 1fr; gap: 32px; } .hero-portrait { max-width: 220px; } .hero-intro { font-size: 17px; }
 .expertise-grid,.about-grid,.learning-grid,.partner-grid { grid-template-columns: 1fr; gap: 30px; } .containerTab { padding: 24px 18px 58px; }
}
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition: none !important; } }

/* Original framed hero, compact portrait and sticky navigation. */
.site-nav { position: sticky; top: 0; z-index: 1000; max-width: none; background: rgba(23, 24, 61, .94); backdrop-filter: blur(14px); border-bottom: 1px solid #ffffff18; }
.site-nav nav { max-width: 1180px; margin: auto; }
.site-section, #me-contact, .containerTab { scroll-margin-top: 125px; }
.framed-hero { padding-top: 48px; padding-bottom: 76px; }
.hero-heading { text-align: center; position: relative; }
.hero-heading h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.25; font-weight: 500; }
.hero-heading h1 span { font-size: .65em; font-weight: 300; white-space: nowrap; }
#box-border.hero-frame { position: relative; max-width: 860px; margin: 130px auto 0; padding: 64px 60px; border: 1px solid rgba(145, 163, 211, .32); border-radius: 20px; animation: none; background: #10163330; box-shadow: 0 25px 50px -12px rgba(148, 124, 236, .25); }
.hero-photo { position: absolute; top: -82px; left: -24px; width: 150px; height: auto; border-radius: 10px; border: 1px solid #688dca; box-shadow: 0 12px 32px #0005; }
.hero-frame-copy { text-align: center; }
.hero-frame-copy h2 { margin: 0 0 22px; }
.hero-frame-copy .hero-intro { margin: 0 auto 18px; max-width: 660px; }
.hero-frame-copy .hero-actions { justify-content: center; }
.read-more-details { overflow: hidden; }
.containerTab { transition: none; }
@media(max-width: 800px) {
 .site-nav { padding: 12px 20px; }
 .site-nav .brand-link img { width: 36px; height: 36px; }
 .site-nav nav { gap: 12px; }
 .site-section, #me-contact, .containerTab { scroll-margin-top: 150px; }
 #box-border.hero-frame { margin-top: 106px; padding: 98px 22px 32px; }
 .hero-photo { width: 110px; top: -68px; left: 50%; transform: translateX(-50%); }
 .hero-frame-copy h2 { font-size: 1.9rem; }
 .framed-hero { padding-top: 30px; }
}

/* Keep the original rotating background shapes behind the framed hero. */
.framed-hero { position: relative; isolation: isolate; }
.hero-heading.skyrim { position: static; }
.framed-hero .skyrim::before, .framed-hero .skyrim::after,
.framed-hero .skyrim3::before { pointer-events: none; z-index: -1; }

/* Hero copy size and original email indicator. */
.hero-frame-copy p { font-size: 20px; }
.nav-email { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.nav-email svg { width: 22px; height: 16px; fill: currentColor; }
.email-dot { position: absolute; width: 6px; height: 6px; top: 9px; right: 6px; border-radius: 50%; background: #a5dfff; }
.email-dot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: email-pulse 1.5s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes email-pulse { 75%, 100% { transform: scale(2.5); opacity: 0; } }