/* Signature pass: hero proof and closing contact composition. */
.hero .hero-proof .proof-first{
  position:relative;
  border:1px solid #ff817b80!important;
  background:radial-gradient(ellipse at 0 0,#ff8a7150,transparent 65%),linear-gradient(145deg,#ff443b,#ed202d 78%);
  box-shadow:inset 0 1px 0 #ffffff30,0 24px 60px -35px #e5213860;
  gap:22px;
}
.hero .hero-proof .proof-first p{max-width:190px;line-height:1.35;color:#fff5f4}
.hero .hero-proof .proof-first .proof-number{color:#f4f8ff;letter-spacing:-.07em}
.hero .hero-description-detail{max-width:36ch;text-wrap:pretty}
#contact{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 15% 90%,#24425d70,transparent 65%),#101e2d}
#contact>.wrap{padding-block:clamp(64px,9vw,128px);align-items:center;gap:32px clamp(32px,6vw,96px)}
#contact>.wrap>.eyebrow{font:700 12px/1.4 Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#baff5b}
#contact #contact-title{font-size:clamp(32px,4.5vw,64px);line-height:1.15;letter-spacing:-.05em;max-width:16ch;text-wrap:balance}
#contact .contact-links{width:100%;gap:0;padding:0;font:600 clamp(18px,2vw,25px)/1.4 Manrope,sans-serif}
#contact .contact-links a{position:relative;display:block;width:100%;padding:22px 36px 22px 0;border-bottom:1px solid #abc2d638;color:#f0f5fc;text-decoration:none;transition:color .25s,border-color .25s}
#contact .contact-links a::after{content:'↗';position:absolute;right:0;top:50%;bottom:auto;width:auto;height:auto;background:none;transform:translateY(-50%);font:400 27px/1 Manrope,sans-serif;color:#baff5b;transition:transform .25s}
#contact .contact-links a:is(:hover,:focus-visible){color:#baff5b;border-color:#baff5b}
#contact .contact-links a:is(:hover,:focus-visible)::after{transform:translate(3px,calc(-50% - 3px))}
#contact .contact-links a:focus-visible{outline:2px solid #baff5b;outline-offset:6px}
@media(max-width:720px){
 #contact>.wrap{grid-template-columns:1fr;padding-block:56px;gap:24px}
 #contact #contact-title{font-size:clamp(30px,7.5vw,44px);max-width:18ch}
 #contact .contact-links{font-size:clamp(17px,4.5vw,22px)}
 #contact .contact-links a{padding-block:20px}
}
@media(prefers-reduced-motion:reduce){#contact .contact-links a,#contact .contact-links a::after{transition:none}}

/* Soft square card, matching the existing Google-inspired surfaces. */
.hero .hero-proof .proof-first{border-radius:28px;overflow:hidden}

/* Isolate underline and action glyph so legacy underline rules cannot move the arrow. */
#contact .contact-links a{border-bottom:0}
#contact .contact-links a::before{content:'';position:absolute;left:0;right:0;top:auto;bottom:0;height:1px;background:#baff5b80;pointer-events:none;transition:background .25s}
#contact .contact-links a::after{left:auto;right:0;width:24px;text-align:center;transform-origin:center}
#contact .contact-links a:is(:hover,:focus-visible)::before{background:#baff5b}
.project-drum .drum-arrow{display:grid;place-items:center;background:#e8edf2;border:0;color:#253545;box-shadow:none;transition:background .2s,transform .2s}
.project-drum .drum-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.project-drum .drum-arrow:hover:not(:disabled){background:#fff;color:#122638;transform:scale(1.06)}
.project-drum .drum-arrow:active:not(:disabled){transform:scale(.96)}
.project-drum .drum-arrow:disabled{opacity:.3}
@media(prefers-reduced-motion:reduce){.project-drum .drum-arrow,#contact .contact-links a::before{transition:none}}

/* Three original-image layers, anchored beside the cable reel. */
.career-bee{position:absolute;left:110px;top:-46px;width:142px;height:148px;pointer-events:none;z-index:4}
.bee-flight{position:relative;width:100%;height:100%;animation:bee-hover 3.4s ease-in-out infinite;animation-play-state:paused;filter:drop-shadow(0 9px 8px #081b2830)}
.career-bee img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;user-select:none}
.bee-body{z-index:2}
.bee-wing{z-index:1;backface-visibility:visible;will-change:transform;animation-duration:.13s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:paused}
.bee-wing-left{transform-origin:40.7% 62.9%;animation-name:bee-left-flap}
.bee-wing-right{transform-origin:58.7% 62.9%;animation-name:bee-right-flap;animation-delay:-.04s}
.bee-visible:not(.bee-page-hidden) .bee-flight,.bee-visible:not(.bee-page-hidden) .bee-wing{animation-play-state:running}
@keyframes bee-left-flap{from{transform:perspective(500px) rotateY(-55deg) rotate(-7deg)}to{transform:perspective(500px) rotateY(12deg) rotate(5deg)}}
@keyframes bee-right-flap{from{transform:perspective(500px) rotateY(55deg) rotate(7deg)}to{transform:perspective(500px) rotateY(-12deg) rotate(-5deg)}}
@keyframes bee-hover{0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}50%{transform:translate3d(4px,-7px,0) rotate(2deg)}}
@media(min-width:721px) and (max-width:1000px){.career-bee{left:106px;top:-32px;width:116px;height:121px}}
@media(prefers-reduced-motion:reduce){.bee-flight,.bee-wing{animation:none;will-change:auto}}
@media print{.career-bee{display:none}}
/* Viewport traveller: independent of pinned scenes and cable cleanup. */
.career-bee.bee-traveller{position:fixed;left:0;top:0;z-index:30;pointer-events:none;will-change:transform}
@media(max-width:720px){.career-bee.bee-traveller{display:block}}

/* Each tool category occupies exactly the visible panel width. */
.work-tools,.work-tools.tools-swiper{width:100%;max-width:920px;min-width:0;margin-inline:auto;box-sizing:border-box}
.tools-swiper .work-apps{width:100%}
.tools-swiper .dock-group{flex:0 0 100%;width:100%}

/* Compact bilingual navigation; shared motion and page structure. */
.topbar{gap:16px}
.language-switch{display:inline-flex;align-items:center;gap:3px;padding:4px;border:1px solid #ffffff24;border-radius:30px;flex-shrink:0;background:#ffffff0a}
.language-switch a{display:grid;place-items:center;min-width:38px;min-height:32px;padding:4px 9px;border-radius:22px;font:700 12px/1 Manrope,sans-serif;letter-spacing:.04em;color:inherit;text-decoration:none;transition:background .2s,color .2s}
.language-switch a[aria-current="true"]{background:#baff5b;color:#152535}
.language-switch a:focus-visible{outline:2px solid #baff5b;outline-offset:3px}
html[lang="en"] .hero h1{font-size:clamp(38px,5vw,68px)}
html[lang="en"] .proof-first p{max-width:190px}
html[lang="en"] .learning-brush-title{font-size:clamp(22px,3vw,34px)}
html[lang="en"] .education-entry h3{text-wrap:balance;font-size:clamp(18px,2.1vw,26px)}
@media(max-width:720px){.topbar{flex-wrap:nowrap;gap:10px}.topbar nav{gap:14px}.language-switch a{min-width:32px;padding-inline:6px}.language-switch{margin-left:auto}html[lang="en"] .hero h1{font-size:clamp(32px,7vw,49px)}}

/* Language control belongs to the hero and scrolls away with it. */
 .hero>.language-switch{position:absolute;top:16px;right:max(16px,env(safe-area-inset-right));z-index:8;margin:0;background:#162b42ed;color:#f5f8fc;border:1px solid #ffffff24;box-shadow:0 6px 20px #07142020;backdrop-filter:blur(12px)}
@media(max-width:540px){ .hero>.language-switch{top:78px;right:12px;padding:3px} .hero>.language-switch a{min-width:30px;min-height:28px;font-size:11px}}
@media print{ .hero>.language-switch{display:none}}

.hero{position:relative}

/* Consistent, restrained easing for the small interactive controls. */
@media(prefers-reduced-motion:no-preference){
 .language-switch a,.project-drum .drum-arrow,#contact .contact-links a,#contact .contact-links a::before,#contact .contact-links a::after{transition-timing-function:cubic-bezier(.22,.61,.36,1)}
}