/* ============================================
   GROWWSTACKS — GLOBAL CSS
   Design system for all pages
   ============================================ */

/* ── TOKENS ─────────────────────────────────── */
:root {
  /* Brand */
  --green-900:#0d3b1a; --green-800:#145a27; --green-700:#1a6e30;
  --green-600:#1f8a3c; --green-500:#22a447; --green-400:#4cbc6b;
  --green-100:#dcf5e3; --green-50:#f0faf3;

  /* Accents */
  --peach:#ffe8d6; --peach-deep:#f4a261;
  --lavender:#e8dff5; --lavender-deep:#8b5cf6;
  --sky:#dbeafe; --sky-deep:#3b82f6;
  --mint:#d1fae5; --rose:#ffe4e6; --rose-deep:#f43f5e;
  --amber:#fef3c7; --amber-deep:#f59e0b;

  /* Neutrals */
  --dark:#0f1117; --dark-800:#1a1d27; --dark-700:#2a2d37;
  --gray-600:#4b5563; --gray-500:#6b7280; --gray-400:#9ca3af;
  --gray-300:#d1d5db; --gray-200:#e5e7eb; --gray-100:#f3f4f6;
  --gray-50:#f9fafb; --white:#ffffff;

  /* Case study accent */
  --cs-accent:#e8590c; --cs-accent-light:#f97316;
  --cs-accent-pale:#fff7ed;
  --cs-gradient:linear-gradient(135deg,#fff7ed 0%,#fed7aa 50%,#fde8d6 100%);

  /* Type */
  --font-display:'Bricolage Grotesque',serif;
  --font-body:'Plus Jakarta Sans',sans-serif;

  /* Shadows */
  --shadow-xs:0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --shadow-md:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 8px 32px rgba(0,0,0,.10);
  --shadow-xl:0 16px 48px rgba(0,0,0,.12);
  --shadow-green:0 4px 20px rgba(34,164,71,.15);
  --shadow-card-hover:0 8px 30px rgba(0,0,0,.12);

  /* Radius */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --radius-xl:24px; --radius-full:9999px;

  /* Nav height (used everywhere for offsets) */
  --nav-h:72px;
}

/* ── RESET ──────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body {
  font-family:var(--font-body); color:var(--dark);
  background:var(--white); line-height:1.65; overflow-x:hidden;
  padding-top:var(--nav-h);
}
/* Home page — hero handles its own offset */
body:has(.hero), body:has(.cs-hero), body.cs-page { padding-top:0; }

/* ── CLS PREVENTION ─────────────────────────── 
   Reserve space for JS-injected components 
   so the page doesn't jump as content loads.
   These apply ONLY when divs are still empty.
   Once page-builder.js fills them, actual 
   content height takes over naturally.
   ──────────────────────────────────────────── */
#gs-hero:empty            { min-height: 85vh; }
#gs-partners:empty        { min-height: 180px; }
#gs-ticker:empty          { min-height: 100px; }
#gs-wwd:empty             { min-height: 600px; }
#gs-mid-cta:empty         { min-height: 100px; }
#gs-process:empty         { min-height: 650px; }
#gs-stats:empty           { min-height: 140px; }
#gs-cases:empty           { min-height: 550px; }
#gs-industries:empty      { min-height: 500px; }
#gs-testimonials:empty    { min-height: 700px; }
#gs-consult-section:empty { min-height: 650px; }
#gs-faq:empty             { min-height: 500px; }

/* Mobile — sections are taller on small screens */
@media (max-width: 768px) {
  #gs-hero:empty            { min-height: 70vh; }
  #gs-partners:empty        { min-height: 220px; }
  #gs-wwd:empty             { min-height: 800px; }
  #gs-process:empty         { min-height: 900px; }
  #gs-stats:empty           { min-height: 180px; }
  #gs-cases:empty           { min-height: 400px; }
  #gs-industries:empty      { min-height: 600px; }
  #gs-testimonials:empty    { min-height: 900px; }
  #gs-consult-section:empty { min-height: 800px; }
  #gs-faq:empty             { min-height: 600px; }
}

h1,h2,h3,h4,h5,h6 {
  font-family:var(--font-display); line-height:1.15; letter-spacing:-.02em;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }

/* ── UTILITIES ──────────────────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.section { padding:100px 0; }
.section-label {
  font-family:var(--font-body); font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:3px; margin-bottom:12px;
  display:inline-flex; align-items:center; gap:10px; color:var(--gray-500);
}
.section-label::before {
  content:''; width:24px; height:2px; background:currentColor; display:inline-block;
}
.section-title { font-size:clamp(32px,4vw,48px); font-weight:800; margin-bottom:16px; }
.section-desc { font-size:18px; color:var(--gray-500); max-width:640px; line-height:1.7; }

/* ── BUTTONS ────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; border-radius:var(--radius-sm);
  font-family:var(--font-body); font-weight:700; font-size:15px;
  cursor:pointer; transition:all .25s ease; border:2px solid transparent;
  text-decoration:none; position:relative; overflow:hidden;
}
.btn-primary { background:var(--green-700); color:var(--white); border-color:var(--green-700); }
.btn-primary:hover { background:var(--green-800); border-color:var(--green-800); transform:translateY(-2px); box-shadow:var(--shadow-green); }
.btn-outline { background:transparent; color:var(--cs-accent); border-color:var(--cs-accent); }
/* .btn-outline:hover { background:var(--cs-accent); color:var(--white); } */
.btn-outline:hover{
background: var(--btn-hover-color);
color:#fff;
}
.btn-white { background:var(--white); color:var(--dark); border-color:var(--white); }
.btn-white:hover { background:var(--gray-100); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-accent { background:var(--cs-accent); color:var(--white); border-color:var(--cs-accent); }
.btn-accent:hover { background:var(--cs-accent-light); transform:translateY(-2px); box-shadow:0 4px 20px rgba(232,89,12,.25); }
.btn svg { width:18px; height:18px; }
.btn-arrow { transition:transform .25s; }
.btn:hover .btn-arrow { transform:translateX(4px); }
.btn-group { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ── NAVIGATION ─────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(255,255,255,.95); backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid var(--gray-200); transition:box-shadow .3s;
  height:var(--nav-h);
}
.nav.scrolled { box-shadow:var(--shadow-md); }
.nav-inner {
  max-width:1280px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
  height:100%;
}
.nav-left { display:flex; align-items:center; gap:48px; }
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-logo img { height:36px; }
.nav-logo-fallback {
  font-family:var(--font-display); font-weight:800; font-size:24px;
  color:var(--green-700); letter-spacing:-.5px;
}
.nav-logo-fallback span { color:var(--gray-400); font-weight:400; font-size:14px; margin-left:4px; }

/* Desktop nav links */
.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a {
  font-size:14px; font-weight:500; color:var(--gray-600);
  transition:color .2s; position:relative;
}
.nav-links a:hover { color:var(--green-700); }
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0; width:0;
  height:2px; background:var(--green-600); transition:width .25s;
}
.nav-links a:hover::after { width:100%; }

.nav-right { display:flex; align-items:center; gap:16px; }
.nav-phone { font-size:14px; font-weight:600; color:var(--gray-600); display:flex; align-items:center; gap:6px; }
.nav-cta { padding:10px 22px; font-size:14px; }

/* Hamburger — hidden on desktop */
.nav-mobile-toggle {
  display:none; background:none; border:none; cursor:pointer; padding:8px;
  flex-direction:column; gap:5px;
}
.nav-mobile-toggle span {
  display:block; width:24px; height:2px;
  background:var(--dark); border-radius:2px; transition:all .3s ease;
}
/* Hamburger → X animation */
.nav-mobile-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-mobile-toggle.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-mobile-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── HERO ───────────────────────────────────── */
.hero {
  padding:calc(var(--nav-h) + 32px) 0 80px;
  background:var(--white); position:relative; overflow:hidden;
}
.hero-shape-1 {
  position:absolute; top:80px; right:-80px; width:400px; height:400px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--mint),transparent 70%);
  opacity:.5; filter:blur(60px);
}
.hero-shape-2 {
  position:absolute; bottom:-60px; left:-100px; width:350px; height:350px;
  border-radius:50%;
  background:radial-gradient(circle at 70% 70%,var(--lavender),transparent 70%);
  opacity:.4; filter:blur(50px);
}
.hero-shape-3 {
  position:absolute; top:200px; left:50%; width:200px; height:200px;
  border-radius:50%;
  background:radial-gradient(circle,var(--peach),transparent 70%);
  opacity:.3; filter:blur(40px);
}
.hero::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(var(--gray-200) 1px,transparent 1px);
  background-size:32px 32px; opacity:.4;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,black 30%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,black 30%,transparent 70%);
}
.hero-inner {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.hero-announce {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--green-50); border:1px solid var(--green-100);
  padding:8px 16px 8px 10px; border-radius:var(--radius-full);
  font-size:13px; font-weight:600; color:var(--green-700); margin-bottom:24px;
  animation:fadeInUp .6s ease;
}
.hero-announce-badge {
  background:var(--green-700); color:white; font-size:10px; font-weight:800;
  text-transform:uppercase; padding:3px 8px; border-radius:var(--radius-full); letter-spacing:.5px;
}
.hero h1 {
  font-size:clamp(40px,5vw,58px); font-weight:800; color:var(--dark);
  margin-bottom:20px; animation:fadeInUp .6s ease .1s both;
}
.hero h1 .highlight { position:relative; display:inline; }
.hero h1 .highlight::after {
  content:''; position:absolute; bottom:4px; left:0; right:0;
  height:12px; background:var(--amber); border-radius:2px; z-index:-1;
}
.hero-desc {
  font-size:18px; color:var(--gray-500); margin-bottom:32px;
  max-width:540px; line-height:1.75; animation:fadeInUp .6s ease .2s both;
}
.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:40px; animation:fadeInUp .6s ease .3s both; }
.hero-trust {
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  animation:fadeInUp .6s ease .4s both;
}
.hero-trust-item { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--gray-500); font-weight:500; }
.hero-trust-icon {
  width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:10px;
}
.trust-green { background:var(--green-100); color:var(--green-700); }
.trust-amber { background:var(--amber); color:var(--amber-deep); }
.trust-sky { background:var(--sky); color:var(--sky-deep); }

