/* ==========================================================================
   CDMP by NoyMed — landing site styles
   Shares the NoyMed design tokens (teal family) so the site reads as part of
   the group, with an indigo "data" accent that gives the lander its own
   identity. Component patterns (container, buttons, cards, hero, FAQ,
   trust-bar, footer, forms) mirror the main noymed.com stylesheet.
   ========================================================================== */

:root {
  /* NoyMed family palette */
  --color-primary: #007d7f;
  --color-primary-dark: #045456;
  --color-secondary: #3fa6a8;
  --color-text: #1c3435;
  --color-text-muted: #4c6c6f;
  --color-bg: #f4faf9;
  --color-surface: #ffffff;
  --color-border: #dbe9e8;

  /* CDMP accent — signals the data-management arm */
  --accent: #4f46e5;
  --accent-dark: #3730a3;
  --accent-soft: rgba(79, 70, 229, 0.1);

  --shadow: 0 20px 45px rgba(4, 55, 56, 0.12);
  --shadow-sm: 0 4px 14px rgba(4, 55, 56, 0.08);
  --shadow-lg: 0 30px 60px rgba(9, 35, 48, 0.22);
  --radius: 16px;
  --radius-sm: 10px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

cdmp-nav,
cdmp-footer {
  display: block;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  background: var(--color-bg);
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: linear-gradient(180deg, #f8fcfe 0%, var(--color-bg) 100%);
  background-attachment: fixed;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--accent);
  color: #ffffff;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 160ms var(--ease), opacity 160ms var(--ease);
}

a:hover {
  color: var(--accent-dark);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 1rem;
  z-index: 1000;
  padding: 0.7rem 1.1rem;
  background: var(--color-primary-dark);
  color: #ffffff;
  font-weight: 700;
  border-radius: 0 0 8px 8px;
  transition: top 160ms var(--ease);
}

.skip-link:focus {
  top: 0;
}

.container {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   Header / nav
   ========================================================================== */

.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 0 rgba(4, 55, 56, 0.04);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow 200ms var(--ease);
}

.site-header.is-scrolled {
  box-shadow: 0 8px 24px rgba(4, 55, 56, 0.1);
}

.site-header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 0;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-shrink: 0;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: var(--color-primary-dark);
}

.brand-mark svg {
  width: 27px;
  height: 27px;
  flex-shrink: 0;
  transform: translateY(1px);
}

.brand-by {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.brand-by a {
  color: var(--color-text-muted);
  border-bottom: 1px dotted currentColor;
}

.brand-by a:hover {
  color: var(--color-primary);
}

.brand-by a {
  transition: color 160ms var(--ease);
}

.brand-by a span {
  font-size: 0.7em;
  vertical-align: 1px;
}

@media (max-width: 380px) {
  .site-header .brand-by {
    display: none;
  }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  margin-left: auto;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform 160ms var(--ease), opacity 160ms var(--ease);
}

.primary-nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.primary-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary-nav .nav-links a {
  display: inline-flex;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}

.primary-nav .nav-links a:hover {
  background: var(--color-bg);
  color: var(--accent);
}

.primary-nav .nav-links a[aria-current="page"] {
  color: var(--accent-dark);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 5px;
}

.nav-cta {
  margin-left: auto;
  flex-shrink: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.8rem 1.35rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-primary), var(--accent));
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 10px 24px rgba(45, 55, 160, 0.22);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease),
    opacity 160ms var(--ease);
}

.btn:hover {
  color: #ffffff;
  opacity: 0.96;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(45, 55, 160, 0.3);
}

.btn:active {
  transform: translateY(0);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.8rem 1.35rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-primary-dark);
  background: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 160ms var(--ease), border-color 160ms var(--ease),
    background 160ms var(--ease);
}

.btn-outline:hover {
  border-color: var(--accent);
  background: var(--color-bg);
  color: var(--color-primary-dark);
  transform: translateY(-2px);
}

.btn-sm {
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
}

/* ==========================================================================
   Typography / sections
   ========================================================================== */

main {
  padding: 2.5rem 0 4rem;
  min-height: 60vh;
}

section {
  padding: 2.5rem 0;
  scroll-margin-top: 5.5rem;
}

h1,
h2,
h3,
h4 {
  line-height: 1.2;
  margin: 0 0 0.75rem;
  color: var(--color-primary-dark);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 3.4vw, 3rem);
}

