:root{
    --primary:#FF0055;
    --secondary:#6C63FF;
    --accent:#00E5FF;
    --accent-ink:#FF0055;
    --bg:#FFFFFF;
    --card: rgba(11,11,18,0.035);
    --text:#0B0B12;
    --muted:#5B5B66;
    --shadow-card: 0 2px 6px rgba(11,11,18,.05), 0 16px 34px -18px rgba(11,11,18,.18);
    --shadow-card-hover: 0 10px 22px -8px rgba(11,11,18,.14), 0 32px 64px -26px rgba(11,11,18,.26);
  }

  *{ box-sizing:border-box; }
  html{ background:var(--bg); }
  html.lenis{ height:auto; }
  .lenis.lenis-smooth{ scroll-behavior:auto !important; }

  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
    cursor:default;
  }

  ::selection{ background:var(--primary); color:#fff; }

  ::-webkit-scrollbar{ width:8px; }
  ::-webkit-scrollbar-track{ background:var(--bg); }
  ::-webkit-scrollbar-thumb{ background:linear-gradient(var(--primary),var(--secondary)); border-radius:10px; }

  h1,h2,h3,h4, .font-display{ font-family:'Space Grotesk', sans-serif; }
  .font-mono{ font-family:'JetBrains Mono', monospace; }

  /* ---------- Utility gradients ---------- */
  .grad-text{
    background:linear-gradient(90deg,var(--primary),var(--secondary) 55%, var(--accent));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .grad-line{
    background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));
  }

  .glass{
    background:var(--card);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(11,11,18,0.08);
    box-shadow:var(--shadow-card);
    transition:box-shadow .35s ease, transform .35s ease, background .35s ease, border-color .35s ease;
  }

  /* Project modal needs its own solid surface — .glass's near-transparent
     tint is built for cards sitting on the page's white background, so it
     reads as almost invisible when the panel instead sits over the dark,
     blurred modal backdrop. */
  .modal-panel{
    background:#fff;
  }

  /* Cards that already lift on hover get a deeper shadow to match */
  .blog-card:hover,
  .faq-item:hover,
  .faq-item.open{
    box-shadow:var(--shadow-card-hover);
  }

  /* Contact / audit form card: the strongest lift on the page on purpose */
  #contact .glass,
  #audit .glass{
    box-shadow:0 10px 24px -12px rgba(11,11,18,.12), 0 48px 90px -36px rgba(11,11,18,.30);
  }

  section{ position:relative; }

  /* ---------- Cursor glow ---------- */
  #cursor-glow{
    position:fixed; top:0; left:0; width:70px; height:70px;
    border-radius:50%; pointer-events:none; z-index:2;
    background:radial-gradient(circle, rgba(255,0,85,0.10), rgba(108,99,255,0.06) 45%, transparent 70%);
    transform:translate(-50%,-50%);
    will-change:transform;
    mix-blend-mode:multiply;
  }
  @media (max-width:768px){ #cursor-glow{ display:none; } }

  /* ---------- Custom cursor dot ---------- */
  #cursor-dot{
    position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%;
    background:var(--accent); pointer-events:none; z-index:9999; mix-blend-mode:difference;
    transform:translate(-50%,-50%);
  }
  @media (max-width:768px){ #cursor-dot{ display:none; } }

  /* ---------- Nav ---------- */
  #nav{
    transition:all .4s ease;
  }
  #nav.scrolled{
    background:rgba(255,255,255,0.78);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(11,11,18,0.06);
  }

  /* ---------- Hero-dark pages (dark first-screen hero, rest of page stays light) ---------- */
  body.hero-dark #home,
  body.hero-dark #hero{
    background:#0B0B12;
    color:#fff;
  }
  body.hero-dark #home .blob,
  body.hero-dark #hero .blob{
    opacity:.55;
  }
  body.hero-dark #home .glass,
  body.hero-dark #hero .glass{
    background:rgba(255,255,255,0.05);
    border-color:rgba(255,255,255,0.08);
  }
  body.hero-dark #nav:not(.scrolled) nav{
    color:rgba(255,255,255,.8);
  }
  body.hero-dark #nav:not(.scrolled) #menuBtn{
    color:#fff;
  }

  /* ---------- Standalone dark-band sections (mid-page sections restored to the dark theme) ---------- */
  .dark-section{
    background:#0B0B12;
    color:#fff;
  }
  .dark-section .blob{
    opacity:.55;
  }
  .dark-section .glass{
    background:rgba(255,255,255,0.05);
    border-color:rgba(255,255,255,0.08);
  }

  /* ---------- Form-section wash (contact / audit form cards) ----------
     Soft cyan/purple glow seated in the corners of the section, painted
     as the section's own background so it always sits beneath the form
     card and copy. Used on the contact form (home) and the free-audit
     form sections (service pages). */
  .wash-cyan{
    background:
      radial-gradient(980px 440px at 8% 8%,   rgba(0,229,255,.06),  transparent 60%),
      radial-gradient(820px 460px at 100% 90%, rgba(108,99,255,.032), transparent 60%),
      #fff;
  }

  .nav-link{ position:relative; }
  .nav-link::after{
    content:''; position:absolute; left:0; bottom:-4px; width:0; height:1px;
    background:linear-gradient(90deg,var(--primary),var(--accent));
    transition:width .35s ease;
  }
  .nav-link:hover::after{ width:100%; }

  /* ---------- Nav dropdown (Services) ---------- */
  .nav-dropdown{ position:relative; }
  .nav-dropdown-btn{
    display:inline-flex; align-items:center; gap:6px; background:none; border:none;
    font:inherit; color:inherit; cursor:pointer; position:relative;
  }
  .nav-dropdown-btn::after{
    content:''; position:absolute; left:0; bottom:-4px; width:0; height:1px;
    background:linear-gradient(90deg,var(--primary),var(--accent));
    transition:width .35s ease;
  }
  .nav-dropdown-btn:hover::after{ width:100%; }
  .nav-dropdown-chevron{ font-size:.6rem; transition:transform .25s ease; }
  .nav-dropdown.open .nav-dropdown-chevron{ transform:rotate(180deg); }
  .nav-dropdown-panel{
    position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-8px);
    width:320px; border-radius:1.25rem; padding:.6rem; z-index:60;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(11,11,18,0.08);
    box-shadow: 0 25px 60px -15px rgba(11,11,18,0.25);
    opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  }
  .nav-dropdown.open .nav-dropdown-panel{
    opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);
  }
  .nav-dropdown-item{
    display:flex; align-items:flex-start; gap:.75rem; padding:.65rem .75rem; border-radius:.85rem;
    transition:background .2s ease;
  }
  .nav-dropdown-item:hover{ background:rgba(11,11,18,0.05); }
  .nav-dropdown-item .nd-icon{
    width:34px; height:34px; border-radius:.65rem; display:flex; align-items:center; justify-content:center;
    background:rgba(255,0,85,0.12); color:var(--accent-ink); font-size:.85rem; flex-shrink:0;
  }
  /* Mobile services accordion */
  .mobile-services-btn .fa-chevron-down{ transition:transform .25s ease; }
  .mobile-services-btn.open .fa-chevron-down{ transform:rotate(180deg); }
  .mobile-services-panel{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
  .mobile-services-panel.open{ max-height:400px; }

  /* ---------- Magnetic buttons ---------- */
  .magnetic{ display:inline-flex; will-change:transform; }

  /* Gradient pill CTAs: soft brand-colored shadow so they read as
     raised, pressable objects rather than a flat gradient fill. */
  a.magnetic.grad-line,
  button.magnetic.grad-line{
    box-shadow:0 14px 30px -14px rgba(255,0,85,.5);
    transition:box-shadow .3s ease, transform .3s ease;
  }
  a.magnetic.grad-line:hover,
  button.magnetic.grad-line:hover{
    box-shadow:0 18px 38px -14px rgba(255,0,85,.6);
  }

  /* ---------- Blobs ---------- */
  .blob{
    position:absolute; border-radius:50%; filter:blur(90px); opacity:.35; pointer-events:none;
  }

  /* ---------- Floating icons hero ---------- */
  .float-icon{
    position:absolute; opacity:.5;
  }

  /* ---------- Section eyebrow ---------- */
  .eyebrow{
    letter-spacing:.25em; text-transform:uppercase; font-size:.7rem; color:var(--accent-ink);
  }
  .eyebrow::before{
    content:''; display:inline-block; width:26px; height:1px; background:var(--accent-ink);
    margin-right:10px; vertical-align:middle;
  }
  /* Centered eyebrow variant (e.g. thanks.html's badge under a centered icon) -
     a single left-side dash reads fine in the left-aligned two-column sections
     the default .eyebrow is used in, but looks visibly off-center when the
     eyebrow itself is centered under a symmetric icon/badge. Mirroring the
     dash on both sides keeps the whole label optically centered. */
  .eyebrow.eyebrow-center::after{
    content:''; display:inline-block; width:26px; height:1px; background:var(--accent-ink);
    margin-left:10px; vertical-align:middle;
  }

  /* ---------- Expertise grid ---------- */
  .exp-grid{
    display:grid; grid-template-columns:repeat(1,1fr); gap:1.1rem;
  }
  @media(min-width:640px){ .exp-grid{ grid-template-columns:repeat(2,1fr); } }
  @media(min-width:900px){ .exp-grid{ grid-template-columns:repeat(3,1fr); } }
  @media(min-width:1180px){
    .exp-grid{ grid-template-columns:repeat(5,1fr); }
    /* A 6-card grid (the 3 service pages) would otherwise split 5+1,
       leaving one card stranded on its own row. Keep it a clean 3x2
       instead — homepage's 10-card grid (5+5) is unaffected. */
    .exp-grid:has(> :nth-child(6):last-child){ grid-template-columns:repeat(3,1fr); }
  }

  .exp-card{
    background:linear-gradient(160deg, rgba(11,11,18,0.045), rgba(11,11,18,0.015));
    border:1px solid rgba(11,11,18,0.08);
    text-align:left; position:relative; overflow:hidden;
    box-shadow:0 2px 6px rgba(11,11,18,.04), 0 12px 26px -16px rgba(11,11,18,.14);
    transition:transform .4s cubic-bezier(.2,.8,.2,1), background .4s ease, border-color .35s ease, box-shadow .4s ease;
  }
  .exp-card:hover{
    transform:translateY(-6px);
    border-color:rgba(255,0,85,.4);
    background:linear-gradient(160deg, rgba(255,0,85,0.10), rgba(108,99,255,0.06));
    box-shadow:0 10px 22px -10px rgba(255,0,85,.20), 0 30px 60px -26px rgba(255,0,85,.22);
  }
  .exp-card .exp-icon{ transition:transform .35s ease, background .35s ease; }
  .exp-card:hover .exp-icon{ transform:scale(1.08); background:rgba(255,0,85,.2); }

  /* ---------- Counters ---------- */
  /* NOTE: no filter/drop-shadow here on purpose — .counter-num sits inside a
     .grad-text element (background-clip:text + color:transparent), and a
     filter on the span breaks that gradient-clip rendering in Chrome,
     making the number invisible while the surrounding +/% stays visible. */
  .counter-num{ font-variant-numeric:tabular-nums; }

  /* ---------- Process timeline ---------- */
  .process-track{ position:relative; }
  .process-line{
    position:absolute; height:2px; left:0; right:0; top:28px;
    background:rgba(11,11,18,0.1);
  }
  .process-line-fill{
    position:absolute; height:2px; left:0; top:0; width:0%;
    background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));
  }
  .process-dot{
    width:14px; height:14px; border-radius:50%; background:var(--bg);
    border:2px solid var(--secondary); position:relative; z-index:2;
  }

  /* ---------- Portfolio masonry ---------- */
  .masonry{ columns:1; column-gap:1.25rem; }
  @media(min-width:768px){ .masonry{ columns:2; } }
  @media(min-width:1100px){ .masonry{ columns:3; } }
  .masonry-item{ break-inside:avoid; margin-bottom:1.25rem; }

  /* ---------- Lists inside project modal content ---------- */
  /* Tailwind's reset strips default <ul>/<li> styling, so any bullet list
     you add inside a project modal (.modal-panel) picks this up automatically. */
  .modal-panel ul{
    list-style:disc; padding-left:1.25rem;
    display:flex; flex-direction:column; gap:0.55rem;
  }
  .modal-panel ul li{
    color:rgba(11,11,18,0.65); font-size:0.9rem; line-height:1.6;
  }
  .modal-panel ul li::marker{ color:var(--accent-ink); }

  .filter-btn{
    border:1px solid rgba(11,11,18,0.14); transition:all .3s ease;
  }
  .filter-btn.active, .filter-btn:hover{
    border-color:transparent; color:#fff;
    background:linear-gradient(90deg,var(--primary),var(--secondary));
    box-shadow:0 10px 22px -12px rgba(255,0,85,.4);
  }

  /* ---------- Skills radar ---------- */
  .radar-poly{ transition:all .5s ease; }

  /* ---------- Marquee ---------- */
  .marquee-track{ display:flex; width:max-content; animation:marquee 34s linear infinite; }
  @keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
  .marquee-wrap{ overflow:hidden; }
  .marquee-wrap:hover .marquee-track{ animation-play-state:paused; }

  .brand-name{
    font-weight:600; font-size:1.15rem; letter-spacing:.01em;
    color:rgba(11,11,18,.4); transition:color .15s ease; white-space:nowrap;
  }
  .brand-name:hover{ color:rgba(11,11,18,.85); }

  /* ---------- FAQ ---------- */
  .faq-item .faq-a{
    max-height:0; overflow:hidden; transition:max-height .5s ease;
  }
  .faq-item.open .faq-a{ max-height:240px; }
  .faq-item.open .faq-chevron{ transform:rotate(45deg); }
  .faq-chevron{ transition:transform .35s ease; }

  /* ---------- Form ---------- */
  .field{
    background:rgba(11,11,18,0.03); border:1px solid rgba(11,11,18,0.12);
    transition:border-color .3s ease, background .3s ease;
  }
  .field:focus{ outline:none; border-color:var(--accent-ink); background:rgba(11,11,18,0.045); }

  /* ---------- misc reveal ---------- */
  .reveal{ opacity:0; transform:translateY(40px); }

  a, button{ -webkit-tap-highlight-color:transparent; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  }

  .noise{
    position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.02; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .skip-link{
    position:absolute; left:-999px; top:0; background:var(--primary); color:#fff; padding:.6rem 1rem; z-index:9999;
  }
  .skip-link:focus{ left:1rem; top:1rem; }

  :focus-visible{ outline:2px solid var(--accent-ink); outline-offset:3px; }

/* =====================================================================
   SITE REDESIGN — approved on the color-concept preview, rolled out here
   site-wide (2026-09-19). Originated in css/color-concept.css, scoped to
   body.color-concept; that scoping has been dropped so these rules now
   apply on every page that loads this stylesheet (homepage + service
   pages + blog). css/color-concept.css / index-color-concept.html are
   left in place, unchanged, as the ongoing preview sandbox for further
   design exploration — see the header of that file.

   This pass is a structural redesign, not another coat of color: the
   real reason the page reads as "plain" is that eight sections in a
   row use the exact same rhythm (eyebrow → heading → subtext → grid of
   identical cards). This introduces genuine variance —

     - About: an asymmetric split (a dark "spotlight" bio panel + a
       connected vertical timeline) instead of five identical cards.
     - Stats: a full-bleed dark contrast band, reusing the site's own
       existing .dark-section treatment, so light/dark/light rhythm
       replaces an unbroken run of white sections.
     - Expertise: unchanged grid, but now visually bracketed by a dark
       section above and below it, so it doesn't blend into a wall of
       white on its own.
     - Portfolio: a dark, full-bleed "case study index" — numbered,
       typographic rows with the result as the headline, replacing the
       nine identical white icon cards.
     - Contact: the same dark spotlight-panel language from About,
       paired with the (already-approved) light form card — a
       deliberate two-tone pairing instead of text-on-background.

   Every dark panel reuses the hero's own near-black + brand-gradient
   glow formula, so the new sections read as "more of this site's
   existing language," not a new, unrelated color scheme.
   ===================================================================== */

/* ---------- Shared dark "spotlight" panel (About bio + Contact info) ---------- */
.about-panel,
.contact-panel{
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,0,85,.35), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(108,99,255,.35), transparent 55%),
    #0B0B12;
  color:#fff;
  box-shadow: var(--shadow-card, 0 2px 6px rgba(11,11,18,.05), 0 16px 34px -18px rgba(11,11,18,.18));
}
.about-panel .eyebrow,
.contact-panel .eyebrow{
  color:var(--primary);
}
.contact-panel{
  height:100%;
  display:flex; flex-direction:column; justify-content:center;
}