/* Hero visual / card */
.hero-visual { position:relative; animation:fadeInUp .8s ease .3s both; }
.hero-card {
  position:relative; width:100%; max-width:600px; height:380px;
  border-radius:20px; overflow:visible;
  box-shadow:0 25px 50px rgba(0,0,0,.12); z-index:1;
}
.hero-carousel {
  position:relative; width:100%; height:100%;
  overflow:hidden; border-radius:20px; z-index:1;
}
.carousel-img {
  position:absolute; inset:0; width:95%; height:95%;
  object-fit:contain; background:#f8fafc;
  opacity:0; transition:opacity 1s ease-in-out; z-index:1;
}
.carousel-img.active { opacity:1; }

/* Floating badges */
.hero-float {
  position:absolute; z-index:10;
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.4); box-shadow:0 10px 25px rgba(0,0,0,.1);
  border-radius:14px; padding:12px 16px;
  display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600;
  animation:floaty 4s ease-in-out infinite;
}
.hero-float-1 { top:20px; right:-30px; }
.hero-float-2 { bottom:40px; left:-30px; animation-delay:2s; }
.hero-float-3 { top:50%; right:-40px; animation-delay:4s; }
.hero-float-label { font-size:12px; color:var(--gray-400); }
.hero-float-icon {
  width:36px; height:36px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.float-green { background:var(--green-100); }
.float-peach { background:var(--peach); }
.float-lavender { background:var(--lavender); }

@keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

/* ── PARTNERS ───────────────────────────────── */
.partners {
  padding:60px 0; background:var(--gray-50);
  border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200);
}
.partners-inner { text-align:center; max-width:1100px; margin:0 auto; }
.partners-label {
  font-size:12px; color:var(--gray-600); font-weight:600;
  margin-bottom:32px; letter-spacing:.15em; text-transform:uppercase;
}
.partners-grid { display:flex; justify-content:center; align-items:stretch; gap:16px; flex-wrap:wrap; }
.partner-badge {
  background:var(--white); border:1px solid var(--gray-200); border-radius:14px;
  padding:20px 28px; display:flex; flex-direction:column; align-items:center; gap:12px;
  width:170px; min-height:120px; justify-content:center;
  transition:box-shadow .2s,transform .2s;
}
.partner-badge:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.partner-badge-img {
  height:38px; display:flex; align-items:center; justify-content:center;
}
.partner-badge-img img { max-height:38px; max-width:110px; object-fit:contain; }
.partner-badge-text {
  font-size:10px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#0a6e5a; text-align:center;
}

/* ── TICKER ─────────────────────────────────── */
.ticker { padding:48px 0; background:var(--white); overflow:hidden; }
.ticker-label {
  text-align:center; font-size:13px; color:var(--gray-600);
  font-weight:500; margin-bottom:24px; letter-spacing:1px; text-transform:uppercase;
}
.ticker-row { display:flex; overflow:hidden; position:relative; margin-bottom:12px; }
.ticker-row::before,.ticker-row::after {
  content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2;
}
.ticker-row::before { left:0; background:linear-gradient(to right,var(--white),transparent); }
.ticker-row::after { right:0; background:linear-gradient(to left,var(--white),transparent); }
.ticker-track {
  display:flex; gap:32px; align-items:center;
  animation:ticker-scroll 40s linear infinite; white-space:nowrap;
}
.ticker-row-reverse .ticker-track { animation-direction:reverse; }
.ticker-item {
  flex-shrink:0; padding:10px 20px;
  background:var(--gray-50); border:1px solid var(--gray-200);
  border-radius:var(--radius-full); font-size:13px; font-weight:600;
  color:var(--gray-600); display:flex; align-items:center; gap:8px; transition:all .3s;
}
.ticker-item:hover { background:var(--green-50); border-color:var(--green-400); color:var(--green-700); }
.ticker-logo { width:20px; height:20px; border-radius:4px; object-fit:contain; flex-shrink:0; }
.ticker-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
@keyframes ticker-scroll { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }

/* ── MID CTA ────────────────────────────────── */
.mid-cta {
  padding:48px 0; text-align:center;
  background:var(--green-50); border-top:1px solid var(--green-100); border-bottom:1px solid var(--green-100);
}
.mid-cta p { font-size:18px; font-weight:600; color:var(--dark); margin-bottom:16px; text-align: center !important; }

/* ── WHAT WE DO ─────────────────────────────── */
.what-we-do { background:var(--white); }
.what-we-do .section-label { color:var(--green-700); }
.wwd-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.wwd-card {
  background:var(--white); border:1px solid var(--gray-200);
  border-radius:var(--radius-lg); padding:32px;
  transition:all .35s; position:relative; overflow:hidden;
}
.wwd-card::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:4px; background:var(--green-600); opacity:0; transition:opacity .3s;
}
.wwd-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-card-hover); border-color:var(--green-400); }
.wwd-card:hover::before { opacity:1; }
.wwd-icon { width:56px; height:56px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:20px; }
.wwd-card h3 { font-size:20px; font-weight:700; margin-bottom:10px; }
.wwd-card p { font-size:14px; color:var(--gray-500); line-height:1.7; margin-bottom:16px; }
.wwd-link { font-size:13px; font-weight:700; color:var(--green-700); display:inline-flex; align-items:center; gap:6px; }
.wwd-link span { transition:transform .25s; }
.wwd-card:hover .wwd-link span { transform:translateX(4px); }
.wwd-card-ai .wwd-icon { background:var(--lavender); }
.wwd-card-voice .wwd-icon { background:var(--peach); }
.wwd-card-chatbot .wwd-icon { background:var(--sky); }
.wwd-card-make .wwd-icon { background:var(--mint); }
.wwd-card-n8n .wwd-icon { background:var(--rose); }
.wwd-card-integrate .wwd-icon { background:var(--amber); }

/* ── PROCESS ────────────────────────────────── */
.process { background:var(--dark); color:var(--white); overflow:hidden; position:relative; }
.process::before {
  content:''; position:absolute; top:0; right:0; width:500px; height:500px;
  border-radius:50%; background:radial-gradient(circle,rgba(34,164,71,.08),transparent 70%);
}
.process .section-label { color:var(--green-400); }
.process .section-title { color:var(--white); }
.process .section-desc { color:var(--gray-400); max-width:840px; }
.process-content { margin-top:60px; }
.process-video {
  width:100%; max-width:800px; margin:0 auto 60px;
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),var(--shadow-xl);
}
.process-video-placeholder {
  width:100%; height:420px;
  background:linear-gradient(135deg,var(--dark-800),var(--dark-700));
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:16px; text-align:center; padding:40px;
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-lg);
}
.play-btn {
  width:72px; height:72px; border-radius:50%;
  background:var(--green-600); display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 12px rgba(34,164,71,.15); transition:all .3s;
}
.play-btn:hover { transform:scale(1.1); box-shadow:0 0 0 16px rgba(34,164,71,.2); }
.play-btn svg { fill:white; width:28px; height:28px; margin-left:4px; }
.process-video-placeholder p { color:var(--gray-400); font-size:14px; }
.process-video-placeholder strong { color:var(--white); font-size:16px; }
.process-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.process-step {
  text-align:center; padding:32px 24px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-lg); transition:all .3s;
}
.process-step:hover { background:rgba(255,255,255,.06); }
.step-num { font-family:var(--font-display); font-size:48px; font-weight:800; color:rgba(34,164,71,.2); margin-bottom:12px; }
.process-step h3 { font-size:18px; font-weight:700; margin-bottom:8px; }
.process-step p { font-size:14px; color:var(--gray-400); line-height:1.6; }
.step-time {
  display:inline-block; margin-top:12px;
  font-size:12px; font-weight:700; color:var(--green-400);
  background:rgba(34,164,71,.1); padding:4px 12px; border-radius:var(--radius-full);
}

/* ── STATS ──────────────────────────────────── */
.stats {
  background:linear-gradient(135deg,var(--green-700) 0%,var(--green-900) 100%);
  padding:64px 0; color:var(--white);
}
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:center; }
.stat-item { position:relative; }
.stat-item:not(:last-child)::after {
  content:''; position:absolute; right:-16px; top:10%;
  height:80%; width:1px; background:rgba(255,255,255,.15);
}
.stat-num { font-family:var(--font-display); font-size:52px; font-weight:800; line-height:1; }
.stat-suffix { font-size:24px; font-weight:600; }
.stat-label { font-size:14px; color:rgba(255,255,255,.7); margin-top:8px; }

