/*
  Shared H2WOAH visual system.
  This file intentionally overrides page-level embedded styles so service,
  location, project, blog, legal, and homepage templates read as one site
  without changing SEO titles, descriptions, schema, or heading content.
*/

:root {
  --blue-dark: #071c2c !important;
  --blue-mid: #117895 !important;
  --blue-bright: #22b8d6 !important;
  --blue-light: #dff5fa !important;
  --blue-pale: #f3fafc !important;
  --accent: #58e0d2 !important;
  --accent-deep: #0f8f91 !important;
  --accent-soft: #d8fbf6 !important;
  --white: #ffffff !important;
  --gray-100: #f6f9fb !important;
  --gray-200: #dfe9ef !important;
  --gray-400: #708293 !important;
  --gray-600: #536477 !important;
  --gray-800: #1d2d3d !important;
  --text: #102338 !important;
  --radius: 999px !important;
  --radius-lg: 14px !important;
  --radius-xl: 18px !important;
  --shadow: 0 10px 30px rgba(7, 28, 44, 0.08) !important;
  --shadow-lg: 0 18px 54px rgba(7, 28, 44, 0.16) !important;
}

html {
  background: #f6f9fb;
}

body {
  color: var(--text) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(34, 184, 214, 0.12), transparent 30rem),
    linear-gradient(180deg, #ffffff 0%, #f6f9fb 100%) !important;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  color: #123653 !important;
  letter-spacing: 0 !important;
}

h1 {
  font-weight: 900 !important;
  max-width: 980px;
}

h2 {
  font-weight: 850 !important;
}

p,
li {
  color: var(--gray-600) !important;
}

a {
  color: #0f6f88;
}

.topbar,
.nav,
.footer,
footer {
  background: #071c2c !important;
}

.nav {
  box-shadow: 0 8px 28px rgba(7, 28, 44, 0.14) !important;
}

.brand-header {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    #071c2c !important;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
  background: rgba(34, 184, 214, 0.16) !important;
  color: #fff !important;
}

.dropdown {
  border: 1px solid rgba(16, 35, 56, 0.1) !important;
  border-radius: 14px !important;
}

.dropdown a:hover,
.dropdown a:focus-visible {
  background: var(--blue-pale) !important;
  color: #0f6f88 !important;
}

