.contact-page {
    --contact-ink: #f4f6f8;
    --contact-muted: #a6b0bc;
    --contact-panel: rgba(15, 22, 31, .82);
    --contact-line: rgba(255, 255, 255, .11);
    --contact-accent: #ed713a;
    position: relative;
    min-height: 75vh;
    overflow: hidden;
    padding: clamp(8rem, 13vw, 11rem) 0 clamp(4rem, 7vw, 6.5rem);
    background: radial-gradient(ellipse at 12% 32%, rgba(22, 100, 158, .16), transparent 38%), radial-gradient(ellipse at 80% 10%, rgba(237, 113, 58, .13), transparent 32%), #080d14;
    color: var(--contact-ink);
}
.contact-page-shell { position: relative; z-index: 1; }
.contact-page::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); content: ""; pointer-events: none; }
.contact-page::after { position: absolute; top: 105px; right: -210px; width: 540px; height: 540px; border: 1px solid rgba(237,113,58,.1); border-radius: 50%; box-shadow: 0 0 0 32px rgba(237,113,58,.018), 0 0 0 70px rgba(237,113,58,.014); content: ""; pointer-events: none; }
.contact-page-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(440px, 1.12fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.contact-page-intro { max-width: 520px; }
.contact-page-eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; color: #f3a178; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.contact-page-eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--contact-accent); box-shadow: 0 0 0 5px rgba(237, 113, 58, .13); }
.contact-page-intro h1 { max-width: 12ch; margin: 0; color: var(--contact-ink); font-size: clamp(2.6rem, 5.2vw, 4.7rem); font-weight: 750; letter-spacing: -.065em; line-height: 1.02; text-wrap: balance; }
.contact-page-description { max-width: 48ch; margin: 1.35rem 0 2.1rem; color: var(--contact-muted); font-size: 1.02rem; line-height: 1.75; }
.contact-page-details { display: grid; gap: .75rem; }
.contact-page-detail { display: flex; align-items: center; gap: .85rem; color: var(--contact-ink); text-decoration: none; }
.contact-page-detail:hover { color: #ffb58c; }
.contact-page-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border: 1px solid var(--contact-line); border-radius: 13px; background: rgba(255,255,255,.045); color: #f09a6b; }
.contact-page-detail small, .contact-page-detail strong { display: block; }
.contact-page-detail small { margin-bottom: .12rem; color: var(--contact-muted); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.contact-page-detail strong { font-size: .91rem; font-weight: 600; overflow-wrap: anywhere; }
.contact-page-hours { display: grid; gap: .4rem; margin-top: 1.5rem; padding-left: .9rem; border-left: 2px solid rgba(237,113,58,.55); color: var(--contact-muted); font-size: .78rem; }
.contact-page-hours-label { color: var(--contact-ink); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.contact-socials { display: grid; gap: .65rem; margin-top: 1.5rem; }
.contact-socials-title { color: var(--contact-ink); font-size: .7rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.contact-socials-list { display: flex; flex-wrap: wrap; gap: .55rem; }
.contact-social-link { --social-color: #ef9a6b; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid color-mix(in srgb, var(--social-color) 32%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--social-color) 9%, transparent); color: var(--social-color); font-size: 1rem; text-decoration: none; transition: transform .2s ease, color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.contact-social-facebook { --social-color: #1877f2; } .contact-social-instagram { --social-color: #e1306c; } .contact-social-linkedin { --social-color: #0a66c2; } .contact-social-youtube { --social-color: #ff0033; } .contact-social-x, .contact-social-twitter { --social-color: #aab6c6; } .contact-social-tiktok { --social-color: #25f4ee; } .contact-social-telegram { --social-color: #2aabee; } .contact-social-whatsapp { --social-color: #25d366; } .contact-social-github { --social-color: #c9d1d9; } .contact-social-pinterest { --social-color: #e60023; } .contact-social-snapchat { --social-color: #fffc00; } .contact-social-discord { --social-color: #5865f2; } .contact-social-vimeo { --social-color: #1ab7ea; } .contact-social-react { --social-color: #61dafb; }
.contact-social-link:hover, .contact-social-link:focus-visible { transform: translateY(-3px); border-color: var(--social-color); background: var(--social-color); color: #fff; box-shadow: 0 8px 22px color-mix(in srgb, var(--social-color) 30%, transparent); }
.contact-social-link:focus-visible { outline: 2px solid var(--social-color); outline-offset: 3px; }
.contact-form-card { padding: clamp(1.35rem, 3vw, 2.3rem); border: 1px solid var(--contact-line); border-radius: 22px; background: var(--contact-panel); box-shadow: 0 30px 90px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.045); backdrop-filter: blur(18px); }
.contact-form-heading { margin-bottom: 1.55rem; }
.contact-form-heading > span { color: #ef9a6b; font-size: .64rem; font-weight: 800; letter-spacing: .16em; }
.contact-form-heading h2 { margin: .45rem 0 .35rem; color: var(--contact-ink); font-size: clamp(1.45rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -.04em; }
.contact-form-heading p { margin: 0; color: var(--contact-muted); font-size: .84rem; }
.contact-form { display: grid; gap: 1rem; }
.contact-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.contact-field { display: grid; min-width: 0; gap: .4rem; }
.contact-field label { color: #e7ebef; font-size: .77rem; font-weight: 650; }
.contact-field label > span { color: #f09a6b; }
.contact-field label small { margin-left: .35rem; color: #818d9b; font-size: .68rem; font-weight: 400; }
.contact-field input, .contact-field textarea { width: 100%; min-height: 45px; padding: .72rem .85rem; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; outline: 0; background: rgba(5,9,14,.58); color: #f5f7f9; font: inherit; font-size: .84rem; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.contact-field textarea { min-height: 128px; resize: vertical; }
.contact-field input:focus, .contact-field textarea:focus { border-color: rgba(239,128,77,.8); background: rgba(5,9,14,.78); box-shadow: 0 0 0 3px rgba(237,113,58,.12); }
.contact-field [aria-invalid="true"] { border-color: #ee7777; }
.contact-field-error { color: #ff9c9c; font-size: .72rem; }
.contact-submit { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: .7rem; padding: .75rem 1rem; border: 0; border-radius: 10px; background: linear-gradient(120deg, #f18a53, #dc5e2e); color: #1b100b; font-size: .86rem; font-weight: 800; cursor: pointer; transition: transform .18s ease, filter .18s ease; }
.contact-submit:hover { transform: translateY(-2px); filter: brightness(1.08); }
.contact-submit:focus-visible { outline: 3px solid rgba(241,138,83,.48); outline-offset: 3px; }
.contact-form-note { margin: -.2rem 0 0; color: #8793a1; font-size: .67rem; line-height: 1.5; text-align: center; }
.contact-form-success, .contact-form-alert { margin-bottom: 1rem; padding: .8rem .95rem; border-radius: 10px; font-size: .82rem; }
.contact-form-success { border: 1px solid rgba(101,205,150,.28); background: rgba(68,168,113,.1); color: #a5e5be; }
.contact-form-success-card, .contact-form-feedback[data-state="success"] { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem; border-radius: 13px; }
.contact-form-success-card strong, .contact-form-success-card small, .contact-form-feedback[data-state="success"] strong, .contact-form-feedback[data-state="success"] small { display: block; }
.contact-form-success-card strong, .contact-form-feedback[data-state="success"] strong { margin-bottom: .16rem; font-size: .88rem; }
.contact-form-success-card small, .contact-form-feedback[data-state="success"] small { color: inherit; opacity: .84; font-size: .76rem; line-height: 1.5; }
.contact-success-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 50%; background: rgba(101,205,150,.16); color: #91e5b3; }
.contact-form-alert { border: 1px solid rgba(255,128,128,.3); background: rgba(170,61,61,.12); color: #ffc0c0; }
.contact-form-feedback { margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid var(--contact-line); border-radius: 11px; background: rgba(255,255,255,.045); color: var(--contact-ink); font-size: .82rem; line-height: 1.5; animation: contact-feedback-in .22s ease-out both; }
.contact-form-feedback[data-state="success"] { border-color: rgba(101,205,150,.34); background: rgba(68,168,113,.12); color: #a5e5be; }
.contact-form-feedback[data-state="error"] { border-color: rgba(255,128,128,.34); background: rgba(170,61,61,.13); color: #ffc0c0; }
.contact-submit:disabled { cursor: wait; opacity: .78; }
.contact-submit.is-sending i { animation: contact-send-pulse .75s ease-in-out infinite alternate; }
@keyframes contact-feedback-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes contact-send-pulse { to { transform: translateX(4px); opacity: .55; } }
.contact-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-location-wrap { position: relative; z-index: 1; margin-top: clamp(3.5rem, 7vw, 6rem); }
.contact-location-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.contact-location-heading > span { color: #ef9a6b; font-size: .66rem; font-weight: 800; letter-spacing: .16em; }
.contact-location-heading h2 { margin: .35rem 0 0; color: var(--contact-ink); font-size: clamp(1.6rem, 3vw, 2.35rem); font-weight: 720; letter-spacing: -.05em; }
.contact-location-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(250px, .75fr); gap: 10px; overflow: hidden; padding: 9px; border: 1px solid var(--contact-line); border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018)), var(--contact-panel); box-shadow: 0 24px 75px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.07); }
.contact-location-map { position: relative; min-height: 370px; overflow: hidden; border-radius: 15px; background: #121a24; isolation: isolate; }
.contact-location-map::after { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.1); border-radius: inherit; content: ""; pointer-events: none; }
.contact-location-map iframe { display: block; width: 100%; height: 100%; min-height: 370px; border: 0; filter: saturate(.82) contrast(1.03); }
.contact-map-badge { position: absolute; z-index: 2; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: .55rem; padding: .58rem .8rem; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(12,20,29,.86); box-shadow: 0 8px 24px rgba(0,0,0,.18); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .02em; pointer-events: none; backdrop-filter: blur(12px); }
.contact-map-badge i { color: #ff9c6d; }
.contact-location-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(1.5rem, 3vw, 2.4rem); border: 1px solid var(--contact-line); border-radius: 15px; background: rgba(255,255,255,.025); }
.contact-location-card h3 { margin: 1rem 0 .4rem; color: var(--contact-ink); font-size: 1.1rem; font-weight: 700; }
.contact-location-card p { margin: 0; color: var(--contact-muted); font-size: .84rem; line-height: 1.6; }
.contact-directions { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.3rem; color: #f09a6b; font-size: .8rem; font-weight: 750; text-decoration: none; }
.contact-directions:hover { color: #ffc09c; }
body.light-mode .contact-page { --contact-ink: #263342; --contact-muted: #667687; --contact-panel: rgba(255,255,255,.88); --contact-line: rgba(34,54,76,.13); background: radial-gradient(ellipse at 12% 32%, rgba(22,100,158,.09), transparent 38%), radial-gradient(ellipse at 80% 10%, rgba(237,113,58,.1), transparent 32%), #f3f5f7; }
body.light-mode .contact-form-card { box-shadow: 0 25px 70px rgba(30,46,63,.1), inset 0 1px #fff; }
body.light-mode .contact-field label { color: #334458; }
body.light-mode .contact-field input, body.light-mode .contact-field textarea { border-color: rgba(34,54,76,.16); background: rgba(246,248,250,.9); color: #263342; }
body.light-mode .contact-field input:focus, body.light-mode .contact-field textarea:focus { background: #fff; }
body.light-mode .contact-location-grid { background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(243,247,250,.94)); box-shadow: 0 22px 60px rgba(30,46,63,.1), inset 0 1px #fff; }
body.light-mode .contact-location-card { background: rgba(255,255,255,.74); }
@media (max-width: 991.98px) { .contact-page-grid { grid-template-columns: minmax(0, 1fr) minmax(380px, 1.1fr); gap: 2.25rem; } }
@media (max-width: 767.98px) { .contact-page { padding-top: 7.5rem; } .contact-page-grid { grid-template-columns: 1fr; gap: 2rem; } .contact-page-intro { max-width: 640px; } .contact-page-intro h1 { max-width: 16ch; } .contact-page-description { margin-bottom: 1.4rem; } .contact-page-details { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
@media (max-width: 480px) { .contact-form-row { grid-template-columns: 1fr; gap: 1rem; } .contact-form-card { border-radius: 17px; } .contact-page-details { grid-template-columns: 1fr; } }
@media (max-width: 767.98px) { .contact-location-grid { grid-template-columns: 1fr; gap: 8px; padding: 7px; border-radius: 19px; } .contact-location-map, .contact-location-map iframe { min-height: 310px; } .contact-location-map { border-radius: 13px; } .contact-location-card { min-height: 210px; padding: 1.35rem; border-radius: 13px; } }
@media (max-width: 420px) { .contact-location-map, .contact-location-map iframe { min-height: 270px; } .contact-map-badge { top: 10px; left: 10px; padding: .5rem .68rem; font-size: .68rem; } }
@media (prefers-reduced-motion: reduce) { .contact-field input, .contact-field textarea, .contact-submit, .contact-social-link { transition: none; } .contact-submit:hover, .contact-social-link:hover { transform: none; } .contact-form-feedback, .contact-submit.is-sending i { animation: none; } }