/* =====================================
   CONTACT.CSS V1
   3D LOGO MAKER
   Progressive project qualification page
===================================== */

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

.contactPage{
   --contact-accent:#c79a45;
   --contact-accent-strong:#9b690b;
   --contact-accent-soft:rgba(199,154,69,.12);
   --contact-accent-border:rgba(199,154,69,.34);
   --contact-success:#2f7d4c;
   --contact-success-soft:rgba(47,125,76,.10);
   --contact-danger:#b64040;
   --contact-danger-soft:rgba(182,64,64,.08);
   --contact-ring:0 0 0 4px rgba(199,154,69,.16);
   --contact-shadow-soft:0 18px 54px rgba(28,23,15,.08);
   --contact-shadow-card:0 26px 80px rgba(28,23,15,.10);
   --contact-field-bg:color-mix(in srgb, var(--card) 90%, var(--bg));
   --contact-surface-soft:color-mix(in srgb, var(--card) 74%, var(--bg));
   --contact-surface-strong:color-mix(in srgb, var(--card) 96%, var(--bg));
}

.theme-dark.contactPage{
   --contact-accent:#e0b55e;
   --contact-accent-strong:#f0c873;
   --contact-accent-soft:rgba(224,181,94,.12);
   --contact-accent-border:rgba(224,181,94,.28);
   --contact-success:#6fc08b;
   --contact-success-soft:rgba(111,192,139,.10);
   --contact-danger:#ef8585;
   --contact-danger-soft:rgba(239,133,133,.08);
   --contact-ring:0 0 0 4px rgba(224,181,94,.14);
   --contact-shadow-soft:0 18px 54px rgba(0,0,0,.24);
   --contact-shadow-card:0 26px 80px rgba(0,0,0,.32);
}

.contactPage main{
   overflow:clip;
}

.contactPage ::selection{
   background:var(--contact-accent);
   color:#111;
}

/* =====================================
   ACCESSIBILITY HELPERS
===================================== */

.contactPage .skipLink{
   position:fixed;
   left:20px;
   top:14px;
   z-index:10050;
   padding:11px 16px;
   border:1px solid var(--border);
   border-radius:12px;
   background:var(--card);
   color:var(--text);
   font-size:14px;
   font-weight:750;
   box-shadow:var(--contact-shadow-soft);
   transform:translateY(-160%);
   transition:transform .2s ease;
}

.contactPage .skipLink:focus{
   transform:translateY(0);
}

.contactPage .srOnly{
   position:absolute !important;
   width:1px !important;
   height:1px !important;
   padding:0 !important;
   margin:-1px !important;
   overflow:hidden !important;
   clip:rect(0,0,0,0) !important;
   white-space:nowrap !important;
   border:0 !important;
}

.contactPage .hpField{
   position:absolute !important;
   left:-9999px !important;
   width:1px !important;
   height:1px !important;
   overflow:hidden !important;
}

.contactPage a:focus-visible,
.contactPage button:focus-visible,
.contactPage input:focus-visible,
.contactPage textarea:focus-visible,
.contactPage select:focus-visible,
.contactPage summary:focus-visible{
   outline:2px solid var(--contact-accent);
   outline-offset:3px;
}

/* =====================================
   SHARED CONTACT TYPOGRAPHY
===================================== */

.contactPage .eyebrow,
.contactPage .formKicker{
   color:var(--contact-accent-strong);
   font-size:12px;
   font-weight:800;
   line-height:1.2;
   letter-spacing:.16em;
   text-transform:uppercase;
}

.theme-dark.contactPage .eyebrow,
.theme-dark.contactPage .formKicker{
   color:var(--contact-accent);
}

.contactPage .sectionIntro{
   max-width:720px;
}

.contactPage .sectionIntro h2{
   margin-top:12px;
   font-size:clamp(34px, 3.4vw, 52px);
   line-height:1.08;
   letter-spacing:-.035em;
}

.contactPage .sectionIntro > p:last-child{
   margin-top:18px;
   max-width:660px;
   color:var(--text-muted);
   font-size:17px;
   line-height:1.75;
}

/* =====================================
   HERO / FIRST VIEW
===================================== */

.contactHero{
   position:relative;
   padding:82px 0 112px;
   background:
      radial-gradient(circle at 10% 12%, rgba(199,154,69,.10), transparent 29%),
      radial-gradient(circle at 92% 4%, rgba(199,154,69,.07), transparent 23%),
      var(--bg);
}

.theme-dark .contactHero{
   background:
      radial-gradient(circle at 10% 12%, rgba(224,181,94,.08), transparent 30%),
      radial-gradient(circle at 92% 4%, rgba(224,181,94,.05), transparent 24%),
      var(--bg);
}

.contactHero::after{
   content:"";
   position:absolute;
   inset:auto 0 0;
   height:1px;
   background:var(--border);
   pointer-events:none;
}

.contactHeroGrid{
   display:grid;
   grid-template-columns:minmax(0, .78fr) minmax(620px, 1.22fr);
   gap:72px;
   align-items:start;
}

.contactIntro{
   position:sticky;
   top:118px;
   padding-top:16px;
}

.contactIntro h1{
   margin-top:18px;
   max-width:630px;
   font-size:clamp(54px, 5.2vw, 78px);
   line-height:.98;
   letter-spacing:-.055em;
}

.contactLead{
   margin-top:28px;
   max-width:610px;
   color:var(--text-muted);
   font-size:19px;
   line-height:1.72;
}

.contactTrustList{
   margin-top:40px;
   display:grid;
   gap:16px;
}

.contactTrustItem{
   display:grid;
   grid-template-columns:44px 1fr;
   gap:15px;
   align-items:start;
   padding:16px 0;
   border-top:1px solid var(--border);
}

.contactTrustItem:first-child{
   border-top:0;
}

.contactTrustIcon{
   display:grid;
   place-items:center;
   width:38px;
   height:38px;
   border:1px solid var(--contact-accent-border);
   border-radius:999px;
   background:var(--contact-accent-soft);
   color:var(--contact-accent-strong);
   font-size:11px;
   font-weight:850;
   line-height:1;
   letter-spacing:.06em;
}