/* ── CASE STUDIES ───────────────────────────── */
.cases { background:var(--gray-50); }
.cases .section-label { color:var(--green-700); }
.cases-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.case-card {
  background:var(--white); border:1px solid var(--gray-200);
  border-radius:var(--radius-lg); overflow:hidden; transition:all .35s;
}
.case-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-card-hover); }
.case-img { width:100%; height:200px; position:relative; overflow:hidden; }
.case-img img { width:100%; height:100%; object-fit:cover; }
.case-img-placeholder {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:4px; font-size:13px; color:var(--gray-400); text-align:center; padding:16px;
}
.case-tag {
  position:absolute; top:12px; left:12px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  padding:4px 10px; border-radius:var(--radius-full); background:var(--white);
}
.case-tag.peach { color:var(--peach-deep); }
.case-tag.lavender { color:var(--lavender-deep); }
.case-tag.sky { color:var(--sky-deep); }
.case-body { padding:24px; }
.case-body h3 { font-size:18px; font-weight:700; margin-bottom:10px; line-height:1.3; }
.case-body p { font-size:14px; color:var(--gray-500); margin-bottom:16px; line-height:1.6; }
.case-results { display:flex; gap:24px; padding-top:16px; border-top:1px solid var(--gray-200); }
.case-result-num { font-family:var(--font-display); font-size:24px; font-weight:800; color:var(--green-700); }
.case-result-label { font-size:12px; color:var(--gray-600); }
.case-bg-peach { background:linear-gradient(135deg,var(--peach),#ffd6b3); }
.case-bg-lavender { background:linear-gradient(135deg,var(--lavender),#d0bfff); }
.case-bg-sky { background:linear-gradient(135deg,var(--sky),#b3d4fc); }

/* ── INDUSTRIES ─────────────────────────────── */
.industries { background:var(--white); }
.industries .section-label { color:var(--green-700); }
.ind-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px; }
.ind-card {
  padding:28px; border-radius:var(--radius-md); border:1px solid var(--gray-200);
  background:var(--white); transition:all .3s; display:flex; align-items:flex-start; gap:16px;
}
.ind-card:hover { border-color:var(--green-400); box-shadow:var(--shadow-sm); }
.ind-icon {
  width:48px; height:48px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0;
}
.ind-icon.sky-bg { background:var(--sky); } .ind-icon.peach-bg { background:var(--peach); }
.ind-icon.lavender-bg { background:var(--lavender); } .ind-icon.mint-bg { background:var(--mint); }
.ind-icon.amber-bg { background:var(--amber); } .ind-icon.rose-bg { background:var(--rose); }
.ind-card h3 { font-size:16px; font-weight:700; margin-bottom:6px; }
.ind-card p { font-size:13px; color:var(--gray-500); line-height:1.5; }

/* ── TESTIMONIALS ───────────────────────────── */
.testimonials { background:var(--gray-50); position:relative; }
.testimonials .section-label { color:var(--green-700); }
.testimonials::before {
  content:'"'; position:absolute; top:40px; right:60px;
  font-size:300px; font-family:Georgia,serif; color:var(--gray-200); opacity:.3; line-height:1;
  pointer-events:none; overflow:hidden; max-width:100%;
}
.test-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.test-card {
  background:var(--white); border:1px solid var(--gray-200);
  border-radius:var(--radius-lg); padding:28px; transition:all .3s;
}
.test-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.test-video { width:100%; aspect-ratio:16/9; border-radius:var(--radius-sm); overflow:hidden; margin-bottom:16px; background:var(--gray-100); }
.test-video img { width:100%; height:100%; object-fit:cover; border-radius:var(--radius-sm); }
.test-avatar-img { width:42px; height:42px; border-radius:50%; object-fit:cover; border:2px solid var(--gray-200); }
.test-stars { color:var(--amber-deep); font-size:14px; margin-bottom:12px; letter-spacing:2px; }
.test-quote { font-size:14px; color:var(--gray-600); line-height:1.7; margin-bottom:20px; font-style:italic; }
.test-author { display:flex; align-items:center; gap:12px; }
.test-name { font-weight:700; font-size:14px; }
.test-role { font-size:12px; color:var(--gray-500); }
.test-source {
  position:absolute; top:16px; right:16px;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  padding:3px 8px; border-radius:var(--radius-full); background:var(--gray-100); color:var(--gray-600);
}

/* Review badges */
.reviews-badge {
  margin-top:60px; display:flex; justify-content:center; align-items:center; gap:24px; flex-wrap:wrap;
}
.review-platform {
  display:flex; align-items:center; gap:16px; padding:20px 24px;
  background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg);
  min-width:240px;
}
.review-logo { width:48px; height:48px; object-fit:contain; border-radius:4px; flex-shrink:0; }
.rp-info { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.rp-score { font-family:var(--font-display); font-size:20px; font-weight:800; color:var(--green-700); line-height:1; }
.rp-stars { color:var(--amber-deep); font-size:13px; letter-spacing:1px; }
.rp-sub { font-size:12px; color:var(--gray-500); font-weight:500; }
.rp-label { font-size:13px; font-weight:600; color:var(--gray-600); margin-left:auto; white-space:nowrap; }

/* Review collage */
.review-collage-wrapper { margin-top:60px; padding-bottom:8px; }
.review-collage-header { text-align:center; margin-bottom:32px; }
.review-collage-header h3 { font-size:28px; font-weight:700; margin-bottom:8px; }
.review-collage-header p { font-size:15px; color:var(--gray-400); }
.review-collage {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  align-items:start;
}
.rc-card {
  background:var(--white); border:1px solid var(--gray-200);
  border-radius:var(--radius-md); padding:20px; transition:all .3s;
}
.rc-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.rc-google { border-left:3px solid #4285f4; }
.rc-upwork { border-left:3px solid #6fda44; }
.rc-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.rc-avatar {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--white);
}
.rc-av-1{background:#4285f4} .rc-av-2{background:#ea4335} .rc-av-3{background:#fbbc04;color:var(--dark)}
.rc-av-4{background:#34a853} .rc-av-5{background:#8b5cf6} .rc-av-6{background:#6fda44}
.rc-av-7{background:#f97316} .rc-av-8{background:#ec4899} .rc-av-9{background:#14b8a6}
.rc-av-10{background:#6366f1}
.rc-name { font-weight:700; font-size:14px; line-height:1.2; }
.rc-meta { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--gray-500); margin-top:2px; }
.rc-source-logo { width:14px; height:14px; object-fit:contain; border-radius:2px; }
.rc-stars { color:#b45309; font-size:12px; letter-spacing:1px; margin-left:auto; flex-shrink:0; }
.rc-text { font-size:13px; color:var(--gray-600); line-height:1.65; font-style:italic; }
.review-collage-footer {
  text-align:center; margin-top:32px;
  display:flex; justify-content:center; gap:16px; flex-wrap:wrap;
}

/* ── CONSULTATION FORM ──────────────────────── */
.consult {
  background:linear-gradient(150deg,var(--dark) 0%,#0d2818 50%,var(--dark) 100%);
  color:var(--white); position:relative; overflow:hidden;
}
.consult::before {
  content:''; position:absolute; top:-200px; right:-200px; width:600px; height:600px;
  border-radius:50%; background:radial-gradient(circle,rgba(34,164,71,.08),transparent 70%);
}
.consult::after {
  content:''; position:absolute; bottom:-150px; left:-100px; width:400px; height:400px;
  border-radius:50%; background:radial-gradient(circle,rgba(245,158,11,.06),transparent 70%);
}
.consult-inner {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;
}
.consult-left h2 { font-size:40px; font-weight:800; margin-bottom:16px; }
.consult-left h2 .highlight-amber { color:var(--amber-deep); }
.consult-left p { color:rgba(255,255,255,.6); font-size:16px; line-height:1.7; margin-bottom:32px; }
.consult-benefits { list-style:none; display:flex; flex-direction:column; gap:14px; }
.consult-benefits li { display:flex; align-items:center; gap:12px; font-size:15px; color:rgba(255,255,255,.8); }
.consult-check {
  width:26px; height:26px; border-radius:50%;
  background:rgba(34,164,71,.15); color:var(--green-400);
  display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0;
}
.consult-urgency {
  margin-top:32px; padding:16px 20px;
  background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.2);
  border-radius:var(--radius-md); font-size:14px; color:var(--amber-deep);
  display:flex; align-items:center; gap:10px;
}
.form-card {
  background:var(--white); border-radius:var(--radius-xl); padding:40px;
  box-shadow:var(--shadow-xl); color:var(--dark);
}
.form-card h3 { font-size:24px; font-weight:800; text-align:center; margin-bottom:4px; }
.form-card-sub { text-align:center; font-size:14px; color:var(--gray-400); margin-bottom:28px; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.form-group input,.form-group select,.form-group textarea {
  width:100%; padding:12px 14px; border:1.5px solid var(--gray-200);
  border-radius:var(--radius-sm); font-size:16px; font-family:var(--font-body);
  transition:all .2s; background:var(--white);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus {
  outline:none; border-color:var(--green-600); box-shadow:0 0 0 3px rgba(34,164,71,.1);
}
.form-group textarea { resize:vertical; min-height:80px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-submit {
  width:100%; padding:16px; background:var(--green-700); color:var(--white);
  border:none; border-radius:var(--radius-sm); font-size:16px; font-weight:700;
  font-family:var(--font-display); cursor:pointer; transition:all .25s; margin-top:8px;
}
.form-submit:hover { background:var(--green-800); transform:translateY(-2px); box-shadow:var(--shadow-green); }
.form-note { text-align:center; font-size:12px; color:var(--gray-500); margin-top:14px; }
.form-hidden { display:none; }

/* ── FAQ ────────────────────────────────────── */
.faq { background:var(--white); }
.faq .section-label { color:var(--green-700); }
.faq-inner { max-width:800px; margin:48px auto 0; }
.faq-item { border-bottom:1px solid var(--gray-200); }
.faq-q {
  padding:20px 0; cursor:pointer; display:flex;
  justify-content:space-between; align-items:center;
  font-family:var(--font-display); font-weight:600; font-size:17px;
  color:var(--dark); background:none; border:none; width:100%; text-align:left; line-height:1.4;
}
.faq-q:hover { color:var(--green-700); }
.faq-arrow {
  width:28px; height:28px; border-radius:50%; background:var(--gray-100);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:all .3s; font-size:14px; color:var(--gray-500);
}
.faq-item.active .faq-arrow { background:var(--green-100); color:var(--green-700); transform:rotate(180deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq-a-inner { padding:0 0 20px; font-size:15px; color:var(--gray-500); line-height:1.7; }
.faq-a-inner p { margin-bottom:12px; }
.faq-a-inner p:last-child { margin-bottom:0; }
.faq-a-inner ul { padding-left:20px; margin-bottom:12px; }
.faq-a-inner ul li { margin-bottom:6px; }
.faq-a-inner strong { color:var(--dark); font-weight:700; }
.faq-item.active .faq-a { max-height:1200px; }
 p {
  text-align: justify;
}

/* ── FOOTER ─────────────────────────────────── */
.footer { background:var(--dark); color:rgba(255,255,255,.5); padding:64px 0 32px; }
.footer-grid {
  display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px;
}
.footer-brand p { font-size:14px; line-height:1.7; margin-top:16px; max-width:300px; }
.footer-col h4, .footer-col-title {
  font-family:var(--font-body); font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; color:rgba(255,255,255,.5); margin-bottom:16px;
}
.footer-col a { display:block; font-size:14px; color:rgba(255,255,255,.6); margin-bottom:10px; transition:color .2s; }
.footer-col a:hover { color:var(--green-400); }
.footer-bottom {
  padding-top:32px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; flex-wrap:wrap; gap:16px;
}
.footer-bottom a { color:rgba(255,255,255,.4); margin-left:16px; }
.footer-bottom a:hover { color:rgba(255,255,255,.8); }
.footer-logo { font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--white); }

/* ── YOUTUBE FACADE ─────────────────────────── */
.yt-facade {
  position:relative; cursor:pointer; width:100%; height:100%;
  min-height:200px; background:var(--gray-100); overflow:hidden;
}
.yt-facade picture,.yt-facade img { display:block; width:100%; height:100%; }
.yt-facade-play {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); opacity:.85; transition:opacity .2s;
}
.yt-facade:hover .yt-facade-play { opacity:1; }
.yt-facade:focus-visible { outline:3px solid var(--green-600); outline-offset:2px; }

/* ── CASE STUDY PAGES ───────────────────────── */
/* cs-hero handles its own nav offset via padding-top */

.cs-hero { padding:calc(var(--nav-h) + 30px) 0 60px; position:relative; overflow:hidden; }
.cs-hero-bg { position:absolute; inset:0; background:var(--cs-gradient); z-index:0; }
.cs-hero-bg::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:28px 28px; opacity:.5;
}
.cs-hero-bg-shape1 { position:absolute; top:-100px; right:-100px; width:500px; height:500px; border-radius:50%; background:rgba(249,115,22,.08); filter:blur(80px); }
.cs-hero-bg-shape2 { position:absolute; bottom:-80px; left:-120px; width:400px; height:400px; border-radius:50%; background:rgba(232,89,12,.05); filter:blur(60px); }
.cs-hero-inner { position:relative; z-index:2; }
.cs-breadcrumb { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--gray-500); margin-bottom:24px; }
.cs-breadcrumb a { color:var(--cs-accent); font-weight:600; }
.cs-breadcrumb a:hover { text-decoration:underline; }
.cs-hero-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.cs-tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:5px 14px; border-radius:var(--radius-full); background:var(--white); color:var(--cs-accent); border:1px solid rgba(232,89,12,.15); }
.cs-hero h1 { font-size:clamp(36px,4.5vw,52px); font-weight:800; color:var(--dark); margin-bottom:16px; max-width:800px; }
.cs-hero-sub { font-size:20px; color:var(--gray-600); max-width:680px; line-height:1.7; margin-bottom:32px; }
.cs-hero-logos { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:40px; }
.cs-hero-logo { height:36px; padding:6px 14px; background:var(--white); border-radius:var(--radius-sm); border:1px solid var(--gray-200); display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--gray-600); box-shadow:var(--shadow-sm); }
.cs-hero-logo img { height:20px; width:auto; }
.cs-hero-media { margin-top:48px; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-xl); border:4px solid var(--white); background:var(--dark); }
.cs-hero-media iframe { width:100%; height:520px; border:none; display:block; }

.cs-results { padding:48px 0; background:var(--dark); color:var(--white); }
.cs-results-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:center; }
.cs-result-item { position:relative; }
.cs-result-item:not(:last-child)::after { content:''; position:absolute; right:-16px; top:10%; height:80%; width:1px; background:rgba(255,255,255,.1); }
.cs-result-num { font-family:var(--font-display); font-size:44px; font-weight:800; color:#fed7aa; }
.cs-result-label { font-size:14px; color:rgba(255,255,255,.6); margin-top:4px; }

.cs-content { padding:80px 0; }
.cs-content-inner { display:grid; grid-template-columns:1fr 320px; gap:60px; align-items:start; }
.cs-article h2 { font-size:28px; font-weight:800; margin:48px 0 16px; }
.cs-article h2:first-child { margin-top:0; }
.cs-article h3 { font-size:20px; font-weight:700; margin:32px 0 12px; }
.cs-article p { font-size:16px; color:var(--gray-600); line-height:1.8; margin-bottom:16px; }
.cs-article ul,.cs-article ol { margin:12px 0 20px 24px; color:var(--gray-600); }
.cs-article li { margin-bottom:10px; font-size:15px; line-height:1.7; }
.cs-article strong { color:var(--dark); }
.cs-img-block { margin:32px 0; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--gray-200); box-shadow:var(--shadow-sm); }
.cs-img-block img { width:100%; height:auto; display:block; }
.cs-img-caption { padding:12px 16px; background:var(--gray-50); font-size:13px; color:var(--gray-400); text-align:center; border-top:1px solid var(--gray-200); }
.cs-highlight { margin:32px 0; padding:24px 28px; border-radius:var(--radius-lg); border-left:4px solid var(--cs-accent); background:var(--cs-accent-pale); }
.cs-highlight p { color:var(--dark); font-weight:500; margin-bottom:0; }

.cs-features { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:32px 0; }
.cs-feature { padding:20px; background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius-md); transition:all .3s; }
.cs-feature:hover { border-color:var(--cs-accent); box-shadow:var(--shadow-sm); }
.cs-feature-icon { font-size:24px; margin-bottom:8px; }
.cs-feature h4 { font-size:15px; font-weight:700; margin-bottom:4px; }
.cs-feature p { font-size:13px; color:var(--gray-500); line-height:1.5; margin-bottom:0; }

.cs-sidebar { position:sticky; top:calc(var(--nav-h) + 24px); }
.cs-sidebar-card { background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:28px; margin-bottom:20px; }
.cs-sidebar-card h4 { font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--gray-400); margin-bottom:16px; }
.cs-sidebar-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--gray-200); font-size:14px; }
.cs-sidebar-row:last-child { border-bottom:none; }
.cs-sidebar-label { color:var(--gray-400); font-weight:500; }
.cs-sidebar-value { color:var(--dark); font-weight:700; }
.cs-sidebar-tools { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.cs-tool-tag { font-size:12px; font-weight:600; padding:5px 12px; border-radius:var(--radius-full); background:var(--white); border:1px solid var(--gray-200); color:var(--gray-600); display:flex; align-items:center; gap:6px; }
.cs-tool-tag img { width:14px; height:14px; }
.cs-sidebar-cta { background:var(--cs-accent); color:var(--white); border-radius:var(--radius-lg); padding:28px; text-align:center; }
.cs-sidebar-cta h4 { color:var(--white); text-transform:none; letter-spacing:0; font-size:18px; font-weight:700; margin-bottom:8px; }
.cs-sidebar-cta p { font-size:14px; color:rgba(255,255,255,.7); margin-bottom:20px; }
.cs-sidebar-cta .btn { width:100%; justify-content:center; }

.cs-bottom-cta { padding:80px 0; background:var(--cs-gradient); text-align:center; position:relative; overflow:hidden; }
.cs-bottom-cta::before { content:''; position:absolute; top:-100px; right:-100px; width:400px; height:400px; border-radius:50%; background:rgba(249,115,22,.08); filter:blur(80px); }
.cs-bottom-cta h2 { font-size:36px; font-weight:800; margin-bottom:12px; }
.cs-bottom-cta p { font-size:18px; color:var(--gray-600); margin-bottom:32px; max-width:520px; margin-left:auto; margin-right:auto; }

.cs-more { padding:64px 0; background:var(--white); }
.cs-more h2 { text-align:center; font-size:28px; font-weight:800; margin-bottom:40px; }
.cs-more-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cs-more-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); overflow:hidden; transition:all .35s; text-decoration:none; color:var(--dark); display:block; }
.cs-more-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-card-hover); }
.cs-more-card-img { height:140px; display:flex; align-items:center; justify-content:center; font-size:12px; color:rgba(255,255,255,.8); font-weight:600; }
.cs-more-card-body { padding:20px; }
.cs-more-card-body h3 { font-size:16px; font-weight:700; margin-bottom:4px; line-height:1.3; }
.cs-more-card-body p { font-size:13px; color:var(--gray-500); }
.cs-more-link { font-size:12px; font-weight:700; color:var(--cs-accent); margin-top:8px; display:inline-block; }

