/* ================================================================
   Contact 페이지 레이아웃
   ================================================================ */
#page-contact .snap-section {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    min-height: 100dvh !important;
    padding: calc(var(--site-header-h, 90px) + 24px) 5vw clamp(36px, 6dvh, 72px) !important;
    box-sizing: border-box;
    scroll-padding-top: calc(var(--site-header-h, 90px) + 16px);
}

#page-contact .sub-header {
    width: 100%;
    padding: 0 20px clamp(14px, 2.2dvh, 24px);
    margin: 0;
}

#page-contact .sub-header h1,
#page-contact .sub-header h2 {
    margin: 0;
}

#page-contact .sub-header .page-title-desc {
    margin: clamp(7px, 1.2dvh, 12px) auto 0;
}

#page-contact .contact-breadcrumb {
    margin: 0 0 clamp(10px, 1.5dvh, 18px);
    color: rgba(255, 255, 255, 0.62);
    font-size: 15px;
    text-align: center;
}

#page-contact .contact-breadcrumb a {
    color: rgba(255, 255, 255, 0.62);
    text-decoration: none;
    transition: color 0.24s ease;
}

#page-contact .contact-breadcrumb a:hover {
    color: #ff6e2e;
}

#page-contact .contact-breadcrumb .current-noola {
    color: #ff6e2e !important;
    font-weight: 600;
}

.contact-container {
    max-width: clamp(800px, 52vw, 1000px);
    margin: 0 auto;
    width: 100%;
}

.contact-box {
    background: transparent !important;
    padding: 0;
    border-radius: 0;
    border: none !important;
    width: 100%;
}

/* ================================================================
   입력 그룹 설정
   ================================================================ */
.input-group {
    display: flex;
    flex-direction: row;
    align-items: center; 
    margin-bottom: clamp(14px, 2.3dvh, 30px);
    text-align: left;
    width: 100%;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(18px, 2vw, 40px);
    margin-bottom: clamp(12px, 2.3dvh, 30px);
}

.form-grid .input-group {
    margin-bottom: 0; 
}

.input-group label {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    width: auto; 
    min-width: 65px; 
    margin-right: 15px; 
    flex-shrink: 0;
    margin-bottom: 0;
    white-space: nowrap;
    line-height: 1.4;
}

.input-group label.req-label::after {
    content: '*';
    color: #ff6e2e;
    font-size: 14px;
    vertical-align: super;
    margin-left: 4px;
}

.input-group.align-top {
    align-items: flex-start !important; 
}

.input-group.align-top label {
    margin-top: 0 !important; 
    padding-top: 0 !important; 
    line-height: 1 !important; 
}

.contact-section-margin {
    margin-top: clamp(8px, 2dvh, 30px) !important;
    margin-bottom: clamp(12px, 2.2dvh, 28px) !important;
}

.textarea-group {
    margin-top: clamp(8px, 2dvh, 30px) !important;
}

/* ================================================================
   폼 요소 디자인
   ================================================================ */
input[type="text"] {
    flex: 1;
    width: 100%;
    padding: 10px 0; 
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #fff;
    font-size: 15px;
    border-radius: 0 !important; 
    transition: border-color 0.3s;
    outline: none;
    font-family: inherit;
    box-shadow: none !important;
}

/* [수정] 플레이스홀더 컬러 및 텍스트 크기 확대 (15px) */
input::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-size: 15px !important;
}

input[type="text"]:focus {
    border-bottom: 1px solid #ff6e2e !important;
}

select, textarea {
    flex: 1;
    width: 100%;
    padding: 14px 16px;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #fff;
    font-size: 15px;
    border-radius: 4px !important; 
    transition: border-color 0.3s;
    outline: none;
    font-family: inherit;
    box-shadow: none !important;
    resize: none;
}

#page-contact textarea {
    min-height: clamp(92px, 13dvh, 150px);
}

select:focus, textarea:focus {
    border: 1px solid #ff6e2e !important;
}

.select-wrapper {
    flex: 1;
    position: relative;
    width: 100%;
}

.select-wrapper::after {
    content: '▼';
    font-size: 12px;
    color: #aaa;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 35px;
}

select option {
    background: #1a1a1a;
    color: #fff;
}

/* ================================================================
   체크박스 및 정렬
   ================================================================ */
.privacy-agreement {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center; 
    margin-top: clamp(6px, 1.2dvh, 10px);
    margin-bottom: clamp(10px, 2dvh, 25px);
    width: 100%;
}