.btn,
a.btn,
button.btn {
  border-radius: 999px !important;
  letter-spacing: 0.04em !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.btn-primary,
a.btn-primary {
  background: linear-gradient(135deg, #58e0d2 0%, #1fb6cf 100%) !important;
  color: #062033 !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  box-shadow: 0 12px 30px rgba(31, 182, 207, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

.btn-primary:hover,
a.btn-primary:hover {
  background: linear-gradient(135deg, #8bf1e7 0%, #24c3dd 100%) !important;
  color: #062033 !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(31, 182, 207, 0.36) !important;
}

.btn-accent,
a.btn-accent {
  background: #ffffff !important;
  color: #071c2c !important;
  border: 1px solid rgba(255, 255, 255, 0.66) !important;
}

.btn-outline,
.btn-secondary,
a.btn-outline,
a.btn-secondary {
  color: #123653 !important;
  border-color: rgba(18, 54, 83, 0.22) !important;
  background: rgba(255, 255, 255, 0.74) !important;
}

.btn-outline:hover,
.btn-secondary:hover,
a.btn-outline:hover,
a.btn-secondary:hover {
  background: #eef8fb !important;
  color: #0f6f88 !important;
}

.hero .btn-outline,
.hero .btn-secondary,
.page-hero .btn-outline,
.page-hero .btn-secondary,
.blog-hero .btn-outline,
.blog-hero .btn-secondary,
.project-hero .btn-outline,
.project-hero .btn-secondary,
.area-section .btn-outline,
.area-section .btn-secondary,
.final-cta .btn-outline,
.final-cta .btn-secondary,
.mobile-cta .btn-outline,
.mobile-cta .btn-secondary {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.46) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.hero .btn-outline:hover,
.hero .btn-secondary:hover,
.page-hero .btn-outline:hover,
.page-hero .btn-secondary:hover,
.blog-hero .btn-outline:hover,
.blog-hero .btn-secondary:hover,
.project-hero .btn-outline:hover,
.project-hero .btn-secondary:hover,
.area-section .btn-outline:hover,
.area-section .btn-secondary:hover,
.final-cta .btn-outline:hover,
.final-cta .btn-secondary:hover,
.mobile-cta .btn-outline:hover,
.mobile-cta .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.hero,
.page-hero,
.blog-hero,
.project-hero,
.area-section,
.final-cta,
.highlight-strip {
  background:
    linear-gradient(135deg, rgba(34, 184, 214, 0.18) 0%, rgba(34, 184, 214, 0) 42%),
    linear-gradient(135deg, #071c2c 0%, #0d4051 100%) !important;
}

.hero h1,
.hero h2,
.hero h3,
.hero p,
.hero li,
.hero a:not(.btn),
.page-hero h1,
.page-hero h2,
.page-hero h3,
.page-hero p,
.page-hero li,
.page-hero a:not(.btn),
.blog-hero h1,
.blog-hero h2,
.blog-hero h3,
.blog-hero p,
.project-hero h1,
.project-hero h2,
.project-hero h3,
.project-hero p,
.project-hero li,
.project-hero a:not(.btn),
.area-section h2,
.area-section h3,
.area-section p,
.area-section li,
.area-section a:not(.btn),
.final-cta h2,
.final-cta h3,
.final-cta p,
.final-cta a:not(.btn),
.highlight-strip p {
  color: #ffffff !important;
}

.hero h1,
.page-hero h1,
.blog-hero h1,
.project-hero h1 {
  text-wrap: balance;
}

.hero-sub,
.page-hero p,
.blog-hero p,
.project-hero p,
.final-cta p,
.area-section p,
.hero li,
.page-hero li,
.project-hero li,
.area-section li {
  color: rgba(255, 255, 255, 0.78) !important;
}

.topbar *,
.nav *,
.footer *,
footer * {
  color: rgba(255, 255, 255, 0.82) !important;
}

.topbar a,
.topbar strong,
.nav a,
.nav button,
.footer h2,
.footer h3,
.footer strong,
footer h2,
footer h3,
footer strong {
  color: #ffffff !important;
}

.nav .dropdown a,
.nav .dropdown a:visited {
  color: #123653 !important;
}

.nav .dropdown a:hover,
.nav .dropdown a:focus-visible {
  color: #0f6f88 !important;
}

.section-title h2,
.content h2,
.content h3,
.blog-content h2,
.blog-content h3,
.project-content h2,
.project-content h3,
.service-card h3,
.blog-card h3,
.gallery-card h3,
.sidebar-card h3,
.faq-q,
.why-list-text h4,
.ba-card-caption h4 {
  color: #123653 !important;
}

.section-title p,
.content p,
.blog-content p,
.project-content p,
.service-card p,
.blog-card p,
.gallery-card p,
.sidebar-card p,
.faq-a,
.why-list-text p,
.ba-card-caption p,
[class*="card"] p {
  color: #586a7d !important;
}

.section-eyebrow,
.blog-cat,
.related-post-cat,
.related-project-cat,
.project-eyebrow,
.blog-eyebrow {
  color: #0f8f91 !important;
  letter-spacing: 0.14em !important;
}

.hero .section-eyebrow,
.page-hero .section-eyebrow,
.blog-hero .blog-eyebrow,
.project-hero .project-eyebrow {
  color: rgba(255, 255, 255, 0.68) !important;
}

.brand-strip,
.trust-bar,
.proof-strip,
.mobile-cta,
.sidebar-cta,
.project-sidebar .sidebar-cta,
.callout-dark,
.quote-strip,
.cta-strip,
section[style*="#071C2C"],
section[style*="#071c2c"],
section[style*="#0d2b52"],
section[style*="#0D2B52"],
section[style*="var(--blue-dark)"],
section[style*="linear-gradient(135deg,#071C2C"],
section[style*="linear-gradient(135deg, #071C2C"] {
  color: #ffffff !important;
}

.brand-strip :is(h1, h2, h3, h4, p, li, span, strong, a:not(.btn)),
.trust-bar :is(h1, h2, h3, h4, p, li, span, strong, a:not(.btn)),
.proof-strip :is(h1, h2, h3, h4, p, li, span, strong, a:not(.btn)),
.mobile-cta :is(h1, h2, h3, h4, p, li, span, strong, a:not(.btn)),
.sidebar-cta :is(h1, h2, h3, h4, p, li, span, strong, a:not(.btn)),
.project-sidebar .sidebar-cta :is(h1, h2, h3, h4, p, li, span, strong, a:not(.btn)),
.callout-dark :is(h1, h2, h3, h4, p, li, span, strong, a:not(.btn)),
.quote-strip :is(h1, h2, h3, h4, p, li, span, strong, a:not(.btn)),
.cta-strip :is(h1, h2, h3, h4, p, li, span, strong, a:not(.btn)),
section[style*="#071C2C"] > .container :is(h1, h2, h3, h4, p, li, span, strong, a:not(.btn)),
section[style*="#071c2c"] > .container :is(h1, h2, h3, h4, p, li, span, strong, a:not(.btn)),
section[style*="#0d2b52"] > .container :is(h1, h2, h3, h4, p, li, span, strong, a:not(.btn)),
section[style*="#0D2B52"] > .container :is(h1, h2, h3, h4, p, li, span, strong, a:not(.btn)),
section[style*="var(--blue-dark)"] > .container :is(h1, h2, h3, h4, p, li, span, strong, a:not(.btn)),
section[style*="linear-gradient(135deg,#071C2C"] > .container :is(h1, h2, h3, h4, p, li, span, strong, a:not(.btn)),
section[style*="linear-gradient(135deg, #071C2C"] > .container :is(h1, h2, h3, h4, p, li, span, strong, a:not(.btn)) {
  color: #ffffff !important;
}

.hero :is(small, span, strong),
.page-hero :is(small, span, strong),
.blog-hero :is(small, span, strong),
.project-hero :is(small, span, strong),
.area-section :is(small, span, strong),
.final-cta :is(small, span, strong),
.highlight-strip :is(small, span, strong) {
  color: #ffffff !important;
}

.brand-strip p,
.trust-bar p,
.proof-strip p,
.mobile-cta p,
.sidebar-cta p,
.project-sidebar .sidebar-cta p,
.callout-dark p,
.quote-strip p,
.cta-strip p,
section[style*="#071C2C"] > .container p,
section[style*="#071c2c"] > .container p,
section[style*="#0d2b52"] > .container p,
section[style*="#0D2B52"] > .container p,
section[style*="var(--blue-dark)"] > .container p {
  color: rgba(255, 255, 255, 0.86) !important;
}

.service-card,
.review-card,
.blog-card,
.faq-item,
.sidebar-card,
.project-sidebar .sidebar-card,
.gallery-card,
.ba-card,
.panel,
[class*="card"] {
  border-color: rgba(16, 35, 56, 0.1) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow) !important;
}

.service-card:hover,
.review-card:hover,
.blog-card:hover,
.gallery-card:hover,
.ba-card:hover {
  box-shadow: var(--shadow-lg) !important;
}

.service-icon,
.why-list-icon,
.faq-icon,
.review-avatar {
  background: linear-gradient(135deg, #dff5fa, #ffffff) !important;
  color: #0f6f88 !important;
}

.review-avatar {
  color: #071c2c !important;
}

.stars,
.stars-sm,
.review-stars {
  color: #18a8b5 !important;
}

.reviews-section,
.services-section,
.gallery-section,
.faq-section,
section[style*="background:#f5f9ff"],
section[style*="background:var(--gray-100)"] {
  background: #f6f9fb !important;
}

.review-carousel .review-card,
.reviews-section .review-card {
  background: #ffffff !important;
}

.review-carousel {
  animation-duration: 276s !important;
}

.callout,
.callout-blue,
.callout-project,
[style*="background:var(--blue-pale)"],
[style*="background:#f0f6ff"] {
  background: #eef8fb !important;
  border-color: rgba(34, 184, 214, 0.34) !important;
}

.final-cta {
  position: relative;
}

.final-cta::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 6px;
  background: linear-gradient(90deg, #22b8d6, #58e0d2, #ffffff);
  opacity: 0.9;
}

.mobile-cta {
  background: rgba(7, 28, 44, 0.97) !important;
}

@media (max-width: 767.98px) {
  h1,
  h2,
  h3 {
    text-wrap: balance;
  }

  .btn,
  a.btn {
    letter-spacing: 0.03em !important;
  }
}