/* =====================================================================
   Gorilla Marketing Experts — Google Maps / GBP Ranking service page
   Rebuilt to match Figma. Prefixed `.gmap-`. Loaded AFTER css/style.css.
   ===================================================================== */

/* page content width = 1300px (banner + all sections, centered with side padding) */
.container{ max-width: calc(1300px + 2 * var(--pad-x)); }

/* ---------- HERO (dark GMB dashboard as background) ---------- */
.gmap-hero{
  position:relative; color:var(--ivory); overflow:hidden;
  background-color:#000;
  background-image:
    linear-gradient(90deg, #000 30%, rgba(0,0,0,.55) 48%, rgba(0,0,0,0) 66%),
    url('../assets/images/google-maps-service/image-172.png');
  background-repeat:no-repeat, no-repeat;
  background-position:center, right -20px bottom;
  background-size:cover, auto 100%;
}
.gmap-hero-inner{ position:relative; z-index:1; padding-block:76px 88px; min-height:520px; }
.gmap-hero-copy{ max-width:600px; position:relative; z-index:2; }
.gmap-hero .eyebrow{ margin-bottom:22px; }
.gmap-hero-title{
  font-family:var(--font-display); font-weight:400; font-size:54px; line-height:1.06;
  letter-spacing:-1px; text-transform:capitalize;
  background:linear-gradient(180deg,var(--ivory) 45%,var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gmap-hero-title .rev{ position:relative; color:var(--gold); -webkit-text-fill-color:var(--gold); font-weight:700; white-space:nowrap; }
.gmap-hero-title .rev::after{ content:""; position:absolute; left:0; right:-4px; bottom:-10px; height:14px;
  background:url('../assets/images/home/hero-underline-scribble.svg') no-repeat center/contain; }
.gmap-hero-desc{ color:var(--ivory); font-weight:500; font-size:16px; margin-top:22px; max-width:520px; line-height:1.6; }
.gmap-hero .hero-actions{ margin-top:32px; }
.gmap-hero .hero-proof{ margin-top:34px; }
.gmap-hero .avatars img{ object-fit:cover; }
/* proof cluster from the home page (avatar strip + stars-with-caption + gorilla badge) */
.gmap-hero .proof-stars{ height:44px; width:auto; }

/* ---------- WHY GOOGLE MAPS — 4 feature cards ---------- */
.gmap-feats{ background:var(--ivory); padding:56px 0; }
.gmap-feats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.gmap-feat{ 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 */
.gmap-feat-ico{ margin:0 auto 8px; display:grid; place-items:center; }
.gmap-feat-ico img{ width:100px; height:100px; display:block; }
.gmap-feat-title{ font-family:var(--font-display); font-weight:700; font-size:21px; line-height:1.22; color:var(--gold); margin-bottom:12px; }
.gmap-feat-desc{ color:var(--ink); font-size:14px; line-height:1.55; }

/* ---------- EVERYTHING WE DO (cream: image + accordion) ---------- */
.gmap-included{ background:#fffad9; color:var(--ink); padding:56px 0 64px; }
.gmap-included-head{ text-align:center; margin-bottom:40px; }
.gmap-included-head .section-title{ color:var(--ink); margin-top:16px; }
.gmap-included-grid{ display:grid; grid-template-columns:520px 1fr; gap:48px; align-items:start; }
.gmap-included-media{ border-radius:20px; overflow:hidden; }
.gmap-included-media img{ width:100%; height:auto; display:block; }

.gmap-acc{ display:flex; flex-direction:column; }
.gmap-acc-item{ border-bottom:1px solid rgba(0,0,0,.09); }
.gmap-acc-item.is-open{ background:#fff; border:1px solid #ece4cf; border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,.05); margin-bottom:8px; }
.gmap-acc-bar{ display:flex; align-items:center; gap:16px; padding:20px 8px; width:100%; background:none; border:0; text-align:left; cursor:pointer; font:inherit; color:inherit; }
.gmap-acc-item.is-open .gmap-acc-bar{ padding:24px 26px; }
.gmap-acc-num{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--gold); min-width:24px; }
.gmap-acc-item:not(.is-open) .gmap-acc-num{ color:#b3a884; }
.gmap-acc-title{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink); flex:1; }
.gmap-acc-item:not(.is-open) .gmap-acc-title{ font-size:16px; }
.gmap-acc-arrow{ flex:none; margin-left:auto; display:grid; place-items:center; }
.gmap-acc-arrow img{ width:40px; height:40px; display:block; }
.gmap-acc-chev{ color:#b3a884; font-size:13px; flex:none; margin-left:auto; }
.gmap-acc-item.is-open .gmap-acc-chev{ display:none; }
.gmap-acc-item:not(.is-open) .gmap-acc-arrow{ display:none; }
.gmap-acc-body{ max-height:0; overflow:hidden; transition:max-height .3s ease;
  color:#6b6b6b; font-size:14px; line-height:1.6; margin:0; padding:0 26px; }
.gmap-acc-item.is-open .gmap-acc-body{ max-height:220px; padding:0 26px 24px; }

/* ---------- BEFORE / AFTER "Profiles That Get Found." ---------- */
.gmap-ba{ background:var(--ivory); padding:24px 0 40px; }
.gmap-ba-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.gmap-ba-card{ border:1px solid #eee6d0; border-radius:var(--r-card); padding:28px; display:flex; flex-direction:column; }
.gmap-ba-card.is-before{ background:var(--card-dark); border-color:var(--bd-gold); color:var(--ivory); }
.gmap-ba-card.is-after{ background:linear-gradient(115deg, #171208 0%, #6d5312 46%, #E8AC1F 100%); border-color:var(--gold); }
.gmap-ba-badge{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 14px; border-radius:40px;
  font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:20px; }
.gmap-ba-badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.gmap-ba-badge.before{ background:rgba(255,255,255,.06); color:var(--gold); border:1px solid var(--bd-gold); }
.gmap-ba-badge.after{ background:var(--ink); color:var(--gold); }
.gmap-ba-body{ display:grid; grid-template-columns:1.15fr 0.95fr; gap:24px; align-items:center; }
.gmap-ba-text{ min-width:0; }
.gmap-ba-h{ font-family:var(--font-display); font-weight:700; font-size:22px; line-height:1.3; color:var(--ink); }
.gmap-ba-card.is-before .gmap-ba-h{ color:var(--ivory); }
.gmap-ba-list{ display:flex; flex-direction:column; gap:13px; margin-top:22px; }
.gmap-ba-list li{ display:flex; align-items:center; gap:11px; font-size:15px; font-weight:600; color:var(--ink); }
.gmap-ba-card.is-before .gmap-ba-list li{ color:#fff; }
.gmap-ba-card.is-after .gmap-ba-h{ color:#fff; }
.gmap-ba-card.is-after .gmap-ba-list li{ color:#fff; }
.gmap-ba-list .mk{ flex:none; font-size:15px; font-weight:900; line-height:1; }
.gmap-ba-card.is-before .gmap-ba-list .mk{ color:var(--gold); }
.gmap-ba-card.is-after .gmap-ba-list .mk{ color:var(--gold); }
.gmap-ba-media{ border-radius:12px; overflow:hidden; aspect-ratio:3/4; background:#f4efe2; }
.gmap-ba-media img{ width:100%; height:100%; object-fit:cover; }
.gmap-ba-card.is-before .gmap-ba-media img{ object-position:left center; }
.gmap-ba-card.is-after .gmap-ba-media img{ object-position:right center; }
.gmap-ba-link{ margin-top:22px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:13px; letter-spacing:.04em; }
.gmap-ba-card.is-before .gmap-ba-link{ color:var(--gold); }
.gmap-ba-card.is-after .gmap-ba-link{ color:#fff; }
.gmap-ba-cta{ display:flex; justify-content:center; margin-top:36px; }
@media (max-width:520px){ .gmap-ba-body{ grid-template-columns:1fr; } }

/* ---------- FAQ  "Got Questions?" (promo card + hairline accordion) ---------- */
.gmap-faq{ background:var(--ivory); padding:24px 0 72px; }
.gmap-faq-head{ text-align:center; margin-bottom:44px; }
.gmap-faq-title{ font-family:var(--font-display); font-weight:700; font-size:44px; line-height:1.05;
  letter-spacing:-1px; text-transform:capitalize; color:var(--ink); }
.gmap-faq-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:56px; align-items:start; }
.gmap-faq-card{ background:var(--ink); color:var(--ivory); border-radius:var(--r-card); border:1px solid var(--bd-gold); padding:36px 32px; }
.gmap-faq-card-title{ font-family:var(--font-display); font-weight:700; font-size:26px; line-height:1.15; color:var(--ivory); }
.gmap-faq-card-text{ color:var(--muted-dark); font-size:15px; line-height:1.6; margin-top:14px; }
.gmap-faq-card .btn{ width:100%; margin-top:26px; }
.gmap-faq-list{ display:flex; flex-direction:column; gap:16px; margin-top:28px; }
.gmap-faq-list li{ display:flex; align-items:center; gap:12px; color:var(--ivory); font-size:15px; font-weight:500; }
.gmap-faq-list i{ color:var(--gold); font-size:15px; width:18px; text-align:center; }
.gmap-faq-acc{ display:flex; flex-direction:column; }
.gmap-faq-q{ background:transparent; border:0; border-bottom:1px solid rgba(0,0,0,.1); border-radius:0; }
.gmap-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); }
.gmap-faq-q summary::-webkit-details-marker{ display:none; }
.gmap-faq-q summary::after{ content:"\2b"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:14px; color:var(--muted-2); transition:.2s; }
.gmap-faq-q[open] summary::after{ content:"\f068"; color:var(--gold); }
.gmap-faq-a{ color:#5f5f5f; font-size:15px; line-height:1.65; padding:0 2px 22px; margin:0; max-width:520px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1200px){
  .gmap-hero-title,.gmap-faq-title{ font-size:44px; }
  .gmap-feats-grid{ grid-template-columns:repeat(2,1fr); }
  .gmap-included-grid{ grid-template-columns:1fr; gap:36px; }
  .gmap-included-media{ max-width:560px; }
  .gmap-faq-grid{ grid-template-columns:340px minmax(0,1fr); gap:32px; }
}
@media (max-width:1024px){
  .gmap-faq-grid{ grid-template-columns:1fr; }
  .gmap-ba-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .gmap-hero{ background-image:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.9) 62%),
                   url('../assets/images/google-maps-service/image-172.png');
    background-position:center top; background-size:cover; }
  .gmap-hero-inner{ padding-block:56px 64px; min-height:0; }
  .gmap-hero-title,.gmap-faq-title{ font-size:34px; }
  .gmap-feats-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .gmap-included,.gmap-faq{ padding:48px 0; }
  .gmap-ba-body{ grid-template-columns:1fr; }
}