/* ══════════════════════════════════════════════════════════
   contact.css  —  Contact page styles
   All classes prefixed  ct-  to guarantee zero conflicts
   with style.css, home.css, or about.css.
   Sections:
   1. Hero Banner
   2. Get in Touch  (form + map side-by-side)
══════════════════════════════════════════════ */

/* ──────────────────────────────────────────
   KEYFRAMES  (ct- prefix)
─────────────────────────────────────────── */
@keyframes ct-slideRight {
  from { opacity: 0; transform: translateX(-36px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ct-slideLeft {
  from { opacity: 0; transform: translateX(36px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ct-fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ──────────────────────────────────────────
   1. HERO BANNER
─────────────────────────────────────────── */
.ct-hero {
  background: #0d1b3e;
  padding: 68px 0 64px;
  position: relative;
  overflow: hidden;
}
/* subtle diagonal stripe texture */
.ct-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -55deg, transparent, transparent 40px,
    rgba(255,255,255,.025) 40px, rgba(255,255,255,.025) 41px
  );
  pointer-events: none;
}
/* thin red line on bottom edge */
.ct-hero::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #e63946 0%, transparent 60%);
  z-index: 2;
}

.ct-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.ct-hero-left {
  opacity: 0;
  animation: ct-slideRight .7s cubic-bezier(.4,0,.2,1) .05s forwards;
}

.ct-eyebrow {
  font-family: var(--font-family-secondary);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #e63946;
  margin-bottom: 18px;
}
.ct-eyebrow::before {
  content: '';
  width: 28px; height: 2px;
  background: #e63946;
  border-radius: 2px;
  flex-shrink: 0;
}

.ct-hero-title {
  font-family: var(--font-family-secondary);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.ct-hero-title span {
  color: #e63946;
  display: block;
}

.ct-hero-right {
  opacity: 0;
  animation: ct-slideLeft .7s cubic-bezier(.4,0,.2,1) .2s forwards;
}
.ct-hero-desc {
  font-family: var(--font-family-primary);
  font-size: .9rem;
  color: rgba(255,255,255,.65);
  line-height: 1.78;
  max-width: 420px;
}

/* ──────────────────────────────────────────
   2. GET IN TOUCH  —  main section
─────────────────────────────────────────── */
.ct-section {
  background: #fff;
  padding: 80px 0 100px;
}

.ct-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: flex-start;
}

/* ── Left column ── */
.ct-left {
  opacity: 0;
  animation: ct-fadeUp .7s ease .15s forwards;
}

.ct-heading {
   font-family: var(--font-family-secondary);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  color: #0d1b3e;
  margin-bottom: 12px;
  line-height: 1.1;
}
.ct-heading span { color: #e63946; }

.ct-sub {
   font-family: var(--font-family-primary);
  font-size: .88rem;
  color: #666;
  line-height: 1.72;
  margin-bottom: 36px;
  max-width: 400px;
}

/* ── Form ── */
.ct-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}

.ct-field {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid #e0e4ea;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: .88rem;
  color: #222;
  background: #fff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
  -webkit-appearance: none;
}
.ct-field::placeholder { color: #adb5c0; }
.ct-field:focus {
  border-color: #0d1b3e;
  box-shadow: 0 0 0 3px rgba(13,27,62,.08);
}

/* Select wrapper — adds custom chevron */
.ct-select-wrap {
  position: relative;
}
.ct-select-wrap::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #888;
  pointer-events: none;
}
.ct-select-wrap select.ct-field {
  cursor: pointer;
  color: #adb5c0;  /* placeholder-like for empty state */
  padding-right: 40px;
}
.ct-select-wrap select.ct-field.ct-selected { color: #222; }

/* Send button */
.ct-btn-send {
  width: 100%;
  padding: 15px 24px;
  background: #e63946;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .22s, transform .18s, box-shadow .22s;
  margin-top: 4px;
}
.ct-btn-send:hover {
  background: #c0303a;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(230,57,70,.3);
}
.ct-btn-send:active { transform: translateY(0); box-shadow: none; }

/* ── Contact info chips ── */
.ct-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}

.ct-info-chip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ct-info-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1.5px solid rgba(230,57,70,.25);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.ct-info-icon svg {
  width: 16px; height: 16px;
  stroke: #e63946; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.ct-info-label {
   font-family: var(--font-family-primary);
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0d1b3e;
  margin-bottom: 2px;
}
.ct-info-value {
  font-family: var(--font-family-primary);
  font-size: .84rem;
  color: #e63946;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.4;
}
a.ct-info-value:hover { text-decoration: underline; }

/* ── Right column — Map ── */
.ct-right {
  opacity: 0;
  animation: ct-fadeUp .7s ease .3s forwards;
}

.ct-map-wrap {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(13,27,62,.12);
  /* Match screenshot height */
  aspect-ratio: 9 / 10;
  position: relative;
  background: #e8edf2;
}

.ct-map-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Map placeholder (shown when iframe not loaded / no src) */
.ct-map-placeholder {
  width: 100%; height: 100%;
  background:
    /* faint grid roads */
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(180,190,210,.45) 39px, rgba(180,190,210,.45) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(180,190,210,.45) 39px, rgba(180,190,210,.45) 40px),
    #edf1f6;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Pin marker */
.ct-map-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: ct-pinBounce 2s ease-in-out infinite;
}
@keyframes ct-pinBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.ct-map-pin-icon {
  width: 44px; height: 44px;
  background: #e63946;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(230,57,70,.4);
}
.ct-map-pin-icon::after {
  content: '';
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
}
.ct-map-pin-shadow {
  width: 20px; height: 6px;
  background: rgba(0,0,0,.18);
  border-radius: 50%;
  margin-top: 6px;
}
/* Kathmandu label */
.ct-map-label {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: .78rem;
  font-weight: 700;
  color: #0d1b3e;
  box-shadow: 0 4px 16px rgba(13,27,62,.14);
  white-space: nowrap;
}

/* ──────────────────────────────────────────
   RESPONSIVE
─────────────────────────────────────────── */
@media (max-width: 960px) {
  .ct-hero-inner { grid-template-columns: 1fr; gap: 24px; padding: 0 36px; }
  .ct-hero-desc  { max-width: 100%; }
  .ct-hero       { padding: 52px 0 48px; }

  .ct-inner { grid-template-columns: 1fr; gap: 48px; padding: 0 36px; }
  .ct-map-wrap { aspect-ratio: 16/9; }
}

@media (max-width: 600px) {
  .ct-hero-inner { padding: 0 20px; }
  .ct-hero-title { font-size: clamp(2rem, 8vw, 2.8rem); }

  .ct-section { padding: 56px 0 72px; }
  .ct-inner   { padding: 0 20px; gap: 36px; }

  .ct-info-grid { grid-template-columns: 1fr; }
  .ct-map-wrap  { aspect-ratio: 4/3; }
}