/* ── RESPONSIVE ─────────────────────────────── */

/* Tablet landscape */
@media (max-width:1024px) {
  .nav-links { display:none; }
  .nav-mobile-toggle { display:flex; }
  .nav-right { display:none; }
  .hero-inner { grid-template-columns:1fr; }
  .hero-visual { display:none; }
  .wwd-grid { grid-template-columns:repeat(2,1fr); }
  .process-steps { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:24px; }
  .cases-grid { grid-template-columns:1fr; }
  .test-grid { grid-template-columns:1fr; }
  .consult-inner { grid-template-columns:1fr; }
  .ind-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .review-collage { grid-template-columns:repeat(2,1fr); }
  .cs-content-inner { grid-template-columns:1fr; }
  .cs-sidebar { position:static; top:auto; }
  .cs-results-grid { grid-template-columns:repeat(2,1fr); }
  .cs-more-grid { grid-template-columns:1fr; }
  .cs-features { grid-template-columns:1fr; }
}

/* Mobile */
@media (max-width:768px) {
  :root { --nav-h:60px; }

  /* Nav mobile menu */
  .nav-links {
    position:fixed; top:var(--nav-h); left:0; right:0;
    background:rgba(255,255,255,.98); backdrop-filter:blur(16px);
    flex-direction:column; padding:16px 20px 24px; gap:0;
    border-bottom:1px solid var(--gray-200);
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    transform:translateY(-110%); transition:transform .3s ease;
    z-index:999; list-style:none;
  }
  .nav-links.show { transform:translateY(0); display:flex; }
  .nav-links li { border-bottom:1px solid var(--gray-100); }
  .nav-links li:last-child { border-bottom:none; }
  .nav-links a { display:block; padding:14px 0; font-size:16px; font-weight:600; color:var(--dark); }
  .nav-links a::after { display:none; }

  .container { padding:0 16px; }
  .section { padding:64px 0; }
  .section-title { font-size:clamp(24px,6vw,36px); }
  .section-desc { font-size:16px; }

  .hero { padding:calc(var(--nav-h) + 24px) 0 48px; }
  .hero h1 { font-size:clamp(28px,7vw,40px); }
  .hero-desc { font-size:16px; }
  .hero-ctas .btn { width:100%; justify-content:center; max-width:320px; }
  .hero-announce { font-size:12px; padding:6px 12px 6px 8px; }
  .hero-trust { gap:12px; }
  .hero-trust-item { font-size:12px; }

  .partners { padding:40px 0; }
  .partners-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
  .partner-badge { width:auto; min-height:90px; padding:12px 10px; }
  .partner-badge-img { height:28px; }
  .partner-badge-img img { max-height:28px; max-width:80px; }
  .partner-badge-text { font-size:9px; }

  .ticker { padding:28px 0; }
  .ticker-item { font-size:12px; padding:8px 12px; }
  .ticker-logo { width:16px; height:16px; }

  .stats { padding:48px 0; }
  .stats-grid { grid-template-columns:1fr 1fr; gap:24px; }
  .stat-num { font-size:36px; }
  .stat-suffix { font-size:18px; }
  .stat-item:not(:last-child)::after { display:none; }

  .wwd-grid { grid-template-columns:1fr; gap:12px; }
  .wwd-card { padding:24px; }

  .process-video-placeholder { height:220px; }
  .process-step { padding:24px 20px; }
  .step-num { font-size:36px; }

  .cases-grid { grid-template-columns:1fr; gap:14px; }
  .case-img { height:160px; }
  .case-body { padding:18px; }
  .case-body h3 { font-size:16px; }

  .ind-grid { grid-template-columns:1fr; gap:10px; }
  .ind-card { padding:18px; }

  .test-grid { grid-template-columns:1fr; gap:14px; }
  .reviews-badge { flex-direction:column; align-items:center; gap:12px; }
  .review-platform { min-width:auto; width:100%; max-width:320px; }
  .review-collage { grid-template-columns:1fr; }
  .review-collage-header h3 { font-size:22px; }
  .review-collage-footer { flex-direction:column; align-items:center; }
  .review-collage-footer .btn { width:100%; max-width:300px; justify-content:center; }

  .consult-inner { grid-template-columns:1fr; gap:32px; }
  .consult-left h2 { font-size:clamp(24px,6vw,34px); }
  .form-card { padding:24px 20px; }
  .form-card h3 { font-size:20px; }
  .form-row { grid-template-columns:1fr; }

  .mid-cta { padding:36px 0; }
  .mid-cta p { font-size:16px; }

  .btn-group { flex-direction:column; align-items:center; }
  .btn-group .btn { width:100%; max-width:300px; justify-content:center; }

  .footer { padding:40px 0 24px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px; margin-bottom:32px; }
  .footer-brand { grid-column:1 / -1; }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:10px; font-size:12px; }
  .footer-bottom a { margin-left:0; margin-right:12px; }

  .cs-hero { padding:100px 0 40px; }
  .cs-hero h1 { font-size:clamp(26px,6vw,36px); }
  .cs-hero-media iframe { height:240px; }
  .cs-results-grid { grid-template-columns:1fr 1fr; }
  .cs-result-item:not(:last-child)::after { display:none; }
}

