/* TalentFlow — glass, light and motion */
:root { --ease-out: cubic-bezier(.16,1,.3,1); --glass-line: rgba(255,255,255,.24); }
html { scroll-padding-top: 0; }
body { -webkit-font-smoothing: antialiased; }
section[id] { scroll-margin-top: 0; }
::selection { background: #c9954e; color: #061b2a; }
a:focus-visible, button:focus-visible { outline: 3px solid #e0ad5b; outline-offset: 5px; }
.site-header, .site-header.is-scrolled { position: fixed; top: 18px; left: 50%; width: min(1320px, calc(100% - 40px)); transform: translateX(-50%); border: 1px solid var(--glass-line); border-radius: 24px; background: rgba(6,27,42,.83); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 48px #00111c30; transition: background .4s, box-shadow .4s; }
@supports (backdrop-filter: blur(20px)) { .site-header, .site-header.is-scrolled { background: rgba(6,27,42,.63); backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%); } }
.nav-wrap { width: calc(100% - 28px); height: 74px; gap: 18px; }
.site-header .brand { border-radius: 14px; }
.main-nav { gap: 2px; }
.main-nav a { position: relative; padding: 12px 13px; border: 1px solid transparent; border-radius: 14px; font-size: 13px; color: #e4eaf0; white-space: nowrap; transition: background .35s, color .35s, border-color .35s; }
.main-nav a:hover, .main-nav a[aria-current] { background: #ffffff17; border-color: #ffffff20; color: #f1ca8b; }
.main-nav a, .menu-toggle { position: relative; overflow: hidden; isolation: isolate; }
section[tabindex="-1"]:focus { outline: none; }
.button { position: relative; isolation: isolate; overflow: hidden; border-radius: 100px; background: linear-gradient(135deg,#f0cf98,#c9954e); border: 1px solid #f1d5ac; box-shadow: inset 0 1px 0 #ffffffa0, 0 6px 24px #c9954e22; transition: transform .45s var(--ease-out), box-shadow .45s; }
.button:hover { background: linear-gradient(135deg,#ffe3b8,#dba85f); transform: translateY(-4px); box-shadow: inset 0 1px 0 #ffffffa0, 0 12px 35px #c9954e40; }
.button:active { transform: scale(.96); }
.button > span { transition: transform .45s var(--ease-out); }
.button:hover > span { transform: translate(3px,-3px); }
.text-link { position: relative; padding: 8px 0; transition: color .3s, transform .3s; }
.text-link:active { transform: scale(.96); }
.click-wave { position: absolute; pointer-events: none; width: 30px; height: 30px; border-radius: 50%; background: #fff9; transform: translate(-50%,-50%); animation: glass-wave .7s var(--ease-out) forwards; z-index: 5; }
@keyframes glass-wave { to { transform: translate(-50%,-50%) scale(18); opacity: 0; } }
.hero { padding-top: 185px; padding-bottom: 105px; min-height: 850px; background: radial-gradient(ellipse at 75% 35%,#244e69 0,transparent 48%), radial-gradient(ellipse at 15% 70%,#14334b,transparent 55%),#061b2a; }
.hero::before { background: radial-gradient(ellipse at 70% 10%,#d4a96722,transparent 40%); }
.hero-grid { gap: 55px; }
h1 { font-size: clamp(48px,5.25vw,78px); letter-spacing: -.065em; line-height: 1.05; }
h1 em { background: linear-gradient(110deg,#efcf9f,#c9954e 65%,#ffe4b6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-proof { margin-top: 48px; padding: 22px; border: 1px solid #ffffff21; border-radius: 20px; background: #ffffff06; backdrop-filter: blur(14px); }
.hero-art { height: 570px; border-radius: 32px; border-color: #ffffff36; box-shadow: inset 0 1px 0 #ffffff55, 0 35px 90px #0007; }
.hero-kicker { font-size: 10px; letter-spacing: .08em; }
.art-slice { top: 68px; border: 0; border-radius: 18px 18px 0 0; clip-path: none; width: 24%; background-position: 78% center; transition: filter .6s, transform .7s var(--ease-out); }
.slice-server { left: 0; }.slice-commercial { left: 25.3%; }.slice-finance { left: 50.6%; }.slice-industry { left: 75.9%; width: 24.1%; }
.art-slice span { left: 8%; right: 8%; bottom: 28px; padding: 12px 5px; text-align: center; background: #0a2037b3; border: 1px solid #ffffff30; border-radius: 10px; backdrop-filter: blur(12px); font-size: 10px; letter-spacing: .015em; }
.section-light { background: radial-gradient(ellipse at 90% 5%,#d5e1e96b,transparent 50%),#f7f9fb; }
.section-warm { background: radial-gradient(ellipse at 10% 30%,#d7b87e21,transparent 55%),#eef2f6; }
.candidate-points, .approach-visual { border-radius: 28px; overflow: hidden; box-shadow: 0 24px 65px #0a233419; }
.candidate-points { background: #ffffff99; border: 1px solid white; }
.candidate-actions .dark-link { margin-top: 0; }
.service-grid { gap: 20px; border: 0; }
.service-card, .service-card:last-child { border: 1px solid #fff; border-radius: 28px; min-height: 390px; background: linear-gradient(145deg,#ffffffd9,#e7edf599); box-shadow: inset 0 1px 0 white,0 16px 48px #1027390b; transition: transform .6s var(--ease-out),box-shadow .6s,background .6s; }
.service-card:hover { background: #fff; color: var(--ink); transform: translateY(-9px); box-shadow: 0 24px 50px #1027391c; }
.service-card:hover p { color: #50606b; }
.sectors { background: radial-gradient(ellipse at 85% 25%,#34526980,transparent 55%),#061b2a; }
.sector-rail { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); width: var(--shell); min-width: 0; margin: 0 auto; gap: 14px; padding: 0; border: 0; }
.sector, .sector:first-child { width: auto; min-width: 0; height: 390px; border: 1px solid #ffffff30; border-radius: 24px; padding: 23px 17px; box-shadow: inset 0 1px 0 #ffffff33,0 18px 48px #0003; transition: transform .6s var(--ease-out); }
.sector::before { opacity: .8; }
.sector:hover { transform: translateY(-10px); }
.sector h3 { margin-top: 174px; font-size: 17px; }
.sector p { font-size: 13px; color: #e0e8ef; padding-right: 8px; }
.sector-arrow { display: none; }
.sector-icon { border-radius: 13px; background: #061b2a80; backdrop-filter: blur(15px); }
.team { padding: 40px 0; }.team-grid { gap: 0; }.team-visual { border-radius: 30px; overflow: hidden; }
.team-quote, .visual-badge { padding: 22px; border: 1px solid #ffffff40; border-radius: 20px; background: #061b2a8c; backdrop-filter: blur(20px); }
.commitment-grid { gap: 18px; border: 0; }
.commitment-grid article, .commitment-grid article + article { padding: 26px; border: 1px solid white; border-radius: 24px; background: #ffffff9c; box-shadow: 0 12px 40px #061b2a08; }
.contact { background: radial-gradient(ellipse at 85% 25%,#c9954e25,transparent 45%),radial-gradient(ellipse at 10% 80%,#245271,transparent 60%),#061b2a; }
.contact-form { border-radius: 30px; border: 1px solid #ffffff40; background: #edf4facf; box-shadow: inset 0 1px 0 #fff,0 35px 80px #0003; backdrop-filter: blur(30px); }
.contact-form input, .contact-form select, .contact-form textarea { border: 1px solid #102b401c; border-radius: 12px; background: #ffffff70; padding: 13px; transition: background .3s,box-shadow .3s; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { background: #fff; box-shadow: 0 0 0 4px #c9954e20; }
.reveal { transition: opacity .85s var(--ease-out),transform .85s var(--ease-out); }
.js-motion .reveal:not(.is-visible) { transform: translateY(35px) scale(.98); }
.reveal:not(.is-visible) { opacity: 1; transform: none; }
.js-motion .reveal:not(.is-visible) { opacity: 0; }
.section-arrival > .shell { animation: arrive .8s var(--ease-out); }
@keyframes arrive { from { opacity: .6; } to { opacity: 1; } }
/* Keep the section title first when the team layout stacks on smaller screens. */
@media (max-width:900px) {
  .team-copy { order: -1; padding-top: 0; }
}
@media (max-width:1100px) { .nav-cta { display: none; }.hero-actions { flex-wrap: wrap; }.sector-rail { grid-template-columns: repeat(3,minmax(0,1fr)); }.hero-kicker { font-size: 8px; } }
@media (min-width:621px) and (max-width:900px) { .main-nav { display: flex; }.main-nav a { font-size: 12px; padding: 10px 8px; }.brand-name { font-size: 17px; } }
@media (max-width:900px) { .hero { padding-top: 155px; }.hero-art { height: 480px; }.service-card { min-height: 345px; }.service-card p { max-width: none; }.team { padding: 30px 0; } }
@media (max-width:620px) { html { scroll-padding-top: 105px; }.site-header,.site-header.is-scrolled { top: 10px; width: calc(100% - 24px); border-radius: 20px; }.nav-wrap { height: 64px; }.menu-toggle { border-radius: 12px; }.main-nav { position: absolute; inset: 74px 0 auto; height: auto; max-height: calc(100dvh - 110px); overflow: auto; padding: 20px; border: 1px solid #ffffff30; border-radius: 24px; background: #061b2af5; gap: 8px; }.main-nav a { width: 100%; font-size: 23px; padding: 13px; }.hero { padding: 128px 0 65px; }.hero-grid { gap: 35px; }.hero-art { height: 390px; border-radius: 22px; }.hero-proof { display: flex; gap: 20px; }.hero-proof > div + div { margin-top: 0; }.hero-kicker { font-size: 8px; left: 12px; right: 12px; gap: 5px; }.hero-kicker span { width: 12px; }.art-slice { top: 53px; }.art-slice span { padding: 8px 3px; bottom: 15px; font-size: 8px; }.sector-rail { display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 5px 18px 24px; }.sector { flex: 0 0 78%; scroll-snap-align: center; height: 370px; }.sector h3 { margin-top: 158px; }.commitment-grid article,.commitment-grid article + article { padding: 24px; }.contact-form { border-radius: 23px; }.team-quote { padding: 18px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto; }.js-motion .reveal:not(.is-visible) { opacity: 1; transform: none; }.click-wave { display: none; }.section-arrival > .shell { animation: none; }.button:hover,.sector:hover,.service-card:hover { transform: none; } }
@media (max-width:620px) { html { scroll-padding-top: 0; } }