/* === contact page styles === */
/* ═══ NAV (same as about) ═══ */
/* ═══ HERO — 65vh, same pattern as homepage CTA band ═══ */
.hero{position:relative;height:65vh;min-height:440px;display:flex;align-items:flex-end;overflow:hidden}
.hero__bg{position:absolute;inset:0}.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.05) 30%,rgba(0,0,0,.55) 100%);z-index:2}
.hero__c{position:relative;z-index:10;width:100%;max-width:calc(var(--content-max) + var(--content-pad)*2);margin:0 auto;padding:0 var(--content-pad) 64px}
.hero__bc{margin-bottom:28px;opacity:0;transform:translateY(16px);animation:fu .8s var(--ease) .3s forwards}
.hero__bc ol{display:flex;align-items:center;gap:0;list-style:none;font-size:12px;letter-spacing:1.5px;text-transform:uppercase}
.hero__bc a{color:rgba(255,255,255,.55);transition:color .3s}.hero__bc a:hover{color:#fff}
.hero__bc li{color:rgba(255,255,255,.55)}.hero__bc li::before{content:'/';margin:0 12px;color:rgba(255,255,255,.2)}.hero__bc li:first-child::before{display:none}
.hero h1{font-size:clamp(36px,5vw,64px);font-weight:800;line-height:1.08;color:#fff;letter-spacing:-1.5px;max-width:700px;margin-bottom:20px;opacity:0;transform:translateY(24px);animation:fu 1s var(--ease) .5s forwards}
.hero__desc{font-size:clamp(14px,1.4vw,17px);font-weight:300;line-height:1.9;color:rgba(255,255,255,.6);max-width:500px;opacity:0;transform:translateY(16px);animation:fu .9s var(--ease) .7s forwards}
@keyframes fu{to{opacity:1;transform:translateY(0)}}
/* ═══ SECTION — white, padded (same as about intro/team) ═══ */
.section{padding:100px var(--content-pad)}
.section--lg{padding:120px var(--content-pad)}
.section--gray{background:var(--gray-50);border-top:1px solid var(--gray-100);border-bottom:1px solid var(--gray-100)}
.section__inner{max-width:var(--content-max);margin:0 auto}
.section__header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:56px}
.section__header--stack{flex-direction:column;align-items:flex-start;gap:12px;max-width:560px}
.tag{font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.heading-lg{font-size:clamp(26px,3.2vw,42px);font-weight:700;color:var(--gray-900);letter-spacing:-.3px;line-height:1.15}
.heading-md{font-size:clamp(22px,2.5vw,32px);font-weight:700;color:var(--gray-900);letter-spacing:-.3px;line-height:1.2}
.subtitle{font-size:15px;font-weight:300;color:var(--gray-500);line-height:1.9;margin-top:14px}
.subtitle--right{max-width:360px;text-align:right;line-height:1.7}
/* ═══ HQ + FORM — 2-col on white, same grid as about intro ═══ */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start}
.contact-info{position:sticky;top:100px}
.ci-item{margin-bottom:24px}
.ci-label{font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--gray-400);margin-bottom:6px}
.ci-val{font-size:16px;font-weight:400;color:var(--gray-800);line-height:1.8}
.ci-val a{color:var(--accent);transition:color .3s}.ci-val a:hover{color:var(--accent-hover)}
.ci-img{border-radius:12px;overflow:hidden;margin-bottom:32px}
.ci-img img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .8s var(--ease)}
.ci-img:hover img{transform:scale(1.03)}
/* Form — on white bg */
.form-wrap{padding:40px;border-radius:16px;background:var(--gray-50);border:1px solid var(--gray-100)}
.form-wrap__title{font-size:18px;font-weight:700;color:var(--gray-900);margin-bottom:24px}
.form{display:flex;flex-direction:column;gap:14px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:14px}.fr--f{grid-template-columns:1fr}
.fg{display:flex;flex-direction:column}
.fg label{font-size:11px;font-weight:600;color:var(--gray-400);margin-bottom:6px;letter-spacing:.5px;text-transform:uppercase}
.fg input,.fg select,.fg textarea{font-family:var(--font);font-size:14px;font-weight:400;padding:12px 14px;border:1px solid var(--gray-200);border-radius:8px;background:var(--white);color:var(--gray-900);transition:border-color .3s;outline:none;resize:vertical}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--accent)}
.fg input::placeholder,.fg textarea::placeholder{color:var(--gray-300);font-weight:300}
.fg textarea{min-height:80px}
.fg select{cursor:pointer;appearance:none;color:var(--gray-500);background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.form__submit{margin-top:8px;align-self:flex-start}
.form__note{font-size:11px;font-weight:300;color:var(--gray-400);margin-top:8px}.form__note a{color:var(--gray-500);text-decoration:underline}
/* ═══ DEPARTMENT LIST — same pattern as about team list ═══ */
.dl{display:flex;flex-direction:column}
.di{padding:24px 0;border-bottom:1px solid var(--gray-100);display:grid;grid-template-columns:180px 1fr 1fr;gap:20px;align-items:center;transition:padding .3s}
.di:first-child{border-top:1px solid var(--gray-100)}
.di:hover{padding-left:8px}
.di__name{font-size:15px;font-weight:700;color:var(--gray-900)}
.di__desc{font-size:14px;font-weight:300;color:var(--gray-500);line-height:1.7}
.di__desc a{color:var(--accent);font-weight:500;transition:color .3s}.di__desc a:hover{color:var(--accent-hover)}
/* ═══ OFFICES — solid dark bg, same as about "global" section ═══ */
.offices{padding:100px var(--content-pad);background:var(--dark);position:relative;overflow:hidden}
.offices::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(0,102,255,.06),transparent 60%),radial-gradient(ellipse at 70% 50%,rgba(0,102,255,.04),transparent 60%)}
.offices__inner{max-width:var(--content-max);margin:0 auto;position:relative;z-index:2}
.offices__tag{font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.offices__title{font-size:clamp(26px,3.2vw,42px);font-weight:700;color:#fff;letter-spacing:-.3px;margin-bottom:12px;line-height:1.15}
.offices__sub{font-size:15px;font-weight:300;color:rgba(255,255,255,.45);max-width:500px;line-height:1.9;margin-bottom:48px}
.ol{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.oc{padding:28px 24px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);transition:all .4s var(--ease)}
.oc:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);transform:translateY(-2px)}
.oc__badge{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.oc__city{font-size:18px;font-weight:700;color:#fff;margin-bottom:2px}
.oc__region{font-size:12px;font-weight:300;color:rgba(255,255,255,.3);margin-bottom:12px}
.oc__detail{font-size:13px;font-weight:300;color:rgba(255,255,255,.4);line-height:1.7}
/* ═══ CTA — 50vh image band, same as homepage cta-banner ═══ */
.cta{position:relative;height:50vh;min-height:360px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.cta__bg{position:absolute;inset:0}.cta__bg img{width:100%;height:100%;object-fit:cover}
.cta__ov{position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:2}
.cta__c{position:relative;z-index:10;max-width:600px;padding:0 40px}
.cta__title{font-size:clamp(24px,3.2vw,40px);font-weight:700;color:#fff;margin-bottom:16px;line-height:1.2;letter-spacing:-.3px}
.cta__desc{font-size:15px;font-weight:300;color:rgba(255,255,255,.6);line-height:1.8;margin-bottom:32px}
.cta__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* ═══ FOOTER (same as about/home) ═══ */
@media(max-width:1024px){
.contact-grid{grid-template-columns:1fr;gap:48px}.contact-info{position:static}
.section__header{flex-direction:column;align-items:flex-start;gap:10px}.subtitle--right{text-align:left;max-width:100%}
.di{grid-template-columns:1fr;gap:6px}.ol{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
.hero{min-height:360px;height:55vh}
.fr{grid-template-columns:1fr}.ol{grid-template-columns:1fr}
.form-wrap{padding:24px}
}