.privacy-consent-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    flex-wrap: nowrap;
}

.custom-checkbox {
    display: inline-flex;
    align-items: center; 
    justify-content: center;
    position: relative;
    cursor: pointer;
    font-size: 15.5px; 
    font-weight: 500;
    color: #d1d5db;
    user-select: none;
    line-height: 1; 
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}

.checkmark {
    height: 20px; 
    width: 20px;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    margin-right: 12px;
    flex-shrink: 0; 
    position: relative;
    transition: all 0.3s ease;
}

.checkbox-text {
    display: inline-block;
    padding-top: 0;
}

.custom-checkbox:hover input ~ .checkmark {
    border-color: #ff6e2e;
}

.custom-checkbox input:checked ~ .checkmark {
    background-color: #ff6e2e;
    border-color: #ff6e2e;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

.custom-checkbox .req {
    display: inline;
    color: inherit !important;
    font-size: inherit;
    font-weight: 400;
    margin-left: 0;
    white-space: nowrap;
}

.privacy-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-self: center;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.2s;
}

.privacy-toggle::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid #ff6e2e;
    transition: transform 0.2s, border-top-color 0.2s;
}

.privacy-toggle:hover {
    opacity: 0.72;
}

.privacy-toggle[aria-expanded="true"]::before {
    transform: rotate(180deg);
    border-top-color: #ff6e2e;
}

.privacy-terms-box {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    margin-top: 0;
    border: 1px solid transparent;
    background: rgba(255,255,255,0.035);
    padding: 0 20px;
    text-align: left;
    color: rgba(255,255,255,0.56);
    font-size: 13px;
    line-height: 1.7;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.28) rgba(255,255,255,0.04);
    transition: max-height 0.38s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.24s ease,
                transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
                margin-top 0.24s ease,
                padding 0.38s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.24s ease;
}

.privacy-terms-box.is-open {
    max-height: 230px;
    overflow-y: auto;
    opacity: 1;
    transform: translateY(0);
    margin-top: 10px;
    border-color: rgba(255,255,255,0.14);
    padding: 18px 20px;
}

.privacy-terms-box h3,
.privacy-terms-box .privacy-term-heading {
    color: rgba(255,255,255,0.64);
    font-size: 13px;
    font-weight: 700;
    margin: 16px 0 6px;
}

.privacy-terms-box h3 {
    margin-top: 0;
}

.privacy-terms-box p {
    margin: 6px 0;
}

.privacy-terms-box p,
.privacy-terms-box li,
.privacy-terms-box h3,
.privacy-terms-box .privacy-term-heading {
    font-size: 13px;
}

.privacy-terms-box ul {
    margin: 4px 0 10px;
    padding-left: 16px;
}

.privacy-terms-box li {
    margin: 2px 0;
}

.privacy-terms-box::-webkit-scrollbar {
    width: 8px;
}

.privacy-terms-box::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.04);
}

.privacy-terms-box::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.28);
    border: 2px solid rgba(255,255,255,0.04);
    border-radius: 999px;
}

.privacy-terms-box::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.42);
}

/* ================================================================
   버튼 및 결과
   ================================================================ */
.contact-result {
    margin-top: clamp(4px, 1dvh, 12px);
    font-size: 14px;
    text-align: center;
    min-height: 20px; 
}

.contact-send-btn {
    width: 100%;
    margin-top: 0; 
    text-align: center;
    border-radius: 8px !important; 
    padding: clamp(13px, 1.8dvh, 18px) 0 !important;
    background: #ff6e2e !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.contact-send-btn:hover {
    background: rgba(255, 110, 46, .82) !important; 
}

/* 라이트모드 대응 */
body.light-mode input[type="text"] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3) !important;
    color: #1a1a1a !important;
}

body.light-mode input::placeholder {
    color: rgba(0, 0, 0, 0.3);
}

body.light-mode select, 
body.light-mode textarea {
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: #1a1a1a !important;
}

body.light-mode select option {
    background: #fff;
    color: #1a1a1a;
}

body.light-mode .input-group label {
    color: #1a1a1a !important; 
}

body.light-mode .custom-checkbox {
    color: #1a1a1a;
}

body.light-mode .checkmark {
    border-color: rgba(0, 0, 0, 0.3);
}

body.light-mode .privacy-toggle::before {
    border-top-color: #ff6e2e;
}

body.light-mode .privacy-terms-box {
    background: rgba(0, 0, 0, 0.025);
    color: rgba(0, 0, 0, 0.56);
}

