:root{--bg:#05070b;--bg-2:#0d1119;--card:rgba(14,19,28,.82);--text:#f5f7fb;--muted:#9ba7b8;--line:rgba(255,255,255,.11);--accent:#00d4ff;--accent-2:#a900ff;--shadow:0 22px 70px rgba(0,0,0,.36);--radius:20px;color-scheme:dark}.light{--bg:#f7f8fb;--bg-2:#eef1f6;--card:rgba(255,255,255,.88);--text:#121621;--muted:#5f6978;--line:rgba(10,20,35,.13);--shadow:0 20px 60px rgba(30,45,70,.12);color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.65;overflow-x:hidden;transition:background .25s,color .25s}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}button,input,textarea{font:inherit}.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}.narrow{width:min(960px,calc(100% - 40px))}.center{text-align:center}.section{padding:100px 0;position:relative}.page-section{min-height:65vh;padding-top:140px}.site-header{position:fixed;inset:0 0 auto;z-index:100;background:color-mix(in srgb,var(--bg) 72%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}.header-inner{height:68px;display:flex;align-items:center;gap:30px}.site-brand{font-weight:800;font-size:1.25rem;white-space:nowrap}.site-brand>a{background:linear-gradient(90deg,var(--accent),#77fff4);-webkit-background-clip:text;color:transparent}.custom-logo{max-height:44px;width:auto}.site-nav{margin-left:auto}.site-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:10px}.site-menu a{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;color:var(--muted);font-weight:500;transition:.2s}.site-menu a:hover,.current-menu-item>a{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}.site-menu svg{font-size:18px}.header-actions{display:flex;align-items:center;gap:8px}.theme-toggle,.menu-toggle{width:42px;height:42px;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:12px;display:grid;place-items:center;cursor:pointer}.icon-sun{display:none}.light .icon-sun{display:block}.light .icon-moon{display:none}.menu-toggle{display:none;padding:10px}.menu-toggle span{height:2px;width:20px;background:currentColor;display:block;margin:3px}.stars{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:.8}.stars i{position:absolute;top:0;left:0;width:2px;height:2px;background:transparent;will-change:transform}.stars i:nth-child(1){box-shadow:var(--stars-1);animation:stars 52s linear infinite}.stars i:nth-child(2){width:1px;height:1px;box-shadow:var(--stars-2);animation:stars 88s linear infinite}.stars i:nth-child(3){width:3px;height:3px;box-shadow:var(--stars-3);animation:stars 130s linear infinite}@keyframes stars{to{transform:translateY(-2000px)}}main,.site-footer{position:relative;z-index:1}.hero{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at bottom,#171d28 0%,transparent 65%)}.light .hero{background:radial-gradient(ellipse at bottom,#dce9f2 0%,transparent 65%)}.hole-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.3}.hero-glow{position:absolute;width:38%;height:75%;left:50%;top:-42%;transform:translateX(-50%);border-radius:0 0 50% 50%;filter:blur(45px);background:linear-gradient(20deg,#00f8f1,#fe848f 40%,#a900ff 75%,#ffbd1e);opacity:.42;animation:glow 5s linear infinite alternate}@keyframes glow{to{filter:blur(65px) hue-rotate(50deg)}}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--accent) 8%,transparent),transparent 55%);pointer-events:none}.hero-content{position:relative;z-index:3;text-align:center;max-width:920px;animation:hero-in .85s cubic-bezier(.16,1,.3,1) both}@keyframes hero-in{from{opacity:0;transform:translateY(25px)}}.hero h1{font-size:clamp(2.7rem,7vw,5.3rem);line-height:1.08;margin:0 0 22px;font-weight:800;letter-spacing:-.05em}.hero h1 span,.section-heading h2,.page-heading h1{background:linear-gradient(100deg,var(--accent),#8cf8ef,var(--accent-2));-webkit-background-clip:text;color:transparent}.hero h2{font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.3;margin:0 0 18px}.hero p{color:var(--muted);font-size:clamp(1rem,2vw,1.2rem);max-width:760px;margin:0 auto 30px}.hero-buttons{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.button{min-height:48px;padding:11px 21px;border:1px solid transparent;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:650;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}.button:hover{transform:translateY(-2px)}.button-primary{color:#001218;background:linear-gradient(120deg,var(--accent),#75f6eb);box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 24%,transparent)}.button-outline{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:color-mix(in srgb,var(--bg) 60%,transparent);color:var(--text)}.skills-section{background:linear-gradient(var(--bg),var(--bg-2))}.section-heading,.page-heading{text-align:center;max-width:760px;margin:0 auto 54px}.section-heading h2,.page-heading h1{font-size:clamp(2rem,5vw,3.1rem);line-height:1.15;margin:0 0 15px}.section-heading p,.page-heading p{color:var(--muted);font-size:1.08rem}.page-heading>span{display:block;color:var(--accent);text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;font-weight:700;margin-bottom:12px}.skills-grid{max-width:900px;margin:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.skill-card,.project-card,.profile-card,.contact-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(12px)}.skill-card{padding:25px}.skill-title{display:flex;align-items:center;gap:15px}.skill-title h3{font-size:1.1rem;margin:0;flex:1}.skill-title b{color:var(--muted);font-size:.85rem}.skill-icon{width:45px;height:45px;border-radius:50%;background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);display:grid;place-items:center;font-size:22px}.progress{height:8px;background:var(--bg-2);border-radius:99px;margin-top:18px;overflow:hidden}.progress i{display:block;width:var(--level);height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:inherit;transform-origin:left;animation:grow 1.1s ease both}@keyframes grow{from{transform:scaleX(0)}}.projects-section{background:var(--bg)}.project-grid,.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.project-card{overflow:hidden;transition:transform .25s,border-color .25s}.project-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}.project-image{height:220px;background:linear-gradient(135deg,var(--bg-2),color-mix(in srgb,var(--accent-2) 20%,var(--bg)));display:block;overflow:hidden}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.project-card:hover .project-image img{transform:scale(1.04)}.project-placeholder{display:grid;place-items:center;height:100%;font-size:52px;color:var(--accent)}.project-card-body{padding:24px}.project-categories{color:var(--accent);font-size:.77rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.project-card h2{font-size:1.3rem;line-height:1.3;margin:8px 0}.project-card p{color:var(--muted);font-size:.93rem}.tags{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0}.tags span{font-size:.74rem;background:color-mix(in srgb,var(--accent) 9%,transparent);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);padding:4px 9px;border-radius:99px}.text-link,.back-link{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-weight:650}.empty-state{grid-column:1/-1;text-align:center;border:1px dashed var(--line);padding:50px;border-radius:var(--radius)}.profile-card{display:grid;grid-template-columns:310px 1fr;overflow:hidden;margin-bottom:70px}.profile-image{min-height:330px;position:relative}.profile-image img{width:100%;height:100%;object-fit:cover}.profile-image>div{position:absolute;inset:auto 0 0;padding:26px;background:linear-gradient(transparent,rgba(0,0,0,.9));display:flex;flex-direction:column;color:white}.profile-copy{padding:35px}.profile-copy p{color:var(--muted);margin-top:0}.about-block{margin:65px 0}.about-block>h2{display:flex;align-items:center;gap:12px;font-size:1.7rem}.about-block>h2 svg{color:var(--accent)}.timeline{border-left:1px solid var(--line);margin-left:10px}.timeline article{position:relative;padding:0 0 35px 34px}.timeline article>i{position:absolute;width:13px;height:13px;background:var(--accent);border-radius:50%;left:-7px;top:8px;box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 15%,transparent)}.timeline h3{margin:4px 0 0}.timeline time{color:var(--accent);font-size:.8rem;font-weight:700}.timeline strong,.timeline p{color:var(--muted)}.orbit{height:430px;border:1px solid var(--line);border-radius:var(--radius);position:relative;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 10%,transparent),transparent 55%)}.orbit:before,.orbit:after{content:"";position:absolute;width:330px;height:330px;border:1px solid var(--line);border-radius:50%}.orbit:after{width:230px;height:230px}.orbit-center{text-align:center;max-width:190px;display:flex;flex-direction:column;z-index:2}.orbit-center strong{font-size:1.3rem}.orbit-center span{font-size:.76rem;color:var(--muted)}.orbit-item{position:absolute;left:50%;top:50%;padding:7px 12px;background:var(--card);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:99px;font-size:.78rem;white-space:nowrap;transform:rotate(calc(360deg/var(--total)*var(--i))) translateX(165px) rotate(calc(-360deg/var(--total)*var(--i)));animation:orbit 35s linear infinite reverse;z-index:3}@keyframes orbit{to{transform:rotate(calc(360deg/var(--total)*var(--i) - 360deg)) translateX(165px) rotate(calc(-360deg/var(--total)*var(--i) + 360deg))}}.filters{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:-25px 0 40px}.filters button{border:1px solid var(--line);border-radius:99px;padding:8px 15px;background:var(--card);color:var(--muted);cursor:pointer}.filters button.active{background:var(--accent);color:#001218;border-color:var(--accent)}.project-card.is-hidden{display:none}.project-hero{border-radius:var(--radius);overflow:hidden;margin-bottom:25px}.project-actions{display:flex;gap:12px;margin:25px 0}.entry-content{font-size:1.04rem}.entry-content a{color:var(--accent);text-decoration:underline}.entry-content h2,.entry-content h3{line-height:1.3;margin-top:1.8em}.entry-content img{border-radius:14px}.tags.large span{font-size:.9rem;padding:7px 12px}.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:35px}.gallery img{border-radius:15px;width:100%}.contact-card{padding:40px}.contact-card>h2{text-align:center;font-size:1.15rem;color:var(--muted);margin:0 0 28px}.contact-map{width:100%;height:260px;border:0;border-radius:14px;margin-bottom:28px;filter:saturate(.7)}.contact-form{display:grid;gap:18px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.contact-form label{display:grid;gap:7px;color:var(--muted);font-size:.86rem;font-weight:600}.contact-form input,.contact-form textarea{width:100%;border:1px solid var(--line);border-radius:11px;padding:12px 14px;background:color-mix(in srgb,var(--bg) 65%,transparent);color:var(--text);outline:none}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}.form-status{min-height:24px;color:var(--accent)}.site-footer{background:var(--bg-2);padding:65px 0 25px;border-top:1px solid var(--line)}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.2fr;gap:50px}.site-footer h2{margin-top:0}.site-footer h3{font-size:1rem}.site-footer p,.site-footer li{color:var(--muted)}.site-footer ul{list-style:none;padding:0}.site-footer li{margin:8px 0}.social-links{display:flex;gap:10px}.social-links a{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center}.contact-list li{display:flex;align-items:center;gap:9px}.copyright{border-top:1px solid var(--line);margin-top:40px;padding-top:22px;text-align:center;color:var(--muted);font-size:.85rem}.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s,transform .75s}.reveal.visible{opacity:1;transform:none}.short-hero{min-height:70vh}.pagination .nav-links{display:flex;justify-content:center;gap:8px;margin-top:40px}.pagination .page-numbers{padding:8px 13px;border:1px solid var(--line);border-radius:10px}.pagination .current{background:var(--accent);color:#001218}.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:900px){.site-nav{position:fixed;inset:68px 0 auto;background:var(--bg);border-bottom:1px solid var(--line);padding:18px;transform:translateY(-140%);transition:.25s;z-index:-1}.nav-open .site-nav{transform:none}.site-menu{flex-direction:column;align-items:stretch}.site-menu a{justify-content:center}.menu-toggle{display:block}.project-grid,.posts-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.footer-intro{grid-column:1/-1}.profile-card{grid-template-columns:280px 1fr}}
@media(max-width:650px){.container,.narrow{width:min(100% - 28px,1180px)}.section{padding:75px 0}.page-section{padding-top:110px}.hero{min-height:calc(100vh - 20px)}.hero-buttons .button{width:100%}.skills-grid,.project-grid,.posts-grid,.form-row,.footer-grid{grid-template-columns:1fr}.profile-card{grid-template-columns:1fr}.profile-image{height:350px}.contact-card{padding:24px}.orbit{height:370px}.orbit:before{width:270px;height:270px}.orbit:after{width:190px;height:190px}.orbit-item{transform:rotate(calc(360deg/var(--total)*var(--i))) translateX(135px) rotate(calc(-360deg/var(--total)*var(--i)));animation:none;font-size:.68rem;padding:5px 8px}.gallery{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}.stars{display:none}}
.skill-groups{display:grid;gap:12px}.skill-groups details{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:0 20px}.skill-groups summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:18px 0;font-weight:650}.skill-groups details[open] summary svg{transform:rotate(180deg)}.skill-groups p{color:var(--muted)}

