/* Contact — welcoming, image-led and deliberately calm. */
.contact-hero {
    position: relative;
    min-height: clamp(34rem, 61vw, 44rem);
    display: grid;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: #111226;
}

.contact-hero-media,
.contact-hero-overlay { position: absolute; inset: 0; }
.contact-hero-media { z-index: -4; }
.contact-hero-media img {
    width: 100%; height: 100%; object-fit: cover; object-position: center;
    animation: contactHeroReveal 1.5s cubic-bezier(.2,.8,.2,1) both;
}

.contact-hero-overlay {
    z-index: -3;
    background:
        linear-gradient(90deg, rgba(11,11,29,.92) 0%, rgba(14,15,37,.82) 37%, rgba(14,15,37,.15) 68%, rgba(14,15,37,.22) 100%),
        linear-gradient(180deg, rgba(9,10,28,.12), rgba(9,10,28,.6));
}

.contact-hero-glow {
    position: absolute; z-index: -2; width: 32rem; height: 32rem;
    left: 17%; bottom: -24rem; border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 30%, transparent); filter: blur(5rem);
}

.contact-hero-orbit {
    position: absolute; z-index: -2; width: 31rem; height: 31rem;
    right: -10rem; top: -14rem; border: 1px solid rgba(255,255,255,.14); border-radius: 50%;
}

.contact-hero-container { position: relative; width: 100%; padding-block: clamp(7rem, 11vw, 9.5rem) clamp(5rem, 8vw, 7rem); }
.contact-hero-container .breadcrumbs { color: rgba(255,255,255,.72); }
.contact-hero-copy { position: relative; z-index: 2; width: min(39rem, 54%); }

.contact-hero-copy h1 {
    max-width: 8ch; margin: .8rem 0 1.1rem; color: #fff;
    font-size: clamp(3.7rem, 7vw, 6.8rem); line-height: .92; letter-spacing: -.065em;
}
.contact-hero-copy h1:focus-visible { outline: none; }
.contact-hero-copy .lead { max-width: 34rem; color: rgba(255,255,255,.77); font-size: clamp(1.05rem,1.5vw,1.28rem); line-height: 1.75; }

.contact-hero-kicker {
    display: inline-flex; align-items: center; gap: .7rem; color: #72d4d1;
    font-size: .74rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
}
.contact-hero-kicker i { width: 2.5rem; height: 1px; background: currentColor; }