.theme-dark .contactTrustIcon{
   color:var(--contact-accent);
}

.contactTrustItem strong{
   display:block;
   font-size:15px;
   font-weight:800;
   line-height:1.35;
}

.contactTrustItem p{
   margin-top:5px;
   max-width:470px;
   color:var(--text-muted);
   font-size:14px;
   line-height:1.55;
}

.directContactCard{
   margin-top:30px;
   padding:22px;
   border:1px solid var(--border);
   border-radius:22px;
   background:var(--contact-surface-soft);
   box-shadow:var(--contact-shadow-soft);
}

.directContactLabel{
   font-size:14px;
   font-weight:800;
}

.directContactActions{
   margin-top:14px;
   display:flex;
   flex-wrap:wrap;
   gap:10px;
}

.contactAction,
.buttonPrimary,
.buttonSecondary{
   min-height:48px;
   padding:12px 18px;
   border:1px solid transparent;
   border-radius:14px;
   display:inline-flex;
   align-items:center;
   justify-content:center;
   gap:8px;
   font-size:14px;
   font-weight:800;
   line-height:1.2;
   cursor:pointer;
   transition:
      transform .2s ease,
      background .2s ease,
      border-color .2s ease,
      color .2s ease,
      box-shadow .2s ease;
}

.contactAction:hover,
.buttonPrimary:hover,
.buttonSecondary:hover{
   transform:translateY(-1px);
}

.contactActionPrimary,
.buttonPrimary{
   border-color:#161616;
   background:#161616;
   color:#fff;
   box-shadow:0 10px 26px rgba(0,0,0,.13);
}

.theme-dark .contactActionPrimary,
.theme-dark .buttonPrimary{
   border-color:#f0f0f0;
   background:#f0f0f0;
   color:#111;
   box-shadow:none;
}

.contactActionPrimary:hover,
.buttonPrimary:hover{
   box-shadow:0 13px 32px rgba(0,0,0,.18);
}

.contactActionSecondary,
.buttonSecondary{
   border-color:var(--border);
   background:var(--card);
   color:var(--text);
}

.contactActionSecondary:hover,
.buttonSecondary:hover{
   border-color:color-mix(in srgb, var(--text) 24%, var(--border));
   background:color-mix(in srgb, var(--card) 82%, var(--bg));
}

.directContactNote{
   margin-top:14px;
   color:var(--text-muted);
   font-size:12px;
   line-height:1.55;
}

/* =====================================
   FORM SHELL
===================================== */

.projectFormShell{
   position:relative;
   border:1px solid var(--border);
   border-radius:30px;
   background:var(--card);
   box-shadow:var(--contact-shadow-card);
   overflow:hidden;
   scroll-margin-top:112px;
}

.projectFormHeader{
   padding:38px 40px 30px;
   border-bottom:1px solid var(--border);
   background:
      linear-gradient(135deg, var(--contact-accent-soft), transparent 58%),
      var(--contact-surface-strong);
}

.projectFormHeader h2{
   margin-top:10px;
   max-width:650px;
   font-size:34px;
   line-height:1.12;
   letter-spacing:-.035em;
}

.projectFormHeader > p:last-child{
   margin-top:12px;
   max-width:690px;
   color:var(--text-muted);
   font-size:15px;
   line-height:1.65;
}

.projectForm{
   position:relative;
}

.formSection{
   padding:36px 40px;
   border-bottom:1px solid var(--border);
}

.formSection:last-child{
   border-bottom:0;
}

.formSectionOptional{
   background:color-mix(in srgb, var(--bg) 38%, var(--card));
}

.formSectionSubmit{
   background:var(--contact-surface-strong);
}

.formSectionHeading{
   display:grid;
   grid-template-columns:42px 1fr;
   gap:16px;
   align-items:start;
   margin-bottom:28px;
}

.formSectionHeading.compact{
   margin-bottom:24px;
}

.formSectionHeading.submitHeading{
   grid-template-columns:1fr;
   gap:0;
}

.formSectionNumber{
   display:grid;
   place-items:center;
   width:40px;
   height:40px;
   border:1px solid var(--contact-accent-border);
   border-radius:999px;
   background:var(--contact-accent-soft);
   color:var(--contact-accent-strong);
   font-size:12px;
   font-weight:850;
}

.theme-dark .formSectionNumber{
   color:var(--contact-accent);
}

.formSectionHeading h3{
   font-size:24px;
   line-height:1.25;
   letter-spacing:-.02em;
}

.formSectionHeading p{
   margin-top:5px;
   max-width:670px;
   color:var(--text-muted);
   font-size:14px;
   line-height:1.6;
}

.optionalBadge{
   display:inline-flex;
   width:max-content;
   margin:0 0 7px !important;
   padding:5px 8px;
   border:1px solid var(--contact-accent-border);
   border-radius:999px;
   background:var(--contact-accent-soft);
   color:var(--contact-accent-strong) !important;
   font-size:10px !important;
   font-weight:850;
   line-height:1 !important;
   letter-spacing:.1em;
   text-transform:uppercase;
}

.theme-dark .optionalBadge{
   color:var(--contact-accent) !important;
}

/* =====================================
   FORM FIELDS
===================================== */

.formGrid{
   display:grid;
   gap:18px;
}

.formGrid.twoColumn{
   grid-template-columns:repeat(2, minmax(0, 1fr));
}

.fieldGroup,
.phoneFieldset,
.choiceFieldset,
.fileUploadGroup{
   min-width:0;
}

.fieldGroup + .fieldGroup,
.formGrid + .phoneFieldset,
.phoneFieldset + .choiceFieldset,
.choiceFieldset + .choiceFieldset,
.choiceFieldset + .coreReadyState,
.formGrid + .fieldGroup,
.fieldGroup + .fileUploadGroup{
   margin-top:22px;
}

.formGrid .fieldGroup + .fieldGroup{
   margin-top:0;
}

.fieldGroup label,
.fieldLabelRow > label,
.choiceFieldset legend{
   color:var(--text);
   font-size:14px;
   font-weight:780;
   line-height:1.35;
}