body.light-mode .privacy-terms-box.is-open {
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .privacy-terms-box h3,
body.light-mode .privacy-terms-box .privacy-term-heading {
    color: rgba(0, 0, 0, 0.7);
}

body.light-mode #page-contact .contact-breadcrumb,
body.light-mode #page-contact .contact-breadcrumb a {
    color: rgba(11, 11, 11, 0.56) !important;
}

body.light-mode #page-contact .contact-breadcrumb .current-noola {
    color: #ff6e2e !important;
}

/* 짧은 데스크톱 화면에서도 헤더와 푸터 사이에 폼 전체가 안정적으로 배치되도록 압축합니다. */
@media (min-width: 769px) and (max-height: 950px) {
    #page-contact .snap-section {
        justify-content: flex-start !important;
        padding-top: calc(var(--site-header-h, 90px) + 24px) !important;
        padding-bottom: 12px !important;
    }

    #page-contact .sub-header {
        padding-bottom: clamp(10px, 1.5dvh, 16px);
    }

    #page-contact .contact-breadcrumb {
        margin-bottom: 9px;
        font-size: 13px;
    }

    #page-contact .sub-header h1,
    #page-contact .sub-header h2,
    #page-contact .business-title-small {
        font-size: clamp(42px, 5.4dvh, 52px) !important;
    }

    #page-contact .sub-header .page-title-desc {
        margin-top: 6px;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    #page-contact .form-grid {
        margin-bottom: clamp(10px, 1.55dvh, 15px);
    }

    #page-contact input[type="text"] {
        padding: clamp(5px, 0.85dvh, 8px) 0;
    }

    #page-contact select,
    #page-contact textarea {
        padding: clamp(9px, 1.2dvh, 12px) 14px;
    }

    #page-contact textarea {
        min-height: clamp(78px, 12dvh, 112px);
    }

    #page-contact .contact-section-margin {
        margin-top: clamp(5px, 1dvh, 9px) !important;
        margin-bottom: clamp(9px, 1.4dvh, 13px) !important;
    }

    #page-contact .textarea-group {
        margin-top: clamp(5px, 1dvh, 9px) !important;
    }

    #page-contact .privacy-agreement {
        margin-top: 5px;
        margin-bottom: clamp(8px, 1.3dvh, 12px);
    }

    #page-contact .contact-send-btn {
        padding: clamp(11px, 1.45dvh, 14px) 0 !important;
    }

    #page-contact .contact-result {
        min-height: 0;
        margin-top: 4px;
    }
}

/* ================================================================
   [모바일 전용 최적화] - PC 버전 영향 없음
   ================================================================ */
@media (max-width: 768px) {
    /* 1. 스크롤 유도 마우스 아이콘 숨김 (Contact 페이지 활성화 시) */
    body:has(#page-contact.active) #scroll-hint-overlay {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* 2. 섹션 시작점 및 레이아웃 조정 */
    #page-contact .snap-section {
        justify-content: flex-start !important; /* 위에서부터 차곡차곡 쌓임 */
        padding-top: calc(var(--site-header-h, 70px) + 28px) !important;
        padding-bottom: 60px !important;        /* 하단 여유 공간 */
        height: auto !important;                /* 내용에 따라 높이 가변 */
        min-height: 100dvh !important;
    }

    #page-contact .sub-header {
        margin-top: 0 !important;
        padding-bottom: 30px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    #page-contact .contact-breadcrumb {
        margin-bottom: 10px;
        font-size: 13px;
    }

    .contact-container {
        padding: 0 20px !important; /* 좌우 여백 확보 */
    }

    .contact-box {
        padding: 10px 0 !important;
    }

    /* 3. 입력 필드 자동 크기 조절 (라벨과 입력을 세로로 배치) */
    .input-group {
        flex-direction: column !important; /* 가로 배열에서 세로 배열로 변경 */
        align-items: flex-start !important;
        margin-bottom: 25px !important;
    }

    .input-group label {
        margin-right: 0 !important;
        margin-bottom: 8px !important; /* 라벨과 입력창 사이 간격 */
        font-size: 15px !important;
    }

    /* 폼 그리드 간격 조정 */
    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important; /* 세로 배치이므로 그룹 간 간격은 input-group의 margin이 담당 */
    }

    .contact-section-margin, .textarea-group {
        margin-top: 10px !important;
    }

    /* 체크박스 텍스트 크기 최적화 */
    .custom-checkbox {
        font-size: 14px !important;
    }

    .checkbox-text {
        line-height: 1.4 !important;
    }