/* ---------- Contact panel: reassurance/CTA perks grid ----------
   Replaces the email/phone/location block, which moved to the footer.
   Same dark-card language as the Industries grid (opaque tint fill +
   faint border) so it reads as one family of "chips" across the page. */
.contact-perks{
  display:grid; grid-template-columns:1fr; gap:.75rem;
  margin-top:2.5rem;
}
@media(min-width:480px){
  .contact-perks{ grid-template-columns:repeat(2,1fr); }
}
.contact-perk{
  display:flex; align-items:center; gap:.7rem;
  padding:.85rem 1rem;
  border-radius:12px;
  font-family:'Space Grotesk',sans-serif;
  font-size:.82rem; font-weight:600; color:rgba(255,255,255,.85);
  transition:transform .3s ease, box-shadow .3s ease;
  /* Fixed gradient border (not a hover-only reveal) — same pink→purple→cyan
     ring used on the CTA buttons, via the two-background trick (opaque
     padding-box fill + gradient border-box) so it still respects the
     rounded corners. */
  border:1.5px solid transparent;
  background:
    linear-gradient(#18181f,#18181f) padding-box,
    linear-gradient(90deg,var(--primary),var(--secondary),var(--accent)) border-box;
}
.contact-perk:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.5);
}
.contact-perk-icon{
  width:30px; height:30px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  color:var(--accent);
  font-size:.78rem;
}

