/* =====================================================================
   WHITE POLISH LAYER (preview, fully reversible) — linked AFTER
   white-override.css so it refines the white variant without altering it.
   To revert: remove the single <link ... white-polish.css> line from the
   pages (or delete this file). The base white copy stays intact beneath.

   Scope: color, surface, rhythm, and interaction treatment only. No text,
   markup, layout geometry, or element positions are changed.

   Design intent: make the white variant feel deliberately art-directed
   rather than a flat recolor —
     1. Two-tier teal: deep teal for text/links, brand teal for fills.
     2. Warm off-white alternating bands + single hairline seams for rhythm.
     3. Softer, warmer ink (not pure black on pure white).
     4. Quiet, flat interactions (underline / bottom-border) instead of glow.
     5. A little more breathing room on the logo lockups.
   ===================================================================== */

:root{
  --ink:#20201C;              /* warm near-black, softer than #000 */
  --ink-soft:#44474A;         /* body grey, warm */
  --paper:#FFFFFF;
  --paper-warm:#F3F4F5;       /* second light tone: the same light grey as the mobile design (was warm #FAF8F3) */
  --hair:rgba(32,32,28,.12);  /* hairline */
  --teal-ink:#26A99A;         /* deep teal for TEXT/links (AA on white) */
  --teal-brand:#26A99A;       /* brand teal for FILLS/buttons */
}

/* ---- 1. Warmer ink across body + headings (color only) ---- */
body{ color:var(--ink-soft) !important; }
.sec-title, .section-title, h1, h2, h3,
.div-sq-name, .glass-title, .rail-label, .mag-title,
.blog-title, .faq-q, .footer-cta-title,
.mhome h1, .mhome h3, .mhome h4{ color:var(--ink) !important; }

/* ---- 2. Alternating warm bands + single hairline seams for rhythm.
         Odd content sections stay white, even ones get the warm paper,
         each separated by one hairline so sections read as distinct. ---- */
.sec-approach{ background:var(--paper) !important; border-top:1px solid var(--hair) !important; }
.sec-commitment{ background:var(--paper-warm) !important; border-top:1px solid var(--hair) !important; }
.sec-values{ background:var(--paper) !important; border-top:1px solid var(--hair) !important; }
.network-strip{ background:var(--paper-warm) !important; border-top:1px solid var(--hair) !important; border-bottom:1px solid var(--hair) !important; }
.light-wrapper{ background:var(--paper-warm) !important; }
.sec-tone-secondary.sec-tone-secondary{ background:var(--paper-warm) !important; }
.about-sec-dark2{ background:var(--paper-warm) !important; }
.faq-section-seamless{ background:var(--paper) !important; }
.stacked-cards-section{ background:var(--paper) !important; }

/* ---- 3. Two-tier teal. Text/labels/links -> deep readable teal. ---- */
.sec-eyebrow, .mh-eyebrow, .blog-category, .mh-blog .cat,
.cat-reg-new, .cat-div-mark, .division-badge, .mh-foot .ct,
.stat-num, .mh-stat b, .svc-stat b, .division-badge b,
.exp-vision, .footer-links a:hover{ color:var(--teal-ink) !important; }
a[href^="mailto:"], a[href^="tel:"],
.contact-row a, .contact-info a, .svc-contact a{ color:var(--teal-ink) !important; }

