/* DXP — Premium Contact Us page (uses style.css for shared header/footer/band/faq/buttons) */
.contact-canvas { height: 3963px; background: #FFF5F4; }
.viewport.contact-vp { height: 3963px; }
@media (max-width: 1439px) { .viewport.contact-vp { height: 3289px; } }
@media (max-width: 1190px) { .viewport.contact-vp { height: 2773px; } }

/* ---- hero ---- */
.ct-hero { position: absolute; left: 0; top: 0; width: 1440px; height: 430px; background: #F8E3AE; overflow: hidden; }
.ct-hero .pattern { position: absolute; inset: 0; background: url('../images/Pattern.svg') center / 900px auto repeat; opacity: 0.12; }
.ct-hero-text { position: absolute; left: 220px; top: 150px; width: 1000px; display: flex; flex-direction: column; gap: 20px; align-items: center; z-index: 2; }
.ct-hero-text .hand { font-family: 'Covered By Your Grace', cursive; font-weight: 400; font-size: 55px; line-height: 40px; color: #F13B31; }
.ct-hero-text h1 { font-family: 'Catamaran', sans-serif; font-weight: 800; font-size: 64px; line-height: 70px; text-align: center; color: #262626; margin: 0; }
.ct-hero-text p { font-size: 19px; line-height: 26px; text-align: center; color: #343434; width: 720px; max-width: 100%; }

/* ---- contact cards ---- */
.ct-cards { position: absolute; left: 123px; top: 530px; width: 1194px; display: flex; gap: 37px; }
.ct-card { flex: 1; border-radius: 20px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.08); padding: 34px 30px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; text-decoration: none; border-top: 5px solid #FDAC3E; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.ct-card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,0.14); }
.ct-card .ic { width: 64px; height: 64px; border-radius: 50%; background: #FAE29D; display: flex; justify-content: center; align-items: center; }
.ct-card h3 { font-family: 'Catamaran', sans-serif; font-weight: 700; font-size: 22px; line-height: 28px; color: #262626; margin: 0; }
.ct-card p { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 15px; line-height: 23px; color: #343434; }
.ct-card .val { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 16px; color: #F13B31; }

/* ---- form + info split ---- */
.ct-main { position: absolute; left: 123px; top: 880px; width: 1194px; display: flex; gap: 60px; align-items: stretch; }
.ct-form { flex: 1.2; border-radius: 29px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.08); padding: 44px 48px; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; }
.ct-form .kicker { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 4px; color: #F13B31; text-transform: uppercase; }
.ct-form h2 { font-family: 'Catamaran', sans-serif; font-weight: 700; font-size: 36px; line-height: 42px; color: #262626; margin: 0 0 6px; }
.ct-row { display: flex; flex-flow: row wrap; gap: 18px; }
.ct-field { flex: 1 1 240px; display: flex; flex-direction: column; gap: 7px; }
.ct-field label { font-family: 'Catamaran', sans-serif; font-weight: 700; font-size: 15px; line-height: 20px; color: #262626; }
.ct-field input, .ct-field select, .ct-field textarea { border: 2px solid #EBD6A4; outline: none; border-radius: 27px; padding: 13px 22px; box-sizing: border-box; font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 14px; color: #262626; background: #FFFDF7; height: 50px; transition: border-color 0.2s ease; appearance: none; }
.ct-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23262626' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 20px center; cursor: pointer; }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { border-color: #FDAC3E; }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: #B4A98F; }
.ct-field textarea { height: 130px; border-radius: 20px; resize: none; line-height: 22px; }
.ct-form .pill-btn { width: 100%; border: none; cursor: pointer; font-family: 'Catamaran', sans-serif; }
.ct-form .fine { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 12px; line-height: 18px; color: #8B8B8B; text-align: center; }

.ct-info { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.ct-info .box { border-radius: 29px; background: #FAE29D; padding: 36px 38px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; }
.ct-info h3 { font-family: 'Catamaran', sans-serif; font-weight: 800; font-size: 26px; line-height: 32px; color: #262626; margin: 0; }
.ct-info .line { display: flex; gap: 12px; align-items: flex-start; }
.ct-info .line .dot { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.ct-info .line b { display: block; font-family: 'Catamaran', sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; color: #262626; }
.ct-info .line span { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 14px; line-height: 21px; color: #343434; white-space: pre-line; }
.ct-info .box.dark { background: #262626; }
.ct-info .box.dark h3 { color: #FDAC3E; }
.ct-info .box.dark p { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 15px; line-height: 24px; color: #EDEDED; }
.ct-hours { display: flex; flex-direction: column; gap: 8px; }
.ct-hours .hr { display: flex; justify-content: space-between; font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 14px; color: #EDEDED; border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 8px; }
.ct-hours .hr b { color: #fff; font-weight: 600; }

/* ---- branches ---- */
.ct-branch-head { position: absolute; left: 332px; top: 1770px; width: 777px; display: flex; flex-direction: column; gap: 7px; align-items: center; }
.ct-branch-head h2 { font-family: 'Catamaran', sans-serif; font-weight: 700; font-size: 40px; line-height: 46px; text-align: center; color: #000; margin: 0; }
.ct-branch-head p { font-size: 18px; line-height: 24px; text-align: center; color: #343434; }
.ct-branches { position: absolute; left: 123px; top: 1920px; width: 1194px; display: flex; gap: 26px; }
.ct-branch { flex: 1; border-radius: 20px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.08); padding: 28px 26px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.ct-branch:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,0.14); }
.ct-branch .pin { width: 46px; height: 46px; border-radius: 50%; background: #FAE29D; display: flex; justify-content: center; align-items: center; }
.ct-branch b { font-family: 'Catamaran', sans-serif; font-weight: 800; font-size: 20px; line-height: 26px; color: #262626; }
.ct-branch span { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 14px; line-height: 21px; color: #343434; white-space: pre-line; }

/* ---- band + FAQ + footer repositions ---- */
.ct-band { top: 2210px; left: -94px; }
.ct-band-text { top: 2334px; }
.band-text.ct-band-text p { white-space: normal; }
.band-text.ct-band-text h2 { white-space: pre-line; }
.ct-faq-title { top: 2702px; }
.ct-faq-list { top: 2782px; }
.ct-faq-visual { top: 2744px; }
.ct-footer { top: 3269px; height: 494px; padding-top: 58px; }
.contact-canvas.contact-canvas { height: 3763px; }
.viewport.contact-vp.contact-vp { height: 3763px; }
@media (max-width: 1439px) { .viewport.contact-vp.contact-vp { height: 3124px; } }
@media (max-width: 1190px) { .viewport.contact-vp.contact-vp { height: 2634px; } }

/* ---- mobile reflow ---- */
@media (max-width: 1023px) {
  .viewport.contact-vp.contact-vp { height: auto !important; overflow: visible; }
  .contact-canvas.contact-canvas { height: auto !important; }
  .contact-canvas > .ct-hero { position: relative !important; height: 330px !important; width: auto !important; }
  .contact-canvas > .ct-hero-text { position: relative !important; left: 0 !important; top: 0 !important; width: auto !important; margin-top: -330px; padding: 120px 20px 30px; box-sizing: border-box; gap: 12px; min-height: 330px; z-index: 2; }
  .ct-hero-text .hand { font-size: 38px; line-height: 30px; }
  .ct-hero-text h1 { font-size: 38px; line-height: 44px; }
  .ct-hero-text p { font-size: 16px; line-height: 24px; width: auto; }
  .contact-canvas > .ct-cards { position: static !important; width: auto !important; flex-flow: row wrap; gap: 16px; padding: 36px 20px 0; }
  .ct-card { flex: 1 1 40%; min-width: 220px; }
  .contact-canvas > .ct-main { position: static !important; width: auto !important; flex-direction: column; gap: 24px; padding: 36px 20px 0; }
  .ct-form { padding: 28px 22px; }
  .ct-form h2 { font-size: 28px; line-height: 34px; }
  .contact-canvas > .ct-branch-head { position: static !important; width: auto !important; padding: 44px 20px 0; }
  .ct-branch-head h2 { font-size: 30px; line-height: 36px; }
  .contact-canvas > .ct-branches { position: static !important; width: auto !important; flex-flow: row wrap; gap: 16px; padding: 24px 20px 44px; }
  .ct-branch { flex: 1 1 40%; min-width: 160px; }
  .contact-canvas > .ct-footer { position: static !important; }
}