/* ================================================================
   BRAND SCAPE COMPANY — Light Theme
   Brand Blue: #028BD1  |  Gold accent: #C9A84C
   Activated via: html[data-theme="light"]
   ================================================================ */

/* ── Toggle button — always visible ── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.7);
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s, transform .2s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: rgba(255,255,255,.14);
  color: #fff;
  transform: rotate(12deg);
}

/* Icon visibility — dark mode shows moon, light mode shows sun */
.theme-icon--sun  { display: none; }
.theme-icon--moon { display: block; }

html[data-theme="light"] .theme-icon--sun  { display: block; }
html[data-theme="light"] .theme-icon--moon { display: none; }

html[data-theme="light"] .theme-toggle {
  background: rgba(2,139,209,.1);
  border-color: rgba(2,139,209,.3);
  color: #028BD1;
}
html[data-theme="light"] .theme-toggle:hover {
  background: rgba(2,139,209,.18);
  color: #0170A8;
}

/* ================================================================
   LIGHT THEME — Variable overrides
   ================================================================ */
html[data-theme="light"] {
  /* Core palette — brand blue replaces gold as the primary */
  --primary:        #028BD1;
  --primary-light:  #1EA0E0;
  --primary-dark:   #0170A8;
  --accent:         #028BD1;
  --accent-dark:    #0170A8;

  /* Surfaces */
  --dark:           #F5F7FA;
  --dark-2:         #FFFFFF;
  --dark-3:         #EEF2F7;
  --dark-4:         #E3EAF3;
  --dark-card:      rgba(2,139,209,.04);
  --dark-border:    rgba(2,139,209,.14);

  /* Text */
  --text-primary:   #0A0F1A;
  --text-secondary: #4A5568;
  --text-muted:     #8A97A8;

  /* Glass */
  --glass-bg:       rgba(2,139,209,.06);
  --glass-border:   rgba(2,139,209,.18);
}

/* ── Body & base ── */
html[data-theme="light"] body {
  background: #F5F7FA;
  color: #0A0F1A;
  cursor: auto !important;
}

/* Hide custom cursor in light mode */
html[data-theme="light"] .cursor,
html[data-theme="light"] .cursor-trail { display: none; }

/* ── Navigation ── */
html[data-theme="light"] .site-header {
  background: rgba(245,247,250,.92);
  border-bottom-color: rgba(2,139,209,.15);
}
html[data-theme="light"] .site-header.scrolled {
  background: rgba(255,255,255,.96);
  border-bottom-color: rgba(2,139,209,.2);
  box-shadow: 0 2px 24px rgba(2,139,209,.1);
}
html[data-theme="light"] .nav-link {
  color: #3A4A5C;
}
html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link.active {
  color: #028BD1;
}
html[data-theme="light"] .nav-link.active::after {
  background: #028BD1;
}
html[data-theme="light"] .nav-logo img {
  filter: none; /* show original logo colours */
}

/* ── Buttons ── */
html[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #028BD1, #1EA0E0);
  color: #fff;
  box-shadow: 0 4px 20px rgba(2,139,209,.35);
}
html[data-theme="light"] .btn-primary:hover {
  box-shadow: 0 8px 32px rgba(2,139,209,.45);
}
html[data-theme="light"] .btn-outline {
  border-color: rgba(2,139,209,.4);
  color: #028BD1;
}
html[data-theme="light"] .btn-outline:hover {
  background: rgba(2,139,209,.08);
  border-color: #028BD1;
}
html[data-theme="light"] .btn-ghost {
  color: #3A4A5C;
  border-color: rgba(10,15,26,.18);
}
html[data-theme="light"] .btn-ghost:hover {
  background: rgba(2,139,209,.06);
  border-color: rgba(2,139,209,.3);
  color: #028BD1;
}

