/* ============ CONTACT PAGE ============ */

/* ---------- hero with interactive waves ---------- */
.contact-hero{min-height:auto;align-items:flex-start;background:radial-gradient(1000px 600px at 80% 20%,rgba(48,135,200,.22),transparent 60%),var(--ink)}
.contact-hero::before{display:none}
.c-waves{position:absolute;left:0;right:0;bottom:0;width:100%;height:78%;z-index:-1;opacity:.8;-webkit-mask-image:linear-gradient(0deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(0deg,transparent,#000 30%,#000 70%,transparent)}
.c-waves path{fill:none;stroke-width:1.2}
.contact-hero .page-hero-content{padding-top:170px;padding-bottom:96px}
.contact-hero h1{font-size:clamp(56px,9vw,140px);line-height:.95}
.contact-hero .lede{max-width:600px}
.c-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:64px}
.c-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:26px 26px 28px;border-radius:22px;background:rgba(13,22,34,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line-2);transition:border-color .3s,background .3s,translate .5s var(--ease)}
.c-card:hover{border-color:rgba(79,178,245,.5);background:rgba(17,29,43,.8);translate:0 -6px}
.c-card .ci{width:48px;height:48px;border-radius:14px;background:rgba(48,135,200,.16);color:var(--brand-2);display:grid;place-items:center;margin-bottom:22px}
.c-card .ci svg{width:22px;height:22px}
.c-card small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.c-card b{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.01em}
.c-card .tile-arrow{position:absolute;top:24px;right:24px;border-color:rgba(255,255,255,.18)}
.c-card:hover .tile-arrow{background:var(--brand);border-color:var(--brand)}
.c-card:hover .tile-arrow svg{transform:rotate(0)}

/* ---------- form section (light) ---------- */
.c-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;align-items:start}
.c-intro h2{margin:18px 0 20px}
.c-points{list-style:none;display:grid;gap:12px;margin-top:40px}
.c-points li{display:flex;gap:18px;padding:22px 24px;border-radius:18px;background:#fff;border:1px solid var(--dark-line)}
.c-points li>span{font-family:var(--mono);font-size:12px;color:var(--brand);padding-top:4px}
.c-points b{font-family:var(--display);font-weight:600;font-size:17px}
.c-points p{font-size:14.5px;color:var(--dark-muted);margin-top:4px}
.c-points a{color:var(--brand);font-weight:500}
.c-points a:hover{text-decoration:underline}
.c-form{position:sticky;top:110px;display:grid;gap:14px;padding:34px;border-radius:28px;background:#fff;border:1px solid var(--dark-line);box-shadow:0 40px 80px -40px rgba(11,18,32,.25)}
.light .field input,.light .field textarea{color:var(--dark);background:var(--paper);border-color:var(--dark-line)}
.light .field label{color:#7d8896}
.light .field input:focus,.light .field textarea:focus{background:#fff;border-color:var(--brand);box-shadow:0 0 0 4px rgba(48,135,200,.14)}
.light .field input:focus+label,.light .field input:not(:placeholder-shown)+label,
.light .field textarea:focus+label,.light .field textarea:not(:placeholder-shown)+label{color:var(--brand)}
.light .form-note{color:var(--dark-muted)}
.light .form-note.ok{color:#18a36b}
.topics{border:0;display:flex;flex-wrap:wrap;gap:8px;min-width:0;padding:0 0 6px}
.topics legend{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dark-muted);margin-bottom:12px;padding:0}
.topics label{cursor:pointer}
.topics input{position:absolute;opacity:0;pointer-events:none}
.topics span{display:inline-block;font-size:13.5px;font-weight:500;padding:9px 15px;border-radius:999px;border:1px solid var(--dark-line);background:var(--paper);color:var(--dark);transition:background .25s,border-color .25s,color .25s}
.topics label:hover span{border-color:rgba(48,135,200,.45)}
.topics input:checked+span{background:var(--dark);border-color:var(--dark);color:#fff}
.topics input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- map ---------- */
.c-map-sec{background:var(--paper);padding:0 0 140px}
.c-map{position:relative;border-radius:30px;overflow:hidden;height:520px;background:var(--dark);border:1px solid var(--dark-line)}
.c-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(180deg) saturate(.55) brightness(.92) contrast(.95)}
.c-map-card{position:absolute;right:28px;bottom:28px;width:min(360px,calc(100% - 56px));display:flex;flex-direction:column;gap:8px;padding:26px;border-radius:22px;background:rgba(8,14,22,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line-2);color:#fff}
.c-map-card b{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.02em}
.c-map-card>span:not(.eyebrow){color:#a9b5c3;font-size:15px}
.c-map-card .btn{margin-top:12px;align-self:flex-start}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .c-grid{grid-template-columns:1fr;gap:50px}
  .c-form{position:static}
}
@media (max-width:720px){
  .contact-hero .page-hero-content{padding-top:120px;padding-bottom:64px}
  .c-cards{grid-template-columns:1fr;margin-top:44px}
  .c-card{padding:20px 22px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 14px}
  .c-card .ci{margin:0}
  .c-card small{width:calc(100% - 62px)}
  .c-form{padding:20px;border-radius:22px}
  /* phone: map on top, address card below it instead of covering it */
  .c-map{height:auto;border-radius:22px;display:flex;flex-direction:column}
  .c-map iframe{position:relative;height:320px;flex:none}
  .c-map-card{position:relative;left:auto;right:auto;bottom:auto;width:auto;border:0;border-top:1px solid var(--line-2);border-radius:0;background:rgba(8,14,22,.96)}
  .c-card{background:rgba(13,22,34,.92)}
  .c-map-sec{padding-bottom:96px}
}