/* ==========================================================================
   GRAPHIC-DESIGN SERVICE PAGES — LIGHT THEME
   ==========================================================================

   Scope: every rule is prefixed
       html[data-tk-theme="light"] #primary.tk-gd
   `tk-gd` is added in servicedetails.blade.php only when
   `$service->category?->slug === 'graphic-design'`, so print,
   digital-marketing, automation and web service pages are unreachable from
   this file. Dark mode is unreachable too — the theme attribute gates
   everything.

   This is a theming pass only: no layout, spacing, width, font-size or
   markup changes. The dark design is untouched.

   Already-working shared light styling is deliberately NOT rebuilt here:
     .customreviews / .trustpilot-section  -> tbtk-testimonials-redesign.css
     .bookconsul                           -> tbtk-consultation-shared.css
     package cards                         -> tbtk-packages-shared.css
   Those are excluded or left to win, and only conflicts are corrected.

   Palette matches the rest of the site's light mode:
     ground   #F3F6F8      alt ground #EDF1F4
     panel    #FFFFFF / linear-gradient(#FFFFFF,#F8FAFB)
     ink      #0A0D0F      body ink #2B3138      muted #626B75
     hairline rgba(15,23,42,.10)
     accent   var(--primary-color, #0073FC)
   ========================================================================== */

/* ---- Page ground ------------------------------------------------------- */
/* The layout paints `body { background:#000 }` in both themes, so every
   transparent section on these pages inherited black. The ground is set on
   the page wrapper instead of on body, so nothing outside these pages (or
   outside this category) is affected. */
html[data-tk-theme="light"] #primary.tk-gd {
    background: #F3F6F8;
    color: #2B3138;
}

/* ---- Section surfaces -------------------------------------------------- */
/* The hero carries a literal `black` class with an opaque background
   (`.service_main.black { background-color:#000 }`). Some slugs layer further
   rules on it, so the ground is pinned here — scoped to light + tk-gd, so it
   can reach nothing else. */
html[data-tk-theme="light"] #primary.tk-gd section.service_main,
html[data-tk-theme="light"] #primary.tk-gd section.service_main.black,
html[data-tk-theme="light"] #primary.tk-gd section.black,
html[data-tk-theme="light"] #primary.tk-gd .bgblack {
    background-color: #F3F6F8 !important;
}

html[data-tk-theme="light"] #primary.tk-gd .bgservicesection,
html[data-tk-theme="light"] #primary.tk-gd .bggrey,
html[data-tk-theme="light"] #primary.tk-gd .bgplaingrey:not(.bookconsul) {
    background-color: #EDF1F4;
}

/* hairlines between sections read as seams on a light ground */
html[data-tk-theme="light"] #primary.tk-gd .service-detail-section {
    border-color: rgba(15, 23, 42, 0.10);
}

/* ---- Type -------------------------------------------------------------- */
/* Headings and body copy are set from the surface they sit on. The dark
   islands further down restore light ink where the surface stays dark. */
html[data-tk-theme="light"] #primary.tk-gd h1,
html[data-tk-theme="light"] #primary.tk-gd h2,
html[data-tk-theme="light"] #primary.tk-gd h3,
html[data-tk-theme="light"] #primary.tk-gd h4,
html[data-tk-theme="light"] #primary.tk-gd h5,
html[data-tk-theme="light"] #primary.tk-gd h6,
html[data-tk-theme="light"] #primary.tk-gd .main-title,
html[data-tk-theme="light"] #primary.tk-gd .sub-title {
    color: #0A0D0F;
}

html[data-tk-theme="light"] #primary.tk-gd p,
html[data-tk-theme="light"] #primary.tk-gd li,
html[data-tk-theme="light"] #primary.tk-gd span,
html[data-tk-theme="light"] #primary.tk-gd td,
html[data-tk-theme="light"] #primary.tk-gd th,
html[data-tk-theme="light"] #primary.tk-gd label,
html[data-tk-theme="light"] #primary.tk-gd small,
html[data-tk-theme="light"] #primary.tk-gd figcaption,
html[data-tk-theme="light"] #primary.tk-gd .service_desc,
html[data-tk-theme="light"] #primary.tk-gd .content p {
    color: #2B3138;
}

/* secondary/meta copy keeps its lower emphasis without going invisible */
html[data-tk-theme="light"] #primary.tk-gd .subtitle,
html[data-tk-theme="light"] #primary.tk-gd .meta,
html[data-tk-theme="light"] #primary.tk-gd .meta *,
html[data-tk-theme="light"] #primary.tk-gd .viewcount,
html[data-tk-theme="light"] #primary.tk-gd .tk-category {
    color: #626B75;
}

/* ---- Links and accents ------------------------------------------------- */
/* blue stays the accent; only plain in-copy links are re-inked */
html[data-tk-theme="light"] #primary.tk-gd a:not([class]) {
    color: var(--primary-color-dark, #005BC7);
}

/* ---- Cards / panels ---------------------------------------------------- */
html[data-tk-theme="light"] #primary.tk-gd .innercontainer {
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: linear-gradient(#FFFFFF, #F8FAFB);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 18px rgba(15, 23, 42, 0.07);
}

html[data-tk-theme="light"] #primary.tk-gd .innercontainer h1,
html[data-tk-theme="light"] #primary.tk-gd .innercontainer h2,
html[data-tk-theme="light"] #primary.tk-gd .innercontainer h3,
html[data-tk-theme="light"] #primary.tk-gd .innercontainer h4,
html[data-tk-theme="light"] #primary.tk-gd .innercontainer p,
html[data-tk-theme="light"] #primary.tk-gd .innercontainer span,
html[data-tk-theme="light"] #primary.tk-gd .innercontainer li {
    color: #2B3138;
}

/* ==========================================================================
   CONTRAST REPAIR — text still inheriting dark-mode ink on light surfaces
   ==========================================================================
   Each block below names the rule it is answering. Only `color` (and one
   `opacity`) is touched; no layout, size, spacing or content changes.
   ========================================================================== */

/* ---- Hero copy and checklist ------------------------------------------- */
/* servicedetails.blade.php:
     #primary[data-service-slug="logo-design"] .logo-design-hero-subtitle,
     … .logo-design-hero-subtitle p { color:#fff !important }   (1,3,0)
     #primary[data-service-slug="logo-design"] .service_desc
       .logo-design-trust-list li { color:#fff }                (1,4,1)
   Those sit on the light hero now, so the paragraph and the four benefit
   lines were white-on-white. The first carries !important, so the override
   needs it too. The blue pills, blue check icons and gold stars are NOT
   touched — they are re-pinned further down. */
html[data-tk-theme="light"] #primary.tk-gd .logo-design-hero-subtitle,
html[data-tk-theme="light"] #primary.tk-gd .logo-design-hero-subtitle p,
html[data-tk-theme="light"] #primary.tk-gd .service_desc .logo-design-hero-subtitle p {
    color: #2B3138 !important;
}

html[data-tk-theme="light"] #primary.tk-gd .logo-design-trust-list li,
html[data-tk-theme="light"] #primary.tk-gd .service_desc .logo-design-trust-list li {
    color: #2B3138 !important;
}

/* the hero's own description/lead, whatever component a page uses */
html[data-tk-theme="light"] #primary.tk-gd section.service_main p,
html[data-tk-theme="light"] #primary.tk-gd .service_desc p,
html[data-tk-theme="light"] #primary.tk-gd .service_desc li,
html[data-tk-theme="light"] #primary.tk-gd .service_desc span:not([class]) {
    color: #2B3138;
}

/* ---- Package benefit row ----------------------------------------------- */
/* "Free Expert Consultation / No Hidden Charges / Satisfaction Guarantee".
   tbtk-packages-redesign.css themes this row only under #logodeal (the
   homepage id), so on service pages the links fell back to the inherited
   white while the two plain-text labels happened to inherit dark — which is
   exactly the one-invisible-two-readable split in the screenshot. The icons
   keep their own colours. */
html[data-tk-theme="light"] #primary.tk-gd .pricing-benefit-list,
html[data-tk-theme="light"] #primary.tk-gd .pricing-benefit-list li,
html[data-tk-theme="light"] #primary.tk-gd .pricing-benefit-list li a,
html[data-tk-theme="light"] #primary.tk-gd .pricing-benefit-list li span {
    color: #2B3138 !important;
}

html[data-tk-theme="light"] #primary.tk-gd .pricing-benefit-list li a:hover,
html[data-tk-theme="light"] #primary.tk-gd .pricing-benefit-list li a:focus,
html[data-tk-theme="light"] #primary.tk-gd .pricing-benefit-list li a:active {
    color: #0A0D0F !important;
}

