/* Contact Page Styles */
@font-face {
  font-family: 'Albra';
  src: url('https://static1.squarespace.com/static/618712634cc9d14bd80427f3/t/618726ad2ae7d330b43cb5f8/1636247213169/BumbumType+-+Albra+Light.otf');
  font-display: swap;
}
@font-face {
  font-family: 'Albra-Italic';
  src: url('https://static1.squarespace.com/static/618712634cc9d14bd80427f3/t/618726b6bf654a24c669edb5/1636247222114/BumbumType+-+Albra+Light+Italic.otf');
  font-display: swap;
}

:root {
  --primary: #2099d7;
  --primary-2: #48b3e8;
  --dark: #0d2c44;
  --text: #1a1a1a;
  --muted: #6a6a6a;
  --border: #bfe2f8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Work Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: #ffffff;
}

.contact-page {
  padding-top: 20px; /* nav overlap safety */
}

/* Hero */
.contact-hero {
  background: linear-gradient(135deg, rgba(191,226,248,0.35), rgba(135,204,242,0.2));
  padding: 80px 7vw 40px;
}

.contact-hero__container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.contact-hero__title {
  margin: 0 0 10px;
  font-family: 'Albra', 'adobe-caslon-pro', serif;
  font-weight: 400;
  font-size: clamp(28px, 2.2vw + 16px, 44px);
  line-height: 1.25;
  color: #000;
}

.contact-hero__subtitle {
  margin: 0 auto;
  font-family: 'Albra-Italic', 'adobe-caslon-pro', serif;
  font-weight: 400;
  font-size: clamp(16px, 1.2vw + 10px, 24px);
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 820px;
}

/* Grid section */
.contact-section {
  padding: 40px 7vw 70px;
}

.contact-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 980px) {
  .contact-container {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;
  }
}

/* Info card */
.contact-info-card__inner {
  border: 2px solid #106194;
  border-radius: 14px;
  background: #ffffff;
  padding: 28px 26px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.06);
}

.contact-info__title {
  margin: 0 0 12px;
  font-family: 'Albra', 'adobe-caslon-pro', serif;
  font-weight: 400;
  font-size: 28px;
  color: #1a1a1a;
}

.contact-info__list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.contact-info__list li {
  padding: 10px 0 6px;
  border-bottom: 1px dashed rgba(16, 97, 148, 0.25);
}

.ci-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #11537b;
  font-weight: 700;
  margin-bottom: 4px;
}

.ci-value {
  font-size: 15px;
  color: #24313a;
}

.ci-value a { color: #24313a; text-decoration: none; border-bottom: 2px solid #106194; padding-bottom: 1px; }
.ci-value a:hover { color: #106194; }

.contact-info__cta {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.btn-call, .btn-quote {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: 0.1s opacity linear;
}

.btn-call {
  background: transparent;
  color: #2099d7;
  border: 2px solid #2099d7;
}
.btn-call:hover { opacity: 0.8; }

.btn-quote {
  background: transparent;
  color: #2099d7;
  border: 2px solid #2099d7;
}
.btn-quote:hover { opacity: 0.8; }

/* Form card — reuse floating form styles */
.contact-form-card__inner {
  border: 2px solid #106194;
  border-radius: 14px;
  background: #ffffff;
  padding: 32px 30px 30px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.06);
}

.form-title {
  margin: 0 0 8px;
  font-family: 'adobe-caslon-pro', serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.25;
  color: #1a1a1a;
  text-align: center;
}

/* Reuse the same class names and look from home.css/about.css for floating form */
.floating-form { display: flex; flex-direction: column; gap: 18px; }
.floating-form .form-group { display: flex; flex-direction: column; gap: 8px; }
.floating-form .form-group label {
  font-weight: 600; color: #11537b; font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
}
.floating-form .form-group input,
.floating-form .form-group select,
.floating-form .form-group textarea {
  padding: 14px 16px; border: 2px solid #e0e0e0; border-radius: 10px; font-size: 15px; font-family: inherit; background: #fafafa; transition: all .3s ease; color: #333;
}
.floating-form .form-group input:focus,
.floating-form .form-group select:focus,
.floating-form .form-group textarea:focus {
  outline: none; border-color: #2099d7; background: #fff; box-shadow: 0 0 0 4px rgba(32,153,215,.1); transform: translateY(-2px);
}
.floating-form .form-group select {
  cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px;
}

.submit-btn {
  background: transparent;
  color: #2099d7;
  border: 2px solid #2099d7;
  padding: 14px 28px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: 0.1s opacity linear;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  margin-top: 6px;
}
.submit-btn:hover { opacity: 0.8; }
.submit-btn:active { opacity: 1; }

/* Map Section */
.contact-map-section { padding: 20px 7vw 80px; }
.contact-map__container { max-width: 1200px; margin: 0 auto; }
.contact-map__card { border: 2px solid #106194; border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 2px 0 rgba(0,0,0,0.06); }
.contact-map__title { margin: 0; padding: 22px 22px 10px; font-family: 'Albra', serif; font-size: 26px; color: #1a1a1a; }
.contact-map__embed { width: 100%; }
.contact-map__embed iframe { width: 100%; height: 420px; border: 0; display: block; }

/* Scroll animations (compatible with site) */
.animate-on-scroll { opacity: 0; transform: translateY(30px); transition: all .6s cubic-bezier(.4,0,.2,1); }
.animate-on-scroll.animate-in { opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 980px) {
  .contact-hero { padding: 60px 20px 30px; }
  .contact-section { padding: 30px 20px 60px; }
  .contact-map-section { padding: 0 20px 70px; }
  .contact-info__cta { justify-content: center; }
}

@media (max-width: 640px) {
  .form-title { font-size: 24px; }
  .contact-map__embed iframe { height: 320px; }
}