/**
 * Site-wide site-wide typography, buttons, and content rhythm.
 * Imported in globals.css; also copied to public/assets/css/cws-ui-theme.css
 * (loaded after style.css in layout.tsx). Re-copy when you edit this file.
 */

:root {
  --cws-ui-text: #1d1d1f;
  --cws-ui-text-secondary: #6e6e73;
  --cws-ui-text-tertiary: #86868b;
  --cws-ui-link: #0071e3;
  --cws-ui-link-hover: #0077ed;
  --cws-ui-bg: #f5f5f7;
  --cws-ui-surface: #ffffff;
  --cws-ui-border: rgba(0, 0, 0, 0.08);
  --cws-ui-btn-fill: #1d1d1f;
  --cws-ui-btn-fill-hover: #333336;
  --cws-ui-btn-blue: #1d1d1f;
  --cws-ui-btn-blue-hover: #333336;
  --cws-ui-radius-pill: 980px;
  --cws-ui-text-base: 1.0625rem;
  --cws-ui-text-small: 0.875rem;
  --cws-ui-text-caption: 0.75rem;
  --cws-ui-leading: 1.47059;
  --cws-ui-tracking-tight: -0.022em;
  --cws-ui-tracking-headline: -0.035em;

  /* Align legacy tokens */
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);
  --font-display-tall: var(--font-body);
}

/* —— Base typography —— */
body {
  font-family: var(--font-body) !important;
  font-size: var(--cws-ui-text-base);
  line-height: var(--cws-ui-leading);
  color: var(--cws-ui-text) !important;
  letter-spacing: -0.011em;
}

main.site-main {
  color: var(--cws-ui-text);
}

p,
.section-description,
.section-subtitle,
.corp-section p,
.service-card p,
.why-card p,
.process-card p,
.testimonial-card p,
.blog-card p,
.lead,
.text-muted {
  font-size: var(--cws-ui-text-base);
  line-height: var(--cws-ui-leading);
  color: var(--cws-ui-text-secondary);
}

small,
.form-text,
.caption {
  font-size: var(--cws-ui-text-small);
  color: var(--cws-ui-text-tertiary);
}

a:not(.btn):not(.home-hero__btn):not(.home-btn):not(.nav-link):not(.social-link):not(
    .footer-social-link
  ):not(.home-marquee-pill):not(.topbar-link):not(.portfolio-showcase__view-all) {
  color: var(--cws-ui-link);
  text-decoration: none;
}

a:not(.btn):not(.home-hero__btn):not(.home-btn):not(.nav-link):not(.social-link):not(
    .footer-social-link
  ):not(.home-marquee-pill):not(.topbar-link):not(.promo-offer-btn):not(
    .portfolio-showcase__view-all
  ):not(.portfolio-showcase__nav):hover,
a:not(.btn):not(.home-hero__btn):not(.home-btn):not(.nav-link):not(.social-link):not(
    .footer-social-link
  ):not(.home-marquee-pill):not(.topbar-link):not(.promo-offer-btn):not(
    .portfolio-showcase__view-all
  ):not(.portfolio-showcase__nav):focus-visible {
  text-decoration: none !important;
  color: var(--cws-ui-link-hover);
}