/* the card's category line is muted with opacity:.5 on top of an already
   light grey, which lands at ~1.6:1 — colour alone cannot fix an element
   that is also half-transparent, so the opacity is normalised and the
   muting kept in the colour instead. */
html[data-tk-theme="light"] #primary.tk-gd .tk-product-info .tk-category {
    opacity: 1;
    color: #626B75 !important;
    -webkit-text-fill-color: #626B75 !important;
}

/* ---- Facebook + Trustpilot review cards -------------------------------- */
/* Both systems render their cards on white surfaces
   (.trustpilot-card computes rgb(255,255,255)) while the card text measured
   white. tbtk-testimonials-redesign.css already defines the light colours
   for the homepage; these restate them at service-page weight so the shared
   review components read correctly here too. Brand colours are untouched:
   Facebook blue, Trustpilot green, star colours and both CTA buttons keep
   their own rules. */
html[data-tk-theme="light"] #primary.tk-gd .trustpilot-card-title,
html[data-tk-theme="light"] #primary.tk-gd .trustpilot-author,
html[data-tk-theme="light"] #primary.tk-gd .test_head,
html[data-tk-theme="light"] #primary.tk-gd .trustpilot-score-value,
html[data-tk-theme="light"] #primary.tk-gd .trustpilot-title {
    color: #0A0D0F !important;
}

html[data-tk-theme="light"] #primary.tk-gd .trustpilot-card-body,
html[data-tk-theme="light"] #primary.tk-gd .name,
html[data-tk-theme="light"] #primary.tk-gd .review-text,
html[data-tk-theme="light"] #primary.tk-gd .trustpilot-card p:not([class]) {
    color: #4A535D !important;
}

/* dates, locations, roles, source notes and disclaimers */
html[data-tk-theme="light"] #primary.tk-gd .trustpilot-meta,
html[data-tk-theme="light"] #primary.tk-gd .trustpilot-note,
html[data-tk-theme="light"] #primary.tk-gd .trustpilot-source,
html[data-tk-theme="light"] #primary.tk-gd .trustpilot-disclaimer,
html[data-tk-theme="light"] #primary.tk-gd .trustpilot-card .position,
html[data-tk-theme="light"] #primary.tk-gd .trustpilot-card .address,
html[data-tk-theme="light"] #primary.tk-gd .customreviews .position,
html[data-tk-theme="light"] #primary.tk-gd .customreviews .address {
    color: #626B75 !important;
}

/* the "Rated 5/5 based on Customer Reviews" line and its emphasis */
html[data-tk-theme="light"] #primary.tk-gd .centerbuttons,
html[data-tk-theme="light"] #primary.tk-gd .centerbuttons span {
    color: #626B75 !important;
}

html[data-tk-theme="light"] #primary.tk-gd .centerbuttons strong {
    color: #0A0D0F !important;
}

/* The platform/source label beside the icon — `.trustpilot-card-brand` holds
   a plain <span> reading "Facebook" or "Trustpilot". It sits on the white
   card (its own background is transparent), so it needs card ink. The icon
   chip inside it keeps its Facebook blue / Trustpilot green. */
html[data-tk-theme="light"] #primary.tk-gd .trustpilot-card-brand,
html[data-tk-theme="light"] #primary.tk-gd .trustpilot-card-brand span {
    color: #626B75 !important;
}

/* …but the icon glyph itself rides the coloured chip and stays white. */
html[data-tk-theme="light"] #primary.tk-gd .trustpilot-card-brand .facebook-review-icon,
html[data-tk-theme="light"] #primary.tk-gd .facebook-review-icon {
    color: #FFFFFF !important;
}

/* Star glyphs are painted on their own Facebook-blue / Trustpilot-green
   chips, so they keep white ink — they are NOT sitting on the card. */
html[data-tk-theme="light"] #primary.tk-gd .trustpilot-stars,
html[data-tk-theme="light"] #primary.tk-gd .trustpilot-stars span {
    color: #FFFFFF !important;
}

/* ---- "#1 Rated ⭐" heading (Our Process, right card) -------------------- */
/* servicedetails.blade.php:1158-1166 —
     section[data-service-section="third"] .col-lg-6:last-child .text-left.sub
       { font-size: 0 }
     …same selector::before { content:"#1 Rated \2B50"; color:#fff }
   The <h2>'s own text is collapsed to font-size:0 and the visible heading is
   a PSEUDO-ELEMENT, which is why the element itself measured dark while the
   heading was invisible — and why the star survived: emoji paint in their
   own colours regardless of `color`. Specificity here is (1,7,2) against the
   original's (0,5,1), so no !important is needed. Content, size, weight and
   position are untouched; only the ink changes. */
html[data-tk-theme="light"] #primary.tk-gd section[data-service-section="third"] .col-lg-6:last-child .text-left.sub::before {
    color: #0A0D0F;
}

/* ==========================================================================
   PER-SLUG OVERRIDE ANSWER
   ==========================================================================
   servicedetails.blade.php carries large per-slug blocks (logo-animation
   alone has 107 rules) shaped like
       #primary[data-service-slug="…"] section[data-service-section="…"] …
   many with `background: … !important`. Those outrank the tk-gd rules above,
   so pages with such a block kept their dark surfaces in light mode.

   Adding `[data-service-slug]` here — the same attribute, unqualified — puts
   these selectors one step above any per-slug rule while staying completely
   generic: no slug is named, so every graphic-design page with a per-slug
   block is corrected by the same rules. Still light-mode only.
   ========================================================================== */

/* section surfaces */
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.bgservicesection,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.bggrey,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.bgplaingrey:not(.bookconsul) {
    background-color: #EDF1F4 !important;
    background-image: none !important;
}

html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.bgblack,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.service_main {
    background-color: #F3F6F8 !important;
    background-image: none !important;
}

/* Body copy set light per slug for the black page:
     #primary[data-service-slug="…"] .serv_desc { color:#d5d5d5 }   -> 1.40:1
   and the unclassed paragraphs in the stats band (#d0d0d0)         -> 1.42:1 */
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .serv_desc,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.newarr p,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .our-brands p {
    color: #4A535D;
}

/* one of those paragraphs carries style="color:#d0d0d0" in the markup, which
   only !important can answer; matched on that attribute so it reaches
   nothing else */
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.newarr p[style*="d0d0d0"] {
    color: #4A535D !important;
}

/* the headline stat is 19px/700 — large text, but #0073FC is 2.54:1, under
   the 3:1 floor, so it takes the darker brand tone like other accent text */
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.newarr span,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .our-brands span {
    color: #005BC7;
}

/* Brand/stat band and the boxes inside it, painted dark per slug
     #primary[data-service-slug="…"] .our-brands      { background:#1d1c1c }
     #primary[data-service-slug="…"] .our-brands-box,
     #primary[data-service-slug="…"] .work-together-box { background:#121212 } */
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .our-brands {
    background-color: #EDF1F4;
}