/* ---------- Audit panel (service pages): same dark spotlight + gradient-
   border chip language as .contact-panel/.contact-perk above, adapted to
   hold a title AND a description per row (contact-perks are single-line). ---------- */
#audit .contact-panel{ justify-content:flex-start; }
#audit .contact-panel h2{ color:#fff; margin-top:.85rem; }
#audit .contact-panel > p.text-white\/60{ color:rgba(255,255,255,.6); font-size:1rem; line-height:1.5; margin-top:.85rem; }
.audit-perks{
  display:flex; flex-direction:column; gap:.55rem;
  margin-top:.85rem;
}
.audit-perk{
  border-radius:12px;
  border:1.5px solid transparent;
  background:
    linear-gradient(#18181f,#18181f) padding-box,
    linear-gradient(90deg,var(--primary),var(--secondary),var(--accent)) border-box;
  transition:transform .3s ease, box-shadow .3s ease;
  padding:.65rem .85rem;
  gap:.75rem;
}
.audit-perk:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.5);
}
.audit-perk-icon{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.1);
  color:var(--accent) !important;
  width:2rem !important; height:2rem !important;
  font-size:.68rem;
}
.audit-perk .font-display{ color:#fff; font-size:.88rem; line-height:1.25; margin:0; font-weight:600; }
.audit-perk p.text-black\/50{ color:rgba(255,255,255,.55); font-size:.74rem; line-height:1.35; }

/* Equalize the Audit section's two columns: the form dictates height
   (h-fit removed from the form in markup), the dark panel stretches to
   match and vertically centers its (now more compact) content — same
   pattern as the homepage Contact section. */
#audit .grid{ align-items:stretch; }

/* ---------- Featured Case Study (PPC page): black card + gradient border,
   same fixed-gradient-border-box language used everywhere else on the
   site. Stat tiles get the same treatment as .audit-perk / .contact-perk. ---------- */
#featured-case .glass.rounded-3xl{
  border:1.5px solid transparent;
  background:
    linear-gradient(#18181f,#18181f) padding-box,
    linear-gradient(90deg,var(--primary),var(--secondary),var(--accent)) border-box;
  box-shadow:0 20px 44px -22px rgba(11,11,18,.45);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
#featured-case .glass.rounded-3xl h3{ color:#fff; }
#featured-case .glass.rounded-3xl p.text-black\/60{ color:rgba(255,255,255,.6); }
#featured-case .glass.rounded-3xl .rounded-xl.bg-black\/5{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
}
#featured-case .glass.rounded-3xl .rounded-xl.bg-black\/5 p.text-black\/45{ color:rgba(255,255,255,.5); }

/* ---------- Portfolio: dark case-study index ---------- */
/* Filter pills sit on the new dark section — the default (inactive) state
   from style.css assumes a white background, so give it a visible outline
   here. The active/hover gradient-pill state already works on any bg. */
#portfolio .filter-btn{
  border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.65);
}
#portfolio .filter-btn:hover,
#portfolio .filter-btn.active{
  color:#fff;
}

