/* =====================================================================
   Gorilla Marketing Experts — CONTACT page (rebuilt to match Figma)
   Prefixed `.contact-`. Loaded AFTER css/style.css.
   ===================================================================== */

/* ---------------- HERO (copy left + booking card right) ---------------- */
.contact-hero{ background:var(--ink); color:var(--ivory); padding:64px 0 80px; overflow:hidden; }
.contact-hero-inner{ display:grid; grid-template-columns:1fr 560px; gap:56px; align-items:center; }
.contact-hero-copy{ max-width:520px; }
.contact-hero .eyebrow{ margin-bottom:22px; }
.contact-hero-title{
  font-family:var(--font-display); font-weight:400; font-size:52px; line-height:1.07;
  letter-spacing:-1px; text-transform:capitalize;
  background:linear-gradient(180deg,var(--ivory) 45%,var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.contact-hero-title .rev{ color:var(--gold); -webkit-text-fill-color:var(--gold); font-weight:700; }
.contact-hero-desc{ color:var(--ivory); font-weight:500; font-size:16px; margin-top:20px; max-width:480px; line-height:1.6; }
.contact-hero .hero-proof{ margin-top:32px; }
.contact-hero .avatars img{ object-fit:cover; }
/* proof cluster from the home page (avatar strip + stars-with-caption + gorilla badge) */
.contact-hero .proof-stars{ height:44px; width:auto; }

/* ---- Booking card (in hero) ---- */
.contact-card{ background:#fff; border:1px solid #eee6d0; border-radius:var(--r-card); padding:28px; box-shadow:0 24px 60px rgba(0,0,0,.4); }
/* booking widget (iframe) fills the card */
.contact-book{ padding:10px; overflow:hidden; }
.contact-book iframe{ width:100%; min-height:640px; display:block; border:0; border-radius:12px; }
.contact-book-head{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.contact-book-head i{ color:var(--gold); font-size:18px; }
.contact-book-title{ font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--ink); }
.contact-book-cols{ display:grid; grid-template-columns:1.4fr 1fr; gap:22px; align-items:start; }
.contact-cal-label{ font-family:var(--font-body); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#8a8578; margin-bottom:10px; }
.contact-cal-month{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.contact-cal-month b{ font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--ink); }
.contact-cal-nav{ width:26px; height:26px; border-radius:7px; border:1px solid #eadfbf; background:#fff; color:var(--ink); display:grid; place-items:center; font-size:10px; }
.contact-cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-bottom:4px; }
.contact-cal-dow span{ text-align:center; font-size:9px; font-weight:700; letter-spacing:.03em; color:#9a9488; }
.contact-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.contact-cal-day{ aspect-ratio:1/1; display:grid; place-items:center; border-radius:7px; font-size:12px; font-weight:500; color:var(--ink); }
.contact-cal-day.is-mute{ color:#c3bdaf; }
.contact-cal-day.is-sel{ background:var(--gold); color:var(--ink); font-weight:700; }
.contact-slots{ display:flex; flex-direction:column; gap:8px; }
.contact-slot{ height:36px; border-radius:8px; border:1px solid #eadfbf; background:#fff; font-family:var(--font-body); font-weight:600; font-size:13px; color:var(--ink); display:grid; place-items:center; }
.contact-slot.is-on{ background:var(--bd-gold-13); border-color:var(--gold); color:#3a2e00; }
.contact-cal-notice{ display:flex; align-items:center; gap:8px; margin:14px 0 0; color:#3a2e00; font-size:12px; font-weight:600; }
.contact-cal-notice i{ color:var(--gold); }
.contact-book-btn{ width:100%; margin-top:20px; }

/* ---------------- CONTACT INFO CARDS (3) ---------------- */
.contact-info{ background:var(--ivory); padding:56px 0; }
.contact-info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.contact-info-card{ background:transparent; border:1px solid var(--ink); border-radius:22px; padding:32px 28px; text-align:center; }
/* icon SVGs carry their own gold disc + glow, so the wrapper stays transparent */
.contact-info-ico{ margin:0 auto 10px; display:grid; place-items:center; }
.contact-info-ico img{ width:84px; height:84px; display:block; }
.contact-info-title{ font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--gold); margin-bottom:12px; }
.contact-info-value{ font-size:15px; font-weight:600; color:var(--ink); }
.contact-info-label{ color:var(--ink); font-size:14px; line-height:1.5; margin-top:4px; }

/* ---------------- SEND US A MESSAGE (form + gold why card) ---------------- */
.contact-message{ background:#fffad9; padding:24px 0 72px; }
.contact-message-head{ margin-bottom:36px; }
.contact-message-head .section-title{ text-align:left; }
.contact-message-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:stretch; }
.contact-message-grid .contact-form-card,
.contact-message-grid .contact-why-card{ height:100%; }
/* honeypot (spam trap) — visually hidden but present for bots */
.contact-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
/* form status notice */
.contact-form-note{ border-radius:10px; padding:12px 16px; font-size:14px; font-weight:600; margin-bottom:18px; }
.contact-form-note.is-ok{ background:#e7f7ee; border:1px solid #1e9e57; color:#166b3c; }
.contact-form-note.is-err{ background:#fdeceb; border:1px solid #e05b52; color:#a3352c; }

.contact-form-card{ background:#fff; border:1px solid #eee6d0; border-radius:var(--r-card); padding:32px; }
.contact-form-card h3{ font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--ink); margin-bottom:22px; }
.contact-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.contact-field label{ font-family:var(--font-body); font-weight:600; font-size:14px; color:var(--ink); }
.contact-field input, .contact-field select, .contact-field textarea{
  width:100%; font-family:var(--font-body); font-size:15px; color:var(--ink);
  background:#faf7ee; border:1px solid #eadfbf; border-radius:10px; padding:13px 15px;
  transition:.2s ease; -webkit-appearance:none; appearance:none; }
.contact-field textarea{ min-height:120px; resize:vertical; line-height:1.5; }
.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus{ outline:none; border-color:var(--gold); background:#fff; box-shadow:0 0 0 3px rgba(255,187,0,.15); }
.contact-field input::placeholder, .contact-field textarea::placeholder{ color:#9a9488; }
.contact-select{ position:relative; }
.contact-select select{ cursor:pointer; padding-right:40px; }
.contact-select select:invalid{ color:#9a9488; }
.contact-select i{ position:absolute; right:15px; top:42px; color:#9a9488; pointer-events:none; font-size:13px; }
.contact-send-btn{ width:100%; margin-top:6px; }

.contact-why-card{ background:var(--gold); border-radius:var(--r-card); padding:40px; color:var(--ink); }
.contact-why-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:28px; }
.contact-why-title{ font-family:var(--font-display); font-weight:700; font-size:29px; line-height:1.18; color:var(--ink); max-width:340px; }
.contact-why-gorilla{ width:64px; height:auto; flex:none; }
.contact-why-items{ display:flex; flex-direction:column; gap:20px; }
.contact-why-item{ display:flex; gap:14px; }
.contact-why-item-ico{ width:36px; height:36px; border-radius:50%; background:var(--ink); color:var(--gold); display:grid; place-items:center; flex:none; font-size:14px; }
.contact-why-item-title{ font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink); }
.contact-why-item-desc{ color:#5a4700; font-size:14px; line-height:1.5; margin-top:3px; }

/* ---------------- FAQ ---------------- */
.contact-faq{ background:var(--ivory); padding:24px 0 72px; }
.contact-faq-head{ text-align:center; margin-bottom:44px; }
.contact-faq-title{ font-family:var(--font-display); font-weight:700; font-size:44px; letter-spacing:-.8px; color:var(--ink); text-transform:capitalize; }
.contact-faq-grid{ display:grid; grid-template-columns:400px 1fr; gap:48px; align-items:start; }
.contact-faq-card{ background:var(--ink); color:var(--ivory); border-radius:var(--r-card); border:1px solid var(--bd-gold); padding:36px 32px; }
.contact-faq-card-title{ font-family:var(--font-display); font-weight:700; font-size:24px; line-height:1.2; color:var(--ivory); }
.contact-faq-card .btn{ width:100%; margin-top:24px; }
.contact-faq-list{ display:flex; flex-direction:column; gap:16px; margin-top:26px; }
.contact-faq-list li{ display:flex; align-items:center; gap:12px; color:var(--ivory); font-size:15px; font-weight:500; }
.contact-faq-list i{ color:var(--gold); font-size:15px; width:18px; text-align:center; }
.contact-faq-acc{ display:flex; flex-direction:column; }
.contact-faq-q{ background:transparent; border:0; border-bottom:1px solid rgba(0,0,0,.1); border-radius:0; }
.contact-faq-q summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:22px 2px; font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink); }
.contact-faq-q summary::-webkit-details-marker{ display:none; }
.contact-faq-q summary::after{ content:"\2b"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:14px; color:var(--muted-2); transition:.2s; }
.contact-faq-q[open] summary::after{ content:"\f068"; color:var(--gold); }
.contact-faq-a{ color:#5f5f5f; font-size:15px; line-height:1.65; padding:0 2px 22px; margin:0; max-width:560px; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:1200px){
  .contact-hero-inner{ grid-template-columns:1fr; gap:40px; }
  .contact-hero-title{ font-size:44px; }
  .contact-message-grid{ grid-template-columns:1fr; }
  .contact-faq-title{ font-size:38px; }
  .contact-faq-grid{ grid-template-columns:340px 1fr; gap:32px; }
}
@media (max-width:1024px){
  .contact-info-grid{ grid-template-columns:1fr; max-width:480px; margin-inline:auto; }
  .contact-faq-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .contact-hero{ padding:48px 0 56px; }
  .contact-hero-title{ font-size:34px; }
  .contact-book-cols{ grid-template-columns:1fr; }
  .contact-form-row{ grid-template-columns:1fr; }
  .contact-why-card{ padding:28px; }
  .contact-faq-title{ font-size:30px; }
}