@media (max-width:480px) {
  .container { padding:0 14px; }
  .section { padding:48px 0; }
  .partners-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr; gap:20px; }
  .hero-ctas { flex-direction:column; align-items:flex-start; }
}

/* blog folder pages css  */

.blog-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 48px;
        align-items: center;
      }
      .blog-hero-img {
        border-radius: 16px;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
        border: 1px solid #e2e8f0;
        overflow: hidden;
        position: relative;
        min-height: 326px;
      }
      .blog-hero-img img {
        width: 100%;
        height: auto;
        display: block;
      }
      .blog-hero-video-btn {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.35);
        cursor: pointer;
        transition: background 0.2s;
        text-decoration: none;
      }
      .blog-hero-video-btn:hover {
        background: rgba(0, 0, 0, 0.5);
      }
      .blog-hero-video-btn svg {
        width: 64px;
        height: 64px;
        fill: #fff;
        opacity: 0.92;
      }
      .blog-meta-bar {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 20px;
        font-size: 14px;
        color: #475569;
      }
      .blog-meta-bar time {
        font-weight: 600;
        color: #334155;
      }
      .blog-reading-time {
        background: var(--cs-accent);
        color: #fff;
        padding: 3px 10px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 12px;
      }
      .blog-category-tag {
        background: #e2e8f0;
        color: #1e293b;
        padding: 3px 10px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
      }
      .cs-tag {
        background: var(--cs-accent);
        color: #fff;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 600;
        display: inline-block;
      }
      .blog-toc-wrapper {
        background: #fff;
        padding: 32px 0 0;
      }
      .blog-toc-inner {
        max-width: 820px;
        margin: 0 auto;
        padding: 0 24px;
      }
      .blog-toc {
        background: var(--cs-accent-pale);
        border-left: 4px solid var(--cs-accent);
        border-radius: 0 12px 12px 0;
        padding: 20px 24px;
      }
      .blog-toc-title {
        font-size: 12px;
        font-weight: 700;
        color: var(--cs-accent);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin: 0 0 12px;
      }
      .blog-toc ol {
        margin: 0;
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        list-style: decimal;
      }
      .blog-toc ol li a {
        color: #1e293b;
        text-decoration: none;
        font-weight: 500;
        font-size: 15px;
      }
      .blog-toc ol li a:hover {
        color: var(--cs-accent);
        text-decoration: underline;
      }
      .blog-section {
        padding: 52px 0;
      }
      .blog-section--white {
        background: #fff;
      }
      .blog-section--tinted {
        background: var(--cs-accent-pale);
      }
      .blog-section-inner {
        max-width: 820px;
        margin: 0 auto;
        padding: 0 24px;
      }
      .blog-section h2 {
        font-family: "Bricolage Grotesque", sans-serif;
        font-size: clamp(1.35rem, 2.8vw, 1.75rem);
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(0, 0, 0, 0.07);
      }
      .blog-section h3 {
        font-size: clamp(1.05rem, 2vw, 1.2rem);
        font-weight: 700;
        color: #1e293b;
        margin: 28px 0 12px;
      }
      .blog-section p {
        font-size: 16px;
        line-height: 1.82;
        color: #334155;
        margin-bottom: 16px;
      }
      .blog-section ul,
      .blog-section ol {
        padding-left: 24px;
        color: #334155;
        font-size: 16px;
        line-height: 1.82;
        margin-bottom: 16px;
      }
      .blog-section li {
        margin-bottom: 6px;
      }
      .cs-highlight {
        background: var(--cs-accent-pale);
        border-left: 4px solid var(--cs-accent);
        border-radius: 0 8px 8px 0;
        padding: 16px 20px;
        margin: 24px 0;
      }
      .blog-section--tinted .cs-highlight {
        background: #fff;
      }
      .cs-highlight p {
        margin: 0;
        color: #1e293b;
        font-size: 15px;
        line-height: 1.75;
      }
      .cs-img-block {
        border-radius: 12px;
        overflow: hidden;
        margin: 24px 0;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        border: 1px solid #e2e8f0;
      }
      .cs-img-block img {
        width: 100%;
        height: auto;
        display: block;
      }
      .cs-img-caption {
        font-size: 13px;
        color: #475569;
        padding: 10px 16px;
        background: #f8fafc;
        border-top: 1px solid #e2e8f0;
        text-align: center;
      }
      .blog-yt-embed {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        border-radius: 12px;
        margin: 32px 0;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      }
      .blog-yt-facade {
        position: absolute;
        inset: 0;
        cursor: pointer;
        background: #000;
      }
      .blog-yt-facade img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.85;
        display: block;
      }
      .yt-facade , .blog-yt-facade ,.blog-hero-img{
        border: 5px solid;
        border-color: #fff;
      }
      .blog-yt-facade-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 72px;
        height: 72px;
        background: rgba(220, 38, 38, 0.92);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: pointer;
        transition:
          transform 0.2s,
          background 0.2s;
      }
      .blog-yt-facade-btn:hover {
        background: #dc2626;
        transform: translate(-50%, -50%) scale(1.1);
      }
      .blog-yt-facade-btn svg {
        width: 32px;
        height: 32px;
        fill: #fff;
        margin-left: 4px;
      }
      /* Table wrapper — prevents table from breaking out of section */
      .cs-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
      }
      .cs-table-wrapper table {
        width: 100%;
        min-width: 480px;
        border-collapse: collapse;
        font-size: 14px;
      }
      .cs-table-wrapper th,
      .cs-table-wrapper td {
        padding: 12px 14px;
        border: 1px solid #e2e8f0;
        text-align: left;
        vertical-align: top;
        line-height: 1.5;
      }
      .cs-table-wrapper thead th {
        background: var(--cs-accent-pale, #fff7ed);
        font-weight: 700;
        font-size: 13px;
        color: #1e293b;
      }
      .cs-table-wrapper tbody tr:nth-child(even) td {
        background: #f8fafc;
      }

      @media (max-width: 768px) {
        .blog-hero-grid {
          grid-template-columns: 1fr;
          gap: 24px;
        }
        .blog-hero-img {
          min-height: 200px;
        }
        .blog-section {
          padding: 32px 0;
        }
      }

      @media (max-width: 480px) {
        .blog-section-inner {
          padding: 0 16px;
        }
        .blog-toc-inner {
          padding: 0 16px;
        }
        .blog-toc {
          padding: 16px;
        }
        .blog-section h2 {
          font-size: 1.2rem;
          padding-bottom: 10px;
        }
        .blog-section p,
        .blog-section li {
          font-size: 15px;
        }
        .cs-table-wrapper {
          margin: 0 -16px;
          width: calc(100% + 32px);
          border-radius: 0;
        }
        .cs-table-wrapper table {
          font-size: 13px;
        }
        .cs-table-wrapper th,
        .cs-table-wrapper td {
          padding: 10px 10px;
        }
        .blog-meta-bar {
          flex-wrap: wrap;
          gap: 6px;
        }
        .blog-yt-embed {
          margin: 16px 0;
        }
      }

/* end blog css */
.legal-section-title{
  font-size: 28px;
}

.cs-toc{
  border-radius: 0px !important;
}

body.how-to-guides .cs-content { padding:10px 0; }
body.how-to-guides .cs-faq { padding:80px 0; }
.consult-left h2{
  color: #fff !important;
}
/* 
service app css start */

.fio-cd-grid-apps .templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 340px));
  gap: 28px;
  justify-content: start;
  align-items: start;
}