h2 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
}

h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
}

p {
  margin: 0 0 1rem;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.section-intro {
  max-width: 68ch;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 0.75rem;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
}

.lead {
  font-size: 1.08rem;
  color: var(--color-text);
  max-width: 70ch;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  margin-bottom: 1.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: radial-gradient(
      circle at 18px 18px,
      rgba(255, 255, 255, 0.1) 1.5px,
      transparent 1.6px
    ),
    linear-gradient(
      135deg,
      var(--color-primary-dark),
      var(--color-primary) 50%,
      var(--accent) 130%
    );
  background-size: 36px 36px, 100% 100%;
  color: #ffffff;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  align-items: center;
  gap: 2.25rem;
  padding: 3rem 2rem 2.25rem;
}

.hero h1 {
  color: #ffffff;
  font-size: clamp(2.1rem, 3.6vw, 3rem);
}

.hero .eyebrow {
  color: #c7d0ff;
}

.hero-description {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.05rem;
  max-width: 60ch;
}

.hero-card {
  padding: 1.5rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
}

.hero-card h2 {
  color: #ffffff;
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

.hero-stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-stats li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.hero-stat-value {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
}

.hero-stat-label {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);
}

.hero-trust-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0.9rem 2rem;
}

.hero-trust-bar ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
}

/* Breadcrumb */
.breadcrumb {
  margin-bottom: 0.9rem;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.breadcrumb a {
  color: var(--color-text-muted);
}

.breadcrumb a:hover {
  color: var(--accent);
}

.breadcrumb [aria-current="page"] {
  color: var(--accent-dark);
}

.breadcrumb-sep {
  opacity: 0.5;
}

/* Compact inner-page hero */
.page-hero {
  margin-bottom: 1.5rem;
  padding: 2.25rem 2rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--accent);
  background: linear-gradient(
    135deg,
    var(--accent-soft),
    rgba(0, 125, 127, 0.05)
  );
  box-shadow: var(--shadow-sm);
}

.page-hero h1 {
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   Cards / grids
   ========================================================================== */

.card-grid {
  display: grid;
  gap: 1.25rem;
}

.card-grid.two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-grid.three-up {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card {
  padding: 1.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease),
    border-color 200ms var(--ease);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.card h3 {
  margin-bottom: 0.5rem;
}

a.card {
  color: inherit;
  position: relative;
}

a.card h3 {
  padding-right: 1.5rem;
}

a.card h3::after {
  content: "\2192";
  position: absolute;
  right: 1.4rem;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}

a.card:hover h3 {
  color: var(--accent-dark);
}

a.card:hover h3::after {
  opacity: 1;
  transform: translateX(0);
}

.card p:last-child {
  margin-bottom: 0;
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 0.85rem;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 800;
}

/* ==========================================================================
   Carousel — Core Value Pillars
   ========================================================================== */

.carousel {
  position: relative;
  margin-top: 1.5rem;
}

.carousel-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* negative margin + matching padding lets the featured card's coloured
     shadow bleed to the section edge instead of being clipped */
  margin: 0 -0.5rem;
  padding: 0 0.5rem;
}

.carousel-viewport::-webkit-scrollbar {
  display: none;
}

.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(420px, 82%);
  gap: 1.25rem;
  padding: 0.5rem 0.25rem 1.25rem;
}

.carousel-slide {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.carousel-slide.is-featured {
  border-color: var(--accent);
  box-shadow: 0 20px 45px rgba(79, 70, 229, 0.2);
  background: linear-gradient(180deg, var(--accent-soft), var(--color-surface) 55%);
}

.carousel-slide h3 {
  margin-bottom: 0.5rem;
}

.slide-badge {
  align-self: flex-start;
  margin-bottom: 0.85rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.slide-num {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}

.carousel-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary-dark);
  cursor: pointer;
  transition: border-color 160ms var(--ease), background 160ms var(--ease),
    transform 160ms var(--ease);
}

.carousel-btn:hover {
  border-color: var(--accent);
  background: var(--color-bg);
  transform: translateY(-1px);
}

.carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

.carousel-dots {
  display: flex;
  gap: 0.4rem;
  margin-left: auto;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-border);
  cursor: pointer;
  transition: background 160ms var(--ease), transform 160ms var(--ease);
}

