.contact-page { background:#f6faff; }
.contact-hero { position:relative; min-height:760px; overflow:hidden; color:white; background:radial-gradient(circle at 78% 16%,rgba(59,151,226,.3),transparent 26%),linear-gradient(128deg,#041127 0%,#082d61 52%,#0c4c91 100%); }
.contact-hero::after { content:"CONTACT"; position:absolute; right:-2vw; bottom:-5vw; color:rgba(255,255,255,.04); font:700 16vw/1 Georgia,serif; letter-spacing:-.07em; }
.contact-hero-grid { position:absolute; inset:0; opacity:.25; background-image:linear-gradient(rgba(173,220,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(173,220,255,.14) 1px,transparent 1px); background-size:108px 108px; mask-image:linear-gradient(105deg,black,transparent 82%); }
.contact-orbit { position:absolute; width:720px; height:720px; right:-155px; top:-130px; border:1px solid rgba(178,226,255,.27); border-radius:50%; box-shadow:0 0 0 88px rgba(145,211,255,.045),0 0 0 176px rgba(145,211,255,.022); animation:contact-breathe 8s ease-in-out infinite; }
.contact-hero-layout { position:relative; z-index:2; min-height:760px; display:grid; grid-template-columns:1fr 350px; gap:100px; align-items:end; padding:174px 0 94px; }
.contact-hero-copy h1 { max-width:850px; margin:25px 0 26px; font:500 clamp(56px,5.8vw,84px)/1.14 var(--display); letter-spacing:-.055em; }
.contact-hero-copy h1 span { color:var(--sky); }
.contact-hero-copy > p:last-of-type { max-width:600px; margin:0; color:rgba(232,247,255,.73); font-size:14px; line-height:1.95; }
.contact-hero-action { width:max-content; display:inline-flex; align-items:center; gap:18px; margin-top:35px; padding:13px 20px; color:var(--navy); background:white; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.06em; transition:transform .18s ease,box-shadow .18s ease; }
.contact-hero-action span { color:var(--blue); font-size:17px; }
.contact-hero-action:hover { transform:translateY(-3px); box-shadow:0 14px 32px rgba(1,17,42,.25); }
.contact-guide { position:relative; padding:28px 28px 24px; border:1px solid rgba(185,228,255,.28); background:rgba(5,27,61,.48); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 46px rgba(0,18,44,.2); backdrop-filter:blur(15px); }
.contact-guide::before { content:""; position:absolute; top:-1px; left:28px; width:70px; height:2px; background:var(--sky); }
.contact-guide > small { color:var(--sky); font-size:9px; font-weight:800; letter-spacing:.18em; }
.contact-guide ol { margin:24px 0 0; padding:0; list-style:none; }
.contact-guide li { display:grid; grid-template-columns:36px 1fr; gap:12px; align-items:center; padding:15px 0; border-top:1px solid rgba(255,255,255,.13); }
.contact-guide li span { color:var(--sky); font:500 11px/1 Georgia,serif; }
.contact-guide li p { margin:0; color:rgba(235,248,255,.76); font-size:12px; }
.contact-team { padding:145px 0 156px; }
.team-head { display:grid; grid-template-columns:1fr .65fr; gap:90px; align-items:end; }
.team-head h2 { margin:18px 0 0; font:500 clamp(48px,5vw,72px)/1.2 var(--display); letter-spacing:-.05em; }
.team-head h2 span { color:var(--blue); }
.team-head > p { max-width:410px; margin:0; color:var(--muted); font-size:13px; line-height:1.95; }
.contact-route-grid { position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin-top:66px; padding:1px; background:rgba(16,40,68,.14); box-shadow:0 22px 54px rgba(18,66,118,.1); }
.contact-route-grid button { position:relative; min-height:218px; display:flex; flex-direction:column; align-items:flex-start; padding:27px 26px 24px; overflow:hidden; color:var(--ink); text-align:left; background:white; border:0; cursor:pointer; transition:color .2s ease,background .2s ease,transform .2s ease; }
.contact-route-grid button::after { content:""; position:absolute; width:100px; height:100px; right:-44px; top:-44px; border:1px solid rgba(35,121,216,.16); border-radius:50%; box-shadow:0 0 0 18px rgba(35,121,216,.025); }
.contact-route-grid button > span { color:var(--blue); font:500 12px/1 Georgia,serif; }
.contact-route-grid button strong { margin:45px 0 9px; font:500 23px/1.3 var(--display); letter-spacing:-.025em; }
.contact-route-grid button p { max-width:220px; margin:0; color:var(--muted); font-size:11px; line-height:1.75; }
.contact-route-grid button i { position:absolute; right:24px; bottom:24px; color:var(--blue); font-size:18px; font-style:normal; transition:transform .18s ease; }
.contact-route-grid button:hover { z-index:1; transform:translateY(-6px); }
.contact-route-grid button:hover i { transform:translate(3px,-3px); }
.contact-route-grid button.is-active { z-index:1; color:white; background:linear-gradient(145deg,#09336a,#0c5599); box-shadow:0 18px 40px rgba(14,64,119,.18); }
.contact-route-grid button.is-active > span,.contact-route-grid button.is-active i { color:var(--sky); }
.contact-route-grid button.is-active p { color:rgba(230,246,255,.65); }
.contact-result-head { position:relative; z-index:1; display:flex; align-items:end; justify-content:space-between; gap:30px; margin-top:0; padding:40px 30px 20px; background:#eaf3fb; border-right:1px solid rgba(16,40,68,.14); border-left:1px solid rgba(16,40,68,.14); }
.contact-result-head::before { content:""; position:absolute; top:0; right:30px; left:30px; height:1px; background:linear-gradient(90deg,var(--blue),rgba(35,121,216,.08)); }
.result-kicker { margin:0 0 7px; color:#71879c; font-size:9px; font-weight:800; letter-spacing:.12em; }
.result-kicker span { color:var(--blue); }
.contact-result-head h3 { margin:0; font:500 29px/1.3 var(--display); }
.contact-count { color:#7890a7; font-size:10px; letter-spacing:.08em; }
.contact-page-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:0; padding:0 30px 34px; background:#eaf3fb; border-right:1px solid rgba(16,40,68,.14); border-bottom:1px solid rgba(16,40,68,.14); border-left:1px solid rgba(16,40,68,.14); }
.contact-profile { position:relative; min-height:172px; display:grid; grid-template-columns:1fr .72fr; gap:24px; align-items:center; padding:26px 28px; background:white; border:1px solid var(--line); box-shadow:0 4px 18px rgba(17,66,119,.035); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.contact-profile:hover { border-color:rgba(35,121,216,.46); box-shadow:0 16px 34px rgba(16,70,126,.1); transform:translateY(-4px); }
.contact-profile > div { grid-column:1; display:flex; align-items:center; gap:14px; }
.contact-profile small { color:var(--blue); font-size:9px; font-weight:800; letter-spacing:.1em; }
.contact-profile > div > span { order:-1; color:#9bb0c3; font:500 10px/1 Georgia,serif; }
.contact-profile h3 { grid-column:1; margin:13px 0 3px; font:500 30px/1.15 var(--display); letter-spacing:.04em; }
.contact-profile > p { grid-column:1; margin:0; color:var(--muted); font-size:11px; }
.contact-profile > a { grid-column:2; grid-row:1 / 4; align-self:stretch; display:flex; flex-direction:column; justify-content:center; padding-left:27px; border-left:1px solid var(--line); }
.contact-profile em { color:#8499ad; font-size:8px; font-style:normal; letter-spacing:.12em; }
.contact-profile strong { margin-top:10px; font-size:14px; font-weight:600; letter-spacing:.03em; }
.contact-profile b { margin-top:15px; color:var(--blue); font-size:18px; font-weight:400; transition:transform .18s ease; }
.contact-profile a:hover b { transform:translate(3px,-3px); }
.contact-profile[hidden] { display:none; }
.contact-closing { position:relative; overflow:hidden; padding:128px 0; color:white; background:radial-gradient(circle at 82% 20%,rgba(89,177,235,.22),transparent 25%),linear-gradient(125deg,#06152f,#0a3b76); }
.contact-closing::after { content:"HELLO"; position:absolute; right:-1vw; bottom:-4vw; color:rgba(255,255,255,.04); font:700 17vw/1 Georgia,serif; letter-spacing:-.08em; }
.contact-closing .shell { position:relative; z-index:1; }
.contact-closing p { margin:0 0 17px; color:var(--sky); font-size:10px; font-weight:800; letter-spacing:.18em; }
.contact-closing h2 { max-width:760px; margin:0; font:500 clamp(46px,5vw,70px)/1.2 var(--display); letter-spacing:-.05em; }
.contact-closing h2 span { color:var(--sky); }
.contact-closing a { width:max-content; display:flex; align-items:center; gap:18px; margin-top:38px; padding:14px 20px; color:var(--navy); background:white; border-radius:999px; font-size:11px; }
.contact-closing a b { font-size:13px; }
.contact-closing a i { color:var(--blue); font-size:16px; font-style:normal; }
@keyframes contact-breathe { 0%,100% { transform:scale(.96); opacity:.55; } 50% { transform:scale(1.04); opacity:1; } }
@media (max-width:1120px) { .contact-route-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:980px) { .contact-hero-layout { grid-template-columns:1fr; gap:45px; } .contact-guide { max-width:390px; } .team-head { grid-template-columns:1fr; gap:28px; } .contact-page-grid { grid-template-columns:1fr; } }
@media (max-width:680px) { .contact-hero,.contact-hero-layout { min-height:760px; } .contact-hero-layout { padding:132px 0 58px; } .contact-hero-copy h1 { font-size:47px; } .contact-hero-copy > p:last-of-type { font-size:13px; } .contact-guide { padding:22px; } .contact-team { padding:96px 0; } .team-head h2 { font-size:40px; } .contact-route-grid { grid-template-columns:1fr; margin-top:45px; } .contact-route-grid button { min-height:176px; } .contact-route-grid button strong { margin-top:34px; } .contact-result-head { align-items:flex-start; flex-direction:column; margin-top:0; padding:32px 18px 18px; } .contact-result-head::before { right:18px; left:18px; } .contact-page-grid { padding:0 18px 22px; } .contact-profile { grid-template-columns:1fr; gap:0; padding:23px; } .contact-profile > a { grid-column:1; grid-row:auto; margin-top:20px; padding:17px 0 0; border-top:1px solid var(--line); border-left:0; } .contact-profile b { position:absolute; right:24px; margin-top:0; } .contact-closing { padding:96px 0; } .contact-closing h2 { font-size:41px; } }
@media (prefers-reduced-motion:reduce) { .contact-orbit { animation:none; } }