html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .our-brands-box,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .work-together-box {
    background-color: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .our-brands-box .serv_desc,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .our-brands-box p,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .work-together-box p,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .our-brands .serv_desc {
    color: #4A535D;
}

/* The comparison table is painted dark per slug
     #primary[data-service-slug="…"] .service_table table { background:#272727 } */
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .service_table,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .service_table table,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .service_table thead,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .service_table tbody,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .service_table tr,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .service_table th,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .service_table td {
    background-color: #FFFFFF;
}

/* Accent words inside hero headings, set per slug as
     #primary[data-service-slug="…"] .service_desc h1 strong { color:var(--primary-color) }
   #0073FC measures 2.54:1 on the light hero, below the 3:1 large-text floor.
   The darker brand tone keeps the hue and reaches 4.6:1. */
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .service_desc h1 strong,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .service_desc h1 span {
    color: #005BC7;
}

/* package/offer cards that a per-slug rule keeps dark */
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .logo-slide {
    background: linear-gradient(#FFFFFF, #F8FAFB) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .logo-slide .tk-title,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .logo-slide .tk-price {
    color: #0A0D0F !important;
    -webkit-text-fill-color: #0A0D0F !important;
}

html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .logo-slide li,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .logo-slide .tk-feature-list li {
    color: #4A535D !important;
    -webkit-text-fill-color: #4A535D !important;
}

/* FAQ accordion */
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .accordion-item,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .accordion-button,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .accordion-button.collapsed {
    background: #FFFFFF !important;
    color: #0A0D0F !important;
}

html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .accordion-button span,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .accordion-body,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .accordion-body * {
    color: #2B3138 !important;
}

/* the "Got Questions?" panel and its form column */
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .que_row,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .que_row > [class*="col-"] {
    background: linear-gradient(#FFFFFF, #F8FAFB) !important;
    background-image: linear-gradient(#FFFFFF, #F8FAFB) !important;
}

html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .que_row h1,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .que_row h2,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .que_row h3,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .que_row h4 {
    color: #0A0D0F !important;
}

html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .que_row p,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .que_row span,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .que_row a,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .que_row label {
    color: #2B3138 !important;
}

/* copy inside the sections those per-slug blocks own */
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.bgservicesection h1,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.bgservicesection h2,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.bgservicesection h3,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.bgservicesection h4,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.bgservicesection .main-title {
    color: #0A0D0F !important;
}

html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.bgservicesection p,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.bgservicesection li,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.bgservicesection span:not([class]) {
    color: #2B3138 !important;
}

/* ==========================================================================
   AI AUTOMATION & AGENTS  +  SOCIAL MEDIA MARKETING
   ==========================================================================
   Both pages render through servicedetails.blade.php but use their own
   section families (.automation-* and .smm-*), so none of the shared section
   rules above reached them. Same palette and card language as every other
   corrected service page — surfaces and ink only. Video/artwork surfaces are
   deliberately left dark and listed at the end.
   ========================================================================== */

/* ---- Page grounds ------------------------------------------------------ */
html[data-tk-theme="light"] #primary.tk-gd .automation-page,
html[data-tk-theme="light"] #primary.tk-gd .social-marketing-page,
html[data-tk-theme="light"] #primary.tk-gd .smm-hero,
html[data-tk-theme="light"] #primary.tk-gd section.automation-consultation-section,
html[data-tk-theme="light"] #primary.tk-gd .smm-section.smm-process,
html[data-tk-theme="light"] #primary.tk-gd .smm-section.smm-video-results,
html[data-tk-theme="light"] #primary.tk-gd .smm-section.smm-faq {
    background-color: #F3F6F8 !important;
    background-image: none !important;
}

/* ---- Cards and panels -------------------------------------------------- */
html[data-tk-theme="light"] #primary.tk-gd .automation-consultation-card,
html[data-tk-theme="light"] #primary.tk-gd .automation-page .product-card.tk-text-block,
html[data-tk-theme="light"] #primary.tk-gd .smm-proof,
html[data-tk-theme="light"] #primary.tk-gd .smm-service-card,
html[data-tk-theme="light"] #primary.tk-gd .smm-step,
html[data-tk-theme="light"] #primary.tk-gd .smm-package,
html[data-tk-theme="light"] #primary.tk-gd .smm-addon,
html[data-tk-theme="light"] #primary.tk-gd .smm-video-card,
html[data-tk-theme="light"] #primary.tk-gd .smm-faq-item,
html[data-tk-theme="light"] #primary.tk-gd .smm-contact {
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: linear-gradient(#FFFFFF, #F8FAFB) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 18px rgba(15, 23, 42, 0.07) !important;
}

/* the featured package keeps its blue emphasis border */
html[data-tk-theme="light"] #primary.tk-gd .smm-package.smm-package-featured {
    border-color: rgba(0, 115, 252, 0.35) !important;
}

/* ---- Type -------------------------------------------------------------- */
html[data-tk-theme="light"] #primary.tk-gd .automation-page h1,
html[data-tk-theme="light"] #primary.tk-gd .automation-page h2,
html[data-tk-theme="light"] #primary.tk-gd .automation-page h3,
html[data-tk-theme="light"] #primary.tk-gd .automation-page h4,
html[data-tk-theme="light"] #primary.tk-gd .automation-page h5,
html[data-tk-theme="light"] #primary.tk-gd .automation-page .tk-title,
html[data-tk-theme="light"] #primary.tk-gd .social-marketing-page h1,
html[data-tk-theme="light"] #primary.tk-gd .social-marketing-page h2,
html[data-tk-theme="light"] #primary.tk-gd .social-marketing-page h3,
html[data-tk-theme="light"] #primary.tk-gd .social-marketing-page h4,
html[data-tk-theme="light"] #primary.tk-gd .social-marketing-page h5,
html[data-tk-theme="light"] #primary.tk-gd .smm-faq-item summary {
    color: #0A0D0F !important;
}

html[data-tk-theme="light"] #primary.tk-gd .automation-page p,
html[data-tk-theme="light"] #primary.tk-gd .automation-page li,
html[data-tk-theme="light"] #primary.tk-gd .automation-page dd,
html[data-tk-theme="light"] #primary.tk-gd .social-marketing-page p,
html[data-tk-theme="light"] #primary.tk-gd .social-marketing-page li,
html[data-tk-theme="light"] #primary.tk-gd .social-marketing-page dd,
html[data-tk-theme="light"] #primary.tk-gd .smm-faq-item p {
    color: #2B3138 !important;
}

/* small meta / captions keep lower emphasis but stay legible */
html[data-tk-theme="light"] #primary.tk-gd .automation-page small,
html[data-tk-theme="light"] #primary.tk-gd .social-marketing-page small,
html[data-tk-theme="light"] #primary.tk-gd .smm-proof span,
html[data-tk-theme="light"] #primary.tk-gd .smm-step-index {
    color: #626B75 !important;
}

/* ---- Controls keep their blue ------------------------------------------ */
/* restated so the type rules above can never strip a button's own ink */
html[data-tk-theme="light"] #primary.tk-gd .automation-page .button,
html[data-tk-theme="light"] #primary.tk-gd .automation-page .tk-more-button,
html[data-tk-theme="light"] #primary.tk-gd .automation-page .themebutton,
html[data-tk-theme="light"] #primary.tk-gd .social-marketing-page .button,
html[data-tk-theme="light"] #primary.tk-gd .social-marketing-page .themebutton,
html[data-tk-theme="light"] #primary.tk-gd .smm-cta,
html[data-tk-theme="light"] #primary.tk-gd .smm-cta *,
html[data-tk-theme="light"] #primary.tk-gd .automation-page .button *,
html[data-tk-theme="light"] #primary.tk-gd .social-marketing-page .button * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* ---- Form fields ------------------------------------------------------- */
html[data-tk-theme="light"] #primary.tk-gd .automation-consultation-card input:not([type="submit"]):not([type="hidden"]):not(.iti__search-input),
html[data-tk-theme="light"] #primary.tk-gd .automation-consultation-card select,
html[data-tk-theme="light"] #primary.tk-gd .automation-consultation-card textarea,
html[data-tk-theme="light"] #primary.tk-gd .smm-contact input:not([type="submit"]):not([type="hidden"]):not(.iti__search-input),
html[data-tk-theme="light"] #primary.tk-gd .smm-contact select,
html[data-tk-theme="light"] #primary.tk-gd .smm-contact textarea {
    border: 1px solid rgba(15, 23, 42, 0.16) !important;
    background: #F7F9FA !important;
    color: #14161A !important;
    -webkit-text-fill-color: #14161A !important;
}

html[data-tk-theme="light"] #primary.tk-gd .automation-consultation-card input::placeholder,
html[data-tk-theme="light"] #primary.tk-gd .automation-consultation-card textarea::placeholder,
html[data-tk-theme="light"] #primary.tk-gd .smm-contact input::placeholder,
html[data-tk-theme="light"] #primary.tk-gd .smm-contact textarea::placeholder {
    color: #7A828B !important;
    -webkit-text-fill-color: #7A828B !important;
    opacity: 1 !important;
}

html[data-tk-theme="light"] #primary.tk-gd .automation-consultation-card input:focus,
html[data-tk-theme="light"] #primary.tk-gd .automation-consultation-card select:focus,
html[data-tk-theme="light"] #primary.tk-gd .automation-consultation-card textarea:focus,
html[data-tk-theme="light"] #primary.tk-gd .smm-contact input:focus,
html[data-tk-theme="light"] #primary.tk-gd .smm-contact select:focus,
html[data-tk-theme="light"] #primary.tk-gd .smm-contact textarea:focus {
    border-color: var(--primary-color, #0073FC) !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(0, 115, 252, 0.18) !important;
    outline: none !important;
}

/* ---- Automation hero: the opaque base layer ---------------------------- */
/* ROOT CAUSE of the hero staying dark. `.automation-hero` has no dark
   background-color and no ::before/::after (both compute `content: none`) —
   it is a THREE-LAYER background-image whose last layer is opaque:

     radial-gradient(… rgba(0,115,252,.16) …)        blue glow
     radial-gradient(… rgba(55,235,155,.12) …)       green glow
     linear-gradient(rgb(5,6,7), rgb(11,13,16))      <- opaque near-black base

   Reading only the first stop makes this look like a harmless blue glow,
   which is why the earlier pass left it. The whole stack is restated here
   with a LIGHT base, keeping the two atmospheric glows but re-tinting the
   green one to the brand blue so no green is introduced in light mode. */