.fieldLabelRow{
   display:flex;
   align-items:flex-end;
   justify-content:space-between;
   gap:14px;
   margin-bottom:9px;
}

.fieldHint,
.optionalText{
   color:var(--text-muted);
   font-size:11px;
   font-weight:650;
   line-height:1.35;
}

.optionalText{
   margin-left:4px;
}

.fieldGroup > label{
   display:block;
   margin-bottom:9px;
}

.contactPage input[type="text"],
.contactPage input[type="email"],
.contactPage input[type="tel"],
.contactPage input[type="url"],
.contactPage input[type="number"],
.contactPage textarea,
.contactPage select{
   width:100%;
   min-height:52px;
   border:1px solid var(--border);
   border-radius:14px;
   background:var(--contact-field-bg);
   color:var(--text);
   padding:13px 14px;
   font-size:15px;
   line-height:1.4;
   transition:
      border-color .18s ease,
      box-shadow .18s ease,
      background .18s ease;
}

.contactPage textarea{
   min-height:126px;
   resize:vertical;
}

.contactPage select{
   appearance:auto;
}

.contactPage input::placeholder,
.contactPage textarea::placeholder{
   color:color-mix(in srgb, var(--text-muted) 78%, transparent);
}

.contactPage input:hover,
.contactPage textarea:hover,
.contactPage select:hover{
   border-color:color-mix(in srgb, var(--text) 22%, var(--border));
}

.contactPage input:focus,
.contactPage textarea:focus,
.contactPage select:focus{
   outline:none;
   border-color:var(--contact-accent);
   box-shadow:var(--contact-ring);
   background:var(--card);
}

.contactPage input[aria-invalid="true"],
.contactPage textarea[aria-invalid="true"],
.contactPage select[aria-invalid="true"]{
   border-color:var(--contact-danger);
   box-shadow:0 0 0 3px var(--contact-danger-soft);
}

.fieldHelp,
.choiceHelp{
   margin-top:8px;
   color:var(--text-muted);
   font-size:12px;
   line-height:1.5;
}

.fieldHelp strong{
   color:var(--text);
   font-weight:750;
}

.fieldError{
   min-height:0;
   margin-top:7px;
   color:var(--contact-danger);
   font-size:12px;
   font-weight:650;
   line-height:1.45;
}

.fieldError:empty{
   display:none;
}

/* =====================================
   INTERNATIONAL PHONE CONTROL
===================================== */

.phoneInputGroup{
   display:grid;
   grid-template-columns:150px minmax(0, 1fr);
   gap:10px;
}

.countryCodeField,
.phoneNumberField{
   min-width:0;
}

.countryCodeInput{
   font-weight:750;
}

.phoneInputGroup:focus-within{
   border-radius:16px;
}

/* =====================================
   CHOICE CARDS
===================================== */

.choiceFieldset{
   border:0;
   padding:0;
}

.choiceFieldset legend{
   display:block;
   width:100%;
   margin-bottom:8px;
}

.choiceHelp{
   margin-top:0;
   margin-bottom:11px;
}

.choiceGrid{
   display:grid;
   gap:10px;
}

.choiceGridThree{
   grid-template-columns:repeat(3, minmax(0, 1fr));
}

.serviceChoiceGrid,
.businessChoiceGrid{
   grid-template-columns:repeat(2, minmax(0, 1fr));
}

.choiceCard{
   position:relative;
   display:block;
   min-width:0;
   cursor:pointer;
   -webkit-tap-highlight-color:transparent;
}

.choiceCard input{
   position:absolute;
   opacity:0;
   pointer-events:none;
}

.choiceCard > span{
   display:flex;
   flex-direction:column;
   min-height:82px;
   height:100%;
   padding:15px 16px;
   border:1px solid var(--border);
   border-radius:16px;
   background:var(--contact-field-bg);
   transition:
      border-color .18s ease,
      background .18s ease,
      transform .18s ease,
      box-shadow .18s ease;
}

.choiceCard:hover > span{
   border-color:color-mix(in srgb, var(--text) 24%, var(--border));
   transform:translateY(-1px);
}

.choiceCard input:focus-visible + span{
   outline:2px solid var(--contact-accent);
   outline-offset:3px;
}

.choiceCard input:checked + span{
   border-color:var(--contact-accent);
   background:var(--contact-accent-soft);
   box-shadow:inset 0 0 0 1px var(--contact-accent-border);
}

.choiceCard input:checked + span::after{
   content:"✓";
   position:absolute;
   top:10px;
   right:11px;
   display:grid;
   place-items:center;
   width:20px;
   height:20px;
   border-radius:999px;
   background:var(--contact-accent);
   color:#17120a;
   font-size:12px;
   font-weight:900;
   line-height:1;
}

.choiceCard strong{
   padding-right:22px;
   font-size:13px;
   font-weight:820;
   line-height:1.38;
}

.choiceCard small{
   margin-top:6px;
   color:var(--text-muted);
   font-size:11px;
   line-height:1.45;
}

/* =====================================
   CORE READY STATE
===================================== */

.coreReadyState{
   margin-top:26px;
   padding:20px;
   border:1px solid color-mix(in srgb, var(--contact-success) 36%, var(--border));
   border-radius:18px;
   background:var(--contact-success-soft);
}

.coreReadyState[hidden]{
   display:none;
}

.coreReadyState strong{
   display:block;
   color:var(--contact-success);
   font-size:15px;
   font-weight:850;
}

.coreReadyState p{
   margin-top:6px;
   max-width:700px;
   color:var(--text-muted);
   font-size:13px;
   line-height:1.55;
}

.coreReadyActions{
   margin-top:16px;
   display:flex;
   flex-wrap:wrap;
   gap:10px;
}

/* =====================================
   DYNAMIC QUALIFICATION
===================================== */

.dynamicQualification{
   display:grid;
   gap:20px;
}

.dynamicQualification:empty{
   display:none;
}

.dynamicBlock,
.dynamicGroup,
.dynamicQuestionGroup{
   padding:22px;
   border:1px solid var(--border);
   border-radius:20px;
   background:var(--card);
}

