:root{
  --c-navy:      var(--navy,     #16233F);
  --c-navy-deep: var(--navy-deep,#0F1B30);
  --c-crimson:   var(--crimson,  #A6303F);
  --c-gold:      var(--gold,     #C8A96A);
  --c-sage:      var(--sage,     #7C8F6E);
  --c-cream:     var(--cream,    #F7F4EE);
  --c-ink:       var(--ink,      #232323);
  --c-muted:     var(--muted,    #6B7280);
  --c-line:      var(--line,     rgba(22,35,63,.10));
  --font-display: 'Merriweather', Georgia, serif;
  --font-body:    'Work Sans', -apple-system, sans-serif;
}

.cpage-hero,
.quick-actions,
.contact-main,
.locations-full,
.faq-strip{
  font-family: var(--font-body);
  color: var(--c-ink);
}

/* ---------- Slim contact hero ---------- */
.cpage-hero{
  background: var(--c-cream);
  padding: 76px 24px 48px;
  text-align: center;
}
.cpage-hero-inner{ max-width: 640px; margin: 0 auto; }
.cpage-hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color: var(--c-crimson); margin-bottom: 18px;
}
.cpage-hero .dot{
  width:6px; height:6px; border-radius:50%; background: var(--c-crimson); display:inline-block;
}
.cpage-hero h1{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 2.7rem);
  line-height: 1.15;
  color: var(--c-navy);
  margin: 0 0 16px;
}
.cpage-hero h1 em{ font-style: normal; color: var(--c-crimson); }
.cpage-sub{
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--c-muted);
  margin: 0 auto;
}

/* ---------- Quick actions strip ---------- */
.quick-actions{
  background: var(--c-cream);
  padding: 0 24px 56px;
}
.qa-grid{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.qa-card{
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 14px;
  padding: 22px;
  text-decoration: none;
  color: var(--c-ink);
  box-shadow: 0 4px 18px rgba(22,35,63,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.qa-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(22,35,63,.10);
  border-color: var(--c-gold);
}
.qa-icon{
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(166,48,63,.08);
  color: var(--c-crimson);
}
.qa-card--whatsapp .qa-icon{ background: rgba(37,158,84,.10); color: #259E54; }
.qa-icon svg{ width: 20px; height: 20px; }
.qa-body{ display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width:0; }
.qa-label{ font-size:.74rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--c-muted); }
.qa-value{ font-family: var(--font-display); font-weight:700; font-size:15px; color: var(--c-navy); overflow-wrap:anywhere; }
.qa-note{ font-size:.82rem; color: var(--c-muted); }
.qa-arrow{ flex: 0 0 auto; color: var(--c-gold); }
.qa-arrow svg{ width:18px; height:18px; }

@media (max-width: 860px){
  .qa-grid{ grid-template-columns: 1fr; }
}

/* ---------- Form + sidebar split ---------- */
.contact-main{
  background: #fff;
  padding: 72px 24px;
}
.contact-grid{
  max-width: 1200px;
  padding: 20px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
  align-items: start;
}
.contact-form-col .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color: var(--c-sage); margin-bottom: 12px;
}
.contact-form-col .eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background: var(--c-sage); display:inline-block;
}
.contact-form-col h2{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  color: var(--c-navy);
  margin: 0 0 10px;
}
.form-intro{ color: var(--c-muted); margin: 0 0 28px; line-height:1.6; }

.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field{ margin-bottom: 18px; display:flex; flex-direction:column; gap:6px; }
.form-field label{ font-size:.84rem; font-weight:600; color: var(--c-navy); }
.form-field input,
.form-field select,
.form-field textarea{
  font-family: var(--font-body);
  font-size: .95rem;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: var(--c-cream);
  color: var(--c-ink);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(200,169,106,.22);
}
.form-field textarea{ min-height: 100px; resize: vertical; }

.modal-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 6px; }
.btn-whatsapp{
  display:inline-flex; align-items:center; gap:10px;
  background:#25D366; color:#fff; border:none; border-radius:10px;
  padding:13px 20px; font-weight:600; font-size:.95rem; cursor:pointer;
  transition: filter .15s ease;
}
.btn-whatsapp:hover{ filter:brightness(.94); }
.btn-email{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; color: var(--c-navy); border:1.5px solid var(--c-navy);
  border-radius:10px; padding:13px 20px; font-weight:600; font-size:.95rem; cursor:pointer;
  transition: background .15s ease, color .15s ease;
}
.btn-email:hover{ background: var(--c-navy); color:#fff; }
.modal-hint{ font-size:.8rem; color: var(--c-muted); margin-top: 14px; line-height:1.5; }

/* sidebar */
.contact-info-col{ position: sticky; top: 24px; }
.info-card{
  background: var(--c-navy);
  color: #fff;
  border-radius: 16px;
  padding: 30px 26px;
}
.info-card h3{
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 0 0 20px;
  color: var(--c-gold);
}
.info-row{
  display:flex; gap:14px; align-items:flex-start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.info-row:last-of-type{ border-bottom: none; }
.info-row svg{ width:18px; height:18px; flex:0 0 auto; margin-top:2px; color: var(--c-gold); }
.ir-label{ display:block; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color: rgba(255,255,255,.6); }
.ir-value{ display:block; font-size:.92rem; font-weight:600; margin-top:2px; }
.info-emergency{
  display:flex; gap:12px; align-items:flex-start;
  margin-top: 18px; padding: 16px;
  background: rgba(166,48,63,.18);
  border: 1px solid rgba(166,48,63,.4);
  border-radius: 10px;
}
.info-emergency svg{ width:20px; height:20px; flex:0 0 auto; color:#e88b96; margin-top:1px; }
.info-emergency p{ margin:0; font-size:.82rem; line-height:1.5; color: rgba(255,255,255,.9); }

@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; gap: 40px; }
  .form-row{ grid-template-columns: 1fr; }
  .contact-info-col{ position: static; }
}

/* ---------- Full locations w/ embedded maps ---------- */
.locations-full{
  background: var(--c-cream);
  padding: 72px 24px;
}
.lf-head{ max-width: 640px; margin: 0 auto 44px; text-align:center; }
.lf-head .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color: var(--c-crimson); margin-bottom: 14px;
}
.lf-head .dot{ width:6px; height:6px; border-radius:50%; background: var(--c-crimson); display:inline-block; }
.lf-head h2{
  font-family: var(--font-display); font-weight:900; color: var(--c-navy);
  font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 12px;
}
.lf-head p{ color: var(--c-muted); line-height:1.6; margin:0; }

.lf-grid{
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
.lf-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid var(--c-line);
  box-shadow: 0 6px 22px rgba(22,35,63,.06);
}
.lf-map{ width:100%; height: 350px; background: var(--c-cream); }
.lf-body{ padding: 24px; }

.loc-tag{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--c-crimson); background: rgba(166,48,63,.08);
  padding: 5px 10px; border-radius: 999px; margin-bottom: 10px;
}
.loc-name{
  font-family: var(--font-display); font-weight:700; color: var(--c-navy);
  font-size: 1.15rem; margin: 0 0 16px;
}
.loc-row{ display:flex; gap:12px; align-items:flex-start; margin-bottom: 14px; }
.loc-row svg{ width:18px; height:18px; flex:0 0 auto; margin-top:2px; color: var(--c-gold); }
.loc-row .txt{ font-size:.9rem; line-height:1.55; color: var(--c-ink); }
.landmark{ display:block; font-size:.8rem; color: var(--c-muted); margin-top:4px; }
.loc-hours-line{ display:block; font-weight:600; }
.loc-status{ display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-size:.8rem; color: var(--c-muted); }
.loc-status .dot{ width:7px; height:7px; border-radius:50%; background:#9aa3af; }
.loc-status.open .dot{ background:#25D366; }
.loc-status.closed .dot{ background: var(--c-crimson); }

.loc-actions{ display:flex; gap:10px; margin-top: 18px; flex-wrap:wrap; }
.loc-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.86rem; font-weight:600; text-decoration:none;
  padding: 10px 16px; border-radius: 9px;
}
.loc-btn svg{ width:15px; height:15px; }
.loc-btn--primary{ background: var(--c-navy); color:#fff; }
.loc-btn--primary:hover{ background: var(--c-navy-deep); }
.loc-btn--ghost{ background:#fff; color: var(--c-navy); border:1.5px solid var(--c-line); }
.loc-btn--ghost:hover{ border-color: var(--c-navy); }

@media (max-width: 860px){
  .lf-grid{ grid-template-columns: 1fr; }
}

/* ---------- Mobile: fixed 10px left/right page padding ---------- */
@media (max-width: 600px){
  .cpage-hero,
  .quick-actions,
  .contact-main,
  .locations-full,
  .faq-strip{
    padding-left: 10px;
    padding-right: 10px;
  }

  /* contact-grid has its own 20px padding on top of the parent's —
     zero it out here so the parent's 10px is the only side padding */
  .contact-grid{
    padding-left: 0;
    padding-right: 0;
  }
}