.template-card {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(20, 32, 70, 0.08);
  border: 1px solid rgba(20, 32, 70, 0.06);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  display: flex;
  flex-direction: column;
}

.template-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(20, 32, 70, 0.12);
}

.card-image {
  width: 100%;
  height: 190px;
  overflow: hidden;
  background: #f4f7fb;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.template-card:hover .card-image img {
  transform: scale(1.05);
}

.card-content {
  padding: 24px;
}

.card-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.account-id {
  font-size: 12px;
  font-weight: 700;
  background: #eef2ff;
  color: #4338ca;
  padding: 6px 12px;
  border-radius: 999px;
}

.template-card h3 {
  font-size: 1.05rem;
  line-height: 1.35;
  color: #0f172a;
  margin-bottom: 12px;
  font-weight: 700;
}

.display-title {
  font-size: 0.85rem;
  line-height: 1.7;
  color: #475569;
  /* margin-bottom: 18px; */
  min-height: 72px;
}

.apps-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.app-badge {
  background: #eff6ff;
  color: #2563eb;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
}

.card-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.card-actions a {
  flex: 1;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 16px;
  border-radius: 14px;
  transition: all 0.25s ease;
}

.card-actions a:first-child {
  background: var(--green-700);
  color: #fff;
}

.card-actions a:first-child:hover {
  transform: translateY(-2px);
}

.card-actions a:last-child {
  background: #f8fafc;
  color: #0f172a;
  border: 1px solid #dbe3ec;
}

.card-actions a:last-child:hover {
  background: #eef2f7;
}

.no-templates {
  text-align: center;
  padding: 50px 20px;
  border: 1px dashed #cbd5e1;
  border-radius: 18px;
  background: #f8fafc;
}

.no-templates h3 {
  margin-bottom: 10px;
  color: #0f172a;
}

.no-templates p {
  color: #475569;
}

@media (max-width: 768px) {
  .card-image {
    height: 200px;
  }

  .template-card h3 {
    font-size: 20px;
  }

  .display-title {
    min-height: auto;
  }
}

.show-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

.show-more-btn {
  background: var(--green-700);
  color: #fff;
  border: none;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 10px 24px rgba(23, 92, 211, 0.22);
}

.show-more-btn:hover {
  background: var(--green-700);
  transform: translateY(-2px);
}

.show-more-btn:active {
  transform: translateY(0);
}

/* service app css end  */

#csh-load-more {
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 999px; /* pill shape */
  border: none;
  cursor: pointer;

  background: #1f7a3e; /* your green */
  color: #fff;

  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  transition: all 0.25s ease;
}

/* Hover effect */
#csh-load-more:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
  background: #176532;
}

/* Click effect */
#csh-load-more:active {
  transform: scale(0.97);
}

/* Hide smoothly when no more cards */
#csh-load-more[style*="display: none"] {
  opacity: 0;
  pointer-events: none;
}
.csh-load-more-wrap {
  display: flex;
  justify-content: center;   /* ✅ center horizontally */
  align-items: center;
  margin-top: 40px;
  margin-bottom: 20px;
}



/* CASE STUDY PAGE CSS START */




/* ───────────────────────────────────────────────────────────
   HUB PAGE — Custom Variables & Components (csh-*)
─────────────────────────────────────────────────────────── */

:root {
  --hub-accent: #1a6e30;
  --hub-accent-light: #22a447;
  --hub-radius: 16px;
  --hub-shadow: 0 2px 12px rgba(0,0,0,0.06);
  --hub-shadow-hover: 0 8px 32px rgba(0,0,0,0.10);
}

/* ── Hero ── */
.csh-hero {
  padding: calc(var(--nav-h, 72px) + 30px) 0 48px;
  background: linear-gradient(165deg, #f0faf3 0%, #f8fffe 40%, #fff 100%);
  position: relative;
  overflow: hidden;
}
.csh-hero::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -80px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(26,110,48,0.04) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.csh-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hub-accent);
  margin-bottom: 16px;
}
.csh-hero-label::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 3px;
  background: var(--hub-accent);
  border-radius: 2px;
}
.csh-hero h1 {
  font-family: 'Bricolage Grotesque', serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.12;
  color: #0f1117;
  margin-bottom: 16px;
  letter-spacing: -0.03em;
}
.csh-hero-sub {
  font-size: 1.1rem;
  color: #4b5563;
  line-height: 1.7;
  max-width: 640px;
  margin-bottom: 32px;
}
.csh-hero-stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.csh-stat {
  text-align: left;
}
.csh-stat-num {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--hub-accent);
  line-height: 1;
}
.csh-stat-num span {
  font-size: 1.2rem;
  font-weight: 600;
}
.csh-stat-label {
  font-size: 0.82rem;
  color: #6b7280;
  margin-top: 4px;
  font-weight: 500;
}

/* ── Filter Bar ── */
.csh-filters {
  padding: 20px 0;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 90;
  transition: box-shadow 0.3s;
}
.csh-filters.scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.csh-filters-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.csh-filter-count {
  font-size: 0.85rem;
  color: #6b7280;
  margin-left: auto;
  white-space: nowrap;
  font-weight: 500;
}
.csh-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.csh-pill:hover {
  border-color: var(--hub-accent);
  color: var(--hub-accent);
  background: #f0faf3;
}
.csh-pill.active {
  background: var(--hub-accent);
  color: #fff;
  border-color: var(--hub-accent);
}

/* ── Card Grid ── */
.csh-grid-section {
  padding: 48px 0 64px;
  background: #f9fafb;
  min-height: 60vh;
}
.csh-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.csh-empty {
  display: none;
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 24px;
}
.csh-empty h3 {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}
.csh-empty p {
  color: #6b7280;
  margin-bottom: 20px;
}
.csh-empty button {
  background: var(--hub-accent);
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

/* ── Individual Card ── */
.csh-card {
  background: #fff;
  border-radius: var(--hub-radius);
  overflow: hidden;
  box-shadow: var(--hub-shadow);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  border: 1px solid #f0f0f0;
}
.csh-card:hover {
  box-shadow: var(--hub-shadow-hover);
  transform: translateY(-4px);
}
.csh-card[data-href] {
  cursor: pointer;
}
.csh-card-banner {
  height: 180px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.csh-card-banner-placeholder {
  font-size: 3rem;
  opacity: 0.4;
}
.csh-card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.92);
  color: #1e293b;
  backdrop-filter: blur(4px);
}
.csh-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.csh-card-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f1117;
  line-height: 1.3;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.csh-card-desc {
  font-size: 0.85rem;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.csh-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid #f3f4f6;
  gap: 8px;
}
.csh-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #6b7280;
}
.csh-card-meta svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.csh-card-roi {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--hub-accent);
  white-space: nowrap;
}
.csh-card-roi svg {
  width: 14px;
  height: 14px;
}
.csh-card-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--hub-accent);
  display: none;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.csh-card[data-href] .csh-card-link {
  display: inline-flex;
}
.csh-card-link svg {
  width: 12px;
  height: 12px;
}