/* Hero composition mirrors the original React version. */
.hero{min-height:calc(100vh - 0px);isolation:isolate;background:#02060b}
.light .hero{background:#f7f8fb}
.hole-canvas{z-index:0;opacity:.52}
.hero:before{content:"";position:absolute;z-index:1;left:50%;top:50%;width:140%;height:140%;transform:translate3d(-50%,-50%,0);background:radial-gradient(ellipse at 50% 55%,transparent 10%,#02060b 50%);pointer-events:none}
.light .hero:before{background:radial-gradient(ellipse at 50% 55%,transparent 10%,rgba(247,248,251,.96) 50%)}
.hero:after{content:"";position:absolute;z-index:2;inset:0;background:radial-gradient(ellipse at 50% 72%,#c000ff 13%,transparent 61%);mix-blend-mode:overlay;opacity:.58;pointer-events:none}
.hero-glow{z-index:2;top:-71.5%;width:30%;height:140%;border-radius:0 0 50% 50%;filter:blur(42px);opacity:.82;mix-blend-mode:plus-lighter;background:linear-gradient(20deg,#00f8f1,#ffbd1e20 16.5%,#fe848f 33%,#fe848f20 49.5%,#00f8f1 66%,#00f8f160 85.5%,#ffbd1e);background-size:100% 200%;animation:portal-flow 5s linear infinite}
@keyframes portal-flow{to{background-position:0 300%}}
.hero-content{max-width:900px;padding-top:35px}
.hero h1{font-size:clamp(2.5rem,4vw,3.75rem);line-height:1.1;margin-bottom:20px;background:linear-gradient(90deg,#c6f7ff 0%,#45e9ff 42%,#00f8f1 67%,#9e5cff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.035em}
.hero h1 span{background:none;color:inherit}
.hero h2{font-size:clamp(1.35rem,2.1vw,1.9rem);margin-bottom:14px}
.hero p{font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.55;margin-bottom:28px;color:#d3d8e2;text-shadow:0 1px 18px rgba(0,0,0,.55)}
.hero .button-primary{background:#087cf0;color:#fff;box-shadow:0 10px 28px rgba(8,124,240,.25)}
.hero .button-outline{border-color:#087cf0;background:rgba(2,6,11,.38)}
body.admin-bar .site-header{top:32px}
@media(max-width:782px){body.admin-bar .site-header{top:46px}}
@media(max-width:650px){.hero-content{padding-top:55px}.hero h1{font-size:clamp(2.35rem,12vw,3.25rem)}.hole-canvas{opacity:.42}.hero-glow{width:56%;opacity:.68}}

/* Animated brand and scroll-triggered competencies. */
.site-brand>a{position:relative;display:inline-block;background:linear-gradient(105deg,#1687ff 0%,#23e7f2 22%,#92f7e8 43%,#b45cff 64%,#1687ff 100%);background-size:260% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brand-shimmer 6s cubic-bezier(.45,0,.55,1) infinite;filter:drop-shadow(0 0 10px rgba(35,231,242,.12));transition:transform .3s ease,filter .3s ease,letter-spacing .3s ease}
.site-brand>a:after{content:"";position:absolute;left:12%;right:12%;bottom:-5px;height:1px;border-radius:99px;background:linear-gradient(90deg,transparent,#23e7f2,#b45cff,transparent);transform:scaleX(.25);opacity:0;transition:transform .35s ease,opacity .35s ease}
.site-brand>a:hover{transform:translateY(-1px);letter-spacing:.015em;filter:drop-shadow(0 0 13px rgba(35,231,242,.38))}
.site-brand>a:hover:after{transform:scaleX(1);opacity:.9}
.custom-logo-link{display:inline-block;animation:brand-logo-float 5s ease-in-out infinite;filter:drop-shadow(0 0 8px rgba(35,231,242,.18))}
@keyframes brand-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes brand-logo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.competencies-heading.reveal{opacity:0;transform:translateY(26px) scale(.975);clip-path:inset(0 42% 0 42%);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),clip-path 1s cubic-bezier(.16,1,.3,1)}
.competencies-heading.reveal.visible{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.competencies-heading h2{background-size:220% auto;animation:competencies-gradient 5s ease-in-out infinite}
@keyframes competencies-gradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.skill-card.reveal{opacity:0;transform:translate3d(var(--slide),24px,0) scale(.97);filter:blur(5px);transition:opacity .72s cubic-bezier(.16,1,.3,1) var(--stagger),transform .82s cubic-bezier(.16,1,.3,1) var(--stagger),filter .6s ease var(--stagger),border-color .25s ease,box-shadow .25s ease}
.skill-card.reveal.visible{opacity:1;transform:translate3d(0,0,0) scale(1);filter:none}
.skill-card .skill-icon{transform:scale(.65) rotate(-12deg);opacity:.35;transition:transform .55s cubic-bezier(.34,1.56,.64,1) calc(var(--stagger) + 280ms),opacity .4s ease calc(var(--stagger) + 280ms)}
.skill-card.visible .skill-icon{transform:scale(1) rotate(0);opacity:1}
.skill-card .progress i{animation:none;transform:scaleX(0);transition:transform 1.15s cubic-bezier(.16,1,.3,1) calc(var(--stagger) + 360ms)}
.skill-card.visible .progress i{transform:scaleX(1)}
.skill-card:hover{border-color:color-mix(in srgb,var(--accent) 38%,var(--line));box-shadow:0 22px 55px color-mix(in srgb,var(--accent) 9%,transparent)}
@media(max-width:650px){.skill-card.reveal{--slide:0px!important;transform:translate3d(0,28px,0) scale(.97)}}
@media(prefers-reduced-motion:reduce){.site-brand>a,.custom-logo-link,.competencies-heading h2{animation:none}.competencies-heading.reveal,.skill-card.reveal,.skill-card .skill-icon,.skill-card .progress i{opacity:1;transform:none;filter:none;clip-path:none;transition:none}}

/* Explicit light-theme contrast for hero elements. */
.light .hero h2{color:#111827;text-shadow:0 1px 18px rgba(255,255,255,.5)}
.light .hero p{color:#465163;text-shadow:none}
.light .hero .button-outline{color:#111827;background:rgba(255,255,255,.72);border-color:#087cf0;box-shadow:0 8px 24px rgba(30,64,175,.08)}
.light .hero .button-outline:hover{background:#fff}
.light .hole-canvas{opacity:.32}
.light .hero-glow{opacity:.45;mix-blend-mode:multiply}

/* Mobile hero: compact layout and a viewport-shaped canvas. */
@media(max-width:650px){
  body.admin-bar .hero{min-height:calc(100svh - 46px)}
  .hero{min-height:100svh;padding:74px 0 34px}
  .hero-content{padding-top:0}
  .hero h1{font-size:clamp(2.15rem,10.5vw,2.8rem);line-height:1.08;margin-bottom:18px}
  .hero h2{font-size:clamp(1.18rem,5.5vw,1.4rem);margin-bottom:14px}
  .hero p{font-size:.98rem;line-height:1.5;margin-bottom:24px}
  .hero-buttons{width:100%;display:flex;flex-wrap:nowrap;gap:10px}
  .hero-buttons .button{width:auto;min-width:0;flex:1 1 0;padding:10px 7px;font-size:.86rem;white-space:nowrap}
  .hero-glow{width:48%;height:110%;top:-55%}
}
@media(max-width:355px){.hero-buttons{flex-wrap:wrap}.hero-buttons .button{width:100%;flex-basis:100%}}

/* 1.4: first-screen content must be visible without JS or entrance animation. */
.hero-content{animation:none;opacity:1;transform:none}
.page-heading.reveal{opacity:1;transform:none}
.reveal:not(.reveal-pending){opacity:1;transform:none;clip-path:none;filter:none}
.skill-card:not(.reveal-pending) .skill-icon,.skill-card:not(.reveal-pending) .progress i{opacity:1;transform:none}
.iconify{display:inline-block;width:1em;height:1em;vertical-align:-.125em;flex-shrink:0}
.icon-sun{display:none}
.light .icon-sun{display:block}
.light .icon-moon{display:none}
html.is-page-hidden .stars i{animation-play-state:paused}
.hero.effects-paused .hero-glow{animation-play-state:paused}
.light .hero h1,.light .section-heading h2,.light .page-heading h1{background-image:linear-gradient(100deg,#075ea8,#006e78,#7043ba)}
.light .site-brand>a{background-image:linear-gradient(105deg,#075ea8 0%,#006e78 22%,#075ea8 43%,#7043ba 64%,#075ea8 100%)}
@media(max-width:650px){.hero-glow{filter:blur(28px)}.stars i{animation:none}}

/* 1.4.1: right-aligned mobile controls and a precisely centered menu glyph. */
.header-actions{flex-shrink:0}
.menu-toggle{position:relative;padding:0;appearance:none}
.menu-toggle span{position:absolute;left:50%;top:50%;width:20px;height:2px;margin:0;border-radius:2px;transform:translate(-50%,-50%);transition:transform .22s ease,opacity .18s ease}
.menu-toggle span:nth-child(1){transform:translate(-50%,calc(-50% - 6px))}
.menu-toggle span:nth-child(3){transform:translate(-50%,calc(-50% + 6px))}
.nav-open .menu-toggle span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.nav-open .menu-toggle span:nth-child(2){opacity:0}
.nav-open .menu-toggle span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}
.menu-toggle:focus-visible,.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(max-width:900px){
  .header-inner{gap:12px}
  .header-actions{margin-left:auto;gap:8px}
  .site-brand{min-width:0;font-size:clamp(1.05rem,5.2vw,1.25rem)}
  .site-brand>a{max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
  .custom-logo{max-width:100%;object-fit:contain}
  .theme-toggle,.menu-toggle{width:44px;height:44px;flex:0 0 44px}
  .site-nav{visibility:hidden;pointer-events:none}
  .nav-open .site-nav{visibility:visible;pointer-events:auto}
}

/* Native anchor + inline SVG: no icon download or scroll-handler needed. */
.hero{padding:90px 0 114px}
.hero-scroll{position:absolute;z-index:4;left:50%;bottom:24px;transform:translateX(-50%);display:grid;place-items:center;width:56px;height:56px;padding:0;color:var(--accent);background:none;border:0;transition:color .2s ease}
.hero-scroll svg{display:block;width:32px;height:40px;overflow:visible}
.scroll-chevron{animation:scroll-chevron-flow 2.4s cubic-bezier(.4,0,.2,1) infinite;opacity:.3}
.scroll-chevron:nth-child(2){animation-delay:.24s}
.hero-scroll:hover{color:var(--text)}
.hero-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.light .hero-scroll{color:#075ea8}
#core-competencies{scroll-margin-top:76px}
body.admin-bar #core-competencies{scroll-margin-top:108px}
@keyframes scroll-chevron-flow{0%,100%{transform:translateY(-3px);opacity:.3}35%{opacity:1}60%{transform:translateY(3px);opacity:.8}85%{transform:translateY(3px);opacity:.3}}
.hero.effects-paused .scroll-chevron,html.is-page-hidden .scroll-chevron{animation-play-state:paused}
@media(max-width:650px){.hero{padding:82px 0 114px}.hero-scroll{bottom:18px}}
@media(max-width:782px){body.admin-bar #core-competencies{scroll-margin-top:122px}}
@media(prefers-reduced-motion:reduce){.scroll-chevron{animation:none;opacity:1}.menu-toggle span{transition:none}}

/* 1.5: certificate cards share the portfolio palette and work without JavaScript. */
.certificate-section{margin:0 0 48px}
.certificate-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px}
.certificate-section-heading h2{font-size:clamp(1.35rem,2.8vw,1.7rem);line-height:1.3;margin:0}
.certificate-section-heading>span{color:var(--muted);font-size:.85rem}
.certificate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.certificate-featured-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.certificate-card{min-width:0;display:flex;flex-direction:column;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);transition:border-color .2s ease,background .2s ease}
.certificate-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.certificate-card-featured{position:relative;padding:28px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 8%,var(--bg-2)),var(--card));border-color:color-mix(in srgb,var(--accent) 23%,var(--line))}
.certificate-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;font-size:.78rem;line-height:1.5}
.certificate-issuer{color:var(--accent);font-weight:650}
.light .certificate-issuer{color:#006e78}
.certificate-year{color:var(--muted);font-variant-numeric:tabular-nums}
.certificate-emblem{width:52px;height:52px;display:grid;place-items:center;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));background:color-mix(in srgb,var(--accent) 8%,transparent);border-radius:15px;margin-bottom:22px}
.light .certificate-emblem{color:#006e78}
.certificate-emblem svg{width:30px;height:30px}
.certificate-card h3{font-size:1.05rem;font-weight:650;line-height:1.45;margin:0 0 16px;overflow-wrap:anywhere}
.certificate-card-featured h3{font-size:1.16rem}
.certificate-card p{color:var(--muted);font-size:.88rem;line-height:1.65;margin:0 0 24px}
.certificate-link{display:flex;align-items:center;gap:9px;min-height:44px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:.86rem;font-weight:600}
.certificate-link:hover{color:var(--accent)}
.light .certificate-link:hover{color:#006e78}
.certificate-filetype{font-size:.62rem;font-weight:700;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);padding:1px 5px;border-radius:4px;margin-left:auto}
.certificate-link svg{width:19px;height:19px;flex-shrink:0;color:var(--accent)}
.light .certificate-link svg{color:#006e78}
.certificate-jump-links{display:flex;flex-wrap:wrap;gap:10px;padding:24px 0;margin:0 0 38px;border-block:1px solid var(--line)}
.certificate-jump-links a{display:inline-flex;align-items:center;gap:14px;min-height:44px;padding:9px 16px;border:1px solid var(--line);border-radius:99px;background:var(--card);font-size:.85rem}
.certificate-jump-links a:hover{border-color:var(--accent)}
.certificate-jump-links span{color:var(--muted);font-size:.75rem}
.certificate-group{scroll-margin-top:96px}
body.admin-bar .certificate-group{scroll-margin-top:142px}
.certificate-note{color:var(--muted);font-size:.82rem;border-top:1px solid var(--line);padding-top:24px}
.certificate-view-all{margin-top:24px}
.footer-certificates{margin-top:10px;font-size:.9rem}
.light .footer-certificates{color:#006e78}
.certificate-link:focus-visible,.certificate-jump-links a:focus-visible,.certificate-view-all:focus-visible,.footer-certificates:focus-visible,.site-menu a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
@media(max-width:1100px){
  .header-inner{gap:12px}
  .header-actions{margin-left:auto;gap:8px}
  .menu-toggle{display:block;width:44px;height:44px;flex:0 0 44px}
  .site-nav{position:fixed;inset:68px 0 auto;background:var(--bg);border-bottom:1px solid var(--line);padding:18px;transform:translateY(-140%);transition:.25s;z-index:-1;visibility:hidden;pointer-events:none;max-height:calc(100dvh - 68px);overflow-y:auto}
  .nav-open .site-nav{transform:none;visibility:visible;pointer-events:auto}
  .site-menu{flex-direction:column;align-items:stretch}
  .site-menu a{justify-content:center}
  .certificate-featured-grid{gap:16px}
  .certificate-card-featured{padding:22px}
}
@media(max-width:760px){.certificate-featured-grid{grid-template-columns:1fr}.certificate-section-heading{align-items:flex-start;flex-direction:column;gap:6px}}
@media(max-width:650px){.certificate-grid{grid-template-columns:1fr}.certificate-card{padding:22px}.certificate-section{margin-bottom:36px}.certificate-jump-links{gap:8px}.certificate-jump-links a{padding:8px 12px;font-size:.8rem}}
@media(prefers-reduced-motion:reduce){.certificate-card,.site-nav{transition:none}}

/* Contact: direct conversation + lightweight enquiry form; no map embed. */
.contact-heading{max-width:800px;margin-bottom:40px}
.contact-heading h1{font-size:clamp(2.25rem,4.5vw,3.8rem);letter-spacing:-.045em}
.contact-heading p{max-width:710px;margin:20px auto 0}
.contact-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding:26px 0 30px;border-block:1px solid var(--line);margin-bottom:56px}
.contact-services article{position:relative;padding-left:36px}
.contact-service-number{position:absolute;left:0;top:3px;font-size:.72rem;letter-spacing:.08em;color:var(--accent);font-weight:700}
.contact-services h2{font-size:1rem;line-height:1.4;margin:0 0 10px}
.contact-services p{font-size:.86rem;color:var(--muted);margin:0;line-height:1.65}
.contact-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:70px;align-items:start}
.contact-direct{padding:24px 0;min-width:0}
.contact-eyebrow{display:block;text-transform:uppercase;font-size:.69rem;font-weight:700;letter-spacing:.13em;color:var(--muted)}
.contact-direct h2{font-size:clamp(1.65rem,2.8vw,2.3rem);line-height:1.2;letter-spacing:-.035em;max-width:380px;margin:16px 0}
.contact-direct>p{color:var(--muted);font-size:.95rem;max-width:400px}
.contact-email-block{border-block:1px solid var(--line);padding:25px 0 18px;margin:30px 0 22px}
.contact-email-link{display:block;color:var(--text);font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:650;letter-spacing:-.03em;margin:8px 0;overflow-wrap:anywhere}
.contact-email-link:hover{color:var(--accent)}
.contact-copy{border:0;background:none;padding:8px 0;min-height:44px;color:var(--accent);font-size:.82rem;cursor:pointer;text-align:left}
.contact-copy[hidden]{display:none}
.contact-copy-status{display:block;color:var(--muted);font-size:.78rem;min-height:1.5em}
.contact-channels{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-channels a{display:flex;align-items:center;gap:10px;padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:.9rem;transition:border-color .2s,background .2s}
.contact-channels a>span:last-child{margin-left:auto;color:var(--muted)}
.contact-channel-detail{display:block;font-size:.72rem;color:var(--muted);line-height:1.5;margin-top:3px}
.contact-channels a>span{min-width:0;overflow-wrap:anywhere}
.contact-list a{overflow-wrap:anywhere}
.contact-channels a:hover{border-color:var(--accent);background:var(--bg-2)}
.contact-location{display:flex;align-items:center;gap:10px;margin:24px 0 14px}
.contact-work-link{color:var(--accent);font-size:.86rem;display:inline-flex;align-items:center;gap:14px;min-height:44px}
.contact-form-panel{padding:32px;box-shadow:0 18px 60px rgba(0,0,0,.12);border-top-color:color-mix(in srgb,var(--accent) 42%,var(--line))}
.contact-form-panel>h2{text-align:left;font-size:1.3rem;color:var(--text);line-height:1.35;margin:0 0 10px;letter-spacing:-.025em}
.contact-form-intro{color:var(--muted);font-size:.88rem;margin:0 0 26px}
.contact-page .contact-form{gap:17px}
.contact-page .contact-form label{color:var(--text);font-size:.8rem}
.contact-page .contact-form input,.contact-page .contact-form textarea,.contact-page .contact-form select{font:inherit;font-size:16px;min-width:0;width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--bg);color:var(--text)}
.contact-page .contact-form select{min-height:50px;cursor:pointer}
.contact-page .contact-form textarea{resize:vertical;min-height:140px}
.contact-page .contact-form input::placeholder,.contact-page .contact-form textarea::placeholder{color:var(--muted);opacity:1;font-size:.85rem}
.contact-page .contact-form :is(input,textarea,select):focus{outline:2px solid var(--accent);outline-offset:2px;box-shadow:none}
.contact-page .contact-form .button{width:100%;justify-content:space-between;padding-inline:20px;background:#087cf0;color:white;box-shadow:none}
.contact-page .contact-form .button:hover{background:#086bd0}
.contact-page .contact-form .button:disabled{opacity:.65;cursor:wait;transform:none}
.contact-form-note{color:var(--muted);font-size:.74rem;line-height:1.5;margin:0}
.contact-page .form-status{font-size:.85rem;min-height:0;color:var(--text);overflow-wrap:anywhere}
.contact-page .form-status:empty{display:none}
.contact-page .form-status[data-state="error"]{color:#ffabb5}
.contact-page .form-status[data-state="success"]{color:#8be9c1}
.contact-page :is(a,button):focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:5px}
.light .contact-page :is(.contact-service-number,.contact-copy,.contact-work-link){color:#006e78}
.light .contact-email-link:hover{color:#006e78}
.light .contact-page .form-status[data-state="error"]{color:#a11d35}
.light .contact-page .form-status[data-state="success"]{color:#166546}
@media(max-width:900px){.contact-layout{gap:32px}.contact-form-panel{padding:24px}.contact-services{gap:20px}.contact-services article{padding-left:0}.contact-service-number{position:static;display:block;margin-bottom:8px}}
@media(max-width:760px){.contact-page{padding-top:110px}.contact-heading{margin-bottom:28px}.contact-services{grid-template-columns:1fr;gap:20px;margin-bottom:28px}.contact-services article{padding-left:34px}.contact-service-number{position:absolute;top:2px}.contact-layout{grid-template-columns:1fr;gap:24px}.contact-direct{padding:0}.contact-direct h2,.contact-direct>p{max-width:none}.contact-email-block{margin-top:22px}.contact-form-panel{padding:24px}}
@media(max-width:380px){.contact-channels{grid-template-columns:1fr}.contact-form-panel{padding:20px}.contact-page .form-row{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.contact-channels a{transition:none}.contact-page .button:hover{transform:none}}

/* 1.7: outcome-led services. Entrance and interaction use separate elements. */
.home-services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1000px;margin-inline:auto}
.service-reveal{min-width:0;display:flex}
.service-reveal.reveal{transition:opacity .55s ease var(--service-delay),transform .65s cubic-bezier(.2,.7,.2,1) var(--service-delay)}
.service-reveal.reveal-pending{opacity:0;transform:translateY(16px)}
.home-service-card{position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;padding:30px;border:1px solid var(--line);border-radius:20px;background:var(--bg-2);transition:transform .25s ease,border-color .25s ease;overflow-wrap:anywhere}
.home-service-card:before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent),0 14px 40px color-mix(in srgb,var(--accent) 10%,transparent);background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--accent) 8%,transparent),transparent 65%);z-index:-1;transition:opacity .25s ease}
.home-service-icon{display:grid;place-items:center;align-self:flex-start;width:56px;height:56px;border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);border-radius:16px;color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);margin-bottom:24px}
.service-symbol{display:block;flex-shrink:0}
.home-service-card h3{font-size:clamp(1.12rem,1.7vw,1.35rem);line-height:1.35;letter-spacing:-.02em;margin:0 0 12px;color:var(--text)}
.home-service-card p{font-size:.96rem;line-height:1.7;color:var(--muted);margin:0 0 26px;max-width:42ch}
.home-service-link{display:flex;align-items:center;gap:9px;margin-top:auto;color:var(--accent);font-size:.85rem;font-weight:650}
.home-service-link svg{transition:transform .25s ease}
.home-service-card:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.home-service-card:focus-visible:before,.home-service-card:active:before{opacity:1}
.home-service-card:focus-visible .home-service-link svg{transform:translateX(4px)}
.home-service-card:active{transform:translateY(1px)}
.home-services-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:36px}
.home-services-actions a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.light .home-service-icon,.light .home-service-link{color:#006e78}
.light .home-service-card{background:#fff}
.service-step-1{--part-delay:0ms}.service-step-2{--part-delay:120ms}.service-step-3{--part-delay:240ms}
@media(hover:hover) and (pointer:fine){
  .home-service-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
  .home-service-card:hover:before{opacity:1}
  .home-service-card:hover .home-service-link svg{transform:translateX(4px)}
  .home-service-card:hover .service-cart{animation:service-cart .65s ease 1}
  .home-service-card:hover :is(.service-check,.service-node){animation:service-pulse .7s ease var(--part-delay) 1}
  .home-service-card:hover .service-bar{transform-box:fill-box;transform-origin:bottom;animation:service-bar .65s ease var(--part-delay) 1}
}
.home-service-card:focus-visible .service-cart{animation:service-cart .65s ease 1}
.home-service-card:focus-visible :is(.service-check,.service-node){animation:service-pulse .7s ease var(--part-delay) 1}
.home-service-card:focus-visible .service-bar{transform-box:fill-box;transform-origin:bottom;animation:service-bar .65s ease var(--part-delay) 1}
@keyframes service-cart{45%{transform:translateX(2px)}75%{transform:translateX(-1px)}}
@keyframes service-pulse{45%{opacity:.3;stroke-width:2.4}}
@keyframes service-bar{0%{transform:scaleY(.4)}70%{transform:scaleY(1.06)}100%{transform:scaleY(1)}}
@media(max-width:650px){.home-services-grid{grid-template-columns:1fr;gap:16px}.home-service-card{padding:24px}.home-service-icon{margin-bottom:20px}.home-services-actions{gap:12px}.home-services-actions .button{width:100%;max-width:400px}}
@media(prefers-reduced-motion:reduce){
  .service-reveal.reveal,.service-reveal.reveal-pending{opacity:1;transform:none;transition:none}
  .home-service-card,.home-service-card:before,.home-service-link svg{transition:none}
  .home-service-card:is(:hover,:active,:focus-visible),.home-service-card:is(:hover,:focus-visible) .home-service-link svg{transform:none}
  .home-service-card:is(:hover,:focus-visible) :is(.service-cart,.service-check,.service-node,.service-bar){animation:none;transform:none}
}