.contact-hero-action {
    display: inline-flex; align-items: center; gap: 1rem; margin-top: 1.25rem; padding: .8rem 1rem .8rem 1.15rem;
    color: #fff; border: 1px solid rgba(255,255,255,.23); border-radius: 999px;
    background: rgba(255,255,255,.08); backdrop-filter: blur(12px); text-decoration: none;
    font-size: .82rem; font-weight: 700; transition: background .3s ease, transform .3s ease;
}
.contact-hero-action:hover { color: #fff; background: rgba(255,255,255,.16); transform: translateY(-2px); }
.contact-hero-action svg { transition: transform .3s ease; }
.contact-hero-action:hover svg { transform: translateX(.2rem); }

.contact-hero-card {
    position: absolute; z-index: 2; right: 2%; bottom: 4rem; width: min(23rem, 31vw);
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem;
    padding: 1rem 1.15rem; color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: 1.15rem;
    background: rgba(18,17,40,.48); box-shadow: 0 1.5rem 4rem rgba(5,5,20,.3);
    backdrop-filter: blur(18px); transform: perspective(900px) rotateY(-7deg) rotateX(2deg);
    animation: contactCardFloat 6s ease-in-out infinite;
}
.contact-hero-card-icon { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: .85rem; color: #7ce0dc; background: rgba(112,216,212,.13); }
.contact-hero-card small, .contact-hero-card strong { display: block; }
.contact-hero-card small { color: rgba(255,255,255,.6); font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; }
.contact-hero-card strong { margin-top: .2rem; font-size: .9rem; }
.contact-hero-card > i { width: .55rem; height: .55rem; border-radius: 50%; background: #75d8d3; box-shadow: 0 0 0 .4rem rgba(117,216,211,.13); }

.contact-experience { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--background), color-mix(in srgb, var(--brand) 3%, var(--background))); }
.contact-experience::before { content: ""; position: absolute; width: 34rem; height: 34rem; left: -22rem; top: 12rem; border-radius: 50%; background: color-mix(in srgb, var(--brand) 8%, transparent); filter: blur(4rem); pointer-events: none; }
.contact-experience .contact-grid { position: relative; z-index: 1; gap: clamp(2rem,5vw,4.5rem); }

.contact-form-card {
    overflow: hidden; border: 1px solid color-mix(in srgb, var(--brand) 13%, var(--border));
    border-radius: 1.6rem; box-shadow: 0 1.5rem 4.5rem rgba(24,20,47,.1);
}
.contact-form-card::before { content: ""; display: block; height: .3rem; background: linear-gradient(90deg, var(--brand), var(--accent)); }
.contact-form-heading { margin-bottom: .3rem; }
.contact-form-heading h2, .contact-offices-heading h2 { margin: .45rem 0 .5rem; font-size: clamp(1.65rem,3vw,2.35rem); letter-spacing: -.04em; }
.contact-form-heading p { margin: 0; color: var(--text-muted); font-size: .9rem; }

.contact-form-card .input,
.contact-form-card .textarea { background: color-mix(in srgb, var(--surface) 90%, var(--background-alt)); border-color: color-mix(in srgb, var(--border) 88%, var(--brand)); transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.contact-form-card .input:focus,
.contact-form-card .textarea:focus { background: var(--surface); border-color: color-mix(in srgb, var(--brand) 65%, var(--border)); box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--brand) 10%, transparent); }
.contact-form-card .btn-primary { align-self: flex-start; min-width: 12rem; justify-content: center; border-radius: 999px; box-shadow: 0 .8rem 2rem color-mix(in srgb, var(--brand) 20%, transparent); }

.contact-offices-heading { margin-bottom: .75rem; }
.contact-offices .office-card {
    position: relative; overflow: hidden; padding: 1.45rem; border-radius: 1.25rem;
    background: color-mix(in srgb, var(--surface) 96%, var(--brand));
    box-shadow: 0 .7rem 2rem rgba(24,20,47,.055); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.contact-offices .office-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: .22rem; background: linear-gradient(var(--brand), var(--accent)); opacity: .75; }
.contact-offices .office-card:hover { transform: translateY(-.25rem); border-color: color-mix(in srgb, var(--brand) 30%, var(--border)); box-shadow: 0 1.2rem 2.8rem rgba(24,20,47,.1); }
.contact-offices .office-name { gap: .8rem; }
.contact-offices .office-address { color: var(--text-muted); line-height: 1.75; }
.contact-offices .contact-line .icon { color: var(--brand); border-radius: .65rem; background: color-mix(in srgb, var(--brand) 8%, transparent); }
.contact-offices > .btn-block { min-height: 3.25rem; border-radius: 999px; background: var(--surface); }
.contact-offices .map-frame { border-radius: 1.35rem; box-shadow: 0 1rem 3rem rgba(24,20,47,.1); }

@keyframes contactHeroReveal { from { opacity:0; transform:scale(1.07); } to { opacity:1; transform:scale(1); } }
@keyframes contactCardFloat { 50% { transform: perspective(900px) rotateY(-4deg) rotateX(1deg) translateY(-.55rem); } }

@media (max-width: 900px) {
    .contact-hero-copy { width: min(38rem, 70%); }
    .contact-hero-card { right: -4rem; opacity: .68; }
}

@media (max-width: 700px) {
    .contact-hero { min-height: 38rem; }
    .contact-hero-overlay { background: linear-gradient(90deg,rgba(11,11,29,.94),rgba(14,15,37,.62)),linear-gradient(180deg,rgba(9,10,28,.12),rgba(9,10,28,.75)); }
    .contact-hero-copy { width: 100%; }
    .contact-hero-copy h1 { font-size: clamp(3.3rem,16vw,5rem); }
    .contact-hero-card { display: none; }
    .contact-form-card .btn-primary { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .contact-hero-media img, .contact-hero-card { animation: none !important; }
    .contact-offices .office-card, .contact-hero-action { transition-duration: .01ms !important; }
}