html[data-tk-theme="light"] #primary.tk-gd section.automation-hero {
    background-color: #F3F6F8 !important;
    background-image:
        radial-gradient(circle at 14% 18%, rgba(0, 115, 252, 0.10), rgba(0, 0, 0, 0) 28%),
        radial-gradient(circle at 82% 28%, rgba(0, 115, 252, 0.06), rgba(0, 0, 0, 0) 24%),
        linear-gradient(#F3F6F8 0%, #EDF1F4 100%) !important;
}

/* ---- Automation feature cards ------------------------------------------ */
/* `.automation-area-card` is a glass panel: rgba(255,255,255,.06) fill over a
   rgba(255,255,255,.14) hairline. Both read as "almost white" on a light
   ground, so the five cards need the established light card surface. Radius
   (8px), dimensions, grid and content are untouched. */
html[data-tk-theme="light"] #primary.tk-gd .automation-area-card {
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: linear-gradient(#FFFFFF, #F8FAFB) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 18px rgba(15, 23, 42, 0.07) !important;
}

html[data-tk-theme="light"] #primary.tk-gd .automation-area-card h1,
html[data-tk-theme="light"] #primary.tk-gd .automation-area-card h2,
html[data-tk-theme="light"] #primary.tk-gd .automation-area-card h3,
html[data-tk-theme="light"] #primary.tk-gd .automation-area-card h4,
html[data-tk-theme="light"] #primary.tk-gd .automation-area-card strong {
    color: #0A0D0F !important;
}

html[data-tk-theme="light"] #primary.tk-gd .automation-area-card p,
html[data-tk-theme="light"] #primary.tk-gd .automation-area-card li,
html[data-tk-theme="light"] #primary.tk-gd .automation-area-card span {
    color: #4A535D !important;
}

/* the eyebrow is an accent label, so it takes the brand blue */
html[data-tk-theme="light"] #primary.tk-gd .automation-eyebrow,
html[data-tk-theme="light"] #primary.tk-gd .automation-eyebrow * {
    color: var(--primary-color-dark, #005BC7) !important;
    -webkit-text-fill-color: var(--primary-color-dark, #005BC7) !important;
}

/* ---- Automation CTA band and leftover light-on-light text -------------- */
/* `.automation-cta-band` still painted rgb(8,9,11); the card `summary`
   toggle, the Gravity field description and the "+ $30/mo" add-on note all
   carry light ink for the dark design and now sit on light surfaces. */
html[data-tk-theme="light"] #primary.tk-gd section.automation-cta-band {
    background-color: #EDF1F4 !important;
    background-image: none !important;
}

html[data-tk-theme="light"] #primary.tk-gd section.automation-cta-band h1,
html[data-tk-theme="light"] #primary.tk-gd section.automation-cta-band h2,
html[data-tk-theme="light"] #primary.tk-gd section.automation-cta-band h3 {
    color: #0A0D0F !important;
}

html[data-tk-theme="light"] #primary.tk-gd section.automation-cta-band p,
html[data-tk-theme="light"] #primary.tk-gd section.automation-cta-band li {
    color: #2B3138 !important;
}

/* The CTA band's button is a GHOST variant — transparent fill with white text
   and a white border — so the white-button rule above would leave it
   invisible on the light band. It is the only .tk-more-button inside this
   band (the three in the cards are solid blue), so it takes brand blue
   instead. Fill, size, radius and position are unchanged. */
html[data-tk-theme="light"] #primary.tk-gd .automation-cta-band .tk-more-button,
html[data-tk-theme="light"] #primary.tk-gd .automation-cta-band .tk-more-button * {
    color: var(--primary-color-dark, #005BC7) !important;
    -webkit-text-fill-color: var(--primary-color-dark, #005BC7) !important;
    border-color: rgba(0, 115, 252, 0.45) !important;
}

html[data-tk-theme="light"] #primary.tk-gd .automation-page .product-card summary,
html[data-tk-theme="light"] #primary.tk-gd .automation-page summary {
    color: #2B3138 !important;
    -webkit-text-fill-color: #2B3138 !important;
}

html[data-tk-theme="light"] #primary.tk-gd .automation-page .gfield_description,
html[data-tk-theme="light"] #primary.tk-gd .automation-page .tk-addon-note,
html[data-tk-theme="light"] #primary.tk-gd .automation-page .product-card span {
    color: #626B75 !important;
    -webkit-text-fill-color: #626B75 !important;
}

/* ---- Values, prices and outline buttons -------------------------------- */
/* These carry their own white ink for the dark design and sit on the light
   cards above, so they measured ~1.05:1. The outline button has a
   transparent fill, so it takes the brand blue rather than white. */
html[data-tk-theme="light"] #primary.tk-gd .smm-proof-value,
html[data-tk-theme="light"] #primary.tk-gd .smm-price {
    color: #0A0D0F !important;
    -webkit-text-fill-color: #0A0D0F !important;
}

html[data-tk-theme="light"] #primary.tk-gd .smm-button-outline,
html[data-tk-theme="light"] #primary.tk-gd .smm-button-outline * {
    color: var(--primary-color-dark, #005BC7) !important;
    -webkit-text-fill-color: var(--primary-color-dark, #005BC7) !important;
    border-color: rgba(0, 115, 252, 0.45) !important;
}

/* inline blue emphasis: the lighter #0073fc lands ~2.7:1 on the light ground */
html[data-tk-theme="light"] #primary.tk-gd .social-marketing-page strong,
html[data-tk-theme="light"] #primary.tk-gd .automation-page strong {
    color: var(--primary-color-dark, #005BC7);
}

/* ---- Media stays dark -------------------------------------------------- */
/* The video lightbox keeps its dark chrome, so its title stays light — the
   heading rule above would otherwise ink it dark on a dark dialog. */
html[data-tk-theme="light"] #primary.tk-gd .smm-video-dialog,
html[data-tk-theme="light"] #primary.tk-gd .smm-video-dialog h1,
html[data-tk-theme="light"] #primary.tk-gd .smm-video-dialog h2,
html[data-tk-theme="light"] #primary.tk-gd .smm-video-dialog h3,
html[data-tk-theme="light"] #primary.tk-gd .smm-video-dialog p,
html[data-tk-theme="light"] #primary.tk-gd .smm-video-dialog-title {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


/* Video posters and their play chrome are artwork: a light section around a
   dark thumbnail is the intended result, so these keep their own surface and
   light ink. No filter is applied to any image or video. */
html[data-tk-theme="light"] #primary.tk-gd .smm-video-preview,
html[data-tk-theme="light"] #primary.tk-gd .smm-video-preview *,
html[data-tk-theme="light"] #primary.tk-gd .homepage-testimonial-video,
html[data-tk-theme="light"] #primary.tk-gd .homepage-testimonial-video * {
    color: #FFFFFF !important;
}

/* ==========================================================================
   DEDICATED WEBSITE / SERVICE VIEWS
   ==========================================================================
   web-design-and-development, ecommerce-website, multi-page-website,
   landing-page-website, web-performance-packages, aices and gift-card render
   from their own Blade views rather than servicedetails.blade.php. Each now
   carries the same `tk-gd` hook plus a `tk-page-*` class, so they inherit
   everything above; only the components those views add are handled here.

   Scoped to `.tk-gd` (not bare element selectors) because the classes below
   are genuinely shared between these views and servicedetails.
   ========================================================================== */

/* ---- Shared card/section families -------------------------------------- */
html[data-tk-theme="light"] #primary.tk-gd .service_block,
html[data-tk-theme="light"] #primary.tk-gd .logo-slide,
html[data-tk-theme="light"] #primary.tk-gd .pricing-box,
html[data-tk-theme="light"] #primary.tk-gd .plan-box {
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: linear-gradient(#FFFFFF, #F8FAFB) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 18px rgba(15, 23, 42, 0.07) !important;
}

html[data-tk-theme="light"] #primary.tk-gd .service_block h1,
html[data-tk-theme="light"] #primary.tk-gd .service_block h2,
html[data-tk-theme="light"] #primary.tk-gd .service_block h3,
html[data-tk-theme="light"] #primary.tk-gd .service_block h4,
html[data-tk-theme="light"] #primary.tk-gd .logo-slide .tk-title,
html[data-tk-theme="light"] #primary.tk-gd .logo-slide .tk-price {
    color: #0A0D0F !important;
    -webkit-text-fill-color: #0A0D0F !important;
}

html[data-tk-theme="light"] #primary.tk-gd .service_block p,
html[data-tk-theme="light"] #primary.tk-gd .service_block li,
html[data-tk-theme="light"] #primary.tk-gd .logo-slide li {
    color: #4A535D !important;
    -webkit-text-fill-color: #4A535D !important;
}

