/* TTDigitals visual-integrity layer, 2026-10-24.
   This is deliberately loaded last. It standardises typography and restores
   readable foreground/background pairs without changing page semantics. */
:root {
  --tt-vi-ink: #10243a;
  --tt-vi-copy: #334a60;
  --tt-vi-muted: #50657a;
  --tt-vi-navy: #0d2740;
  --tt-vi-navy-2: #173b59;
  --tt-vi-paper: #fff;
  --tt-vi-wash: #f4f7fa;
  --tt-vi-line: #d5e0e9;
  --tt-vi-accent: #a93610;
  --tt-vi-accent-bright: #ffb697;
  --tt-vi-focus: #ff7a45;
  --tt-vi-font: Inter, Manrope, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html { -webkit-text-size-adjust: 100%; }
body,
button,
input,
select,
textarea { font-family: var(--tt-vi-font) !important; }
body { color: var(--tt-vi-ink); }
main :is(p, li, dd, blockquote, figcaption) { line-height: 1.7; }
main :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--tt-vi-font) !important;
  font-weight: 750;
  font-synthesis: none;
  text-wrap: balance;
}
main h1 { line-height: 1.02; letter-spacing: -.045em; }
main h2 { line-height: 1.08; letter-spacing: -.035em; }
main h3 { line-height: 1.24; letter-spacing: -.015em; }

/* Dark surfaces: the component owns a dark background, so all primary copy
   receives an explicit accessible foreground instead of inherited colours. */