.carousel-dot[aria-current="true"] {
  background: var(--accent);
  transform: scale(1.35);
}

/* ==========================================================================
   Feature list / checklist
   ========================================================================== */

.feature-list {
  list-style: none;
  display: grid;
  gap: 0.6rem;
  margin: 1.25rem 0 0;
  padding: 0;
}

.feature-list li {
  position: relative;
  padding: 0.85rem 1rem 0.85rem 3rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  transition: border-color 180ms var(--ease), transform 180ms var(--ease),
    box-shadow 180ms var(--ease);
}

.feature-list li:hover {
  border-color: var(--accent);
  transform: translateX(3px);
  box-shadow: var(--shadow-sm);
}

/* filled check badge */
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 0.95rem;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--color-primary), var(--accent));
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.35);
  transition: transform 200ms var(--ease);
}

/* drawn tick */
.feature-list li::after {
  content: "";
  position: absolute;
  left: 1.42rem;
  top: 1.28rem;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transform-origin: center;
}

.feature-list li:hover::before {
  transform: scale(1.12) rotate(-4deg);
}

/* staggered "draw-in" when the list scrolls into view */
[data-reveal] .feature-list li::before {
  transform: scale(0);
}

[data-reveal].is-visible .feature-list li::before {
  transform: scale(1);
  transition: transform 340ms var(--ease);
}

[data-reveal].is-visible .feature-list li:nth-child(2)::before { transition-delay: 60ms; }
[data-reveal].is-visible .feature-list li:nth-child(3)::before { transition-delay: 120ms; }
[data-reveal].is-visible .feature-list li:nth-child(4)::before { transition-delay: 180ms; }
[data-reveal].is-visible .feature-list li:nth-child(5)::before { transition-delay: 240ms; }
[data-reveal].is-visible .feature-list li:nth-child(6)::before { transition-delay: 300ms; }

.feature-list li strong {
  color: var(--color-primary-dark);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] .feature-list li::before,
  [data-reveal].is-visible .feature-list li::before {
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Prose + service-page layout
   ========================================================================== */

.prose > p {
  max-width: 72ch;
}

.prose h2 {
  margin-top: 2rem;
}

.prose h2:first-child {
  margin-top: 0;
}

.split {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.5rem;
  align-items: start;
}

.service-aside {
  position: sticky;
  top: 5.5rem;
  padding: 1.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.service-aside h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin: 0 0 0.75rem;
}

.service-aside ul {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.service-aside li + li {
  margin-top: 0.15rem;
}

.service-aside a {
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.9rem;
}

.service-aside a:hover,
.service-aside a[aria-current="page"] {
  background: var(--color-bg);
  color: var(--accent-dark);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.9rem;
  margin-top: 1.5rem;
}

.related-grid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.9rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 0.92rem;
  transition: border-color 160ms var(--ease), transform 160ms var(--ease),
    background 160ms var(--ease);
}

.related-grid a:hover {
  border-color: var(--accent);
  background: var(--color-bg);
  transform: translateY(-2px);
}

.related-grid a span {
  opacity: 0.5;
  transition: transform 160ms var(--ease), opacity 160ms var(--ease);
}

.related-grid a:hover span {
  opacity: 1;
  transform: translateX(4px);
}

/* ==========================================================================
   Interactivity — scroll reveal, back-to-top, shared hover behaviour
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* children of a revealed grid come in with a gentle stagger */
[data-reveal][data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 460ms var(--ease), transform 460ms var(--ease);
}

[data-reveal][data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

[data-reveal][data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 70ms; }
[data-reveal][data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 140ms; }
[data-reveal][data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 210ms; }
[data-reveal][data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 280ms; }
[data-reveal][data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 350ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-visible,
  [data-reveal][data-reveal-stagger] > *,
  [data-reveal][data-reveal-stagger].is-visible > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* shared hover lift for content blocks */
.case,
.stat-tile,
.quote-card {
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease),
    border-color 200ms var(--ease);
}

.case:hover,
.stat-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

/* animated underline on primary-nav links (desktop) */
@media (min-width: 821px) {
  .primary-nav .nav-links a {
    position: relative;
  }

  .primary-nav .nav-links a::after {
    content: "";
    position: absolute;
    left: 0.7rem;
    right: 0.7rem;
    bottom: 0.3rem;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 200ms var(--ease);
  }

  .primary-nav .nav-links a:hover::after,
  .primary-nav .nav-links a:focus-visible::after {
    transform: scaleX(1);
  }

  .primary-nav .nav-links a[aria-current="page"] {
    text-decoration: none;
  }

  .primary-nav .nav-links a[aria-current="page"]::after {
    transform: scaleX(1);
    opacity: 0.5;
  }
}

/* back-to-top button */
.to-top {
  position: fixed;
  right: clamp(1rem, 4vw, 2rem);
  bottom: clamp(1rem, 4vw, 2rem);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-primary-dark);
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  pointer-events: none;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease),
    background 160ms var(--ease), border-color 160ms var(--ease);
}