.dynamicBlock + .dynamicBlock,
.dynamicGroup + .dynamicGroup,
.dynamicQuestionGroup + .dynamicQuestionGroup{
   margin-top:0;
}

.dynamicBlockHeader,
.dynamicGroupHeader{
   margin-bottom:18px;
}

.dynamicBlockHeader h4,
.dynamicGroupHeader h4,
.practicalDetails > h4{
   font-size:18px;
   line-height:1.3;
   letter-spacing:-.015em;
}

.dynamicBlockHeader p,
.dynamicGroupHeader p{
   margin-top:5px;
   color:var(--text-muted);
   font-size:12px;
   line-height:1.55;
}

.dynamicQuestions{
   display:grid;
   gap:18px;
}

.dynamicChoiceGrid{
   display:grid;
   grid-template-columns:repeat(2, minmax(0, 1fr));
   gap:9px;
}

.dynamicChoiceGrid.threeColumn{
   grid-template-columns:repeat(3, minmax(0, 1fr));
}

.dynamicChoice,
.checkChoice{
   position:relative;
   display:block;
   cursor:pointer;
}

.dynamicChoice input,
.checkChoice input{
   position:absolute;
   opacity:0;
   pointer-events:none;
}

.dynamicChoice span,
.checkChoice span{
   position:relative;
   display:flex;
   align-items:center;
   min-height:46px;
   padding:11px 13px;
   border:1px solid var(--border);
   border-radius:13px;
   background:var(--contact-field-bg);
   color:var(--text);
   font-size:12px;
   font-weight:700;
   line-height:1.35;
   transition:
      border-color .18s ease,
      background .18s ease,
      transform .18s ease;
}

.dynamicChoice:hover span,
.checkChoice:hover span{
   border-color:color-mix(in srgb, var(--text) 22%, var(--border));
}

.dynamicChoice input:focus-visible + span,
.checkChoice input:focus-visible + span{
   outline:2px solid var(--contact-accent);
   outline-offset:2px;
}

.dynamicChoice input:checked + span,
.checkChoice input:checked + span{
   border-color:var(--contact-accent);
   background:var(--contact-accent-soft);
}

.dynamicChoice input:checked + span::after,
.checkChoice input:checked + span::after{
   content:"✓";
   margin-left:auto;
   padding-left:9px;
   color:var(--contact-accent-strong);
   font-weight:900;
}

.theme-dark .dynamicChoice input:checked + span::after,
.theme-dark .checkChoice input:checked + span::after{
   color:var(--contact-accent);
}

.dynamicQuestion label.questionLabel{
   display:block;
   margin-bottom:8px;
   font-size:13px;
   font-weight:780;
   line-height:1.4;
}

.dynamicQuestion .questionHint{
   margin:-2px 0 8px;
   color:var(--text-muted);
   font-size:11px;
   line-height:1.5;
}

.practicalDetails{
   margin-top:26px;
   padding-top:26px;
   border-top:1px solid var(--border);
}

.practicalDetails > h4{
   margin-bottom:18px;
}

/* =====================================
   FILE UPLOAD
===================================== */

.uploadDropzone{
   position:relative;
   min-height:150px;
   border:1.5px dashed color-mix(in srgb, var(--text) 20%, var(--border));
   border-radius:18px;
   background:var(--contact-field-bg);
   transition:
      border-color .18s ease,
      background .18s ease,
      box-shadow .18s ease;
}

.uploadDropzone:hover,
.uploadDropzone.isDragging{
   border-color:var(--contact-accent);
   background:var(--contact-accent-soft);
}

.uploadDropzone:focus-within{
   border-color:var(--contact-accent);
   box-shadow:var(--contact-ring);
}

.uploadDropzone input[type="file"]{
   position:absolute;
   inset:0;
   z-index:2;
   width:100%;
   height:100%;
   opacity:0;
   cursor:pointer;
}

.uploadPrompt{
   min-height:150px;
   padding:24px;
   display:flex;
   flex-direction:column;
   align-items:center;
   justify-content:center;
   text-align:center;
}

.uploadPrompt strong{
   font-size:14px;
   font-weight:820;
}

.uploadPrompt span{
   margin-top:5px;
   color:var(--text-muted);
   font-size:12px;
}

.uploadPrompt small{
   margin-top:5px;
   color:var(--text-muted);
   font-size:10px;
   line-height:1.45;
}

.selectedFiles{
   display:grid;
   gap:7px;
   margin-top:10px;
}

.selectedFileItem{
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:12px;
   padding:9px 11px;
   border:1px solid var(--border);
   border-radius:11px;
   background:var(--contact-field-bg);
   font-size:11px;
   line-height:1.35;
}

.selectedFileItem strong{
   min-width:0;
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
}

.selectedFileItem span{
   flex:0 0 auto;
   color:var(--text-muted);
}

/* =====================================
   TURNSTILE / SUBMIT
===================================== */

.turnstileWrap{
   min-height:82px;
}

.cf-turnstile{
   min-height:65px;
}

.submitRow{
   margin-top:18px;
   display:grid;
   grid-template-columns:auto minmax(0, 1fr);
   gap:18px;
   align-items:center;
}

.submitButton{
   min-width:210px;
   min-height:52px;
}

.submitButton[disabled],
.buttonPrimary[disabled],
.buttonSecondary[disabled]{
   opacity:.56;
   cursor:not-allowed;
   transform:none;
}

.privacyNote{
   max-width:520px;
   color:var(--text-muted);
   font-size:11px;
   line-height:1.55;
}

.privacyNote a{
   color:var(--text);
   font-weight:750;
   text-decoration:underline;
   text-decoration-thickness:1px;
   text-underline-offset:3px;
}

.formStatus{
   margin-top:14px;
   font-size:13px;
   font-weight:650;
   line-height:1.5;
}

.formStatus:empty{
   display:none;
}

.formStatus.isError{
   padding:12px 14px;
   border:1px solid color-mix(in srgb, var(--contact-danger) 34%, var(--border));
   border-radius:12px;
   background:var(--contact-danger-soft);
   color:var(--contact-danger);
}

