:root { --navy:#124b75; --blue:#0078ad; --ink:#17252a; --body:#405f6a; color-scheme:light; }
* { box-sizing:border-box; }
html { scroll-padding-top:96px; }
body { margin:0; color:var(--ink); font-family:"Segoe UI",Arial,sans-serif; font-size:1rem; line-height:1.65; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid #ffcf57; outline-offset:3px; }
.skip-link { position:fixed; z-index:10; top:12px; left:16px; padding:12px 20px; background:#fff; color:var(--navy); transform:translateY(-180%); }
.skip-link:focus { transform:translateY(0); }
.site-header { position:absolute; inset:0 0 auto; z-index:2; color:#fff; transition:background-color 160ms ease,color 160ms ease,box-shadow 160ms ease; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:1200px; min-height:92px; margin:auto; padding:16px 32px; }
.brand { font-size:1.4rem; font-weight:650; line-height:1.3; text-decoration:none; }
.brand span { font-weight:400; }
nav ul { display:flex; gap:28px; margin:0; padding:0; list-style:none; }
nav a { display:flex; align-items:center; min-height:44px; padding:6px 2px; border-bottom:2px solid transparent; font-weight:600; text-decoration:none; }
nav a[aria-current="page"] { border-color:#a6dcf4; color:#cbeeff; }
nav a:hover { border-color:#fff; }
.site-header.is-scrolled { position:fixed; background:#fff; color:var(--ink); box-shadow:0 2px 12px rgb(23 37 42 / 10%); }
.site-header.is-scrolled .header-inner { min-height:64px; padding-block:10px; }
.site-header.is-scrolled .brand { color:var(--blue); }
.site-header.is-scrolled .brand span { color:var(--body); }
.site-header.is-scrolled nav a[aria-current="page"] { border-color:var(--blue); color:var(--navy); }
.site-header.is-scrolled nav a:hover { border-color:var(--navy); }
.contacts-hero { position:relative; isolation:isolate; overflow:hidden; min-height:100vh; padding:150px 32px 84px; color:#fff; background:var(--navy); }
.contacts-hero > img { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.contacts-hero::before { position:absolute; z-index:-1; inset:0; content:""; background:rgb(5 24 40 / 69%); }
.contacts-content { max-width:1096px; margin:auto; }
.contacts-heading { max-width:650px; margin:0 auto 38px; text-align:center; }
.eyebrow { margin:0 0 10px; color:#d2efff; font-size:.92rem; font-weight:500; letter-spacing:.02em; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:14px; font-size:clamp(2.35rem,4.5vw,3.7rem); font-weight:350; letter-spacing:-.03em; line-height:1.1; }
h2 { font-size:clamp(1.7rem,3vw,2.3rem); font-weight:350; letter-spacing:-.02em; line-height:1.2; }
.contacts-heading > p:last-child { margin:0; color:#edf8fd; font-size:1.08rem; }
.contact-card { display:grid; grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr); overflow:hidden; border-radius:10px; box-shadow:0 16px 40px rgb(5 24 40 / 24%); }
.contact-info { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:46px 40px; background:var(--navy); }
.contact-info h2 { margin-bottom:28px; color:#fff; }
.phone-number { margin:0 0 20px; font-size:clamp(1.6rem,3vw,2rem); font-weight:500; line-height:1.2; }
.phone-number a { color:#fff; text-decoration:none; }
.phone-number a:hover { text-decoration:underline; text-underline-offset:4px; }
.whatsapp-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 14px; border:1px solid var(--blue); border-radius:24px; background:var(--blue); color:#fff; font-size:.92rem; font-weight:650; text-decoration:none; white-space:nowrap; }
.whatsapp-button:hover { background:#005d87; border-color:#005d87; }
.contact-note { max-width:28ch; margin:16px 0 0; color:#d2efff; font-size:.9rem; }
.contact-form-panel { padding:46px 48px; color:var(--ink); background:#fff; }
.contact-form-panel h2 { margin-bottom:10px; color:var(--navy); }
.form-intro { margin-bottom:28px; color:var(--body); }
.form-field { margin-bottom:20px; }
.honeypot { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
label { display:block; margin-bottom:7px; color:var(--navy); font-weight:650; }
.optional { color:var(--body); font-size:.875rem; font-weight:400; }
input, textarea { width:100%; border:1px solid #b9cbd3; border-radius:5px; padding:11px 12px; color:var(--ink); font:inherit; line-height:1.45; }
textarea { min-height:126px; resize:vertical; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color:#a22622; }
.field-error { min-height:1.35em; margin:5px 0 0; color:#a22622; font-size:.875rem; line-height:1.35; }
.message-meta { display:flex; justify-content:space-between; gap:16px; }
.message-meta #message-count { margin:5px 0 0 auto; color:var(--body); font-size:.875rem; white-space:nowrap; }
.form-status { margin:0 0 18px; padding:11px 13px; border-radius:5px; }
.form-status--notice { color:#543d00; background:#fff5ce; }
.form-status--success { color:#135a31; background:#e8f7ee; }
form button { min-width:154px; min-height:44px; padding:9px 18px; border:2px solid var(--blue); border-radius:24px; color:#fff; background:var(--blue); font:inherit; font-size:.875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
form button:hover { border-color:#005d87; background:#005d87; }
.site-footer { padding:28px 24px; color:var(--body); font-size:.875rem; text-align:center; }
.site-footer p { margin:0; }
@media (max-width:760px) { .header-inner { padding-inline:22px; gap:16px; } .brand { font-size:1.2rem; } nav ul { gap:20px; } .contacts-hero { min-height:0; padding:146px 20px 60px; } .contact-card { grid-template-columns:1fr; } .contact-info, .contact-form-panel { padding:38px 30px; } .contact-info { justify-content:flex-start; } }
@media (max-width:560px) { .header-inner { flex-direction:column; gap:8px; padding:18px 20px 10px; } .brand { text-align:center; } nav ul { gap:28px; } .site-header.is-scrolled .header-inner { min-height:0; gap:0; padding-block:6px; } .contacts-hero { padding:162px 16px 46px; } .contacts-heading { margin-bottom:28px; } .contact-info, .contact-form-panel { padding:32px 22px; } .message-meta { gap:8px; } }
@media (prefers-reduced-motion:reduce) { .site-header { transition:none; } }