.port-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.25rem 2rem;
  padding:1.75rem .5rem;
  border-bottom:1px solid rgba(255,255,255,.1);
  cursor:pointer;
  transition:background .3s ease;
}
.port-row:hover{
  background:rgba(255,255,255,.035);
}
.masonry-featured .port-row{
  padding-top:2.25rem;
  padding-bottom:2.25rem;
}
.port-row-main{
  display:flex; align-items:flex-start; gap:1.5rem;
  min-width:0; flex:1 1 320px;
}
.port-row-index{
  font-family:'JetBrains Mono',monospace;
  font-size:.95rem;
  color:rgba(255,255,255,.28);
  padding-top:.3rem;
  flex-shrink:0;
  min-width:1.75rem;
  transition:color .3s ease;
}
.port-row:hover .port-row-index{
  color:var(--primary);
}
.port-row-side{
  display:flex; align-items:center; gap:1.25rem;
  flex-shrink:0;
  margin-left:auto;
}
.port-row-arrow{
  color:rgba(255,255,255,.3);
  font-size:.85rem;
  transition:transform .3s ease, color .3s ease;
}
.port-row:hover .port-row-arrow{
  color:var(--primary);
  transform:translate(3px,-3px);
}

/* ---------- Remaining light sections: one calm accent, not a rainbow ---------- */
/* Cycling all three brand colors across every icon/badge/border read as
   scattered and busy, not "colorful" in a good way. Every approved
   section (About, Portfolio, Contact) actually leans on ONE dominant
   accent — pink — with purple/cyan reserved for gradients inside a
   single element (grad-text, the dark-panel glow), never as a rotating
   set of flat swatches. This pass matches that: one solid accent color,
   used consistently, nothing else new introduced. */

