/* ==========================================================================
   JOD Business Services — SEO Landing Page
   Colors: #1A237E (primary/deep indigo) · #3949AB (secondary indigo)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --primary:#1A237E;
  --secondary:#3949AB;
  --primary-rgb:26,35,126;
  --secondary-rgb:57,73,171;
  --ink:#12132b;
  --muted:#5a5f7a;
  --faint:#8a8fb0;
  --bg:#ffffff;
  --bg-soft:#f5f6fb;
  --border:#e7e8f3;
  --white:#ffffff;
  --success:#2e7d32;
  --check-blue:#2f8fef;
  --check-blue-light:#8ec9ff;
  --check-gradient:linear-gradient(135deg,var(--check-blue),var(--check-blue-light));
  /* Unified list-tick blue — same value as .home-page's --home-blue/--home-blue-bright
     (button gradient), used site-wide so every checkmark bullet (index, seo/ppc/smm
     service pages, brc/vp/wdc/wdv/pba templates) renders the identical blue. */
  --tick-gradient:linear-gradient(120deg,#1A237E,#4457e6);
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --shadow-sm:0 2px 10px rgba(26,35,126,.06);
  --shadow-md:0 10px 30px rgba(26,35,126,.10);
  --shadow-lg:0 20px 60px rgba(26,35,126,.16);
  --ease:cubic-bezier(.22,1,.36,1);
  --font-head:'Sora',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
/* Site-wide gentle bob on every real image (photos/thumbnails), excluding
   brand logos which should stay put in the header/footer. */
@keyframes jumpThreeCenter{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}
img{animation:jumpThreeCenter 5s infinite linear}
.home-logo-img,.footer-logo-img,.a2-pillar-logo img,.about-pillar-logo img,.about-eco-branch-logo img{animation:none}
@media (prefers-reduced-motion:reduce){
  img{animation:none!important}
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--primary);line-height:1.15;font-weight:700}
.container{width:100%;max-width:1240px;margin-inline:auto;padding-inline:24px}
section{position:relative;padding:50px 0}
.text-gradient{
  background:linear-gradient(100deg,var(--primary),var(--secondary) 60%,#5c6bc0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% auto;animation:gradientShift 6s ease-in-out infinite;
}
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---------- animated background ---------- */
.bg-anim{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg)}
.bg-anim::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(var(--primary-rgb),.14) 1.4px,transparent 1.4px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 40%,transparent 90%);
}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;animation:drift 22s ease-in-out infinite;}
.blob1{width:480px;height:480px;background:radial-gradient(circle,var(--secondary),transparent 70%);top:-160px;left:-120px;animation-duration:24s}
.blob2{width:420px;height:420px;background:radial-gradient(circle,var(--primary),transparent 70%);top:120px;right:-140px;animation-duration:28s;animation-delay:-6s}
.blob3{width:360px;height:360px;background:radial-gradient(circle,#5c6bc0,transparent 70%);bottom:-140px;left:30%;animation-duration:26s;animation-delay:-12s}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(40px,60px) scale(1.08)}
  66%{transform:translate(-30px,20px) scale(.96)}
}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in-view{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}
.reveal-delay-5{transition-delay:.5s}

/* ---------- scroll parallax (site-wide, driven by script.js) ---------- */
[data-parallax]{will-change:transform}
@media (prefers-reduced-motion:reduce){
  [data-parallax]{transform:none!important}
}

/* ---------- page-load fade (subtle, consistent across every page) ---------- */
body{animation:jodPageFadeIn .5s var(--ease) both}
@keyframes jodPageFadeIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  body{animation:none}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;border-radius:999px;font-weight:600;font-size:.95rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.btn-primary{
  background:linear-gradient(120deg,var(--primary),var(--secondary));
  color:#fff;box-shadow:var(--shadow-md);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(26,35,126,.28)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-ghost{border:1.5px solid var(--border);color:var(--primary);background:#fff}
.btn-ghost:hover{border-color:var(--secondary);background:var(--bg-soft);transform:translateY(-3px)}
.btn-outline-light{border:1.5px solid rgba(255,255,255,.4);color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.12);transform:translateY(-3px)}
.btn-white{background:#fff;color:var(--primary)}
.btn-white:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.2)}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;background:rgba(var(--secondary-rgb),.08);
  color:var(--secondary);font-weight:700;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(var(--secondary-rgb),.18);
}
.badge svg{width:14px;height:14px}
.eyebrow{
  display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--secondary);background:rgba(var(--secondary-rgb),.08);padding:7px 14px;border-radius:999px;margin-bottom:18px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:20px 0;transition:all .4s var(--ease);
}
.site-header.scrolled{
  padding:12px 0;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);
  box-shadow:0 4px 24px rgba(26,35,126,.08);border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{
  font-family:var(--font-head);font-weight:800;font-size:1.5rem;color:var(--primary);
  display:flex;align-items:center;gap:2px;
}
.logo span{color:var(--secondary)}
.main-nav{display:flex;align-items:center;gap:6px}
.main-nav>a,.nav-item>button{
  padding:10px 16px;border-radius:999px;font-weight:600;font-size:.94rem;color:var(--ink);
  display:flex;align-items:center;gap:6px;transition:background .25s,color .25s;
}
.main-nav>a:hover,.nav-item>button:hover{background:var(--bg-soft);color:var(--secondary)}
.nav-item{position:relative}
.nav-item svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.nav-item.open svg{transform:rotate(180deg)}
.dropdown-menu{
  position:absolute;top:calc(100% + 10px);left:0;min-width:220px;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:all .25s var(--ease);
}
.nav-item.open .dropdown-menu{opacity:1;visibility:visible;transform:none}
.dropdown-menu a{display:block;padding:10px 14px;border-radius:var(--radius-sm);font-size:.92rem;font-weight:500}
.dropdown-menu a:hover{background:var(--bg-soft);color:var(--secondary)}
.header-actions{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:8px;z-index:101}
.nav-toggle span{width:24px;height:2px;background:var(--primary);border-radius:2px;transition:all .3s var(--ease)}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{padding:170px 0 100px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.hero-content h1{font-size:clamp(2.4rem,4.6vw,3.6rem);margin:18px 0 16px}
.hero-content .lead{font-size:1.2rem;font-weight:600;color:var(--ink);margin-bottom:14px}
.hero-content p{color:var(--muted);margin-bottom:14px;max-width:56ch}
.hero-content blockquote{
  border-left:3px solid var(--secondary);padding:6px 0 6px 18px;margin:20px 0;
  font-family:var(--font-head);font-weight:600;font-size:1.05rem;color:var(--primary);
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}

.search-demo{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:22px;max-width:420px;margin-inline:auto;
  animation:floatCard 6s ease-in-out infinite;
}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.search-demo-bar{
  display:flex;align-items:center;gap:10px;background:var(--bg-soft);border:1px solid var(--border);
  border-radius:999px;padding:14px 18px;font-size:.95rem;color:var(--ink);font-weight:500;
}
.search-demo-bar svg{width:18px;height:18px;color:var(--secondary);flex-shrink:0}
.cursor{display:inline-block;width:2px;background:var(--secondary);margin-left:2px;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.search-demo-result{
  display:flex;align-items:center;gap:12px;background:linear-gradient(120deg,var(--primary),var(--secondary));
  color:#fff;border-radius:var(--radius-md);padding:16px;margin-top:14px;
  box-shadow:0 10px 24px rgba(26,35,126,.28);opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.search-demo-result.show{opacity:1;transform:none}
.result-logo{
  width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:.8rem;flex-shrink:0;
}
.search-demo-result strong{display:block;font-size:.95rem}
.search-demo-result small{opacity:.85;font-size:.78rem;letter-spacing:.03em}
.search-demo-chips{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.chip{
  padding:8px 14px;border-radius:999px;font-size:.76rem;font-weight:700;letter-spacing:.04em;
  background:var(--bg-soft);color:var(--muted);border:1px solid var(--border);
  transition:all .4s var(--ease);text-transform:uppercase;
}
.chip.active{background:rgba(var(--secondary-rgb),.12);color:var(--secondary);border-color:rgba(var(--secondary-rgb),.3)}

/* ==========================================================================
   Intro / customer journey
   ========================================================================== */
.section-head {
    max-width: 1000px;
    margin: 0 auto 48px;
    text-align: center;
}

.section-head .eyebrow {
    display: inline-block;
    width: fit-content;
    padding: 7px 18px;
    background: rgba(65, 86, 180, 0.08);
    color: var(--secondary);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.section-head h2 {
    text-align: center;
    margin: 0 0 16px;
}

.section-head p {
    text-align: center;
    margin: 0 auto;
}

.jstep{
  display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:var(--radius-md);
  border:1px solid var(--border);background:#fff;font-weight:700;letter-spacing:.05em;font-size:.85rem;
  color:var(--muted);transition:all .5s var(--ease);position:relative;
}
.jstep+.jstep{margin-top:2px}
.jstep .num{
  width:30px;height:30px;border-radius:50%;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;
  font-size:.75rem;color:var(--secondary);flex-shrink:0;transition:all .5s var(--ease);
}
.jstep .arrow{position:absolute;left:35px;bottom:-11px;color:var(--faint);font-size:.7rem}
.jstep.active{background:linear-gradient(120deg,var(--primary),var(--secondary));color:#fff;border-color:transparent;box-shadow:var(--shadow-md);transform:scale(1.02)}
.jstep.active .num{background:rgba(255,255,255,.2);color:#fff}

/* ==========================================================================
   Services (ten disciplines)
   ========================================================================== */
.services-wrap{display:grid;grid-template-columns:300px 1fr;gap:32px;align-items:start}
.service-tabs{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)}
.service-tab{
  display:flex;align-items:center;gap:14px;padding:16px 20px;width:100%;text-align:left;
  border-bottom:1px solid var(--border);transition:all .3s var(--ease);
}
.service-tab:last-child{border-bottom:none}
.service-tab .tnum{font-size:.75rem;color:var(--faint);font-weight:700;width:20px;flex-shrink:0}
.service-tab span.tlabel{font-weight:600;color:var(--ink);flex:1}
.service-tab svg{width:15px;height:15px;color:#fff;opacity:0;transform:translateX(-4px);transition:all .3s var(--ease)}
.service-tab:hover{background:var(--bg-soft)}
.service-tab.active{background:linear-gradient(120deg,var(--primary),var(--secondary))}
.service-tab.active .tnum,.service-tab.active .tlabel{color:#fff}
.service-tab.active svg{opacity:1;transform:none}

.service-panel{
  border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;padding:38px;
  box-shadow:var(--shadow-sm);min-height:420px;
}
.service-panel .snum{
  display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:700;letter-spacing:.1em;
  color:var(--secondary);text-transform:uppercase;margin-bottom:14px;
}
.service-panel h3{font-size:1.6rem;margin-bottom:14px}
.service-panel .headline{font-weight:600;color:var(--primary);margin-bottom:12px}
.service-panel p{color:var(--muted);margin-bottom:14px}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-top:22px}
.check-item{
  display:flex;align-items:center;gap:12px;padding:13px 16px;border:1px solid var(--border);
  border-radius:var(--radius-sm);font-size:.92rem;font-weight:500;background:var(--bg-soft);
  transition:all .3s var(--ease);
}
.check-item:hover{border-color:var(--secondary);background:#fff;box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.check-item svg{width:18px;height:18px;color:#fff;background:var(--tick-gradient);border-radius:50%;padding:3px;flex-shrink:0}

/* ==========================================================================
   Why JOD cards
   ========================================================================== */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.why-card{
  padding:30px 26px;border-radius:var(--radius-lg);border:1px solid var(--border);background:#fff;
  transition:all .5s var(--ease);cursor:pointer;box-shadow:var(--shadow-sm);
}
.why-card .wnum{font-family:var(--font-head);font-weight:800;font-size:.85rem;color:var(--secondary);margin-bottom:14px;display:block}
.why-card h3{font-size:1.15rem;margin-bottom:10px;color:var(--primary)}
.why-card p{color:var(--muted);font-size:.94rem}
.why-card.active{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent;
}
.why-card.active h3,.why-card.active .wnum{color:#fff}
.why-card.active p{color:rgba(255,255,255,.85)}

/* ==========================================================================
   Process stepper
   ========================================================================== */
.process-track{position:relative;margin:44px 0 36px}
.process-line{position:absolute;top:23px;left:0;right:0;height:3px;background:var(--border);border-radius:3px;z-index:0}
.process-line-fill{position:absolute;top:0;left:0;height:100%;width:0%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:3px;transition:width .6s var(--ease)}
.process-steps{display:flex;justify-content:space-between;position:relative;z-index:1}
.pstep{display:flex;flex-direction:column;align-items:center;gap:10px;background:transparent;flex:1}
.pstep .circle{
  width:46px;height:46px;border-radius:50%;background:#fff;border:3px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--faint);
  transition:all .4s var(--ease);font-size:.9rem;
}
.pstep .plabel{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);transition:color .4s}
.pstep.done .circle{background:var(--secondary);border-color:var(--secondary);color:#fff}
.pstep.active .circle{background:linear-gradient(120deg,var(--primary),var(--secondary));border-color:var(--secondary);color:#fff;transform:scale(1.15);box-shadow:0 6px 18px rgba(26,35,126,.3)}
.pstep.active .plabel,.pstep.done .plabel{color:var(--primary)}
.process-detail{
  border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;padding:34px 38px;
  box-shadow:var(--shadow-sm);
}
.process-detail .pd-num{color:var(--secondary);font-weight:700;font-size:.85rem;letter-spacing:.08em;margin-bottom:10px;display:block}
.process-detail h3{font-size:1.4rem;margin-bottom:10px}
.process-detail p{color:var(--muted)}

/* ==========================================================================
   Stats / counters
   ========================================================================== */
.stats-band{
  background:linear-gradient(120deg,var(--primary),var(--secondary));
  border-radius:var(--radius-lg);padding:52px 40px;color:#fff;
  display:grid;grid-template-columns:repeat(5,1fr);gap:20px;box-shadow:var(--shadow-lg);
}
.stat{text-align:center}
.stat .num{font-family:var(--font-head);font-weight:800;font-size:clamp(2rem,3.4vw,2.8rem);display:flex;align-items:baseline;justify-content:center;gap:2px}
.stat .label{font-size:.85rem;opacity:.85;margin-top:6px;letter-spacing:.02em}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.faq-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pill{
  padding:9px 18px;border-radius:999px;border:1px solid var(--border);font-size:.82rem;font-weight:700;
  letter-spacing:.03em;color:var(--muted);transition:all .3s var(--ease);background:#fff;
}
.pill:hover{border-color:var(--secondary);color:var(--secondary)}
.pill.active{background:var(--primary);border-color:var(--primary);color:#fff}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--border);border-radius:var(--radius-md);background:#fff;overflow:hidden;transition:border-color .3s}
.faq-item.open{border-color:var(--secondary)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;
  width:100%;text-align:left;font-weight:600;font-size:.98rem;color:var(--ink);
}
.faq-q .qicon{
  width:26px;height:26px;border-radius:50%;background:var(--bg-soft);color:var(--secondary);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem;font-weight:400;
  transition:transform .35s var(--ease),background .3s;
}
.faq-item.open .qicon{background:var(--secondary);color:#fff;transform:rotate(135deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a p{padding:0 22px 20px;color:var(--muted);font-size:.94rem}

/* ==========================================================================
   Platforms marquee ("trusted by" style logo slider)
   ========================================================================== */
.marquee-wrap{overflow:hidden;position:relative;padding:20px 0;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;gap:56px;width:max-content;animation:scrollLeft 28s linear infinite}
.marquee-wrap:hover .marquee-track{animation-play-state:paused}
.marquee-item{
  display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:700;
  font-size:1.15rem;color:var(--faint);white-space:nowrap;opacity:.8;transition:opacity .3s,color .3s;
}
.marquee-item:hover{opacity:1;color:var(--secondary)}
.marquee-item svg{width:22px;height:22px}
@keyframes scrollLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta-section{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  border-radius:var(--radius-lg);padding:64px;color:#fff;position:relative;overflow:hidden;
}
.cta-section::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.08) 1.4px,transparent 1.4px);
  background-size:24px 24px;
}
.cta-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:50px;position:relative;z-index:1}
.cta-grid h2{color:#fff;font-size:clamp(1.6rem,2.8vw,2.1rem);margin-bottom:16px}
.cta-grid p{opacity:.9;margin-bottom:12px}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.cta-links{display:flex;flex-direction:column;gap:12px}
.cta-link{
  display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:var(--radius-md);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-weight:700;
  letter-spacing:.05em;font-size:.82rem;transition:all .3s var(--ease);
}
.cta-link:hover{background:rgba(255,255,255,.16);transform:translateX(6px)}
.cta-link .ic{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cta-link svg{width:16px;height:16px}
.cta-link .arrow{margin-left:auto;opacity:.6}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--ink);color:#c7c9e0;padding:70px 0 26px;margin-top:0}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.footer-brand .logo{color:#fff}
.footer-brand .logo span{color:#8c9eff}
.footer-brand .logo.footer-logo-img-wrap{display:inline-flex;align-items:center}
.footer-logo-img{display:block;height:55px;width:auto}
.footer-brand p{color:#9497b8;margin-top:14px;font-size:.92rem;max-width:32ch}
.footer-social{display:flex;gap:10px;margin-top:20px}
.footer-social a{
  width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;transition:all .3s var(--ease);
}
.footer-social a:hover{background:var(--secondary);border-color:var(--secondary);transform:translateY(-3px)}
.footer-social svg{width:16px;height:16px}
.footer-col h4{color:#fff;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px;font-family:var(--font-head)}
.footer-col a{display:block;color:#9497b8;font-size:.92rem;padding:6px 0;transition:color .25s,transform .25s}
.footer-col a:hover{color:#fff;transform:translateX(4px)}
.footer-col-hidden-heading{visibility:hidden}
.footer-contact-address{display:block;color:#9497b8;font-size:.92rem;padding:6px 0;font-style:normal;line-height:1.5}
.footer-contact-address a{display:inline;color:inherit;padding:0;text-decoration:none;transition:color .25s}
.footer-contact-address a:hover{color:#fff;text-decoration:underline}
.footer-contact-hours{color:#9497b8;font-size:.92rem;padding:6px 0;margin:0}
.footer-contact-col .footer-social{margin-top:14px}
.footer-contact-col .footer-social a{display:flex;align-items:center;justify-content:center;padding:0}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  border-top:1px solid rgba(255,255,255,.1);margin-top:50px;padding-top:24px;font-size:.85rem;color:#8285a6;
}
.footer-bottom a{color:#8285a6}
.footer-bottom a:hover{color:#fff}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr}
  .stats-band{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:920px){
  .main-nav{display:none}
  .nav-toggle{display:flex}
  .hero-grid,.services-wrap,.faq-wrap,.cta-grid{grid-template-columns:1fr}
  .services-wrap{gap:24px}
  .service-tabs{display:flex;overflow-x:auto;border-radius:var(--radius-md)}
  .service-tab{flex-direction:column;text-align:center;gap:6px;border-bottom:none;border-right:1px solid var(--border);min-width:120px}
  .service-tab .tlabel{font-size:.82rem}
  .header-actions .btn-primary{display:none}
  .main-nav.mobile-open{
    display:flex;flex-direction:column;position:fixed;top:0;right:0;height:100vh;width:78%;max-width:320px;
    background:#fff;padding:100px 28px 28px;box-shadow:-10px 0 40px rgba(0,0,0,.15);gap:4px;z-index:100;
    animation:slideIn .35s var(--ease);
  }
  .main-nav.mobile-open>a,.main-nav.mobile-open .nav-item>button{padding:16px;font-size:1.05rem}
  .main-nav.mobile-open .dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;display:none;margin-left:12px}
  .main-nav.mobile-open .nav-item.open .dropdown-menu{display:block}
}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media (max-width:760px){
  section{padding:70px 0}
  .hero{padding:140px 0 60px}
  .cta-section{padding:40px 24px}
  .why-grid{grid-template-columns:1fr}
  .check-grid{grid-template-columns:1fr}
  .stats-band{grid-template-columns:1fr 1fr;padding:36px 22px}
  .process-steps{flex-wrap:wrap;row-gap:24px}
  .process-line{display:none}
  .pstep{flex:0 0 25%}
  .process-detail{padding:26px}
  .footer-top{grid-template-columns:1fr}
}
@media (max-width:480px){
  .stats-band{grid-template-columns:1fr}
  .pstep{flex:0 0 33%}
  .cta-actions,.hero-cta{flex-direction:column;align-items:stretch}
  .cta-actions .btn,.hero-cta .btn{justify-content:center}
}

/* ==========================================================================
   ==========================================================================
   SEO / PPC PAGE DESIGN SYSTEM — hero mockup, pain-points grid, services
   slider, "why us"/future cards, premium FAQ + contact form (body.seo-page,
   body.ppc-page)

   Originally built for seo.html only (as "body.seo-page"), then extended to
   body.ppc-page so ppc-agency-in-chennai.html can reuse the exact same design
   system with PPC-specific content/markup — every selector below is grouped
   as "body:is(.seo-page,.ppc-page) ..." rather than duplicated. Class names
   keep their original "seo-" prefix as a naming artifact; they are the shared
   design system now, not SEO-exclusive. social-media-marketing-agency-in-chennai.html
   still uses the original (untouched) .services-wrap / .why-grid / .faq-wrap
   template. On seo.html/ppc.html the original tabbed Services panel and
   auto-cycling Why JOD grid are hidden here (not deleted); their markup and
   script.js logic keep working harmlessly in the background.
   ==========================================================================
   ========================================================================== */
body:is(.seo-page,.ppc-page,.smm-page){
  /* Full --home-* token set, duplicated from ".home-page" (style.css ~L548) —
     seo.html's <body> only carries "seo-page contact-page", not "home-page", so
     the merged FAQ+Contact section's ".contact-page"-scoped rules (contact-form-panel,
     contact-input, etc.) sit outside the small ".home-page" div that wraps just the
     header, and were resolving these custom properties as undefined. Redeclaring the
     same values at body scope fixes that without touching the shared .home-page/.contact-page rules.
     Extended to .smm-page for social-media-marketing-agency-in-chennai.html's own
     merged FAQ+Contact redesign (same gap: its <body> carries "smm-page contact-page",
     not "home-page"). */
  --home-blue:#1A237E;
  --home-blue-2:#3949AB;
  --home-blue-bright:#4457e6;
  --home-navy:#10154a;
  --home-navy-2:#1d2778;
  --home-accent:#2f8fef;
  --home-accent-2:#8ec9ff;
  --home-check-gradient:linear-gradient(135deg,var(--home-accent),var(--home-accent-2));
  --home-bg:#f6f7fc;
  --home-ink:#12132b;
  --home-muted:#5c6088;
  --home-faint:#8b8fb5;
  --home-border:#e7e9f6;
  --home-r-sm:12px;
  --home-r-md:20px;
  --home-r-lg:32px;
  --home-shadow-sm:0 2px 14px rgba(16,20,74,.07);
  --home-shadow-md:0 16px 40px rgba(16,20,74,.12);
  --home-shadow-lg:0 30px 80px rgba(16,20,74,.22);
  --home-ease:cubic-bezier(.22,1,.36,1);
  --home-ease-out:cubic-bezier(.16,1,.3,1);
  --home-header-h:88px;
}
body:is(.seo-page,.ppc-page) .services-wrap{display:none}
body:is(.seo-page,.ppc-page,.smm-page) .why-grid{display:none}
/* Retired "dots" services carousel (.seo-slider-track#servicesTrack/#cmServicesTrack/etc.) —
   kept in the DOM (hidden, not deleted) now that every service page's Services section uses
   the numbered accordion + mobile arrow-slider component instead (see #seoServicesWrap /
   #ppcServicesWrap / #cmServicesWrap / #pbaServicesWrap / #vpServicesWrap / #wdcServicesWrap /
   #wdvServicesWrap below). Only ever applied to that one retired block per page — the SAME
   .seo-slider class still renders normally for each page's separate "Why JOD" carousel. */
.services-old-slider{display:none}

/* ---------- shared 3-visible "slide one by one" carousel ----------
   Also reused by social-media-marketing-agency-in-chennai.html (body.smm-page)
   for its "Why JOD" section — script.js's generic whyTrack/whyPrev/whyNext/
   whyDots wiring (keyed off element ids, not a page-class check) already
   clones #whyGrid .why-card into this slider whenever the markup exists, so
   no JS changes were needed, only the matching markup + this CSS extension. */
body:is(.seo-page,.ppc-page,.smm-page) .seo-slider{width:100%}
body:is(.seo-page,.ppc-page,.smm-page) .seo-slider-viewport{overflow:hidden}
body:is(.seo-page,.ppc-page,.smm-page) .seo-slider-track{
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -ms-overflow-style:none;scrollbar-width:none;padding:4px 4px 8px;
}
body:is(.seo-page,.ppc-page,.smm-page) .seo-slider-track::-webkit-scrollbar{display:none}
body:is(.seo-page,.ppc-page,.smm-page) .seo-slide-card{scroll-snap-align:start;flex:0 0 calc((100% - 48px)/3);min-width:0}
body:is(.seo-page,.ppc-page,.smm-page) .seo-slider-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:30px}
body:is(.seo-page,.ppc-page,.smm-page) .seo-slider-arrow{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--border);background:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--primary);box-shadow:var(--shadow-sm);
  transition:all .3s var(--ease);
}
body:is(.seo-page,.ppc-page,.smm-page) .seo-slider-arrow svg{width:18px;height:18px}
body:is(.seo-page,.ppc-page,.smm-page) .seo-slider-arrow:hover:not(:disabled){background:var(--primary);border-color:var(--primary);color:#fff;transform:translateY(-2px)}
body:is(.seo-page,.ppc-page,.smm-page) .seo-slider-arrow:disabled{opacity:.35;cursor:default;box-shadow:none}
body:is(.seo-page,.ppc-page,.smm-page) .seo-slider-dots{display:flex;align-items:center;gap:8px}
body:is(.seo-page,.ppc-page,.smm-page) .seo-slider-dot{width:8px;height:8px;border-radius:999px;background:var(--border);transition:all .3s var(--ease)}
body:is(.seo-page,.ppc-page,.smm-page) .seo-slider-dot.active{width:26px;background:linear-gradient(120deg,var(--primary),var(--secondary))}

/* ---------- Services slider cards ---------- */
body:is(.seo-page,.ppc-page) .seo-service-card{
  border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;padding:30px 26px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:14px;transition:all .35s var(--ease);
}
body:is(.seo-page,.ppc-page) .seo-service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:rgba(57,73,171,.25)}
body:is(.seo-page,.ppc-page) .seo-service-num{font-family:var(--font-head);font-weight:800;font-size:.8rem;color:var(--secondary)}
body:is(.seo-page,.ppc-page) .seo-service-card h3{font-size:1.15rem;color:var(--primary)}
body:is(.seo-page,.ppc-page) .seo-service-headline{color:var(--muted);font-size:.92rem}
body:is(.seo-page,.ppc-page) .seo-service-checks{display:flex;flex-direction:column;gap:9px;}
body:is(.seo-page,.ppc-page) .seo-service-checks span{display:flex;align-items:center;gap:9px;font-size:.85rem;font-weight:500;color:var(--ink)}
body:is(.seo-page,.ppc-page) .seo-service-checks svg{width:15px;height:15px;color:#fff;background:var(--tick-gradient);border-radius:50%;padding:3px;flex-shrink:0}
body:is(.seo-page,.ppc-page) .seo-service-outro{color:var(--muted);font-size:.85rem;line-height:1.55}

/* ---------- FAQ + Contact merged section ---------- */
body:is(.seo-page,.ppc-page,.smm-page) .seo-faq-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}

@media (max-width:1080px){
  body:is(.seo-page,.ppc-page,.smm-page) .seo-slide-card{flex:0 0 calc((100% - 24px)/2)}
}
@media (max-width:920px){
  body:is(.seo-page,.ppc-page,.smm-page) .seo-faq-contact-grid{grid-template-columns:1fr;gap:36px}
}
@media (max-width:640px){
  body:is(.seo-page,.ppc-page,.smm-page) .seo-slide-card{flex:0 0 calc(100% - 8px)}
  body:is(.seo-page,.ppc-page,.smm-page) .seo-slider-arrow{width:40px;height:40px}
}

/* ---------- Hero: dashboard mockup visual ---------- */
body:is(.seo-page,.ppc-page,.smm-page) .search-demo{display:none}
body:is(.seo-page,.ppc-page) .seo-hero-visual{position:relative;width:100%;max-width:520px;height:560px;margin-inline:auto}
body:is(.seo-page,.ppc-page) .seo-hero-search{
  position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:6;width:86%;max-width:360px;
  display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:999px;
  padding:11px 7px 11px 18px;box-shadow:var(--shadow-lg);font-size:.85rem;color:var(--muted);
}
body:is(.seo-page,.ppc-page) .seo-hero-search>svg:first-child{width:16px;height:16px;color:var(--faint);flex-shrink:0}
body:is(.seo-page,.ppc-page) .seo-hero-search span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:is(.seo-page,.ppc-page) .seo-hero-search-btn{width:34px;height:34px;border-radius:50%;flex-shrink:0;background:linear-gradient(120deg,var(--primary),var(--secondary));display:flex;align-items:center;justify-content:center;color:#fff}
body:is(.seo-page,.ppc-page) .seo-hero-search-btn svg{width:15px;height:15px}

body:is(.seo-page,.ppc-page) .seo-hero-ring{position:absolute;top:58%;left:50%;border-radius:50%;border:1.5px dashed rgba(26,35,126,.18);z-index:1}
body:is(.seo-page,.ppc-page) .seo-hero-ring-outer{width:360px;height:360px;margin:-180px 0 0 -180px;animation:seoRingSpin 42s linear infinite}
body:is(.seo-page,.ppc-page) .seo-hero-ring-inner{width:250px;height:250px;margin:-125px 0 0 -125px;animation:seoRingSpin 30s linear infinite reverse}
@keyframes seoRingSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

body:is(.seo-page,.ppc-page) .seo-hero-core{
  position:absolute;top:58%;left:50%;transform:translate(-50%,-50%);z-index:4;width:140px;height:140px;border-radius:50%;
  background:linear-gradient(140deg,var(--primary),var(--secondary));color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;text-align:center;box-shadow:0 20px 50px rgba(26,35,126,.35);
  animation:seoCorePulse 4.5s ease-in-out infinite;
}
body:is(.seo-page,.ppc-page) .seo-hero-core svg{width:28px;height:28px}
body:is(.seo-page,.ppc-page) .seo-hero-core span{font-family:var(--font-head);font-weight:700;font-size:.78rem;line-height:1.25}
@keyframes seoCorePulse{0%,100%{box-shadow:0 20px 50px rgba(26,35,126,.35)}50%{box-shadow:0 26px 64px rgba(26,35,126,.45),0 0 0 10px rgba(57,73,171,.12)}}

body:is(.seo-page,.ppc-page) .seo-hero-card{
  position:absolute;z-index:3;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);padding:14px 16px;width:150px;animation:seoCardFloat 6s ease-in-out infinite;
}
body:is(.seo-page,.ppc-page) .seo-hero-card-label{display:block;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
@keyframes seoCardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

body:is(.seo-page,.ppc-page) .seo-hero-card-traffic{top:15%;left:-6%;width:158px;animation-delay:0s}
body:is(.seo-page,.ppc-page) .seo-hero-card-keywords{top:13%;right:-8%;width:150px;animation-delay:.8s}
body:is(.seo-page,.ppc-page) .seo-hero-card-score{bottom:9%;left:-4%;width:132px;text-align:center;animation-delay:1.6s}
body:is(.seo-page,.ppc-page) .seo-hero-card-rankings{bottom:1%;right:-6%;width:150px;animation-delay:2.4s}

body:is(.seo-page,.ppc-page) .seo-hero-card-row{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
body:is(.seo-page,.ppc-page) .seo-hero-card-row strong{font-family:var(--font-head);font-weight:800;font-size:1.3rem;color:var(--ink)}
body:is(.seo-page,.ppc-page) .seo-hero-card-row em{font-style:normal;font-size:.7rem;font-weight:700;color:#1fa463;background:rgba(31,164,99,.12);padding:2px 7px;border-radius:999px}
body:is(.seo-page,.ppc-page) .seo-hero-chart-line{width:100%;height:30px;display:block}

body:is(.seo-page,.ppc-page) .seo-hero-kw-row{display:flex;align-items:center;gap:8px;margin-top:7px}
body:is(.seo-page,.ppc-page) .seo-hero-kw-row:first-of-type{margin-top:0}
body:is(.seo-page,.ppc-page) .seo-hero-kw-row i{font-style:normal;font-size:.68rem;font-weight:800;color:var(--secondary);width:18px;flex-shrink:0}
body:is(.seo-page,.ppc-page) .seo-hero-kw-bar{display:block;height:6px;border-radius:999px;background:var(--check-gradient)}

body:is(.seo-page,.ppc-page) .seo-hero-gauge{
  width:78px;height:78px;border-radius:50%;margin:2px auto 8px;position:relative;
  background:conic-gradient(var(--check-blue) 0 82%,var(--border) 82% 100%);display:flex;align-items:center;justify-content:center;
}
body:is(.seo-page,.ppc-page) .seo-hero-gauge::before{content:"";position:absolute;inset:9px;background:#fff;border-radius:50%}
body:is(.seo-page,.ppc-page) .seo-hero-gauge span{position:relative;z-index:1;font-family:var(--font-head);font-weight:800;font-size:1rem;color:var(--primary)}
body:is(.seo-page,.ppc-page) .seo-hero-card-sub{display:block;color:#1fa463;font-weight:700;font-size:.72rem}

body:is(.seo-page,.ppc-page) .seo-hero-bars{display:flex;align-items:flex-end;gap:5px;height:38px;margin-bottom:8px}
body:is(.seo-page,.ppc-page) .seo-hero-bars i{flex:1;display:block;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--check-blue-light),var(--check-blue))}
body:is(.seo-page,.ppc-page) .seo-hero-card-arrow{width:18px;height:18px;color:#1fa463}

body:is(.seo-page,.ppc-page) .seo-hero-pill{
  position:absolute;z-index:5;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);
  border-radius:999px;padding:9px 14px 9px 10px;font-size:.72rem;font-weight:700;color:var(--ink);
  box-shadow:var(--shadow-md);white-space:nowrap;animation:seoCardFloat 5.5s ease-in-out infinite;
}
body:is(.seo-page,.ppc-page) .seo-hero-pill svg{width:15px;height:15px;color:var(--secondary);flex-shrink:0}
body:is(.seo-page,.ppc-page) .seo-hero-pill-rankings{top:0;right:6%;animation-delay:.3s}
body:is(.seo-page,.ppc-page) .seo-hero-pill-traffic{top:38%;left:-15%;animation-delay:1s}
body:is(.seo-page,.ppc-page) .seo-hero-pill-customers{bottom:20%;left:-17%;animation-delay:1.8s}
body:is(.seo-page,.ppc-page) .seo-hero-pill-local{bottom:-2%;right:9%;animation-delay:2.6s}

/* ---------- Pain-points: two-column grid + callout ----------
   Also reused by social-media-marketing-agency-in-chennai.html (body.smm-page),
   which replaced its old two-column "journey" layout with this same shared
   pattern — 8 items, so no extra border-fix (like the .wdc-page/.wdv-page/
   .pba-page ones further down) is needed. */
   #pain-points{margin-top: -80px;}
body:is(.seo-page,.ppc-page,.smm-page) .seo-pain-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:44px}
body:is(.seo-page,.ppc-page,.smm-page) .seo-pain-item{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid var(--border)}
body:is(.seo-page,.ppc-page,.smm-page) .seo-pain-item:nth-child(7),body:is(.seo-page,.ppc-page,.smm-page) .seo-pain-item:nth-child(8){border-bottom:none}
body:is(.seo-page,.ppc-page,.smm-page) .seo-pain-icon{flex-shrink:0;width:40px;height:40px;border-radius:12px;background:rgba(var(--secondary-rgb),.08);color:var(--secondary);display:flex;align-items:center;justify-content:center}
body:is(.seo-page,.ppc-page,.smm-page) .seo-pain-icon svg{width:19px;height:19px}
body:is(.seo-page,.ppc-page,.smm-page) .seo-pain-item p{margin:0;color:var(--ink);font-size:.96rem;font-weight:500;padding-top:8px}
body:is(.seo-page,.ppc-page,.smm-page) .seo-pain-callout{
  display:flex;align-items:center;gap:14px;margin-top:34px;padding:16px 20px;border-radius:var(--radius-md);
  background:var(--bg-soft);border:1px solid var(--border);
}
body:is(.seo-page,.ppc-page,.smm-page) .seo-pain-callout-icon{flex-shrink:0;width:76px;height:76px;border-radius:50%;background:#1a237e;color:#fff;display:flex;align-items:center;justify-content:center}
body:is(.seo-page,.ppc-page,.smm-page) .seo-pain-callout p{margin:0;color:var(--ink);font-size:.96rem;font-weight:700;font-size:18px;line-height:1.6}
body:is(.seo-page,.ppc-page,.smm-page) .seo-pain-callout p strong{display:inline;color:inherit;font-size:inherit;margin-bottom:0;font-weight:700;font-size: 18px;}
body:is(.seo-page,.ppc-page,.smm-page) .seo-pain-callout p .text-gradient{background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:currentColor;color:#1a237e;animation:none;font-weight:700;font-size: 18px;}

/* ---------- Services: goals row ---------- */
body:is(.seo-page,.ppc-page) .seo-goals-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:44px}
body:is(.seo-page,.ppc-page) .seo-goal-card{display:flex;gap:14px;align-items:flex-start;padding:20px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-soft);transition:all .3s var(--ease)}
body:is(.seo-page,.ppc-page) .seo-goal-card:hover{background:#fff;box-shadow:var(--shadow-sm);border-color:rgba(57,73,171,.22);transform:translateY(-3px)}
body:is(.seo-page,.ppc-page) .seo-goal-icon{flex-shrink:0;width:42px;height:42px;border-radius:12px;background:#fff;box-shadow:var(--shadow-sm);color:var(--secondary);display:flex;align-items:center;justify-content:center}
body:is(.seo-page,.ppc-page) .seo-goal-icon svg{width:20px;height:20px}
body:is(.seo-page,.ppc-page) .seo-goal-card strong{display:block;font-family:var(--font-head);color:var(--primary);font-size:.98rem;margin-bottom:4px}
body:is(.seo-page,.ppc-page) .seo-goal-card p{margin:0;color:var(--muted);font-size:.85rem}

/* ---------- Services slider cards: premium refresh ---------- */
body:is(.seo-page,.ppc-page) .seo-service-card{position:relative;overflow:hidden}
body:is(.seo-page,.ppc-page) .seo-service-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--secondary),var(--check-blue-light));opacity:0;transition:opacity .3s var(--ease)}
body:is(.seo-page,.ppc-page) .seo-service-card:hover::before{opacity:1}
body:is(.seo-page,.ppc-page) .seo-service-top{display:flex;align-items:center;justify-content:space-between}
body:is(.seo-page,.ppc-page) .seo-service-icon{width:46px;height:46px;border-radius:14px;background:var(--check-gradient);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
body:is(.seo-page,.ppc-page) .seo-service-icon svg{width:22px;height:22px}

/* ---------- "Future of Search" cards ---------- */
body:is(.seo-page,.ppc-page) .seo-future-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
body:is(.seo-page,.ppc-page) .seo-future-card{position:relative;padding:34px 28px;border-radius:var(--radius-lg);border:1px solid var(--border);background:#fff;box-shadow:var(--shadow-sm);transition:all .4s var(--ease);overflow:hidden}
body:is(.seo-page,.ppc-page) .seo-future-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
body:is(.seo-page,.ppc-page) .seo-future-card-accent{background:linear-gradient(150deg,var(--primary),var(--secondary));border-color:transparent}
body:is(.seo-page,.ppc-page) .seo-future-card-accent h3,body:is(.seo-page,.ppc-page) .seo-future-card-accent .seo-future-tag{color:#fff}
body:is(.seo-page,.ppc-page) .seo-future-card-accent p{color:rgba(255,255,255,.85)}
body:is(.seo-page,.ppc-page) .seo-future-card-accent .seo-future-icon{background:rgba(255,255,255,.18);color:#fff}
body:is(.seo-page,.ppc-page) .seo-future-card-accent .seo-future-index{color:rgba(255,255,255,.35)}
body:is(.seo-page,.ppc-page) .seo-future-index{position:absolute;top:22px;right:26px;font-family:var(--font-head);font-weight:800;font-size:2.3rem;color:var(--border);line-height:1;z-index:0}
body:is(.seo-page,.ppc-page) .seo-future-icon{position:relative;z-index:1;width:52px;height:52px;border-radius:16px;background:var(--check-gradient);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
body:is(.seo-page,.ppc-page) .seo-future-icon svg{width:24px;height:24px}
body:is(.seo-page,.ppc-page) .seo-future-tag{position:relative;z-index:1;display:inline-block;font-family:var(--font-head);font-weight:800;font-size:.72rem;letter-spacing:.12em;color:var(--secondary);margin-bottom:8px}
body:is(.seo-page,.ppc-page) .seo-future-card h3{position:relative;z-index:1;font-size:1.2rem;margin-bottom:10px}
body:is(.seo-page,.ppc-page) .seo-future-card p{position:relative;z-index:1;color:var(--muted);font-size:.92rem}
body:is(.seo-page,.ppc-page) .seo-future-note{display:flex;align-items:flex-start;gap:14px;margin:30px auto 0;padding:18px 22px;border-radius:var(--radius-md);background:var(--bg-soft);border:1px solid var(--border);max-width:80ch}
body:is(.seo-page,.ppc-page) .seo-future-note svg{flex-shrink:0;width:22px;height:22px;color:var(--secondary);margin-top:2px}
body:is(.seo-page,.ppc-page) .seo-future-note p{margin:0;color:var(--muted)}

/* ---------- FAQ: premium accordion (scoped override) ---------- */
body:is(.seo-page,.ppc-page,.smm-page) .faq-list{counter-reset:seofaq}
body:is(.seo-page,.ppc-page,.smm-page) .faq-item{border-radius:18px;box-shadow:var(--shadow-sm)}
body:is(.seo-page,.ppc-page,.smm-page) .faq-item:hover{box-shadow:var(--shadow-md)}
body:is(.seo-page,.ppc-page,.smm-page) .faq-item.open{box-shadow:var(--shadow-md);border-color:rgba(57,73,171,.32)}
body:is(.seo-page,.ppc-page,.smm-page) .faq-q{padding:19px 22px;justify-content:flex-start;counter-increment:seofaq}
body:is(.seo-page,.ppc-page,.smm-page) .faq-q::before{content:counter(seofaq,decimal-leading-zero);font-family:var(--font-head);font-weight:800;font-size:.76rem;color:var(--secondary);opacity:.5;flex-shrink:0}
body:is(.seo-page,.ppc-page,.smm-page) .faq-q .qicon{margin-left:auto}
body:is(.seo-page,.ppc-page,.smm-page) .faq-a p{padding-left:62px}

/* ---------- Contact form panel: premium badge accent ---------- */
body:is(.seo-page,.ppc-page,.smm-page) .contact-form-panel{border-radius:28px;box-shadow:var(--home-shadow-md)}
body:is(.seo-page,.ppc-page,.smm-page) .seo-form-panel{position:relative;overflow:visible}
body:is(.seo-page,.ppc-page,.smm-page) .seo-form-badge{
  position:absolute;top:-22px;left:32px;width:50px;height:50px;border-radius:16px;z-index:2;
  background:linear-gradient(120deg,var(--primary),var(--secondary));color:#fff;box-shadow:var(--shadow-md);
  display:flex;align-items:center;justify-content:center;
}
body:is(.seo-page,.ppc-page,.smm-page) .seo-form-badge svg{width:22px;height:22px}
body:is(.seo-page,.ppc-page,.smm-page) .seo-form-panel .contact-form-head{padding-top:10px}

@media (max-width:1080px){
  body:is(.seo-page,.ppc-page) .seo-hero-visual{max-width:460px;height:500px}
  body:is(.seo-page,.ppc-page) .seo-hero-ring-outer{width:320px;height:320px;margin:-160px 0 0 -160px}
  body:is(.seo-page,.ppc-page) .seo-hero-ring-inner{width:220px;height:220px;margin:-110px 0 0 -110px}
}
@media (max-width:920px){
  body:is(.seo-page,.ppc-page) .seo-hero-visual{max-width:440px;height:480px;margin-top:24px}
  body:is(.seo-page,.ppc-page) .seo-goals-row{grid-template-columns:1fr}
  body:is(.seo-page,.ppc-page) .seo-future-grid{grid-template-columns:1fr}
  body:is(.seo-page,.ppc-page,.smm-page) .seo-pain-item:nth-child(7){border-bottom:1px solid var(--border)}
}
@media (max-width:760px){
  body:is(.seo-page,.ppc-page,.smm-page) .seo-pain-grid{grid-template-columns:1fr}
  body:is(.seo-page,.ppc-page,.smm-page) .seo-pain-item{border-bottom:1px solid var(--border)}
  body:is(.seo-page,.ppc-page,.smm-page) .seo-pain-item:last-child{border-bottom:none}
  body:is(.seo-page,.ppc-page,.smm-page) .seo-pain-callout{align-items:flex-start;gap:12px;padding:14px 16px}
}
@media (max-width:640px){
  body:is(.seo-page,.ppc-page) .seo-hero-visual{max-width:320px;height:400px}
  body:is(.seo-page,.ppc-page) .seo-hero-search{max-width:260px;padding:10px 6px 10px 14px;font-size:.78rem}
  body:is(.seo-page,.ppc-page) .seo-hero-ring{display:none}
  body:is(.seo-page,.ppc-page) .seo-hero-core{width:100px;height:100px}
  body:is(.seo-page,.ppc-page) .seo-hero-core svg{width:24px;height:24px}
  body:is(.seo-page,.ppc-page) .seo-hero-core span{font-size:.66rem}
  body:is(.seo-page,.ppc-page) .seo-hero-card{width:112px;padding:10px 12px}
  body:is(.seo-page,.ppc-page) .seo-hero-card-row strong{font-size:1.05rem}
  body:is(.seo-page,.ppc-page) .seo-hero-gauge{width:60px;height:60px}
  body:is(.seo-page,.ppc-page) .seo-hero-gauge::before{inset:7px}
  body:is(.seo-page,.ppc-page) .seo-hero-pill{display:none}
  body:is(.seo-page,.ppc-page) .seo-hero-card-traffic{top:8%;left:-2%}
  body:is(.seo-page,.ppc-page) .seo-hero-card-keywords{top:8%;right:-2%}
  body:is(.seo-page,.ppc-page) .seo-hero-card-score{bottom:4%;left:0}
  body:is(.seo-page,.ppc-page) .seo-hero-card-rankings{bottom:0;right:-2%}
  body:is(.seo-page,.ppc-page) .seo-form-badge{width:42px;height:42px;top:-18px;left:22px}
  body:is(.seo-page,.ppc-page) .seo-form-badge svg{width:18px;height:18px}
}
@media (max-width:380px){
  body:is(.seo-page,.ppc-page) .seo-hero-visual{max-width:270px;height:360px}
}
@media (prefers-reduced-motion:reduce){
  body:is(.seo-page,.ppc-page) .seo-hero-ring,body:is(.seo-page,.ppc-page) .seo-hero-core,body:is(.seo-page,.ppc-page) .seo-hero-card,body:is(.seo-page,.ppc-page) .seo-hero-pill{animation:none!important}
}

/* ---------- SEO-page only: hero rebuilt to match the client's reference
   design. Scoped to body.seo-page so the shared .hero/.badge rules (and the
   .seo-hero-visual mockup above, still used by ppc.html) are untouched. ---------- */
body.seo-page .seo-hero-title-accent{color:var(--secondary)}
body.seo-page .seo-hero-subhead{
  font-family:var(--font-head);font-weight:700;font-size:1.2rem;color:var(--primary);
  line-height:1.4;margin:0 0 16px;
}
body.seo-page .seo-hero-desc{color:var(--muted);max-width:56ch;line-height:1.75;margin-bottom:0}

/* Placeholder for the reference's right-side image — the user supplies the
   final asset; this just reserves the space at the right size/position. */
body.seo-page .seo-hero-placeholder{
  position:relative;width:100%;max-width:520px;height:560px;margin-inline:auto;
  border:2px dashed var(--border);border-radius:var(--radius-lg);background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;text-align:center;
}
@media (max-width:1080px){body.seo-page .seo-hero-placeholder{max-width:460px;height:500px}}
@media (max-width:920px){body.seo-page .seo-hero-placeholder{max-width:440px;height:480px;margin-top:24px}}
@media (max-width:640px){body.seo-page .seo-hero-placeholder{max-width:320px;height:400px}}
@media (max-width:380px){body.seo-page .seo-hero-placeholder{max-width:270px;height:360px}}

/* ---------- Shared "master" hero styling for every other service page
   (PPC, Social Media, Content Marketing, Video Production, Web Design,
   Web Development, Personal Branding, Branding) — mirrors seo.html's hero
   design 1:1 (single source of truth) so every service page's hero looks
   identical. Fresh, page-agnostic class names: seo.html itself is untouched. ---------- */
.svc-hero-title{color:#000}
.svc-hero-accent{color:var(--secondary)}
/* .hero-content prefixed to out-specificity the shared, bare ".hero-content p"
   rule (class+element beats a lone class) so these actually take effect. */
.hero-content .svc-hero-subhead{
  font-family:var(--font-head);font-weight:700;font-size:1.2rem;color:#000;
  line-height:1.4;margin:0 0 16px;
}
.hero-content .svc-hero-desc{color:var(--muted);max-width:56ch;line-height:1.75;margin-bottom:0}

/* Placeholder for each page's hero image — real assets are added later;
   this just reserves the space at the same size/position as seo.html's. */
.svc-hero-placeholder{
  position:relative;width:100%;max-width:520px;height:560px;margin-inline:auto;
  border:2px dashed var(--border);border-radius:var(--radius-lg);background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;text-align:center;
}
@media (max-width:1080px){.svc-hero-placeholder{max-width:460px;height:500px}}
@media (max-width:920px){.svc-hero-placeholder{max-width:440px;height:480px;margin-top:24px}}
@media (max-width:640px){.svc-hero-placeholder{max-width:320px;height:400px}}
@media (max-width:380px){.svc-hero-placeholder{max-width:270px;height:360px}}

/* Now that each service page's hero placeholder holds its real <img>, drop
   the dashed "reserved space" border and let the image fill the box,
   cropped/rounded to match — same rule shared by seo.html's own
   .seo-hero-placeholder (below) since both boxes are sized identically. */
.svc-hero-placeholder,body.seo-page .seo-hero-placeholder{border-style:solid;border-color:transparent;background:none;overflow:hidden}
.svc-hero-placeholder img,body.seo-page .seo-hero-placeholder img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

/* ---------- PPC-only: "beyond the click" funnel row ---------- */
/* No SEO-page equivalent, so scoped to body.ppc-page specifically rather
   than the shared body:is(.seo-page,.ppc-page) selector above. Reuses the
   existing (shared, unscoped) .jstep pill styling/auto-cycle JS. */
body.ppc-page .ppc-funnel-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:8px 0 30px}
body.ppc-page .ppc-funnel-row .jstep{margin-top:0}
body.ppc-page .ppc-funnel-arrow{width:20px;height:20px;color:var(--border);flex-shrink:0}
@media (max-width:640px){
  body.ppc-page .ppc-funnel-arrow{transform:rotate(90deg)}
}

/* ==========================================================================
   ==========================================================================
   HOME PAGE — SCOPED REDESIGN (body.home-page)

   Nothing above this line is modified. Every selector below is scoped
   under ".home-page" so none of it can ever apply to SEO.html (which
   never carries that class). SEO.html's CSS, layout, animations and
   responsive behaviour are completely untouched.
   ==========================================================================
   ========================================================================== */

/* ---------- 1. Home Page base ---------- */
.home-page{
  --home-blue:#1A237E;
  --home-blue-2:#3949AB;
  --home-blue-bright:#4457e6;
  --home-navy:#10154a;
  --home-navy-2:#1d2778;
  --home-accent:#2f8fef;
  --home-accent-2:#8ec9ff;
  --home-check-gradient:linear-gradient(135deg,var(--home-accent),var(--home-accent-2));
  --home-bg:#f6f7fc;
  --home-ink:#12132b;
  --home-muted:#5c6088;
  --home-faint:#8b8fb5;
  --home-border:#e7e9f6;
  --home-r-sm:12px;
  --home-r-md:20px;
  --home-r-lg:32px;
  --home-shadow-sm:0 2px 14px rgba(16,20,74,.07);
  --home-shadow-md:0 16px 40px rgba(16,20,74,.12);
  --home-shadow-lg:0 30px 80px rgba(16,20,74,.22);
  --home-ease:cubic-bezier(.22,1,.36,1);
  --home-ease-out:cubic-bezier(.16,1,.3,1);
  --home-header-h:88px;
  --home-orbit-r-outer:200px;
  --home-orbit-r-inner:128px;
  background:var(--home-bg);
}
.home-page .bg-anim{display:none}
.home-page main{display:block;overflow:hidden}
.home-page h1,.home-page h2,.home-page h3,.home-page h4{font-family:var(--font-head);color:var(--home-ink);line-height:1.14;font-weight:700;letter-spacing:-.01em}
.home-page p{color:var(--home-muted)}
.home-page svg{display:block}
.home-page .home-text-accent{
  background:linear-gradient(100deg,var(--home-blue),var(--home-blue-bright) 55%,var(--home-accent) 115%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% auto;animation:homeGradientShift 7s ease-in-out infinite;
}
.home-page .home-text-accent-light{color:#fff;opacity:.94}
@keyframes homeGradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.home-page .home-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--home-blue-2);background:rgba(57,73,171,.08);padding:8px 16px;border-radius:999px;margin-bottom:20px;
  border:1px solid rgba(57,73,171,.16);
}
.home-page .home-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--home-accent);flex-shrink:0}
.home-page .home-eyebrow-light{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}
.home-page .home-eyebrow-light::before{background:#fff}

.home-page .home-section-head{max-width:1000px;margin:0 auto 2px; text-align: center;}
.home-page .home-section-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-bottom:14px}
.home-page .home-section-head p{font-size:1.05rem}

.home-page .home-reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--home-ease-out),transform .8s var(--home-ease-out)}
.home-page .home-reveal.home-in-view{opacity:1;transform:none}
.home-page .home-reveal-d1{transition-delay:.1s}
.home-page .home-reveal-d2{transition-delay:.2s}
.home-page .home-reveal-d3{transition-delay:.32s}

/* ---------- 9. Buttons ---------- */
.home-page .home-btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;
  font-weight:600;font-size:.96rem;white-space:nowrap;
  transition:transform .35s var(--home-ease),box-shadow .35s var(--home-ease),background .35s var(--home-ease),color .35s var(--home-ease),border-color .35s var(--home-ease);
}
.home-page .home-btn svg{width:16px;height:16px;transition:transform .35s var(--home-ease)}
.home-page .home-btn-primary{background:linear-gradient(120deg,var(--home-blue),var(--home-blue-bright));color:#fff;box-shadow:var(--home-shadow-md)}
.home-page .home-btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(26,35,126,.32)}
.home-page .home-btn-primary:hover svg{transform:translateX(5px)}
.home-page .home-btn-primary:active{transform:translateY(-1px) scale(.98)}
.home-page .home-btn-ghost{border:1.5px solid var(--home-border);color:var(--home-blue);background:#fff}
.home-page .home-btn-ghost:hover{border-color:var(--home-blue-bright);background:var(--home-bg);transform:translateY(-3px);box-shadow:var(--home-shadow-sm)}
.home-page .home-btn-white{background:#fff;color:var(--home-blue)}
.home-page .home-btn-white:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(0,0,0,.22)}
.home-page .home-btn-outline-light{border:1.5px solid rgba(255,255,255,.38);color:#fff}
.home-page .home-btn-outline-light:hover{background:rgba(255,255,255,.14);transform:translateY(-3px)}
.home-page .home-btn:focus-visible{outline:2px solid var(--home-accent);outline-offset:3px}

/* ---------- 2. Header ---------- */
.home-page .home-header{position:fixed;top:0;left:0;right:0;z-index:200;padding:22px 0;transition:padding .4s var(--home-ease),background .4s var(--home-ease),box-shadow .4s var(--home-ease)}
.home-page .home-header.home-scrolled{
  padding:12px 0;background:rgba(255,255,255,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 6px 30px rgba(16,20,74,.08);border-bottom:1px solid var(--home-border);
}
.home-page .home-header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}

.home-page .home-logo{display:flex;align-items:center;gap:12px}
.home-page .home-logo-mark{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--home-blue),var(--home-blue-bright));color:#fff;
  font-family:var(--font-head);font-weight:800;font-size:1.15rem;box-shadow:var(--home-shadow-sm);
}
/* Sized specifically for the brand mark (not a generic icon/image box).
   If a real logo image is dropped into .home-logo-mark later, it fills this
   exact footprint without stretching or distortion. */
.home-page .home-logo-mark img{width:100%;height:100%;object-fit:contain;border-radius:inherit}
.home-page .home-logo-text{display:flex;flex-direction:column;line-height:1.15;font-family:var(--font-head);font-weight:800;color:var(--home-ink);font-size:1.05rem}
.home-page .home-logo-text em{font-style:normal;font-weight:500;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--home-muted)}
.home-page .home-logo-img{display:block;height:55px;width:auto}

.home-page .home-nav{display:flex;align-items:center;gap:4px}
.home-page .home-nav-link{
  padding:11px 18px;border-radius:999px;font-weight:600;font-size:.94rem;color:var(--home-ink);
  display:flex;align-items:center;gap:6px;position:relative;transition:background .3s var(--home-ease),color .3s var(--home-ease);
}
.home-page .home-nav-link::after{
  content:"";position:absolute;left:18px;right:18px;bottom:6px;height:2px;background:var(--home-blue-bright);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--home-ease);border-radius:2px;
}
.home-page .home-nav-link:hover{background:rgba(57,73,171,.07);color:var(--home-blue-2)}
.home-page .home-nav-link:hover::after{transform:scaleX(1)}
.home-page .home-nav-link:focus-visible{outline:2px solid var(--home-accent);outline-offset:2px}
.home-page .home-nav-item{position:relative}
.home-page .home-dd-caret{width:13px;height:13px;transition:transform .3s var(--home-ease)}
.home-page .home-nav-item.home-open .home-dd-caret{transform:rotate(180deg)}
.home-page .home-nav-item.home-open>.home-nav-link{background:rgba(57,73,171,.07);color:var(--home-blue-2)}

/* ---------- 3/4. Dropdowns ---------- */
.home-page .home-dropdown{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,10px);
  background:#fff;border:1px solid var(--home-border);border-radius:var(--home-r-md);
  box-shadow:var(--home-shadow-lg);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--home-ease-out),transform .3s var(--home-ease-out),visibility .3s;z-index:50;
}
.home-page .home-nav-item.home-open .home-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.home-page .home-dropdown::before{
  content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:12px;height:12px;background:#fff;border-left:1px solid var(--home-border);border-top:1px solid var(--home-border);border-radius:3px 0 0 0;
}
.home-page .home-dropdown-services{width:min(600px,86vw);padding:18px}
.home-page .home-dropdown-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.home-page .home-dropdown-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--home-r-sm);transition:background .25s var(--home-ease),transform .25s var(--home-ease)}
.home-page .home-dropdown-item:hover,.home-page .home-dropdown-item:focus-visible{background:var(--home-bg);transform:translateX(3px)}
.home-page .home-dd-icon{
  width:38px;height:38px;border-radius:10px;background:rgba(57,73,171,.08);color:var(--home-blue-2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .25s,color .25s,transform .25s var(--home-ease);
}
.home-page .home-dd-icon svg{width:18px;height:18px}
.home-page .home-dropdown-item:hover .home-dd-icon{background:var(--home-blue-2);color:#fff;transform:scale(1.06)}
.home-page .home-dd-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.home-page .home-dd-text strong{font-size:.9rem;font-weight:600;color:var(--home-ink)}
.home-page .home-dd-text small{font-size:.75rem;color:var(--home-faint)}
.home-page .home-dropdown-footer{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding-top:14px;
  border-top:1px solid var(--home-border);font-size:.82rem;font-weight:700;color:var(--home-blue-2);letter-spacing:.02em;transition:gap .25s var(--home-ease);
}
.home-page .home-dropdown-footer svg{width:14px;height:14px;transition:transform .25s var(--home-ease)}
.home-page .home-dropdown-footer:hover{gap:12px}
.home-page .home-dropdown-footer:hover svg{transform:translateX(3px)}
.home-page .home-dropdown-insights{width:250px;padding:10px;left:0;transform:translate(0,10px)}
.home-page .home-nav-item.home-open .home-dropdown-insights{transform:translate(0,0)}
.home-page .home-dropdown-insights::before{left:28px}

.home-page .home-header-actions{display:flex;align-items:center;gap:16px}
.home-page .home-nav-toggle{display:none;flex-direction:column;gap:5px;padding:8px;z-index:210}
/* Book Free Consultation link inside the mobile slide-out nav — hidden on
   desktop (the header-actions button already covers it there); revealed at
   the ≤900px tablet breakpoint below, once the header button itself hides,
   so mobile visitors always have one tap to the consultation popup. */
.home-page .home-nav-cta{display:none}
.home-page .home-nav-toggle span{width:24px;height:2px;background:var(--home-blue);border-radius:2px;transition:all .3s var(--home-ease)}
.home-page .home-nav-toggle.home-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.home-page .home-nav-toggle.home-open span:nth-child(2){opacity:0}
.home-page .home-nav-toggle.home-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- 5/6/7/8. Hero + Opening / Clock / Anti-clock animation ---------- */
.home-page .home-hero{padding:calc(var(--home-header-h) + 64px) 0 clamp(60px,8vw,100px);position:relative;overflow:hidden}
.home-page .home-hero-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 55% at 82% 8%,rgba(68,87,230,.14),transparent 70%),radial-gradient(50% 45% at 8% 92%,rgba(47,143,239,.10),transparent 70%),var(--home-bg)}
.home-page .home-hero-bg::before{
  content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(26,35,126,.10) 1.4px,transparent 1.4px);background-size:28px 28px;
  mask-image:radial-gradient(ellipse 65% 55% at 65% 15%,#000 40%,transparent 90%);-webkit-mask-image:radial-gradient(ellipse 65% 55% at 65% 15%,#000 40%,transparent 90%);
}
.home-page .home-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.home-page .home-hero-content h1{font-size:clamp(2.5rem,4.6vw,3.7rem);margin:16px 0 18px}
.home-page .home-hero-lead{color:var(--home-muted);font-size:1.08rem;max-width:56ch;margin-bottom:8px}
.home-page .home-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.home-page .home-hero-stats{display:flex;align-items:center;gap:22px;margin-top:40px;flex-wrap:wrap}
.home-page .home-hero-stats>div:not(.home-hero-stat-sep){display:flex;flex-direction:column;gap:2px}
.home-page .home-hero-stats strong{font-family:var(--font-head);font-weight:800;font-size:1.4rem;color:var(--home-ink)}
.home-page .home-hero-stats span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--home-faint)}
.home-page .home-hero-stat-sep{width:1px;height:32px;background:var(--home-border)}

.home-page .home-hero-visual{position:relative;width:100%;max-width:520px;height:520px;margin-inline:auto;animation:homeVisualIntro 1.1s var(--home-ease-out) both}
@keyframes homeVisualIntro{0%{opacity:0;transform:scale(.82) translateY(30px)}100%{opacity:1;transform:scale(1) translateY(0)}}

.home-page .home-orbit-ring{position:absolute;top:50%;left:50%;border-radius:50%;border:1.5px dashed rgba(26,35,126,.22)}
.home-page .home-orbit-outer{width:412px;height:412px;margin:-206px}
.home-page .home-orbit-inner{width:264px;height:264px;margin:-132px}
.home-page .home-clock{animation:homeSpinCW 34s linear infinite}
.home-page .home-anticlock{animation:homeSpinCCW 26s linear infinite}
@keyframes homeSpinCW{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes homeSpinCCW{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}

.home-page .home-sat{position:absolute;top:50%;left:50%;width:0;height:0}
.home-page .home-orbit-outer .home-sat{transform:rotate(var(--angle)) translateX(var(--home-orbit-r-outer))}
.home-page .home-orbit-inner .home-sat{transform:rotate(var(--angle)) translateX(var(--home-orbit-r-inner))}
.home-page .home-sat-icon{
  position:absolute;top:0;left:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:14px;background:#fff;
  box-shadow:var(--home-shadow-md);display:flex;align-items:center;justify-content:center;color:var(--home-blue-2);border:1px solid var(--home-border);
}
.home-page .home-sat-icon svg{width:20px;height:20px}
.home-page .home-clock .home-sat-icon{animation:homeSpinCCW 34s linear infinite}
.home-page .home-anticlock .home-sat-icon{animation:homeSpinCW 26s linear infinite}

.home-page .home-orbit-core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:118px;height:118px;border-radius:32px;
  background:linear-gradient(140deg,var(--home-navy),var(--home-blue-2));color:#fff;box-shadow:var(--home-shadow-lg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;animation:homeCorePulse 4.5s ease-in-out infinite;
}
.home-page .home-orbit-core svg{width:26px;height:26px}
.home-page .home-orbit-core span{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
@keyframes homeCorePulse{0%,100%{box-shadow:var(--home-shadow-lg)}50%{box-shadow:0 30px 90px rgba(26,35,126,.36),0 0 0 10px rgba(68,87,230,.08)}}

.home-page .home-float-card,.home-page .home-float-pill{position:absolute;opacity:0;transition:opacity 1s var(--home-ease-out);z-index:5}
.home-page .home-float-card.home-in-view,.home-page .home-float-pill.home-in-view{opacity:1}
.home-page .home-float-card{background:#fff;border:1px solid var(--home-border);border-radius:var(--home-r-md);box-shadow:var(--home-shadow-md);animation:homeFloat 6s ease-in-out infinite}
.home-page .home-float-perf{top:2%;left:-6%;padding:16px 18px;width:190px;transition-delay:.15s;animation-delay:0s}
.home-page .home-float-label{display:block;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--home-faint);font-weight:700}
.home-page .home-float-value{display:block;font-family:var(--font-head);font-weight:800;font-size:1.3rem;color:var(--home-ink);margin-top:4px}
.home-page .home-float-value em{font-style:normal;color:#1fa463;font-size:.8rem;margin-left:4px}
.home-page .home-float-bars{display:flex;align-items:flex-end;gap:3px;height:18px;margin-top:10px}
.home-page .home-float-bars i{display:block;width:6px;border-radius:2px;background:linear-gradient(180deg,var(--home-blue-bright),var(--home-blue))}
.home-page .home-float-bars i:nth-child(1){height:30%}
.home-page .home-float-bars i:nth-child(2){height:50%}
.home-page .home-float-bars i:nth-child(3){height:40%}
.home-page .home-float-bars i:nth-child(4){height:70%}
.home-page .home-float-bars i:nth-child(5){height:85%}
.home-page .home-float-bars i:nth-child(6){height:100%}
.home-page .home-float-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font-size:.78rem;font-weight:700;color:var(--home-ink);background:#fff;border:1px solid var(--home-border);box-shadow:var(--home-shadow-sm);animation:homeFloat 5.4s ease-in-out infinite}
.home-page .home-float-pill svg{width:15px;height:15px;color:#1fa463}
.home-page .home-float-google{top:0;right:6%;transition-delay:.3s;animation-delay:.6s}
.home-page .home-float-growth{bottom:10%;left:-4%;transition-delay:.55s;animation-delay:1.2s}
.home-page .home-float-growth em{font-style:normal;color:#1fa463;margin-left:2px}
.home-page .home-float-ai{bottom:0;right:-2%;width:210px;padding:16px 18px;transition-delay:.45s;animation-delay:1.8s;display:flex;flex-direction:column;gap:4px}
.home-page .home-float-dot{width:8px;height:8px;border-radius:50%;background:#1fa463;position:absolute;top:16px;right:16px;box-shadow:0 0 0 3px rgba(31,164,99,.18)}
.home-page .home-float-ai strong{font-size:.85rem;color:var(--home-ink)}
.home-page .home-float-ai small{font-size:.75rem;color:var(--home-muted)}
@keyframes homeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ---------- Stats band ---------- */
.home-page .home-stats{padding:clamp(50px,6vw,90px) 0 0}
.home-page .home-stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.home-page .home-stat-card{background:#fff;border:1px solid var(--home-border);border-radius:var(--home-r-lg);padding:26px 20px;box-shadow:var(--home-shadow-sm);transition:transform .4s var(--home-ease),box-shadow .4s var(--home-ease),border-color .4s var(--home-ease)}
.home-page .home-stat-card:hover{transform:translateY(-6px);box-shadow:var(--home-shadow-md);border-color:rgba(57,73,171,.25)}
.home-page .home-stat-ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--home-blue),var(--home-blue-bright));color:#fff;font-size:.7rem;font-weight:800;margin-bottom:16px}
.home-page .home-num{display:block;font-family:var(--font-head);font-weight:800;font-size:clamp(1.7rem,2.6vw,2.3rem);color:var(--home-ink)}
.home-page .home-stat-card>span{display:block;font-size:.82rem;color:var(--home-muted);margin-top:4px}
.home-page .home-badges-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}
.home-page .home-trust-badge{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:999px;background:#fff;border:1px solid var(--home-border);font-size:.82rem;font-weight:600;color:var(--home-muted);box-shadow:var(--home-shadow-sm);transition:all .3s var(--home-ease)}
.home-page .home-trust-badge:hover{color:var(--home-blue-2);border-color:var(--home-blue-2);transform:translateY(-2px)}
.home-page .home-trust-badge svg{width:16px;height:16px;color:var(--home-accent)}

/* ---------- About / Strategy ---------- */
.home-page .home-strategy{padding:clamp(70px,4vw,130px) 0}
.home-page .home-strategy-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.home-page .home-strategy-visual{position:relative;aspect-ratio:1/.86;display:flex;align-items:center;justify-content:center;overflow:hidden}
.home-page .home-strategy-visual-img{padding:0}
.home-page .home-strategy-img{width:100%;height:100%;object-fit:cover;display:block}
.home-page .home-strategy-art{position:relative;width:42%;color:var(--home-blue-2)}
.home-page .home-strategy-art svg{width:100%;height:auto}
.home-page .home-art-ring{position:absolute;inset:-38%;border-radius:50%;border:1.5px dashed rgba(57,73,171,.28);animation:homeSpinCW 40s linear infinite}
.home-page .home-float-tag{position:absolute;background:#fff;border:1px solid var(--home-border);border-radius:999px;padding:9px 16px;font-size:.76rem;font-weight:700;color:var(--home-ink);box-shadow:var(--home-shadow-sm)}
.home-page .home-tag-top{top:8%;right:2%}
.home-page .home-tag-mid{top:44%;left:-6%}
.home-page .home-tag-bottom{bottom:8%;right:4%}
.home-page .home-strategy-content h2{font-size:clamp(1.9rem,3.4vw,2.5rem);margin-bottom:18px}
.home-page .home-strategy-content p{margin-bottom:14px}
.home-page .home-strategy-content strong{color:var(--home-ink)}
.home-page .home-strategy-features{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.home-page .home-feature-chip{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px;border-radius:var(--home-r-md);border:1px solid var(--home-border);background:#fff;font-size:.86rem;font-weight:700;color:var(--home-ink);transition:all .35s var(--home-ease)}
.home-page .home-feature-chip:hover{border-color:var(--home-blue-2);box-shadow:var(--home-shadow-sm);transform:translateY(-4px)}
.home-page .home-feature-chip .home-dd-icon{background:rgba(57,73,171,.08)}

/* ---------- 11/12. Services + cards ---------- */
.home-page .home-services{padding:clamp(70px,4vw,130px) 0}
.home-page .home-services-wrap{display:flex;flex-direction:column;gap:26px}
.home-page .home-service-tabs-scroll{overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}
.home-page .home-service-tabs{display:inline-flex;gap:8px;background:#fff;border:1px solid var(--home-border);border-radius:999px;padding:6px;box-shadow:var(--home-shadow-sm)}
.home-page .home-service-tab{display:flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;white-space:nowrap;font-weight:600;font-size:.86rem;color:var(--home-muted);transition:all .3s var(--home-ease)}
.home-page .home-service-tab .home-tnum{font-size:.72rem;font-weight:700;opacity:.6}
.home-page .home-service-tab:hover{background:var(--home-bg);color:var(--home-ink)}
.home-page .home-service-tab.home-active{background:linear-gradient(120deg,var(--home-blue),var(--home-blue-bright));color:#fff;box-shadow:var(--home-shadow-sm)}
.home-page .home-service-tab.home-active .home-tnum{opacity:.85}

/* Slider wrap — arrows/dots are mobile-only (see ~680 breakpoint); no-op on desktop/tablet */
.home-page .home-service-slider{display:flex;align-items:center;gap:16px;max-width:100%}
.home-page .home-service-arrow{display:none;flex:0 0 auto;padding:0;cursor:pointer;font:inherit}
.home-page .home-service-dots{display:none}

.home-page .home-service-panel{display:grid;grid-template-columns:.9fr 1.1fr;border-radius:var(--home-r-lg);overflow:hidden;border:1px solid var(--home-border);box-shadow:var(--home-shadow-md);background:#fff;min-height:440px;min-width:0;max-width:100%}
.home-page .home-service-visual{background:linear-gradient(150deg,var(--home-navy),var(--home-blue-2));color:#fff;padding:34px;position:relative;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.home-page .home-service-visual-top{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;font-weight:700;letter-spacing:.06em;opacity:.75}
.home-page .home-service-visual-mid{position:relative;display:flex;align-items:center;justify-content:center;flex:1;margin:20px 0}
.home-page .home-service-visual-icon{position:relative;z-index:1;width:88px;height:88px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);display:flex;align-items:center;justify-content:center;animation:homeCorePulse 5s ease-in-out infinite}
.home-page .home-service-visual-icon svg{width:38px;height:38px}
.home-page .home-service-glow{position:absolute;z-index:0;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2),rgba(255,255,255,0) 68%);animation:homeGlowPulse 5s ease-in-out infinite}
.home-page .home-service-grid{position:absolute;z-index:0;inset:-12%;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(circle,#000 42%,transparent 78%);mask-image:radial-gradient(circle,#000 42%,transparent 78%)}
.home-page .home-service-lines{position:absolute;z-index:0;inset:0;width:100%;height:100%;overflow:visible}
.home-page .home-service-lines line{stroke:rgba(255,255,255,.22);stroke-width:.5;stroke-dasharray:2 2.4}
.home-page .home-service-lines circle{fill:rgba(255,255,255,.6)}
@keyframes homeGlowPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.95;transform:scale(1.08)}}
.home-page .home-service-ring{position:absolute;width:150px;height:150px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.28);animation:homeSpinCW 34s linear infinite}
.home-page .home-service-ring-inner{width:104px;height:104px;border:1px dashed rgba(255,255,255,.18);animation:homeSpinCCW 22s linear infinite}
.home-page .home-service-ring-outermost{width:206px;height:206px;border-color:rgba(255,255,255,.14);animation:homeSpinCCW 46s linear infinite}
.home-page .home-service-chip{position:absolute;z-index:1;display:inline-flex;align-items:center;max-width:62%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:7px 13px;font-size:.68rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 8px 18px rgba(15,20,50,.18)}
.home-page .home-service-chip-a{top:2%;left:0}
.home-page .home-service-chip-b{bottom:4%;right:0}
.home-page .home-service-chip-c{top:22%;right:0;background:rgba(255,255,255,.1)}
.home-page .home-service-chip-d{bottom:28%;left:0;background:rgba(255,255,255,.1)}
.home-page .home-service-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;opacity:.55}
.home-page .home-service-dot-1{top:12%;right:14%;animation:homeDotFloat 3.2s ease-in-out infinite}
.home-page .home-service-dot-2{bottom:16%;left:10%;animation:homeDotFloat 3.6s ease-in-out infinite .4s}
.home-page .home-service-dot-3{top:50%;left:2%;animation:homeDotFloat 4s ease-in-out infinite .8s}
.home-page .home-service-dot-4{top:34%;right:8%;width:5px;height:5px;animation:homeDotFloat 3.8s ease-in-out infinite .2s}
.home-page .home-service-dot-5{bottom:40%;right:24%;width:5px;height:5px;animation:homeDotFloat 4.4s ease-in-out infinite .6s}
@keyframes homeDotFloat{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-8px);opacity:.85}}
.home-page .home-service-visual-stats{display:flex;gap:12px}
.home-page .home-service-visual-stats div{background:rgba(255,255,255,.1);border-radius:var(--home-r-sm);padding:12px 14px;flex:1}
.home-page .home-service-visual-stats strong{display:block;font-size:1.05rem;font-weight:800}
.home-page .home-service-visual-stats span{font-size:.66rem;opacity:.75;letter-spacing:.05em;text-transform:uppercase}

.home-page .home-service-info{padding:38px;min-width:0}
.home-page .home-service-info .home-snum{display:block;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--home-blue-2);margin-bottom:12px}
.home-page .home-service-info h3{font-size:1.7rem;margin-bottom:14px}
.home-page .home-service-info p{margin-bottom:20px}
.home-page .home-check-list{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.home-page .home-check-item{display:flex;align-items:center;gap:10px;font-size:.92rem;font-weight:500;color:var(--home-ink)}
.home-page .home-check-item svg{width:18px;height:18px;color:#fff;background:var(--tick-gradient);border-radius:50%;padding:3px;flex-shrink:0}
.home-page .home-service-actions{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.home-page .home-service-link{font-weight:700;font-size:.9rem;color:var(--home-muted);transition:color .3s}
.home-page .home-service-link:hover{color:var(--home-blue-2)}

/* ---------- Outcomes ---------- */
.home-page .home-outcomes{padding:clamp(60px,4vw,110px) 0}
.home-page .home-outcomes-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:44px}
.home-page .home-outcomes-head h2{font-size:clamp(1.9rem,3.2vw,2.5rem);margin-bottom:10px}
.home-page .home-outcomes-head p{max-width:52ch}
.home-page .home-outcomes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.home-page .home-case-card{background:linear-gradient(150deg,var(--home-navy),var(--home-blue-2));color:#fff;border-radius:var(--home-r-lg);padding:30px;display:flex;flex-direction:column;transition:transform .4s var(--home-ease),box-shadow .4s var(--home-ease);box-shadow:var(--home-shadow-sm)}
.home-page .home-case-card:hover{transform:translateY(-8px);box-shadow:var(--home-shadow-lg)}
.home-page .home-case-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.home-page .home-case-ic{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
.home-page .home-case-ic svg{width:19px;height:19px}
.home-page .home-case-tag{font-size:.7rem;font-weight:700;letter-spacing:.08em;opacity:.7}
.home-page .home-case-stat{font-family:var(--font-head);font-size:2.2rem;font-weight:800}
.home-page .home-case-label{font-size:.82rem;opacity:.8;text-transform:uppercase;letter-spacing:.05em;margin-bottom:18px}
.home-page .home-case-meta{font-size:.68rem;font-weight:700;letter-spacing:.08em;color:var(--home-accent-2);margin-bottom:8px}
.home-page .home-case-card h3{color:#fff;font-size:1.05rem;margin-bottom:8px}
.home-page .home-case-card p{color:rgba(255,255,255,.7);font-size:.85rem}

/* ---------- Launch banner ---------- */
.home-page .home-launch{padding:clamp(30px,4vw,50px) 0}
.home-page .home-launch-box{background:linear-gradient(120deg,var(--home-navy),var(--home-blue-2) 65%,var(--home-blue-bright));border-radius:var(--home-r-lg);padding:clamp(36px,5vw,64px);display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;position:relative;overflow:hidden;box-shadow:var(--home-shadow-lg)}
.home-page .home-launch-box::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1.4px,transparent 1.4px);background-size:26px 26px}
.home-page .home-launch-content{position:relative;z-index:1}
.home-page .home-launch-content h2{color:#fff;font-size:clamp(1.7rem,2.8vw,2.3rem);margin-bottom:14px}
.home-page .home-launch-content p{color:rgba(255,255,255,.8);max-width:48ch;margin-bottom:22px}
.home-page .home-launch-cta{display:flex;gap:14px;flex-wrap:wrap}
.home-page .home-launch-art{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:220px}
.home-page .home-launch-art-img{height:auto;aspect-ratio:1/1;max-width:280px;margin-inline:auto;width:100%}
.home-page .home-launch-img{width:100%;height:100%;object-fit:cover;border-radius:var(--home-r-lg);border:1px solid rgba(255,255,255,.24);box-shadow:0 20px 50px rgba(10,14,40,.35)}
.home-page .home-rocket{width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#fff;animation:homeRocketFloat 4s ease-in-out infinite}
.home-page .home-rocket svg{width:50px;height:50px;color:var(--home-accent-2)}
@keyframes homeRocketFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-16px) rotate(4deg)}}
.home-page .home-orbit-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;opacity:.6}
.home-page .home-dot-1{top:15%;left:20%;animation:homeFloat 5s ease-in-out infinite}
.home-page .home-dot-2{bottom:20%;right:15%;animation:homeFloat 6s ease-in-out infinite 1s}
.home-page .home-dot-3{top:55%;right:30%;animation:homeFloat 4.5s ease-in-out infinite .5s}

/* ---------- 10. Journey ("A journey engineered for real business growth.") ---------- */
.home-page .home-journey{padding:clamp(70px,9vw,70px) 0;background:linear-gradient(180deg,var(--home-navy),#161d5e 55%,var(--home-navy));position:relative}
.home-page .home-journey-head{max-width:1000px;margin:0 auto 48px; text-align: center;}
.home-page .home-journey-head h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:14px}
.home-page .home-journey-head p{color:rgba(255,255,255,.72);font-size:1.05rem}
.home-page .home-journey-box{background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);border-radius:var(--home-r-lg);padding:clamp(26px,4vw,44px);backdrop-filter:blur(10px)}
.home-page .home-journey-card{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;min-height:120px}
.home-page .home-jc-icon{width:74px;height:74px;border-radius:20px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;transition:transform .4s var(--home-ease)}
.home-page .home-jc-icon svg{width:32px;height:32px}
.home-page .home-jc-body{min-width:0}
.home-page .home-jc-kicker{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--home-accent-2);margin-bottom:8px}
.home-page .home-jc-body h3{color:#fff;font-size:1.6rem;margin-bottom:8px}
.home-page .home-jc-body p{color:rgba(255,255,255,.72)}
.home-page .home-jc-stats{display:flex;flex-direction:column;gap:10px;flex-shrink:0}
.home-page .home-jc-stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--home-r-sm);padding:12px 18px;min-width:130px;text-align:center}
.home-page .home-jc-stat strong{display:block;color:#fff;font-size:1.1rem;font-weight:800}
.home-page .home-jc-stat span{display:block;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:2px}
.home-page .home-journey-progress{height:5px;border-radius:4px;background:rgba(255,255,255,.12);margin:26px 0 22px;overflow:hidden}
.home-page .home-journey-progress-fill{display:block;height:100%;width:12.5%;background:linear-gradient(90deg,var(--home-accent),var(--home-accent-2));border-radius:4px;transition:width .5s var(--home-ease)}
.home-page .home-journey-nav{display:flex;justify-content:space-between;gap:14px}
.home-page .home-journey-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:700;font-size:.86rem;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);transition:all .3s var(--home-ease)}
.home-page .home-journey-btn:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.home-page .home-journey-btn:disabled{opacity:.35;pointer-events:none}
.home-page .home-journey-btn svg{width:15px;height:15px}
.home-page .home-journey-btn-primary{background:linear-gradient(120deg,var(--home-accent),var(--home-accent-2));border-color:transparent;color:var(--home-navy)}
.home-page .home-journey-track-wrap{overflow-x:auto;margin-top:40px;padding-bottom:6px}
.home-page .home-journey-track{display:flex;align-items:flex-start;justify-content:space-between;min-width:760px;position:relative}
.home-page .home-jt-node{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1;position:relative;cursor:pointer;background:none;border:none;color:inherit}
.home-page .home-jt-node::before{content:"";position:absolute;top:22px;left:-50%;width:100%;height:2px;background:rgba(255,255,255,.16);z-index:0}
.home-page .home-jt-node:first-child::before{display:none}
.home-page .home-jt-circle{width:55px;height:55px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);position:relative;z-index:1;transition:all .4s var(--home-ease)}
.home-page .home-jt-circle svg{width:18px;height:18px}
.home-page .home-jt-node span{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.55);letter-spacing:.03em;transition:color .3s}
.home-page .home-jt-node .home-jt-num{position:absolute;top:5px;font-size:.6rem;color:rgba(255,255,255,.4);letter-spacing:.08em}
.home-page .home-jt-node.home-active .home-jt-circle{background:linear-gradient(135deg,var(--home-accent),var(--home-accent-2));border-color:transparent;color:var(--home-navy);transform:scale(1.14);box-shadow:0 10px 26px rgba(47,143,239,.4)}
.home-page .home-jt-node.home-active span{color:#fff}
.home-page .home-jt-node.home-done .home-jt-circle{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.3)}
.home-page .home-jt-node:hover .home-jt-circle{transform:scale(1.08)}
.home-page .home-jt-node:focus-visible .home-jt-circle{outline:2px solid var(--home-accent-2);outline-offset:3px}

/* ---------- Logo slider (continuous marquee) ---------- */
.home-page .home-logo-marquee{padding:clamp(46px,6vw,64px) 0}
.home-page .home-logo-marquee-label{
  text-align:center;font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--home-faint);margin-bottom:30px;
}
.home-page .home-logo-marquee-wrap{
  overflow:hidden;position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.home-page .home-logo-marquee-track{
  display:flex;align-items:center;gap:clamp(48px,6vw,86px);width:max-content;
  animation:scrollLeft 18s linear infinite;will-change:transform;
}
/* Pause on hover, resume automatically once the pointer leaves */
.home-page .home-logo-marquee-wrap:hover .home-logo-marquee-track{animation-play-state:paused}
.home-page .home-logo-item{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
  font-family:var(--font-head);font-weight:700;font-size:1.05rem;color:var(--home-faint);
  white-space:nowrap;opacity:.75;filter:grayscale(1);transition:opacity .35s var(--home-ease),filter .35s var(--home-ease),color .35s var(--home-ease);
}
.home-page .home-logo-item:hover{opacity:1;filter:grayscale(0);color:var(--home-blue-2)}
.home-page .home-logo-item svg{width:26px;height:26px;flex-shrink:0}
@media (prefers-reduced-motion: reduce){
  .home-page .home-logo-marquee-track{animation:none}
}

/* ---------- Insights ---------- */
.home-page .home-insights{padding:clamp(70px,9vw,120px) 0}
.home-page .home-insights-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.home-page .home-insights-links{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.home-page .home-insight-link{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--home-r-md);border:1px solid var(--home-border);background:#fff;font-weight:600;transition:all .3s var(--home-ease)}
.home-page .home-insight-link span:nth-child(2){flex:1;color:var(--home-ink)}
.home-page .home-insight-link .home-arrow{width:16px;height:16px;color:var(--home-faint);transition:transform .3s var(--home-ease)}
.home-page .home-insight-link:hover{border-color:var(--home-blue-2);box-shadow:var(--home-shadow-sm);transform:translateX(4px)}
.home-page .home-insight-link:hover .home-arrow{transform:translateX(4px);color:var(--home-blue-2)}
.home-page .home-insights-card{background:linear-gradient(150deg,var(--home-navy),var(--home-blue-2));color:#fff;border-radius:var(--home-r-lg);padding:clamp(30px,4vw,44px);box-shadow:var(--home-shadow-md)}
.home-page .home-insights-kicker{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.1em;color:var(--home-accent-2);margin-bottom:14px}
.home-page .home-insights-card h3{color:#fff;font-size:1.5rem;margin-bottom:12px}
.home-page .home-insights-card p{color:rgba(255,255,255,.75);margin-bottom:22px}
.home-page .home-insights-search{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:14px 18px;font-size:.88rem;color:rgba(255,255,255,.8);margin-bottom:22px}
.home-page .home-insights-search svg{width:17px;height:17px;flex-shrink:0}
.home-page .home-insights-card .home-btn-ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.24)}
.home-page .home-insights-card .home-btn-ghost:hover{background:rgba(255,255,255,.14)}

/* ---------- FAQ ---------- */
.home-page .home-faq{padding:clamp(70px,9vw,70px) 0}
.home-page .home-faq-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.home-page .home-faq-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.home-page .home-faq-visual{margin-top:32px;margin-bottom:-180px;border-radius:var(--home-r-lg);overflow:hidden;aspect-ratio:1/.9}
.home-page .home-faq-img{width:360px;object-fit:cover;display:block}
.home-page .home-pill{padding:9px 18px;border-radius:999px;border:1px solid var(--home-border);font-size:.82rem;font-weight:700;color:var(--home-muted);background:#fff;transition:all .3s var(--home-ease)}
.home-page .home-pill:hover{border-color:var(--home-blue-2);color:var(--home-blue-2)}
.home-page .home-pill.home-active{background:var(--home-blue);border-color:var(--home-blue);color:#fff}
.home-page .home-faq-list{display:flex;flex-direction:column;gap:12px}
.home-page .home-faq-item{border:1px solid var(--home-border);border-radius:var(--home-r-md);background:#fff;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.home-page .home-faq-item.home-open{border-color:var(--home-blue-2);box-shadow:var(--home-shadow-sm)}
.home-page .home-faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;width:100%;text-align:left;font-weight:600;font-size:.98rem;color:var(--home-ink)}
.home-page .home-faq-q .home-qicon{width:28px;height:28px;border-radius:50%;background:var(--home-bg);color:var(--home-blue-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem;transition:transform .35s var(--home-ease),background .3s}
.home-page .home-faq-item.home-open .home-qicon{background:var(--home-blue-2);color:#fff;transform:rotate(135deg)}
.home-page .home-faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--home-ease)}
.home-page .home-faq-a p{padding:0 22px 20px;color:var(--home-muted);font-size:.94rem}

/* ---------- Final CTA ---------- */
.home-page .home-cta{padding:clamp(40px,6vw,80px) 0 clamp(70px,9vw,80px)}
.home-page .home-cta-grid{background:linear-gradient(135deg,var(--home-navy),var(--home-blue-2) 60%,var(--home-blue-bright));border-radius:var(--home-r-lg);padding:clamp(36px,5vw,64px);display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;position:relative;overflow:hidden;box-shadow:var(--home-shadow-lg)}
.home-page .home-cta-grid::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1.4px,transparent 1.4px);background-size:24px 24px}
.home-page .home-cta-grid>div:first-child{position:relative;z-index:1}
.home-page .home-cta h2{color:#fff;font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:16px}
.home-page .home-cta p{color:rgba(255,255,255,.82);margin-bottom:12px;max-width:52ch}
.home-page .home-cta-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.home-page .home-cta-visual{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:260px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--home-r-lg);
  box-shadow:0 20px 50px rgba(8,12,40,.25);overflow:hidden;
}
.home-page .home-cta-visual svg{width:100%;height:100%;padding:30px}

/* ---------- 13. Footer ---------- */
.home-page .home-footer{background:var(--home-navy);color:#c7c9e8;padding:70px 0 26px}
.home-page .home-footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.home-page .home-footer-brand .home-logo-text{color:#fff}
.home-page .home-footer-brand .home-logo-text em{color:#9aa4ff}
.home-page .home-footer-brand p{color:#9497c4;margin-top:16px;font-size:.92rem;max-width:32ch}
.home-page .home-footer-social{display:flex;gap:10px;margin-top:20px}
.home-page .home-footer-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;transition:all .3s var(--home-ease)}
.home-page .home-footer-social a:hover{background:var(--home-blue-bright);border-color:var(--home-blue-bright);transform:translateY(-3px)}
.home-page .home-footer-social svg{width:16px;height:16px}
.home-page .home-footer-col h4{color:#fff;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px;font-family:var(--font-head)}
.home-page .home-footer-col a{display:block;color:#9497c4;font-size:.92rem;padding:6px 0;transition:color .25s,transform .25s}
.home-page .home-footer-col a:hover{color:#fff;transform:translateX(4px)}
.home-page .home-footer-contact-address{display:block;color:#9497c4;font-size:.92rem;padding:6px 0;font-style:normal;line-height:1.5}
.home-page .home-footer-contact-address a{display:inline;color:inherit;padding:0;text-decoration:none;transition:color .25s}
.home-page .home-footer-contact-address a:hover{color:#fff;text-decoration:underline}
.home-page .home-footer-contact-hours{color:#9497c4;font-size:.92rem;padding:6px 0;margin:0}
.home-page .home-footer-contact-col .home-footer-social{margin-top:14px}
.home-page .home-footer-contact-col .home-footer-social a{display:flex;align-items:center;justify-content:center;padding:0}
.home-page .home-footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;border-top:1px solid rgba(255,255,255,.1);margin-top:50px;padding-top:24px;font-size:.85rem;color:#8285b0}
.home-page .home-footer-bottom a{color:#8285b0}

/* ==========================================================================
   14. Responsive — 1920 / 1366 / 1280 / 768 / 395
   ========================================================================== */

/* ---- ~1920 large desktop ---- */
@media (min-width:1600px){
  .home-page .container{max-width:1360px}
  .home-page{--home-orbit-r-outer:222px;--home-orbit-r-inner:142px}
  .home-page .home-hero-visual{max-width:580px;height:580px}
  .home-page .home-orbit-outer{width:456px;height:456px;margin:-228px}
  .home-page .home-orbit-inner{width:296px;height:296px;margin:-148px}
}

/* ---- ~1366 / ~1280 laptop-desktop: tighten before tablet ---- */
@media (max-width:1400px){
  .home-page .home-hero-grid{gap:44px}
}
@media (max-width:1280px){
  .home-page{--home-orbit-r-outer:174px;--home-orbit-r-inner:110px}
  .home-page .home-hero-visual{max-width:440px;height:440px}
  .home-page .home-orbit-outer{width:360px;height:360px;margin:-180px}
  .home-page .home-orbit-inner{width:230px;height:230px;margin:-115px}
  .home-page .home-sat-icon{width:42px;height:42px;margin:-21px 0 0 -21px}
  .home-page .home-strategy-grid{gap:44px}
  .home-page .home-stats-grid{gap:14px}
}

/* ---- ≤1080: two/one-column pivots before full tablet nav switch ---- */
@media (max-width:1080px){
  .home-page .home-strategy-grid,.home-page .home-insights-grid,.home-page .home-faq-wrap{grid-template-columns:1fr}
  .home-page .home-strategy-visual{order:2;max-width:440px;margin-inline:auto;width:100%}
  .home-page .home-strategy-content{order:1}
  .home-page .home-outcomes-grid{grid-template-columns:1fr 1fr}
  .home-page .home-footer-top{grid-template-columns:1fr 1fr}
}

/* ---- ~768 tablet ---- */
@media (max-width:900px){
  .home-page .home-nav{
    display:none;position:fixed;top:0;right:0;height:100vh;width:82%;max-width:340px;background:#fff;
    flex-direction:column;align-items:stretch;gap:2px;padding:calc(var(--home-header-h) + 16px) 22px 28px;
    box-shadow:-16px 0 50px rgba(16,20,74,.18);z-index:150;overflow-y:auto;
  }
  .home-page .home-nav.home-mobile-open{display:flex;animation:homeNavSlideIn .4s var(--home-ease-out)}
  @keyframes homeNavSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
  .home-page .home-nav-link{padding:16px 14px;font-size:1.05rem}
  .home-page .home-nav-item{width:100%}
  .home-page .home-nav-item>.home-nav-link{width:100%;justify-content:space-between}
  .home-page .home-dropdown{
    position:static;opacity:1;visibility:visible;pointer-events:auto;transform:none;box-shadow:none;border:none;
    max-height:0;overflow:hidden;padding:0;margin-left:8px;transition:max-height .4s var(--home-ease);width:100%;
  }
  .home-page .home-dropdown::before{display:none}
  /* The base (desktop) open-state rule sets `transform:translate(-50%,0)` to
     re-center the absolutely-positioned dropdown under its trigger. That rule
     isn't scoped to a media query, so once this item gets `.home-open` on
     mobile too it out-specifies the plain `.home-dropdown{transform:none}`
     reset just above and drags the now position:static, full-width submenu
     sideways by half its own width — shoving it off the left edge of the
     mobile nav panel and making it look clipped/cut off. Re-assert
     `transform:none` here (same specificity, later in source) so the mobile
     submenu stays put and expands straight down instead. */
  .home-page .home-nav-item.home-open .home-dropdown{max-height:900px;padding:12px 4px;transform:none}
  .home-page .home-nav-item.home-open .home-dropdown-insights{transform:none}
  .home-page .home-dropdown-grid{grid-template-columns:1fr}
  .home-page .home-nav-toggle{display:flex}
  .home-page .home-header-actions .home-btn-primary{display:none}
  .home-page .home-nav-cta{
    display:inline-flex;justify-content:center;width:100%;margin-top:16px;padding-top:20px;
    border-top:1px solid var(--home-border);
  }
  .home-page .home-nav-cta.home-btn{padding:15px 20px}

  .home-page .home-hero-grid{grid-template-columns:1fr;text-align:center}
  .home-page .home-hero-content{order:1}
  .home-page .home-hero-lead{margin-inline:auto}
  .home-page .home-hero-cta,.home-page .home-hero-stats{justify-content:center}
  .home-page .home-hero-visual{order:2;margin-top:36px;max-width:380px;height:380px}
  .home-page{--home-orbit-r-outer:138px;--home-orbit-r-inner:88px}
  .home-page .home-orbit-outer{width:284px;height:284px;margin:-142px}
  .home-page .home-orbit-inner{width:184px;height:184px;margin:-92px}
  .home-page .home-sat-icon{width:38px;height:38px;margin:-19px 0 0 -19px}
  .home-page .home-orbit-core{width:96px;height:96px;border-radius:26px}

  .home-page .home-stats-grid{grid-template-columns:repeat(2,1fr)}
  .home-page .home-service-panel{grid-template-columns:1fr}
  .home-page .home-outcomes-grid{grid-template-columns:1fr}
  .home-page .home-launch-box,.home-page .home-cta-grid{grid-template-columns:1fr;text-align:center}
  .home-page .home-launch-content,.home-page .home-cta-grid>div:first-child{order:1}
  .home-page .home-launch-cta,.home-page .home-cta-actions{justify-content:center}
  .home-page .home-launch-art,.home-page .home-cta-art{order:2}
  .home-page .home-journey-card{grid-template-columns:1fr;text-align:center}
  .home-page .home-jc-icon{margin-inline:auto}
  .home-page .home-jc-stats{flex-direction:row;justify-content:center;flex-wrap:wrap}
  .home-page .home-journey-head{text-align:center}
}

/* ---- ~680: Journey milestone step-tracker icons hidden on mobile only
   (numbered circles get cramped/overlap at narrow widths). Desktop/tablet
   keep the row exactly as-is; Previous/Next + progress bar are untouched
   and stay fully functional on every width. ---- */
@media (max-width:680px){
  .home-page .home-journey-track-wrap{display:none}
}

/* ---- ~680: OUR SERVICES becomes a one-card-at-a-time mobile carousel ---- */
@media (max-width:680px){
  .home-page .home-service-tabs-scroll{display:none}
  .home-page .home-services-wrap{gap:14px}
  .home-page .home-service-slider{gap:8px}
  .home-page .home-service-panel{flex:1 1 auto;min-width:0}
  /* The CTA button's white-space:nowrap (fine at full width) forces this
     narrow, arrow-flanked panel to blow out past its own bounds and get
     clipped by the panel's overflow:hidden -- which is what cut the
     paragraph text off mid-sentence. Letting it wrap on this breakpoint
     keeps the whole card inside the panel width. */
  .home-page .home-service-actions{min-width:0}
  .home-page .home-service-actions .home-btn{white-space:normal;text-align:center}
  .home-page .home-service-arrow{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;border-radius:50%;background:#fff;color:var(--home-blue-2);
    border:1px solid var(--home-border);box-shadow:var(--home-shadow-sm);
    transition:background .25s var(--home-ease),transform .2s var(--home-ease);
  }
  .home-page .home-service-arrow svg{width:18px;height:18px}
  .home-page .home-service-arrow:hover{background:var(--home-bg)}
  .home-page .home-service-arrow:active{transform:scale(.92)}
  .home-page .home-service-dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:2px}
  .home-page .home-service-dot{width:8px;height:8px;padding:0;border:none;border-radius:50%;background:var(--home-border);cursor:pointer;transition:all .3s var(--home-ease)}
  .home-page .home-service-dot.home-active{width:22px;border-radius:5px;background:var(--home-blue-2)}
}
/* Slide-in transition for the auto-advancing service panel — applies at every
   viewport width so the swap always animates instead of cutting instantly. */
.home-page .home-service-panel.home-slide-next{animation:homeServiceSlideNext .5s var(--home-ease-out)}
.home-page .home-service-panel.home-slide-prev{animation:homeServiceSlidePrev .5s var(--home-ease-out)}
@keyframes homeServiceSlideNext{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:translateX(0)}}
@keyframes homeServiceSlidePrev{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:translateX(0)}}
@media (prefers-reduced-motion: reduce){
  .home-page .home-service-panel.home-slide-next,
  .home-page .home-service-panel.home-slide-prev{animation:none}
}

/* ---- ~395 mobile ---- */
@media (max-width:520px){
  .home-page{--home-header-h:76px}
  .home-page .home-header{padding:16px 0}
  .home-page .home-header.home-scrolled{padding:10px 0}
  .home-page .home-logo-mark{width:38px;height:38px;border-radius:10px;font-size:1rem}
  .home-page .home-logo-text{font-size:.92rem}
  .home-page .home-logo-text em{display:none}
  .home-page .home-logo-img{height:32px}
  .home-page .home-nav{width:88%}

  .home-page .home-hero{padding:calc(var(--home-header-h) + 34px) 0 56px}
  .home-page .home-hero-content h1{font-size:clamp(2rem,9vw,2.6rem)}
  .home-page .home-eyebrow{font-size:.64rem;padding:7px 13px}
  .home-page .home-hero-cta{flex-direction:column;align-items:stretch}
  .home-page .home-hero-cta .home-btn{justify-content:center}
  .home-page .home-hero-stats{gap:14px;justify-content:space-between}
  .home-page .home-hero-visual{max-width:270px;height:270px;margin-top:28px}
  .home-page{--home-orbit-r-outer:92px;--home-orbit-r-inner:58px}
  .home-page .home-orbit-outer{width:190px;height:190px;margin:-95px}
  .home-page .home-orbit-inner{width:122px;height:122px;margin:-61px}
  .home-page .home-sat-icon{width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:10px}
  .home-page .home-sat-icon svg{width:15px;height:15px}
  .home-page .home-orbit-core{width:76px;height:76px;border-radius:20px}
  .home-page .home-orbit-core svg{width:20px;height:20px}
  .home-page .home-orbit-core span{font-size:.55rem}
  .home-page .home-float-ai,.home-page .home-float-growth{display:none}
  .home-page .home-float-perf{left:0;width:150px;padding:12px 14px}
  .home-page .home-float-google{right:0}

  .home-page .home-stats-grid{grid-template-columns:1fr 1fr;gap:12px}
  .home-page .home-stat-card{padding:20px 16px}
  .home-page .home-badges-row{flex-direction:column;align-items:stretch}
  .home-page .home-trust-badge{justify-content:center}

  .home-page .home-strategy-features{grid-template-columns:1fr}
  .home-page .home-strategy-visual{aspect-ratio:1/.9}

  .home-page .home-service-info{padding:26px}
  .home-page .home-service-visual{padding:24px}
  .home-page .home-service-info h3{font-size:1.4rem}
  .home-page .home-service-ring{width:120px;height:120px}
  .home-page .home-service-ring-inner{width:80px;height:80px}
  .home-page .home-service-ring-outermost{display:none}
  .home-page .home-service-glow{width:150px;height:150px}
  .home-page .home-service-chip{font-size:.62rem;padding:6px 10px;max-width:54%}
  .home-page .home-service-chip-c,.home-page .home-service-chip-d,.home-page .home-service-dot,.home-page .home-service-lines,.home-page .home-service-grid{display:none}

  .home-page .home-outcomes-head{flex-direction:column;align-items:flex-start}
  .home-page .home-case-stat{font-size:1.9rem}

  .home-page .home-launch-art,.home-page .home-cta-art{height:150px}
  .home-page .home-rocket{width:84px;height:84px}
  .home-page .home-rocket svg{width:38px;height:38px}
  .home-page .home-handshake{width:110px;height:110px}
  .home-page .home-handshake svg{width:48px;height:48px}
  .home-page .home-cta-chip{position:static;display:inline-flex;flex-direction:row;align-items:center;gap:8px;margin:6px}
  .home-page .home-cta-art{flex-wrap:wrap;height:auto;gap:10px;padding:14px 0}

  .home-page .home-journey-card{padding:4px}
  .home-page .home-jc-body h3{font-size:1.3rem}
  .home-page .home-jc-stats{flex-direction:column}
  .home-page .home-journey-nav{flex-direction:column;gap:10px}
  .home-page .home-journey-btn{justify-content:center;width:100%}

  .home-page .home-cta-grid,.home-page .home-launch-box{padding:28px 22px}
  .home-page .home-footer-top{grid-template-columns:1fr;gap:32px}
  .home-page .home-footer-bottom{flex-direction:column;align-items:flex-start}
}

/* ---- 15. Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .home-page *,.home-page *::before,.home-page *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .home-page .home-clock,.home-page .home-anticlock,.home-page .home-sat-icon,.home-page .home-art-ring,.home-page .home-service-ring,.home-page .home-service-dot,.home-page .home-service-glow,.home-page .home-orbit-core,.home-page .home-float-card,.home-page .home-float-pill,.home-page .home-rocket,.home-page .home-orbit-dot,.home-page .home-text-accent{animation:none!important}
  .home-page .home-hero-visual{animation:none!important;opacity:1;transform:none}
  .home-page .home-reveal{opacity:1!important;transform:none!important}
  .home-page .home-float-card,.home-page .home-float-pill{opacity:1!important}
}

/* ==========================================================================
   16. ABOUT PAGE (about.html) — scoped to .about-page so it can never
   affect the Home Page, the SEO Page, or any other page in the project.
   Reuses shared .home-page tokens/components (buttons, eyebrow, reveal,
   cards, cta, footer, header) wherever possible; only genuinely new
   layouts get their own rules below.
   ========================================================================== */

/* Small, generic, additive-only nav "current page" indicator — set on
   about.html's own nav link and on the Services dropdown item matching
   whichever service page is currently open. */
.home-page .home-nav-link[aria-current="page"]{color:var(--home-blue-2);background:rgba(57,73,171,.07)}
.home-page .home-footer-col a[aria-current="page"]{color:#fff}
.home-page .home-dropdown-item[aria-current="page"]{background:var(--home-bg)}
.home-page .home-dropdown-item[aria-current="page"] .home-dd-icon{background:var(--home-blue-2);color:#fff}

/* In-page anchor targets should land clear of the fixed header. */
.about-page section[id]{scroll-margin-top:calc(var(--home-header-h) + 20px)}

/* ---------- About hero ---------- */
.about-page .about-hero-badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

.about-page .about-eco-panel{position:relative;background:linear-gradient(150deg,#eef0fb,#f8f9ff);border:1px solid var(--home-border);border-radius:var(--home-r-lg);padding:clamp(28px,4vw,44px);box-shadow:var(--home-shadow-sm)}
.about-page .about-eco-diagram{display:flex;flex-direction:column;align-items:center}
.about-page .about-eco-core{width:118px;height:118px;border-radius:32px;background:linear-gradient(140deg,var(--home-navy),var(--home-blue-2));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:var(--home-shadow-lg);animation:homeCorePulse 4.5s ease-in-out infinite;flex-shrink:0}
.about-page .about-eco-core svg{width:28px;height:28px}
.about-page .about-eco-core span{font-family:var(--font-head);font-weight:800;font-size:.85rem;letter-spacing:.08em}
.about-page .about-eco-core small{font-size:.6rem;color:rgba(255,255,255,.72);letter-spacing:.05em;text-transform:uppercase}
.about-page .about-eco-stem{width:2px;height:36px;background:var(--home-border)}
.about-page .about-eco-branches{display:flex;justify-content:space-between;gap:14px;width:100%;position:relative;padding-top:36px}
.about-page .about-eco-branches::before{content:"";position:absolute;top:0;left:16.5%;right:16.5%;height:2px;background:var(--home-border)}
.about-page .about-eco-branch{position:relative;flex:1;min-width:0;background:#fff;border:1px solid var(--home-border);border-radius:var(--home-r-md);padding:16px 10px;text-align:center;box-shadow:var(--home-shadow-sm);transition:transform .35s var(--home-ease),box-shadow .35s var(--home-ease),border-color .35s var(--home-ease)}
.about-page .about-eco-branch::before{content:"";position:absolute;top:-36px;left:50%;width:2px;height:36px;background:var(--home-border)}
.about-page .about-eco-branch:hover{transform:translateY(-6px);box-shadow:var(--home-shadow-md);border-color:rgba(57,73,171,.3)}
.about-page .about-eco-branch-ic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:rgba(57,73,171,.08);color:var(--home-blue-2);margin-bottom:10px}
.about-page .about-eco-branch-ic svg{width:18px;height:18px}
.about-page .about-eco-branch-logo{display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.about-page .about-eco-branch-logo img{width:auto;max-width:100%;height:26px;object-fit:contain;display:block}
.about-page .about-eco-branch strong{display:block;font-size:.78rem;color:var(--home-ink);margin-bottom:3px}
.about-page .about-eco-branch small{display:block;font-size:.66rem;color:var(--home-faint)}

/* ---------- Ecosystem section ---------- */
.about-page .about-ecosystem{padding:clamp(70px,4vw,120px) 0}
.about-page .about-touchpoints{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;max-width:1040px;margin:0 auto}
.about-page .about-ecosystem-note{max-width:700px;margin:34px auto 0;text-align:center;font-size:1.02rem}

/* ---------- Three pillars (JOD Business Services / Studios / Events) ---------- */
.about-page .about-pillars{padding:clamp(70px,4vw,30px) 0;background:var(--home-bg)}
.about-page .about-pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.about-page .about-pillar-card{background:#fff;border:1px solid var(--home-border);border-radius:var(--home-r-lg);padding:32px 28px;display:flex;flex-direction:column;box-shadow:var(--home-shadow-sm);transition:transform .4s var(--home-ease),box-shadow .4s var(--home-ease),border-color .4s var(--home-ease)}
.about-page .about-pillar-card:hover{transform:translateY(-8px);box-shadow:var(--home-shadow-lg);border-color:rgba(57,73,171,.28)}
.about-page .about-pillar-ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--home-blue),var(--home-blue-bright));color:#fff;margin-bottom:18px;box-shadow:var(--home-shadow-sm)}
.about-page .about-pillar-ic svg{width:24px;height:24px}
.about-page .about-pillar-card:nth-child(2) .about-pillar-ic{background:linear-gradient(135deg,var(--home-accent),var(--home-accent-2))}
.about-page .about-pillar-card:nth-child(3) .about-pillar-ic{background:linear-gradient(135deg,var(--home-navy),var(--home-blue-2))}
.about-page .about-pillar-logo{display:inline-flex;align-items:center;margin-bottom:18px}
.about-page .about-pillar-logo img{width:180px;height:80px;object-fit:contain;display:block}
.about-page .about-pillar-tag{display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;color:var(--home-blue-2);margin-bottom:10px}
.about-page .about-pillar-card h3{font-size:1.35rem;margin-bottom:10px}
.about-page .about-pillar-lead{color:var(--home-ink);font-weight:600;margin-bottom:10px}
.about-page .about-pillar-card p{margin-bottom:6px}
.about-page .about-pillar-card .home-service-link{margin-top:auto;padding-top:16px;display:inline-block}

/* ---------- Why JOD ---------- */
.about-page .about-why{padding:clamp(30px,4vw,30px) 0}
.about-page .about-why-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.about-page .about-why-card{background:#fff;border:1px solid var(--home-border);border-radius:var(--home-r-lg);padding:30px;display:flex;flex-direction:column;gap:12px;transition:transform .4s var(--home-ease),box-shadow .4s var(--home-ease),border-color .4s var(--home-ease)}
.about-page .about-why-card:hover{transform:translateY(-6px);box-shadow:var(--home-shadow-md);border-color:rgba(47,143,239,.32)}
.about-page .about-why-ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;background:rgba(47,143,239,.1);color:var(--home-accent)}
.about-page .about-why-ic svg{width:22px;height:22px}
.about-page .about-why-card h3{font-size:1.15rem}
.about-page .about-why-card p{font-size:.94rem;margin-bottom:0}

/* ---------- Closing CTA photo (right side of "fixed model" section) ----------
   .home-cta-art ships with no base styling of its own anywhere else on the
   site (index.html's matching CTA uses a different, unrelated
   .home-cta-visual/SVG), so this is safe to style here without touching
   any other page. */
.about-page .home-cta-art{display:flex;align-items:center;justify-content:center}
.about-page .home-cta-photo-img{
  width:450px;height:450px;max-width:100%;border-radius:var(--home-r-lg);
  box-shadow:var(--home-shadow-lg);object-fit:cover;
}

/* ---------- About page responsive ---------- */
@media (max-width:1080px){
  .about-page .about-pillars-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .about-page .about-eco-panel{order:2;margin-top:36px;max-width:460px;margin-inline:auto;width:100%}
  .about-page .about-hero-badges{justify-content:center}
  .about-page .about-pillars-grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .about-page .home-cta-photo-img{width:min(450px,100%);height:auto;aspect-ratio:1/1}
}
@media (max-width:760px){
  .about-page .about-why-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .about-page .about-eco-branches{flex-direction:column;gap:12px;padding-top:20px}
  .about-page .about-eco-branches::before{display:none}
  .about-page .about-eco-branch::before{display:none}
  .about-page .about-eco-stem{height:20px}
}

/* ==========================================================================
   17. CONTACT PAGE (contact.html) — scoped to .contact-page so it can never
   affect the Home Page, About Page, SEO Page, or any other page in the
   project. Reuses shared .home-page tokens/components (buttons, eyebrow,
   reveal, section-head, cta, footer, header) wherever possible; only
   genuinely new layouts (hero visual, info cards, form, map) get their
   own rules below.
   ========================================================================== */

.contact-page section[id]{scroll-margin-top:calc(var(--home-header-h) + 20px)}

/* ---------- Contact hero ---------- */
.contact-page .contact-hero{padding:calc(var(--home-header-h) + 64px) 0 clamp(50px,7vw,80px);position:relative;overflow:hidden}
.contact-page .contact-hero-bg{
  position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 55% at 85% 6%,rgba(68,87,230,.14),transparent 70%),radial-gradient(50% 45% at 6% 96%,rgba(47,143,239,.10),transparent 70%),var(--home-bg);
}
.contact-page .contact-hero-bg::before{
  content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(26,35,126,.10) 1.4px,transparent 1.4px);background-size:28px 28px;
  mask-image:radial-gradient(ellipse 65% 55% at 75% 15%,#000 40%,transparent 90%);-webkit-mask-image:radial-gradient(ellipse 65% 55% at 75% 15%,#000 40%,transparent 90%);
}
.contact-page .contact-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.contact-page .contact-hero-content h1{font-size:clamp(2.3rem,4.2vw,3.5rem);margin:16px 0 18px}
.contact-page .contact-hero-lead{color:var(--home-muted);font-size:1.06rem;max-width:56ch;margin-bottom:8px}
.contact-page .contact-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}

/* ---------- Hero visual: dashboard mockup + floating chips/badges ---------- */
.contact-page .contact-hero-visual{position:relative;width:100%;max-width:460px;margin-inline:auto;padding:46px 32px}
.contact-page .contact-visual-panel{
  position:relative;z-index:2;background:#fff;border:1px solid var(--home-border);border-radius:var(--home-r-lg);
  box-shadow:var(--home-shadow-lg);padding:24px;animation:homeVisualIntro 1.1s var(--home-ease-out) both;
}
.contact-page .contact-visual-topbar{display:flex;gap:6px;margin-bottom:18px}
.contact-page .contact-visual-topbar span{width:9px;height:9px;border-radius:50%;background:var(--home-border)}
.contact-page .contact-visual-topbar span:nth-child(1){background:#ff8a8a}
.contact-page .contact-visual-topbar span:nth-child(2){background:#ffc766}
.contact-page .contact-visual-topbar span:nth-child(3){background:#6fd68a}
.contact-page .contact-visual-screen{background:var(--home-bg);border-radius:var(--home-r-md);padding:22px;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;min-height:190px}
.contact-page .contact-visual-chart{position:relative;flex:1;height:110px;display:flex;align-items:flex-end}
.contact-page .contact-visual-bars{display:flex;align-items:flex-end;gap:9px;height:100%;width:100%}
.contact-page .contact-visual-bars i{flex:1;display:block;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--home-blue-bright),var(--home-blue))}
.contact-page .contact-visual-bars i:nth-child(1){height:38%;opacity:.55}
.contact-page .contact-visual-bars i:nth-child(2){height:58%;opacity:.7}
.contact-page .contact-visual-bars i:nth-child(3){height:44%;opacity:.6}
.contact-page .contact-visual-bars i:nth-child(4){height:82%}
.contact-page .contact-visual-bars i:nth-child(5){height:66%;opacity:.85}
.contact-page .contact-visual-line{position:absolute;inset:0;color:var(--home-accent);overflow:visible}
.contact-page .contact-visual-ring{
  flex-shrink:0;width:68px;height:68px;border-radius:50%;position:relative;
  background:conic-gradient(var(--home-blue-bright) 0 72%,var(--home-border) 72% 100%);
  display:flex;align-items:center;justify-content:center;
}
.contact-page .contact-visual-ring::before{content:"";position:absolute;inset:8px;background:#fff;border-radius:50%}
.contact-page .contact-visual-ring span{position:relative;z-index:1;font-family:var(--font-head);font-weight:800;font-size:.78rem;color:var(--home-ink)}

.contact-page .contact-visual-chip{
  position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:16px;
  background:#fff;border:1px solid var(--home-border);box-shadow:var(--home-shadow-md);color:var(--home-blue-2);
  animation:homeFloat 6s ease-in-out infinite;
}
.contact-page .contact-visual-chip svg{width:24px;height:24px}
.contact-page .contact-chip-target{top:0;left:2%;animation-delay:.2s}
.contact-page .contact-chip-ai{top:24%;right:0;color:var(--home-accent);animation-delay:1s}
.contact-page .contact-chip-seo{bottom:22%;left:-2%;animation-delay:.6s}
.contact-page .contact-chip-growth{bottom:2%;right:16%;color:#1fa463;animation-delay:1.6s}

.contact-page .contact-float-badge{
  position:absolute;z-index:4;display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--home-border);
  border-radius:var(--home-r-md);box-shadow:var(--home-shadow-md);padding:12px 16px;
}
.contact-page .contact-float-response{top:2%;left:-8%}
.contact-page .contact-float-rating{bottom:4%;right:-8%}
.contact-page .contact-float-label{font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;color:var(--home-faint);font-weight:700}
.contact-page .contact-float-value{font-family:var(--font-head);font-weight:800;font-size:1.05rem;color:var(--home-ink)}
.contact-page .contact-float-value em{font-style:normal;color:var(--home-accent);font-size:.86rem;margin-left:2px}

/* ---------- Start the conversation (intro) ---------- */
.contact-page .contact-intro{padding:clamp(50px,6vw,80px) 0 0}

/* ---------- Contact info + form grid ---------- */
.contact-page .contact-main{padding:clamp(30px,4vw,50px) 0 clamp(70px,9vw,110px)}
.contact-page .contact-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:28px;align-items:start}

.contact-page .contact-info-col{display:flex;flex-direction:column;gap:16px}
.contact-page .contact-info-card{
  display:flex;align-items:flex-start;gap:16px;background:#fff;border:1px solid var(--home-border);border-radius:var(--home-r-lg);
  padding:22px 24px;box-shadow:var(--home-shadow-sm);transition:transform .35s var(--home-ease),box-shadow .35s var(--home-ease),border-color .35s var(--home-ease);
}
.contact-page .contact-info-card:hover{transform:translateY(-4px);box-shadow:var(--home-shadow-md);border-color:rgba(57,73,171,.24)}
.contact-page .contact-info-icon{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;
  background:linear-gradient(135deg,var(--home-blue),var(--home-blue-bright));color:#fff;box-shadow:var(--home-shadow-sm);
}
.contact-page .contact-info-icon svg{width:20px;height:20px}
.contact-page .contact-info-card:nth-child(2) .contact-info-icon{background:linear-gradient(135deg,var(--home-accent),var(--home-accent-2))}
.contact-page .contact-info-card:nth-child(3) .contact-info-icon{background:linear-gradient(135deg,var(--home-navy),var(--home-blue-2))}
.contact-page .contact-info-card:nth-child(4) .contact-info-icon{background:linear-gradient(135deg,var(--home-blue-2),var(--home-blue-bright))}
.contact-page .contact-info-card:nth-child(5) .contact-info-icon{background:linear-gradient(135deg,var(--home-accent-2),var(--home-accent))}
.contact-page .contact-info-card>div{min-width:0}
.contact-page .contact-info-label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--home-blue-2);margin-bottom:6px}
.contact-page .contact-info-value{display:block;font-family:var(--font-head);font-weight:700;font-size:1rem;color:var(--home-ink);transition:color .25s var(--home-ease)}
.contact-page a.contact-info-value:hover{color:var(--home-blue-bright)}
.contact-page .contact-info-sub{display:block;font-size:.84rem;color:var(--home-faint);margin-top:3px}
.contact-page .contact-social-row{display:flex;gap:10px;margin-top:2px}
.contact-page .contact-social-row a{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--home-border);display:flex;align-items:center;justify-content:center;
  color:var(--home-blue-2);transition:all .3s var(--home-ease);
}
.contact-page .contact-social-row a:hover{background:var(--home-blue-bright);border-color:var(--home-blue-bright);color:#fff;transform:translateY(-3px)}
.contact-page .contact-social-row svg{width:16px;height:16px}

/* ---------- Contact form ---------- */
.contact-page .contact-form-panel{position:relative;background:#fff;border:1px solid var(--home-border);border-radius:var(--home-r-lg);box-shadow:var(--home-shadow-sm);padding:clamp(26px,3vw,40px)}
.contact-page .contact-form-head{margin-bottom:24px}
.contact-page .contact-form-head h3{font-size:1.4rem;margin-bottom:6px}
.contact-page .contact-form-head p{font-size:.94rem}
.contact-page .contact-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.contact-page .contact-field{display:flex;flex-direction:column;gap:8px}
.contact-page .contact-field-full{grid-column:1 / -1}
.contact-page .contact-field label{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--home-blue-2)}
.contact-page .contact-input,
.contact-page .contact-textarea,
.contact-page select{
  width:100%;font:inherit;font-size:.95rem;color:var(--home-ink);background:var(--home-bg);
  border:1.5px solid var(--home-border);border-radius:var(--home-r-sm);padding:13px 16px;
  transition:border-color .3s var(--home-ease),box-shadow .3s var(--home-ease),background .3s var(--home-ease);
}
.contact-page .contact-textarea{resize:vertical;min-height:120px;font-family:var(--font-body)}
.contact-page .contact-input::placeholder,.contact-page .contact-textarea::placeholder{color:var(--home-faint)}
.contact-page .contact-input:hover,.contact-page .contact-textarea:hover,.contact-page select:hover{border-color:rgba(57,73,171,.35)}
.contact-page .contact-input:focus,.contact-page .contact-textarea:focus,.contact-page select:focus{
  outline:none;border-color:var(--home-blue-bright);background:#fff;box-shadow:0 0 0 4px rgba(68,87,230,.14);
}
.contact-page .contact-select-wrap{position:relative}
.contact-page .contact-select-wrap select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:42px;cursor:pointer}
.contact-page .contact-select-caret{position:absolute;top:50%;right:16px;width:14px;height:14px;transform:translateY(-50%);color:var(--home-faint);pointer-events:none;transition:transform .3s var(--home-ease)}
.contact-page .contact-select-wrap select:focus~.contact-select-caret{color:var(--home-blue-bright);transform:translateY(-50%) rotate(180deg)}
.contact-page .contact-field-error-msg{display:none;font-size:.78rem;color:#c8393f;font-weight:600}
.contact-page .contact-field.contact-field-error .contact-input,
.contact-page .contact-field.contact-field-error .contact-textarea{border-color:#e0555a;background:#fff6f6}
.contact-page .contact-field.contact-field-error .contact-field-error-msg{display:block}
.contact-page .contact-submit-btn{width:100%;justify-content:center;border:none;font-size:1rem;margin-top:4px;cursor:pointer}
.contact-page .contact-form-note{grid-column:1/-1;font-size:.78rem;color:var(--home-faint);text-align:center;margin-top:12px}

.contact-page .contact-form.contact-hidden{display:none}
.contact-page .contact-form-success{display:none;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:36px 10px}
.contact-page .contact-form-success.contact-visible{display:flex;animation:contactFadeUp .5s var(--home-ease-out) both}
.contact-page .contact-form-success:focus{outline:none}
@keyframes contactFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.contact-page .contact-success-icon{width:60px;height:60px;border-radius:50%;background:rgba(31,164,99,.12);color:#1fa463;display:flex;align-items:center;justify-content:center}
.contact-page .contact-success-icon svg{width:28px;height:28px}
.contact-page .contact-form-success h3{font-size:1.25rem}
.contact-page .contact-form-success p{max-width:38ch}

/* ---------- Office map ---------- */
.contact-page .contact-map{padding:0 0 clamp(70px,9vw,110px)}
.contact-page .contact-map-frame{
  position:relative;border-radius:var(--home-r-lg);overflow:hidden;box-shadow:var(--home-shadow-md);
  border:1px solid var(--home-border);aspect-ratio:16/6.2;background:var(--home-bg);
}
.contact-page .contact-map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Contact page responsive ---------- */
@media (max-width:1180px){
  .contact-page .contact-hero-grid{gap:36px}
}
@media (max-width:960px){
  .contact-page .contact-hero-grid{grid-template-columns:1fr;text-align:center}
  .contact-page .contact-hero-content{order:1}
  .contact-page .contact-hero-lead{margin-inline:auto}
  .contact-page .contact-hero-cta{justify-content:center}
  .contact-page .contact-hero-visual{order:2;margin-top:36px;max-width:400px}

  .contact-page .contact-grid{grid-template-columns:1fr}
  .contact-page .contact-form-col{order:1}
  .contact-page .contact-info-col{order:2;flex-direction:row;flex-wrap:wrap}
  .contact-page .contact-info-card{flex:1 1 calc(50% - 8px)}

  .contact-page .contact-map-frame{aspect-ratio:16/9}
}
@media (max-width:640px){
  .contact-page .contact-form{grid-template-columns:1fr}
  .contact-page .contact-info-card{flex:1 1 100%}
  .contact-page .contact-visual-chip{width:44px;height:44px;border-radius:13px}
  .contact-page .contact-visual-chip svg{width:19px;height:19px}
  .contact-page .contact-chip-ai,.contact-page .contact-chip-growth{display:none}
  .contact-page .contact-float-badge{padding:10px 12px}
  .contact-page .contact-float-response{left:0}
  .contact-page .contact-float-rating{right:0}
}
@media (max-width:520px){
  .contact-page .contact-hero{padding:calc(var(--home-header-h) + 34px) 0 48px}
  .contact-page .contact-hero-visual{max-width:300px;padding:34px 20px}
  .contact-page .contact-visual-screen{min-height:150px;padding:16px}
  .contact-page .contact-visual-ring{width:54px;height:54px}
  .contact-page .contact-hero-cta{flex-direction:column;align-items:stretch}
  .contact-page .contact-hero-cta .home-btn{justify-content:center}

  .contact-page .contact-info-card{padding:18px}
  .contact-page .contact-info-icon{width:40px;height:40px;border-radius:12px}

  .contact-page .contact-form-panel{padding:22px}
  .contact-page .contact-map-frame{aspect-ratio:4/5}
}

/* ==========================================================================
   THANK YOU PAGE (thank-you.html) — scoped to .thank-you-page only.
   Body also carries .home-page + .contact-page so it inherits the shared
   header/nav, .contact-hero backdrop, .home-btn/.home-eyebrow/.home-reveal
   and .home-footer completely unmodified; only the new classes below
   (thank-you-inner/-icon/-lead/-cta/-meanwhile/-links) are added, kept
   bare and scoped so nothing on contact.html or any other page changes.
   ========================================================================== */
.thank-you-page .thank-you-inner{max-width:640px;margin:0 auto;text-align:center;position:relative;z-index:1}
.thank-you-page .thank-you-icon{
  display:flex;align-items:center;justify-content:center;width:76px;height:76px;
  margin:0 auto 22px;border-radius:50%;background:var(--check-gradient);color:#fff;
  box-shadow:0 16px 40px rgba(26,35,126,.24);
}
.thank-you-page .thank-you-icon svg{width:32px;height:32px}
.thank-you-page .thank-you-inner .home-eyebrow{margin-inline:auto}
.thank-you-page .thank-you-lead{color:var(--home-muted);font-size:1.06rem;max-width:52ch;margin:0 auto 8px}
.thank-you-page .thank-you-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:28px}
.thank-you-page .thank-you-meanwhile{margin:46px auto 0;padding-top:32px;border-top:1px solid var(--home-border);max-width:560px}
.thank-you-page .thank-you-meanwhile>p{font-weight:700;color:var(--home-blue);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:16px}
.thank-you-page .thank-you-links{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.thank-you-page .thank-you-links a{
  padding:10px 20px;border-radius:999px;border:1px solid var(--home-border);background:#fff;
  color:var(--home-blue);font-weight:600;font-size:.92rem;
  transition:transform .3s var(--home-ease),box-shadow .3s var(--home-ease),border-color .3s var(--home-ease);
}
.thank-you-page .thank-you-links a:hover{transform:translateY(-3px);box-shadow:var(--home-shadow-sm);border-color:var(--home-blue-bright)}
@media (max-width:520px){
  .thank-you-page .thank-you-cta{flex-direction:column;align-items:stretch}
  .thank-you-page .thank-you-cta .home-btn{justify-content:center}
}

/* ==========================================================================
   ==========================================================================
   BOOK FREE CONSULTATION — reusable modal (site-wide)
   Injected at runtime by script.js and appended to <body>, so it lives
   outside every page's own markup. Built entirely on the ORIGINAL, truly
   global :root tokens (--primary, --secondary, --check-gradient, --radius-*,
   --shadow-*, --ease etc. from style.css ~L8) rather than the .home-page-
   scoped --home-* set, because this modal has to render correctly on every
   template — including smm-page and cm-page, which never load the
   --home-* token block. Nothing above this line is touched or overridden.
   ========================================================================== */
/* True fixed-position, viewport-centered dialog: position:fixed + inset:0 +
   flex centering means this is centered on the VIEWPORT regardless of
   current scroll position or which trigger was clicked — it can never open
   "under" a button or a page section, and page scroll never has to move
   for it to appear. Overlay is a translucent WHITE scrim (not a dark one)
   so the page behind stays subtly visible/muted, per spec. */
.consult-modal-overlay{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(255,255,255,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s linear .35s;
}
.consult-modal-overlay.is-open{opacity:1;visibility:visible;transition:opacity .35s var(--ease),visibility 0s linear 0s}
html.consult-lock,html.consult-lock body{overflow:hidden}
/* Form container: the site's two existing blue gradients (the deep
   indigo --primary/--secondary pair used on every primary button, plus
   the lighter --check-blue accent used for check-icons/highlights)
   combined into one flowing background — same dotted-overlay treatment
   as .home-launch-box/.home-cta-grid elsewhere on the site, so it reads
   as the same design language, not a one-off. */
.consult-modal{
  position:relative;width:90%;max-width:600px;overflow-y:auto;
  background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 58%,var(--check-blue) 130%);
  border-radius:var(--radius-lg);box-shadow:0 40px 100px rgba(16,20,74,.45);
  padding:48px 52px 44px;color:#fff;
  transform:translateY(24px) scale(.96);opacity:0;
  transition:transform .4s var(--ease),opacity .4s var(--ease);
}
.consult-modal-overlay.is-open .consult-modal{transform:translateY(0) scale(1);opacity:1}
.consult-modal::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.1) 1.4px,transparent 1.4px);background-size:26px 26px;
}
.consult-modal-close,.consult-modal-head,.consult-modal-form,.consult-modal-success{position:relative;z-index:1}
.consult-modal-close{
  position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.consult-modal-close svg{width:16px;height:16px}
.consult-modal-close:hover{background:#fff;border-color:#fff;color:var(--primary);transform:rotate(90deg) scale(1.06)}
.consult-modal-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.consult-modal-head{margin-bottom:28px;padding-right:40px}
.consult-modal-eyebrow{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.18);padding:6px 14px;border-radius:999px;margin-bottom:14px;
}
.consult-modal-head h3{font-family:var(--font-head);font-size:clamp(1.35rem,2.4vw,1.7rem);color:#fff;margin-bottom:8px;line-height:1.25}
.consult-modal-head p{color:rgba(255,255,255,.85);font-size:.96rem;max-width:56ch}
.consult-modal-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.consult-field{display:flex;flex-direction:column;gap:8px}
.consult-field-full{grid-column:1 / -1}
.consult-field label{font-size:10px;font-weight:600;color:#fff}
.consult-input,.consult-textarea,.consult-select-wrap select{
  width:100%;font:inherit;font-size:10px;color:#fff;background:rgba(255,255,255,.12);
  border:1.5px solid rgba(255,255,255,.4);border-radius:var(--radius-sm);padding:8px 16px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
.consult-textarea{resize:vertical;min-height:70px;font-family:var(--font-body)}
.consult-input::placeholder,.consult-textarea::placeholder{color:rgba(255,255,255,.62)}
.consult-input:hover,.consult-textarea:hover,.consult-select-wrap select:hover{border-color:rgba(255,255,255,.65)}
.consult-input:focus,.consult-textarea:focus,.consult-select-wrap select:focus{
  outline:none;border-color:#fff;background:rgba(255,255,255,.2);box-shadow:0 0 0 4px rgba(255,255,255,.2);
}
.consult-select-wrap{position:relative}
.consult-select-wrap select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:42px;cursor:pointer}
.consult-select-wrap select option{color:var(--ink);background:#fff}
.consult-select-wrap select:focus~.consult-select-caret{color:#fff;transform:translateY(-50%) rotate(180deg)}
.consult-select-caret{position:absolute;top:50%;right:16px;width:14px;height:14px;transform:translateY(-50%);color:rgba(255,255,255,.75);pointer-events:none;transition:transform .3s var(--ease)}
.consult-field-error-msg{display:none;font-size:10px;color:#ffd7d7;font-weight:600}
.consult-field.consult-field-error .consult-input,
.consult-field.consult-field-error .consult-textarea{border-color:#ff9d9d;background:rgba(255,80,80,.16)}
.consult-field.consult-field-error .consult-field-error-msg{display:block}
.consult-submit-btn{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;cursor:pointer;
  font:inherit;font-size:1rem;font-weight:700;color:var(--primary);padding:12px 20px;border-radius:var(--radius-sm);
  background:#fff;box-shadow:0 14px 34px rgba(16,20,74,.28);margin-top:4px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.consult-submit-btn svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.consult-submit-btn:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(16,20,74,.4)}
.consult-submit-btn:hover svg{transform:translateX(5px)}
.consult-submit-btn:active{transform:translateY(-1px) scale(.98)}
.consult-submit-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.consult-form-note{grid-column:1 / -1;font-size:.78rem;color:rgba(255,255,255,.72);text-align:center;margin-top:10px}
.consult-modal-form.consult-hidden{display:none}
.consult-modal-success{display:none;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:36px 10px}
.consult-modal-success.consult-visible{display:flex;animation:contactFadeUp .5s var(--ease) both}
.consult-modal-success:focus{outline:none}
.consult-success-icon{width:60px;height:60px;border-radius:50%;background:#fff;color:#1fa463;display:flex;align-items:center;justify-content:center}
.consult-success-icon svg{width:28px;height:28px}
.consult-modal-success h3{font-family:var(--font-head);font-size:1.25rem;color:#fff}
.consult-modal-success p{max-width:38ch;color:rgba(255,255,255,.85)}
.consult-success-close{
  margin-top:8px;border:1.5px solid rgba(255,255,255,.5);background:transparent;color:#fff;font:inherit;font-weight:600;
  padding:11px 26px;border-radius:var(--radius-sm);cursor:pointer;transition:all .3s var(--ease);
}
.consult-success-close:hover{background:#fff;border-color:#fff;color:var(--primary);transform:translateY(-2px)}
@media (max-width:900px){
  .consult-modal{width:92%;padding:38px 30px 32px}
  .consult-modal-form{grid-template-columns:1fr;gap:16px}
  .consult-modal-head{padding-right:30px}
}
@media (max-width:480px){
  .consult-modal-overlay{padding:14px}
  .consult-modal{width:100%;padding:30px 20px 26px;max-height:94vh;border-radius:var(--radius-md)}
  .consult-modal-close{top:14px;right:14px;width:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){
  .consult-modal-overlay,.consult-modal,.consult-modal-close,.consult-submit-btn,.consult-submit-btn svg{transition:none}
  .consult-modal-success.consult-visible{animation:none}
}

/* ==========================================================================
   ==========================================================================
   CONTENT MARKETING AGENCY IN CHENNAI — page-specific styles
   Moved here verbatim from the old content-marketing-agency-in-chennai/
   content-marketing.css (now retired — the page lives at
   content-marketing-agency-in-chennai.html and loads style.css only).
   Scoped entirely under body.cm-page / .cm-* classes so nothing here can
   leak onto index.html, about.html, contact.html, the SEO/PPC/SMM pages,
   or any shared component — every ".cm-" class name is unique to this
   page site-wide. Reuses the site's existing design tokens (--primary,
   --secondary, --border, --shadow-*, --font-head/body, --ease, .container,
   .btn, .badge, .eyebrow, .text-gradient, .reveal, .site-footer,
   .bg-anim/.blob, .home-* header) so the page still feels part of the same
   brand — only the section layouts below are page-specific. Untouched
   from the original file; no rule here was edited.
   ========================================================================== */

.cm-page{background:var(--bg)}

/* ---------- shared bits ---------- */
.cm-page section{padding:96px 0}
.cm-page .cm-eyebrow-row{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.cm-page .cm-kicker{color:var(--secondary);font-weight:700;font-size:.8rem}
.cm-page .cm-head{max-width:680px}
.cm-page .cm-head p{color:var(--muted);margin-top:14px;font-size:1.05rem}
.cm-page .cm-head.cm-center{max-width:720px;margin-inline:auto;text-align:center}

/* ==========================================================================
   HERO
   ========================================================================== */
.cm-hero{padding:calc(88px + 56px) 0 70px;position:relative;overflow:hidden}
.cm-hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center}
.cm-hero-copy .badge{margin-bottom:22px}
.cm-hero-copy h1{font-size:clamp(2.1rem,4.2vw,3.4rem);letter-spacing:-.01em}
.cm-hero-lead{
  font-family:var(--font-head);font-weight:600;font-size:1.2rem;color:var(--secondary);
  margin-top:16px;max-width:52ch;
}
.cm-hero-copy p{color:var(--muted);margin-top:16px;max-width:56ch;font-size:1rem}
.cm-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}

.cm-hero-visual{position:relative;min-height:420px}
.cm-card-stack{position:relative;width:100%;max-width:360px;margin-inline:auto;height:400px}
.cm-doc-card{
  position:absolute;left:50%;top:50%;width:270px;padding:24px 22px;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.cm-doc-card-1{transform:translate(-50%,-50%) rotate(-9deg) translate(-58px,-46px);z-index:1}
.cm-doc-card-2{transform:translate(-50%,-50%) rotate(3deg) translate(30px,-4px);z-index:2}
.cm-doc-card-3{transform:translate(-50%,-50%) rotate(-3deg) translate(-18px,58px);z-index:3}
.cm-card-stack:hover .cm-doc-card-1{transform:translate(-50%,-50%) rotate(-13deg) translate(-92px,-64px)}
.cm-card-stack:hover .cm-doc-card-2{transform:translate(-50%,-50%) rotate(5deg) translate(48px,-10px) scale(1.03);box-shadow:var(--shadow-lg),0 0 0 1px rgba(var(--primary-rgb),.06)}
.cm-card-stack:hover .cm-doc-card-3{transform:translate(-50%,-50%) rotate(-5deg) translate(-30px,86px)}
.cm-doc-card-ic{
  width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;margin-bottom:14px;
}
.cm-doc-card-ic svg{width:19px;height:19px}
.cm-doc-card strong{display:block;font-family:var(--font-head);color:var(--primary);font-size:1rem;margin-bottom:6px}
.cm-doc-card span{display:block;color:var(--faint);font-size:.82rem}
.cm-doc-card .cm-doc-lines{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.cm-doc-card .cm-doc-lines i{display:block;height:6px;border-radius:4px;background:var(--bg-soft)}
.cm-doc-card .cm-doc-lines i:nth-child(1){width:100%}
.cm-doc-card .cm-doc-lines i:nth-child(2){width:76%}
.cm-doc-card .cm-doc-lines i:nth-child(3){width:88%}

/* ---------- quick facts strip ---------- */
.cm-facts{
  display:flex;align-items:center;justify-content:center;gap:36px;flex-wrap:wrap;
  padding:34px 0 0;margin-top:14px;border-top:1px solid var(--border);
}
.cm-fact{text-align:center}
.cm-fact-num{
  display:block;font-family:var(--font-head);font-weight:800;font-size:2rem;
  background:linear-gradient(100deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;color:transparent;
}
.cm-fact-label{display:block;color:var(--muted);font-size:.85rem;margin-top:4px;max-width:16ch}
.cm-fact-div{width:1px;height:38px;background:var(--border)}

/* ==========================================================================
   PROBLEM / DIAGNOSTIC BENTO
   ========================================================================== */
.cm-problem{background:var(--bg-soft)}
.cm-problem-intro{margin-bottom:44px}
.cm-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cm-bento-card{
  grid-column:span 2;min-width:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:24px 22px;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  display:flex;gap:16px;align-items:flex-start;
}
.cm-bento-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:rgba(var(--secondary-rgb),.35)}
.cm-bento-ic{
  flex-shrink:0;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--primary-rgb),.08);color:var(--primary);
}
.cm-bento-ic svg{width:20px;height:20px}
.cm-bento-card > div{flex:1;min-width:0}
.cm-bento-card h3{font-size:1rem;font-weight:600;color:var(--ink);margin-bottom:4px;font-family:var(--font-body)}
.cm-bento-card p{color:var(--muted);font-size:.9rem;line-height:1.55}

.cm-pull-quote{
  margin-top:46px;padding:40px 44px;border-radius:var(--radius-lg);text-align:center;
  background:linear-gradient(120deg,var(--primary),var(--secondary));color:#fff;box-shadow:var(--shadow-lg);
}
.cm-pull-quote p{font-family:var(--font-head);font-weight:600;font-size:clamp(1.15rem,2.4vw,1.55rem);line-height:1.5;max-width:56ch;margin-inline:auto}
.cm-pull-quote span{display:block;margin-top:10px;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;opacity:.75;font-weight:600}

/* ==========================================================================
   SERVICES — accordion
   ========================================================================== */
.cm-acc-list{max-width:900px;margin-inline:auto;display:flex;flex-direction:column;gap:14px}
.cm-acc-item{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.cm-acc-item.cm-open{border-color:rgba(var(--secondary-rgb),.4);box-shadow:var(--shadow-md)}
.cm-acc-head{
  width:100%;display:flex;align-items:center;gap:16px;padding:22px 24px;text-align:left;
}
.cm-acc-num{font-family:var(--font-head);font-weight:800;color:var(--border);font-size:1.3rem;flex-shrink:0;transition:color .3s var(--ease)}
.cm-acc-item.cm-open .cm-acc-num{color:var(--secondary)}
.cm-acc-ic{
  flex-shrink:0;width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--bg-soft);color:var(--primary);transition:background .3s var(--ease),color .3s var(--ease);
}
.cm-acc-item.cm-open .cm-acc-ic{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff}
.cm-acc-ic svg{width:21px;height:21px}
.cm-acc-title{flex:1;min-width:0}
.cm-acc-title h3{font-size:1.05rem;font-family:var(--font-head)}
.cm-acc-title small{display:block;color:var(--muted);font-size:.85rem;margin-top:3px;font-weight:400}
.cm-acc-chevron{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;color:var(--primary);transition:transform .35s var(--ease)}
.cm-acc-chevron svg{width:15px;height:15px}
.cm-acc-item.cm-open .cm-acc-chevron{transform:rotate(180deg)}

.cm-acc-panel-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.cm-acc-item.cm-open .cm-acc-panel-wrap{grid-template-rows:1fr}
.cm-acc-panel{overflow:hidden}
.cm-acc-panel-inner{padding:0 24px 26px 84px}
.cm-acc-panel-inner p{color:var(--muted);font-size:.95rem;margin-bottom:12px}
.cm-acc-note{font-style:normal;color:var(--muted);font-size:.88rem !important;padding-top:6px;border-top:1px dashed var(--border)}
.cm-chip-grid{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.cm-chip{
  background:var(--bg-soft);border:1px solid var(--border);color:var(--primary);
  padding:7px 14px;border-radius:999px;font-size:.82rem;font-weight:500;
}

/* ==========================================================================
   CUSTOMER JOURNEY — connected funnel
   ========================================================================== */
.cm-journey{background:var(--bg-soft)}
.cm-journey-track{display:flex;align-items:stretch;gap:0;margin-top:48px}
.cm-journey-stage{
  flex:1;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:32px 26px;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  position:relative;
}
.cm-journey-stage:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.cm-journey-tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--secondary);margin-bottom:14px}
.cm-journey-icon{
  width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;margin-bottom:18px;
}
.cm-journey-icon svg{width:24px;height:24px}
.cm-journey-stage h3{font-size:1.15rem;margin-bottom:10px}
.cm-journey-stage p{color:var(--muted);font-size:.93rem}
.cm-journey-arrow{flex-shrink:0;width:56px;display:flex;align-items:center;justify-content:center;color:var(--faint)}
.cm-journey-arrow svg{width:26px;height:26px}
.cm-journey-note{
  text-align:center;max-width:60ch;margin:36px auto 0;color:var(--muted);font-size:.98rem;
  padding-top:20px;
}
.cm-journey-note strong{color:var(--primary)}

/* ---------- mid CTA strip ---------- */
.cm-strip-wrap{padding-top:0}
.cm-strip{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:linear-gradient(120deg,var(--primary),var(--secondary));
  border-radius:var(--radius-lg);padding:34px 40px;box-shadow:var(--shadow-lg);color:#fff;margin-top:56px;
}
.cm-strip h3{color:#fff;font-size:1.35rem;max-width:34ch}
.cm-strip .btn-white:hover{transform:translateY(-3px)}

/* ==========================================================================
   WHY JOD — vertical timeline
   ========================================================================== */
.cm-why-lead{
  font-family:var(--font-head);font-weight:600;color:var(--primary);font-size:1.1rem;margin-top:14px;
}
.cm-timeline{max-width:820px;margin:50px auto 0;position:relative}
.cm-timeline::before{content:"";position:absolute;left:23px;top:6px;bottom:6px;width:2px;background:var(--border)}
.cm-tl-item{position:relative;padding-left:74px;margin-bottom:38px}
.cm-tl-item:last-child{margin-bottom:0}
.cm-tl-node{
  position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;
  background:#fff;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:800;color:var(--secondary);z-index:1;transition:all .4s var(--ease);
}
.cm-tl-item.in-view .cm-tl-node{border-color:var(--secondary);background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;box-shadow:var(--shadow-md)}
.cm-tl-item h3{font-size:1.1rem;margin-bottom:8px}
.cm-tl-item p{color:var(--muted);font-size:.95rem}

/* ==========================================================================
   FAQ — plain accordion
   ========================================================================== */
.cm-faq-list{max-width:820px;margin:46px auto 0;display:flex;flex-direction:column;gap:12px}
.cm-faq-item{border:1px solid var(--border);border-radius:var(--radius-md);background:#fff;overflow:hidden;transition:border-color .3s var(--ease)}
.cm-faq-item.cm-open{border-color:rgba(var(--secondary-rgb),.4)}
.cm-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;text-align:left}
.cm-faq-q h3{flex:1;min-width:0;font-size:.98rem;font-weight:600;color:var(--ink);font-family:var(--font-body)}
.cm-faq-q .cm-acc-chevron{margin-left:auto}
.cm-faq-panel-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.cm-faq-item.cm-open .cm-faq-panel-wrap{grid-template-rows:1fr}
.cm-faq-panel{overflow:hidden}
.cm-faq-panel p{padding:0 22px 20px;color:var(--muted);font-size:.93rem}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.cm-final{position:relative;overflow:hidden}
.cm-final-panel{
  position:relative;text-align:center;padding:70px 30px;border-radius:var(--radius-lg);
  background:linear-gradient(160deg,var(--primary),var(--secondary) 120%);color:#fff;
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.cm-final-panel::before{
  content:"";position:absolute;inset:0;opacity:.15;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.5) 1.4px,transparent 1.4px);background-size:24px 24px;
}
.cm-final-panel > *{position:relative}
.cm-final-panel h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem)}
.cm-final-panel p{color:rgba(255,255,255,.85);max-width:60ch;margin:16px auto 0}
.cm-final-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .cm-bento-card{grid-column:span 2}
}
@media (max-width:900px){
  .cm-hero{padding-top:calc(72px + 40px)}
  .cm-hero-grid{grid-template-columns:1fr;gap:44px}
  .cm-hero-visual{min-height:340px;order:-1}
  .cm-card-stack{max-width:300px;height:320px}
  .cm-doc-card{width:230px;padding:20px}
  .cm-bento{grid-template-columns:1fr 1fr}
  .cm-bento-card{grid-column:span 1}
  .cm-journey-track{flex-direction:column}
  .cm-journey-arrow{width:100%;height:40px}
  .cm-journey-arrow svg{transform:rotate(90deg)}
  .cm-strip{padding:28px 26px}
}
@media (max-width:760px){
  .cm-page section{padding:70px 0}
  .cm-facts{gap:22px}
  .cm-fact-div{display:none}
  .cm-acc-panel-inner{padding-left:24px}
  .cm-acc-head{padding:18px}
  .cm-pull-quote{padding:32px 24px}
}
@media (max-width:520px){
  .cm-hero-cta{flex-direction:column;align-items:stretch}
  .cm-hero-cta .btn{justify-content:center}
  .cm-bento{grid-template-columns:1fr}
  .cm-doc-card{width:78vw;max-width:250px}
  .cm-card-stack{max-width:250px}
  .cm-timeline::before{left:19px}
  .cm-tl-item{padding-left:60px}
  .cm-tl-node{width:40px;height:40px;font-size:.85rem}
  .cm-strip{flex-direction:column;align-items:flex-start}
  .cm-final-panel{padding:52px 22px}
  .cm-final-cta{flex-direction:column;width:100%}
  .cm-final-cta .btn{justify-content:center}
}

/* ==========================================================================
   ==========================================================================
   VIDEO PRODUCTION COMPANY IN CHENNAI — page-specific styles
   video-production-company-in-chennai.html carries body class
   "seo-page vp-page": "seo-page" only re-uses the ALREADY-EXISTING
   body:is(.seo-page,.ppc-page) component rules above (.seo-pain-grid/
   .seo-pain-item/.seo-pain-callout) — nothing in that shared rule set is
   edited here. The rest of the page reuses other already-global,
   page-agnostic classes as-is: .hero/.badge/.btn/.section-head/.eyebrow/
   .text-gradient/.cta-section (base design system), .cm-card-stack/
   .cm-doc-card, the .cm-acc- and .cm-chip accordion classes, .cm-bento,
   and .cm-timeline / .cm-tl- (from the Content Marketing page's CSS above — all bare, page-agnostic
   selectors), and the bare .faq-list/.faq-item/.faq-q/.faq-a/.qicon
   accordion. Only the "flow diagram" below has no existing equivalent
   anywhere on the site, so it is added here, scoped under .vp-page.
   ========================================================================== */
.vp-page .vp-flow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 6px;margin-top:36px}
.vp-page .vp-flow-step{
  background:#fff;border:1px solid var(--border);border-radius:999px;padding:10px 20px;
  font-weight:600;color:var(--primary);font-size:.92rem;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.vp-page .vp-flow-step:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(var(--secondary-rgb),.35)}
.vp-page .vp-flow-arrow{display:flex;color:var(--faint);flex-shrink:0}
.vp-page .vp-flow-arrow svg{width:18px;height:18px}
.vp-page .vp-flow-note{text-align:center;max-width:60ch;margin:28px auto 0;color:var(--muted);font-size:.98rem}
@media (max-width:520px){
  .vp-page .vp-flow{flex-direction:column;align-items:stretch}
  .vp-page .vp-flow-step{text-align:center}
  .vp-page .vp-flow-arrow{transform:rotate(90deg);margin:0 auto}
}

/* #idea-to-video supplies 5 items to .seo-future-grid, whose shared
   body:is(.seo-page,.ppc-page) rules above assume exactly 3 (seo.html's
   #evolving section) and lay them out in a fixed 3-column grid — leaving
   an uneven, gap-on-the-right last row for the 5th card. Re-flowed here
   as a wrapping flex row that centers a short last row, scoped to
   .vp-page only so the shared 3-item grid used elsewhere is untouched. */
body.vp-page .seo-future-grid{display:flex;flex-wrap:wrap;justify-content:center}
body.vp-page .seo-future-card{flex:0 1 calc(33.333% - 16px)}
@media (max-width:920px){
  body.vp-page .seo-future-card{flex:0 1 100%}
}

/* ==========================================================================
   ==========================================================================
   WEB DESIGN / WEB DEVELOPMENT / BRANDING / PERSONAL BRANDING PAGES
   web-design-company-in-chennai.html, web-development-company-in-chennai.html,
   branding-company-in-chennai.html and personal-branding-agency-in-chennai.html
   all carry body class "seo-page contact-page <xx>-page" — exactly the same
   combination as video-production-company-in-chennai.html — so they reuse the
   ENTIRE existing base design system plus all body:is(.seo-page,.ppc-page)
   component rules above (hero, badge, section-head, seo-pain-grid/-item/
   -callout, seo-slider/seo-slide-card/seo-service-card, seo-future-grid/
   -card, faq-list/-item/-q/-a, seo-faq-contact, contact-form-panel, cta-
   section) completely unmodified, plus the already-bare .cm-card-stack/
   .cm-doc-card hero visual and .cm-chip-grid/.cm-chip tag list from the
   Content Marketing page's CSS. Nothing above this block is touched.

   Two small additions were needed and are added here, kept bare/page-
   agnostic (like .cm-bento, .cm-chip, .cm-timeline before them) since all
   four pages — and any future service page — can reuse them:
   1. .flow-row/.flow-step/.flow-arrow/.flow-note — a text-chain "A → B → C"
      diagram, generalised from .vp-page's .vp-flow (same look, not scoped
      to one page since these four pages each use it 1–4 times).
   2. A generic border-fix for .seo-pain-item's last visual row: the shared
      rule two blocks up hard-codes nth-child(7)/(8) assuming exactly 8
      items (true on every existing page). These four pages have 8/9/10
      supplied pain-point items, so — scoped per page, only where the count
      differs from 8 — the border is restored on 7/8 and reapplied
      generically to the true last row (nth-last-child), leaving every
      other page's CSS untouched.
   ========================================================================== */
.flow-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 6px;margin-top:36px}
.flow-step{
  background:#fff;border:1px solid var(--border);border-radius:999px;padding:10px 20px;
  font-weight:600;color:var(--primary);font-size:.92rem;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.flow-step:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(var(--secondary-rgb),.35)}
.flow-arrow{display:flex;color:var(--faint);flex-shrink:0}
.flow-arrow svg{width:18px;height:18px}
.flow-note{text-align:center;max-width:60ch;margin:28px auto 0;color:var(--muted);font-size:.98rem}
.flow-label{display:block;font-weight:700;color:var(--secondary);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;margin:26px 0 0;text-align:center}
.flow-label:first-of-type{margin-top:6px}
@media (max-width:520px){
  .flow-row{flex-direction:column;align-items:stretch}
  .flow-step{text-align:center}
  .flow-arrow{transform:rotate(90deg);margin:0 auto}
}

.wdc-page .seo-pain-item:nth-child(7),.wdc-page .seo-pain-item:nth-child(8),
.wdv-page .seo-pain-item:nth-child(7),.wdv-page .seo-pain-item:nth-child(8),
.pba-page .seo-pain-item:nth-child(7),.pba-page .seo-pain-item:nth-child(8){border-bottom:1px solid var(--border)}
.wdc-page .seo-pain-item:nth-last-child(-n+2),
.wdv-page .seo-pain-item:nth-last-child(-n+2),
.pba-page .seo-pain-item:nth-last-child(-n+2){border-bottom:none}

/* Web Development page's #beyond-launch supplies 5 items to the shared
   .seo-future-grid, whose body:is(.seo-page,.ppc-page) rule assumes exactly
   3 (seo.html's #evolving) and lays them out in a fixed 3-column grid —
   leaving an uneven, left-stuck last row of 2 cards with a gap on the
   right (same issue already fixed for .vp-page above). Re-flowed here as
   a wrapping flex row that centers the short last row, scoped to
   .wdv-page only so the shared 3-item grid used elsewhere is untouched. */
body.wdv-page .seo-future-grid{display:flex;flex-wrap:wrap;justify-content:center}
body.wdv-page .seo-future-card{flex:0 1 calc(33.333% - 16px)}
@media (max-width:920px){
  body.wdv-page .seo-future-card{flex:0 1 100%}
}

/* ---------- Web Design page only: hero subhead 2nd line + the
   #customer-journey section redesigned. Scoped to body.wdc-page only —
   .svc-hero-subhead/.flow-row/.flow-step stay untouched everywhere else
   (web-development/branding/personal-branding pages still use the plain
   pill-chain .flow-row design). ---------- */
.wdc-page .svc-hero-subhead span{color:var(--secondary)}

.wdc-page .wdc-journey-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:900px;margin:36px auto 0;
}
.wdc-page .wdc-journey-q{
  display:flex;align-items:center;gap:12px;padding:16px 18px;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.wdc-page .wdc-journey-q:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(var(--secondary-rgb),.35)}
.wdc-page .wdc-journey-q-icon{
  flex-shrink:0;width:38px;height:38px;border-radius:11px;background:rgba(var(--secondary-rgb),.08);
  color:var(--secondary);display:flex;align-items:center;justify-content:center;
}
.wdc-page .wdc-journey-q-icon svg{width:19px;height:19px}
.wdc-page .wdc-journey-q p{margin:0;font-weight:600;color:var(--ink);font-size:.95rem;line-height:1.4}

.wdc-page .wdc-flow{display:flex;align-items:flex-start;justify-content:center;max-width:900px;margin:36px auto 0}
.wdc-page .wdc-flow-step{
  flex:1;max-width:200px;text-align:center;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:22px 14px 18px;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.wdc-page .wdc-flow-step:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(var(--secondary-rgb),.35)}
.wdc-page .wdc-flow-num{
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin:0 auto 12px;
  border-radius:50%;background:var(--check-gradient);color:#fff;font-weight:700;font-size:.92rem;
}
.wdc-page .wdc-flow-step h4{margin:0 0 4px;font-size:1.02rem;color:var(--primary)}
.wdc-page .wdc-flow-step p{margin:0;color:var(--muted);font-size:.85rem;line-height:1.4}
.wdc-page .wdc-flow-connector{
  flex:0 0 32px;height:2px;margin-top:35px;background:repeating-linear-gradient(90deg,rgba(var(--secondary-rgb),.35) 0 6px,transparent 6px 10px);
}
.wdc-page .wdc-journey-footnote{text-align:center;max-width:60ch;margin:28px auto 0;color:var(--muted);font-size:.98rem}

@media (max-width:760px){
  .wdc-page .wdc-journey-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .wdc-page .wdc-flow{flex-direction:column;align-items:center;gap:0}
  .wdc-page .wdc-flow-step{max-width:280px;width:100%}
  .wdc-page .wdc-flow-connector{width:2px;height:26px;flex:0 0 26px;margin:0;background:repeating-linear-gradient(180deg,rgba(var(--secondary-rgb),.35) 0 6px,transparent 6px 10px)}
}
@media (max-width:480px){
  .wdc-page .wdc-journey-grid{grid-template-columns:1fr}
}

/* ---------- Personal Branding page only: #identity and
   #more-than-posting redesigned. Scoped to body.pba-page only — same
   precedent as the .wdc-page #customer-journey block above (new page-
   scoped classes added, nothing shared touched). Replaces the old plain
   centered <p> stacks with a scannable card grid (identity elements) and
   a numbered question list. ---------- */
.pba-page .pba-identity-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:820px;margin:40px auto 0;
}
.pba-page .pba-identity-card{
  display:flex;gap:16px;align-items:flex-start;text-align:left;padding:22px 20px;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.pba-page .pba-identity-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(var(--secondary-rgb),.3)}
.pba-page .pba-identity-icon{
  flex-shrink:0;width:46px;height:46px;border-radius:14px;background:var(--check-gradient);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);
}
.pba-page .pba-identity-icon svg{width:22px;height:22px}
.pba-page .pba-identity-card strong{display:block;font-family:var(--font-head);color:var(--primary);font-size:1.02rem;margin-bottom:4px}
.pba-page .pba-identity-card p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}
.pba-page .pba-identity-outcome{
  text-align:center;max-width:56ch;margin:30px auto 0;padding:16px 28px;border-radius:999px;
  background:linear-gradient(120deg,rgba(var(--secondary-rgb),.06),rgba(47,143,239,.09));
  border:1px solid rgba(var(--secondary-rgb),.15);color:var(--ink);font-weight:600;font-size:.95rem;line-height:1.5;
}

.pba-page .pba-question-list{
  display:flex;flex-direction:column;max-width:640px;margin:36px auto 0;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;
}
.pba-page .pba-question{
  display:flex;align-items:center;gap:18px;padding:17px 26px;border-bottom:1px solid var(--border);
  transition:background .3s var(--ease);
}
.pba-page .pba-question:last-child{border-bottom:none}
.pba-page .pba-question:hover{background:var(--bg-soft)}
.pba-page .pba-question-num{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--check-gradient);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:.85rem;
}
.pba-page .pba-question p{margin:0;color:var(--ink);font-weight:500;font-size:.95rem;line-height:1.5;text-align:left}

@media (max-width:640px){
  .pba-page .pba-identity-grid{grid-template-columns:1fr}
  .pba-page .pba-identity-card{padding:18px 16px}
  .pba-page .pba-identity-outcome{padding:14px 20px;font-size:.9rem}
  .pba-page .pba-question{padding:14px 18px;gap:14px}
}

/* ==========================================================================
   ==========================================================================
   SOCIAL MEDIA MARKETING PAGE — hero placeholder image, "problem" icon grid,
   single-slide services auto-carousel, merged FAQ + contact form
   (body.smm-page)

   Reuses the shared SEO/PPC design-system classes above wherever the visual
   language matches 1:1 (.seo-faq-contact-grid, .faq-list/.faq-item premium
   accordion, .contact-form-panel/.seo-form-panel — already extended to
   .smm-page in those selectors). This block covers what's specific to this
   page only: the hero placeholder swap, the "problem" section's new icon
   style, and turning the existing #serviceTabs/#servicePanel component
   (kept exactly as-is, not replaced like on seo.html/ppc.html) into a
   single-slide auto-advancing carousel with mobile-only arrows.
   ========================================================================== */

/* ---------- Hero: swap the search-demo mock for a plain reserved image
   placeholder, same convention as .svc-hero-placeholder on every other
   service page (branding, video production, web design, etc.) — the
   client's real hero image drops in here later. ---------- */
body.smm-page .svc-hero-placeholder{margin-inline:0}
@media (max-width:920px){body.smm-page .svc-hero-placeholder{margin-inline:auto}}

/* ---------- "Social Presence Problem" check-grid: rounded-square icon
   badges (matching the client's reference) instead of the plain gradient
   check-circles used elsewhere on the site. Scoped to #journey specifically
   so the unrelated check-circle icons script.js renders inside the services
   panel's .check-grid (#servicePanel .check-item) are completely untouched. ---------- */
/* ---------- "Social Presence Problem" intro: heading + lead paragraphs
   centered like every other section-head on the site (this block uses a
   plain .reveal wrapper instead of .section-head, so it isn't centered by
   default). Scoped to direct children so the check-grid/callout below,
   which have their own left-aligned layouts, are untouched. ---------- */
body.smm-page #journey > .container > .reveal > h2,
body.smm-page #journey > .container > .reveal > p{text-align:center}

body.smm-page #journey .check-item{align-items:center;text-align:left}
body.smm-page #journey .check-item-icon{
  flex-shrink:0;width:40px;height:40px;border-radius:12px;
  background:var(--tick-gradient);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
body.smm-page #journey .check-item-icon svg{width:19px;height:19px;background:none;padding:0;border-radius:0;color:inherit;display:block}



/* ---------- FAQ: category filter pills not needed on this page — hidden
   (not deleted): script.js's #faqPills wiring still runs harmlessly
   against it, and renderFaqs("all") already shows every question by
   default with no pills present. ---------- */
body.smm-page #faqPills{display:none}

/* ---------- Why JOD: section intro — plain, no card background (client
   asked to drop the rounded box that used to wrap this text). ---------- */

/* ---------- Why JOD: card grid polish (the cards themselves + the
   auto-cycling "active" highlight are the shared #whyGrid/.why-card
   component from style.css ~L297). smm-page now hides this static grid
   the same way seo.html/ppc-agency-in-chennai.html do (see the
   .why-grid{display:none} rule above) and shows the #whyTrack
   "seo-slider" carousel instead — script.js clones these same
   .why-card elements into that track, so this hover/motion polish still
   applies to the cloned slide cards too. ---------- */
body.smm-page .why-grid{gap:26px;margin-top:34px}
body.smm-page .why-card{position:relative;overflow:hidden}
body.smm-page .why-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--home-accent,#2f8fef),var(--home-accent-2,#8ec9ff));
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--home-ease,var(--ease));
}
body.smm-page .why-card:hover::before,
body.smm-page .why-card.active::before{transform:scaleX(1)}
body.smm-page .why-card .wnum{transition:color .35s var(--ease)}
body.smm-page .why-card:hover .wnum{color:var(--home-accent,#2f8fef)}

/* ---------- Services: single-slide auto-carousel built on top of the
   original #serviceTabs/#servicePanel markup/JS (script.js's isSMMPage
   block adds the 5s autoplay + fade + arrow wiring; nothing here is a new
   component).
   Extended (2026-08-28) to every other service page's numbered-accordion
   Services section, each identified by its own #XxServicesWrap id instead
   of a body class — seo.html/ppc.html reuse the existing #serviceTabs/
   #servicePanel markup+JS, while content-marketing/personal-branding/
   video-production/web-design/web-development get the same markup built
   at runtime by script.js's generic [data-tabs-track] converter. All of
   them share this identical look + mobile prev/next arrow-slider so every
   service page's Services section now matches the branding page's design;
   only the underlying content differs per page. ---------- */
body.smm-page .services-wrap,
body.brc-page .services-wrap,
#seoServicesWrap,
#ppcServicesWrap,
#cmServicesWrap,
#pbaServicesWrap,
#vpServicesWrap,
#wdcServicesWrap,
#wdvServicesWrap{display:grid;position:relative}
body.smm-page .service-panel,
body.brc-page .service-panel,
#seoServicesWrap .service-panel,
#ppcServicesWrap .service-panel,
#cmServicesWrap .service-panel,
#pbaServicesWrap .service-panel,
#vpServicesWrap .service-panel,
#wdcServicesWrap .service-panel,
#wdvServicesWrap .service-panel{transition:opacity .3s var(--ease),transform .3s var(--ease)}
body.smm-page .service-panel.smm-panel-fade,
body.brc-page .service-panel.smm-panel-fade{opacity:0;transform:translateY(8px)}

/* Reused on body.brc-page too — branding-company-in-chennai.html's own
   inline script wires the same #brcServicesPrev/#brcServicesNext buttons
   (same "smm-slider-arrow" classes/markup) to step selectBrandService()
   one at a time, mobile-only, exactly like isSMMPage's arrows do for
   selectService() in script.js. Every other service page's mobile prev/next
   arrows (inside #seoServicesWrap/#ppcServicesWrap/#cmServicesWrap/etc.)
   reuse the same "smm-slider-arrow" markup/classes too. */
body.smm-page .smm-slider-arrow,
body.brc-page .smm-slider-arrow,
#seoServicesWrap .smm-slider-arrow,
#ppcServicesWrap .smm-slider-arrow,
#cmServicesWrap .smm-slider-arrow,
#pbaServicesWrap .smm-slider-arrow,
#vpServicesWrap .smm-slider-arrow,
#wdcServicesWrap .smm-slider-arrow,
#wdvServicesWrap .smm-slider-arrow{
  display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:#fff;
  color:var(--primary);align-items:center;justify-content:center;box-shadow:var(--shadow-md);
  cursor:pointer;transition:all .3s var(--ease);
}
body.smm-page .smm-slider-arrow svg,
body.brc-page .smm-slider-arrow svg,
#seoServicesWrap .smm-slider-arrow svg,
#ppcServicesWrap .smm-slider-arrow svg,
#cmServicesWrap .smm-slider-arrow svg,
#pbaServicesWrap .smm-slider-arrow svg,
#vpServicesWrap .smm-slider-arrow svg,
#wdcServicesWrap .smm-slider-arrow svg,
#wdvServicesWrap .smm-slider-arrow svg{width:16px;height:16px}
body.smm-page .smm-slider-arrow:hover,
body.brc-page .smm-slider-arrow:hover,
#seoServicesWrap .smm-slider-arrow:hover,
#ppcServicesWrap .smm-slider-arrow:hover,
#cmServicesWrap .smm-slider-arrow:hover,
#pbaServicesWrap .smm-slider-arrow:hover,
#vpServicesWrap .smm-slider-arrow:hover,
#wdcServicesWrap .smm-slider-arrow:hover,
#wdvServicesWrap .smm-slider-arrow:hover{background:var(--primary);border-color:var(--primary);color:#fff}
body.smm-page .smm-slider-arrow-prev,
body.brc-page .smm-slider-arrow-prev,
#seoServicesWrap .smm-slider-arrow-prev,
#ppcServicesWrap .smm-slider-arrow-prev,
#cmServicesWrap .smm-slider-arrow-prev,
#pbaServicesWrap .smm-slider-arrow-prev,
#vpServicesWrap .smm-slider-arrow-prev,
#wdcServicesWrap .smm-slider-arrow-prev,
#wdvServicesWrap .smm-slider-arrow-prev{left:2px}
body.smm-page .smm-slider-arrow-next,
body.brc-page .smm-slider-arrow-next,
#seoServicesWrap .smm-slider-arrow-next,
#ppcServicesWrap .smm-slider-arrow-next,
#cmServicesWrap .smm-slider-arrow-next,
#pbaServicesWrap .smm-slider-arrow-next,
#vpServicesWrap .smm-slider-arrow-next,
#wdcServicesWrap .smm-slider-arrow-next,
#wdvServicesWrap .smm-slider-arrow-next{right:2px}

/* ---------- Services: restyle only — same tab-list + detail-panel
   structure/markup/JS as seo.html and ppc-agency-in-chennai.html (nothing
   here touches the shared #serviceTabs/#servicePanel selectors above),
   just a more elevated look for these pages: individually-carded tabs
   instead of one flush list, a gradient top edge on the panel, and
   rounded-square check icons matching the #journey convention already
   used elsewhere on the smm page.
   Also reused on body.brc-page and every #XxServicesWrap page below —
   they all render the SAME .service-tabs/.service-tab/.service-panel
   markup, so they all pick up this identical look. ---------- */
/* branding-company-in-chennai.html's <body> carries "seo-page" alongside
   "brc-page" (for the shared header/contact-form token set above), which
   would otherwise also catch the "body:is(.seo-page,.ppc-page)
   .services-wrap{display:none}" rule meant only for seo.html/ppc.html's
   OWN hidden legacy tab panel — restore it for this page's real,
   visible one. seo.html/ppc.html's real Services section now lives at
   #seoServicesWrap/#ppcServicesWrap instead, which — being an id — already
   outranks that class-only display:none rule, so no override is needed there. */
body.brc-page .services-wrap{display:grid}

body.smm-page .service-tabs,
body.brc-page .service-tabs,
#seoServicesWrap .service-tabs,
#ppcServicesWrap .service-tabs,
#cmServicesWrap .service-tabs,
#pbaServicesWrap .service-tabs,
#vpServicesWrap .service-tabs,
#wdcServicesWrap .service-tabs,
#wdvServicesWrap .service-tabs{
  border:none;background:transparent;box-shadow:none;border-radius:0;
  display:flex;flex-direction:column;gap:10px;
}
body.smm-page .service-tab,
body.brc-page .service-tab,
#seoServicesWrap .service-tab,
#ppcServicesWrap .service-tab,
#cmServicesWrap .service-tab,
#pbaServicesWrap .service-tab,
#vpServicesWrap .service-tab,
#wdcServicesWrap .service-tab,
#wdvServicesWrap .service-tab{
  border:1px solid var(--border);border-radius:var(--radius-md);background:#fff;
  box-shadow:var(--shadow-sm);transition:all .3s var(--ease);
}
body.smm-page .service-tab:hover,
body.brc-page .service-tab:hover,
#seoServicesWrap .service-tab:hover,
#ppcServicesWrap .service-tab:hover,
#cmServicesWrap .service-tab:hover,
#pbaServicesWrap .service-tab:hover,
#vpServicesWrap .service-tab:hover,
#wdcServicesWrap .service-tab:hover,
#wdvServicesWrap .service-tab:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
body.smm-page .service-tab.active,
body.brc-page .service-tab.active,
#seoServicesWrap .service-tab.active,
#ppcServicesWrap .service-tab.active,
#cmServicesWrap .service-tab.active,
#pbaServicesWrap .service-tab.active,
#vpServicesWrap .service-tab.active,
#wdcServicesWrap .service-tab.active,
#wdvServicesWrap .service-tab.active{
  border-color:transparent;box-shadow:var(--shadow-md);
  background:linear-gradient(120deg,var(--primary),var(--secondary));
}
body.smm-page .service-tab .tnum,
body.brc-page .service-tab .tnum,
#seoServicesWrap .service-tab .tnum,
#ppcServicesWrap .service-tab .tnum,
#cmServicesWrap .service-tab .tnum,
#pbaServicesWrap .service-tab .tnum,
#vpServicesWrap .service-tab .tnum,
#wdcServicesWrap .service-tab .tnum,
#wdvServicesWrap .service-tab .tnum{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:7px;background:var(--bg-soft);
  color:var(--secondary);transition:all .3s var(--ease);
}
body.smm-page .service-tab.active .tnum,
body.brc-page .service-tab.active .tnum,
#seoServicesWrap .service-tab.active .tnum,
#ppcServicesWrap .service-tab.active .tnum,
#cmServicesWrap .service-tab.active .tnum,
#pbaServicesWrap .service-tab.active .tnum,
#vpServicesWrap .service-tab.active .tnum,
#wdcServicesWrap .service-tab.active .tnum,
#wdvServicesWrap .service-tab.active .tnum{background:rgba(255,255,255,.22);color:#fff}

body.smm-page .service-panel,
body.brc-page .service-panel,
#seoServicesWrap .service-panel,
#ppcServicesWrap .service-panel,
#cmServicesWrap .service-panel,
#pbaServicesWrap .service-panel,
#vpServicesWrap .service-panel,
#wdcServicesWrap .service-panel,
#wdvServicesWrap .service-panel{position:relative;box-shadow:var(--shadow-md);overflow:hidden}
body.smm-page .service-panel::before,
body.brc-page .service-panel::before,
#seoServicesWrap .service-panel::before,
#ppcServicesWrap .service-panel::before,
#cmServicesWrap .service-panel::before,
#pbaServicesWrap .service-panel::before,
#vpServicesWrap .service-panel::before,
#wdcServicesWrap .service-panel::before,
#wdvServicesWrap .service-panel::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(120deg,var(--primary),var(--secondary));
}
body.smm-page .service-panel .snum,
body.brc-page .service-panel .snum,
#seoServicesWrap .service-panel .snum,
#ppcServicesWrap .service-panel .snum,
#cmServicesWrap .service-panel .snum,
#pbaServicesWrap .service-panel .snum,
#vpServicesWrap .service-panel .snum,
#wdcServicesWrap .service-panel .snum,
#wdvServicesWrap .service-panel .snum{display:flex;align-items:center;gap:8px}
body.smm-page .service-panel .snum::before,
body.brc-page .service-panel .snum::before,
#seoServicesWrap .service-panel .snum::before,
#ppcServicesWrap .service-panel .snum::before,
#cmServicesWrap .service-panel .snum::before,
#pbaServicesWrap .service-panel .snum::before,
#vpServicesWrap .service-panel .snum::before,
#wdcServicesWrap .service-panel .snum::before,
#wdvServicesWrap .service-panel .snum::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--tick-gradient);flex-shrink:0;
}
body.smm-page .service-panel .check-item svg,
body.brc-page .service-panel .check-item svg,
#seoServicesWrap .service-panel .check-item svg,
#ppcServicesWrap .service-panel .check-item svg,
#cmServicesWrap .service-panel .check-item svg,
#pbaServicesWrap .service-panel .check-item svg,
#vpServicesWrap .service-panel .check-item svg,
#wdcServicesWrap .service-panel .check-item svg,
#wdvServicesWrap .service-panel .check-item svg{border-radius:8px}
/* The 5 pages built from static cards (content-marketing/personal-branding/
   video-production/web-design/web-development) preserve their existing
   .seo-service-checks check-list markup inside the new .service-panel
   instead of remapping to .check-grid/.check-item — style it to match. */
#cmServicesWrap .service-panel .seo-service-checks,
#pbaServicesWrap .service-panel .seo-service-checks,
#vpServicesWrap .service-panel .seo-service-checks,
#wdcServicesWrap .service-panel .seo-service-checks,
#wdvServicesWrap .service-panel .seo-service-checks{margin-top:6px}
#cmServicesWrap .service-panel .seo-service-checks span,
#pbaServicesWrap .service-panel .seo-service-checks span,
#vpServicesWrap .service-panel .seo-service-checks span,
#wdcServicesWrap .service-panel .seo-service-checks span,
#wdvServicesWrap .service-panel .seo-service-checks span{padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-soft)}
#cmServicesWrap .service-panel h3,
#pbaServicesWrap .service-panel h3,
#vpServicesWrap .service-panel h3,
#wdcServicesWrap .service-panel h3,
#wdvServicesWrap .service-panel h3{font-size:1.6rem;margin-bottom:14px}

@media (max-width:920px){
  /* The tab row is the "lightweight headline" at the top of this section on
     mobile — replaced there by the single-service panel + prev/next
     arrows below, one service visible (and one tap) at a time. */
  body.smm-page .service-tabs,
  body.brc-page .service-tabs,
  #seoServicesWrap .service-tabs,
  #ppcServicesWrap .service-tabs,
  #cmServicesWrap .service-tabs,
  #pbaServicesWrap .service-tabs,
  #vpServicesWrap .service-tabs,
  #wdcServicesWrap .service-tabs,
  #wdvServicesWrap .service-tabs{display:none}
  body.smm-page .smm-slider-arrow,
  body.brc-page .smm-slider-arrow,
  #seoServicesWrap .smm-slider-arrow,
  #ppcServicesWrap .smm-slider-arrow,
  #cmServicesWrap .smm-slider-arrow,
  #pbaServicesWrap .smm-slider-arrow,
  #vpServicesWrap .smm-slider-arrow,
  #wdcServicesWrap .smm-slider-arrow,
  #wdvServicesWrap .smm-slider-arrow{display:flex}
  body.smm-page .service-panel,
  body.brc-page .service-panel,
  #seoServicesWrap .service-panel,
  #ppcServicesWrap .service-panel,
  #cmServicesWrap .service-panel,
  #pbaServicesWrap .service-panel,
  #vpServicesWrap .service-panel,
  #wdcServicesWrap .service-panel,
  #wdvServicesWrap .service-panel{padding:32px 46px}
}
@media (max-width:480px){
  body.smm-page .smm-slider-arrow,
  body.brc-page .smm-slider-arrow,
  #seoServicesWrap .smm-slider-arrow,
  #ppcServicesWrap .smm-slider-arrow,
  #cmServicesWrap .smm-slider-arrow,
  #pbaServicesWrap .smm-slider-arrow,
  #vpServicesWrap .smm-slider-arrow,
  #wdcServicesWrap .smm-slider-arrow,
  #wdvServicesWrap .smm-slider-arrow{width:32px;height:32px}
  body.smm-page .smm-slider-arrow svg,
  body.brc-page .smm-slider-arrow svg,
  #seoServicesWrap .smm-slider-arrow svg,
  #ppcServicesWrap .smm-slider-arrow svg,
  #cmServicesWrap .smm-slider-arrow svg,
  #pbaServicesWrap .smm-slider-arrow svg,
  #vpServicesWrap .smm-slider-arrow svg,
  #wdcServicesWrap .smm-slider-arrow svg,
  #wdvServicesWrap .smm-slider-arrow svg{width:14px;height:14px}
  body.smm-page .service-panel{padding:28px 40px}
}

/* ---------- "Your Social Media Should Do More Than Fill Your Feed" —
   two connected-pill flow rows, reusing the site's existing pill visual
   language (.pill/.chip) rather than a new component. ---------- */
body.smm-page .smm-flow-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:26px 0}
body.smm-page .smm-flow-pill{
  padding:11px 20px;border-radius:999px;border:1px solid var(--border);background:#fff;
  font-weight:600;font-size:.9rem;color:var(--ink);box-shadow:var(--shadow-sm);
}
body.smm-page .smm-flow-pill-accent{
  border-color:transparent;color:#fff;background:linear-gradient(120deg,var(--primary),var(--secondary));
}
body.smm-page .smm-flow-arrow{color:var(--faint);font-size:1rem;flex-shrink:0}
@media (max-width:640px){
  body.smm-page .smm-flow-pill{padding:9px 16px;font-size:.85rem}
}

/* ==========================================================================
   Floating contact buttons (WhatsApp + Call)
   Intentionally unscoped (no ".home-page"/".seo-page" prefix): the two
   buttons are inserted as plain siblings right before </body> on every
   page -- outside every page's own header/content wrapper -- so this exact
   block works unmodified no matter which body classes that page carries.
   Colors reuse the site's existing blue gradient (same as .home-btn-primary)
   rather than WhatsApp's stock green/an orange call button, so the two
   read as one consistent JOD-branded action instead of two unrelated
   brand colors bolted on.
   ========================================================================== */
.jod-fab{
  position:fixed;bottom:20px;z-index:140;width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:rgb(36,204,99);
  box-shadow:0 10px 30px rgba(16,20,74,.28);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1);
}
.jod-fab svg{width:28px;height:28px}
.jod-fab-whatsapp{right:20px}
.jod-fab-call{right:20px; bottom:92px; background:linear-gradient(120deg,#1A237E,#4457e6)}
.jod-fab:hover,.jod-fab:focus-visible{transform:scale(1.08);box-shadow:0 14px 38px rgba(16,20,74,.36)}
.jod-fab:active{transform:scale(.96)}
.jod-fab:focus-visible{outline:2px solid #8ec9ff;outline-offset:3px}

@media (max-width:640px){
  .jod-fab{width:48px;height:48px;bottom:16px}
  .jod-fab svg{width:22px;height:22px}
  .jod-fab-whatsapp{right:14px}
  .jod-fab-call{right:14px; bottom:76px}
}
@media (prefers-reduced-motion:reduce){
  .jod-fab{transition:none}
}