/* =====================================================================
   Gorilla Marketing Experts — AI Search Rankings service page
   Rebuilt to match Figma. Loaded AFTER css/style.css.
   Selectors prefixed .aisrch- to avoid collisions.
   ===================================================================== */

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

/* ---------- HERO (Meta-Ads style: whole composite image shown clean on the right) ---------- */
.aisrch-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/ai-search-service/rectangle-240647851.png');
  background-repeat:no-repeat, no-repeat;
  background-position:center, right -20px bottom;
  background-size:cover, auto 100%;
}
.aisrch-hero-bg{ display:none; }
.aisrch-hero-inner{ padding-block:60px 40px; min-height:440px; }
.aisrch-hero-copy{ max-width:600px; position:relative; z-index:2; min-width:0; }
.aisrch-hero .proof-stars{ height:44px; width:auto; }
.aisrch-hero .eyebrow{ margin-bottom:22px; }
.aisrch-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;
}
.aisrch-hero-title .hl{ color:var(--gold); -webkit-text-fill-color:var(--gold); }
.aisrch-hero-title .rev{ position:relative; color:var(--gold); -webkit-text-fill-color:var(--gold); font-weight:700; white-space:nowrap; }
.aisrch-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; }
.aisrch-hero-desc{ color:var(--ivory); font-weight:500; font-size:16px; margin-top:22px; max-width:520px; line-height:1.6; }
.aisrch-hero .hero-actions{ margin-top:28px; }
/* hero buttons use the standard site .btn styling (matches homepage banner) */
.aisrch-hero .hero-proof{ margin-top:34px; }
.aisrch-hero .avatars img{ object-fit:cover; }

/* ---------- FEATURE CARDS ("Show Up In AI Answers"…) ---------- */
.aisrch-feats{ background:var(--ivory); padding:56px 0; }
.aisrch-feats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.aisrch-feat{ background:transparent; border:1px solid var(--ink); border-radius:22px; padding:36px 28px; text-align:center; }
.aisrch-feat-ico{ width:66px; height:66px; margin:0 auto 22px; display:grid; place-items:center; }
.aisrch-feat-ico img{ width:66px; height:66px; display:block; }
.aisrch-feat-title{ font-family:var(--font-display); font-weight:700; font-size:22px; line-height:1.22; color:var(--gold); margin-bottom:12px; }
.aisrch-feat-desc{ color:var(--ink); font-size:14px; line-height:1.55; }