/* Expertise: bordered "service card" layout (icon + title header, divider,
   description, "Learn more" link pinned to the bottom) replacing the old
   pastel tiles — matches the reference the client shared. Card surface
   stays neutral (white, thin border) per that reference; the only color
   is the icon itself, cycling through our own 3 brand hues so 6 different
   categories stay visually distinct without introducing new colors. */
.exp-card-bordered{
  background:#fff;
  border:1.5px solid rgba(11,11,18,.08);
  box-shadow:0 2px 6px rgba(11,11,18,.03);
  display:flex; flex-direction:column;
  padding:1.75rem;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease, background .35s ease, color .35s ease;
}
/* Hover: full dark fill + the same pink→purple→cyan gradient ring used
   elsewhere on the page (industry cards, contact perks), via the
   two-background trick — instead of the older light pink/purple wash.
   Also overrides the base .exp-card:hover rules (same element carries
   both classes), which would otherwise still show through underneath. */
.exp-card-bordered:hover{
  transform:translateY(-6px);
  color:#fff;
  border:1.5px solid transparent;
  background:
    linear-gradient(#0B0B12,#0B0B12) padding-box,
    linear-gradient(90deg,var(--primary),var(--secondary),var(--accent)) border-box;
  box-shadow:0 16px 32px -16px rgba(0,0,0,.45);
}
.exp-card-bordered:hover .font-display{ color:#fff; }
.exp-card-bordered:hover p.text-black\/55{ color:rgba(255,255,255,.65); }
/* Icon box stays outlined (no fill) on hover too — the compound
   .exp-card:hover .exp-icon rule from the old design otherwise wins on
   specificity and fills it pink. */
.exp-card-bordered:hover .exp-icon-sm{
  background:transparent;
  transform:scale(1.08);
}
.exp-card-head{
  display:flex; align-items:center; gap:.9rem;
  padding-bottom:1.25rem;
  /* Same pink→purple→cyan gradient already used on the site's gradient CTA
     buttons (.grad-line), reused here as the divider instead of a flat
     gray line — ties this card back to the site's existing language. */
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent)) 1;
}
.exp-card-head .exp-icon-sm{
  flex-shrink:0;
}
.exp-card-bordered p.text-black\/55{
  flex:1;
}
.exp-card-link{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-top:1.5rem;
  font-family:'JetBrains Mono',monospace; font-size:.75rem; font-weight:600;
  color:var(--primary);
  text-transform:uppercase; letter-spacing:.04em;
  transition:gap .25s ease;
}
.exp-card-link i{ font-size:.65rem; transition:transform .25s ease; }
.exp-card-link:hover{ gap:.65rem; }
.exp-card-link:hover i{ transform:translateX(2px); }

/* Icon color: odd/even checkerboard (pink / purple) instead of a 3-across
   cycle — on a 3-column grid, cycling every 3 cards put the same color in
   the same column on every row (col 1 always pink, col 2 always purple,
   col 3 always cyan), which read as a repeating stripe rather than a mix.
   Alternating every card instead means no two cards — side by side or
   stacked — ever share a color. */
/* Trying an outlined icon box instead of a filled one — thin border in the
   card's accent color, no background fill. Easy to revert to the filled
   version above if it doesn't read as well. */
.exp-icon-sm{
  background:transparent;
  border:1.5px solid currentColor;
}
.exp-card-bordered:nth-child(odd) .exp-icon-sm{
  color:var(--primary);
}
.exp-card-bordered:nth-child(even) .exp-icon-sm{
  color:var(--secondary);
}
.exp-card-bordered:nth-child(even) .exp-card-link{ color:var(--secondary); }

/* Process: numbered badges replace the outline dot + separate label
   underneath it. Same outlined treatment as the Expertise icon boxes —
   thin border, no fill — instead of a solid-filled circle. */
