/* Shared design tokens and progressive enhancements. */
:root {
  --space-section: clamp(4.5rem, 8vw, 7.25rem);
  --space-section-mobile: 4.875rem;
  --hero-gap: clamp(2.8rem, 5vw, 5rem);
  --card-lift: -4px;
  --transition-fast: 180ms ease;
}

/* Common structural foundation for every dark page hero. */
.page-hero,
.service-hero,
.business-hero,
.pricing-hero,
.kb-hero,
.quote-hero,
.article-hero,
.home-hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: var(--ink);
}

.section-pad { padding-block: var(--space-section); }
.nav-brand { gap: 0; }
.nav-wrap { min-height: 112px; }
.nav-brand .brand-logo { width: 93px; height: 93px; }
.footer-logo-card { padding: 10px; background: var(--white); border-radius: 16px; }
.footer-logo-card .brand-logo { width: 104px; height: 104px; }

/* Make functional reading text comfortably legible without enlarging decorative labels. */
.eyebrow { font-size: 13px; }
.service-card p,
.home-service-card p,
.detail-card p,
.audience-home-card p,
.pricing-description,
.pricing-card li,
.kb-category-card p,
.kb-article-card p,
.process-card p,
.benefit-item p { font-size: 15px; }
.service-card a,
.home-service-card a,
.detail-card .arrow-link,
.audience-home-card .arrow-link,
.kb-article-card .arrow-link,
.related-link,
.footer-links a,
.footer-bottom { font-size: 14px; }
.faq-intro,
.faq-item p { font-size: 16px; }
.contact-form label,
.contact-form small,
.field-help,
.quote-form-note,
.quote-consent label { font-size: 13px; }

/* Contact form fields stay together; this prevents labels and inputs from being split across columns. */
.contact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; padding: 36px; }
.contact-field { display: grid; gap: 8px; }
.contact-field--full,
.contact-form .quote-consent,
.contact-form .form-status,
.contact-form > button,
.contact-form > small { grid-column: 1 / -1; }
.contact-form label { margin: 0; }
.contact-form input,
.contact-form textarea { padding: 14px 15px; font-size: 16px; }
.contact-form textarea { min-height: 160px; }
.contact-form .quote-consent { margin: 3px 0 0; }

@media (max-width: 700px) {
  .contact-form { grid-template-columns: 1fr; padding: 24px 20px; }
  .contact-field--full,
  .contact-form .quote-consent,
  .contact-form .form-status,
  .contact-form > button,
  .contact-form > small { grid-column: auto; }
}

