/* =====================================================================
   AI Search Rankings — Case Study page styles (rebuilt to match Figma)
   Scoped with .aics- prefix. Loaded AFTER css/style.css.
   Order: hero → trusted → reviews → GEO 360 → At A Glance → The Story
   → Before vs After → process → testimonial → gold promo band → footer.
   ===================================================================== */

/* ---------- HERO (copy left, video player right) ---------- */
.aics-hero{ background:var(--ink); color:var(--ivory); padding:64px 0 76px; overflow:hidden; }
.aics-hero-inner{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,684px); gap:56px; align-items:center; }
.aics-hero-copy{ min-width:0; }
.aics-hero .eyebrow{ margin-bottom:20px; }
/* heading matches the homepage banner: ivory→gold gradient, light base + bold/gold accent */
.aics-hero-title{
  font-family:var(--font-display); font-weight:400; font-size:clamp(42px,4.6vw,64px); line-height:1.03;
  letter-spacing:-1.2px; text-transform:capitalize; max-width:620px; margin-top:4px; overflow-wrap:break-word;
  background:linear-gradient(180deg,var(--ivory) 45%,var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.aics-hero-title .b{ font-weight:700; }
.aics-hero-title .rev{ position:relative; color:var(--gold); -webkit-text-fill-color:var(--gold); font-weight:700; white-space:nowrap; }
.aics-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; }
.aics-hero-desc{ color:var(--ivory); font-weight:500; font-size:16px; margin-top:22px; max-width:520px; line-height:1.6; }
.aics-hero .hero-actions{ margin-top:32px; }

/* hero video player box */
.aics-hero-video{
  position:relative; aspect-ratio:16 / 10; border-radius:24px; overflow:hidden; cursor:pointer;
  background:radial-gradient(130% 130% at 50% 38%, #201f20 0%, #0b0a0b 72%);
  border:1px solid var(--bd-gold); box-shadow:0 30px 70px rgba(0,0,0,.5);
  display:grid; place-items:center;
}
.aics-hero-video .play{
  width:76px; height:76px; border-radius:50%; background:var(--gold);
  display:grid; place-items:center; box-shadow:0 12px 34px rgba(255,187,0,.42);
  transition:transform .2s ease;
}
.aics-hero-video:hover .play{ transform:scale(1.06); }
.aics-hero-video .play::before{
  content:""; width:0; height:0; margin-left:6px;
  border-style:solid; border-width:14px 0 14px 23px;
  border-color:transparent transparent transparent var(--ink);
}

/* ---------- AT A GLANCE (white cards on cream, gold numbers) ---------- */
.aics-glance{ background:var(--ivory); padding:48px 0 60px; }
.aics-glance .section-head{ margin-bottom:40px; }
.aics-glance-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.aics-glance-card{ background:transparent; border:1px solid var(--ink); border-radius:20px; padding:34px 24px; text-align:center; }
.aics-glance-ico{ width:72px; height:72px; display:grid; place-items:center; margin:0 auto 16px; }
.aics-glance-num{ font-family:var(--font-display); font-weight:700; font-size:40px; color:var(--gold-num); letter-spacing:-1px; line-height:1; }
.aics-glance-label{ color:var(--ink); font-size:14px; margin-top:12px; line-height:1.45; }
.aics-glance-cta{ display:flex; justify-content:center; margin-top:40px; }

/* ---------- THE STORY (cream section, dark cards, green solution) ---------- */
.aics-story{ background:#fffad9; color:var(--ink); padding:52px 0 60px; }
.aics-story .section-title{ color:var(--ink); }
.aics-story-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:4px; }
.aics-card{
  background:var(--card-dark); border:1px solid var(--bd-gold); border-radius:var(--r-card);
  padding:32px; display:flex; flex-direction:column;
}
.aics-card--wide{ grid-column:1 / -1; margin-top:24px; background:#0E1F17; border-color:rgba(64,192,120,.28); }
.aics-card-tag{
  align-self:flex-start; display:inline-flex; align-items:center; height:26px; padding:0 13px;
  border-radius:40px; background:var(--bd-gold-13); color:var(--gold);
  font-family:var(--font-body); font-weight:700; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:16px;
}
.aics-card--wide .aics-card-tag{ background:rgba(64,192,120,.16); color:#5fd699; }
.aics-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.aics-card-ico{
  width:44px; height:44px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:var(--bd-gold-13); color:var(--gold); font-size:19px;
}
.aics-card--wide .aics-card-ico{ background:rgba(64,192,120,.16); color:#5fd699; }
.aics-card-title{ font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--ivory); }
.aics-card-rule{ height:1px; background:var(--bd-gold); border:0; margin:0 0 20px; opacity:.6; }
.aics-card--wide .aics-card-rule{ background:rgba(64,192,120,.2); }
.aics-bullets{ display:flex; flex-direction:column; gap:14px; }
.aics-bullet{ display:flex; align-items:center; gap:12px; }
.aics-bullet i{ color:var(--gold); font-size:17px; flex:none; }
.aics-bullet.warn i{ color:#ffb84d; }
.aics-bullet span{ color:var(--ivory); font-size:15px; line-height:1.45; }

/* Solution card: 2×2 green sub-cards with number badge + right icon */
.aics-solution-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.aics-solution-item{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:#17402B; border:1px solid rgba(64,192,120,.30); border-radius:14px; padding:16px 18px;
}
.aics-solution-body{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.aics-solution-num{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.06em; color:#5fd699; }
.aics-solution-num i{ color:#40c078; font-size:13px; }
.aics-solution-item p{ color:#eafff4; font-size:15px; line-height:1.4; }
.aics-solution-ic{ flex:none; width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:#8fe6b4; font-size:16px; }

/* ---------- BEFORE VS AFTER (metrics) ---------- */
.aics-metrics{ background:var(--ivory); padding:52px 0 64px; }
.aics-metrics-layout{ display:grid; grid-template-columns:1fr 300px; gap:60px; align-items:start; margin-top:4px; }
.aics-metric-rows{ display:flex; flex-direction:column; }
.aics-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);
}
.aics-metric-row:first-child{ padding-top:4px; }
.aics-metric-row:last-child{ border-bottom:0; padding-bottom:0; }
.aics-metric-meta{ min-width:0; }
.aics-metric-title{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink); }
.aics-metric-title i{ color:var(--ink); font-size:16px; }
.aics-metric-desc{ font-size:12.5px; color:#6b6b6b; line-height:1.5; margin-top:8px; max-width:320px; }

.aics-ba-card{ border-radius:14px; padding:13px 15px; }
.aics-ba-card.before{ background:#fff; border:1px solid #e8ddc2; text-align:center; }
.aics-ba-card.after{ background:#fdf6df; border:1px solid rgba(255,193,7,.38); }
.aics-ba-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.aics-ba-label{ font-size:10px; color:#8a8578; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.aics-ba-value{ font-family:var(--font-display); font-weight:700; font-size:30px; line-height:1.1; margin-top:8px; color:var(--ink); }
.aics-ba-card.after .aics-ba-value{ color:var(--gold-num); }
.aics-ba-arrow{ color:#3bb371; font-size:18px; display:grid; place-items:center; }
.aics-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; letter-spacing:.01em;
}
.aics-badge i{ font-size:9px; }
.aics-metrics-aside{ display:flex; justify-content:center; }
.aics-metrics-aside img{ width:auto; max-width:100%; max-height:520px; height:auto; display:block; }

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

/* ---------- SHARED-COMPONENT SPACING (scoped to this page) ---------- */
.geo360{ padding:52px 0; }        /* was 80px 0 */
.process{ padding:60px 0; }       /* was 96px 0 */
.feature-quote{ padding:52px 0; } /* was 88px 0 */

/* ---------- FIGMA SVG ICONS ---------- */
.aics-glance-ico img{ width:72px; height:72px; display:block; }
.aics-card-ico img{ width:22px; height:22px; display:block; }
.aics-solution-ic img{ width:26px; height:26px; display:block; }
.aics-solution-check{ width:16px; height:16px; display:block; flex:none; }
.aics-metric-title img{ width:17px; height:17px; display:block; filter:brightness(0) opacity(.72); } /* gold Figma icon → dark to match reference */
.process .process-ico{ background:transparent; }         /* Icon-Wrapper SVGs carry their own circle */
.process .process-ico img{ width:56px; height:56px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1200px){
  .aics-hero-inner{ grid-template-columns:1fr; gap:40px; }
  .aics-hero-video{ max-width:600px; }
  .aics-metrics-layout{ grid-template-columns:1fr; }
  .aics-metrics-aside img{ max-height:none; max-width:380px; }
}
@media (max-width:1024px){
  .aics-glance-grid{ grid-template-columns:repeat(2,1fr); }
  .aics-story-grid{ grid-template-columns:1fr; }
  .aics-metric-row{ grid-template-columns:1fr; gap:16px; text-align:left; }
  .aics-ba-card{ text-align:left; }
  .aics-ba-arrow{ transform:rotate(90deg); justify-content:flex-start; }
}
@media (max-width:760px){
  .aics-hero{ padding:56px 0 64px; }
  .aics-hero-title{ font-size:32px; }
  .aics-glance-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .aics-story{ padding:56px 0 64px; }
  .aics-card{ padding:24px; }
  .aics-solution-grid{ grid-template-columns:1fr; }
  .aics-metrics{ padding:56px 0; }
  .aics-promo-inner{ grid-template-columns:1fr; align-items:flex-start; gap:20px; padding:32px 22px; }
  .aics-promo-content{ flex-direction:column; align-items:flex-start; gap:16px; }
  .aics-promo-sep{ display:none; }
  .aics-promo .btn{ justify-self:start; }
}
