/* =====================================================================
   Gorilla Marketing Experts — Social Media / Meta Ads service page
   Page-scoped styles. All selectors prefixed .smm- to avoid collisions.
   Linked AFTER css/style.css so shared tokens/components are available.
   ===================================================================== */

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

/* ---------- HERO ---------- */
.smm-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/social-media-service/chatgpt-image-aug-7-2026-03-26-10-am-1.png');
  background-repeat:no-repeat, no-repeat;
  background-position:center, right -20px bottom;
  background-size:cover, auto 100%;
}
.smm-hero-inner{ padding-block:80px 92px; min-height:500px; }
.smm-hero-copy{ max-width:600px; position:relative; z-index:2; }
.smm-hero .eyebrow{ margin-bottom:22px; }
.smm-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;
}
.smm-hero-title .rev{ position:relative; color:var(--gold); -webkit-text-fill-color:var(--gold); font-weight:700; white-space:nowrap; }
.smm-hero-title .rev::after{ content:""; position:absolute; left:0; right:-4px; bottom:-12px; height:14px;
  background:url('../assets/images/home/hero-underline-scribble.svg') no-repeat center/contain; }
.smm-hero-desc{ color:var(--ivory); font-weight:500; font-size:16px; margin-top:26px; max-width:560px; line-height:1.6; }
.smm-hero .hero-actions{ margin-top:34px; }
.smm-hero .hero-proof{ margin-top:40px; }
.smm-hero .avatars img{ width:44px; height:44px; border-radius:50%; border:2px solid var(--ink); margin-left:-12px; object-fit:cover; background:#333; }
.smm-hero .avatars img:first-child{ margin-left:0; }
/* proof cluster from the home page (avatar strip + stars-with-caption + gorilla badge) */
.smm-hero .proof-stars{ height:44px; width:auto; }

/* ---------- WHY META ADS — 4 feature cards ---------- */
.smm-feats{ background:var(--ivory); padding:56px 0; }
.smm-feats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.smm-feat{ background:transparent; border:1px solid var(--ink); border-radius:22px; padding:36px 28px; text-align:center; }
.smm-feat-ico{ width:70px; height:70px; margin:0 auto 20px; display:grid; place-items:center; }
.smm-feat-ico img{ width:70px; height:70px; display:block; }
.smm-feat-title{ font-family:var(--font-display); font-weight:700; font-size:22px; line-height:1.22; color:var(--gold); margin-bottom:12px; }
.smm-feat-desc{ color:var(--ink); font-size:14px; line-height:1.55; }

/* ---------- WHAT'S INCLUDED (showcase + accordion) ---------- */
.smm-included{ background:#fffad9; padding:24px 0 96px; }
.smm-included-grid{ display:grid; grid-template-columns:580px 1fr; gap:48px; align-items:stretch; }
.smm-showcase{ border-radius:var(--r-card); overflow:hidden; border:1px solid #eee6d0; background:#f4efe2; min-height:100%; }
.smm-showcase img{ width:100%; height:100%; min-height:520px; object-fit:cover; display:block; }

.smm-accordion{ display:flex; flex-direction:column; gap:6px; }
.smm-acc-item{ border-bottom:1px solid #e6ddc7; border-radius:0; transition:.2s; }
.smm-acc-item.active{ background:#fff; border:1px solid var(--bd-gold); border-radius:16px; box-shadow:0 12px 34px rgba(0,0,0,.05); }
.smm-acc-head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:24px; background:none; border:0; text-align:left; }
.smm-acc-label{ display:flex; align-items:center; gap:20px; }
.smm-acc-num{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--gold); }
.smm-acc-title{ font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--ink); }
.smm-acc-ico{ width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--bd-gold-13); color:var(--gold); transition:.25s; }
.smm-acc-item.active .smm-acc-ico{ background:var(--gold); color:var(--ink); transform:rotate(90deg); }
.smm-acc-body{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.smm-acc-item.active .smm-acc-body{ max-height:400px; }
.smm-acc-desc{ color:#5f5f5f; font-size:16px; line-height:1.65; padding:0 24px; margin:0; }
.smm-tags{ display:flex; flex-wrap:wrap; gap:10px; padding:18px 24px 26px; margin:0; }
.smm-tag{ background:transparent; color:var(--gold); border:1px solid var(--bd-gold); border-radius:40px; padding:6px 15px;
  font-family:var(--font-body); font-weight:600; font-size:12px; letter-spacing:.02em; }

/* ---------- REAL RESULTS (4.12x ROAS + metric cards + image) ---------- */
.smm-results{ background:var(--ivory); padding:24px 0 88px; }
.smm-results-grid{ display:grid; grid-template-columns:1fr 1.25fr 0.9fr; gap:22px; align-items:stretch; }

.smm-mcard--hero{ background:var(--ink); border:1px solid var(--bd-gold); border-radius:var(--r-card);
  padding:32px; display:flex; flex-direction:column; color:var(--ivory); }
.smm-mcard-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:auto; }
.smm-cat-tag{ font-family:var(--font-body); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.smm-mnum{ font-family:var(--font-display); font-weight:700; font-size:72px; line-height:1; letter-spacing:-1.4px; color:var(--gold-num); }
.smm-mcard--hero .smm-mnum{ margin-top:28px; }
.smm-mcard--hero .smm-msub{ font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--ivory); margin-top:8px; }
.smm-mcard--hero .smm-mdesc{ color:var(--muted-dark); font-size:14px; line-height:1.6; margin-top:14px; }

.smm-stack{ display:flex; flex-direction:column; gap:20px; }
.smm-srow{ background:#fffad9; border:1px solid #ece4cf; border-radius:var(--r-card); padding:22px 26px; flex:1;
  display:grid; grid-template-columns:1fr 1.15fr auto; gap:22px; align-items:center; }
.smm-srow-main{ min-width:0; }
.smm-cat{ font-family:var(--font-body); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#1a7a45; }
.smm-mnum--sm{ font-family:var(--font-display); font-weight:700; font-size:38px; line-height:1; letter-spacing:-1px; color:var(--ink); margin-top:8px; }
.smm-srow .smm-msub{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--gold); margin-top:6px; }
.smm-srow-mid{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; min-width:0; }
.smm-pill{ display:inline-flex; align-items:center; gap:3px; border-radius:8px; padding:4px 11px; font-size:12px; font-weight:700; background:#1a7a45; color:#fff; }
.smm-pill i{ font-size:9px; }
.smm-srow-desc{ color:#4a4a4a; font-size:13.5px; line-height:1.5; margin:0; }
.smm-srow-line{ width:46px; height:2px; border-radius:2px; flex:none; background:linear-gradient(90deg, rgba(255,193,7,0), var(--gold)); }

.smm-results-img{ border-radius:var(--r-card); overflow:hidden; border:1px solid #eee6d0; background:#f4efe2; }
.smm-results-img img{ width:100%; height:100%; object-fit:cover; }

/* ---------- FAQ + LEAD MAGNET ---------- */
.smm-faq{ background:var(--ivory); padding:24px 0 96px; }
.smm-faq-grid{ display:grid; grid-template-columns:634px 1fr; gap:48px; align-items:start; }
.smm-leadcard{ background:var(--ink); color:var(--ivory); border-radius:var(--r-card); padding:40px; border:1px solid var(--bd-gold); }
.smm-leadcard-title{ font-family:var(--font-display); font-weight:700; font-size:30px; line-height:1.15; color:var(--ivory); }
.smm-leadcard-desc{ color:var(--muted-dark); font-size:16px; line-height:1.6; margin-top:14px; max-width:460px; }
.smm-leadcard .btn{ margin-top:26px; }
.smm-benefits{ margin-top:28px; display:flex; flex-direction:column; gap:16px; }
.smm-benefits li{ display:flex; align-items:center; gap:12px; color:var(--ivory); font-size:16px; }
.smm-benefits i{ color:var(--gold); width:20px; text-align:center; }

.smm-faqlist{ display:flex; flex-direction:column; }
.smm-faq-item{ border-bottom:1px solid #e6ddc7; }
.smm-faq-q{ width:100%; background:none; border:0; text-align:left; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:22px 4px; font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--ink); }
.smm-faq-q i{ color:var(--gold); flex:none; transition:.25s; }
.smm-faq-item.active .smm-faq-q i{ transform:rotate(180deg); }
.smm-faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.smm-faq-item.active .smm-faq-a{ max-height:400px; }
.smm-faq-a p{ padding:0 4px 22px; color:#5f5f5f; font-size:16px; line-height:1.65; }

/* ---------- CLOSING CTA (gold band) ---------- */
.smm-cta{ background:var(--gold); color:var(--ink); }
.smm-cta-inner{ display:flex; align-items:center; gap:34px; padding:42px 56px; flex-wrap:wrap; }
.smm-cta-title{ font-family:var(--font-display); font-weight:700; font-size:38px; line-height:1.12; color:var(--ink); text-transform:capitalize; max-width:640px; }
.smm-cta-text{ color:#5a4700; font-size:16px; margin-top:12px; max-width:560px; line-height:1.55; }
.smm-cta-btn{ margin-left:auto; flex:none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1200px){
  .smm-hero-title{ font-size:46px; }
  .smm-feats-grid{ grid-template-columns:repeat(2,1fr); }
  .smm-included-grid{ grid-template-columns:1fr; gap:36px; }
  .smm-showcase{ max-width:580px; aspect-ratio:16/11; }
  .smm-results-grid{ grid-template-columns:1fr 1fr; }
  .smm-results-img{ grid-column:1 / -1; min-height:320px; }
  .smm-faq-grid{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width:760px){
  .smm-hero{ background-image:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.9) 62%),
                   url('../assets/images/social-media-service/chatgpt-image-aug-7-2026-03-26-10-am-1.png');
    background-position:center top; background-size:cover; }
  .smm-hero-inner{ padding-block:56px 64px; min-height:0; }
  .smm-hero-title{ font-size:34px; }
  .smm-feats-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .smm-results-grid{ grid-template-columns:1fr; }
  .smm-srow{ grid-template-columns:1fr; gap:14px; }
  .smm-srow-line{ display:none; }
  .smm-leadcard{ padding:28px; }
  .smm-acc-title{ font-size:19px; }
  .smm-cta-inner{ flex-direction:column; align-items:flex-start; gap:22px; padding:36px 24px; }
  .smm-cta-btn{ margin-left:0; }
  .smm-cta-title{ font-size:30px; }
}