/* ── Bottom CTA ── */
.csh-cta {
  padding: 80px 0;
  background: linear-gradient(135deg, #f0faf3 0%, #dcf5e3 50%, #ecfdf5 100%);
  text-align: center;
  position: relative;
}
.csh-cta h2 {
  font-family: 'Bricolage Grotesque', serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  color: #0f1117;
  margin-bottom: 12px;
}
.csh-cta p {
  color: #4b5563;
  font-size: 1.05rem;
  margin-bottom: 28px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.csh-cta .btn-group {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.csh-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--hub-accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.25s;
}
.csh-btn-primary:hover {
  background: #145a27;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26,110,48,0.18);
}
.csh-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: #fff;
  color: #374151;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 9999px;
  text-decoration: none;
  border: 1.5px solid #d1d5db;
  transition: all 0.25s;
}
.csh-btn-outline:hover {
  border-color: var(--hub-accent);
  color: var(--hub-accent);
}

/* ── Hub FAQ ── */
.csh-faq {
  padding: 72px 0;
  background: #fff;
}
.csh-faq h2 {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: #0f1117;
  margin-bottom: 32px;
  text-align: center;
}
.csh-faq-item {
  border-bottom: 1px solid #e5e7eb;
  max-width: 780px;
  margin: 0 auto;
}
.csh-faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  background: none;
  border: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  text-align: left;
  gap: 16px;
  min-height: 44px;
}
.csh-faq-q:hover { color: var(--hub-accent); }
.csh-faq-icon {
  font-size: 1.4rem;
  font-weight: 300;
  color: #9ca3af;
  flex-shrink: 0;
  transition: transform 0.3s;
}
.csh-faq-item.open .csh-faq-icon {
  transform: rotate(45deg);
  color: var(--hub-accent);
}
.csh-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.csh-faq-item.open .csh-faq-a {
  max-height: 500px;
}
.csh-faq-a p {
  padding: 0 0 20px;
  font-size: 0.92rem;
  color: #4b5563;
  line-height: 1.7;
}