/* 전송 버튼 중앙 정렬 및 너비 조정 */
    .contact-send-btn {
        display: flex !important;           /* 내부 텍스트 정렬을 위해 flex 사용 */
        justify-content: center !important;
        align-items: center !important;
        
        width: 100% !important;             /* 가로를 꽉 채우되 */
        max-width: 280px !important;        /* index.css의 버튼 제한인 280px 유지 */
        margin: 20px auto 0 auto !important; /* 핵심: 위쪽 여백 20px, 좌우 margin auto로 중앙 정렬 */
        
        padding: 16px 0 !important;
        font-size: 16px !important;
    }
}

/* Contact only: center the content between the fixed header and flow footer. */
html:has(body[data-page="contact"]),
body[data-page="contact"] {
 height:auto!important;min-height:100svh!important;overflow-y:auto!important;overflow-x:clip!important;
}
body[data-page="contact"] #app-container,
body[data-page="contact"] #page-contact {
 height:auto!important;min-height:0!important;overflow:visible!important;
}
html body[data-page="contact"] .page-footer,
html body[data-page="contact"] .page-footer.visible {
 position:relative!important;inset:auto!important;opacity:1!important;visibility:visible!important;
 pointer-events:auto!important;transform:none!important;transition:none!important;
}
html body[data-page="contact"] .page-footer-spacer {display:none!important;height:0!important}
body[data-page="contact"] #scroll-hint-overlay {display:none!important}
#page-contact {--contact-header-height:90px;--contact-space:clamp(24px,3dvh,40px)}
#page-contact #contact-sec-main {
 min-height:calc(100svh - var(--site-footer-h,134px))!important;height:auto!important;
 padding:calc(var(--contact-header-height) + var(--contact-space)) 5vw var(--contact-space)!important;
 justify-content:center!important;overflow:visible;
}
#page-contact #contact-sec-main > :is(.sub-header,.contact-container) {flex-shrink:0}
#page-contact .contact-container,#page-contact .contact-box,
#page-contact :is(input,select,textarea,.select-wrapper) {box-sizing:border-box;min-width:0}
#page-contact .contact-result:empty {display:none}
#page-contact :is(input[type="text"],select,textarea):focus {
 border-color:#ff6e2e!important;outline:none;box-shadow:none!important;
}
@media(max-width:1400px) {
 #page-contact {--contact-header-height:84px}
}
@media(min-width:769px) and (max-height:800px) {
 #page-contact {--preview-title-size:clamp(36px,5.8dvh,46px);--preview-description-size:16px;--preview-description-leading:1.5;--contact-space:20px}
 #page-contact .sub-header {padding-bottom:18px}
 #page-contact textarea {height:clamp(84px,12dvh,100px);min-height:84px}
}
@media(max-width:768px) {
 #page-contact {--contact-space:28px}
 #page-contact .contact-container {padding:0!important}
 #page-contact .contact-box {padding:0!important}
 #page-contact .sub-header {padding-inline:0!important;padding-bottom:28px!important}
 #page-contact .input-group {margin-bottom:20px!important}
 #page-contact .form-grid {margin-bottom:0}
 #page-contact :is(input[type="text"],select,textarea) {font-size:16px}
 #page-contact .privacy-agreement {margin-bottom:12px}
 #page-contact .contact-send-btn {margin-top:16px!important}
}
@media(min-width:601px) and (max-width:768px) {
 #page-contact .form-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:28px!important}
}

@media(max-width:599px) {
 #page-contact {--contact-header-height:70px}
}

/* Contact: existing visual language, introduction left and form right. */
#page-contact .contact-layout {
 display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.65fr);
 align-items:start;gap:clamp(48px,6vw,112px);width:100%;max-width:1440px;margin-inline:auto;
}
#page-contact .contact-layout > .sub-header {
 width:100%;max-width:none;padding:0!important;margin:0;text-align:left;
}
#page-contact .contact-layout > .contact-container {
 width:100%;max-width:none;padding:0!important;margin:0;min-width:0;
}
#page-contact .contact-layout .input-group {flex-direction:column;align-items:flex-start}
#page-contact .contact-layout .input-group label {margin:0 0 10px;line-height:1.4!important}
#page-contact .contact-layout .select-wrapper {width:100%}
#page-contact .contact-layout .contact-box {padding:0!important}
#page-contact .contact-layout .form-grid {column-gap:clamp(24px,3vw,40px)}
#page-contact .contact-layout .page-title-desc {text-wrap:pretty}
@media(max-width:1000px) {
 #page-contact .contact-layout {grid-template-columns:minmax(0,1fr);max-width:780px;gap:36px}
}
@media(max-width:600px) {
 #page-contact .contact-layout {gap:30px}
}

