/* KPGE — Contact page ------------------------------------------------------- */

/* Hero: text left, student photo bleeding off the right with a cream veil. */
.ct-hero { position: relative; background: var(--home-cream); overflow: hidden; }
.ct-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: right center;
}
.ct-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--home-cream) 20%, rgba(250,246,240,.5) 42%, rgba(250,246,240,0) 62%);
}
.ct-hero .shell { position: relative; z-index: 1; }
.ct-hero__content { max-width: 52%; padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.ct-crumb {
  font-family: var(--label); font-size: 0.85rem; color: var(--ink-faint);
  display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1.4rem;
}
.ct-crumb a { color: var(--ink-faint); text-decoration: none; }
.ct-crumb a:hover { color: var(--crimson); }
.ct-crumb i { color: var(--ink-faint); font-style: normal; }
.ct-crumb .ct-crumb__here { color: var(--crimson); font-weight: 600; }
.ct-hero h1.display { font-size: clamp(2.4rem, 4.6vw, 3.9rem); line-height: 1.05; margin: 0 0 1.1rem; }
.ct-hero__lede { color: var(--ink-soft); font-size: 1.1rem; line-height: 1.6; max-width: 30rem; margin: 0 0 2rem; }

/* Get in touch + contact-method cards */
.ct-touch { background: var(--home-sand); }
.ct-touch__head { text-align: center; margin-bottom: 2.2rem; }
.ct-touch__head .home-eyebrow { color: var(--crimson); }
.ct-touch__head .display { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-top: 0.3rem; }
.ct-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.ct-card {
  display: flex; align-items: center; gap: 1rem;
  background: #fff; border: 1px solid var(--home-line); border-radius: 14px;
  padding: 1.3rem 1.5rem; box-shadow: 0 24px 44px -38px rgba(27,22,24,.5);
}
.ct-card__ic {
  flex-shrink: 0; width: 46px; height: 46px; display: grid; place-content: center;
  border-radius: 12px; background: var(--crimson-wash); color: var(--crimson);
}
.ct-card__ic svg { width: 24px; height: 24px; }
.ct-card h3 { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; margin: 0 0 0.15rem; }
.ct-card p { font-family: var(--label); font-size: 0.9rem; color: var(--ink-soft); margin: 0; }

/* Main: crimson promise panel + enquiry form, joined in one card */
.ct-main { background: var(--home-cream); }
.ct-main__grid {
  display: grid; grid-template-columns: 0.82fr 1.18fr;
  background: #fff; border: 1px solid var(--home-line); border-radius: 22px;
  overflow: hidden; box-shadow: 0 40px 80px -50px rgba(27,22,24,.5);
}
.ct-panel {
  background: linear-gradient(155deg, #b0233a 0%, var(--crimson) 44%, var(--crimson-deep) 100%);
  color: #fff; padding: clamp(2rem, 3vw, 2.8rem);
  display: flex; flex-direction: column;
}
.ct-panel h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 0.8rem; color: #fff; }
.ct-panel__intro { color: rgba(255,255,255,.85); font-size: 0.98rem; line-height: 1.6; margin: 0 0 1.6rem; }
.ct-panel__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.ct-panel__checks li { display: flex; align-items: center; gap: 0.7rem; font-family: var(--label); font-size: 0.98rem; }
.ct-panel__checks svg { width: 22px; height: 22px; flex-shrink: 0; opacity: .95; }
.ct-panel__rule { display: block; height: 1px; background: rgba(255,255,255,.22); margin: 1.6rem 0; }
.ct-panel__foot { display: flex; align-items: center; gap: 0.7rem; font-family: var(--label); font-size: 0.95rem; color: rgba(255,255,255,.9); margin: auto 0 0; }
.ct-panel__foot svg { width: 22px; height: 22px; flex-shrink: 0; }

.ct-form { padding: clamp(2rem, 3vw, 2.8rem); }
.ct-form h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 1.4rem; }
.ct-form .btn { width: 100%; justify-content: center; margin-top: 0.4rem; }
.ct-form__note {
  display: flex; align-items: flex-start; gap: 0.5rem;
  font-size: 0.78rem; color: var(--ink-faint); line-height: 1.5; margin: 0.9rem 0 0;
}
.ct-form__note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }

/* Map + visit-us */
.ct-map-sec { background: var(--home-cream); padding-top: 0; }
.ct-map__grid {
  display: grid; grid-template-columns: 1.55fr 1fr;
  background: #fff; border: 1px solid var(--home-line); border-radius: 22px;
  overflow: hidden; box-shadow: 0 40px 80px -50px rgba(27,22,24,.45);
}
/* Live Google Maps embed. The old placeholder grid/pin styles are gone. */
.ct-map {
  position: relative;
  min-height: 340px;
  background: #e7e3db;
}
.ct-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.ct-visit { padding: clamp(2rem, 3vw, 2.8rem); display: flex; flex-direction: column; justify-content: center; }
.ct-visit__ic { width: 46px; height: 46px; display: grid; place-content: center; border-radius: 12px; background: var(--crimson-wash); color: var(--crimson); margin-bottom: 1rem; }
.ct-visit__ic svg { width: 24px; height: 24px; }
.ct-visit h3 { font-family: var(--serif); font-weight: 600; font-size: 1.6rem; margin: 0 0 0.6rem; }
.ct-visit p { color: var(--ink-soft); font-family: var(--label); line-height: 1.6; margin: 0 0 1.4rem; }
.ct-visit .btn { align-self: flex-start; }

/* Responsive */
@media (max-width: 900px) {
  .ct-hero__bg { object-position: 78% center; }
  .ct-hero__veil { background: linear-gradient(180deg, rgba(250,246,240,.35) 0%, rgba(250,246,240,.75) 62%, var(--home-cream) 100%); }
  .ct-hero__content { max-width: 100%; }
  .ct-cards { grid-template-columns: 1fr; }
  .ct-main__grid { grid-template-columns: 1fr; }
  .ct-map__grid { grid-template-columns: 1fr; }
  .ct-map { min-height: 240px; }
}