:is(.premium-agency, body) :is(
  .hero,
  .page-hero,
  .service-hero,
  .home-brief-v72,
  .home-conversion-proof,
  .home-video,
  .home-local-proof,
  .home-process,
  .home-track-record,
  .service-choice,
  .service-experience,
  .service-context-v74,
  .service-process-v74,
  .service-clients-v74,
  .recommended-services,
  .specialist-journey,
  .founder-spotlight,
  .tt-city-proof-inner,
  .team-proof,
  .testimonials,
  .cta
) { color: #fff !important; }

:is(.premium-agency, body) :is(
  .hero,
  .page-hero,
  .service-hero,
  .home-brief-v72,
  .home-conversion-proof,
  .home-video,
  .home-local-proof,
  .home-process,
  .home-track-record,
  .service-choice,
  .service-experience,
  .service-context-v74,
  .service-process-v74,
  .service-clients-v74,
  .recommended-services,
  .specialist-journey,
  .founder-spotlight,
  .tt-city-proof-inner,
  .team-proof,
  .testimonials,
  .cta
) :is(h1, h2, h3, h4, h5, h6, strong, summary) { color: #fff !important; }

:is(.premium-agency, body) :is(
  .hero,
  .page-hero,
  .service-hero,
  .home-brief-v72,
  .home-conversion-proof,
  .home-video,
  .home-local-proof,
  .home-process,
  .home-track-record,
  .service-choice,
  .service-experience,
  .service-context-v74,
  .service-process-v74,
  .service-clients-v74,
  .recommended-services,
  .specialist-journey,
  .founder-spotlight,
  .tt-city-proof-inner,
  .team-proof,
  .testimonials,
  .cta
) :is(p, li, dd, blockquote, figcaption) { color: #dce8f2 !important; }

:is(.premium-agency, body) :is(
  .hero,
  .page-hero,
  .service-hero,
  .home-brief-v72,
  .home-conversion-proof,
  .home-video,
  .home-local-proof,
  .home-process,
  .home-track-record,
  .service-choice,
  .service-experience,
  .service-context-v74,
  .service-process-v74,
  .service-clients-v74,
  .recommended-services,
  .specialist-journey,
  .founder-spotlight,
  .tt-city-proof-inner,
  .team-proof,
  .testimonials,
  .cta,
  .home-clients-v72
) .eyebrow { color: var(--tt-vi-accent-bright) !important; }

/* Light cards nested inside dark sections must win over the dark-surface rule. */
main :is(
  .service-experience__card,
  .recommended-card,
  .home-process-grid > article,
  .process-grid > article,
  .proof-grid > article,
  .team-grid > article,
  .home-decision-grid > article,
  .home-path-grid > article,
  .home-market-grid > article,
  .content-card,
  .topic-card,
  .location-card,
  .city-card,
  .industry-card,
  .case-card,
  .contact-form,
  .faq details,
  .tt-faq-list details
) {
  background-color: #fff !important;
  color: var(--tt-vi-ink) !important;
}

main :is(
  .service-experience__card,
  .recommended-card,
  .home-process-grid > article,
  .process-grid > article,
  .proof-grid > article,
  .team-grid > article,
  .home-decision-grid > article,
  .home-path-grid > article,
  .home-market-grid > article,
  .content-card,
  .topic-card,
  .location-card,
  .city-card,
  .industry-card,
  .case-card,
  .contact-form,
  .faq details,
  .tt-faq-list details
) :is(h2, h3, h4, h5, h6, strong, summary, a) { color: var(--tt-vi-ink) !important; }

main :is(
  .service-experience__card,
  .recommended-card,
  .home-process-grid > article,
  .process-grid > article,
  .proof-grid > article,
  .team-grid > article,
  .home-decision-grid > article,
  .home-path-grid > article,
  .home-market-grid > article,
  .content-card,
  .topic-card,
  .location-card,
  .city-card,
  .industry-card,
  .case-card,
  .contact-form,
  .faq details,
  .tt-faq-list details
) :is(p, li, dd, figcaption) { color: var(--tt-vi-copy) !important; }

/* Some legacy templates qualify their dark-section rules with body classes.
   Match that specificity so nested white cards cannot inherit white copy. */
body.premium-agency main .service-experience .service-experience__card,
body.premium-agency main .recommended-services .recommended-card {
  background: #fff !important;
  color: var(--tt-vi-ink) !important;
}
body.premium-agency main .service-experience .service-experience__card :is(h2, h3, h4, p, li, strong, a, span),
body.premium-agency main .recommended-services .recommended-card :is(h2, h3, h4, p, li, strong, a, span, b),
body main .recommended-services .recommended-card :is(h2, h3, h4, p, li, strong, a, span, b) {
  color: var(--tt-vi-ink) !important;
}
body.premium-agency main .recommended-services .recommended-card b,
body main .recommended-services .recommended-card b { color: #a93610 !important; }

main .recommended-card :is(span, b) { color: var(--tt-vi-ink) !important; }
main .recommended-card b { color: #a93610 !important; }
main .service-experience__card .eyebrow,
main :is(.content-card, .topic-card, .location-card, .city-card, .industry-card, .case-card) .eyebrow {
  color: #a93610 !important;
}

/* The service-page action panel is a pale surface nested inside a dark section.
   Prevent the parent section's white copy rule from washing out its paragraph. */
body.premium-agency main .service-experience .service-experience__actions,
body main .service-experience .service-experience__actions {
  background: #eaf1f7 !important;
  color: var(--tt-vi-ink) !important;
}
body.premium-agency main .service-experience .service-experience__actions :is(p, h2, h3, h4, li, span, strong),
body main .service-experience .service-experience__actions :is(p, h2, h3, h4, li, span, strong) {
  color: var(--tt-vi-ink) !important;
}

/* Image-led service catalogue cards remain intentionally dark. */
.premium-agency.page-services .service-grid .service-card,
.premium-agency.page-services .service-grid .service-card :is(h2, h3, h4, p, span, strong, a),
.premium-agency.page-home .service-grid .service-card,
.premium-agency.page-home .service-grid .service-card :is(h2, h3, h4, p, span, strong, a) {
  color: #fff !important;
}
.premium-agency :is(.service-grid .service-card) .eyebrow { color: #ffd2bf !important; }

/* Accent text and controls: use a darker orange where orange is text, and a
   darker fill where white text sits on orange. This passes normal-text AA. */
main :is(.coverage, .related-resources, .article-link-cluster, .topic-carousel, .split-story) .eyebrow,
main .eyebrow { color: #a93610 !important; }
main :is(.button, .tt-link-primary, button[type="submit"], input[type="submit"]) {
  background-color: #a93610 !important;
  border-color: #a93610 !important;
  color: #fff !important;
}
body main a.button,
body main button.button,
body main .tt-link-primary,
body main button[type="submit"],
body main input[type="submit"] {
  background-color: #a93610 !important;
  border-color: #a93610 !important;
  color: #fff !important;
}
body.premium-agency main a.button,
body.premium-agency main button.button,
body.premium-agency main .tt-link-primary,
body.premium-agency main button[type="submit"],
body.premium-agency main input[type="submit"] {
  background: #a93610 !important;
  border-color: #a93610 !important;
  color: #fff !important;
}
main :is(.button, .tt-link-primary, button[type="submit"], input[type="submit"]):is(:hover, :focus-visible) {
  background-color: #852a0c !important;
  border-color: #852a0c !important;
  color: #fff !important;
}
.founder-identity,
.founder-identity :is(p, span, strong) { color: #fff !important; }
body main .founder-identity,
body main .founder-identity :is(p, span, strong, a) { color: #fff !important; }

/* Header and footer are global landmarks and must remain consistent. */
header.nav,
header.nav :is(nav, details, summary) { color: var(--tt-vi-ink) !important; }
header.nav :is(a, summary) { color: var(--tt-vi-ink) !important; }
header.nav .services-menu-panel { background: #fff !important; color: var(--tt-vi-ink) !important; }
footer { background: #071a2e !important; color: #dce8f2 !important; }
footer :is(h2, h3, h4, summary, strong) { color: #fff !important; }
footer :is(p, address, span) { color: #c5d5e3 !important; }
footer a { color: #e9f2f8 !important; }
footer a:is(:hover, :focus-visible) { color: #ffbd9f !important; }
footer .footer-kicker,
footer .footer-social-heading { color: #ffbd9f !important; }
footer .footer-logo { background: #fff !important; }

/* Inputs and accordion controls stay readable regardless of the parent theme. */
main :is(input, select, textarea) {
  background: #fff !important;
  color: var(--tt-vi-ink) !important;
  border-color: #9fb0bf !important;
}
main :is(input, textarea)::placeholder { color: #66798c !important; opacity: 1; }
:is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--tt-vi-focus) !important;
  outline-offset: 3px !important;
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  main h1 { font-size: clamp(2.25rem, 10vw, 3.2rem) !important; }
  main h2 { font-size: clamp(1.8rem, 7.8vw, 2.5rem) !important; }
  main h3 { font-size: clamp(1.08rem, 5vw, 1.32rem); }
  main :is(p, li, dd) { line-height: 1.68; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}