/* CTA buttons — never show link underline on hover */
.home-btn,
.home-btn:hover,
.home-btn:focus-visible,
.home-hero__btn,
.home-hero__btn:hover,
.home-hero__btn:focus-visible,
.home-about__cta,
.home-about__cta:hover,
.home-about__cta:focus-visible,
.btn,
.btn:hover,
.btn:focus-visible,
.btn-cta,
.btn-cta:hover,
.btn-cta:focus-visible,
/* Promo bar — override global grey `p` text on green strip */
.promo-offer-bar .promo-offer-text,
.promo-offer-bar .promo-offer-text span {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.promo-offer-bar .promo-offer-text__icon {
  color: #ffe566 !important;
}

.promo-offer-btn,
.promo-offer-btn:hover,
.promo-offer-btn:focus-visible,
.portfolio-showcase__view-all,
.portfolio-showcase__view-all:hover,
.portfolio-showcase__nav,
.portfolio-showcase__nav:hover,
.portfolio-capsule__tab,
.portfolio-capsule__tab:hover,
.portfolio-capsule__tab:focus-visible {
  text-decoration: none !important;
}

/* —— Headings (single SF stack, semibold weights) —— */
h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.page-header-content h1,
.page-header-title,
.hero-pro-title,
.home-page .home-section-head h2,
.home-section-head h2,
.corp-section-head h2 {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  color: var(--cws-ui-text) !important;
  letter-spacing: var(--cws-ui-tracking-headline);
  line-height: 1.08;
}

/* Hero / homepage display titles only */
.home-hero__title,
.hero-pro-title {
  font-size: clamp(2rem, 5vw, 3.25rem) !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
}

/* Default content heading scale (blog, pages, services, etc.) */
h1 {
  font-size: 1.3125rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.page-header-content h1,
.page-header-title {
  font-size: 1.125rem !important;
  line-height: 1.3 !important;
}

h2 {
  font-size: 1.1875rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

.section-title,
.home-page .home-section-head h2,
.home-section-head h2,
.corp-section-head h2 {
  font-size: clamp(1.45rem, 2.6vw, 1.875rem) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

h3,
.service-card h3,
.why-card h3,
.process-card h3,
.home-service-card h3,
.home-portfolio-item__name {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  letter-spacing: var(--cws-ui-tracking-tight);
  line-height: 1.3;
  color: var(--cws-ui-text) !important;
}

h4 {
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  letter-spacing: var(--cws-ui-tracking-tight);
  line-height: 1.35;
  color: var(--cws-ui-text) !important;
}

h5 {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: var(--cws-ui-tracking-tight);
  line-height: 1.35;
  color: var(--cws-ui-text) !important;
}

h6 {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: var(--cws-ui-tracking-tight);
  line-height: 1.35;
  color: var(--cws-ui-text) !important;
}

.home-page .home-section-head h2::after,
.section-title::after,
.services-section .section-title::after,
.testimonials-section .section-title::after,
.why-section-home .section-title::after {
  display: none !important;
}

.section-subtitle,
.home-page .home-section-head p,
.home-section-head p,
.corp-section-head p {
  font-size: var(--cws-ui-text-base) !important;
  line-height: var(--cws-ui-leading) !important;
  color: var(--cws-ui-text-secondary) !important;
  font-weight: 400 !important;
  max-width: 42rem;
}

/* Eyebrows / badges — subtle pill */
.section-badge,
.home-eyebrow,
.home-page .home-eyebrow {
  font-family: var(--font-body) !important;
  font-size: var(--cws-ui-text-caption) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: var(--cws-ui-text-secondary) !important;
  background: rgba(0, 0, 0, 0.05) !important;
  border: none !important;
  padding: 4px 10px !important;
  border-radius: var(--cws-ui-radius-pill) !important;
}

.home-page .home-eyebrow .dot {
  display: none;
}

/* —— Buttons — unified pill system —— */
.btn,
.btn-primary-custom,
.btn-green-custom,
.btn-accent-custom,
.btn-cta,
.btn-cta-navbar,
.home-btn--primary,
.home-hero__btn--primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem;
  font-family: var(--font-body) !important;
  font-size: var(--cws-ui-text-base) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  line-height: 1.2 !important;
  padding: 0.55rem 1.35rem !important;
  border-radius: var(--cws-ui-radius-pill) !important;
  border: none !important;
  background: var(--cws-ui-btn-fill) !important;
  color: #fff !important;
  box-shadow: none !important;
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    color 0.2s ease !important;
}

.btn-primary-custom:hover,
.btn-green-custom:hover,
.btn-accent-custom:hover,
.btn-cta:hover,
.btn-cta-navbar:hover,
.home-btn--primary:hover,
.home-hero__btn--primary:hover {
  background: var(--cws-ui-btn-fill-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
}

.btn-outline-custom,
.btn-outline,
.home-hero__btn--ghost,
.home-btn:not(.home-btn--primary),
.cta-section .btn-outline-custom,
.home-cta-band .home-hero__btn--ghost {
  background: transparent !important;
  color: var(--cws-ui-text) !important;
  border: 1px solid var(--cws-ui-border) !important;
  box-shadow: none !important;
}

.btn-outline-custom:hover,
.btn-outline:hover,
.home-hero__btn--ghost:hover,
.home-btn:not(.home-btn--primary):hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--cws-ui-text) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  transform: none;
  box-shadow: none !important;
}

/* Small buttons */
.btn-sm.btn-primary-custom,
.btn-sm.btn-outline-custom,
.btn.btn-sm {
  font-size: var(--cws-ui-text-small) !important;
  padding: 0.4rem 1rem !important;
}

/* Nav CTA — ink pill (not blue) */
.header .btn-cta-navbar.btn-cta {
  font-size: var(--cws-ui-text-small) !important;
  padding: 0.45rem 1rem !important;
  background: var(--cws-ui-btn-fill) !important;
  color: #fff !important;
}

.header .btn-cta-navbar.btn-cta:hover {
  background: var(--cws-ui-btn-fill-hover) !important;
  color: #fff !important;
}

/* Nav links */
.nav-link,
.navbar-nav .nav-link {
  font-family: var(--font-body) !important;
  font-size: var(--cws-ui-text-small) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  color: var(--cws-ui-text) !important;
}

.nav-link:hover,
.navbar-nav .nav-link:hover {
  color: var(--cws-ui-text) !important;
}

/* Service links */
.service-link,
.home-service-card .service-link,
.home-type-link {
  font-size: var(--cws-ui-text-small) !important;
  font-weight: 500 !important;
  color: var(--cws-ui-text) !important;
}

.service-link:hover,
.home-service-card .service-link:hover,
.home-type-link:hover {
  color: var(--cws-ui-link-hover) !important;
}

/* Hero headline */
.home-hero__title,
.hero-pro-title {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: var(--cws-ui-tracking-headline) !important;
  color: var(--cws-ui-text) !important;
}

.home-hero__eyebrow {
  font-size: var(--cws-ui-text-small) !important;
  color: var(--cws-ui-text-secondary) !important;
}

/* Stats / numbers */
.hero-pro-stat-num,
.stat-number {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em;
}

/* Breadcrumbs */
.breadcrumb-nav,
.breadcrumb-item {
  font-size: var(--cws-ui-text-small);
  color: var(--cws-ui-text-tertiary);
}

/* Forms — refined inputs */
.form-control,
.form-select,
.cms-input,
.cms-textarea {
  font-family: var(--font-body);
  font-size: var(--cws-ui-text-base);
  border-radius: 12px;
  border-color: var(--cws-ui-border);
  color: var(--cws-ui-text);
}

.form-label,
label {
  font-size: var(--cws-ui-text-small);
  font-weight: 500;
  color: var(--cws-ui-text);
  letter-spacing: -0.01em;
}

/* CTA soft band */
.cta-section {
  background: #f5f5f7 !important;
}

.cta-section h2,
.home-cta-band h2 {
  font-weight: 600 !important;
  letter-spacing: var(--cws-ui-tracking-headline) !important;
  color: var(--cws-ui-text) !important;
}

.cta-section p {
  color: var(--cws-ui-text-secondary) !important;
}

.cta-section .btn-green-custom,
.page-conversion-band__actions .btn-green-custom,
.cta-section .btn-accent-custom,
.page-conversion-band__actions .btn-accent-custom {
  background: #1d1d1f !important;
  color: #fff !important;
  border: none !important;
}

/* Remove gradient text on marketing headings */
.gradient-text {
  background: none !important;
  -webkit-text-fill-color: var(--cws-ui-text) !important;
  color: var(--cws-ui-text) !important;
}

/* Bootstrap defaults — theme ink buttons */
.btn-primary {
  background: var(--cws-ui-btn-fill) !important;
  border-color: var(--cws-ui-btn-fill) !important;
  border-radius: var(--cws-ui-radius-pill) !important;
  font-weight: 500 !important;
}

.btn-primary:hover {
  background: var(--cws-ui-btn-fill-hover) !important;
  border-color: var(--cws-ui-btn-fill-hover) !important;
}

.btn-outline-primary {
  color: var(--cws-ui-link) !important;
  border-color: var(--cws-ui-border) !important;
  border-radius: var(--cws-ui-radius-pill) !important;
}

/* Footer — site max-width content, pro monochrome */
.site-footer,
.footer {
  font-family: var(--font-body);
  background: linear-gradient(180deg, #010818 0%, #01102a 32%, #012174 100%) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  border: none !important;
}

.footer-top {
  background: transparent !important;
  border: none !important;
}

.footer-bar:not(.footer-bar--premium) {
  background: transparent !important;
  border: none !important;
}

.footer-desc,
.footer-widget p,
.footer-contact a,
.footer-contact .footer-contact__row,
.footer-links a,
.footer-copyright,
.footer-bottom-links a {
  color: rgba(255, 255, 255, 0.72) !important;
}

.footer-links a:hover,
.footer-contact a:hover,
.footer-contact a.footer-contact__row:hover,
.footer-bottom-links a:hover {
  color: #fff !important;
}

.footer-title-text--neutral,
.footer-title-text--company,
.footer-title-text--services,
.footer-title-text--products {
  color: rgba(255, 255, 255, 0.92) !important;
}

.footer-title-icon,
.footer-contact-icon {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.5) !important;
  border: none !important;
}

.footer-social-link {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

.footer-social-link:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}

.footer-payments-label {
  color: rgba(255, 255, 255, 0.45) !important;
}

.footer-copyright {
  color: rgba(255, 255, 255, 0.5) !important;
}

.site-footer h4,
.site-footer h5,
.footer h4,
.footer h5 {
  font-family: var(--font-display) !important;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Homepage process — kill legacy style.css gradients / spinners */
.home-page .home-process.process-section::before {
  display: none !important;
}

/* Testimonials — white white cards, dark copy (overrides legacy style.css) */
.home-page .testimonials-section,
.home-page .home-testimonials {
  background: transparent !important;
}

.home-page .testimonials-section::before,
.home-page .testimonials-section::after {
  display: none !important;
  content: none !important;
}

.home-page .testimonials-section .testimonial-card,
.home-page .home-testimonials .testimonial-card {
  background: #fff !important;
  color: #1d1d1f !important;
  border-style: solid !important;
}

.home-page .testimonial-card__text,
.home-page .testimonial-card__name,
.home-page .testimonials-section .testimonial-card p,
.home-page .testimonials-section .testimonial-card h4 {
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}

/* Homepage service grid — override legacy style.css gradients */
.home-page .services-section .service-card.home-service-card {
  background: #fff !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

.home-page .services-section .service-card.home-service-card::before,
.home-page .services-section .service-card.home-service-card::after,
.home-page .services-section .home-service-card .service-icon::before {
  display: none !important;
  animation: none !important;
}

.home-page .services-section .home-service-card .service-icon {
  background-image: none !important;
}

.home-page .services-section .home-service-card:hover .service-icon {
  background-image: none !important;
}

/* Homepage dark bands — light text (overrides cws-ui-text above; also in public copy) */
.home-page .home-section-band--dark,
.home-page .home-section-band--dark .home-section-band__content {
  color: #e8e8ed !important;
}

.home-page .home-section-band--dark:not([data-layout="process"]) .home-section-head h2,
.home-page .home-section-band--dark .section-title,
.home-page .home-section-band--dark .home-portfolio .home-section-head h2,
.home-page .home-section-band--dark .testimonials-section .home-section-head h2,
.home-page .home-section-band--dark .home-services .home-section-head h2,
.home-page .home-section-band--dark .home-cta-band h2 {
  color: #f5f5f7 !important;
}

.home-page .home-section-band--dark .home-services .home-service-card.service-card h3 {
  color: #1d1d1f !important;
}

.home-page .home-section-band--dark :is(
    .home-section-head p:not(.home-process__subtitle),
    .section-subtitle,
    .home-portfolio .home-section-head p,
    .testimonials-section .home-section-head p,
    .home-cta-band p
  ) {
  color: #a1a1a6 !important;
}

.home-page .home-section-band--dark .home-eyebrow,
.home-page .home-section-band--dark .section-badge {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #e8eef6 !important;
}

.home-page .home-section-band[data-layout="process"] .home-process .home-process__title,
.home-page .home-section-band[data-layout="process"] .home-process .home-section-head h2,
.home-page .home-process .home-section-head h2.home-process__title {
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}

.home-page .home-section-band[data-layout="process"] .home-process .home-process__subtitle,
.home-page .home-process .home-section-head p.home-process__subtitle {
  color: #6e6e73 !important;
  -webkit-text-fill-color: #6e6e73 !important;
}

.home-page .home-process .home-process__step {
  background: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
}

.home-page .home-process .home-process__step .home-process__step-title,
.home-page .home-section-band--dark .home-process__step h3 {
  color: #1d1d1f !important;
}

.home-page .home-process .home-process__step .home-process__step-desc,
.home-page .home-section-band--dark .home-process__step p {
  color: #6e6e73 !important;
}

.home-page .home-process .home-process__step[data-tone="blue"] .home-process__index {
  color: #0071e3 !important;
}

.home-page .home-process .home-process__step[data-tone="purple"] .home-process__index {
  color: #5856d6 !important;
}

.home-page .home-process .home-process__step[data-tone="green"] .home-process__index {
  color: #34c759 !important;
}

.home-page .home-process .home-process__step[data-tone="orange"] .home-process__index {
  color: #ff9500 !important;
}

/* Dark-band CTAs — white pill primary, outlined ghost (homepage) */
.home-page .home-section-band--dark .home-btn--primary,
.home-page .home-section-band--dark .home-hero__btn--primary,
.home-page .home-section-band--dark .portfolio-showcase__view-all {
  background: #fff !important;
  color: #1d1d1f !important;
  border: none !important;
}

.home-page .home-section-band--dark .home-hero__btn--ghost {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
}

.home-page .home-section-band--dark .home-hero__btn--ghost:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Dark band — section chrome links only (not inside white cards) */
.home-page .home-section-band--dark .home-section-head a[href],
.home-page .home-section-band--dark .home-portfolio .home-section-head a[href],
.home-page .home-section-band--dark .testimonials-section .home-section-head a[href],
.home-page .home-section-band--dark .home-cta-band a[href]:not(.home-btn):not(.btn) {
  color: rgba(255, 255, 255, 0.88) !important;
}

.home-page .home-section-band--dark .home-section-head a[href]:hover,
.home-page .home-section-band--dark .home-portfolio .home-section-head a[href]:hover,
.home-page .home-section-band--dark .testimonials-section .home-section-head a[href]:hover,
.home-page .home-section-band--dark .home-cta-band a[href]:not(.home-btn):not(.btn):hover {
  color: #fff !important;
}

/* Light boxes/cards — links stay blue on hover (never white) */
.home-page .home-section-band--light a[href]:hover:not(.btn):not(.home-btn):not(.home-hero__btn),
.home-page
  :is(.home-service-card, .testimonial-card, .portfolio-feature-card, .home-process__step)
  :is(a[href], .service-link, .home-type-link):hover,
.site-main
  :is(.corp-section, .content-page-section, .page-section-pastel, .service-card, .why-card, .blog-card)
  a[href]:hover:not(.btn):not(.home-btn),
.service-link:hover,
.home-type-link:hover,
.home-page .home-service-card .service-link:hover,
.home-page .home-service-card a.service-link:hover {
  color: #0077ed !important;
  -webkit-text-fill-color: #0077ed !important;
}

.home-page
  :is(.home-service-card, .testimonial-card, .portfolio-feature-card)
  :is(.service-link, a.service-link) {
  color: #0071e3 !important;
  -webkit-text-fill-color: #0071e3 !important;
}

.footer a:not(.btn):not(.footer-social-link) {
  color: rgba(255, 255, 255, 0.82) !important;
}

.footer a:not(.btn):not(.footer-social-link):hover {
  color: #fff !important;
}

.home-page .home-section-band--light .home-hero__btn--ghost {
  background: #1d1d1f !important;
  color: #fff !important;
  border: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary-custom:hover,
  .btn-cta:hover,
  .home-hero__btn--primary:hover {
    transform: none !important;
  }
}