/* Brand teal stays on actual filled controls (buttons / active chips). */
.corp-cta-btn, .svc-btn-primary, .seo-tab-btn.active,
.industry-pill:hover{ background:var(--teal-brand) !important; color:#FFFFFF !important; }

/* ---- 4. Quiet flat interactions instead of glow.
         Cards: hairline that deepens + a 2px teal bottom edge on hover,
         no colored shadow bloom. ---- */
.div-sq, .glass-card, .mag-card, .light-card,
.value-tile, .unique-card, .nx-tab-panel{
  border:1px solid var(--hair) !important;
  box-shadow:none !important;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
.div-sq:hover, .glass-card:hover, .mag-card:hover, .light-card:hover,
.value-tile:hover, .unique-card:hover{
  border-color:var(--teal-ink) !important;
  box-shadow:0 1px 0 0 var(--teal-brand) inset, 0 10px 24px -16px rgba(32,32,28,.25) !important;
  transform:none !important;
}
/* Text links: quiet underline on hover rather than color flash only. */
.footer-links a, .nav-links > li > a, .mh-foot a{
  text-underline-offset:3px; transition:color .2s ease;
}
.footer-links a:hover, .mh-foot a:hover{
  text-decoration:underline; text-decoration-thickness:1px;
}

/* ---- 5. Logo breathing room (header only; footer unchanged). ---- */
.site-header .brand-logo{ margin-left:4px; }

/* ---- Hero: hide the faint dark-era texture/grain so the white hero is
         clean (it only read as faint speckle on white). ---- */
#landing .landing-texture, #landing .landing-grain,
.mh-hero .landing-texture, .mh-hero .landing-grain{ display:none !important; }

/* ---- Mobile hero: the dark-theme headline carries a heavy dark
         text-shadow (tuned for the dark bg); on white it reads as a grey
         smudge/halo. Neutralize it on the white variant only. ---- */
.mhome .mh-hero h1,
.mhome .mh-hero h1 .l1,
.mhome .mh-hero h1 .l2{ text-shadow:none !important; }

/* ---- Footer-CTA: match the footer's own background (#F3F4F5) so the CTA
         panel and the footer read as one continuous surface, flat. ---- */
.footer-cta{ background:#F3F4F5 !important; border:1px solid var(--hair) !important; box-shadow:none !important; }

/* ---- Floating dock: make all three icons the SAME teal. Call and Email
         were a deeper teal (#26A99A) while WhatsApp used the brighter brand
         teal (#26A99A); unify them all to the brand teal so the dock is
         consistent. ---- */
.floating-dock .dock-link,
.floating-dock .dock-link .dock-icon,
.floating-dock .dock-link svg{ color:#26A99A !important; fill:#26A99A !important; }
.floating-dock .dock-link:hover,
.floating-dock .dock-link:focus-visible{ color:#26A99A !important; background:rgba(38,169,154,.12) !important; }
.floating-dock .dock-link:hover svg,
.floating-dock .dock-link:focus-visible svg{ fill:#26A99A !important; }

/* ---- Dividers the dark theme drew with glows -> clean hairlines. ---- */
.sec-divider, .seo-pills-box{ border-top:1px solid var(--hair) !important; }


/* =====================================================================
   MOBILE BURGER MENU FIX — the open mobile nav panel kept a dark
   background from a high-specificity !important rule in the base CSS,
   so the now-charcoal links were invisible on near-black. Force the
   panel (and its dropdown surfaces) to white with readable charcoal
   text at a specificity high enough to win. Color/surface only.
   ===================================================================== */
@media (max-width: 992px){
  header .site-nav,
  .site-header .site-nav,
  .site-nav.active,
  .site-nav:not(.active){
    background-color:#FFFFFF !important;
    border-bottom:1px solid var(--hair) !important;
    box-shadow:0 20px 40px -18px rgba(32,32,28,.3) !important;
  }
  /* Top-level mobile nav links -> warm ink, readable on white. */
  .site-header .site-nav .nav-links > li > a{
    color:var(--ink) !important;
  }
  .site-header .site-nav .nav-links > li > a:hover,
  .site-header .site-nav .nav-links > li > a:focus-visible{
    color:var(--teal-ink) !important;
  }
  /* Dropdown panels inside the mobile nav + their items. */
  .site-header .site-nav .dropdown-menu-card{
    background-color:#FFFFFF !important;
    border:none !important;
    box-shadow:none !important;
  }
  .site-header .site-nav .dropdown-item{ color:var(--ink-soft) !important; }
  .site-header .site-nav .dropdown-item .dropdown-code{ color:var(--teal-ink) !important; }
  .site-header .site-nav .dropdown-item .dropdown-sub{ color:var(--ink-soft) !important; }
  .site-header .site-nav .dropdown-item:hover{ background-color:var(--paper-warm) !important; }
  /* Dropdown caret arrows next to Divisions/Resources. */
  .site-header .site-nav .dropdown-arrow{ border-top-color:var(--ink) !important; }
  /* Burger icon bars themselves (on the white header). */
  .mobile-nav-toggle .hamburger-line{ background-color:var(--ink) !important; }
}


/* =====================================================================
   RESOURCES DROPDOWN (mobile) FIX — the site's base JS wires only the
   FIRST mobile dropdown (Divisions) via querySelector('.dropdown'), so
   Resources never gets its tap-to-expand handler and does nothing on
   mobile. This is a pre-existing bug in the original site. Fixed here in
   CSS only (no JS change, reversible): open any mobile dropdown panel on
   :focus-within / :hover / .active, so tapping Resources reveals its
   Blogs + Case Studies links.
   ===================================================================== */
@media (max-width: 992px){
  .site-header .site-nav .dropdown:focus-within .dropdown-menu-card,
  .site-header .site-nav .dropdown:hover .dropdown-menu-card,
  .site-header .site-nav .dropdown.active .dropdown-menu-card{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    transform:none !important;
    position:static !important;
    height:auto !important;
    min-height:0 !important;
    padding:10px 0 4px !important;
    box-shadow:none !important;
    background-color:#FFFFFF !important;
  }
  /* Stack the dropdown items vertically as a tap list (they are a
     horizontal strip on desktop). Layout within the panel only. */
  .site-header .site-nav .dropdown-menu-card .dropdown-grid,
  .site-header .site-nav .dropdown-menu-card .dropdown-strip{
    display:block !important;
    width:100% !important;
  }
  .site-header .site-nav .dropdown-menu-card .dropdown-item{
    display:block !important;
    width:100% !important;
    border-right:none !important;
    border-bottom:1px solid var(--hair) !important;
    padding:12px 4px !important;
    text-align:left !important;
  }
  .site-header .site-nav .dropdown-menu-card .dropdown-item:last-child{
    border-bottom:none !important;
  }
  /* Make the trigger keep focus-within open: the <a href="#"> for
     Resources must be focusable (it is), so tapping it opens the panel. */
  .site-header .site-nav .dropdown-trigger{ cursor:pointer; }
}


/* =====================================================================
   COLOR VARIETY (white variant) — reintroduce the per-card tint variation
   the dark site had (division squares, commitment cards, value accents,
   blog art) which the flat white flip had removed. Uses soft, light
   washes of the brand family (teal / slate-blue / warm sand) on white so
   the cards feel art-directed rather than uniform. Surface/color only;
   no layout, text, or geometry changes. Part of the reversible polish
   layer (remove white-polish.css link to revert).
   ===================================================================== */

/* Palette of soft tints used below:
     teal   -> #ECF5F3 / border rgba(13,107,102,.22)
     slate  -> #EDF1F6 / border rgba(31,58,95,.20)
     sand   -> #F5F0E6 / border rgba(166,109,63,.22)
     mist   -> #EFF3F3 / border rgba(60,90,96,.18)  */

/* ---- UNIFORM CARDS + HOVER ONLY ----
        Every card/tile shares ONE surface (soft teal wash on white) with a
        single consistent hairline. No per-card color variation anywhere.
        The only differentiation is a hover lift (border darkens to teal +
        a thin teal top edge + soft shadow). Applies to division squares,
        commitment cards, value cards, magnetic cards, blog/case cards. */
.div-sq,
.div-sq:nth-child(1),.div-sq:nth-child(2),.div-sq:nth-child(3),
.div-sq:nth-child(4),.div-sq:nth-child(5),.div-sq:nth-child(6),
.glass-card,
.glass-card:nth-child(3n+1),.glass-card:nth-child(3n+2),.glass-card:nth-child(3n+3),
.val-card, .val-inner, .mag-card, .unique-card, .value-tile{
  background:#F3F4F5 !important;
  border:1px solid rgba(28,26,23,.10) !important;
  box-shadow:none !important;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
/* Uniform icon chips. */
.div-sq .div-sq-icon,
.div-sq:nth-child(1) .div-sq-icon,.div-sq:nth-child(2) .div-sq-icon,.div-sq:nth-child(3) .div-sq-icon,
.div-sq:nth-child(4) .div-sq-icon,.div-sq:nth-child(5) .div-sq-icon,.div-sq:nth-child(6) .div-sq-icon,
.glass-card .glass-icon,
.glass-card:nth-child(3n+1) .glass-icon,.glass-card:nth-child(3n+2) .glass-icon,.glass-card:nth-child(3n+3) .glass-icon{
  background:#E6E8EA !important; border-color:rgba(28,26,23,.12) !important;
}
.div-sq .div-sq-icon svg, .glass-card .glass-icon svg{ stroke:var(--teal-ink) !important; }
.div-sq:nth-child(6) .div-sq-icon svg{ stroke:var(--teal-ink) !important; }

/* Single consistent hover feel on every card/tile. */
.div-sq:hover, .glass-card:hover, .val-card:hover, .mag-card:hover,
.unique-card:hover, .value-tile:hover, .light-card:hover{
  background:#FFFFFF !important;
  border-color:var(--teal-ink) !important;
  box-shadow:0 2px 0 0 var(--teal-brand) inset, 0 12px 26px -16px rgba(32,32,28,.25) !important;
  transform:none !important;
}

/* Value-card badges: single teal (no blue/gold variation). */
.vc1 .val-badge, .vc2 .val-badge, .vc3 .val-badge{ background:var(--teal-ink) !important; }

/* Industry pills: one uniform chip (no alternating tints). */
.industry-pill, .seo-pill,
.industry-pill:nth-child(3n+1), .seo-pill:nth-child(3n+1),
.industry-pill:nth-child(3n+2), .seo-pill:nth-child(3n+2),
.industry-pill:nth-child(3n+3), .seo-pill:nth-child(3n+3){
  background:#F3F4F5 !important; border:1px solid rgba(28,26,23,.10) !important;
}
.industry-pill:hover, .seo-pill:hover, .seo-pill:focus-visible{
  border-color:var(--teal-ink) !important; color:var(--teal-ink) !important; background:#FFFFFF !important;
}

/* Mobile division index rows: flat/clean to match the minimal layout
   (the earlier left-edge teal accent is dropped — the minimalist list
   uses plain hairline dividers only). */
.mhome .mh-index-row,
.mhome .mh-index-row:nth-child(3n+1),
.mhome .mh-index-row:nth-child(3n+2),
.mhome .mh-index-row:nth-child(3n+3){ box-shadow:none !important; }

/* Blog / case-study thumbnails: one uniform soft-teal wash (no per-card
   duotone variation). */
.blog-thumb,
.merged-half:nth-of-type(1) .blog-art-1, .merged-half:nth-of-type(1) .blog-art-2, .merged-half:nth-of-type(1) .blog-art-3,
.merged-half:nth-of-type(2) .blog-art-1, .merged-half:nth-of-type(2) .blog-art-2, .merged-half:nth-of-type(2) .blog-art-3{
  background:#E9EBED !important;
}

/* Same logic as the mobile design: a card on a white section is light grey, a card on a grey section is white. */
:is(.sec-commitment, .light-wrapper, .sec-tone-secondary, .about-sec-dark2, .network-strip) :is(.div-sq, .glass-card, .val-card, .val-inner, .mag-card, .unique-card, .value-tile, .industry-pill, .seo-pill){
  background:#FFFFFF !important;
}
:is(.sec-commitment, .light-wrapper, .sec-tone-secondary, .about-sec-dark2, .network-strip) :is(.div-sq, .glass-card, .mag-card, .unique-card, .value-tile) .div-sq-icon,
:is(.sec-commitment, .light-wrapper, .sec-tone-secondary, .about-sec-dark2, .network-strip) .glass-card .glass-icon{
  background:#F3F4F5 !important;
}

/* ---- Greenish tints -> light grey, same as the mobile design ----
   These were see-through teal washes, which read as a green tint on white. */
.ia-duo-note{ background:#F3F4F5 !important; border-color:rgba(28,26,23,.10) !important; }
.svc-pill-division{ background:#F3F4F5 !important; border-color:rgba(28,26,23,.12) !important; }
.svc-pill:hover{ background:#F3F4F5 !important; }
.svc-btn-ghost{ background:#F3F4F5 !important; border-color:rgba(28,26,23,.12) !important; }
.svc-why-ic, .svc-team-badge{ background:#E6E8EA !important; border-color:rgba(28,26,23,.12) !important; }
.svc-why-item:hover .svc-why-ic, .svc-team-sq:hover .svc-team-badge{ background:#DDE0E3 !important; }
.ia-rung-bar{ background:#F3F4F5 !important; }
.ia-rung:nth-child(2) .ia-rung-bar, .ia-rung:hover .ia-rung-bar{ background:#E9EBED !important; }
.svc-cell:hover, .cat-reg-row:hover{ background:#F3F4F5 !important; }
.footer-btn-ghost:hover{ background:#F3F4F5 !important; }
.ia-duo-link i{ box-shadow:0 0 0 10px rgba(28,26,23,.05) !important; }

/* ---- About Us, "Your Vision, Our Expertise": bright (logo) teal for the word Vision and the diagram,
        dark ink for the three labels (they were pale grey on white). ---- */
.exp-vision{ color:#26A99A !important; }
.expertise-svg text{ fill:#1C1A17 !important; }
.expertise-svg circle{ fill:#26A99A !important; }
.expertise-svg .branch-line{ stroke:#26A99A !important; }

/* ---- Heroes on every page are plain white, like the homepage: no diagonal texture or grain. ---- */
.landing-texture, .landing-grain{ display:none !important; }
.about-landing{ background:#FFFFFF !important; }

/* ---- One teal only (#26A99A, the logo colour). The pale mint tint that icon boxes and pills used is now light grey. ---- */
:root{ --teal-light-bg:#F3F4F5 !important; }

/* ============================================================
   NO LINES BETWEEN SECTIONS (desktop). Sections are told apart by tone: white and light grey #F3F4F5.
   site-chrome.js adds .tone-w / .tone-g so that two neighbouring sections never share a tone.
   Lines inside components (FAQ rows, cards, the header edge) are not touched.
   ============================================================ */
@media (min-width: 993px){
  .network-strip, .stats-ticker, .sec-approach, .sec-commitment, .sec-values, .sec-divider, .light-wrapper,
  .svc-cta-band, .keep-reading, .flagback-band, .cs-hero, .post-hero, .cs-sec, .about-sec, .careers-sec, .site-footer{
    border-top:0 !important; border-bottom:0 !important;
  }
  /* the numbers strip under the homepage hero becomes a light grey band instead of a ruled strip */
  .stats-ticker{ background-color:#F3F4F5 !important; }
  /* tone chosen by site-chrome.js */
  .tone-g.tone-g.tone-g{ background-color:#F3F4F5 !important; }
  .tone-w.tone-w.tone-w{ background-color:#FFFFFF !important; }
  .tone-g.tone-g :is(.div-sq, .glass-card, .val-card, .val-inner, .mag-card, .unique-card, .value-tile, .industry-pill, .seo-pill){ background:#FFFFFF !important; }
  .tone-w.tone-w :is(.div-sq, .glass-card, .val-card, .val-inner, .mag-card, .unique-card, .value-tile, .industry-pill, .seo-pill){ background:#F3F4F5 !important; }
}

/* ---- "More Questions? Let's Connect." buttons: Call, WhatsApp and Email are all teal (WhatsApp was black). ---- */
.footer-cta .footer-btn-ghost{ color:#26A99A !important; border-color:rgba(38,169,154,.5) !important; }
.footer-cta .footer-btn-ghost svg, .footer-cta .footer-btn-ghost svg path{ fill:#26A99A !important; }

/* ---- The "setup" panels (two boxes side by side, e.g. Maker / Checker or Project ends / With Stravision):
        light like the rest of the site instead of the dark gradient, with dark text. Grey on a white section, white on a grey one. ---- */
.ia-duo-panel{ background:#F3F4F5 !important; border:1px solid var(--hair) !important; }
:is(.sec-commitment, .light-wrapper, .sec-tone-secondary, .about-sec-dark2, .tone-g) .ia-duo-panel{ background:#FFFFFF !important; }
.tone-w.tone-w .ia-duo-panel{ background:#F3F4F5 !important; }
.ia-duo-panel h3{ color:#1C1A17 !important; }
.ia-duo-panel p{ color:#4A5154 !important; }
.ia-duo-panel .ia-duo-role{ color:#26A99A !important; }