/* About and contact details */
.about-story { background: var(--white); }
.about-story-grid,
.about-facts-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(3rem, 9vw, 7rem); align-items: start; }
.about-story h2,
.about-facts h2 { margin: 0; font-size: clamp(38px, 4.2vw, 58px); }
.about-story h2 em,
.about-facts h2 em { color: var(--cyan-deep); font-style: normal; }
.about-story-grid > div:last-child > p,
.about-facts-grid > div > p:not(.eyebrow) { max-width: 620px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.about-story-grid > div:last-child > p:first-child { margin-top: 0; }
.about-values { background: #e8f6f4; }
.about-values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.about-values-grid article { min-height: 190px; padding: 28px; background: var(--white); border-radius: var(--radius-md); }
.about-values-grid strong { display: block; margin-bottom: 18px; color: var(--ink); font: 600 22px var(--display-font); }
.about-values-grid p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.about-facts { color: var(--white); background: var(--ink-deep); }
.about-facts .eyebrow { color: var(--cyan); }
.about-facts-grid > div > p:not(.eyebrow) { color: #b7cbd6; }
.about-facts-grid dl,
.contact-business-details dl { margin: 0; }
.about-facts-grid dl { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.2); }
.about-facts-grid dl > div { padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.about-facts-grid dl > div:nth-child(odd) { padding-right: 22px; }
.about-facts-grid dl > div:nth-child(even) { padding-left: 22px; border-left: 1px solid rgba(255,255,255,.2); }
.about-facts-grid dt,
.contact-business-details dt { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.about-facts-grid dt { color: var(--cyan); }
.about-facts-grid dd,
.contact-business-details dd { margin: 0; }
.about-facts-grid dd { color: #e5eef3; font-size: 15px; line-height: 1.45; }
.contact-business-details { max-width: 430px; padding-top: 24px; margin-top: 28px; border-top: 1px solid var(--line); }
.contact-business-details > p { margin: 0 0 13px; color: var(--ink); font: 600 18px var(--display-font); }
.contact-business-details dl { display: grid; gap: 10px; }
.contact-business-details dl > div { display: grid; grid-template-columns: 70px 1fr; gap: 10px; }
.contact-business-details dt { margin: 0; color: var(--muted); font-size: 11px; }
.contact-business-details dd { color: var(--ink); font-size: 14px; }
.contact-business-details a { color: var(--cyan-deep); font-weight: 700; }

/* Enriched audience and service pages */
.home-help { background: var(--white); }
.home-help-grid,
.services-intro-grid,
.service-area-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(3rem, 9vw, 7rem); align-items: start; }
.home-help h2,
.services-intro h2,
.service-area h2 { margin: 0 0 22px; font-size: clamp(38px, 4.2vw, 58px); }
.home-help h2 em,
.services-intro h2 em,
.service-area h2 em { color: var(--cyan-deep); font-style: normal; }
.home-help-grid > div:first-child > p:not(.eyebrow),
.services-intro-grid > div:last-child > p,
.service-area-grid > div:last-child > p { max-width: 640px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.home-help-list { border-top: 1px solid var(--line); }
.home-help-list article { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.home-help-list span { color: var(--cyan-deep); font: 700 12px var(--display-font); letter-spacing: .08em; }
.home-help-list h3 { margin: 0 0 6px; font-size: 21px; }
.home-help-list p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.services-intro { background: var(--white); }
.services-intro-grid > div:last-child > p:first-child,
.service-area-grid > div:last-child > p { margin-top: 0; }
.service-area { background: #e8f6f4; }
.service-area-grid { align-items: center; }
.service-area .arrow-link { color: var(--cyan-deep); }

@media (max-width: 980px) {
  .about-story-grid,
  .about-facts-grid,
  .home-help-grid,
  .services-intro-grid,
  .service-area-grid { grid-template-columns: 1fr; gap: 34px; }
  .about-values-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .about-values-grid,
  .about-facts-grid dl { grid-template-columns: 1fr; }
  .about-facts-grid dl > div:nth-child(odd),
  .about-facts-grid dl > div:nth-child(even) { padding-right: 0; padding-left: 0; border-left: 0; }
}

/* Keep the footer inside the viewport on narrow screens. */
html,
body { max-width: 100%; overflow-x: clip; }

@media (max-width: 700px) {
  .footer-main { flex-direction: column; gap: 34px; }
  .footer-links { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
  .footer-links div { min-width: 0; }
  .footer-links div:last-child { grid-column: 1 / -1; }
  .footer-links a { overflow-wrap: anywhere; }
  .footer-top { align-items: flex-start; margin-left: 0; }
}
.home-hero-grid,
.business-hero-grid,
.service-hero-grid,
.pricing-hero-grid,
.kb-hero-inner,
.quote-hero-inner,
.page-hero-grid { gap: var(--hero-gap); }

/* Cards below the fold do not need layout work until they approach the viewport. */
.home-service-grid,
.detail-grid,
.pricing-grid,
.kb-category-grid,
.kb-article-grid,
.business-problem-grid,
.business-solution-grid,
.deliver-grid,
.related-links { content-visibility: auto; contain-intrinsic-size: auto 520px; }

/* Touch devices do not benefit from retained hover transforms. */
@media (hover: none) {
  .button:hover,
  .nav-cta:hover,
  .service-card:hover,
  .detail-card:hover,
  .pricing-card:hover,
  .kb-category-card:hover,
  .kb-article-card:hover,
  .home-service-card:hover,
  .audience-home-card:hover {
    transform: none;
  }
}

@media (hover: hover) {
  .button,
  .nav-cta,
  .service-card,
  .detail-card,
  .pricing-card,
  .kb-category-card,
  .kb-article-card,
  .home-service-card,
  .audience-home-card { transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
}

/* Keep the illustrated mobile heroes in their own responsive canvas, without scale(). */
@media (max-width: 700px) {
  .section-pad { padding-block: var(--space-section-mobile); }
  .nav-wrap { min-height: 92px; }
  .main-nav { top: 91px; }
  .nav-brand .brand-logo { width: 78px; height: 78px; }

  .home-hero-visual,
  .business-hero-visual {
    width: 100%;
    min-height: 360px;
    transform: none;
  }

  .home-hero-visual .ring-a,
  .business-hero-visual .orbit-one { top: 54px; left: -8px; width: min(112%, 430px); height: 286px; }
  .home-hero-visual .ring-b,
  .business-hero-visual .orbit-two { top: 84px; left: 28px; width: min(94%, 360px); height: 238px; }

  .home-hero-visual .network-card,
  .business-hero-visual .business-stack {
    top: 62px;
    left: 7%;
    width: 82%;
    min-height: 300px;
    padding: 25px;
  }

  .home-hero-visual .node-a,
  .business-hero-visual .node-one { top: 31px; left: 17%; }
  .home-hero-visual .node-b,
  .business-hero-visual .node-two { right: 5%; bottom: 94px; }
  .home-hero-visual .node-c,
  .business-hero-visual .node-three { bottom: 23px; left: 18%; }
}