.formStatus.isSuccess{
   padding:12px 14px;
   border:1px solid color-mix(in srgb, var(--contact-success) 34%, var(--border));
   border-radius:12px;
   background:var(--contact-success-soft);
   color:var(--contact-success);
}

/* =====================================
   SUCCESS PANEL
===================================== */

.formSuccessPanel{
   padding:52px 42px;
   background:
      radial-gradient(circle at 85% 12%, var(--contact-success-soft), transparent 35%),
      var(--card);
}

.formSuccessPanel[hidden]{
   display:none;
}

.successMark{
   display:grid;
   place-items:center;
   width:52px;
   height:52px;
   margin-bottom:18px;
   border-radius:999px;
   background:var(--contact-success);
   color:#fff;
   font-size:24px;
   font-weight:900;
}

.formSuccessPanel h2{
   margin-top:9px;
   font-size:38px;
   line-height:1.08;
   letter-spacing:-.035em;
}

.formSuccessPanel > p:not(.formKicker){
   margin-top:16px;
   max-width:670px;
   color:var(--text-muted);
   font-size:15px;
   line-height:1.7;
}

.successSummary{
   margin-top:26px;
   display:grid;
   grid-template-columns:repeat(2, minmax(0, 1fr));
   gap:10px;
}

.successSummary > div{
   padding:15px;
   border:1px solid var(--border);
   border-radius:15px;
   background:var(--contact-field-bg);
}

.successSummary span{
   display:block;
   color:var(--text-muted);
   font-size:10px;
   font-weight:700;
   text-transform:uppercase;
   letter-spacing:.08em;
}

.successSummary strong{
   display:block;
   margin-top:4px;
   font-size:13px;
   line-height:1.35;
}

.successActions{
   margin-top:24px;
   display:flex;
   flex-wrap:wrap;
   gap:10px;
}

/* =====================================
   BELOW-FORM SECTIONS
===================================== */

.contactSection{
   padding:112px 0;
}

.contactSection + .contactSection{
   border-top:1px solid var(--border);
}

/* =====================================
   WHAT HAPPENS NEXT
===================================== */

.nextStepsSection{
   background:var(--card);
}

.nextStepsGrid{
   margin-top:48px;
   display:grid;
   grid-template-columns:repeat(3, minmax(0, 1fr));
   gap:18px;
}

.nextStepCard{
   min-height:260px;
   padding:28px;
   border:1px solid var(--border);
   border-radius:24px;
   background:var(--contact-surface-soft);
   transition:
      transform .2s ease,
      box-shadow .2s ease,
      border-color .2s ease;
}

.nextStepCard:hover{
   transform:translateY(-2px);
   border-color:color-mix(in srgb, var(--contact-accent) 46%, var(--border));
   box-shadow:var(--contact-shadow-soft);
}

.nextStepCard > span{
   display:inline-flex;
   color:var(--contact-accent-strong);
   font-size:11px;
   font-weight:850;
   letter-spacing:.12em;
}

.theme-dark .nextStepCard > span{
   color:var(--contact-accent);
}

.nextStepCard h3{
   margin-top:42px;
   font-size:22px;
   line-height:1.25;
   letter-spacing:-.02em;
}

.nextStepCard p{
   margin-top:12px;
   color:var(--text-muted);
   font-size:14px;
   line-height:1.7;
}

/* =====================================
   SOCIAL TRUST
===================================== */

.socialProofSection{
   background:
      radial-gradient(circle at 90% 12%, var(--contact-accent-soft), transparent 26%),
      var(--bg);
}

.socialProofLayout{
   display:grid;
   grid-template-columns:minmax(0, .72fr) minmax(0, 1.28fr);
   gap:64px;
   align-items:start;
}

.socialProofSection .sectionIntro{
   position:sticky;
   top:118px;
}

.socialTrustGrid{
   display:grid;
   grid-template-columns:repeat(2, minmax(0, 1fr));
   gap:14px;
}

.socialTrustCard{
   min-height:210px;
   padding:24px;
   border:1px solid var(--border);
   border-radius:22px;
   background:var(--card);
   display:flex;
   flex-direction:column;
   transition:
      transform .2s ease,
      border-color .2s ease,
      box-shadow .2s ease;
}

.socialTrustCard:hover{
   transform:translateY(-2px);
   border-color:color-mix(in srgb, var(--contact-accent) 48%, var(--border));
   box-shadow:var(--contact-shadow-soft);
}

.featuredSocial{
   grid-column:span 2;
   min-height:230px;
   background:
      linear-gradient(135deg, var(--contact-accent-soft), transparent 60%),
      var(--card);
}

.socialName{
   color:var(--contact-accent-strong);
   font-size:10px;
   font-weight:850;
   letter-spacing:.12em;
   text-transform:uppercase;
}

.theme-dark .socialName{
   color:var(--contact-accent);
}

.socialTrustCard strong{
   display:block;
   margin-top:28px;
   font-size:19px;
   line-height:1.3;
   letter-spacing:-.015em;
}

.socialTrustCard p{
   margin-top:10px;
   color:var(--text-muted);
   font-size:13px;
   line-height:1.65;
}

.socialLinkText{
   margin-top:auto;
   padding-top:22px;
   color:var(--text);
   font-size:12px;
   font-weight:800;
}

/* =====================================
   FAQ
===================================== */

.contactFaqSection{
   background:var(--card);
}

.faqLayout{
   display:grid;
   grid-template-columns:minmax(0, .72fr) minmax(0, 1.28fr);
   gap:64px;
   align-items:start;
}

.contactFaqSection .sectionIntro{
   position:sticky;
   top:118px;
}

.contactFaqList{
   border-top:1px solid var(--border);
}

.contactFaqList details{
   border-bottom:1px solid var(--border);
}

.contactFaqList summary{
   position:relative;
   padding:22px 44px 22px 0;
   cursor:pointer;
   list-style:none;
   color:var(--text);
   font-size:16px;
   font-weight:780;
   line-height:1.45;
}