/* ---- website-link showcase (web-design) -------------------------------- */
/* The section chrome goes light; the card MEDIA keeps its dark surface
   because those are website screenshots / their loading fallback. */
html[data-tk-theme="light"] #primary.tk-gd section.website-link-showcase {
    background-color: #EDF1F4 !important;
    background-image: none !important;
}

html[data-tk-theme="light"] #primary.tk-gd .website-link-showcase h1,
html[data-tk-theme="light"] #primary.tk-gd .website-link-showcase h2,
html[data-tk-theme="light"] #primary.tk-gd .website-link-showcase h3,
html[data-tk-theme="light"] #primary.tk-gd .website-link-showcase .main-title {
    color: #0A0D0F !important;
}

html[data-tk-theme="light"] #primary.tk-gd .website-link-card__title,
html[data-tk-theme="light"] #primary.tk-gd .website-link-showcase p {
    color: #2B3138 !important;
}

/* The card body joins the light section; the MEDIA well keeps its dark
   surface because that is the website screenshot / its loading placeholder. */
html[data-tk-theme="light"] #primary.tk-gd .website-link-card {
    background-color: #FFFFFF !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-tk-theme="light"] #primary.tk-gd .website-link-card__cta {
    color: #005BC7 !important;
    -webkit-text-fill-color: #005BC7 !important;
}

/* ---- Trending / section headings on these views ------------------------ */
html[data-tk-theme="light"] #primary.tk-gd .newarr,
html[data-tk-theme="light"] #primary.tk-gd section.pricing,
html[data-tk-theme="light"] #primary.tk-gd section.mainp {
    background-color: #F3F6F8 !important;
    background-image: none !important;
}

/* The screenshot well and its loading placeholder stay dark (artwork), so the
   ink inside them must stay light — the shared type rules above would
   otherwise darken it onto a dark surface. */
html[data-tk-theme="light"] #primary.tk-gd .website-link-card__media,
html[data-tk-theme="light"] #primary.tk-gd .website-link-card__media span,
html[data-tk-theme="light"] #primary.tk-gd .website-link-card__preview-fallback,
html[data-tk-theme="light"] #primary.tk-gd .website-link-card__preview-fallback span,
html[data-tk-theme="light"] #primary.tk-gd .website-link-card__preview-fallback p {
    color: rgba(255, 255, 255, 0.82);
}

/* ---- Ink that shipped white for the black page ------------------------- */
/* These views hard-code light ink. Each selector below names a real element
   that measured under 3:1 in light mode - no element/descendant wildcards. */
html[data-tk-theme="light"] #primary.tk-gd .service_block .serv_title,
html[data-tk-theme="light"] #primary.tk-gd section.pricing > .container h2,
html[data-tk-theme="light"] #primary.tk-gd section.pricing .maintitle,
html[data-tk-theme="light"] #primary.tk-gd section.service_main .maintitle {
    color: #0A0D0F !important;
    -webkit-text-fill-color: #0A0D0F !important;
}

html[data-tk-theme="light"] #primary.tk-gd .service_block .serice_desc p,
html[data-tk-theme="light"] #primary.tk-gd section.pricing > .container > .row p,
html[data-tk-theme="light"] #primary.tk-gd .logo-slide .tk-category {
    color: #4A535D !important;
    -webkit-text-fill-color: #4A535D !important;
}

/* The hero/section copy is set by a body-rendered
   `.maindesc, .service_desc p { color:#f2f1f1 !important }`. That existing
   !important is the only reason one is needed here. */
html[data-tk-theme="light"] #primary.tk-gd .maindesc,
html[data-tk-theme="light"] #primary.tk-gd .service_desc p {
    color: #2B3138 !important;
}

/* comparison table (compare partial) */
html[data-tk-theme="light"] #primary.tk-gd .service_table th,
html[data-tk-theme="light"] #primary.tk-gd .service_table td {
    color: #2B3138 !important;
    -webkit-text-fill-color: #2B3138 !important;
}

html[data-tk-theme="light"] #primary.tk-gd .service_table th:not(:first-child) {
    border-color: rgba(15, 23, 42, 0.12) !important;
}

/* the "cost" column ships #ff6666, which is 2.63:1 on a light ground */
html[data-tk-theme="light"] #primary.tk-gd .service_table td[style*="ff6666"],
html[data-tk-theme="light"] #primary.tk-gd .service_table td[style*="FF6666"] {
    color: #C62828 !important;
    -webkit-text-fill-color: #C62828 !important;
}

/* Brand accent as TEXT: #0073FC is 2.54:1 on white. The darker brand tone
   (--primary-color-dark) reads at 4.6:1 and stays the same hue. Applied only
   to accent text, never to fills, borders or buttons. */
/* .trustpilot-link is deliberately NOT in this list: it is a filled blue
   button, so darkening its label put #005BC7 on a #0073FC fill (1.64:1). It
   keeps the white ink assigned by the "controls that are already blue" rule
   further down. */
html[data-tk-theme="light"] #primary.tk-gd .tk-reviews-label,
html[data-tk-theme="light"] #primary.tk-gd .centerbuttons a,
html[data-tk-theme="light"] #primary.tk-gd .website-link-card__meta,
html[data-tk-theme="light"] #primary.tk-gd .service_table th[style*="00A2FF"] {
    color: #005BC7 !important;
    -webkit-text-fill-color: #005BC7 !important;
}

/* ---- Review-block ink carried on inline style attributes --------------- */
/* These three carry the winning declaration in markup, not in a stylesheet:
     .customreviews a        style="color: var(--primary-color)"   -> 2.54:1
     .centerbuttons span     style="color: white"                  -> 1.09:1
   An inline attribute can only be answered with !important; that is the sole
   reason one is used here, and each selector names one element. */
/* Matching on the style attribute keeps this pinned to exactly the elements
   carrying that declaration, in either placement the block uses (.centerbuttons
   and the "Rated on Google" caption), and leaves every other link — including
   filled buttons with white ink on blue — untouched. */
html[data-tk-theme="light"] #primary.tk-gd .customreviews a[style*="--primary-color"] {
    color: #005BC7 !important;
}

html[data-tk-theme="light"] #primary.tk-gd .customreviews .centerbuttons span,
html[data-tk-theme="light"] #primary.tk-gd .customreviews span[style*="white"] {
    color: #2B3138 !important;
}

/* the testimonial card's role/location lines ship white for the dark card */
html[data-tk-theme="light"] #primary.tk-gd section.testimonial_outer .position,
html[data-tk-theme="light"] #primary.tk-gd section.testimonial_outer .address {
    color: #626B75 !important;
}

/* ---- Review / testimonial widgets -------------------------------------- */
/* Trustindex (.ti-*) and the legacy testimonial cards ship light ink for the
   dark design; their cards are white in light mode. */
html[data-tk-theme="light"] #primary.tk-gd .ti-name,
html[data-tk-theme="light"] #primary.tk-gd .ti-review-text,
html[data-tk-theme="light"] #primary.tk-gd .test_head,
html[data-tk-theme="light"] #primary.tk-gd .testimonial-card .name {
    color: #0A0D0F !important;
    -webkit-text-fill-color: #0A0D0F !important;
}

html[data-tk-theme="light"] #primary.tk-gd .ti-date,
html[data-tk-theme="light"] #primary.tk-gd .ti-recommendation-title,
html[data-tk-theme="light"] #primary.tk-gd .services,
html[data-tk-theme="light"] #primary.tk-gd .name {
    color: #626B75 !important;
    -webkit-text-fill-color: #626B75 !important;
}

/* Review card surfaces. `.ti-inner` is the element that actually paints the
   card (#303030); `.ti-review-item` is only its wrapper, so styling the
   wrapper alone left the ink sitting on a dark panel. */
html[data-tk-theme="light"] #primary.tk-gd .ti-widget-container,
html[data-tk-theme="light"] #primary.tk-gd .ti-review-item,
html[data-tk-theme="light"] #primary.tk-gd .ti-inner,
html[data-tk-theme="light"] #primary.tk-gd .testimonial-card {
    background-color: #FFFFFF !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}

/* The legacy testimonial block paints #171717 on the row inside
   section.testimonial_outer — scoped to that section so no other `.row`
   on the site is reachable. */
html[data-tk-theme="light"] #primary.tk-gd section.testimonial_outer,
html[data-tk-theme="light"] #primary.tk-gd section.testimonial_outer > .container > .row {
    background-color: #F3F6F8 !important;
}