/* Native select remains the form value; this list provides consistent rendering. */
#page-contact {--contact-placeholder:rgba(255,255,255,.3);--contact-select-bg:#1f1f1f;--contact-select-ink:#fff;--contact-select-line:rgba(255,255,255,.4)}
body.light-mode #page-contact {--contact-placeholder:rgba(0,0,0,.3);--contact-select-bg:#fff;--contact-select-ink:#1a1a1a;--contact-select-line:rgba(0,0,0,.2)}
#page-contact #c_type:has(option[value=""]:checked) {color:var(--contact-placeholder)!important}
#page-contact .select-wrapper::after {color:#ff6e2e}
#page-contact .select-wrapper.is-enhanced::after {content:none}
#page-contact .select-wrapper.is-open {z-index:5}
#page-contact .contact-select-trigger {
 display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:49px;
 padding:14px 16px;border:1px solid var(--contact-select-line);border-radius:4px;background:transparent;
 color:var(--contact-select-ink);font:inherit;font-size:15px;font-weight:400;line-height:1.4;text-align:left;cursor:pointer;
 transition:border-color .3s;
}
#page-contact .contact-select-trigger.is-placeholder {color:var(--contact-placeholder)}
#page-contact .contact-select-trigger:focus,#page-contact .is-open .contact-select-trigger {border-color:#ff6e2e;outline:none;box-shadow:none}
#page-contact .contact-select-arrow {flex:none;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #ff6e2e;transition:transform .25s ease}
#page-contact .is-open .contact-select-arrow {transform:rotate(180deg)}
#page-contact .contact-select-options {
 position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:10;padding:6px;overflow-y:auto;overscroll-behavior:contain;
 border:1px solid var(--contact-select-line);border-radius:8px;background:var(--contact-select-bg);color:var(--contact-select-ink);
 box-shadow:0 10px 28px rgba(0,0,0,.12);scrollbar-width:thin;
}
#page-contact .contact-select-options[hidden] {display:none}
#page-contact .opens-up .contact-select-options {top:auto;bottom:calc(100% + 8px)}
#page-contact .contact-select-option {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;padding:10px 12px;border-radius:4px;font-size:15px;line-height:1.4;cursor:pointer;transition:background-color .18s,color .18s}
#page-contact .contact-select-option:is(.is-active,[aria-selected="true"]) {background:rgba(255,110,46,.1);color:#ff6e2e}
#page-contact .contact-select-option[aria-selected="true"]::after {content:'✓';font-size:15px}
@media(max-width:768px) {#page-contact .contact-select-trigger,#page-contact .contact-select-option {font-size:16px}}
@media(prefers-reduced-motion:reduce) {#page-contact :is(.contact-select-arrow,.contact-select-trigger,.contact-select-option) {transition:none}}
#page-contact .contact-select-trigger #contact-type-value {color:inherit!important;-webkit-text-fill-color:currentColor!important}

/* Cover the browser autofill paint without changing the field's focus border. */
#page-contact {--contact-field-bg:#0b0b0b;--contact-field-ink:#fff}
body.light-mode #page-contact {--contact-field-bg:#fcfcfc;--contact-field-ink:#1a1a1a}
#page-contact input:is(:autofill,:-webkit-autofill),
#page-contact input:is(:autofill,:-webkit-autofill):is(:hover,:focus,:active) {
    -webkit-box-shadow:0 0 0 1000px var(--contact-field-bg) inset!important;
    box-shadow:0 0 0 1000px var(--contact-field-bg) inset!important;
    -webkit-text-fill-color:var(--contact-field-ink)!important;
    color:var(--contact-field-ink)!important;
    caret-color:var(--contact-field-ink);
    background-color:var(--contact-field-bg)!important;
}

/* Reserve space around the form instead of squeezing it into short windows. */
html body[data-page="contact"] #page-contact {--contact-space:clamp(32px,4svh,64px)}
#page-contact .contact-layout > * {min-width:0}
#page-contact .contact-layout .form-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
#page-contact .contact-layout .privacy-consent-row {max-width:100%;row-gap:10px}
#page-contact .contact-layout .custom-checkbox {min-width:0;max-width:100%;justify-content:flex-start}
#page-contact .contact-layout .checkbox-text {line-height:1.5!important;overflow-wrap:anywhere}
@media(max-width:600px) {
 #page-contact .contact-layout .form-grid {grid-template-columns:minmax(0,1fr)!important}
}

/* Match the service guide's outlined portfolio action. */
#page-contact .contact-quote-actions {margin-top:24px;text-align:left}
#page-contact .contact-quote-link {
 display:inline-flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;
 min-height:48px;max-width:100%;padding:14px 25px;border:1px solid rgba(252,252,252,.14);border-radius:999px;
 background:transparent;color:#fcfcfc;font-size:16px;font-weight:500;line-height:1.4;text-decoration:none;
 transition:background-color .25s,border-color .25s,color .25s;
}
body.light-mode #page-contact .contact-quote-link {border-color:rgba(11,11,11,.12);color:#0b0b0b}
html body #page-contact .contact-quote-link:is(:hover,:focus-visible) {background:#ff6e2e;border-color:#ff6e2e;color:#fff}
#page-contact .contact-quote-link:focus-visible {outline:2px solid #ff6e2e;outline-offset:5px}
#page-contact .contact-quote-link svg {width:22px;height:20px;flex:none;stroke:currentColor;transition:transform .25s}
#page-contact .contact-quote-link:is(:hover,:focus-visible) svg {transform:translate(3px,-3px)}
body.preview-heading-play #page-contact .contact-quote-actions {animation:previewPageDescriptionIn .65s cubic-bezier(.22,1,.36,1) .7s both}
@media(max-width:768px) {#page-contact .contact-quote-link {font-size:14px;padding:12px 17px}}
@media(max-width:600px) {
 #page-contact .contact-quote-link {padding:12px 10px;gap:4px}
 #page-contact .contact-quote-link svg {width:18px;height:18px}
}
@media(prefers-reduced-motion:reduce) {
 body.preview-heading-play #page-contact .contact-quote-actions {animation:none}
 #page-contact .contact-quote-link,#page-contact .contact-quote-link svg {transition:none}
}

/* Match the signup form's borderless surfaces in both themes. */
#page-contact {
 --contact-field-bg:#1f1f1f;--contact-field-active:#292929;
 --contact-field-ink:#fcfcfc;--contact-select-bg:#1f1f1f;--contact-select-ink:#fcfcfc;
 --contact-terms-ink:#aaa;
}
body.light-mode #page-contact {
 --contact-field-bg:#f5f5f5;--contact-field-active:#ebebeb;
 --contact-field-ink:#0b0b0b;--contact-select-bg:#f5f5f5;--contact-select-ink:#0b0b0b;
 --contact-terms-ink:#707070;
}
html body #page-contact :is(input[type="text"],textarea,select,.contact-select-trigger) {
 min-height:50px;padding:13px 16px;border:0!important;border-radius:8px!important;
 outline:none;box-shadow:none;background:var(--contact-field-bg)!important;
 color:var(--contact-field-ink);font-size:16px;line-height:1.5;
 transition:background-color .35s cubic-bezier(.4,0,.2,1),box-shadow .35s cubic-bezier(.4,0,.2,1);
}
html body #page-contact :is(input[type="text"],textarea,select,.contact-select-trigger):is(:hover,:focus),
html body #page-contact .is-open .contact-select-trigger {--contact-field-bg:var(--contact-field-active)}
html body #page-contact .contact-select-trigger.is-placeholder {color:var(--contact-placeholder)}
html body #page-contact .contact-select-options {border:0;border-radius:8px}
html body #page-contact .privacy-terms-box {
 border:0;border-radius:8px;background:var(--contact-select-bg);color:var(--contact-terms-ink);
 font-size:15px;line-height:1.7;scrollbar-color:#ff6e2e transparent;
}
html body #page-contact .privacy-terms-box :is(p,li,h3,.privacy-term-heading) {
 font-size:15px;line-height:1.7;color:var(--contact-terms-ink)!important;
}
html body #page-contact .privacy-terms-box::-webkit-scrollbar-track {background:transparent}
html body #page-contact .privacy-terms-box::-webkit-scrollbar-thumb {background:#ff6e2e;border:2px solid var(--contact-select-bg);border-radius:999px}
@media(prefers-reduced-motion:reduce) {
 html body #page-contact :is(input[type="text"],textarea,select,.contact-select-trigger) {transition:none}
}