/* ── Hero section ── */
html[data-theme="light"] .hero-v2 {
  background: linear-gradient(160deg, #EEF6FD 0%, #F5F7FA 50%, #EBF4FB 100%);
}
html[data-theme="light"] .hero-v2::after {
  background: linear-gradient(90deg, transparent, rgba(2,139,209,.4) 50%, transparent);
}
html[data-theme="light"] .hero-doodle-svg .hd,
html[data-theme="light"] .hero-doodle-svg .hdt {
  stroke: rgba(2,139,209,.12) !important;
}
html[data-theme="light"] .hero-doodle-svg .hdf {
  fill: rgba(2,139,209,.07) !important;
}
html[data-theme="light"] .orb-1 {
  background: radial-gradient(circle, rgba(2,139,209,.14) 0%, transparent 70%);
}
html[data-theme="light"] .orb-2 {
  background: radial-gradient(circle, rgba(2,139,209,.07) 0%, transparent 70%);
}
html[data-theme="light"] .hero-v2-headline {
  color: #0A0F1A;
}
html[data-theme="light"] .hero-highlight {
  color: #028BD1;
  text-shadow:
    0 0 30px rgba(2,139,209,.5),
    0 0 80px rgba(2,139,209,.25);
}
html[data-theme="light"] .hero-v2-sub {
  color: #4A5568;
}
html[data-theme="light"] .hero-chip {
  background: rgba(2,139,209,.08);
  border-color: rgba(2,139,209,.25);
  color: #028BD1;
}
html[data-theme="light"] .chip-dot { background: #028BD1; }
html[data-theme="light"] .trust-name {
  background: rgba(2,139,209,.08);
  border-color: rgba(2,139,209,.2);
  color: #028BD1;
}

/* ── Stats strip ── */
html[data-theme="light"] .hero-stats-strip {
  background: #fff;
  border-color: rgba(2,139,209,.12);
}
html[data-theme="light"] .hs-num { color: #028BD1; }
html[data-theme="light"] .hs-label { color: #4A5568; }
html[data-theme="light"] .hero-stat-div { background: rgba(2,139,209,.15); }

/* ── Gold rule ── */
html[data-theme="light"] .gold-rule {
  border-color: rgba(2,139,209,.2);
}

/* ── Ticker ── */
html[data-theme="light"] .ticker-bar {
  background: #028BD1;
}
html[data-theme="light"] .ticker-track span { color: rgba(255,255,255,.9); }
html[data-theme="light"] .ticker-sep { color: rgba(255,255,255,.5); }

/* ── Section labels ── */
html[data-theme="light"] .section-label { color: #028BD1; }
html[data-theme="light"] .text-gradient {
  background: linear-gradient(135deg, #028BD1, #1EA0E0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Cards & surfaces ── */
html[data-theme="light"] .mv-card,
html[data-theme="light"] .hs-card,
html[data-theme="light"] .testi-card,
html[data-theme="light"] .why-pill,
html[data-theme="light"] .iql-card,
html[data-theme="light"] .num-item {
  background: #fff;
  border-color: rgba(2,139,209,.12);
  box-shadow: 0 2px 16px rgba(2,139,209,.06);
}
html[data-theme="light"] .mv-card:hover,
html[data-theme="light"] .hs-card:hover,
html[data-theme="light"] .iql-card:hover {
  border-color: rgba(2,139,209,.35);
  box-shadow: 0 8px 32px rgba(2,139,209,.12);
}
html[data-theme="light"] .mv-icon svg { stroke: #028BD1; }

/* ── Intro split ── */
html[data-theme="light"] .intro-split { background: #fff; }
html[data-theme="light"] .intro-pull-quote {
  border-left-color: #028BD1;
  color: #028BD1;
}

/* ── Numbers strip ── */
html[data-theme="light"] .numbers-strip {
  background: #028BD1;
  border-color: #028BD1;
}
html[data-theme="light"] .num-item {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
html[data-theme="light"] .num-val   { color: #fff; }
html[data-theme="light"] .num-label { color: rgba(255,255,255,.78); }
html[data-theme="light"] .num-divider { background: rgba(255,255,255,.3); }

/* ── Services ── */
html[data-theme="light"] .home-services { background: #F5F7FA; }
html[data-theme="light"] .hs-card { color: #0A0F1A; }
html[data-theme="light"] .hs-card p { color: #4A5568; }
html[data-theme="light"] .hs-link { color: #028BD1; }

/* ── Why teaser ── */
html[data-theme="light"] .why-teaser { background: #EEF6FD; }
html[data-theme="light"] .why-pill {
  background: rgba(2,139,209,.08);
  border-color: rgba(2,139,209,.2);
  color: #028BD1;
}

/* ── Testimonials ── */
html[data-theme="light"] .home-testimonials { background: #fff; }
html[data-theme="light"] .testi-stars { color: #C9A84C; }
html[data-theme="light"] .testi-card blockquote { color: #2D3748; }
html[data-theme="light"] .testi-av {
  background: linear-gradient(135deg, #028BD1, #1EA0E0);
}

/* ── Clients ── */
html[data-theme="light"] .home-clients { background: #F5F7FA; }
html[data-theme="light"] .clients-eyebrow { color: #4A5568; }
html[data-theme="light"] .cl-item img { filter: none; opacity: .7; }
html[data-theme="light"] .cl-item:hover img { opacity: 1; }
html[data-theme="light"] .cl-name { color: #4A5568; }

/* ── CTA / Final ── */
html[data-theme="light"] .pt-section { background: #EEF6FD; }
html[data-theme="light"] .pt-plan { background: #fff; border-color: rgba(2,139,209,.15); }
html[data-theme="light"] .pt-plan:hover { background: #F8FBFF; }
html[data-theme="light"] .pt-plan + .pt-plan { border-left-color: rgba(2,139,209,.15); }
html[data-theme="light"] .pt-plans { background: rgba(2,139,209,.06); border-color: rgba(2,139,209,.12); }
html[data-theme="light"] .pt-plan-name { color: #0A0F1A; }
html[data-theme="light"] .pt-plan-price { color: #028BD1; }
html[data-theme="light"] .pt-plan-period,
html[data-theme="light"] .pt-plan-desc { color: #4A5568; }
html[data-theme="light"] .pt-btn-primary { background: linear-gradient(135deg, #028BD1, #1EA0E0); }
html[data-theme="light"] .pt-btn-ghost { border-color: rgba(2,139,209,.3); color: #028BD1; }
html[data-theme="light"] .pt-plan-badge { background: linear-gradient(90deg, #028BD1, #1EA0E0); color: #fff; }

html[data-theme="light"] .final-cta { background: #0A1628; }
html[data-theme="light"] .final-cta h2,
html[data-theme="light"] .final-cta p,
html[data-theme="light"] .final-cta .fc-eyebrow,
html[data-theme="light"] .final-cta .fc-sub { color: #fff; }
html[data-theme="light"] .final-cta .fc-contact-row a,
html[data-theme="light"] .final-cta .fc-contact-row span { color: rgba(255,255,255,.6); }
html[data-theme="light"] .final-cta .text-gradient {
  background: linear-gradient(135deg, #028BD1, #5BC4F5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Page heroes (page-hero.php) ── */
html[data-theme="light"] .ph-hero {
  background: linear-gradient(160deg, #EEF6FD 0%, #F5F7FA 60%, #E8F4FD 100%);
}
/* NOTE: brand-colors.css forces .ph-hero to a dark navy gradient (!important) in
   light theme too — so its title/subtitle must stay light, matching the dark-theme look */
html[data-theme="light"] .ph-hero .ph-title { color: #fff; }
html[data-theme="light"] .ph-hero .ph-sub   { color: rgba(255,255,255,.5); }

/* Self-contained dark-background sections that keep their dark surface in light theme —
   their headings/body text must stay light, NOT pick up the global light-theme dark text */
html[data-theme="light"] .showreel-content h2,
html[data-theme="light"] .bsr-title {
  color: #fff;
}
html[data-theme="light"] .showreel-content p,
html[data-theme="light"] .bsr-sub {
  color: rgba(255,255,255,.65);
}
/* The showreel's inner video bar sits on the navy section background in BOTH
   themes (forced via brand-colors.css !important) — its own surface/text must
   stay dark-toned too, or the global light --dark-3/--text-muted vars turn it
   into a pale mismatched box */
html[data-theme="light"] .showreel-video-bar {
  background: #101010;
  border-top-color: rgba(255,255,255,.07);
}
html[data-theme="light"] .svb-label {
  color: rgba(255,255,255,.4);
}
/* ── Homepage hero — always sits on a dark photo backdrop regardless of theme,
   so its text must stay light-on-dark even when the rest of the page goes light ── */
html[data-theme="light"] .hero-v2-headline,
html[data-theme="light"] .hero-v2-headline .word-rotate {
  color: #fff;
}
html[data-theme="light"] .hero-v2-sub {
  color: rgba(255,255,255,.62);
}
html[data-theme="light"] .hero-trust {
  color: rgba(255,255,255,.45);
}
html[data-theme="light"] .trust-name {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.7);
}
html[data-theme="light"] .trust-count {
  color: rgba(255,255,255,.45);
}
html[data-theme="light"] .ph-orb {
  background: radial-gradient(ellipse, rgba(2,139,209,.15) 0%, transparent 70%);
}
html[data-theme="light"] .ph-doodle .ph { stroke: rgba(2,139,209,.1) !important; }
html[data-theme="light"] .ph-doodle .pht { stroke: rgba(2,139,209,.08) !important; }

/* ── About page ── */
html[data-theme="light"] .story-section { background: #fff; }
html[data-theme="light"] .why-section   { background: #F5F7FA; }
html[data-theme="light"] .diff-card {
  background: #fff;
  border-color: rgba(2,139,209,.12);
}
html[data-theme="light"] .diff-card:hover { border-color: rgba(2,139,209,.35); }

/* ── Team page ── */
html[data-theme="light"] .team-showcase { background: #F5F7FA; }
html[data-theme="light"] .t-sil { background: linear-gradient(180deg, #D4E9F7 0%, #B8D9F0 60%, #9ECAE8 100%); }
html[data-theme="light"] .t-sil::before { background: #8ABFE0; }
html[data-theme="light"] .t-sil::after  { background: #8EC5E5; }
html[data-theme="light"] .t-sil-label   { color: #028BD1; }
html[data-theme="light"] .t-card {
  background: linear-gradient(135deg, #EEF6FD, #fff);
  border-color: rgba(2,139,209,.2);
}
html[data-theme="light"] .t-card-name { color: #0A0F1A; }
html[data-theme="light"] .t-card-role { color: #028BD1; }
html[data-theme="light"] .t-bio p     { color: #4A5568; }
html[data-theme="light"] .t-dot.active { background: #028BD1; }
html[data-theme="light"] .team-dept-card {
  background: #fff;
  border-color: rgba(2,139,209,.12);
}
html[data-theme="light"] .team-dept-label { color: #028BD1; }

/* ── Work tiles ── */
html[data-theme="light"] .wt-section { background: #F5F7FA; }
html[data-theme="light"] .wt-tile::after { border-color: rgba(2,139,209,.4) !important; }
html[data-theme="light"] .wt-tile-tag    { color: #028BD1; }
html[data-theme="light"] .wt-tile-arrow  {
  background: rgba(2,139,209,.15);
  border-color: rgba(2,139,209,.35);
  color: #028BD1;
}

/* ── Profile download strip ── */
html[data-theme="light"] .profile-strip {
  background: #EEF6FD;
  border-color: rgba(2,139,209,.2);
}
html[data-theme="light"] .profile-strip-left strong { color: #0A0F1A; }
html[data-theme="light"] .profile-strip-left span   { color: #4A5568; }
html[data-theme="light"] .profile-strip-btn {
  background: linear-gradient(135deg, #028BD1, #1EA0E0);
  color: #fff;
}

/* ── Contact page ── */
html[data-theme="light"] .contact-card {
  background: #fff;
  border-color: rgba(2,139,209,.14);
}
html[data-theme="light"] .contact-card-icon { color: #028BD1; }
html[data-theme="light"] .form-wrap { background: #fff; border-color: rgba(2,139,209,.12); }
html[data-theme="light"] .form-input, html[data-theme="light"] .form-select, html[data-theme="light"] .form-textarea {
  background: #F5F7FA;
  border-color: rgba(2,139,209,.2);
  color: #0A0F1A;
}
html[data-theme="light"] .form-input:focus,
html[data-theme="light"] .form-select:focus,
html[data-theme="light"] .form-textarea:focus {
  border-color: #028BD1;
  box-shadow: 0 0 0 3px rgba(2,139,209,.12);
}

/* ── Footer ── */
html[data-theme="light"] .site-footer {
  background: #0A1628;
}
html[data-theme="light"] .footer-tagline,
html[data-theme="light"] .site-footer h4 { color: #fff; }
html[data-theme="light"] .footer-bio { color: rgba(255,255,255,.6); }

/* ── Mobile menu ── */
html[data-theme="light"] .mobile-menu { background: #fff; }
html[data-theme="light"] .mobile-menu ul a { color: #0A0F1A; }
html[data-theme="light"] .mobile-menu ul a:hover { color: #028BD1; }
html[data-theme="light"] .mobile-close { color: #4A5568; }

/* ── AI chat widget ── */
html[data-theme="light"] .bsai-wrap .bsai-panel {
  background: #fff;
  border-color: rgba(2,139,209,.25);
  box-shadow: 0 24px 80px rgba(2,139,209,.15);
}
html[data-theme="light"] .bsai-header {
  background: linear-gradient(135deg, rgba(2,139,209,.08), rgba(2,139,209,.03));
  border-bottom-color: rgba(2,139,209,.12);
}
html[data-theme="light"] .bsai-name    { color: #0A0F1A; }
html[data-theme="light"] .bsai-status  { color: #4A5568; }
html[data-theme="light"] .bsai-msg.bot .bsai-bubble {
  background: #EEF6FD;
  border-color: rgba(2,139,209,.12);
  color: #2D3748;
}
html[data-theme="light"] .bsai-input {
  background: #F5F7FA;
  border-color: rgba(2,139,209,.2);
  color: #0A0F1A;
}
html[data-theme="light"] .bsai-input:focus { border-color: #028BD1; }
html[data-theme="light"] .bsai-quick button {
  border-color: rgba(2,139,209,.2);
  color: #028BD1;
  background: rgba(2,139,209,.05);
}
html[data-theme="light"] .bsai-quick button:hover { background: rgba(2,139,209,.12); }
html[data-theme="light"] .bsai-send {
  background: linear-gradient(135deg, #028BD1, #1EA0E0);
}
html[data-theme="light"] .bsai-typing .bsai-bubble { background: #EEF6FD; }
html[data-theme="light"] .bsai-typing span { background: #028BD1; opacity: .4; }

/* ── Showreel ── */
html[data-theme="light"] .showreel-section { background: #EEF6FD; }

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME — Hover states (replace dark shadows with blue ones)
   ═══════════════════════════════════════════════════════════════ */

/* Services cards */
html[data-theme="light"] .hs-card:hover {
  border-color: rgba(2,139,209,.45) !important;
  box-shadow: 0 12px 40px rgba(2,139,209,.15), 0 0 0 1px rgba(2,139,209,.2) !important;
  transform: translateY(-5px);
}
html[data-theme="light"] .hs-card::before {
  background: linear-gradient(135deg, rgba(2,139,209,.06), transparent) !important;
}

/* Why / differentiators cards */
html[data-theme="light"] .why-v2-card {
  background: #fff;
  border-color: rgba(2,139,209,.12);
}
html[data-theme="light"] .why-v2-card:hover {
  border-color: rgba(2,139,209,.45) !important;
  box-shadow: 0 12px 36px rgba(2,139,209,.14) !important;
  transform: translateY(-4px);
}

/* Testimonial cards */
html[data-theme="light"] .testi-card {
  background: #fff;
  border-color: rgba(2,139,209,.12);
}
html[data-theme="light"] .testi-card:hover {
  border-color: rgba(2,139,209,.4);
  box-shadow: 0 10px 30px rgba(2,139,209,.12);
}

/* Quick-link cards (intro section) */
html[data-theme="light"] .iql-card:hover {
  border-color: rgba(2,139,209,.5);
  box-shadow: 0 8px 24px rgba(2,139,209,.14);
  transform: translateY(-3px);
}

/* Work tiles */
html[data-theme="light"] .wt-tile:hover::after {
  border-color: rgba(2,139,209,.5) !important;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME — Typography: subtitles vs body text
   ═══════════════════════════════════════════════════════════════ */

/* Section headings — strong dark colour */
html[data-theme="light"] h2,
html[data-theme="light"] h3 {
  color: #0A0F1A;
}

/* Card subtitles (h4) — slightly softer but clearly different from body */
html[data-theme="light"] h4 {
  color: #1A2540;
}

/* Body paragraphs — clearly lighter than headings */
html[data-theme="light"] p,
html[data-theme="light"] .hs-card p,
html[data-theme="light"] .why-v2-card p,
html[data-theme="light"] .testi-card blockquote {
  color: #4A5568;
}

/* Services: h3 subtitle clearly darker than p body */
html[data-theme="light"] .hs-card h3 {
  color: #0A0F1A;
  font-size: 1.05rem;
  font-weight: 800;
}
html[data-theme="light"] .hs-card p {
  color: #5A6478;
  font-size: .875rem;
}

/* Featured card overrides — MUST come last for highest specificity */
html[data-theme="light"] .hs-card.hs-card-featured {
  background: linear-gradient(135deg, #028BD1, #0170A8);
  border-color: transparent;
  box-shadow: 0 12px 40px rgba(2,139,209,.35);
}
html[data-theme="light"] .hs-card.hs-card-featured h3 {
  color: #fff !important;
  font-size: 1.1rem;
}
html[data-theme="light"] .hs-card.hs-card-featured p {
  color: rgba(255,255,255,.82) !important;
  font-size: .875rem;
}
html[data-theme="light"] .hs-card.hs-card-featured .hs-link {
  color: rgba(255,255,255,.9) !important;
}
html[data-theme="light"] .hs-card.hs-card-featured::after {
  background: rgba(255,255,255,.18);
  color: #fff;
  border-color: rgba(255,255,255,.3);
}
html[data-theme="light"] .hs-card.hs-card-featured .hs-icon-wrap {
  background: rgba(255,255,255,.2);
}
html[data-theme="light"] .hs-card.hs-card-featured:hover {
  box-shadow: 0 20px 60px rgba(2,139,209,.5) !important;
  border-color: rgba(255,255,255,.25) !important;
  transform: translateY(-5px);
}

/* Why section: h4 subtitle vs p body clearly differentiated */
html[data-theme="light"] .why-v2-card h4 {
  color: #0A0F1A;
  font-size: 1.02rem;
  font-weight: 800;
  border-bottom: 1px solid rgba(2,139,209,.12);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
html[data-theme="light"] .why-v2-card p {
  color: #5A6478;
  font-size: .875rem;
  line-height: 1.75;
}

/* Why number badge */
html[data-theme="light"] .why-num {
  color: #028BD1;
  opacity: 1;
}

/* Services section divider */
html[data-theme="light"] .home-services .home-section-head {
  border-bottom-color: rgba(2,139,209,.15);
}

/* Why section background */
html[data-theme="light"] .why-v2 { background: #F0F6FC; }

/* Intro section */
html[data-theme="light"] .intro-split h2 { color: #0A0F1A; }
html[data-theme="light"] .intro-split p  { color: #4A5568; }
html[data-theme="light"] .intro-pull-quote {
  border-left-color: #028BD1;
  color: #028BD1;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
}
html[data-theme="light"] .intro-pull-quote em { color: #0170A8; }

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME — Portfolio page
   ═══════════════════════════════════════════════════════════════ */

/* Section background */
html[data-theme="light"] .work-section { background: #F5F7FA; }

/* Tab bar */
html[data-theme="light"] .work-tabs-bar {
  background: #fff;
  border-bottom-color: rgba(2,139,209,.15);
  box-shadow: 0 2px 12px rgba(2,139,209,.06);
}
html[data-theme="light"] .work-tab {
  color: #4A5568;
}
html[data-theme="light"] .work-tab.active {
  color: #028BD1;
  border-bottom-color: #028BD1;
}
html[data-theme="light"] .work-tab:hover:not(.active) {
  color: #028BD1;
  background: rgba(2,139,209,.06);
}

/* Section header */
html[data-theme="light"] .wsh-left h2 { color: #0A0F1A; }
html[data-theme="light"] .wsh-left p  { color: #4A5568; }
html[data-theme="light"] .wsh-count   { color: #028BD1; }

/* Project cards */
html[data-theme="light"] .wc-card {
  background: #fff;
  border-color: rgba(2,139,209,.14);
  box-shadow: 0 2px 12px rgba(2,139,209,.06);
}
html[data-theme="light"] a.wc-card:hover {
  border-color: rgba(2,139,209,.5) !important;
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(2,139,209,.15) !important;
}

/* Card body text */
html[data-theme="light"] .wc-body {
  background: #fff;
  border-top: 1px solid rgba(2,139,209,.08);
}
html[data-theme="light"] .wc-client {
  color: #0A0F1A;
  font-size: 1.05rem;
  font-weight: 800;
}
html[data-theme="light"] .wc-tagline {
  color: #5A6478;
  font-size: .875rem;
}
html[data-theme="light"] .wc-view {
  color: #028BD1;
  font-weight: 700;
}

/* CTA section at bottom */
html[data-theme="light"] .work-section ~ .section h2 { color: #0A0F1A; }
html[data-theme="light"] .work-section ~ .section p  { color: #4A5568; }

/* ── Smooth theme transition ── */
html {
  transition:
    background-color .4s cubic-bezier(.16,1,.3,1),
    color .4s cubic-bezier(.16,1,.3,1);
}
body, .site-header, .site-footer, .mv-card, .hs-card,
.testi-card, .intro-split, .hero-v2, .numbers-strip,
.why-teaser, .home-clients, .pt-section {
  transition:
    background-color .4s cubic-bezier(.16,1,.3,1),
    border-color .3s ease,
    box-shadow .3s ease,
    color .3s ease;
}

/* ================================================================
   LIGHT THEME — modern pages (home / inner / services / IT supply)
   Clean white canvas. The modern stylesheets run off their own
   tokens (--bg, --ink, --line…), so flipping the tokens re-themes
   them; the rules below patch the hard-coded white/neon bits.
   ================================================================ */
html[data-theme="light"] body[class*="page-"] {
  --bg:#FFFFFF; --bg-2:#F6F8FC; --ink:#0E1220; --muted:#4A5468; --faint:#7B879B;
  --line:rgba(14,18,32,.10); --glass:#FFFFFF; --glass-2:#F1F5FB;
  --neon-cyan:#0891b2; --n-cyan:#0891b2; --pf-card:#FFFFFF;
  background:#FFFFFF; color:var(--ink);
}
/* soft card elevation instead of glass-on-dark */
html[data-theme="light"] body[class*="page-"] :is(.pg-card,.mh-card,.sv-card,.sp-card,.mh-price,.mh-quote,.mh-stat,.pg-final-card) {
  box-shadow:0 10px 30px -18px rgba(14,18,32,.18);
}

/* header: solid white, hairline border */
html[data-theme="light"] .site-header,
html[data-theme="light"] .site-header.scrolled {
  background:rgba(255,255,255,.96);
  border-bottom:1px solid rgba(14,18,32,.08);
  box-shadow:0 1px 0 rgba(14,18,32,.04);
  backdrop-filter:saturate(1.4) blur(14px);
}

/* ── Hero: photo washed into white so it blends with the page ── */
html[data-theme="light"] .mh-hero { color:var(--ink); }
html[data-theme="light"] .mh-hero-bg::after {
  background:
    linear-gradient(100deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.86) 38%, rgba(255,255,255,.38) 68%, rgba(255,255,255,.12) 100%),
    linear-gradient(180deg, rgba(255,255,255,0) 55%, #FFFFFF 98%),
    radial-gradient(110% 80% at 90% 12%, rgba(139,92,246,.14), transparent 55%);
}
html[data-theme="light"] .mh-hero-sub { color:var(--muted); }
html[data-theme="light"] .mh-hero-trust { color:var(--muted); }
html[data-theme="light"] .mh-hero-trust strong { color:var(--ink); }
html[data-theme="light"] .mh-hero .mh-eyebrow { color:#0b6b85; background:#fff; border-color:var(--line); }
html[data-theme="light"] .mh-hero-strip { background:linear-gradient(180deg,transparent,rgba(255,255,255,.9)); border-top-color:var(--line); }
html[data-theme="light"] .mh-hero-strip span { color:var(--muted); }
html[data-theme="light"] .mh-hero-dots button { background:rgba(14,18,32,.22); }
html[data-theme="light"] .mh-grad,
html[data-theme="light"] .mh-hero .mh-grad {
  background-image:linear-gradient(108deg,#0891b2,#3b46ff 40%,#8b5cf6 76%,#f43f9d);
}
html[data-theme="light"] .mh-eyebrow { color:#0b6b85; background:#fff; }
html[data-theme="light"] .mh-btn-ghost { background:#fff; border-color:rgba(14,18,32,.16); color:var(--ink); }
html[data-theme="light"] .mh-btn-ghost:hover { background:#F1F5FB; border-color:rgba(14,18,32,.28); }
html[data-theme="light"] .mh-grain,
html[data-theme="light"] .mh-spot { display:none; }
html[data-theme="light"] .mh-loader { background:#fff; }

/* ── Homepage patches ── */
html[data-theme="light"] .mh-band,
html[data-theme="light"] .mh-ticker { background:#fff; }
html[data-theme="light"] .mh-band b.out { -webkit-text-stroke:1.4px rgba(14,18,32,.28); }
html[data-theme="light"] .mh-svc-row.on h3 { color:var(--ink); }
html[data-theme="light"] .mh-step-n,
html[data-theme="light"] .mh-stat-n sup { color:#0891b2; }
html[data-theme="light"] .mh-avatars span { border-color:#fff; }

/* ── Inner pages: same white-wash hero ── */
html[data-theme="light"] body[class*="page-"] .pg-hero { color:var(--ink); }
html[data-theme="light"] body[class*="page-"] .pg-hero::after {
  background:
    linear-gradient(100deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.84) 42%, rgba(255,255,255,.35) 75%, rgba(255,255,255,.15) 100%),
    linear-gradient(180deg, rgba(255,255,255,0) 60%, #FFFFFF 100%);
}
html[data-theme="light"] .pg-hero-sub { color:var(--muted); }
html[data-theme="light"] .pg-hero .pg-eyebrow { color:#0b6b85; background:#fff; }
html[data-theme="light"] .pg-grad { background-image:linear-gradient(108deg,#0891b2,#3b46ff 45%,#8b5cf6 75%,#f43f9d); }

/* ── Dark-by-design blocks keep dark tokens (text over photos / gradients) ── */
html[data-theme="light"] :is(.tf-pill,.mh-approach-badge,.mh-feature,.pg-final-card,.mh-final-card,.sp-final-card,.sv-final-card,.pf-cta-card,.mh-wcard,.mh-fw-card,.mh-reel,.mh-video-modal) {
  --bg:#050409; --bg-2:#0a0814; --ink:#f6f5fc; --muted:#c9c6dc; --faint:#8a86a3;
  --line:rgba(255,255,255,.14); --glass:rgba(255,255,255,.06); --glass-2:rgba(255,255,255,.10);
  --neon-cyan:#22d3ee; color:var(--ink);
}

/* the logo artwork is white — tint it brand blue on the white header */
html[data-theme="light"] .site-header .nav-logo img,
html[data-theme="light"] .nav-logo img {
  filter:brightness(0) saturate(100%) invert(36%) sepia(99%) saturate(1900%) hue-rotate(182deg) brightness(92%);
}

/* pills sitting inside dark blocks stay glassy-dark */
html[data-theme="light"] :is(.tf-pill,.mh-approach-badge,.mh-feature,.pg-final-card,.mh-final-card,.sp-final-card,.sv-final-card,.pf-cta-card) :is(.mh-eyebrow,.pg-eyebrow,.sv-eyebrow,.sp-eyebrow) {
  background:rgba(255,255,255,.08); color:#bfe9f5; border-color:rgba(255,255,255,.18);
}

/* headings/paragraphs inside dark blocks: beat the generic light-theme heading colours */
html[data-theme="light"] :is(.tf-pill,.mh-approach-badge,.mh-feature,.pg-final-card,.mh-final-card,.sp-final-card,.sv-final-card,.pf-cta-card,.mh-wcard,.mh-fw-card,.mh-reel) :is(h1,h2,h3,h4,h5) { color:#f6f5fc; }
html[data-theme="light"] :is(.tf-pill,.mh-approach-badge,.mh-feature,.pg-final-card,.mh-final-card,.sp-final-card,.sv-final-card,.pf-cta-card,.mh-reel) p { color:#d9d6e8; }
html[data-theme="light"] :is(.mh-wcard,.mh-fw-card) p { color:rgba(255,255,255,.78); }
html[data-theme="light"] :is(.mh-wcard,.mh-fw-card) .mh-wcard-tag,
html[data-theme="light"] :is(.mh-wcard,.mh-fw-card) span { color:#e8f7fb; }

/* client logos are artwork made for dark backgrounds — give each its own dark tile on white */
html[data-theme="light"] .page-index .mh-marquee-row img {
  background:#121726; border-radius:18px; padding:26px; box-sizing:border-box;
  height:150px; width:260px; filter:none; opacity:.96;
}
html[data-theme="light"] .page-index .mh-marquee-row { gap:1.4rem; }
html[data-theme="light"] .page-index .mh-marquee-row img:hover { transform:translateY(-3px); opacity:1; }
html[data-theme="light"] .mh-approach-badge { color:#fff; }
html[data-theme="light"] .mh-approach-badge * { color:inherit; }

/* ── Shared inner-page patches (services, IT supply, about, team, portfolio, blog, contact) ── */
html[data-theme="light"] :is(.sv-grad,.sp-grad,.pg-grad,.pf-shine) {
  background-image:linear-gradient(108deg,#0891b2,#3b46ff 42%,#8b5cf6 74%,#f43f9d);
}
html[data-theme="light"] :is(.sv-eyebrow,.sp-eyebrow,.pg-eyebrow,.pf-eyebrow,.wsh-count,.tm-li,.wc-view,.lb-cw-all,.bc-chip-count) { color:#0b6b85; }
html[data-theme="light"] :is(.sv-eyebrow,.sp-eyebrow,.pg-eyebrow,.pf-eyebrow,.wsh-count) { background:#fff; border-color:var(--line); }
html[data-theme="light"] .sv-disc-row.on h3 { color:var(--ink); }
html[data-theme="light"] .ab-stat b .stat-number { background-image:linear-gradient(135deg,#0E1220 30%,#0891b2); }
html[data-theme="light"] .pf-stat b { background-image:linear-gradient(140deg,#0E1220 20%,#0891b2); }
html[data-theme="light"] .pf-stat { background:#fff; }
html[data-theme="light"] .pf-tab[aria-selected="true"] { color:#fff; }
html[data-theme="light"] .pf-tab em,
html[data-theme="light"] .pf-cchip { background:#fff; }
html[data-theme="light"] .pf-cchip.is-active { color:#fff; }
html[data-theme="light"] .pf-cchip img { filter:none; opacity:.9; }
html[data-theme="light"] .pf-cchip:hover { border-color:rgba(14,18,32,.28); }

/* ── Portfolio hero: soft aurora on white instead of a grey wash ── */
html[data-theme="light"] .pf-aurora { opacity:.38; filter:blur(80px); }
html[data-theme="light"] .pf-aurora span { mix-blend-mode:normal; }
html[data-theme="light"] .pf-grain { display:none; }
html[data-theme="light"] .pf-hero-media img { filter:saturate(1.05); }
html[data-theme="light"] .pf-hero::after,
html[data-theme="light"] .pf-hero.has-media::after {
  background:
    linear-gradient(100deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.7) 45%,rgba(255,255,255,.2) 80%),
    linear-gradient(180deg,rgba(255,255,255,.3) 0%,transparent 30%,rgba(255,255,255,.85) 86%,#fff 100%);
}
html[data-theme="light"] .pf-hero { color:var(--ink); }
html[data-theme="light"] .pf-eyebrow { color:#0b6b85; background:#fff; border-color:var(--line); }
html[data-theme="light"] .pf-hero :is(p,.pf-lead,.pf-sub) { color:var(--muted); }
html[data-theme="light"] .pf-sec-count { color:#0b6b85; background:#fff; border-color:var(--line); }
html[data-theme="light"] .tf-pill, html[data-theme="light"] .tf-pill * { color:#f6f5fc; }
html[data-theme="light"] .tf-pill i { color:#67e8f9; }

/* ── Contact / blog text hard-coded for dark ── */
html[data-theme="light"] .page-contact .contact-card a { color:#0b6b85; }
html[data-theme="light"] .page-contact .contact-card a:hover { color:#3b46ff; }
html[data-theme="light"] .page-contact .contact-card-icon { color:#0b6b85; background:rgba(8,145,178,.10); }
html[data-theme="light"] .page-contact .form-group label { color:var(--ink); }
html[data-theme="light"] .page-contact :is(input,select,textarea) { background:#fff; color:var(--ink); border-color:rgba(14,18,32,.16); }
html[data-theme="light"] .page-contact :is(input,textarea)::placeholder { color:#97A1B3; }
html[data-theme="light"] .page-contact select option { background:#fff; color:var(--ink); }
html[data-theme="light"] .page-blog .blog-filter-chip span,
html[data-theme="light"] .page-blog .blog-card-meta { color:var(--muted); }
html[data-theme="light"] .page-blog .blog-filter-chip.active span { color:#fff; background:rgba(255,255,255,.2); }
html[data-theme="light"] .page-blog :is(.blog-read-more,.blog-card-link,.read-more,.blog-featured-link,[class*="read"]) { color:#0b6b85; }
html[data-theme="light"] .page-blog .blog-read-link { color:#0b6b85; }