/* ---- Animated email-signature showcase --------------------------------- */
/* `section.animated-signature-showcase` paints rgb(0,0,0) and its
   `article.animated-signature-showcase__card` children rgb(24,24,24), set by
   this page's per-slug block. Surfaces and ink only — layout, dimensions,
   content and the phone mock-up image are untouched. */
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.animated-signature-showcase {
    background-color: #F3F6F8 !important;
    background-image: none !important;
}

html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .animated-signature-showcase__card {
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: linear-gradient(#FFFFFF, #F8FAFB) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 18px rgba(15, 23, 42, 0.07) !important;
}

html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .animated-signature-showcase h1,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .animated-signature-showcase h2,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .animated-signature-showcase h3,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .animated-signature-showcase h4,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .animated-signature-showcase .main-title,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .animated-signature-showcase strong {
    color: #0A0D0F !important;
}

html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .animated-signature-showcase p,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .animated-signature-showcase li,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .animated-signature-showcase span,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .animated-signature-showcase__card p,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .animated-signature-showcase__card span {
    color: #2B3138 !important;
}

/* ---- Consultation OUTER section ---------------------------------------- */
/* tbtk-consultation-shared.css grounds `section.bookconsul` for light, but a
   per-slug rule outranks it on pages that have one, leaving the wrapper dark
   around an already-correct white card. Only the outer section is re-grounded
   here — the card, form, fields, artwork, heading and blue submit all keep
   their existing styling from tbtk-consultation-shared.css. */
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.bookconsul {
    background-color: #EDF1F4 !important;
    background-image: none !important;
}

/* ---- Animation gallery wrapper ----------------------------------------- */
/* `section.animvideo` is painted with a dark background-IMAGE
   (`background-image: linear-gradient(black, #1d1c1c) !important`, per-slug
   block around servicedetails.blade.php:3102), not a background-color — which
   is why the background-color rules above never reached it. Only the wrapper
   is re-grounded; the .swiper-slide thumbnails keep their own dark surface
   (rgb(47,46,46)) and no filter is applied to any image or video. */
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.animvideo {
    background-image: none !important;
    background-color: #F3F6F8 !important;
}

html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.animvideo h1,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.animvideo h2,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.animvideo h3,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.animvideo .main-title {
    color: #0A0D0F !important;
}

html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.animvideo > .container > p,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] section.animvideo > .container > div > p {
    color: #2B3138 !important;
}

/* ---- Consultation form fields ------------------------------------------ */
/* The three inputs (full_name, email, phone) render `background:#fff` with
   `border-width:0`, so they vanish into the white card. Presentation only —
   no name, id, type, value, validation or markup is touched, and the radius
   each field already has is preserved. */
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .que_row input[type="text"],
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .que_row input[type="email"],
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .que_row input[type="tel"],
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .que_row select,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .que_row textarea,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .gform_wrapper .gfield input:not([type="submit"]):not([type="hidden"]):not(.iti__search-input),
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .gform_wrapper .gfield select,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .gform_wrapper .gfield textarea {
    border: 1px solid rgba(15, 23, 42, 0.16) !important;
    background: #F7F9FA !important;
    color: #14161A !important;
    -webkit-text-fill-color: #14161A !important;
}

html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .que_row input::placeholder,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .que_row textarea::placeholder,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .gform_wrapper .gfield input::placeholder,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .gform_wrapper .gfield textarea::placeholder {
    color: #7A828B !important;
    -webkit-text-fill-color: #7A828B !important;
    opacity: 1 !important;
}

/* focus uses the existing brand blue */
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .que_row input:focus,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .que_row select:focus,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .que_row textarea:focus,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .gform_wrapper .gfield input:focus,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .gform_wrapper .gfield select:focus {
    border-color: var(--primary-color, #0073FC) !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(0, 115, 252, 0.18) !important;
    outline: none !important;
}

/* Chrome paints its own autofill background and can wash the text out; the
   inset shadow repaints the field without changing any value. */
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .que_row input:-webkit-autofill,
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .gform_wrapper .gfield input:-webkit-autofill {
    -webkit-text-fill-color: #14161A !important;
    -webkit-box-shadow: 0 0 0 1000px #F7F9FA inset !important;
    box-shadow: 0 0 0 1000px #F7F9FA inset !important;
}

/* the submit button keeps its blue — restated so the field rules cannot reach it */
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .que_row input[type="submit"],
html[data-tk-theme="light"] #primary.tk-gd[data-service-slug] .gform_wrapper .gform_button {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* ---- Portfolio loader -------------------------------------------------- */
/* servicedetails.blade.php:1601-1608 —
     section[data-service-section="reference_swiper"].is-reference-loading::after
     { content:"Loading portfolio..."; color:#ffffff }
   It is a PSEUDO-ELEMENT, which is why no element carried the white text.
   The blue spinner (border-top-color:#0073fc) and every position, size and
   animation value are untouched; only the label's ink changes. */
html[data-tk-theme="light"] #primary.tk-gd section[data-service-section="reference_swiper"].is-reference-loading::after {
    color: #626B75;
}

/* Text that sits on a COLOURED chip, not on the card: the avatar initials
   ride a tinted circle and the verified badge a dark pill, so both keep
   light ink. Facebook/Trustpilot brand colours are left to their own rules. */
html[data-tk-theme="light"] #primary.tk-gd .trustpilot-avatar,
html[data-tk-theme="light"] #primary.tk-gd .testimonial-verified-badge,
html[data-tk-theme="light"] #primary.tk-gd .trustpilot-avatar *,
html[data-tk-theme="light"] #primary.tk-gd .testimonial-verified-badge * {
    color: #FFFFFF !important;
}

/* ---- Plain package/offer cards ----------------------------------------- */
/* `.logo-slide` WITHOUT `animated-package-card` is not reached by
   tbtk-packages-shared.css, and appears on pages like brochure-design. Same
   light card language so the two variants match. */
html[data-tk-theme="light"] #primary.tk-gd .logo-slide:not(.animated-package-card) {
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: linear-gradient(#FFFFFF, #F8FAFB) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 18px rgba(15, 23, 42, 0.07) !important;
}

html[data-tk-theme="light"] #primary.tk-gd .logo-slide:not(.animated-package-card) .tk-title,
html[data-tk-theme="light"] #primary.tk-gd .logo-slide:not(.animated-package-card) .tk-price {
    color: #0A0D0F !important;
    -webkit-text-fill-color: #0A0D0F !important;
}

html[data-tk-theme="light"] #primary.tk-gd .logo-slide:not(.animated-package-card) .tk-feature-list li,
html[data-tk-theme="light"] #primary.tk-gd .logo-slide:not(.animated-package-card) li {
    color: #4A535D !important;
    -webkit-text-fill-color: #4A535D !important;
}

/* ---- "Got Questions?" panel -------------------------------------------- */
/* A dark panel (.que_row) with a darker form column inside it. */
html[data-tk-theme="light"] #primary.tk-gd .que_row {
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(#FFFFFF, #F8FAFB) !important;
}

html[data-tk-theme="light"] #primary.tk-gd .que_row .form {
    background: #EDF1F4 !important;
}

html[data-tk-theme="light"] #primary.tk-gd .que_row h1,
html[data-tk-theme="light"] #primary.tk-gd .que_row h2,
html[data-tk-theme="light"] #primary.tk-gd .que_row h3,
html[data-tk-theme="light"] #primary.tk-gd .que_row h4 {
    color: #0A0D0F;
}

html[data-tk-theme="light"] #primary.tk-gd .que_row p,
html[data-tk-theme="light"] #primary.tk-gd .que_row span,
html[data-tk-theme="light"] #primary.tk-gd .que_row label,
html[data-tk-theme="light"] #primary.tk-gd .que_row li,
html[data-tk-theme="light"] #primary.tk-gd .que_row a:not([class]) {
    color: #2B3138;
}

/* ---- FAQ accordion ----------------------------------------------------- */
/* The legacy sheet pins both with `background: #131313 !important` and the
   button label with `color: #fff !important`, so these specific properties
   need !important to be reclaimed — nothing else here does. */
html[data-tk-theme="light"] #primary.tk-gd .accordion-item {
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: #FFFFFF !important;
}

html[data-tk-theme="light"] #primary.tk-gd .accordion-button,
html[data-tk-theme="light"] #primary.tk-gd .accordion-button.collapsed,
html[data-tk-theme="light"] #primary.tk-gd .faqfull .accordion-button {
    background: #FFFFFF !important;
    color: #0A0D0F !important;
}

html[data-tk-theme="light"] #primary.tk-gd .accordion-button:not(.collapsed),
html[data-tk-theme="light"] #primary.tk-gd .faqfull .accordion-button:not(.collapsed) {
    background: #F3F6F8 !important;
    color: #0A0D0F !important;
}