.contactFaqList summary::-webkit-details-marker{
   display:none;
}

.contactFaqList summary::after{
   content:"+";
   position:absolute;
   right:4px;
   top:50%;
   width:28px;
   height:28px;
   transform:translateY(-50%);
   display:grid;
   place-items:center;
   border:1px solid var(--border);
   border-radius:999px;
   color:var(--text-muted);
   font-size:17px;
   font-weight:500;
   transition:transform .2s ease, color .2s ease, border-color .2s ease;
}

.contactFaqList details[open] summary::after{
   content:"−";
   color:var(--contact-accent-strong);
   border-color:var(--contact-accent-border);
}

.theme-dark .contactFaqList details[open] summary::after{
   color:var(--contact-accent);
}

.contactFaqList details p{
   max-width:760px;
   padding:0 42px 24px 0;
   color:var(--text-muted);
   font-size:14px;
   line-height:1.75;
}

/* =====================================
   FINAL CTA
===================================== */

.contactFinalCta{
   padding:92px 0;
   background:#111;
   color:#fff;
}

.theme-dark .contactFinalCta{
   background:#080808;
}

.contactFinalCtaInner{
   display:flex;
   align-items:flex-end;
   justify-content:space-between;
   gap:44px;
}

.contactFinalCta .eyebrow{
   color:#d9ad58;
}

.contactFinalCta h2{
   margin-top:12px;
   max-width:760px;
   font-size:clamp(36px, 4vw, 58px);
   line-height:1.03;
   letter-spacing:-.045em;
}

.contactFinalCta p:not(.eyebrow){
   margin-top:14px;
   color:#bcbcbc;
   font-size:16px;
}

.contactFinalActions{
   display:flex;
   flex-wrap:wrap;
   justify-content:flex-end;
   gap:10px;
   flex:0 0 auto;
}

.contactFinalCta .buttonPrimary{
   border-color:#fff;
   background:#fff;
   color:#111;
}

.contactFinalCta .buttonSecondary{
   border-color:#3b3b3b;
   background:#191919;
   color:#fff;
}

#site-footer .siteFooter{
   margin-top:0;
}

/* =====================================
   LAPTOP / COMPACT DESKTOP
   1025 - 1279
===================================== */

@media(min-width:1025px) and (max-width:1279px){

   .contactHero{
      padding:70px 0 96px;
   }

   .contactHeroGrid{
      grid-template-columns:minmax(0, .70fr) minmax(560px, 1.30fr);
      gap:48px;
   }

   .contactIntro{
      top:108px;
   }

   .contactIntro h1{
      font-size:56px;
   }

   .contactLead{
      font-size:17px;
   }

   .projectFormHeader,
   .formSection{
      padding-left:32px;
      padding-right:32px;
   }

   .choiceGridThree{
      grid-template-columns:1fr;
   }

   .socialProofLayout,
   .faqLayout{
      gap:46px;
   }

}

/* =====================================
   TABLET / SMALL LAPTOP
   821 - 1024
===================================== */

@media(min-width:821px) and (max-width:1024px){

   .contactHero{
      padding:64px 0 88px;
   }

   .contactHeroGrid{
      grid-template-columns:1fr;
      gap:44px;
   }

   .contactIntro{
      position:static;
      padding-top:0;
   }

   .contactIntro h1{
      max-width:760px;
      font-size:58px;
   }

   .contactLead{
      max-width:720px;
   }

   .contactTrustList{
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:14px;
   }

   .contactTrustItem{
      display:block;
      padding:18px;
      border:1px solid var(--border);
      border-radius:18px;
      background:var(--contact-surface-soft);
   }

   .contactTrustItem + .contactTrustItem{
      border-top:1px solid var(--border);
   }

   .contactTrustItem strong{
      margin-top:12px;
   }

   .directContactCard{
      max-width:720px;
   }

   .projectFormShell{
      scroll-margin-top:104px;
   }

   .contactSection{
      padding:92px 0;
   }

   .socialProofLayout,
   .faqLayout{
      grid-template-columns:1fr;
      gap:42px;
   }

   .socialProofSection .sectionIntro,
   .contactFaqSection .sectionIntro{
      position:static;
   }

}

/* =====================================
   PORTRAIT TABLET
   769 - 820
===================================== */

@media(min-width:769px) and (max-width:820px){

   .contactHero{
      padding:58px 0 82px;
   }

   .contactHeroGrid{
      grid-template-columns:1fr;
      gap:38px;
   }

   .contactIntro{
      position:static;
      padding-top:0;
   }

   .contactIntro h1{
      max-width:700px;
      font-size:52px;
   }

   .contactLead{
      max-width:680px;
      font-size:17px;
   }

   .contactTrustList{
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:12px;
   }

   .contactTrustItem{
      display:block;
      padding:16px;
      border:1px solid var(--border);
      border-radius:17px;
      background:var(--contact-surface-soft);
   }

   .contactTrustItem strong{
      margin-top:11px;
      font-size:14px;
   }

   .contactTrustItem p{
      font-size:12px;
   }

   .projectFormHeader,
   .formSection{
      padding-left:30px;
      padding-right:30px;
   }

   .socialProofLayout,
   .faqLayout{
      grid-template-columns:1fr;
      gap:38px;
   }

   .socialProofSection .sectionIntro,
   .contactFaqSection .sectionIntro{
      position:static;
   }

   .contactSection{
      padding:82px 0;
   }

}

/* =====================================
   MOBILE / TABLET CROSSOVER
   <= 768
===================================== */