.to-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.to-top:hover {
  background: var(--color-bg);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.to-top:active {
  transform: translateY(0);
}

@media print {
  .to-top {
    display: none !important;
  }
}

/* ==========================================================================
   Comparison table (Services)
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  margin-top: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

table.matrix {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  min-width: 640px;
}

table.matrix th,
table.matrix td {
  padding: 1rem 1.15rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

table.matrix thead th {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #ffffff;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

table.matrix tbody th {
  width: 34%;
  color: var(--color-primary-dark);
  font-weight: 700;
}

table.matrix tbody tr:nth-child(even) td,
table.matrix tbody tr:nth-child(even) th {
  background: var(--color-bg);
}

table.matrix tbody tr:last-child th,
table.matrix tbody tr:last-child td {
  border-bottom: none;
}

/* ==========================================================================
   Stat tiles
   ========================================================================== */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.stat-tile {
  padding: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.stat-tile-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary-dark);
}

.stat-tile-label {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Case studies
   ========================================================================== */

.case {
  padding: 1.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.case + .case {
  margin-top: 1.5rem;
}

.case h3 {
  margin-bottom: 1rem;
}

.case dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6rem 1.25rem;
  margin: 0;
}

.case dt {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  color: var(--accent-dark);
  padding-top: 0.2rem;
}

.case dd {
  margin: 0;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Callout / CTA band
   ========================================================================== */

.callout {
  padding: 2.25rem;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.12), transparent 55%),
    linear-gradient(135deg, var(--color-primary-dark), var(--accent-dark));
  color: #ffffff;
  box-shadow: var(--shadow-lg);
}

@media (max-width: 640px) {
  .callout {
    padding: 1.5rem;
  }
}

.callout h2 {
  color: #ffffff;
}

.callout p {
  color: rgba(255, 255, 255, 0.86);
  max-width: 60ch;
}

.callout .btn-outline {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
}

.callout .btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: #ffffff;
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.faq {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

.faq-item:hover {
  border-color: var(--accent);
}

.faq-item.is-open {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  text-align: left;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
  cursor: pointer;
  transition: background 160ms var(--ease);
}

.faq-q:hover {
  background: var(--color-bg);
}

.faq-icon {
  flex: none;
  position: relative;
  width: 18px;
  height: 18px;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}

.faq-icon::before {
  width: 12px;
  height: 2px;
}

.faq-icon::after {
  width: 2px;
  height: 12px;
}

.faq-q[aria-expanded="true"] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* Animated collapse — JS drives an explicit pixel height (measured from
   scrollHeight), so it works identically on every browser incl. old mobile.
   Pre-JS, the [hidden] attribute keeps answers collapsed. */
.faq-a {
  overflow: hidden;
}

.js .faq-a {
  height: 0;
  transition: height 260ms var(--ease);
}

.faq-a-inner {
  padding: 0.25rem 1.25rem 1.1rem;
}

.faq-a p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .js .faq-a {
    transition: none;
  }
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-card {
  padding: 2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.form-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}

/* green tick once a required field validates */
.form-field.is-valid::after {
  content: "";
  position: absolute;
  right: 0.85rem;
  top: 2.35rem;
  width: 6px;
  height: 11px;
  border: solid #1f9d6b;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  pointer-events: none;
  animation: tick-in 220ms var(--ease);
}

.form-field.is-valid select {
  padding-right: 2rem;
}

@keyframes tick-in {
  from { opacity: 0; transform: rotate(45deg) scale(0.5); }
  to { opacity: 1; transform: rotate(45deg) scale(1); }
}

.form-field.is-valid input,
.form-field.is-valid select {
  border-color: #7fca9f;
}

.form-field label {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-text);
}