/* ── Card Banner Colors (replaces inline style="background:...") ── */
.csh-banner-orange  { background: linear-gradient(135deg,#fff7ed,#fed7aa,#fde8d6); }
.csh-banner-pink    { background: linear-gradient(135deg,#fce7f3,#fbcfe8,#fdf2f8); }
.csh-banner-blue    { background: linear-gradient(135deg,#eff6ff,#bfdbfe,#e0edff); }
.csh-banner-purple  { background: linear-gradient(135deg,#f5f3ff,#ddd6fe,#ede9fe); }
.csh-banner-teal    { background: linear-gradient(135deg,#f0fdfa,#a7f3d0,#ecfdf5); }
.csh-banner-slate   { background: linear-gradient(135deg,#f0f4ff,#c7d7f0,#e8eef8); }
.csh-banner-emerald { background: linear-gradient(135deg,#ecfdf5,#a7f3d0,#d1fae5); }
.csh-banner-indigo  { background: linear-gradient(135deg,#eef2ff,#c7d2fe,#e8ecff); }

/* ── Hub Responsive ── */
@media (max-width: 1024px) {
  .csh-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 768px) {
  .csh-hero { padding: calc(var(--nav-h, 60px) + 20px) 0 36px; }
  .csh-hero-stats { gap: 24px; }
  .csh-filters-inner { gap: 8px; }
  .csh-pill { padding: 7px 14px; font-size: 0.8rem; }
  .csh-filter-count { width: 100%; margin-left: 0; margin-top: 4px; }
  .csh-grid-section { padding: 32px 0 48px; }
}
@media (max-width: 600px) {
  .csh-grid { grid-template-columns: 1fr; gap: 16px; }
  .csh-hero h1 { font-size: 1.7rem; }
  .csh-card-banner { height: 160px; }
}


/* ───────────────────────────────────────────────────────────
   DETAIL PAGES — Page-Specific Accent Variables
   Scope to body class to avoid conflicts between pages
─────────────────────────────────────────────────────────── */

/* Finance & Banking (ai-finance-loan-automation) */
body.page-finance {
  --cs-accent: #1e3a5f;
  --cs-accent-light: #2d5a8e;
  --cs-accent-pale: #dce8f5;
  --cs-gradient: linear-gradient(135deg, #f0f4ff 0%, #c7d7f0 50%, #e8eef8 100%);
}

/* Marketing / Lead Qualification (smart-lead-qualification-ai) */
body.page-lead-qual {
  --cs-accent: #9d174d;
  --cs-accent-light: #db2777;
  --cs-accent-pale: #fce7f3;
  --cs-gradient: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 50%, #fdf2f8 100%);
}


/* ───────────────────────────────────────────────────────────
   FINANCE PAGE — Flow Visualization Styles
   Used in: ai-finance-loan-automation/index.html
─────────────────────────────────────────────────────────── */

.cs-flow-pipeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 2rem 1rem;
  flex-wrap: wrap;
}
.cs-flow-step {
  background: #fff;
  border: 2px solid var(--cs-accent-pale, #dce8f5);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  text-align: center;
  min-width: 130px;
  max-width: 160px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.cs-flow-step.cs-flow-active {
  border-color: var(--cs-accent, #1e3a5f);
  background: var(--cs-accent-pale, #dce8f5);
}
.cs-flow-step-icon { font-size: 1.5rem; margin-bottom: .4rem; }
.cs-flow-step-title { font-weight: 700; font-size: .85rem; color: #1e293b; line-height: 1.3; }
.cs-flow-step-sub { font-size: .72rem; color: #64748b; margin-top: .25rem; line-height: 1.35; }
.cs-flow-connector {
  color: var(--cs-accent, #1e3a5f);
  font-size: 1.4rem;
  padding: 0 .5rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Decision branch row */
.cs-flow-branch {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.cs-flow-branch-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 50px;
}
.cs-flow-branch-label.approved { background: #dcfce7; color: #15803d; }
.cs-flow-branch-label.review   { background: #fef9c3; color: #a16207; }
.cs-flow-branch-wrap { display: flex; align-items: center; gap: 6px; }

/* Flow Outcome boxes */
.cs-flow-outcome-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cs-flow-outcome {
  background: #fff;
  border: 2px solid var(--cs-accent-pale, #dce8f5);
  border-radius: 10px;
  padding: .7rem 1rem;
  text-align: center;
  font-size: .78rem;
  font-weight: 600;
  color: #1e293b;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  min-width: 120px;
}
.cs-flow-outcome.approved { border-color: #86efac; background: #f0fdf4; color: #15803d; }
.cs-flow-outcome.review   { border-color: #fde68a; background: #fffbeb; color: #92400e; }

/* ───────────────────────────────────────────────────────────
   SHARED UTILITIES — Detail Pages
─────────────────────────────────────────────────────────── */

/* Hero tools wrapper */
#cs-hero-tools { display: contents; }

/* YouTube facade image */
.yt-facade img { width: 100%; height: 100%; object-fit: cover; }

/* Sidebar ROI value accent color */
.cs-sidebar-value.accent { color: var(--cs-accent); }

/* Bottom CTA container */
.cs-bottom-cta .container { position: relative; z-index: 2; }

/* ═══════════════════════════════════════════ */
/* FAQ ACCORDION - Detail Pages                */
/* ═══════════════════════════════════════════ */
/* Support BOTH .open (case-studies.js) and .active (global.css) classes */
.faq-item.open .faq-a,
.faq-item.active .faq-a      { max-height: 2000px; }
.faq-item.open .faq-arrow,
.faq-item.active .faq-arrow  { background: var(--cs-accent-pale,#fff0e6); color: var(--cs-accent,#e8590c); transform: rotate(180deg); }
.faq-item.open .faq-q,
.faq-item.active .faq-q      { color: var(--cs-accent,#e8590c); }

/* FAQ layout: polished styling for case study detail pages */
.cs-faq { background: var(--white,#fff); }
/* .cs-faq { background: var(--white,#fff); padding: 50px 50px; } */
.cs-faq h2 {
  text-align: center; font-size: clamp(28px,3vw,38px);
  font-weight: 800; margin-bottom: 8px; color: var(--dark,#0f1117);
}
.cs-faq-subtitle {
  text-align: center; font-size: 16px; color: var(--gray-500,#64748b);
  margin-bottom: 48px;
}
.faq-inner { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--gray-200,#e5e7eb); }
.faq-q {
  padding: 22px 12px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display,'Bricolage Grotesque',serif);
  font-weight: 600; font-size: 17px; color: var(--dark,#0f1117);
  background: none; border: none; width: 100%; text-align: left;
  line-height: 1.4; gap: 16px; transition: color .2s;
}
.faq-q:hover { color: var(--cs-accent,#e8590c); }
.faq-icon { display: none; } /* hide old + icon — replaced by arrow */
.faq-arrow {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--gray-100,#f3f4f6);
  display: flex; align-items: center; justify-content: center;
  transition: all .3s; font-size: 16px; color: var(--gray-500,#6b7280);
}
.faq-a {
  display: block; max-height: 0; overflow: hidden;
  transition: max-height .45s cubic-bezier(.4,0,.2,1);
}
.faq-a-inner {
  padding: 0 24px 24px;
  font-size: 15px; color: var(--gray-600,#4b5563); line-height: 1.75;
}
.faq-a-inner p { margin-bottom:12px; }
.faq-a-inner strong { color: var(--dark,#0f1117); }

/* ═══════════════════════════════════════════ */
/* MEDIA & ASSETS - Detail Pages               */
/* ═══════════════════════════════════════════ */
/* Video/media box with proper 16:9 aspect ratio */
.cs-hero-media {
  margin-top: 48px;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 72px rgba(0,0,0,.22);
  border: 3px solid rgb(255, 255, 255);
  background: #000;
  /* Enforce 16:9 aspect ratio */
  position: relative;
  padding-top: min(56.25%, 484px); /* 16:9, capped at 860×484 */
  height: 0;
}
.cs-hero-media .yt-facade,
.cs-hero-media iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  min-height: unset; /* override global min-height */
}
.cs-hero-media .yt-facade {
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  aspect-ratio: unset; /* override global yt-facade { aspect-ratio: 16/9 } to prevent overflow */
}
.cs-hero-media .yt-facade img,
.cs-hero-media .yt-facade picture {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  position: absolute; inset: 0;
}
/* Play button icon */
.cs-hero-media .yt-facade-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  background: linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,.45) 100%);
  transition: background .3s;
  transform: none; /* override global.css translate(-50%,-50%) which shifts icon to corner */
}
.cs-hero-media .yt-facade:hover .yt-facade-play {
  background: linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.6) 100%);
}
.cs-hero-media .yt-facade-play svg {
  width: 80px; height: 60px;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.6));
  transition: transform .3s;
}
.cs-hero-media .yt-facade:hover .yt-facade-play svg {
  transform: scale(1.15);
}

/* Tool icon badges */
.cs-hero-logo img { border-radius: 4px; object-fit: contain; }
.cs-tool-tag img  { border-radius: 3px; object-fit: contain; }

/* ═══════════════════════════════════════════ */
/* INLINE NAVBAR/FOOTER (Fallback)             */
/* ═══════════════════════════════════════════ */
/* Fallback navbar shown while page-builder.js loads */
#gs-navbar:empty .nav-fallback { display: flex; }
.nav-fallback {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: 72px;
  background: rgba(255,255,255,.96); backdrop-filter: blur(16px);
  border-bottom: 1px solid #e5e7eb;
  display: none; align-items: center; justify-content: space-between;
  padding: 0 24px;
  font-family: var(--font-body,'Plus Jakarta Sans',sans-serif);
}
.nav-fallback-logo {
  font-family: var(--font-display,'Bricolage Grotesque',serif);
  font-weight: 800; font-size: 22px; color: #1a6e30;
  text-decoration: none;
}
.nav-fallback-logo span { color: #9ca3af; font-weight: 400; font-size: 13px; margin-left: 3px; }
.nav-fallback-links { display: flex; gap: 28px; list-style: none; }
.nav-fallback-links a { font-size: 14px; font-weight: 500; color: #4b5563; text-decoration: none; }
.nav-fallback-links a:hover { color: #e8590c; }
.nav-fallback-cta {
  background: #e8590c; color: #fff !important;
  padding: 10px 22px; border-radius: 9999px;
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: background .2s;
}
.nav-fallback-cta:hover { background: #f4722b !important; }
@media(max-width:768px){
  .nav-fallback-links { display: none; }
}

/* Fallback footer shown while page-builder.js loads */
.footer-fallback {
  background: #0f1117; color: rgba(255,255,255,.5);
  padding: 48px 24px 28px;
  font-family: var(--font-body,'Plus Jakarta Sans',sans-serif);
}
.footer-fallback-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
  margin-bottom: 40px;
}
.footer-fallback-logo {
  font-family: var(--font-display,'Bricolage Grotesque',serif);
  font-weight: 800; font-size: 22px; color: #fff; margin-bottom: 12px;
}
.footer-fallback-brand p { font-size: 14px; line-height: 1.7; max-width: 280px; }
.footer-fallback-col h4 {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: rgba(255,255,255,.3); margin-bottom: 14px;
}
.footer-fallback-col a {
  display: block; font-size: 14px; color: rgba(255,255,255,.55);
  margin-bottom: 10px; text-decoration: none; transition: color .2s;
}
.footer-fallback-col a:hover { color: #4cbc6b; }
.footer-fallback-bottom {
  max-width: 1200px; margin: 0 auto;
  padding-top: 28px; border-top: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; flex-wrap: wrap; gap: 12px;
}
.footer-fallback-bottom a { color: rgba(255,255,255,.35); margin-left: 14px; text-decoration: none; }
.footer-fallback-bottom a:hover { color: rgba(255,255,255,.7); }
@media(max-width:768px){
  .footer-fallback-grid { grid-template-columns: 1fr 1fr; }
}
@media(max-width:480px){
  .footer-fallback-grid { grid-template-columns: 1fr; }
}


/* Flow Responsive */
@media (max-width: 768px) {
  .cs-flow-pipeline { flex-direction: column; gap: 0; }
  .cs-flow-step { min-width: auto; width: 100%; max-width: 100%; }
  .cs-flow-connector { transform: rotate(90deg); padding: .25rem 0; }
  .cs-flow-branch { width: 100%; }
  .cs-flow-branch-wrap { flex-direction: column; width: 100%; }
  .cs-flow-outcome-wrap { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .cs-flow-outcome { min-width: calc(50% - 8px); }
}

/* ============================================ */
/* PATCH — Navbar offset + Mobile improvements  */
/* Append to bottom of _shared/case-studies.css */
/* ============================================ */

/* ── Navbar offset (was inline on every page) ── */
/* nav offset handled by global.css */

/* ── Mobile: hero ──────────────────────────── */
@media (max-width: 768px) {
  .cs-hero { padding: calc(var(--nav-h, 60px) + 20px) 0 40px; }
  .cs-hero h1 { font-size: clamp(22px, 5.5vw, 32px); }
  .cs-hero-sub { font-size: 15px; line-height: 1.65; }
  .cs-hero-logos { gap: 6px; }
  .cs-hero-logo { font-size: 12px; padding: 5px 10px; height: auto; }
  .cs-hero-logo img { height: 16px; }
  .cs-breadcrumb { font-size: 12px; flex-wrap: wrap; row-gap: 4px; }
  .cs-hero-tags { gap: 6px; }
  .cs-tag { font-size: 10px; padding: 4px 10px; }
  .cs-hero-media { margin-top: 28px; border-radius: 12px; }
}

/* ── Mobile: results strip ─────────────────── */
@media (max-width: 640px) {
  .cs-result-num { font-size: clamp(28px, 7vw, 38px); }
  .cs-result-label { font-size: 12px; }
}

/* ── Mobile: article ───────────────────────── */
@media (max-width: 768px) {
  .cs-content { padding: 48px 0; }
  .cs-article h2 { font-size: clamp(19px, 4.5vw, 26px); margin: 36px 0 12px; }
  .cs-article h3 { font-size: clamp(17px, 4vw, 22px); }
  .cs-article p,
  .cs-article li { font-size: 15px; line-height: 1.75; }
  .cs-img-block { margin: 24px 0; }
  .cs-img-caption { font-size: 12px; }
  .cs-highlight { padding: 16px 18px; font-size: 14px; }
}

/* ── Mobile: feature grid ──────────────────── */
@media (max-width: 640px) {
  .cs-features { grid-template-columns: 1fr; gap: 12px; }
  .cs-feature { padding: 18px; }
}

/* ── Mobile: sidebar ───────────────────────── */
@media (max-width: 768px) {
  .cs-sidebar-card { padding: 18px; }
  .cs-sidebar-tools { gap: 6px; }
  .cs-tool-tag { font-size: 12px; padding: 5px 10px; }
  .cs-sidebar-cta { padding: 22px 18px; }
  .cs-sidebar-cta h4 { font-size: 16px; }
}
@media (max-width: 480px) {
  .cs-sidebar-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 0;
  }
  .cs-sidebar-value { font-size: 15px; }
}

/* ── Mobile: FAQ ───────────────────────────── */
@media (max-width: 768px) {
  .cs-faq { padding: 48px 0; }
  .cs-faq h2 { font-size: clamp(22px, 5vw, 30px); }
  .cs-faq-subtitle { font-size: 14px; margin-bottom: 32px; }
  .faq-q { font-size: 15px; padding: 18px 8px; }
  .faq-a-inner { font-size: 14px; }
}

/* ── Mobile: bottom CTA buttons ────────────── */
@media (max-width: 600px) {
  .cs-bottom-cta { padding: 48px 0; }
  .cs-bottom-cta h2 { font-size: clamp(20px, 5.5vw, 28px); }
  .cs-bottom-cta p { font-size: 15px; }
  .cs-bottom-cta .btn-group {
    flex-direction: column;
    align-items: center;
  }
  .cs-bottom-cta .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }
}

/* ── Mobile: container padding ─────────────── */
@media (max-width: 480px) {
  .container { padding-left: 16px; padding-right: 16px; }
}


/* CASE STUDIES CSS END */

.btn-10000{line-height: 1.65; padding: 16px 32px; background-color: #6d00cc; color: #fff;}