@media(max-width:768px){

   .contactHero{
      padding:46px 0 72px;
   }

   .contactHeroGrid{
      grid-template-columns:1fr;
      gap:34px;
   }

   .contactIntro{
      position:static;
      padding-top:0;
   }

   .contactIntro h1{
      margin-top:14px;
      max-width:620px;
      font-size:clamp(44px, 11vw, 58px);
      line-height:1;
   }

   .contactLead{
      margin-top:20px;
      font-size:17px;
      line-height:1.65;
   }

   .contactTrustList{
      margin-top:28px;
   }

   .contactTrustItem{
      grid-template-columns:40px 1fr;
      gap:13px;
      padding:14px 0;
   }

   .directContactCard{
      margin-top:22px;
   }

   .projectFormShell{
      border-radius:24px;
      scroll-margin-top:94px;
   }

   .projectFormHeader{
      padding:28px 24px 24px;
   }

   .projectFormHeader h2{
      font-size:29px;
   }

   .formSection{
      padding:28px 24px;
   }

   .formSectionHeading{
      grid-template-columns:38px 1fr;
      gap:13px;
      margin-bottom:24px;
   }

   .formSectionNumber{
      width:36px;
      height:36px;
   }

   .formSectionHeading h3{
      font-size:21px;
   }

   .formGrid.twoColumn{
      grid-template-columns:1fr;
   }

   .formGrid .fieldGroup + .fieldGroup{
      margin-top:18px;
   }

   .choiceGridThree,
   .serviceChoiceGrid,
   .businessChoiceGrid{
      grid-template-columns:1fr 1fr;
   }

   .choiceCard > span{
      min-height:86px;
   }

   .submitRow{
      grid-template-columns:1fr;
      align-items:start;
   }

   .submitButton{
      width:100%;
   }

   .successSummary{
      grid-template-columns:1fr;
   }

   .contactSection{
      padding:76px 0;
   }

   .nextStepsGrid{
      grid-template-columns:1fr;
      gap:12px;
   }

   .nextStepCard{
      min-height:0;
   }

   .nextStepCard h3{
      margin-top:28px;
   }

   .socialProofLayout,
   .faqLayout{
      grid-template-columns:1fr;
      gap:34px;
   }

   .socialProofSection .sectionIntro,
   .contactFaqSection .sectionIntro{
      position:static;
   }

   .socialTrustGrid{
      grid-template-columns:1fr 1fr;
   }

   .featuredSocial{
      grid-column:span 2;
   }

   .contactFinalCta{
      padding:72px 0;
   }

   .contactFinalCtaInner{
      align-items:flex-start;
      flex-direction:column;
      gap:28px;
   }

   .contactFinalActions{
      justify-content:flex-start;
   }

}

/* =====================================
   LARGE MOBILE
   <= 620
===================================== */

@media(max-width:620px){

   .contactIntro h1{
      font-size:46px;
   }

   .contactLead{
      font-size:16px;
   }

   .directContactActions{
      display:grid;
      grid-template-columns:1fr 1fr;
   }

   .contactAction{
      width:100%;
   }

   .projectFormHeader{
      padding:26px 20px 22px;
   }

   .projectFormHeader h2{
      font-size:27px;
   }

   .formSection{
      padding:26px 20px;
   }

   .choiceGridThree,
   .serviceChoiceGrid,
   .businessChoiceGrid{
      grid-template-columns:1fr;
   }

   .choiceCard > span{
      min-height:72px;
   }

   .dynamicChoiceGrid,
   .dynamicChoiceGrid.threeColumn{
      grid-template-columns:1fr;
   }

   .coreReadyActions{
      display:grid;
      grid-template-columns:1fr;
   }

   .coreReadyActions .buttonPrimary,
   .coreReadyActions .buttonSecondary{
      width:100%;
   }

   .socialTrustGrid{
      grid-template-columns:1fr;
   }

   .featuredSocial{
      grid-column:auto;
   }

   .socialTrustCard,
   .featuredSocial{
      min-height:190px;
   }

   .successActions{
      display:grid;
      grid-template-columns:1fr;
   }

   .successActions .buttonPrimary,
   .successActions .buttonSecondary{
      width:100%;
   }

}

/* =====================================
   MOBILE
   <= 480
===================================== */

@media(max-width:480px){

   .contactHero{
      padding:38px 0 62px;
   }

   .contactIntro h1{
      font-size:42px;
      letter-spacing:-.048em;
   }

   .contactLead{
      font-size:16px;
   }

   .contactTrustItem strong{
      font-size:14px;
   }

   .contactTrustItem p{
      font-size:12px;
   }

   .directContactActions{
      grid-template-columns:1fr;
   }

   .projectFormShell{
      margin-left:-2px;
      margin-right:-2px;
      border-radius:21px;
   }

   .projectFormHeader,
   .formSection{
      padding-left:18px;
      padding-right:18px;
   }

   .projectFormHeader h2{
      font-size:25px;
   }

   .projectFormHeader > p:last-child{
      font-size:13px;
   }

   .formSectionHeading{
      grid-template-columns:34px 1fr;
      gap:11px;
   }

   .formSectionNumber{
      width:32px;
      height:32px;
      font-size:10px;
   }

   .formSectionHeading h3{
      font-size:20px;
   }

   .formSectionHeading p{
      font-size:12px;
   }

   .fieldLabelRow{
      align-items:flex-start;
      flex-direction:column;
      gap:3px;
   }

   .phoneInputGroup{
      grid-template-columns:120px minmax(0, 1fr);
   }

   .contactPage input[type="text"],
   .contactPage input[type="email"],
   .contactPage input[type="tel"],
   .contactPage input[type="url"],
   .contactPage input[type="number"],
   .contactPage textarea,
   .contactPage select{
      min-height:52px;
      font-size:16px;
   }

   .choiceCard strong{
      font-size:13px;
   }

   .choiceCard small{
      font-size:11px;
   }

   .dynamicBlock,
   .dynamicGroup,
   .dynamicQuestionGroup{
      padding:17px;
      border-radius:16px;
   }

   .uploadPrompt{
      min-height:140px;
      padding:18px 14px;
   }

   .formSuccessPanel{
      padding:42px 22px;
   }

   .formSuccessPanel h2{
      font-size:32px;
   }

   .contactSection{
      padding:64px 0;
   }

   .sectionIntro h2{
      font-size:34px;
   }

   .sectionIntro > p:last-child{
      font-size:15px;
   }

   .nextStepCard{
      padding:23px;
      border-radius:20px;
   }

   .socialTrustCard{
      padding:21px;
      border-radius:19px;
   }

   .contactFaqList summary{
      padding:20px 42px 20px 0;
      font-size:15px;
   }

   .contactFaqList details p{
      padding-right:20px;
      font-size:13px;
   }

   .contactFinalCta{
      padding:62px 0;
   }

   .contactFinalCta h2{
      font-size:36px;
   }

   .contactFinalActions{
      width:100%;
      display:grid;
      grid-template-columns:1fr;
   }

   .contactFinalActions .buttonPrimary,
   .contactFinalActions .buttonSecondary{
      width:100%;
   }

}