/* the label is a <span> inside the button, so it needs its own rule */
html[data-tk-theme="light"] #primary.tk-gd .accordion-button span,
html[data-tk-theme="light"] #primary.tk-gd .accordion-header span {
    color: #0A0D0F;
}

html[data-tk-theme="light"] #primary.tk-gd .accordion-body,
html[data-tk-theme="light"] #primary.tk-gd .accordion-body * {
    color: #2B3138;
}

/* the chevron glyph is drawn with currentColor/border on ::after */
html[data-tk-theme="light"] #primary.tk-gd .accordion-button::after {
    color: #0A0D0F;
}

/* ==========================================================================
   DARK ISLANDS — surfaces that MUST stay dark in light mode
   ==========================================================================
   The portfolio tiles and the before/after comparison show artwork that is
   designed against a dark ground; lightening them (or filtering the images)
   would damage the work. They keep their dark surface, so their text keeps
   light ink. This is the "colour follows the surface" rule, not a blanket
   black-text pass.
   ========================================================================== */
/* `.swiper-slide` keeps its dark tile, so EVERY descendant keeps light ink —
   listing only headings here let the generic p/span/li rules above darken
   captions onto a dark tile. `:not(.logo-slide)` keeps the light offer cards
   (which also live in slides on some pages) out of it. */
html[data-tk-theme="light"] #primary.tk-gd section[data-service-section="reference_swiper"] .swiper-slide h1,
html[data-tk-theme="light"] #primary.tk-gd section[data-service-section="reference_swiper"] .swiper-slide h2,
html[data-tk-theme="light"] #primary.tk-gd section[data-service-section="reference_swiper"] .swiper-slide h3,
html[data-tk-theme="light"] #primary.tk-gd section[data-service-section="reference_swiper"] .swiper-slide h4,
html[data-tk-theme="light"] #primary.tk-gd section[data-service-section="reference_swiper"] .swiper-slide h5,
html[data-tk-theme="light"] #primary.tk-gd section[data-service-section="reference_swiper"] .swiper-slide h6,
html[data-tk-theme="light"] #primary.tk-gd section[data-service-section="reference_swiper"] .swiper-slide p,
html[data-tk-theme="light"] #primary.tk-gd section[data-service-section="reference_swiper"] .swiper-slide span,
html[data-tk-theme="light"] #primary.tk-gd section[data-service-section="reference_swiper"] .swiper-slide li,
html[data-tk-theme="light"] #primary.tk-gd .homepage-testimonial-video *,
html[data-tk-theme="light"] #primary.tk-gd .testimonial-verified-badge,
html[data-tk-theme="light"] #primary.tk-gd .twentytwenty-before-label,
html[data-tk-theme="light"] #primary.tk-gd .twentytwenty-after-label,
html[data-tk-theme="light"] #primary.tk-gd .twentytwenty-before-label *,
html[data-tk-theme="light"] #primary.tk-gd .twentytwenty-after-label * {
    color: #FFFFFF;
}

/* ---- Controls that are already blue keep white labels ------------------ */
/* Re-stated so the type rules above can never strip a button's own ink —
   this is the exact failure that made the review CTAs invisible. */
html[data-tk-theme="light"] #primary.tk-gd .button,
html[data-tk-theme="light"] #primary.tk-gd .themebutton,
html[data-tk-theme="light"] #primary.tk-gd .tk-more-button,
html[data-tk-theme="light"] #primary.tk-gd .trustpilot-link,
html[data-tk-theme="light"] #primary.tk-gd .badge-green,
html[data-tk-theme="light"] #primary.tk-gd .logo-design-highlight,
html[data-tk-theme="light"] #primary.tk-gd .button *,
html[data-tk-theme="light"] #primary.tk-gd .themebutton *,
html[data-tk-theme="light"] #primary.tk-gd .tk-more-button * {
    color: #FFFFFF;
}

/* ==========================================================================
   AICES  (services/aices.blade.php)
   ==========================================================================
   This page has its own section vocabulary (.kevintest, .outertest,
   .vid-content, .logosection.minlogos.pros) whose painting rules are written
   as bare class selectors, so they are shared with other pages. Every rule
   below is therefore additionally scoped to `.tk-page-aices` — the class only
   this view carries — so none of it can reach another service page.
   Light mode only; the dark design is untouched.
   ========================================================================== */

/* ---- Surfaces ---------------------------------------------------------- */
/* answering, in order:
     .thehead.col-lg-6.text-left .content                  -> #171717
     .logosection.minlogos.pros                            -> #1d1c1c
     .customreviews .row.align-items-center.gy-4 .outertest-> #171717
     .kevintest .row.gy-4.align-items-center               -> #171717   */
html[data-tk-theme="light"] #primary.tk-gd.tk-page-aices .thehead .content,
html[data-tk-theme="light"] #primary.tk-gd.tk-page-aices .outertest {
    background-color: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

html[data-tk-theme="light"] #primary.tk-gd.tk-page-aices section.logosection.minlogos.pros {
    background-color: #EDF1F4;
}

html[data-tk-theme="light"] #primary.tk-gd.tk-page-aices .kevintest .row.gy-4.align-items-center {
    background-color: #F3F6F8;
}

/* FAQ panel on this page paints its own dark body */
html[data-tk-theme="light"] #primary.tk-gd.tk-page-aices .accordion-item,
html[data-tk-theme="light"] #primary.tk-gd.tk-page-aices .accordion-body,
html[data-tk-theme="light"] #primary.tk-gd.tk-page-aices .accordion-button {
    background-color: #FFFFFF;
    color: #2B3138;
}

/* ---- Ink --------------------------------------------------------------- */
/* the hero lead ships #a1a1a6 (2.37:1 on the light ground) */
html[data-tk-theme="light"] #primary.tk-gd.tk-page-aices .service_desc p,
html[data-tk-theme="light"] #primary.tk-gd.tk-page-aices .content p {
    color: #4A535D;
}

/* the trademark lockup and the "+MORE" tile ship white */
html[data-tk-theme="light"] #primary.tk-gd.tk-page-aices .logosection.minlogos span,
html[data-tk-theme="light"] #primary.tk-gd.tk-page-aices .logosection.minlogos p {
    color: #0A0D0F;
}

/* The FAQ panel is painted by
     #aicesFaqAccordion .accordion-item/.accordion-button/.accordion-body
       { background:#131313 !important }
   An existing !important is the only reason one is needed here. */
html[data-tk-theme="light"] #primary.tk-gd.tk-page-aices #aicesFaqAccordion .accordion-item,
html[data-tk-theme="light"] #primary.tk-gd.tk-page-aices #aicesFaqAccordion .accordion-button,
html[data-tk-theme="light"] #primary.tk-gd.tk-page-aices #aicesFaqAccordion .accordion-body {
    background-color: #FFFFFF !important;
    color: #2B3138 !important;
}

html[data-tk-theme="light"] #primary.tk-gd.tk-page-aices #aicesFaqAccordion .accordion-body a {
    color: #005BC7 !important;
}

/* ---- Ink carried on inline style attributes ---------------------------- */
/* Each of these sets its colour in the markup, so only !important can answer
   it; every selector matches on that exact attribute value. */
html[data-tk-theme="light"] #primary.tk-gd.tk-page-aices .midcontex p[style*="a1a1a6"] {
    color: #4A535D !important;
}

html[data-tk-theme="light"] #primary.tk-gd.tk-page-aices .midcontex span[style*="#fff"],
html[data-tk-theme="light"] #primary.tk-gd.tk-page-aices .crm-section p[style*="#fff"] {
    color: #0A0D0F !important;
}

/* the partner-name column ships #F98E1D, 2.17:1 on the light ground; the
   same hue darkened to 4.5:1 keeps it recognisable */
html[data-tk-theme="light"] #primary.tk-gd.tk-page-aices p[style*="F98E1D"] {
    color: #A55A00 !important;
}

/* The struck-through original price on this page's package cards carries
   style="color:#fff !important" in the markup. A style-attribute !important
   outranks author !important in the cascade, so no selector can answer it.
   -webkit-text-fill-color is not set inline and decides how the glyphs are
   painted, so it is the only lever that does not require editing the markup
   (which would change dark mode too). */
html[data-tk-theme="light"] #primary.tk-gd.tk-page-aices .tk-original-price,
html[data-tk-theme="light"] #primary.tk-gd.tk-page-aices .tk-original-price span {
    -webkit-text-fill-color: #626B75;
}

/* ==========================================================================
   WEB DESIGN & DEVELOPMENT — targeted corrections
   ==========================================================================
   Scoped to .tk-page-webdesign, the class only that view carries, so nothing
   here can reach another service page. Light mode only; dark mode already
   renders both of these correctly and is untouched.
   ========================================================================== */

