.contact-page{--stroke:var(--line);--card-radius:8px;--card-border:#e5ebf2;--card-shadow:0 4px 6px rgba(16,44,78,.04);--card-gap:10px;color:var(--ink);font-size:14px}
.contact-header{position:absolute;background:transparent;color:var(--ink)}
.contact-header .contact-button.active{box-shadow:0 8px 18px rgba(7,27,48,.18)}

.contact-hero{height:clamp(520px,50.8vw,760px);min-height:520px;padding-top:70px;position:relative;overflow:hidden;background:#f7f9fb;border-bottom:1px solid var(--stroke)}
.contact-hero-art{position:absolute;inset:0;left:0;right:0;width:100%;transform:none;background:url('assets/images/contact/hero-mountains.webp') 68% center/cover no-repeat;z-index:0}
.contact-hero-fade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(248,250,252,.99) 0%,rgba(248,250,252,.95) 30%,rgba(248,250,252,.45) 48%,transparent 67%),linear-gradient(180deg,rgba(248,250,252,.25),transparent 30%);pointer-events:none}
.contact-hero-layout{height:100%;position:relative;z-index:2;display:flex;align-items:center;padding-inline:var(--section-inset)}
.contact-hero-copy{max-width:min(520px,44%);min-width:0;padding-top:56px}
.contact-hero-copy>small{font-size:11px;color:var(--blue);font-weight:600}
.contact-hero-copy h1{font-size:clamp(43px,4.45vw,66px);line-height:1.12;letter-spacing:-.052em;margin:13px 0 0;font-weight:600}
.contact-hero-copy h1 strong{color:var(--blue);font-weight:600}
.contact-hero-copy>i,.contact-intro>i,.message-intro>i,.contact-cta-content i{display:block;width:29px;height:2px;background:var(--blue);margin:15px 0 14px}
.contact-hero-copy p{font-size:14px;line-height:1.55;color:#32475c;margin:0;max-width:440px}
.contact-hero-copy>a,.message-panel button{min-height:36px;padding:0 15px;margin-top:19px;display:inline-flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:4px;background:var(--blue);color:#fff;font-family:inherit;font-size:11px;font-weight:600;box-shadow:0 6px 12px rgba(0,94,234,.16);cursor:pointer}
.contact-hero-copy>a span,.message-panel button span{font-size:12px}

.contact-split{display:grid;grid-template-columns:var(--info-rail) minmax(0,1fr);padding-inline:var(--section-inset)}
.contact-intro{padding:18px 18px 16px 0;border-right:1px solid var(--stroke)}
.contact-intro small,.message-intro small{font-size:11px;color:var(--blue);font-weight:600}
.contact-intro h2{font-size:27px;line-height:1.14;letter-spacing:-.04em;margin:14px 0 0}
.contact-intro p,.message-intro p{font-size:13px;line-height:1.62;color:#273a50;margin:0 0 9px}

.connect-section{min-height:220px;border-bottom:1px solid var(--stroke);background:#fff}
.connect-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--card-gap);padding:12px 0 16px 12px}
.connect-grid article{min-height:132px;border:1px solid var(--card-border);border-radius:var(--card-radius);background:#fff;box-shadow:var(--card-shadow);text-align:center;padding:18px 14px 16px;display:flex;flex-direction:column;align-items:center}
.connect-grid svg{width:30px;height:30px;margin-bottom:12px;fill:none;stroke:var(--blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.connect-grid h3{font-size:13px;line-height:1.25;margin:0 0 8px;font-weight:600;color:#081b31}
.connect-grid p{font-size:11px;line-height:1.55;color:#526274;margin:0}
.connect-grid a{margin-top:auto;color:var(--blue);font-size:11px;font-weight:600}

.message-section{min-height:320px;background:#f7f9fc;border-bottom:1px solid var(--stroke)}
.message-grid{display:grid;grid-template-columns:1.35fr .95fr;gap:var(--card-gap);padding:18px var(--section-inset) 28px}
.message-panel,.office-panel{min-height:276px;border-radius:var(--card-radius);background:#fff;border:1px solid var(--card-border);box-shadow:var(--card-shadow)}
.message-panel{display:grid;grid-template-columns:clamp(180px,22%,220px) minmax(0,1fr);padding:24px 22px 22px 18px;gap:18px}
.message-intro h2{font-size:27px;line-height:1.14;letter-spacing:-.04em;margin:14px 0 0}
.message-intro>i{margin:15px 0 14px}
.message-panel form{display:flex;flex-direction:column;gap:10px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.message-panel label{height:38px;position:relative;display:block}
.message-panel label>span{position:absolute;left:12px;top:11px;font-size:10px;color:#758595;pointer-events:none}
.message-panel input,.message-panel select,.message-panel textarea{width:100%;height:100%;border:1px solid #dce4ec;border-radius:4px;background:#fff;color:var(--ink);font:11px Inter,Arial,sans-serif;padding:9px 11px;outline:none}
.message-panel input{padding-top:20px}
.message-panel select{appearance:none;color:transparent}
.message-panel textarea{resize:none;padding-top:23px}
.message-panel label:has(textarea){height:100px}
.message-panel input:focus,.message-panel select:focus,.message-panel textarea:focus{border-color:#76a8e8;box-shadow:0 0 0 2px rgba(8,101,217,.08)}
.message-panel button{align-self:flex-start;margin-top:4px}

.office-panel{padding:24px 22px}
.office-panel>h2{font-size:13px;color:var(--blue);margin:0 0 13px;font-weight:600}
.office-panel>h2 small{font-size:11px;color:var(--ink);font-weight:500}
.office-location{display:flex;gap:10px;margin-bottom:13px}
.office-location>b{font-size:18px;color:var(--blue);line-height:1}
.office-location strong{font-size:11px;font-weight:600}
.office-location p{font-size:11px;line-height:1.55;color:#526274;margin:7px 0 0}
.office-details{display:grid;gap:10px;margin:0 0 4px}
.office-details p{margin:0;display:grid;gap:3px}
.office-details span{font-size:10px;font-weight:600;color:#23446e;letter-spacing:.02em;text-transform:uppercase}
.office-details a{font-size:12px;line-height:1.5;color:#075de8;text-decoration:none;word-break:keep-all}
.office-details a:hover{text-decoration:underline}
.network-map{height:125px;position:relative;overflow:hidden;border-radius:6px;background:#062448 url('assets/images/contact/network-map.webp') center/cover no-repeat;filter:saturate(1.08)}
.network-map:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(2,24,48,.3),rgba(2,29,60,.25));box-shadow:inset 0 0 35px rgba(0,145,255,.2)}
.network-map span,.network-map i,.network-map b{position:absolute;width:7px;height:7px;border-radius:50%;background:#59c5ff;box-shadow:0 0 13px #34aaff}
.network-map span{left:27%;top:57%}.network-map i{left:51%;top:39%}.network-map b{right:17%;top:54%}
.office-panel>h3{font-size:13px;color:#23446e;margin:14px 0 6px;font-weight:600}
.contact-socials{display:flex;gap:8px}
.contact-socials a{width:31px;height:31px;border-radius:50%;background:#eef2f6;display:grid;place-items:center;font-size:14px;font-weight:700}

.why-section{min-height:220px;background:#fff;border-bottom:1px solid var(--stroke)}
.why-section .contact-intro{padding-top:18px}
.why-section .contact-intro h2{margin-top:14px}
.why-grid{display:grid;grid-template-columns:repeat(5,1fr);padding:38px 0 12px 12px}
.why-grid article{text-align:center;border-left:1px solid var(--stroke);padding:0 14px}
.why-grid article:first-child{border-left:0}
.why-grid img{width:30px;height:30px;margin:0 auto 12px;filter:brightness(0) saturate(100%) invert(26%) sepia(98%) saturate(2327%) hue-rotate(207deg) brightness(94%)}.why-grid img.brand-icon{filter:none;object-fit:contain}
.why-grid h3{font-size:13px;line-height:1.25;margin:0 0 8px;font-weight:600;color:#081b31}
.why-grid p{font-size:11px;line-height:1.55;color:#526274;margin:0}

.contact-cta{min-height:180px;position:relative;overflow:hidden;background:#05213d;color:#fff}
.contact-cta-art{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,26,51,.96) 0%,rgba(3,31,61,.75) 43%,rgba(4,29,56,.26)),url('assets/images/future-scene-wide.webp') center 58%/cover no-repeat;filter:saturate(1.15)}
.contact-cta-content{min-height:180px;position:relative;display:flex;align-items:center;padding-inline:var(--section-inset);gap:clamp(40px,8vw,86px)}
.contact-cta-content h2{font-size:27px;line-height:1.14;letter-spacing:-.04em;margin:0}
.contact-cta-content i{margin:15px 0 14px;background:#7db5ff}
.contact-cta-content p{font-size:13px;line-height:1.55;margin:0;color:rgba(255,255,255,.92)}
.contact-cta-content>a{min-height:36px;padding:0 18px;border-radius:4px;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:12px;font-size:11px;font-weight:600;flex-shrink:0}
.contact-cta-content>a span{font-size:12px}

.contact-page footer{padding:31px 0 15px}
.contact-page footer .footer-grid{padding:0 var(--section-inset);gap:20px}
.contact-page footer .footer-bottom{padding:12px var(--section-inset) 0;margin-top:25px}

@media(min-width:1400px){
  .contact-hero-copy h1{font-size:clamp(48px,4.2vw,66px)}
  .contact-hero-copy p{font-size:14px;max-width:440px}
  .contact-intro h2,.message-intro h2{font-size:35px}
  .contact-intro p,.message-intro p{font-size:14px}
  .connect-grid h3,.why-grid h3{font-size:15px}
  .connect-grid p,.why-grid p{font-size:13px}
  .contact-cta-content h2{font-size:35px}
  .contact-cta-content p{font-size:14px}
}

@media(max-width:1100px) and (min-width:821px){
  .main-nav{gap:31px}
  .connect-grid article{padding-inline:12px}
  .message-grid{grid-template-columns:1.35fr .95fr}
  .why-grid article{padding-inline:9px}
}

@media(max-width:820px){
  .contact-header .main-nav{background:#f7fafc;font-size:23px}
  .contact-header .main-nav .active:after{display:none}
  .contact-hero{height:auto;min-height:0;padding-bottom:12px;display:flex;flex-direction:column}
  .contact-hero-art{position:relative;inset:auto;left:auto;right:auto;order:2;width:100%;height:clamp(280px,72vw,420px);transform:none;background-position:center center;background-size:cover}
  .contact-hero-fade{display:none}
  .contact-hero-layout{order:1;position:relative;z-index:2;height:auto;display:block;align-items:flex-start;padding-inline:0;padding-bottom:8px}
  .contact-hero-copy{padding:100px var(--section-inset) 12px;max-width:none;position:relative;z-index:2}
  .contact-hero-copy h1{font-size:clamp(36px,10vw,48px)}
  .contact-hero-copy p{max-width:100%;font-size:13px;overflow-wrap:anywhere}
  .contact-hero-copy p br{display:none}
  .contact-split{display:block;padding-inline:0}
  .contact-intro{border-right:0;padding:55px var(--section-inset) 30px}
  .contact-intro h2{font-size:30px}
  .contact-intro p{font-size:13px;max-width:100%}
  .connect-grid{grid-template-columns:1fr 1fr;padding:0 var(--section-inset) 55px;gap:12px}
  .connect-grid article{min-height:150px}
  .connect-grid h3{font-size:13px}
  .connect-grid p,.connect-grid a{font-size:12px}
  .message-grid{display:block;padding:0 12px 55px}
  .message-panel,.office-panel{min-height:0}
  .message-panel{grid-template-columns:1fr;padding:28px 20px;gap:24px}
  .message-intro h2{font-size:30px}
  .message-intro p{font-size:13px}
  .office-panel{margin:16px 0 0;padding:28px 20px}
  .network-map{height:180px}
  .why-section .contact-intro h2{font-size:30px}
  .why-grid{grid-template-columns:1fr 1fr;padding:10px var(--section-inset) 55px;gap:28px 12px}
  .why-grid article{padding:0 10px;border-left:0}
  .why-grid h3{font-size:13px}
  .why-grid p{font-size:12px}
  .contact-cta{min-height:350px}
  .contact-cta-content{padding:55px var(--section-inset);display:block}
  .contact-cta-content h2{font-size:30px}
  .contact-cta-content p{font-size:13px}
  .contact-cta-content>a{margin-top:24px}
  .contact-page footer .footer-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:540px){
  .contact-hero-copy{padding:88px var(--section-inset) 12px}
  .contact-hero-copy h1{font-size:36px}
  .contact-hero-art{height:clamp(260px,78vw,380px)}
  .connect-grid,.field-row,.why-grid{grid-template-columns:1fr}
  .connect-grid article{min-height:140px}
  .message-panel{padding:24px 18px}
  .office-panel{padding:24px 18px}
  .why-grid article{border-top:1px solid var(--stroke);padding-top:20px}
  .why-grid article:first-child{border-top:0;padding-top:0}
}