/* =====================================
   SMALL MOBILE
   <= 380
===================================== */

@media(max-width:380px){

   .contactHero{
      padding-top:34px;
   }

   .contactIntro h1{
      font-size:38px;
   }

   .contactLead{
      font-size:15px;
   }

   .contactTrustItem{
      grid-template-columns:36px 1fr;
      gap:11px;
   }

   .contactTrustIcon{
      width:34px;
      height:34px;
   }

   .directContactCard{
      padding:18px;
   }

   .projectFormHeader,
   .formSection{
      padding-left:16px;
      padding-right:16px;
   }

   .phoneInputGroup{
      grid-template-columns:1fr;
   }

   .countryCodeInput{
      max-width:none;
   }

   .choiceCard > span{
      min-height:70px;
      padding:14px;
   }

   .coreReadyState{
      padding:17px;
   }

   .sectionIntro h2{
      font-size:31px;
   }

}

/* =====================================
   LARGE DESKTOP / FULL HD
   1600 - 2559
===================================== */

@media(min-width:1600px){

   .contactPage .container{
      max-width:1440px;
   }

   .contactHero{
      padding:104px 0 132px;
   }

   .contactHeroGrid{
      grid-template-columns:minmax(0, .76fr) minmax(680px, 1.24fr);
      gap:92px;
   }

   .contactIntro{
      top:126px;
   }

   .contactIntro h1{
      max-width:700px;
      font-size:82px;
   }

   .contactLead{
      max-width:650px;
      font-size:20px;
   }

   .contactTrustItem strong{
      font-size:16px;
   }

   .contactTrustItem p{
      font-size:14px;
   }

   .projectFormHeader{
      padding:44px 46px 34px;
   }

   .projectFormHeader h2{
      font-size:38px;
   }

   .formSection{
      padding:42px 46px;
   }

   .contactSection{
      padding:132px 0;
   }

   .nextStepsGrid{
      gap:22px;
   }

   .nextStepCard{
      min-height:280px;
      padding:32px;
   }

   .socialProofLayout,
   .faqLayout{
      gap:86px;
   }

   .contactFinalCta{
      padding:110px 0;
   }

}

/* =====================================
   ULTRA-WIDE / 2K / 4K FAMILY
   >= 2560
===================================== */

@media(min-width:2560px){

   .contactPage .container{
      max-width:1540px;
      padding-left:40px;
      padding-right:40px;
   }

   .contactHero{
      padding:126px 0 156px;
   }

   .contactHeroGrid{
      grid-template-columns:minmax(0, .74fr) minmax(720px, 1.26fr);
      gap:112px;
   }

   .contactIntro{
      top:136px;
   }

   .contactIntro h1{
      max-width:760px;
      font-size:90px;
   }

   .contactLead{
      max-width:680px;
      font-size:21px;
      line-height:1.76;
   }

   .projectFormShell{
      max-width:860px;
      margin-left:auto;
   }

   .projectFormHeader{
      padding:48px 50px 38px;
   }

   .projectFormHeader h2{
      font-size:40px;
   }

   .projectFormHeader > p:last-child{
      font-size:16px;
   }

   .formSection{
      padding:46px 50px;
   }

   .contactPage input[type="text"],
   .contactPage input[type="email"],
   .contactPage input[type="tel"],
   .contactPage input[type="url"],
   .contactPage input[type="number"],
   .contactPage textarea,
   .contactPage select{
      font-size:16px;
   }

   .contactSection{
      padding:148px 0;
   }

   .contactPage .sectionIntro{
      max-width:780px;
   }

   .contactPage .sectionIntro h2{
      font-size:58px;
   }

   .contactPage .sectionIntro > p:last-child{
      font-size:18px;
   }

   .nextStepsGrid{
      gap:24px;
   }

   .nextStepCard{
      min-height:300px;
      padding:34px;
   }

   .nextStepCard h3{
      font-size:24px;
   }

   .socialProofLayout,
   .faqLayout{
      grid-template-columns:minmax(0, .68fr) minmax(0, 1.32fr);
      gap:104px;
   }

   .socialTrustCard{
      min-height:230px;
      padding:28px;
   }

   .featuredSocial{
      min-height:250px;
   }

   .contactFinalCta{
      padding:126px 0;
   }

   .contactFinalCta h2{
      max-width:860px;
      font-size:64px;
   }

}

/* =====================================
   REDUCED MOTION
===================================== */

@media(prefers-reduced-motion:reduce){

   .contactPage *,
   .contactPage *::before,
   .contactPage *::after{
      scroll-behavior:auto !important;
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
   }

   .contactAction:hover,
   .buttonPrimary:hover,
   .buttonSecondary:hover,
   .choiceCard:hover > span,
   .nextStepCard:hover,
   .socialTrustCard:hover{
      transform:none;
   }

}

/* =====================================
   FORCED COLORS / HIGH CONTRAST
===================================== */

@media(forced-colors:active){

   .choiceCard input:checked + span,
   .dynamicChoice input:checked + span,
   .checkChoice input:checked + span{
      outline:2px solid Highlight;
   }

   .uploadDropzone{
      border-style:solid;
   }

}

/* =====================================
   FORM CONTROL SIZE SAFETY
   Prevent mobile/tablet browser zoom on focus
===================================== */
@media(max-width:820px){
   .contactPage input[type="text"],
   .contactPage input[type="email"],
   .contactPage input[type="tel"],
   .contactPage input[type="url"],
   .contactPage input[type="number"],
   .contactPage textarea,
   .contactPage select{
      font-size:16px;
   }
}
