.contact-showcase { --contact-ink: #142d4d; --contact-muted: #526b84; --contact-border: #dce7f0; --contact-surface: #fff; --contact-raised: #f3f8fb; --contact-accent: #087f8b; --contact-navy: #0e467f; padding-top: 16px; color: var(--contact-ink); }
.contact-showcase * { box-sizing: border-box; }
.contact-hero { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 24px; align-items: center; padding: 26px 0 30px; border-bottom: 1px solid var(--contact-border); background: transparent; }
.contact-eyebrow, .contact-details__heading > span, .contact-form-card__heading > span { display: inline-flex; align-items: center; gap: 7px; color: var(--contact-accent); font-size: 12px; font-weight: 700; }
.contact-hero h1 { max-width: 650px; margin: 12px 0; color: var(--contact-ink); font-size: clamp(28px, 4vw, 42px); line-height: 1.2; }
.contact-hero p { max-width: 620px; margin: 0 0 22px; color: var(--contact-muted); font-size: 15px; line-height: 1.9; }
.contact-primary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 11px 16px; border: 1px solid var(--contact-navy); border-radius: 11px; background: var(--contact-navy); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform .2s ease, filter .2s ease; }
.contact-primary:hover { color: #fff; filter: brightness(1.1); transform: translateY(-2px); }
.contact-hero__aside { display: grid; place-items: center; gap: 10px; min-height: 136px; padding: 18px; border-radius: 14px; background: linear-gradient(145deg, #0c3d71, #087f8b); color: #fff; text-align: center; }
.contact-hero__aside > i { font-size: 48px; }
.contact-hero__aside span { font-size: 12px; line-height: 1.6; }
.contact-layout { display: grid; grid-template-columns: 1fr; gap: 26px; margin: 24px 0 34px; }
.contact-details, .contact-form-card { padding: 0; border: 0; border-radius: 0; background: transparent; }
.contact-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; }
.contact-details__heading { grid-column: 1 / -1; margin-bottom: 6px; }
.contact-details h2, .contact-form-card h2 { margin: 7px 0 0; color: var(--contact-ink); font-size: 21px; }
.contact-method { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--contact-border); color: var(--contact-ink); }
.contact-method:last-child { border-bottom: 0; }
.contact-method > i:first-child { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; background: #e8f7f7; color: var(--contact-accent); font-size: 19px; }
.contact-method span { display: grid; flex: 1; min-width: 0; gap: 2px; }
.contact-method b { font-size: 13px; }
.contact-method small { overflow: hidden; color: var(--contact-muted); font-size: 11px; text-overflow: ellipsis; direction: ltr; text-align: start; }
.contact-method > i:last-child { color: var(--contact-accent); }
.contact-method:hover { color: var(--contact-accent); }
.contact-form-card { padding-top: 4px; border-top: 1px solid var(--contact-border); }
.contact-form-card__heading { margin-bottom: 20px; }
.contact-form-card__heading p { margin: 9px 0 0; color: var(--contact-muted); font-size: 13px; line-height: 1.8; }
.contact-form { display: grid; grid-template-columns: 1fr; gap: 15px; }
.contact-form label { display: grid; gap: 7px; color: var(--contact-ink); font-size: 12px; font-weight: 700; }
.contact-form label, .contact-form button { grid-column: 1 / -1; }
.contact-form input, .contact-form textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--contact-border); border-radius: 10px; background: var(--contact-raised); color: var(--contact-ink); font: inherit; font-size: 13px; line-height: 1.6; outline: none; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--contact-accent); box-shadow: 0 0 0 3px rgba(8, 127, 139, .12); }
.contact-form button { justify-self: start; }
.contact-alert { display: flex; align-items: center; gap: 9px; padding: 13px; border-radius: 11px; font-size: 13px; line-height: 1.7; }
.contact-alert--success { background: #e8f8ef; color: #176b42; }
.contact-alert--error { margin-bottom: 16px; background: #fff0f0; color: #a22d2d; }
@media (max-width: 720px) { .contact-hero, .contact-layout, .contact-details { grid-template-columns: 1fr; } .contact-hero { padding: 22px 0 26px; } .contact-hero__aside { min-height: 105px; grid-template-columns: auto 1fr; text-align: start; } .contact-hero__aside > i { font-size: 34px; } .contact-details__heading { grid-column: auto; } .contact-form label, .contact-form button { grid-column: auto; } }
@media (max-width: 420px) { .contact-details, .contact-form-card { padding: 19px; } .contact-hero { padding: 21px; border-radius: 19px; } .contact-hero h1 { font-size: 27px; } }
/* Visual details */
.contact-hero { position: relative; isolation: isolate; overflow: hidden; }
.contact-hero::before, .contact-hero::after { position: absolute; z-index: -1; border-radius: 50%; content: ""; pointer-events: none; }
.contact-hero::before { width: 270px; height: 270px; inset-inline-end: 70px; top: -210px; border: 1px solid rgba(8, 127, 139, .18); box-shadow: 0 0 0 24px rgba(8, 127, 139, .045), 0 0 0 48px rgba(14, 70, 127, .035); }
.contact-hero::after { width: 130px; height: 130px; inset-inline-start: -65px; bottom: -88px; background: radial-gradient(circle, rgba(8, 127, 139, .18) 0 3px, transparent 4px); background-size: 17px 17px; opacity: .8; }
.contact-hero__content { position: relative; }
.contact-hero__content::after { display: block; width: 68px; height: 3px; margin-top: 23px; border-radius: 99px; background: linear-gradient(90deg, var(--contact-accent), #81d5da); content: ""; }
.contact-primary { box-shadow: 0 10px 18px rgba(14, 70, 127, .16); }
.contact-primary i:last-child { transition: transform .2s ease; }
.contact-primary:hover i:last-child { transform: translateX(-4px); }
.contact-hero__aside { position: relative; overflow: hidden; }
.contact-hero__aside::before { position: absolute; width: 120px; height: 120px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 50%; top: -56px; inset-inline-start: -45px; content: ""; }
.contact-hero__aside::after { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #a6f1e8; bottom: 24px; inset-inline-end: 26px; box-shadow: -20px -12px 0 rgba(166, 241, 232, .55), -8px -32px 0 rgba(166, 241, 232, .3); content: ""; }
.contact-hero__aside > i, .contact-hero__aside span { position: relative; z-index: 1; }
.contact-details { counter-reset: contact-channel; }
.contact-details__heading h2, .contact-form-card h2 { display: flex; align-items: center; gap: 11px; }
.contact-details__heading h2::after, .contact-form-card h2::after { display: inline-block; width: 28px; height: 1px; background: var(--contact-accent); content: ""; }
.contact-method { position: relative; transition: color .2s ease, transform .2s ease; }
.contact-method::after { display: grid; place-items: center; width: 21px; height: 21px; margin-inline-start: auto; border-radius: 50%; background: #edf7f8; color: var(--contact-accent); font-size: 9px; font-weight: 700; content: counter(contact-channel, decimal-leading-zero); counter-increment: contact-channel; }
.contact-method > i:last-child { display: none; }
.contact-method:hover { transform: translateX(-4px); }
.contact-method:hover > i:first-child { background: var(--contact-accent); color: #fff; }
.contact-form-card { position: relative; padding-top: 25px; }
.contact-form-card::before { position: absolute; top: -1px; inset-inline-start: 0; width: 92px; height: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--contact-navy), var(--contact-accent)); content: ""; }
.contact-form-card__heading { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; }
.contact-form-card__heading > span { grid-column: 1 / -1; }
.contact-form-card__heading p { grid-column: 1 / -1; }
.contact-form input, .contact-form textarea { border-inline-start-width: 3px; border-inline-start-color: #d5e8ec; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.contact-form input:hover, .contact-form textarea:hover { background: #fff; border-color: #b8d9df; }
.contact-form label span::before { display: inline-block; width: 6px; height: 6px; margin-inline-end: 6px; border-radius: 50%; background: var(--contact-accent); content: ""; }
@media (max-width: 720px) { .contact-hero::before { inset-inline-end: -50px; } .contact-method:hover { transform: none; } }
.contact-primary[disabled] { opacity: .7; cursor: wait; transform: none; }
.contact-spinner { animation: contact-spin .8s linear infinite; }
@keyframes contact-spin { to { transform: rotate(360deg); } }