.process-num{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:.75rem; font-weight:600;
  color:var(--primary); background:#fff;
  border:1.5px solid var(--primary);
  position:relative; z-index:2;
}
/* Scoped to a track that actually has the new numbered badges — the 3
   service-page landing pages still use the older .process-dot circles on
   this exact same .process-track/.process-line/.process-line-fill markup,
   tuned for the original top:28px/top:0. Only override the line position
   where .process-num is present, so those pages are untouched. */
.process-track:has(.process-num) .process-line,
.process-track:has(.process-num) .process-line-fill{ top:20px; }

/* Testimonials + FAQ: the same single flat tint (no gradient) rather than
   two different hues, so the page isn't introducing new colors per
   section. */
.solid-lavender,
.solid-blush{
  background:#FAF7F8;
}
.marquee-fade-l{
  background:linear-gradient(to right,#FAF7F8,transparent);
}
.marquee-fade-r{
  background:linear-gradient(to left,#FAF7F8,transparent);
}
#faqList .faq-item{
  border-left:3px solid var(--primary);
}

/* Blog: outlined pill tag (border only, no fill) instead of a solid-filled
   pill — same "border, not fill" language as the Expertise icons and
   Process badges. */
.blog-tag{
  display:inline-block;
  font-family:'JetBrains Mono',monospace; font-size:.7rem;
  color:var(--primary); background:transparent;
  border:1.5px solid var(--primary);
  border-radius:999px; padding:.25rem .7rem;
}

/* Blog card border: the same pink→purple→cyan gradient used on the site's
   CTA buttons and the Expertise header divider, instead of a flat gray
   border. Uses the two-background trick (padding-box fill + border-box
   gradient) rather than border-image, so it still respects the card's
   rounded corners. */
.blog-card{
  border:1.5px solid transparent;
  /* The fill layer has to be fully opaque — .glass's --card token is a
     near-transparent tint, which let the gradient underneath bleed through
     the whole card instead of staying confined to the border ring. */
  background:
    linear-gradient(#FAFAFB,#FAFAFB) padding-box,
    linear-gradient(90deg,var(--primary),var(--secondary),var(--accent)) border-box;
}

/* ---------- Service-page hero (pill badge, gradient-underline heading,
   lead-gen form card, trust stat boxes) ----------
   Moved here from the SEO and PPC pages' own identical inline <style>
   blocks so the Digital Marketing Consultant page (and any future service
   page) can share the same hero design instead of duplicating it a third
   time. */
.hero-pill{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.55rem 1.15rem; border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.hero-pill-dot{
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));
}
.grad-underline{
  background:linear-gradient(90deg,var(--primary),var(--secondary) 55%, var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  position:relative; display:inline-block;
}
.grad-underline::after{
  content:''; position:absolute; left:.05em; right:.05em; bottom:-.06em; height:.08em;
  min-height:3px; border-radius:4px; opacity:.6;
  background:linear-gradient(90deg,var(--primary),var(--secondary) 55%, var(--accent));
}
/* ---- Hero lead-gen form card (visual mockup, not wired to backend) ---- */
.hero-form-card{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:28px;
  padding:2rem 1.75rem;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 80px -30px rgba(11,11,18,.55);
}
@media (min-width:640px){ .hero-form-card{ padding:2.5rem 2.25rem; } }
.hero-form-fields{ display:flex; flex-direction:column; gap:1rem; }
.hero-field{
  width:100%; border-radius:12px; padding:.85rem 1rem; font-size:.875rem;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); color:#fff;
  font-family:'Inter',sans-serif;
  transition:border-color .3s ease, background .3s ease;
}
.hero-field::placeholder{ color:rgba(255,255,255,.35); }
.hero-field:focus{ outline:none; border-color:var(--accent); background:rgba(255,255,255,0.1); }
.hero-form-submit{
  width:100%; margin-top:.35rem; padding:.95rem 1rem; border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));
  color:#fff; font-weight:600; font-size:.9rem; border:none; cursor:pointer;
  font-family:'Inter',sans-serif;
  box-shadow:0 10px 30px -10px rgba(255,0,85,.5);
  transition:transform .25s ease;
}
.hero-form-submit:hover{ transform:translateY(-1px); }
/* ---- Hero trust stat boxes ---- */
.hero-stats-row{
  display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem;
}
@media (min-width:640px){ .hero-stats-row{ grid-template-columns:repeat(4,1fr); } }
.hero-stat-box{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;
  padding:1rem .9rem;
}
.hero-stat-box-num{ font-size:1.5rem; font-weight:600; line-height:1; }
.hero-stat-box-label{
  margin-top:.35rem; font-size:.72rem; color:rgba(255,255,255,.5); letter-spacing:.02em;
}

/* ---------- Clientele trust strip (stat card + two-row counter-scrolling
   marquee of client-name chips) ----------
   Moved here from the SEO and PPC pages' own identical inline <style>
   blocks so the Digital Marketing Consultant page (and any future service
   page) can share the same design instead of duplicating it a third time. */
.cl-marquee-col{ min-width:0; }
.cl-marquee-wrap{ min-width:0; width:100%; }
.cl-marquee-row{
  display:flex; width:max-content; gap:.85rem;
  animation:cl-marquee 32s linear infinite;
}
.cl-marquee-row.cl-marquee-reverse{ animation-direction:reverse; animation-duration:26s; }
@keyframes cl-marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.cl-marquee-wrap:hover .cl-marquee-row{ animation-play-state:paused; }
.cl-chip{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.6rem 1.25rem; border-radius:999px;
  background:rgba(11,11,18,0.035);
  border:1px solid rgba(11,11,18,0.08);
  font-size:.85rem; font-weight:600; color:rgba(11,11,18,.55);
  white-space:nowrap; flex-shrink:0;
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
.cl-chip:hover{
  border-color:rgba(255,0,85,.35); color:var(--text); background:rgba(255,0,85,.04);
}
.cl-chip-dot{
  width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));
}