.form-field .req {
  color: var(--accent);
}

.form-field input,
.form-field textarea,
.form-field select {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"],
.form-field select[aria-invalid="true"] {
  border-color: #d64545;
}

.form-error {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #c23a3a;
}

.form-error:empty {
  display: none;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.25rem;
}

.form-note {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.form-success {
  padding: 1rem 1.25rem;
  margin-bottom: 1.1rem;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent-dark);
  font-weight: 600;
}

.form-success.is-error {
  background: #fdeceb;
  border-color: #c23a3a;
  color: #a02c2c;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--color-primary-dark);
  color: #eaf5fa;
  padding: 2.5rem 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 1.75rem;
}

.footer-brand {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.site-footer .footer-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.15rem;
  color: #ffffff;
  margin: 0;
  transition: opacity 160ms var(--ease);
}

.site-footer .footer-brand-mark:hover {
  color: #ffffff;
  opacity: 0.85;
}

.footer-brand-mark svg {
  width: 22px;
  height: 22px;
  transform: translateY(2px);
}

.site-footer .brand-by {
  font-size: 0.82rem;
  font-weight: 600;
  color: #8fb9c4;
}

.site-footer .brand-by a {
  color: #bfe5f0;
  font-size: inherit;
  border-bottom: 1px dotted currentColor;
}

.site-footer .brand-by a:hover {
  color: #ffffff;
}

.site-footer .brand-by a span {
  font-size: 0.7em;
  vertical-align: 1px;
  border: 0;
}

.site-footer p {
  color: #bfe5f0;
  font-size: 0.92rem;
}

.site-footer h3 {
  color: #ffffff;
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li + li {
  margin-top: 0.35rem;
}

.site-footer a {
  color: #bfe5f0;
  font-size: 0.92rem;
}

.site-footer a:hover {
  color: #ffffff;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(234, 245, 250, 0.15);
}

.footer-bottom p {
  margin: 0;
  color: #a9cdd9;
  font-size: 0.83rem;
}

.footer-bottom p:last-child {
  flex-shrink: 0;
}

.footer-bottom a {
  color: #cfe6ee;
  font-size: 0.83rem;
  font-weight: 600;
}

.footer-bottom a:hover {
  color: #ffffff;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .hero-inner,
  .card-grid.two-up,
  .card-grid.three-up,
  .footer-grid,
  .split {
    grid-template-columns: 1fr;
  }

  .service-aside {
    position: static;
  }
}

@media (max-width: 820px) {
  .nav-toggle {
    display: flex;
  }

  body.nav-open {
    overflow: hidden;
  }

  /* hamburger morphs to an X while the menu is open */
  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .primary-nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.75rem 1rem 1rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 180ms var(--ease), transform 180ms var(--ease),
      visibility 0s linear 180ms;
  }

  .primary-nav.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 180ms var(--ease), transform 180ms var(--ease),
      visibility 0s;
  }

  .primary-nav .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
  }

  .primary-nav .nav-links a {
    padding: 0.75rem 0.7rem;
  }

  .nav-cta {
    margin: 0.5rem 0 0;
  }

  .nav-cta .btn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .hero-inner {
    padding: 2.25rem 1.25rem 1.75rem;
  }

  .hero-trust-bar {
    padding: 0.9rem 1.25rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .case dl {
    grid-template-columns: 1fr;
    gap: 0.2rem 0;
  }

  .case dd {
    margin-bottom: 0.75rem;
  }

  h1 {
    font-size: clamp(1.8rem, 7vw, 2.2rem);
  }

  .button-row .btn,
  .button-row .btn-outline {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   Focus states & print
   ========================================================================== */

.btn:focus-visible,
.btn-outline:focus-visible,
.carousel:focus-visible,
.carousel-btn:focus-visible,
.faq-q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.carousel:focus-visible {
  border-radius: var(--radius);
}

@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .breadcrumb,
  .carousel-controls,
  .button-row,
  .callout .button-row {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .hero,
  .page-hero,
  .card,
  .callout,
  .case,
  .form-card {
    box-shadow: none;
    border: 1px solid #ccc;
    color: #000;
    background: #fff;
  }

  .hero *,
  .callout * {
    color: #000 !important;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .faq-a,
  .faq-a[hidden] {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}