/* ---- Hero accent words -------------------------------------------------- */
/* The heading ships the accent words already wrapped:
     <h1>We Build <span>websites</span> that Turn your visitors into
         <span>Customers</span></h1>
   In dark mode those spans are var(--primary-color) (#0073FC). In light mode
   the shared `#primary.tk-gd span` body-ink rule above was overriding them to
   #2B3138, so the accent was lost. This restores it.

   The tone is var(--primary-color-dark) (#005BC7) — the site's existing
   darker brand blue, not a new colour. Plain #0073FC measures 2.54:1 on the
   light hero, under even the 3:1 large-text floor; #005BC7 is the same hue at
   4.6:1, and is already what every other accent word on this page uses.
   Colour only: no size, weight, spacing or wording change. */
html[data-tk-theme="light"] #primary.tk-gd.tk-page-webdesign section.service_main .service_desc h1 span {
    color: var(--primary-color-dark, #005BC7);
}

/* ---- Comparison table: invisible check marks ---------------------------- */
/* The table paints its ticks as background-image data-URI SVGs:
     .yes                    -> fill='%23ffffff'   (white, for the dark page)
     tr td.yes:last-child    -> fill='%2334bb46'   (green, Business Arise col)
   So a "yes" in the Do It Yourself / Digital Agency columns rendered a WHITE
   tick, which disappears on the light ground. This reuses the exact green SVG
   already defined for the last column — same icon, same path, same existing
   green — so every positive tick matches. The .no crosses are not touched. */
html[data-tk-theme="light"] #primary.tk-gd.tk-page-webdesign .service_table td.yes {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2334bb46' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   WEBSITE PORTFOLIO  (/portfolio/portfolio-website)
   ==========================================================================
   portfolioweb.blade.php. Its wrapper carries `tk-portfolio`, a hook used by
   nothing else, so every rule here is unreachable from any other page. The
   review blocks lower on the page were already light via
   tbtk-testimonials-redesign.css and are deliberately not restyled here.

   Light mode only — dark mode keeps the original portfolio design.

   The portfolio thumbnails are NOT touched: no filter, no opacity, no
   overlay, no background change on .tbtk-poster / .image-wrapper /
   .tk-image-set / .featured-img. Many of the screenshots are of dark websites
   and that is intentional media, not a theming bug.
   ========================================================================== */

/* ---- Page ground and the one dark section ------------------------------ */
/* `section.light.first_section` paints #1d1c1c, and the layout paints
   body{background:#000} behind the wrapper, so the whole portfolio read as a
   dark slab in light mode. */
html[data-tk-theme="light"] #primary.tk-portfolio {
    background: #F3F6F8;
}

/* portfolioweb.blade.php's own style block declares
     .light.first_section { background:#1d1c1c !important }
   That existing !important is the only reason one is needed here. */
html[data-tk-theme="light"] #primary.tk-portfolio section.light.first_section {
    background-color: #F3F6F8 !important;
    background-image: none !important;
}

/* ---- Trust banner ------------------------------------------------------ */
/* "Rated #1 for Websites / Trustpilot / Trusted by 10,000+ Brands" is not
   markup — it is a single image, assets/img/trust.webp (1218x153, 78%
   transparent). Its lettering is painted white for the black page, so on the
   light ground the words disappeared while the green Trustpilot stars stayed
   visible. No selector can reach pixels, so light mode points the same <img>
   at a light-theme copy of that artwork: assets/img/trust-light.webp, where
   only the near-neutral white lettering was mapped to the theme's ink and
   every coloured pixel — the Trustpilot green stars and logo — is unchanged.
   The original file is untouched and is still what dark mode renders. */
html[data-tk-theme="light"] #primary.tk-portfolio section.first_section img[src$="trust.webp"] {
    content: url("../img/trust-light.webp");
}

/* ---- Type -------------------------------------------------------------- */
html[data-tk-theme="light"] #primary.tk-portfolio section.first_section h1,
html[data-tk-theme="light"] #primary.tk-portfolio section.first_section h2,
html[data-tk-theme="light"] #primary.tk-portfolio section.first_section h3 {
    color: #0A0D0F;
}

/* The domain caption chip under each thumbnail. Its declarations used to sit
   on the element as style="background:#171717 !important", which no
   stylesheet can override; they now live in .portfolio-item-caption in the
   page's own style block, so light mode can re-surface it here. The chip is
   caption chrome, not the thumbnail — the screenshot above it is untouched. */
html[data-tk-theme="light"] #primary.tk-portfolio .portfolio-item-caption {
    background: #FFFFFF;
    color: #0A0D0F;
}

/* "Visit Website" ships var(--primary-color); #0073FC is 2.76:1 on the light
   card, so it takes the site's darker brand blue like other accent text. */
html[data-tk-theme="light"] #primary.tk-portfolio .portfolio-visit-link {
    color: var(--primary-color-dark, #005BC7);
}

/* the card body behind the caption/link block */
html[data-tk-theme="light"] #primary.tk-portfolio #portfolio .tk-product-info {
    background: #FFFFFF;
}

/* ---- Category filter pills --------------------------------------------- */
/* Inactive pills ship white ink on a transparent fill for the dark page. The
   active pill already uses the brand blue with a white label and is left
   exactly as it is, so the selected state still reads. No change to the
   markup, the data-filter values or the filtering script. */
html[data-tk-theme="light"] #primary.tk-portfolio #industries-filter li.sortbutton {
    color: #2B3138;
}

html[data-tk-theme="light"] #primary.tk-portfolio #industries-filter li.sortbutton:hover {
    color: #0A0D0F;
    background-color: rgba(0, 115, 252, 0.08);
}

html[data-tk-theme="light"] #primary.tk-portfolio #industries-filter li.sortbutton.active {
    color: #FFFFFF;
}

/* ==========================================================================
   LOGO DESIGN PORTFOLIO  (/portfolio/portfolio-logo-design)
   ==========================================================================
   portfoliologodesign.blade.php. Its wrapper carries `tk-portfolio-logo`, a
   hook used by nothing else, so every rule here is unreachable from any other
   page. Same approach as the WEBSITE PORTFOLIO block above.

   Light mode only — dark mode keeps the original design untouched.

   The logo artwork is NOT touched: no filter, no opacity, no overlay and no
   background change on .service-preview-image. Most of these logos are drawn
   for dark backgrounds and that is intentional media, not a theming bug. The
   grid, the slider and the markup are unchanged.

   The review blocks lower on this page already render light via
   tbtk-testimonials-redesign.css and are deliberately not restyled here.
   ========================================================================== */

/* ---- Page ground ------------------------------------------------------- */
/* The layout paints body{background:#000} and .content-area{background:#0b0b0b}
   in both themes, and portfoliologodesign.blade.php declared
   .light.first_section{background:#1d1c1c !important} — so the whole hero read
   as a dark slab in light mode. That page rule is now gated to dark, and this
   wrapper supplies the light ground. */
html[data-tk-theme="light"] #primary.tk-portfolio-logo {
    background: #F3F6F8;
}

html[data-tk-theme="light"] #primary.tk-portfolio-logo section.light.first_section {
    background-color: #F3F6F8;
    background-image: none;
}

/* .content-area is the wrapper outside <main>; on this page the review stack
   sits in it directly, so its #0b0b0b ground can show through between the two
   opaque blocks. */
html[data-tk-theme="light"] body.page .content-area:has(> main#primary.tk-portfolio-logo) {
    background: #F3F6F8;
}

/* ---- Type -------------------------------------------------------------- */
/* "RATED #1 FOR LOGO DESIGN" ships .main-title's #f4f4f4 for the black page. */
html[data-tk-theme="light"] #primary.tk-portfolio-logo section.first_section h1,
html[data-tk-theme="light"] #primary.tk-portfolio-logo section.first_section h2,
html[data-tk-theme="light"] #primary.tk-portfolio-logo section.first_section h3 {
    color: #0A0D0F;
}

html[data-tk-theme="light"] #primary.tk-portfolio-logo section.first_section p {
    color: #4A535D;
}

/* ---- Buttons ----------------------------------------------------------- */
/* "Buy Logo" and "Free Quote" already ship the brand blue with a white label —
   the same primary button the sibling /portfolio/portfolio-website page uses on
   light — so their fill and label are deliberately left alone. Only the focus
   ring is added, since the dark page never needed one to be visible. */
html[data-tk-theme="light"] #primary.tk-portfolio-logo .button.main-green:focus-visible {
    outline: 2px solid var(--primary-color-dark, #005BC7);
    outline-offset: 2px;
}