/* ---------- About the consultant (light "behind the coach" layout: photo
   card with two floating stat badges) ----------
   Moved here from the SEO and PPC pages' own identical inline <style>
   blocks so the Digital Marketing Consultant page (and any future service
   page) can share the same design instead of duplicating it a third time. */
.ab-photo-card{
  position:relative; border-radius:1.75rem; overflow:hidden;
  aspect-ratio:4/5; width:100%; max-width:380px; margin:0 auto;
  box-shadow:0 30px 70px -30px rgba(11,11,18,.35);
  border:1px solid rgba(11,11,18,0.06);
}
.ab-photo-col{ min-width:0; }
.ab-badge{
  display:none; align-items:center; gap:.75rem;
  background:#fff; border:1px solid rgba(11,11,18,0.08);
  border-radius:1rem; padding:.75rem 1.1rem;
  box-shadow:0 14px 34px -16px rgba(11,11,18,.22);
  white-space:nowrap;
}
@media (min-width:640px){ .ab-badge{ display:flex; } }
.ab-badge-icon{
  width:2.25rem; height:2.25rem; border-radius:.7rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,0,85,.1); color:var(--primary); font-size:.9rem;
}
.ab-badge-num{ font-weight:700; font-size:1rem; color:var(--text); line-height:1.2; }
.ab-badge-label{ font-size:.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-top:.1rem; }

/* ---------- Service box cards (icon + tag, checklist, enquire CTA) ----------
   Moved here from the homepage's own inline <style> so the SEO and PPC
   service pages can share the identical design instead of duplicating it. */
.service-box{
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(120deg,var(--primary),var(--secondary),var(--accent)) border-box;
  border:1.5px solid transparent;
  box-shadow:0 2px 6px rgba(11,11,18,.03);
  padding:1.75rem;
  display:flex; flex-direction:column; height:100%;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.service-box:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 32px -16px rgba(11,11,18,.22);
}
.service-icon{ background:transparent; border:1.5px solid currentColor; }
.service-box:nth-child(3n+1) .service-icon{ color:var(--primary); }
.service-box:nth-child(3n+2) .service-icon{ color:var(--secondary); }
.service-box:nth-child(3n+3) .service-icon{ color:var(--accent); }
.service-tag{
  display:inline-flex; align-items:center;
  padding:.35rem .75rem; border-radius:999px;
  background:rgba(11,11,18,.05);
  font-size:.65rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(11,11,18,.55);
  white-space:nowrap;
}
.service-checklist{ list-style:none; padding:0; margin:1.75rem 0 0; display:flex; flex-direction:column; gap:.75rem; flex:1; }
.service-checklist li{ display:flex; align-items:flex-start; gap:.65rem; font-size:.85rem; color:rgba(11,11,18,.7); line-height:1.4; }
.service-checklist li i{
  flex-shrink:0; margin-top:.15rem;
  width:1.1rem; height:1.1rem; border-radius:50%;
  background:rgba(11,11,18,.06);
  display:flex; align-items:center; justify-content:center;
  font-size:.55rem; color:rgba(11,11,18,.55);
}
.service-cta{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:2.25rem; padding-top:1.25rem;
  border-top:1px solid rgba(11,11,18,.08);
}
.service-cta span{ font-weight:600; font-size:.9rem; }
.service-arrow{
  width:2.5rem; height:2.5rem; border-radius:50%;
  background:linear-gradient(120deg,var(--primary),var(--secondary),var(--accent));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; flex-shrink:0;
  transition:transform .25s ease, filter .25s ease;
}
.service-arrow:hover{ transform:scale(1.08) rotate(-8deg); filter:brightness(1.1); }

/* ---------- Certification cards (thumbnail grid + click-to-enlarge lightbox) ----------
   Moved here from the homepage's own inline <style> so the SEO service page can
   share the identical design instead of duplicating it. */
