/* =====================================================================
   Contact — Sand & Skies Travels
   Built entirely on the tokens already defined in style.css
   (:root vars, .container 1220px, .sub-title, .sec-title, .btn)
   and on the shared .page-hero / .page-crumb rules from destinations.css,
   so this page matches the Services and Testimonials pages exactly.
   Every selector below is ct-scoped — no global rule is overridden.
   ===================================================================== */

/* ---------- BAND (mirrors .svc-band spacing) ---------- */
.ct-band{position:relative;padding:82px 0;overflow:hidden}
.ct-band--tint{background:var(--light)}

/* =====================================================================
   REACH-US CARDS
   ===================================================================== */
.ct-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.ct-card{position:relative;background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);padding:34px 26px 30px;text-align:center;
  box-shadow:0 14px 34px -22px rgba(9,80,130,.5);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.ct-card:hover{transform:translateY(-6px);border-color:transparent;
  box-shadow:0 26px 48px -22px rgba(9,80,130,.55)}
/* hairline that fills in on hover, same idiom as the destination cards */
.ct-card::after{content:"";position:absolute;left:26px;right:26px;bottom:0;height:3px;
  border-radius:3px 3px 0 0;background:linear-gradient(90deg,var(--sky),var(--blue));
  transform:scaleX(0);transform-origin:center;transition:transform .4s ease}
.ct-card:hover::after{transform:scaleX(1)}
.ct-card-icon{width:62px;height:62px;margin:0 auto 20px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--accent);
  background:linear-gradient(135deg,rgba(17,61,72,.10),rgba(26,134,199,.20));
  transition:transform .4s ease}
.ct-card:hover .ct-card-icon{transform:rotate(-8deg) scale(1.06)}
.ct-card h3{font-family:var(--font-title);font-size:17px;font-weight:600;
  color:var(--heading);margin-bottom:10px}
.ct-card p,.ct-card a{font-size:14.5px;line-height:1.7;color:var(--body)}
.ct-card a{transition:color .25s ease}
.ct-card a:hover{color:var(--sky)}
.ct-card .ct-note{display:block;margin-top:8px;font-size:12.5px;color:var(--body);opacity:.75}

/* =====================================================================
   FORM + ASIDE
   ===================================================================== */
.ct-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:52px;align-items:start}

/* ---------- the form panel ---------- */
.ct-form-wrap{background:var(--white);border:1px solid var(--border);
  border-radius:22px;padding:42px 40px;box-shadow:var(--shadow)}
.ct-form{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
.ct-field{display:flex;flex-direction:column;gap:8px}
.ct-field--full{grid-column:1 / -1}
.ct-field label{font-family:var(--font-title);font-size:13.5px;font-weight:600;
  color:var(--heading);letter-spacing:.2px}
.ct-field label .req{color:#d7443e;margin-left:2px}
.ct-field input,.ct-field select,.ct-field textarea{
  font-family:var(--font-body);font-size:14.5px;color:var(--heading);
  padding:13px 16px;border:1px solid var(--border);border-radius:12px;
  background:#fbfdff;width:100%;
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease}
.ct-field textarea{resize:vertical;min-height:132px;line-height:1.6}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:#9aa9b4}
.ct-field input:focus,.ct-field select:focus,.ct-field textarea:focus{
  outline:none;background:var(--white);border-color:var(--sky);
  box-shadow:0 0 0 4px rgba(26,134,199,.14)}
/* native select needs its own arrow once appearance is stripped */
.ct-field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%234a5b66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
/* only flag a field once the browser has actually judged it */
.ct-field input:user-invalid,.ct-field textarea:user-invalid{
  border-color:#d7443e;box-shadow:0 0 0 4px rgba(215,68,62,.12)}
.ct-consent{grid-column:1 / -1;display:flex;align-items:flex-start;gap:11px;
  font-size:13.5px;line-height:1.6;color:var(--body)}
.ct-consent input{width:17px;height:17px;flex:0 0 auto;margin-top:2px;
  accent-color:var(--sky);cursor:pointer}
.ct-submit{grid-column:1 / -1;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
/* live region: holds the post-submit message, invisible until it has text */
.ct-status{font-size:13.5px;font-weight:500;line-height:1.55;color:var(--body)}
.ct-status:empty{display:none}
.ct-status.is-ok{color:#1c7a4a}

/* ---------- the aside ---------- */
.ct-aside{display:flex;flex-direction:column;gap:24px}
.ct-panel{background:var(--white);border:1px solid var(--border);
  border-radius:20px;padding:30px 28px;box-shadow:0 14px 34px -24px rgba(9,80,130,.5)}
.ct-panel h3{font-family:var(--font-title);font-size:18px;font-weight:600;
  color:var(--heading);margin-bottom:8px}
.ct-panel > p{font-size:14.5px;line-height:1.75;color:var(--body)}
.ct-hours{margin-top:18px;border-top:1px solid var(--border)}
.ct-hours li{display:flex;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--border);
  font-size:14px;color:var(--body)}
.ct-hours li:last-child{border-bottom:none}
.ct-hours b{font-family:var(--font-title);font-weight:600;color:var(--heading)}
.ct-hours .is-closed{color:#b0424a}

/* dark panel — the one strong block on an otherwise light page */
.ct-panel--dark{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-soft) 100%);
  border-color:transparent;color:#fff}
.ct-panel--dark h3{color:#fff}
.ct-panel--dark > p{color:rgba(255,255,255,.86)}
.ct-quick{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.ct-quick a{display:flex;align-items:center;gap:13px;padding:13px 16px;
  border-radius:12px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  font-size:14.5px;font-weight:500;color:#fff;
  transition:background .3s ease,transform .3s ease}
.ct-quick a:hover{background:rgba(255,255,255,.18);transform:translateX(4px)}
.ct-quick i{width:34px;height:34px;flex:0 0 auto;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;background:rgba(255,255,255,.16)}

/* =====================================================================
   MAP
   ===================================================================== */
.ct-map{position:relative;border-radius:22px;overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow);line-height:0}
.ct-map iframe{width:100%;height:440px;border:0;display:block;filter:grayscale(.18)}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1024px){
  .ct-cards{grid-template-columns:repeat(2,1fr)}
  .ct-grid{grid-template-columns:1fr;gap:40px}
  .ct-form-wrap{padding:36px 32px}
}
@media (max-width:768px){
  .ct-band{padding:64px 0}
  .ct-map iframe{height:360px}
}
@media (max-width:600px){
  .ct-cards{grid-template-columns:1fr;gap:20px}
  .ct-form{grid-template-columns:1fr}
  .ct-form-wrap{padding:30px 22px}
  .ct-panel{padding:26px 22px}
  .ct-submit{gap:14px}
}