/* =====================================================================
   Gorilla Marketing Experts — Global Stylesheet
   Tokens are EXACT values from the Figma file (node 1:9 spec).
   Display font is Product Sans (proprietary); Poppins is the loaded
   fallback. If a Product Sans web license/file is provided, drop it in
   css/fonts/ and the @font-face below will pick it up automatically.
   ===================================================================== */
/* Product Sans — full uploaded family (real cuts per weight/style).
   Present weights: Thin 100, Light 300, Regular 400, Medium 500, Bold 700,
   Black 900 (+ italics). 600/800 requests map to the nearest real cut. */
@font-face{ font-family:'Product Sans'; src:url('../assets/fonts/ProductSans-Thin.ttf') format('truetype'); font-weight:100; font-style:normal; font-display:swap; }
@font-face{ font-family:'Product Sans'; src:url('../assets/fonts/ProductSans-ThinItalic.ttf') format('truetype'); font-weight:100; font-style:italic; font-display:swap; }
@font-face{ font-family:'Product Sans'; src:url('../assets/fonts/ProductSans-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Product Sans'; src:url('../assets/fonts/ProductSans-LightItalic.ttf') format('truetype'); font-weight:300; font-style:italic; font-display:swap; }
@font-face{ font-family:'Product Sans'; src:url('../assets/fonts/ProductSans-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Product Sans'; src:url('../assets/fonts/ProductSans-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:'Product Sans'; src:url('../assets/fonts/ProductSans-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Product Sans'; src:url('../assets/fonts/ProductSans-MediumItalic.ttf') format('truetype'); font-weight:500; font-style:italic; font-display:swap; }
@font-face{ font-family:'Product Sans'; src:url('../assets/fonts/ProductSans-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Product Sans'; src:url('../assets/fonts/ProductSans-BoldItalic.ttf') format('truetype'); font-weight:700; font-style:italic; font-display:swap; }
@font-face{ font-family:'Product Sans'; src:url('../assets/fonts/ProductSans-Black.ttf') format('truetype'); font-weight:900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Product Sans'; src:url('../assets/fonts/ProductSans-BlackItalic.ttf') format('truetype'); font-weight:900; font-style:italic; font-display:swap; }

:root{
  /* Brand */
  --gold:        #FFBB00;   /* primary accent */
  --gold-num:    #FDC62A;   /* stat numbers */
  --gold-grad:   linear-gradient(90deg,#CB980D 0%,#FFBB00 100%); /* filled buttons */
  --star:        #FFC107;

  --ivory:       #FFFFF0;   /* light section bg + light text on dark */
  --ink:         #0C0B0C;   /* near-black: hero/process/footer, dark text */
  --ink-pill:    #090909;   /* eyebrow pill fill */
  --card-dark:   #141314;   /* process cards */
  --logo-soft:   #F2F2F2;
  --muted-dark:  #A3A3A0;   /* body text on dark */
  --muted-2:     #93908E;   /* inactive carousel/secondary */
  --quote-black: #000000;

  --bd-gold:     rgba(255,187,0,.42);
  --bd-gold-13:  rgba(255,187,0,.13);
  --glow-stat:   rgba(255,214,51,.12);

  /* Type */
  --font-display:'Product Sans','Poppins',system-ui,-apple-system,Segoe UI,sans-serif;
  --font-body:   'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  /* Layout */
  --container: 1300px;   /* content width — uniform across all pages (header + sections) */
  --pad-x: 64px;
  --r-btn: 8px;
  --r-card: 20px;
  --proc-gap: 52px;   /* gap between process step cards (room for the arrow) */
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:#fff; line-height:1.5; font-size:16px;
  -webkit-font-smoothing:antialiased; letter-spacing:-.16px;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.container{ width:100%; max-width:calc(var(--container) + 2*var(--pad-x)); margin-inline:auto; padding-inline:var(--pad-x); }
/* Home page uses a narrower 1300px content width (more zoom-resilient) */
.page-home{ --container:1300px; }
/* Home CTA button: black bg, white text/arrow (shared cta.php stays gold elsewhere) */
.page-home .cta-btn{ background:var(--ink); color:var(--ivory); }
.page-home .cta-btn:hover{ background:#000; }
.page-home .cta-btn .btn-arrow{ filter:invert(1); }

h1,h2,h3,.display{ font-family:var(--font-display); }

/* ---------- Eyebrow / badge pill ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  height:33px; padding:0 18px; border-radius:40px;
  font-family:var(--font-display); font-weight:700;
  font-size:15.36px; line-height:1; letter-spacing:.768px; text-transform:uppercase;
  background:var(--ink-pill); color:var(--gold);
  border:1.28px solid var(--bd-gold);
}
.eyebrow::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--gold); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:50px; padding:0 22px; border-radius:var(--r-btn);
  font-family:var(--font-body); font-weight:700; font-size:15px; letter-spacing:-.16px;
  border:1px solid transparent; transition:.2s ease; white-space:nowrap;
}
.btn img,.btn svg{ width:16px; height:auto; }
.btn-gold{ background:var(--gold-grad); color:var(--ink); }
.btn-gold:hover{ filter:brightness(1.05); }
.btn-outline{ background:transparent; color:var(--ivory); border-color:var(--gold); }
.btn-outline:hover{ background:rgba(255,187,0,.08); }
.btn-outline-dark{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-dark{ background:var(--ink); color:var(--ivory); }
.btn-dark:hover{ background:#000; }
.btn-dark .btn-arrow{ filter:invert(1); }
.btn-arrow{ filter:none; }

/* Section scaffolding */
.section{ padding:96px 0; }
.section-head{ text-align:center; max-width:none; margin:0 auto 56px; }
/* Desktop: keep these section headings on a single line (as in Figma) */
@media (min-width:1025px){ .section-title{ white-space:nowrap; } }
.section-title{ font-size:50px; line-height:1.01; letter-spacing:-1px; text-transform:capitalize; font-weight:700; padding-top:20px; }
.section .eyebrow{ margin-bottom:22px; }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header{ background:var(--ink); position:sticky; top:0; z-index:50; }
.header-inner{ display:flex; align-items:center; gap:30px; height:96px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark img{ height:44px; width:auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-family:var(--font-display); font-size:24px; letter-spacing:-.8px; text-transform:capitalize; color:var(--logo-soft); }
.brand-name .g{ color:var(--gold); }
.brand-tag{ color:var(--gold); font-size:9px; letter-spacing:.26em; font-weight:600; margin-top:3px; font-family:var(--font-body); }
.main-nav{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.nav-link{ position:relative; color:var(--ivory); font-size:16px; font-weight:500; letter-spacing:-.16px; padding:10px 16px 12px; border-radius:8px; transition:color .2s ease; }
/* animated underline: grows from the left on hover, stays lit on the active page */
.nav-link::after{ content:""; position:absolute; left:16px; right:16px; bottom:4px; height:2px; border-radius:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left center; transition:transform .28s cubic-bezier(.4,0,.2,1); }
.nav-link:hover{ color:var(--gold); }
.nav-link:hover::after{ transform:scaleX(1); }
.nav-link.is-active{ color:var(--gold); font-weight:600; }
.nav-link.is-active::after{ transform:scaleX(1); height:3px; }

/* ---------- Services dropdown ---------- */
.nav-item{ position:relative; display:inline-flex; align-items:center; }
.has-dropdown > .nav-link{ display:inline-flex; align-items:center; gap:7px; }
.nav-caret{ font-size:10px; transition:transform .28s cubic-bezier(.4,0,.2,1); }
.has-dropdown:hover .nav-caret,
.has-dropdown:focus-within .nav-caret{ transform:rotate(180deg); color:var(--gold); }
/* the panel: padding-top forms a transparent hover bridge to the trigger */
.nav-dropdown{ position:absolute; top:100%; left:0; padding-top:12px; min-width:266px; z-index:60;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .24s ease, transform .24s cubic-bezier(.4,0,.2,1), visibility .24s; }
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-dropdown-inner{ background:#17161b; border:1px solid rgba(255,255,255,.08); border-radius:14px;
  padding:8px; box-shadow:0 22px 46px rgba(0,0,0,.5); }
.dropdown-link{ position:relative; display:block; padding:11px 16px; border-radius:9px; color:var(--ivory);
  font-family:var(--font-body); font-size:15px; font-weight:500; white-space:nowrap;
  transition:background .18s ease, color .18s ease, padding-left .18s ease; }
.dropdown-link:hover{ background:rgba(255,187,0,.1); color:var(--gold); padding-left:22px; }
.header-cta{ height:44px; padding:0 18px; font-size:12.5px; }

/* Subpage banners (not home): 20px right padding on the heading + description only — desktop only */
@media (min-width:1201px){
  .aisrch-hero-title, .aisrch-hero-desc,
  .smm-hero-title, .smm-hero-desc,
  .wd-hero-title, .wd-hero-desc,
  .gads-hero-title, .gads-hero-desc,
  .gmap-hero-title, .gmap-hero-desc,
  .about-hero-title, .about-hero-desc,
  .contact-hero-title, .contact-hero-desc,
  .gmbcs-hero-title, .gmbcs-hero-desc,
  .cs-hero-title, .cs-hero-desc,
  .aics-hero-title, .aics-hero-desc{
    padding-right:40px;
  }
}
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; }
.nav-toggle span{ width:24px; height:2px; background:#fff; border-radius:2px; transition:.25s; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero{ background:var(--ink); color:var(--ivory); padding:70px 0 96px; overflow:hidden; }
.hero-inner{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,684px); gap:56px; align-items:center; }
.hero-copy{ min-width:0; }
.hero-title{ font-size:clamp(42px,4.6vw,68px); line-height:1.01; letter-spacing:-1.36px; text-transform:capitalize; font-weight:400; margin-top:24px; color:var(--ivory); overflow-wrap:break-word; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-title{ background:linear-gradient(180deg,var(--ivory) 40%,var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
}
.hero-title .b{ font-weight:700; }
.hero-title .rev{ position:relative; color:var(--gold); -webkit-text-fill-color:var(--gold); font-weight:700; }
.hero-title .rev::after{ content:""; position:absolute; left:0; right:-4px; bottom:-14px; height:14px;
  background:url('../assets/images/home/hero-underline-scribble.svg') no-repeat center/contain; }
.hero-desc{ color:var(--ivory); font-weight:500; font-size:16px; margin-top:26px; max-width:560px; }
.hero-actions{ display:flex; align-items:center; gap:18px; margin-top:34px; flex-wrap:wrap; }
.hero-proof{ display:flex; align-items:center; gap:16px; margin-top:38px; flex-wrap:wrap; }
.avatars{ display:flex; }
.avatars img{ width:44px; height:44px; border-radius:50%; border:2px solid var(--ink); margin-left:-12px; background:#333; object-fit:cover; }
.avatars img:first-child{ margin-left:0; }
/* new hero proof cluster: avatar strip + stars(+caption) + gorilla badge */
.proof-avatars{ height:44px; width:auto; max-width:100%; }
.proof-badge{ width:44px; height:44px; flex:none; object-fit:contain; }
/* home stars image bakes in the "from 1000+ happy customers" caption */
.page-home .proof-stars{ height:44px; width:auto; }
.av-init{ width:44px; height:44px; border-radius:50%; border:2px solid var(--ink); margin-left:-12px; display:grid; place-items:center; color:#fff; font-weight:700; font-size:14px; }
.review-avatar.init{ display:grid; place-items:center; color:#fff; font-weight:700; font-size:18px; font-family:var(--font-display); }
.proof-meta{ display:flex; flex-direction:column; gap:4px; }
.proof-stars{ height:20px; }
.proof-text{ font-size:14px; color:var(--muted-dark); }
.hero-media{ position:relative; width:100%; min-width:0; aspect-ratio:809/503; border-radius:20px; overflow:hidden;
  background:radial-gradient(120% 120% at 70% 30%,#1c1607,#0b0b0b); border:1px solid var(--bd-gold); display:grid; place-items:center; }
.hero-media img.thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.hero-media .play{ position:relative; width:80px; height:80px; border-radius:50%; background:var(--gold); color:var(--ink); border:0; display:grid; place-items:center; font-size:26px; box-shadow:0 12px 40px rgba(255,187,0,.4); }
/* Banner hero video placeholders (poster shows until played) */
.hero-media .hero-media-vid,
.aics-hero-video .aics-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:transparent; z-index:1; }
.hero-media .play, .aics-hero-video .play{ z-index:2; }
.hero-media.is-playing .play, .aics-hero-video.is-playing .play{ opacity:0; visibility:hidden; pointer-events:none; }

/* =====================================================================
   TRUSTED BY
   ===================================================================== */
.trusted{ background:var(--ivory); padding:40px 0; overflow:hidden; }
.trusted-inner{ display:flex; align-items:center; gap:48px; }
.trusted-label{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink); max-width:190px; line-height:1.25; flex:none; }
/* seamless marquee */
.trusted-marquee{ position:relative; flex:1 1 0; min-width:0; overflow:hidden; }
.trusted-track{ display:flex; align-items:center; width:max-content; gap:80px; }
/* equal-width slots => even pitch + an exact -50% seam (seamless, no clustering) */
.trusted-item{ flex:none; display:flex; align-items:center; justify-content:center; }
.trusted-item img{ height:44px; width:auto; max-width:150px; object-fit:contain; display:block; }
/* streetlegal logo has invisible white "STREET" text on its left -> pull it left */
.trusted-item img[src*="streetlegal"]{ margin-left:-50px; }
.trusted-marquee:hover .trusted-track{ animation-play-state:paused; }
@keyframes trusted-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .trusted-track{ animation:none; } }

/* =====================================================================
   REVIEWS
   ===================================================================== */
.reviews{ background:var(--ivory); padding:24px 0 40px; }
.reviews-viewport{ overflow:hidden; }
.reviews-track{ display:flex; gap:24px; }
.reviews-track > .review-card{ flex:0 0 calc((100% - 48px) / 3); }  /* 3 visible (2 gaps) */
.review-card{ background:#FFF8DC; border:1px solid #eee6d0; border-radius:var(--r-card); padding:26px; }
.review-head{ display:flex; align-items:center; gap:12px; }
.review-avatar{ width:52px; height:52px; border-radius:50%; }
.review-name{ font-weight:600; font-size:16px; }
.review-when{ font-size:13px; color:var(--muted-2); }
.review-body{ color:var(--ink); font-size:16px; margin:18px 0; line-height:1.5; }
.review-foot{ display:flex; align-items:center; justify-content:space-between; }
.review-google{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); }
.review-google img{ width:20px; height:20px; }
.review-stars{ height:18px; }

/* =====================================================================
   STATS
   ===================================================================== */
.results{ background:var(--ivory); padding:64px 0 96px; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:8px; }
.stat-card{ background:#fff; border:1px solid var(--ink); border-radius:var(--r-card); padding:32px; min-height:260px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; }
/* icon SVGs carry their own gold disc + glow, so the wrapper stays transparent */
.stat-ico{ display:grid; place-items:center; color:var(--gold); }
.stat-ico img{ width:112px; height:112px; }
.stat-ico i{ width:80px; height:80px; border-radius:40px; background:var(--glow-stat); display:grid; place-items:center; font-size:34px; box-shadow:0 0 24px rgba(255,191,0,.3); }
.stat-num{ font-family:var(--font-display); font-weight:700; font-size:56px; line-height:1.1; letter-spacing:-1.12px; color:var(--gold-num); }
.stat-label{ color:var(--ink); font-size:16px; }

/* =====================================================================
   SERVICES
   ===================================================================== */
.services{ background:#fffad9; padding:24px 0 96px; }
.services-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.service-card{ background:#fff; border:1px solid #eee6d0; border-radius:var(--r-card); padding:20px 20px 30px; text-align:center; transition:.2s; display:flex; flex-direction:column; }
.service-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.06); }
.service-thumb{ aspect-ratio:1/1; border-radius:14px; background:#f4efe2; overflow:hidden; margin-bottom:22px; }
.service-thumb img{ width:100%; height:100%; object-fit:cover; }
/* two-line headings (explicit breaks in markup) => uniform block across cards */
.service-title{ font-family:var(--font-display); font-size:22px; font-weight:700; line-height:1.2; min-height:calc(1.2em * 2); }
.service-desc{ font-size:16px; color:#5f5f5f; margin:14px 0 22px; line-height:1.6; }
/* margin-top:auto pins the link to the card bottom -> all links line up */
.service-link{ display:inline-block; margin-top:auto; font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--gold); text-transform:uppercase; }

/* =====================================================================
   PROCESS
   ===================================================================== */
.process{ background:var(--ink); color:var(--ivory); padding:96px 0; }
.process .section-title{ color:var(--ivory); }
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--proc-gap); }
.process-card{ position:relative; background:var(--card-dark); border:1px solid var(--bd-gold); border-radius:var(--r-card);
  min-height:340px; padding:32px; display:flex; flex-direction:column; gap:20px; }
.process-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.process-num{ font-family:var(--font-display); font-weight:700; font-size:44px; color:var(--gold); line-height:1; }
.process-ico{ width:56px; height:56px; border-radius:28px; background:var(--bd-gold-13); color:var(--gold); display:grid; place-items:center; }
.process-ico img,.process-ico i{ width:24px; height:24px; font-size:20px; }
.process-title{ font-family:var(--font-display); font-size:24px; font-weight:700; }
.process-desc{ color:var(--muted-dark); font-size:15px; line-height:1.6; }
.process-arrow{ position:absolute; left:100%; top:50%; transform:translate(-50%,-50%); margin-left:calc(var(--proc-gap) / 2); z-index:2; width:40px; height:40px; pointer-events:none; }
.process-card:last-child .process-arrow{ display:none; }

/* =====================================================================
   FEATURED TESTIMONIAL
   ===================================================================== */
.feature-quote{ background:var(--ivory); padding:88px 0; }
.fq-inner{ display:grid; grid-template-columns:1fr 410px; gap:56px; align-items:center; }
.fq-copy{ min-width:0; }
.fq-mark{ width:76px; margin-bottom:12px; }
/* quote slider (left) */
.fq-quote-viewport{ overflow:hidden; }
.fq-quote-track{ display:flex; will-change:transform; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.fq-text{ flex:0 0 100%; width:100%; font-size:25px; color:var(--quote-black); margin:0 0 30px; line-height:1.5; letter-spacing:-.29px; font-weight:500; }
.fq-controls{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.fq-dots{ display:flex; align-items:center; gap:12px; background:#eee; border-radius:100px; padding:12px 16px; }
.fq-dot{ width:8px; height:8px; padding:0; border:0; border-radius:50%; background:var(--muted-2); cursor:pointer; transition:.3s; }
.fq-dot.on{ width:24px; border-radius:5px; background:var(--gold); }
.fq-nav{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(0,0,0,.4); color:var(--ink); background:none; display:grid; place-items:center; cursor:pointer; transition:.2s; }
.fq-nav:hover{ background:rgba(0,0,0,.05); }
.fq-nav.next{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.fq-nav.next:hover{ filter:brightness(1.05); }
/* photo slider (right) */
.fq-photo-viewport{ width:410px; height:571px; border-radius:27.33px; overflow:hidden; }
.fq-photo-track{ display:flex; height:100%; will-change:transform; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.fq-photo{ position:relative; flex:0 0 100%; width:100%; height:100%; background:#ddd; }
.fq-photo img.person{ width:100%; height:100%; object-fit:cover; }
/* Testimonial video player (poster shown until played) */
.fq-photo .fq-vid{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }
.fq-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  width:72px; height:72px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,187,0,.94); color:#0C0B0C; display:grid; place-items:center;
  font-size:24px; padding-left:5px; box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:transform .2s ease, background .2s ease; }
.fq-play:hover{ transform:translate(-50%,-50%) scale(1.06); background:#FFBB00; }
.fq-photo.is-playing .fq-play{ opacity:0; visibility:hidden; }
.fq-photo.is-playing .cap{ opacity:0; visibility:hidden; }
.fq-photo .cap{ transition:opacity .25s ease, visibility .25s ease; position:absolute; left:20px; right:20px; bottom:20px; background:linear-gradient(180deg,rgba(13,13,13,.2),rgba(13,13,13,.92));
  border-radius:16px; padding:18px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.fq-photo .cap b{ display:block; font-size:23px; font-weight:700; text-transform:capitalize; }
.fq-photo .cap small{ font-size:15px; color:#fff; }
.fq-photo .cap .badge{ width:48px; height:48px; flex-shrink:0; }

/* =====================================================================
   CTA BANNER
   ===================================================================== */
.cta-banner{ background:var(--gold); }
.cta-inner{ display:flex; align-items:center; gap:28px; padding:44px 64px; }
.cta-title{ font-family:var(--font-display); font-size:40px; font-weight:700; color:var(--ink); text-transform:capitalize; }
.cta-text{ color:#3a2e00; font-size:16px; margin-top:6px; font-weight:500; }
.cta-art{ display:flex; align-items:flex-end; gap:8px; margin-left:auto; flex-shrink:0; }
.cta-gorilla{ height:96px; width:auto; flex-shrink:0; }
.cta-arrow{ width:90px; margin-bottom:8px; flex-shrink:0; }
.cta-btn{ flex-shrink:0; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{ background:var(--ink); color:var(--muted-dark); padding:72px 0 28px; }
.footer-inner{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:44px; }
.brand--footer .brand-name{ font-size:22px; }
.footer-desc{ color:var(--muted-dark); font-size:14px; margin-top:20px; max-width:320px; line-height:1.6; }
.footer-heading{ color:#fff; font-family:var(--font-display); font-size:18px; font-weight:700; margin-bottom:20px; }
.footer-links li{ margin-bottom:12px; }
.footer-links a{ color:var(--muted-dark); font-size:15px; transition:.2s; }
.footer-links a:hover{ color:var(--gold); }
.footer-talk .footer-cta{ margin-bottom:22px; }
.footer-contact{ display:flex; align-items:center; gap:10px; color:var(--muted-dark); font-size:15px; margin-bottom:14px; }
.footer-contact img{ width:18px; height:18px; }
.footer-bottom{ border-top:1px solid #232323; margin-top:48px; padding-top:24px; text-align:center; }
.footer-bottom p{ color:#7c7c7c; font-size:14px; }

/* =====================================================================
   RESPONSIVE  — tablet ≤1024, mobile ≤600 (matches Figma scaling)
   ===================================================================== */
@media (max-width:1200px){
  :root{ --pad-x:40px; }
  .hero-inner{ grid-template-columns:1fr; gap:40px; }
  .hero-media{ max-width:809px; }
  .services-grid{ grid-template-columns:repeat(3,1fr); }
  .process-grid{ grid-template-columns:repeat(2,1fr); }
  .process-arrow{ display:none !important; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .reviews-track > .review-card{ flex-basis:calc((100% - 24px) / 2); }  /* 2 visible */
  .fq-inner{ grid-template-columns:1fr; }
  .fq-photo-viewport{ width:100%; max-width:410px; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .hero-title{ font-size:56px; }
  .section-title,.cta-title{ font-size:40px; }
}
/* Header collapses to hamburger on tablet & below (full nav needs ~990px) */
@media (max-width:1024px){
  .main-nav, .header-cta{ display:none; }
  .nav-toggle{ display:flex; margin-left:auto; }
  .main-nav.open{ display:flex; position:absolute; top:96px; left:0; right:0; flex-direction:column; align-items:flex-start; background:var(--ink); padding:16px var(--pad-x); gap:4px; border-top:1px solid #232323; z-index:60; }
  .main-nav.open .nav-link{ width:100%; }
  /* Services dropdown becomes a tap-accordion inside the mobile menu */
  .main-nav.open .nav-item.has-dropdown{ display:block; width:100%; }
  .main-nav.open .nav-dropdown{ position:static; opacity:1; visibility:visible; transform:none; padding-top:0; min-width:0;
    max-height:0; overflow:hidden; transition:max-height .3s ease; }
  .main-nav.open .nav-item.has-dropdown.is-open .nav-dropdown{ max-height:360px; }
  .main-nav.open .nav-dropdown-inner{ background:transparent; border:0; box-shadow:none; padding:2px 0 8px 16px; }
  .main-nav.open .dropdown-link{ padding:10px 8px; font-size:14px; }
  .main-nav.open .dropdown-link:hover{ padding-left:8px; }
  .main-nav.open .has-dropdown.is-open .nav-caret{ transform:rotate(180deg); }
  /* CTA banner stacks on tablet so the button doesn't overlap the gorilla/arrow */
  .cta-inner{ flex-direction:column; align-items:flex-start; gap:24px; padding:44px 40px; }
  .cta-art{ margin-left:0; }
}
@media (max-width:760px){
  :root{ --pad-x:20px; }
  .services-grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; }  /* 1 card per row on mobile */
  .reviews-track > .review-card{ flex-basis:100%; }  /* 1 visible */
  .stats-grid,.process-grid{ grid-template-columns:1fr; }
  .trusted-inner{ flex-direction:column; align-items:flex-start; gap:20px; }
  .trusted-marquee{ width:100%; flex:none; height:auto; }
  .trusted-track{ gap:48px; }
  .trusted-item img{ max-width:120px; }
  .cta-inner{ padding:32px 20px; }
  .footer-inner{ grid-template-columns:1fr; gap:32px; }
  .section{ padding:64px 0; }
  .eyebrow{ font-size:11.5px; letter-spacing:.4px; height:28px; padding:0 13px; gap:7px; }
  .hero-title{ font-size:38px; }
  .hero-desc{ font-size:15px; }
  .section-title,.cta-title{ font-size:32px; }
  .fq-text{ font-size:22px; }
}
/* very small phones — tighten further so nothing overflows */
@media (max-width:400px){
  .eyebrow{ font-size:10.5px; letter-spacing:.2px; }
  .hero-title{ font-size:33px; }
}

/* =====================================================================
   ===== ABOUT PAGE =====
   (all rules scoped with .about- prefix to avoid collisions)
   ===================================================================== */
.about-hero{
  position:relative; background:var(--ink); color:var(--ivory); overflow:hidden;
  background-image:linear-gradient(90deg,var(--ink) 22%,rgba(12,11,12,.72) 46%,rgba(12,11,12,.15) 70%),
                   url('../assets/images/about/rectangle-240647831.png');
  background-repeat:no-repeat; background-position:right center, right center;
  background-size:auto 100%, cover;
}
.about-hero-inner{ padding:88px 0 96px; }
.about-hero-copy{ max-width:640px; }
.about-hero .eyebrow{ margin-bottom:24px; }
.about-hero-title{
  font-family:var(--font-display); font-weight:700; font-size:56px; line-height:1.06;
  letter-spacing:-1.12px; text-transform:capitalize; color:var(--ivory);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .about-hero-title{ background:linear-gradient(180deg,var(--ivory) 55%,var(--gold));
    -webkit-background-clip:text; background-clip:text; color:transparent; }
}
.about-hero-desc{ color:var(--ivory); font-weight:500; font-size:16px; margin-top:24px; max-width:560px; line-height:1.6; }
.about-hero .hero-actions{ margin-top:34px; }
.about-hero .hero-proof{ margin-top:40px; }
.about-hero .avatars img{ object-fit:cover; }

/* Stats strip on About has no section head — just tighten the top padding */
.about-stats{ padding:80px 0 88px; }

/* ---- Meet the Team ---- */
.about-team{ background:var(--ivory); padding:24px 0 96px; }
.about-team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.team-card{
  background:#fff; border:1px solid #eee6d0; border-radius:var(--r-card);
  padding:20px 20px 26px; text-align:center; transition:.2s;
  display:flex; flex-direction:column; align-items:center;
}
.team-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.06); }
.team-photo{ width:100%; aspect-ratio:1/1; border-radius:16px; overflow:hidden; background:#f4efe2; margin-bottom:18px; }
.team-photo img{ width:100%; height:100%; object-fit:cover; }
.team-tag{
  display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 14px; border-radius:40px;
  background:var(--bd-gold-13); color:#8a6a00; font-family:var(--font-body); font-weight:600;
  font-size:12px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:14px;
}
.team-tag i{ color:var(--gold); font-size:13px; }
.team-name{ font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--ink); }
.team-role{ font-size:15px; color:#5f5f5f; margin-top:4px; }

/* ---- Mission band (dark, centered) ---- */
.about-mission{ background:var(--ink); color:var(--ivory); padding:96px 0; overflow:hidden; }
.about-mission-inner{ position:relative; max-width:1045px; margin-inline:auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; }
.about-mission-mark{ width:72px; height:auto; margin-bottom:20px; opacity:.95; }
.about-mission-title{ font-family:var(--font-display); font-weight:700; font-size:48px; line-height:1.08;
  letter-spacing:-1px; text-transform:capitalize; color:var(--ivory); max-width:720px; }
.about-mission-text{ color:var(--muted-dark); font-size:17px; line-height:1.7; margin-top:24px; max-width:900px; }
.about-mission .btn{ margin-top:34px; }

@media (max-width:1200px){
  .about-hero-title{ font-size:46px; }
  .about-team-grid{ grid-template-columns:repeat(3,1fr); }
  .about-mission-title{ font-size:40px; }
  .about-hero{ background-image:linear-gradient(90deg,var(--ink) 30%,rgba(12,11,12,.8) 55%,rgba(12,11,12,.35) 80%),
                   url('../assets/images/about/rectangle-240647831.png'); }
}
@media (max-width:1024px){
  .about-team-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .about-hero{ background-image:linear-gradient(180deg,rgba(12,11,12,.6),rgba(12,11,12,.9) 60%),
                   url('../assets/images/about/rectangle-240647831.png');
    background-position:center top; background-size:cover; }
  .about-hero-inner{ padding:56px 0 64px; }
  .about-hero-title{ font-size:34px; }
  .about-team-grid{ grid-template-columns:1fr; max-width:360px; margin-inline:auto; }
  .about-mission{ padding:64px 0; }
  .about-mission-title{ font-size:30px; }
  .about-mission-text{ font-size:15px; }
}

/* ===================== GEO 360 (shared component) ===================== */
.geo360{ background:#FFFFF0; padding:80px 0; }
.geo360-inner{ display:grid; grid-template-columns:440px 1fr; gap:56px; align-items:center; }
.geo360-card img{ width:100%; height:auto; border-radius:24px; display:block; box-shadow:0 30px 60px rgba(74,47,214,.28); }
.geo360-kicker{ font-family:var(--font-display); font-weight:700; font-size:30px; color:var(--ink); letter-spacing:-.5px; }
.geo360-title{ font-family:var(--font-display); font-weight:700; font-size:44px; line-height:1.05; margin-top:2px; }
.geo360-title .geo{ color:#7b5cff; }
.geo360-title .n360{ color:#29a3ff; }
.geo360-title .tm{ font-size:22px; vertical-align:super; color:#29a3ff; }
.geo360-sub{ font-weight:600; color:var(--gold); margin-top:8px; font-size:16px; }
.geo360-desc{ color:#4a4a4a; font-size:15px; line-height:1.6; margin:16px 0 22px; max-width:640px; }
.geo360-feats{ display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; margin-bottom:28px; }
.geo360-feats li{ display:flex; align-items:center; gap:12px; font-size:14px; color:var(--ink); }
.geo360-feats .ic{ display:inline-flex; flex:none; }
.geo360-feats .ic img{ width:19px; height:19px; }
@media (max-width:1024px){
  .geo360-inner{ grid-template-columns:1fr; gap:32px; }
  .geo360-card{ max-width:440px; }
}
@media (max-width:760px){
  .geo360-feats{ grid-template-columns:1fr; }
}

/* ============================================================
   Tablet & mobile: hide every banner's background image and
   use solid black instead. Desktop (>1024px) is untouched.
   ============================================================ */
@media (max-width:1024px){
  [class$="hero"]{ background-image:none !important; background-color:#000 !important; }
  [class$="hero-bg"]{ display:none !important; }
}