.cert-slider-wrap{ position:relative; }
.cert-slider-track{
  display:flex;
  gap:1.75rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-left:3rem;
  scroll-padding-right:3rem;
  -webkit-overflow-scrolling:touch;
  padding:.5rem 3rem 1.5rem;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.cert-slider-track::-webkit-scrollbar{ display:none; height:0; }
.cert-slider-arrow{
  position:absolute; top:calc(50% - 1.25rem); transform:translateY(-50%);
  width:2.75rem; height:2.75rem; border-radius:50%;
  background:linear-gradient(120deg,var(--primary),var(--secondary),var(--accent));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.9rem; z-index:10; border:none; cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(11,11,18,.4);
  transition:transform .25s ease, filter .25s ease;
}
.cert-slider-arrow:hover{ transform:translateY(-50%) scale(1.08); filter:brightness(1.1); }
.cert-slider-arrow-left{ left:0; }
.cert-slider-arrow-right{ right:0; }
@media(max-width:640px){
  .cert-slider-arrow{ width:2.75rem; height:2.75rem; font-size:.8rem; }
}
.cert-card{
  position:relative;
  flex:0 0 280px;
  scroll-snap-align:start;
  border-radius:1.25rem;
  border:1px solid rgba(11,11,18,.08);
  background:#fff;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(11,11,18,.04);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
@media(min-width:640px){ .cert-card{ flex-basis:320px; } }
.cert-card:hover, .cert-card:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 16px 32px -16px rgba(11,11,18,.22);
}
.cert-card-frame{ position:relative; aspect-ratio:4/3; background:#F5F4F8; padding:1.1rem; }
.cert-card-frame img{ width:100%; height:100%; object-fit:contain; display:block; }
.cert-card-overlay{
  position:absolute; inset:0;
  background:rgba(11,11,18,.55);
  opacity:0; transition:opacity .3s ease;
  display:flex; align-items:center; justify-content:center;
}
.cert-card:hover .cert-card-overlay, .cert-card:focus-visible .cert-card-overlay{ opacity:1; }
.cert-card-overlay span{
  color:#fff; font-size:.8rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1.1rem; border-radius:999px;
  background:rgba(255,255,255,.14); backdrop-filter:blur(4px);
}
.cert-card-title{ padding:1rem 1.25rem 1.25rem; border-top:1px solid rgba(11,11,18,.06); }
.cert-card-title p:first-child{ font-weight:600; font-size:.95rem; color:rgba(11,11,18,.85); }
.cert-lightbox-panel{ animation:none; }

/* ---------- Industries: dark card grid replacing the logo marquee ---------- */
/* Same dark "spotlight" gradient formula as the About/Contact panels, reused
   here full-bleed so the section reads as more of the site's own language
   rather than a new color scheme. */
.industries-section{
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,0,85,.35), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(108,99,255,.35), transparent 55%),
    #0B0B12;
  color:#fff;
}
.industries-section .eyebrow{ color:var(--primary); }

.industries-grid{
  display:grid; grid-template-columns:1fr; gap:.9rem;
}
@media(min-width:640px){ .industries-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){
  .industries-grid{ grid-template-columns:repeat(4,1fr); }
  /* Service-page reuse of this grid only has 6 cards (vs. homepage's 12) -
     4 columns would split 4+2. Keep it a clean 3x2 instead. */
  #who-i-help .industries-grid:has(> :nth-child(6):last-child){ grid-template-columns:repeat(3,1fr); }
}

.industry-card{
  display:flex; align-items:center; gap:.85rem;
  padding:1.1rem 1.25rem;
  border-radius:14px;
  transition:transform .3s ease, box-shadow .3s ease;
  /* Fixed gradient border (not a hover-only reveal) — same pink→purple→cyan
     ring used on the CTA buttons and the blog card borders, via the
     two-background trick (opaque padding-box fill + gradient border-box)
     so it still respects the rounded corners. */
  border:1.5px solid transparent;
  background:
    linear-gradient(#16161f,#16161f) padding-box,
    linear-gradient(90deg,var(--primary),var(--secondary),var(--accent)) border-box;
}
.industry-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px -16px rgba(0,0,0,.55);
}
.industry-icon{
  width:34px; height:34px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:9px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.7);
  font-size:.85rem;
}
.industry-label{
  flex:1; min-width:0;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.9rem;
  color:#fff;
}
.industry-arrow{
  color:rgba(255,255,255,.25);
  font-size:.75rem;
  transition:transform .3s ease, color .3s ease;
}
.industry-card:hover .industry-arrow{
  color:var(--primary);
  transform:translate(3px,-3px);
}

/* "And many more" — visually distinct as an open-ended placeholder, not
   another fixed industry, so it's obvious this list isn't exhaustive. */
.industry-card-more{
  background:transparent;
  border:1px dashed rgba(255,255,255,.18);
}
.industry-card-more .industry-label{
  color:rgba(255,255,255,.45);
  font-weight:500;
}
.industry-card-more .industry-icon{
  background:transparent;
  border-color:rgba(255,255,255,.15);
  color:rgba(255,255,255,.4);
}
.industry-card-more:hover{
  transform:none;
  border-color:rgba(255,255,255,.28);
  background:transparent;
}

/* ---------- Service-page content cards: gradient border (2026-09-19) ----------
   Rolled out to the 3 service-page landing pages (SEO / PPC / Digital
   Marketing consultant) so their reason, feature and comparison card
   grids use the same "gradient border, not flat" language as everywhere
   else on the redesigned homepage (blog cards, industry cards, expertise
   cards) — same two-background trick, same opaque #FAFAFB fill so the
   gradient stays confined to the border ring.
   Design-only: no HTML, text or copy changed on these pages — just this
   CSS, scoped by the sections' own existing ids. Deliberately excludes
   the hero's floating stat chips, the dark audit/local/final-CTA form
   panels, and #featured-case (one large panel, not a card grid). */
#pain-points .glass.rounded-2xl,
#problem .glass.rounded-2xl,
#who-i-help .glass.rounded-2xl,
#results .glass.rounded-2xl,
#reporting .glass.rounded-2xl,
#tracking .glass.rounded-2xl,
#landing-pages .glass.rounded-2xl,
#strategy .glass.rounded-2xl,
#strategy-example .glass.rounded-2xl,
#why-me .glass.rounded-3xl,
#budget .glass.rounded-3xl,
#engagement .glass.rounded-3xl{
  border:1.5px solid transparent;
  background:
    linear-gradient(#FAFAFB,#FAFAFB) padding-box,
    linear-gradient(90deg,var(--primary),var(--secondary),var(--accent)) border-box;
}