/* ---------- EVERYTHING YOU NEED (light accordion) ---------- */
.aisrch-showcase{ background:#fffad9; color:var(--ink); padding:56px 0 64px; }
.aisrch-showcase .section-head{ text-align:center; margin-bottom:40px; }
.aisrch-showcase .section-title{ color:var(--ink); margin-top:16px; }
.aisrch-showcase-grid{ display:grid; grid-template-columns:520px 1fr; gap:48px; align-items:stretch; }
.aisrch-showcase-media{ border-radius:20px; overflow:hidden; min-height:100%; }
.aisrch-showcase-media img{ width:100%; height:100%; object-fit:cover; display:block; }

.aisrch-rows{ display:flex; flex-direction:column; }
/* functional accordion: collapsed rows = hairline; open row = white card */
.aisrch-acc{ border-bottom:1px solid rgba(0,0,0,.12); }
.aisrch-acc:last-child{ border-bottom:0; }
.aisrch-acc-head{ display:flex; align-items:center; gap:16px; width:100%; background:none; border:0; padding:20px 8px; cursor:pointer; text-align:left; font:inherit; color:inherit; }
.aisrch-row-num{ font-family:var(--font-display); font-weight:700; font-size:16px; color:#b3a884; min-width:24px; }
.aisrch-row-title{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink); flex:1; }
.aisrch-acc-ico{ margin-left:auto; flex:none; display:grid; place-items:center; color:#b3a884; font-size:13px; }
.aisrch-acc-ico .ico-open{ display:none; width:40px; height:40px; }
.aisrch-acc-ico .ico-closed{ display:block; transition:transform .25s ease; }
.aisrch-acc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease; }
.aisrch-acc-body > div{ overflow:hidden; }
.aisrch-row-desc{ color:#6b6b6b; font-size:14px; line-height:1.6; padding:0 8px 4px 40px; margin:0; }
/* open state */
.aisrch-acc.is-open{ background:#fff; border:1px solid #ece4cf; border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,.05); margin:6px 0; }
.aisrch-acc.is-open + .aisrch-acc{ border-top:0; }
.aisrch-acc.is-open .aisrch-acc-head{ padding:22px 24px 6px; }
.aisrch-acc.is-open .aisrch-row-num{ color:var(--gold); }
.aisrch-acc.is-open .aisrch-row-title{ font-size:18px; }
.aisrch-acc.is-open .aisrch-acc-body{ grid-template-rows:1fr; }
.aisrch-acc.is-open .aisrch-row-desc{ padding:8px 24px 22px 46px; }
.aisrch-acc.is-open .ico-open{ display:block; }
.aisrch-acc.is-open .ico-closed{ display:none; }

/* ---------- BEFORE vs AFTER (matches case-study styling) ---------- */
.aisrch-metrics{ background:var(--ivory); padding:52px 0 64px; }
.aisrch-metrics-title{ font-family:var(--font-display); font-weight:700; font-size:50px; line-height:1.01;
  letter-spacing:-1px; text-transform:capitalize; text-align:center; color:var(--ink); }
.aisrch-metrics-grid{ display:grid; grid-template-columns:1fr 300px; gap:56px; align-items:start; margin-top:40px; }
.aisrch-metric-list{ display:flex; flex-direction:column; }
.aisrch-metric-row{ display:grid; grid-template-columns:1.5fr 118px 30px 158px; gap:18px; align-items:center;
  padding:22px 0; border-bottom:1px solid rgba(0,0,0,.09); }
.aisrch-metric-row:first-child{ padding-top:4px; }
.aisrch-metric-row:last-child{ border-bottom:0; padding-bottom:0; }
.aisrch-metric-meta{ min-width:0; }
.aisrch-metric-title{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink); }
.aisrch-metric-title img{ width:17px; height:17px; display:block; filter:brightness(0) opacity(.72); }
.aisrch-metric-note{ color:#6b6b6b; font-size:12.5px; line-height:1.5; margin-top:8px; max-width:320px; }
.aisrch-metric-cards{ display:contents; }
.aisrch-card{ border-radius:14px; padding:13px 15px; }
.aisrch-before{ background:#fff; border:1px solid #e8ddc2; text-align:center; }
.aisrch-after{ background:#fdf6df; border:1px solid rgba(255,193,7,.38); }
.aisrch-after-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.aisrch-card-label{ font-size:10px; color:#8a8578; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.aisrch-card-val{ font-family:var(--font-display); font-weight:700; font-size:30px; line-height:1.1; margin-top:8px; color:var(--ink); }
.aisrch-after .aisrch-card-val{ color:var(--gold-num); }
.aisrch-metric-arrow{ color:#3bb371; font-size:18px; display:grid; place-items:center; }
.aisrch-badge{ display:inline-flex; align-items:center; gap:3px; height:20px; padding:0 8px; border-radius:40px;
  background:#1E9E57; color:#fff; font-weight:700; font-size:10.5px; }
.aisrch-badge i{ font-size:9px; }
.aisrch-metrics-media{ display:flex; justify-content:center; }
.aisrch-metrics-media img{ width:auto; max-width:100%; max-height:520px; height:auto; display:block; }

/* ---------- GOLD PRICING BAND ---------- */
.aisrch-pricing{ background:var(--gold); color:var(--ink); }
.aisrch-pricing-inner{ display:grid; grid-template-columns:7fr 3fr; align-items:center; gap:36px; padding:36px 44px; }
.aisrch-pricing-content{ display:flex; align-items:center; justify-content:space-between; gap:44px; }
.aisrch-price{ display:flex; align-items:baseline; font-family:var(--font-display); font-weight:700; color:var(--ink); flex:none; }
.aisrch-price .cur{ font-size:32px; align-self:flex-start; }
.aisrch-price .num{ font-size:74px; line-height:.9; letter-spacing:-2px; }
.aisrch-price .per{ font-size:28px; margin-left:2px; }
.aisrch-pricing-div{ width:1px; align-self:stretch; min-height:64px; background:rgba(0,0,0,.18); flex:none; }
.aisrch-pricing-item{ flex:none; }
.aisrch-pricing-item b{ display:block; font-family:var(--font-display); font-weight:700; font-size:25px; color:var(--ink); }
.aisrch-pricing-item small{ display:block; color:#5a4700; font-size:15px; margin-top:3px; }
.aisrch-pricing .btn{ justify-self:end; flex:none; }

/* ---------- SHARED-COMPONENT SPACING (scoped) ---------- */
.geo360{ padding:52px 0; }
.process{ padding:60px 0; }
.feature-quote{ padding:52px 0; }
.results{ display:none; } /* stats grid replaced by feature cards */

/* ---------- SHARED PROCESS ICONS (Figma SVGs carry their own circle) ---------- */
.process .process-ico{ background:transparent; }
.process .process-ico img{ width:56px; height:56px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1200px){
  .aisrch-hero-inner{ min-height:0; padding-block:60px 68px; }
  .aisrch-hero-title{ font-size:46px; }
  .aisrch-feats-grid{ grid-template-columns:repeat(2,1fr); }
  .aisrch-showcase-grid{ grid-template-columns:1fr; gap:36px; align-items:start; }
  .aisrch-showcase-media{ max-width:560px; min-height:0; }
  .aisrch-showcase-media img{ height:auto; }
  .aisrch-metrics-grid{ grid-template-columns:1fr; }
  .aisrch-metrics-media img{ max-height:none; max-width:380px; }
  .aisrch-metrics-title{ font-size:40px; }
}
@media (max-width:1024px){
  .aisrch-metric-row{ grid-template-columns:1fr; gap:14px; }
  .aisrch-metric-cards{ display:grid; grid-template-columns:1fr 30px 1fr; gap:12px; align-items:center; }
  .aisrch-before .aisrch-card-val{ text-align:center; }
  .aisrch-metric-arrow{ transform:rotate(90deg); }
  .aisrch-pricing-inner{ padding:30px 32px; gap:24px; }
}
@media (max-width:760px){
  .aisrch-hero{ background-image:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.92) 60%),
                   url('../assets/images/ai-search-service/rectangle-240647851.png');
    background-position:center top; background-size:cover; }
  .aisrch-hero-inner{ padding-block:48px 52px; }
  .aisrch-hero-title{ font-size:34px; }
  .aisrch-feats-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .aisrch-showcase{ padding:48px 0; }
  .aisrch-metrics-title{ font-size:32px; }
  .aisrch-metric-cards{ grid-template-columns:1fr; }
  .aisrch-metric-arrow{ display:none; }
  .aisrch-pricing-inner{ grid-template-columns:1fr; align-items:flex-start; gap:20px; padding:32px 22px; }
  .aisrch-pricing-content{ flex-direction:column; align-items:flex-start; gap:16px; }
  .aisrch-pricing-div{ display:none; }
  .aisrch-pricing .btn{ justify-self:start; }
}