@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,600;1,700&display=swap');

:root {
  --color-primary: #1FA9E1;
  --color-primary-dark: #1489B8;
  --color-navy: #0E2A47;
  --color-navy-light: #163A5C;
  --color-ink: #081422;
  --color-eyebrow: #0C6E90;
  --color-background: #FFFFFF;
  --color-surface: #F5FAFD;
  --color-foreground: #0E1B2A;
  --color-muted: #55697A;
  --color-border: #DCE8F0;
  --color-on-primary: #FFFFFF;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-accent: 'Inter', sans-serif;
  --font-mono: 'Inter', sans-serif;
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(14, 42, 71, 0.06), 0 1px 3px rgba(14, 42, 71, 0.08);
  --shadow-md: 0 4px 12px rgba(14, 42, 71, 0.08), 0 2px 4px rgba(14, 42, 71, 0.06);
  --shadow-lg: 0 12px 32px rgba(14, 42, 71, 0.12);
  --container-width: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-foreground);
  background: var(--color-background);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-navy);
  font-weight: 700;
  line-height: 1.2;
}

h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; }

p { color: var(--color-muted); }

a { color: inherit; text-decoration: none; }

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

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 13px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  white-space: nowrap;
}
.btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--color-primary-dark); box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* Nav CTA gets extra lift so it reads as the primary action in the header
   without tipping into a gimmicky glow. A small hop every 5s draws the eye
   back to it periodically -- most of the cycle it just sits still. */
.nav-cta .btn-primary {
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(31, 169, 225, 0.38);
  animation: nav-cta-hop 3s ease-in-out infinite;
}
.nav-cta .btn-primary:hover {
  box-shadow: 0 8px 24px rgba(31, 169, 225, 0.48);
  transform: translateY(-1px);
  animation-play-state: paused;
}
@keyframes nav-cta-hop {
  0%, 82%, 100% { transform: translateY(0); }
  87% { transform: translateY(-8px); }
  92% { transform: translateY(0); }
  95% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

.btn-secondary {
  background: transparent;
  color: var(--color-navy);
  border-color: rgba(14, 42, 71, 0.3);
}
.btn-secondary:hover { border-color: var(--color-navy); background: var(--color-surface); }

/* The default light border blends into the hero's own light-blue gradient,
   reading as plain text instead of a button -- give it a white pill and a
   navy-tinted border there so it holds its own next to the primary CTA. */
.hero .btn-secondary { background: rgba(255,255,255,0.7); border-color: rgba(14,42,71,0.3); }
.hero .btn-secondary:hover { background: #FFFFFF; border-color: var(--color-navy); }

.btn-outline-light {
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.5);
}
.btn-outline-light:hover { background: rgba(255,255,255,0.12); border-color: #FFFFFF; }

.btn-block { width: 100%; }

/* Header / Nav */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}
.site-header.scrolled {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.site-header:not(.scrolled) .nav-links a,
.site-header:not(.scrolled) .nav-dropdown-label,
.site-header:not(.scrolled) .nav-toggle svg { color: #FFFFFF; }
.site-header:not(.scrolled) .btn-secondary { color: #FFFFFF; border-color: rgba(255,255,255,0.4); }

/* Pages without a dark hero keep the header solid from the start */
body.solid-header .site-header {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
body.solid-header .site-header .nav-links a,
body.solid-header .site-header .nav-dropdown-label,
body.solid-header .site-header .nav-toggle svg { color: var(--color-ink); }
/* .btn-secondary's own white text/border (meant for a dark hero photo
   underneath) was leaking through on solid-header pages before the user
   had scrolled, since the header there is solid/light from the start --
   made the Client Portal nav button unreadable (white on white). */
body.solid-header .site-header .btn-secondary { color: var(--color-navy); border-color: rgba(14, 42, 71, 0.3); }

/* Home hero: header stays fully transparent over the photo (no white bar,
   no blur) right up until the user scrolls. The hero photo is light at the
   top though, so nav text/logo stay in their navy "scrolled" look rather
   than the white used for a dark hero -- transparent, but still legible. */
body.transparent-header .site-header:not(.scrolled) .nav-links a,
body.transparent-header .site-header:not(.scrolled) .nav-dropdown-label,
body.transparent-header .site-header:not(.scrolled) .nav-toggle svg { color: var(--color-ink); }
body.transparent-header .site-header:not(.scrolled) .btn-secondary { color: var(--color-navy); border-color: rgba(14, 42, 71, 0.3); }
body.transparent-header .site-header:not(.scrolled) .nav-logo .logo-white { display: none; }
body.transparent-header .site-header:not(.scrolled) .nav-logo .logo-color { display: block; }
/* Light blue button on light blue sky was blending in -- swap to navy while
   the header is transparent over the photo; scrolled state keeps the usual blue. */
body.transparent-header .site-header:not(.scrolled) .nav-cta .btn-primary {
  background: var(--color-navy);
  box-shadow: 0 6px 18px rgba(14, 42, 71, 0.4);
}
body.transparent-header .site-header:not(.scrolled) .nav-cta .btn-primary:hover {
  background: var(--color-navy-light);
  box-shadow: 0 8px 24px rgba(14, 42, 71, 0.5);
}

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  padding: 18px clamp(20px, 4vw, 56px);
  transition: padding 250ms ease;
}
.site-header.scrolled .nav { padding: 12px clamp(20px, 4vw, 56px); }

.nav-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; position: relative; justify-self: start; }
.nav-logo svg, .nav-logo img { height: 91px; width: auto; flex-shrink: 0; }
.nav-logo .logo-white { display: block; }
.nav-logo .logo-color { display: none; }
.site-header.scrolled .nav-logo .logo-white { display: none; }
.site-header.scrolled .nav-logo .logo-color { display: block; }
body.solid-header .nav-logo .logo-white { display: none; }
body.solid-header .nav-logo .logo-color { display: block; }

.site-header .nav.open .nav-links a,
.site-header .nav.open .nav-dropdown-label { color: var(--color-navy); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  justify-self: center;
}

.nav-links a,
.nav-dropdown-label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--color-ink);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* More submenu -- hover-revealed on desktop, click also toggles it (so it
   still works on touch-but-wide screens); on the mobile stacked menu it's
   just shown as a plain indented list under the "More" label, no toggle
   needed. The label itself isn't a link (it has no page of its own), just
   a toggle target -- hence <span> + cursor:pointer rather than <a>. */
.nav-dropdown { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-dropdown-label { cursor: pointer; user-select: none; }
.nav-dropdown:hover .nav-dropdown-label,
.nav-dropdown.open .nav-dropdown-label,
.nav-dropdown-label.is-active {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: inherit;
}
.nav-dropdown-toggle svg { width: 14px; height: 14px; transition: transform 200ms ease; }
.nav-dropdown.open .nav-dropdown-toggle svg { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 14px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 8px;
  min-width: 160px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
  z-index: 50;
}
.nav-dropdown-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-navy);
  border-bottom: none;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a[aria-current="page"] { background: var(--color-surface); color: var(--color-primary); }
@media (hover: hover) {
  .nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
}
.nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-cta { display: flex; align-items: center; gap: 20px; justify-self: end; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
}
.nav-toggle svg { width: 26px; height: 26px; color: var(--color-ink); flex-shrink: 0; }

/* Hero -- animated dashboard scene (laptop, calculator, floating metric
   cards) stands in for "the books are balanced" instead of a photo. */
.hero {
  background:
    radial-gradient(circle at 18% 20%, rgba(27,159,218,0.22), transparent 30%),
    linear-gradient(135deg, #E9F3F8 0%, #D6ECF5 55%, #C9E3F1 100%);
  color: var(--color-navy);
  padding: 168px 0 80px;
  min-height: 92vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.9fr 1.2fr;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: 1700px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 56px);
  padding-right: clamp(20px, 4vw, 56px);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-eyebrow);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 10px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--color-primary);
}
.hero-eyebrow svg { width: 14px; height: 14px; }

.hero h1 {
  color: var(--color-navy);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  max-width: 32ch;
}
.hero h1 .word { display: inline-block; }
.hero-headline-accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
}

/* Hero load sequence: hidden only once JS confirms it will run the timeline
   (see the html.js-gating pattern used for .chart-line) -- with no JS, the
   whole hero just renders in its finished state. */
html.js #heroEyebrow,
html.js #heroLead,
html.js #heroActions,
html.js #heroStats { opacity: 0; transform: translateY(16px); }
html.js #heroHeadline .word { display: inline-block; opacity: 0; transform: translateY(14px); }

.hero-lead { color: #3E5561; font-size: 1.15rem; max-width: 62ch; margin: 0 0 40px; }

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-start; margin-bottom: 40px; }

.hero-stats-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 18px 16px;
  box-shadow: var(--shadow-md);
}

/* Standalone stat row: tabular mono figures in ruled columns, like a
   ledger footer -- not the generic gradient-number hero move. */
.stat-row {
  display: flex;
  justify-content: flex-start;
  gap: 0;
  flex-wrap: wrap;
  max-width: 460px;
  margin: 0;
}
.stat-row-item {
  flex: 1 1 0;
  min-width: 110px;
  padding: 0 18px;
  border-left: 1px solid rgba(14,42,71,0.18);
  text-align: left;
}
.stat-row-item:first-child { border-left: none; }
.stat-row-value {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 2.8vw, 1.9rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-navy);
  line-height: 1;
  margin-bottom: 8px;
  text-shadow: 0 1px 3px rgba(255,255,255,0.7);
}
.stat-row-label {
  font-size: 0.72rem;
  color: var(--color-navy);
  letter-spacing: 0.02em;
  font-weight: 500;
}

/* Hero scene -- supplied dashboard illustration, standing in for "the
   books are balanced," on the right of the hero. Its animations (chart
   lines drawing, floating card, background orb) live inside the SVG
   itself and keep playing when loaded via <img>. */
.hero-scene {
  position: relative;
  width: 100%;
  max-width: 858px;
  margin: 0 0 0 auto;
  z-index: 1;
}
.hero-dashboard-img { width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; align-items: center; }
  .hero-scene { max-width: 728px; margin: 0 auto; }
}
/* Trust strip (marquee) */
.trust-strip { padding: 36px 0; border-bottom: 1px solid var(--color-border); overflow: hidden; }
.trust-strip-label {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 32px;
}
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: marquee-scroll 55s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.trust-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-navy);
  opacity: 0.8;
  transition: opacity 150ms ease;
  white-space: nowrap;
}
.trust-logo:hover { opacity: 1; }
.trust-logo svg { width: 24px; height: 24px; color: var(--color-primary); flex-shrink: 0; }
.trust-logo img { height: 34px; width: auto; object-fit: contain; }

/* Insight illustration (pinned scroll-scrub section) */
.insight {
  background: linear-gradient(155deg, #123A60 0%, var(--color-navy) 55%, #0A1F35 100%);
  color: #FFFFFF;
  padding: 116px 0;
  position: relative;
  overflow: hidden;
}
.insight .container { max-width: 1700px; }
.insight-header { margin: 0 0 32px; text-align: left; }
.insight-header .section-eyebrow { color: #7FD4F2; font-size: 1.04rem; }
.insight-header h2 { color: #FFFFFF; font-size: clamp(2.25rem, 3.6vw, 3.2rem); }
.insight-header p { color: #AFC7DA; margin-top: 16px; font-size: 1.35rem; }

/* Graphic left, services list right, each in its own bordered panel so the
   two halves read as distinct cards sitting side by side. */
.insight-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 90px;
}

.insight-panel {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(127,212,242,0.28);
  border-radius: 20px;
  padding: 52px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.22);
}

.insight-stage { position: relative; margin-top: 8px; }
.insight-illustration { width: 100%; height: auto; overflow: visible; }

.insight-services .section-eyebrow { color: #7FD4F2; font-size: 1.04rem; }
.insight-services h3 { color: #FFFFFF; margin-bottom: 28px; font-size: 1.6rem; }

.insight-services-list { list-style: none; display: flex; flex-direction: column; gap: 34px; }
.insight-services-list li { display: flex; align-items: flex-start; gap: 18px; }
.insight-service-icon {
  width: 57px;
  height: 57px;
  border-radius: 14px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(127,212,242,0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.insight-service-icon svg { width: 29px; height: 29px; color: var(--color-primary); }
.insight-services-list strong { display: block; color: #FFFFFF; font-family: var(--font-heading); font-weight: 600; margin-bottom: 4px; font-size: 1.18rem; }
.insight-services-list span { display: block; color: #AFC7DA; font-size: 1.15rem; margin-bottom: 8px; }
.insight-services-list .card-link { color: var(--color-primary); font-size: 1.1rem; }
.insight-services-list .card-link svg { width: 19px; height: 19px; }

/* Sections */
.section { padding: 72px 0; }
.section-alt { background: var(--color-surface); }
.section-header { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 12px;
}
.section-header p { margin-top: 16px; font-size: 1.05rem; }

/* Cards grid */
.grid { display: grid; gap: 28px; }
.grid > * { min-width: 0; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Zigzag service layout: swap which side the copy/feature-list sits on
   for visual variety on desktop. Reset to natural DOM order on mobile
   (see media query) so the heading never lands below its own bullets. */
.order-1 { order: 1; }
.order-2 { order: 2; }

.card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
  transition: box-shadow 200ms ease, border-color 200ms ease;
  transform-style: preserve-3d;
  will-change: transform;
}
@media (hover: none) {
  .card { transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
}
.card:hover { box-shadow: var(--shadow-md); border-color: transparent; }
/* Fine-pointer devices get JS-driven 3D tilt instead (setupCursorEffects); touch
   devices fall back to a simple lift since there's no meaningful hover/pointer position. */
@media (hover: none) {
  .card:hover { transform: translateY(-4px); }
}

.card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-navy));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.card-icon svg { width: 26px; height: 26px; color: #FFFFFF; }

.card h3 { margin-bottom: 10px; }
.card p { font-size: 0.95rem; margin-bottom: 16px; }
.card-link {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.card-link svg { width: 16px; height: 16px; transition: transform 150ms ease; }
.card-link:hover svg { transform: translateX(3px); }
.card-link-lg { font-size: 1.1rem; }
.card-link-lg svg { width: 20px; height: 20px; }

/* Feature list */
/* Service box -- each service on the Services page gets its own bordered
   card sitting on the section's alt background, instead of alternating
   full-width bands that ran straight into each other. */
.service-box {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 48px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 40px;
  scroll-margin-top: 120px;
}
.service-box:last-child { margin-bottom: 0; }

.feature-list { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.feature-list li { display: flex; align-items: flex-start; gap: 14px; }
.feature-list svg {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px;
  color: var(--color-primary);
}
.feature-list strong { font-family: var(--font-heading); color: var(--color-navy); display: block; margin-bottom: 2px; }
.feature-list span { font-size: 0.92rem; color: var(--color-muted); }
.feature-list .price-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(31, 169, 225, 0.14);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.78rem;
  white-space: nowrap;
  vertical-align: middle;
}

/* Stats band */
.stats-band {
  background: var(--color-navy);
  color: #FFFFFF;
  border-radius: 20px;
  padding: 56px 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stats-band .hero-stat-value { color: #FFFFFF; }
.stats-band .hero-stat-label { color: #AFC7DA; }

/* CTA band */
.cta-band {
  background: linear-gradient(120deg, var(--color-navy), var(--color-primary));
  border-radius: 24px;
  padding: 64px 48px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-band h2 { color: #FFFFFF; margin-bottom: 10px; }
.cta-band p { color: #DCEFFB; max-width: 42ch; }
.cta-band-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.award-photo {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  display: block;
}

/* Scroll cue: real link (not decorative) sitting half on/half off the
   bottom edge of a large lead image, so it reads as a "there's more"
   button rather than a loop of decorative motion. */
.hero-media { position: relative; }
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  z-index: 2;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.scroll-cue:hover { box-shadow: var(--shadow-md); transform: translate(-50%, 50%) translateY(3px); }
.scroll-cue:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.scroll-cue svg {
  width: 36px;
  height: 36px;
  color: var(--color-primary);
  animation: scroll-cue-bounce 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

.map-card { padding: 0; overflow: hidden; }
.map-card iframe { display: block; width: 100%; }

/* Legal / policy pages (Privacy, Cookies) */
.legal-content { max-width: 760px; margin: 0 auto; }
.legal-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.92rem;
}
.legal-meta .card-link { font-size: 0.92rem; }
.legal-content h2 { margin-top: 44px; margin-bottom: 14px; font-size: 1.4rem; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { margin-top: 26px; margin-bottom: 10px; font-size: 1.05rem; color: var(--color-navy); font-family: var(--font-heading); font-weight: 700; }
.legal-content p { margin-bottom: 16px; color: var(--color-muted); line-height: 1.7; }
.legal-content ul { margin: 0 0 16px 20px; color: var(--color-muted); line-height: 1.7; }
.legal-content li { margin-bottom: 10px; }
.legal-content table { width: 100%; border-collapse: collapse; margin: 8px 0 32px; font-size: 0.9rem; }
.legal-content th, .legal-content td { border: 1px solid var(--color-border); padding: 12px 14px; text-align: left; vertical-align: top; color: var(--color-muted); }
.legal-content th { background: var(--color-surface); font-family: var(--font-heading); color: var(--color-navy); font-weight: 700; }
.legal-content table ul { margin: 0 0 0 16px; }
.legal-content table p { margin-bottom: 8px; }

/* FAQ accordion */
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.faq-item {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.faq-item:hover { box-shadow: var(--shadow-md); }
.faq-item.open { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-navy);
}
.faq-question:focus-visible { outline: 3px solid var(--color-primary); outline-offset: -3px; border-radius: 16px; }
.faq-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-primary); transition: transform 250ms ease; }
.faq-item.open .faq-icon { transform: rotate(180deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms ease; }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; }
.faq-answer-inner p { margin: 0; padding: 0 24px 22px; color: var(--color-muted); font-size: 0.98rem; line-height: 1.65; max-width: 68ch; }

/* Testimonial */
.testimonial-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  border-radius: 20px;
  padding: 40px;
  box-shadow: var(--shadow-sm);
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.testimonial-card:nth-child(even) { border-top-color: var(--color-navy); }
.testimonial-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.testimonial-quote-mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.2;
  margin-bottom: -14px;
}
.testimonial-card:nth-child(even) .testimonial-quote-mark { color: var(--color-navy); }

/* Featured pull-quote: one standout review on a dark band, breaking up the
   all-white/all-card rhythm of the reviews grid with a single strong
   moment rather than scattering colour across every card. */
.featured-quote-section {
  background: linear-gradient(155deg, #123A60 0%, var(--color-navy) 55%, #0A1F35 100%);
  color: #FFFFFF;
  padding: 88px 0;
}
.featured-quote { max-width: 780px; margin: 0 auto; text-align: center; }
.featured-quote .testimonial-stars { justify-content: center; }
.featured-quote-text {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin-bottom: 28px;
}
.featured-quote-author { font-family: var(--font-heading); font-weight: 700; color: #FFFFFF; }
.featured-quote-role { color: #9FC2DC; font-size: 0.92rem; margin-top: 2px; }
.testimonial-stars { display: flex; gap: 3px; margin-bottom: 20px; }
.testimonial-stars svg { width: 18px; height: 18px; color: #F5A623; fill: #F5A623; }
.testimonial-quote { font-size: 1.1rem; color: var(--color-foreground); margin-bottom: 28px; line-height: 1.65; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-navy));
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF; font-family: var(--font-heading); font-weight: 700;
}
/* Real client logo instead of a generic initial, boxed square so wildly
   different logo shapes (wordmarks, badges, script logos) all sit consistently. */
.testimonial-logo {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  padding: 6px;
  flex-shrink: 0;
}
.testimonial-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.testimonial-name { font-family: var(--font-heading); font-weight: 600; color: var(--color-navy); font-size: 0.92rem; }
.testimonial-role { font-size: 0.82rem; color: var(--color-muted); }

/* Page header (interior pages) */
.page-header {
  background: var(--color-surface);
  padding: 168px 0 56px;
  border-bottom: 1px solid var(--color-border);
}

/* About page only -- the Rochester photo used for the hero/footer, giving
   this page's Kent-based story a visual anchor right at the top. */
.page-header-photo {
  background:
    linear-gradient(180deg, rgba(6,17,29,0.6) 0%, rgba(6,17,29,0.8) 100%),
    url('../assets/kpm-desk-rochester.png');
  background-size: cover;
  background-position: center 42%;
  border-bottom: none;
}
.page-header-photo .breadcrumb { color: rgba(255,255,255,0.75); }
.page-header-photo .breadcrumb a { color: #7FD4F2; }
.page-header-photo h1 { color: #FFFFFF; }
.page-header-photo p { color: #DCEFFB; }

.breadcrumb { font-size: 0.85rem; color: var(--color-muted); margin-bottom: 16px; }
.breadcrumb a { color: var(--color-primary); font-weight: 600; }
.page-header p { max-width: 60ch; font-size: 1.05rem; margin-top: 14px; }
.page-header-body { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.page-header-illustration { width: 360px; max-width: 42%; height: auto; flex-shrink: 0; }

/* Badges (accreditations) */
.badge-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-navy);
}
.badge svg { width: 18px; height: 18px; color: var(--color-primary); }

/* Team */
.team-avatar {
  width: 100px; height: 100px; border-radius: 50%;
  background: linear-gradient(160deg, var(--color-navy), #06111D);
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF; font-family: var(--font-heading); font-weight: 600; font-size: 1.4rem;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 28px rgba(14, 42, 71, 0.24);
  flex-shrink: 0;
}
.team-role {
  display: inline-block;
  color: var(--color-muted);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
  margin-bottom: 0;
}

/* Featured director profile -- large photo left, intro right. A fine gold
   ring on the avatar reads as seniority rather than a loud badge. */
.team-lead {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 40px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 40px;
  margin-bottom: 40px;
}
.team-lead-photo .team-avatar {
  width: 168px; height: 168px;
  font-size: 2.6rem;
  border: 3px solid #B8912F;
  box-shadow: 0 20px 40px rgba(184, 145, 47, 0.28);
  margin: 0;
}
.team-lead-info h3 { font-size: 1.5rem; margin-bottom: 2px; }
.team-lead-info .team-role { color: #96731F; font-weight: 700; margin-bottom: 14px; }
.team-lead-info p { max-width: 48ch; }

/* Team grid cards -- photo panel with a role tag pinned in the corner (as if
   overlaid on a photo), name below. */
.team-grid-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  text-align: center;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.team-grid-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.team-grid-photo {
  position: relative;
  background: var(--color-surface);
  padding: 36px 0 28px;
}
.team-grid-photo .team-avatar { margin: 0 auto; }
.team-grid-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-navy);
}
.team-grid-card h3 { padding: 18px 16px 24px; font-size: 1.05rem; }

/* Gallery (events) */
.gallery-card { padding: 0; overflow: hidden; }
.gallery-card-images { display: flex; gap: 2px; background: var(--color-border); }
.gallery-thumb {
  flex: 1 1 0;
  aspect-ratio: 1 / 1;
  min-width: 0;
  background: linear-gradient(135deg, var(--color-primary), var(--color-navy));
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-thumb svg { width: 22px; height: 22px; color: rgba(255,255,255,0.8); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-card-images.single .gallery-thumb { aspect-ratio: 16 / 9; }
.gallery-card-body { padding: 26px 28px 30px; }
.gallery-card-category {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.gallery-card-date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--color-muted);
  margin: 6px 0 14px;
}
.gallery-card-date svg { width: 15px; height: 15px; color: var(--color-primary); flex-shrink: 0; }
.gallery-card-body p { font-size: 0.92rem; }

/* Forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-family: var(--font-heading); font-weight: 600; font-size: 0.88rem; color: var(--color-navy); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--color-foreground);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(31, 169, 225, 0.18);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 0.82rem; color: var(--color-muted); margin-top: 4px; }
.form-status {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  display: none;
}
.form-status.visible { display: block; }
.form-status.success { background: #E6F7EC; color: #1A7F45; }
.form-status.error { background: #FDEBEC; color: #C0392B; }

/* Contact info cards */
.contact-info-card { display: flex; gap: 16px; align-items: flex-start; }
.contact-info-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-info-icon svg { width: 20px; height: 20px; color: var(--color-primary); }
.contact-info-card > div { min-width: 0; }
.contact-info-title { font-family: var(--font-heading); font-weight: 600; color: var(--color-navy); margin-bottom: 4px; }
.contact-info-value { font-size: 0.92rem; overflow-wrap: break-word; word-break: break-word; }
.contact-info-value a { color: var(--color-primary); font-weight: 600; }

/* Footer -- same photo as the hero, darkened right down, so the page
   bookends itself instead of just ending on flat navy. The top of the
   overlay starts at the reviews section's own surface colour and fades
   into the dark tint, so it blends in rather than cutting in abruptly. */
.site-footer {
  background-color: #06111D;
  background-image:
    linear-gradient(180deg, var(--color-surface) 0%, rgba(6,17,29,0.45) 6%, rgba(6,17,29,0.72) 16%, rgba(6,17,29,0.72) 100%),
    url('../assets/kpm-desk-rochester.png');
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, cover;
  background-position: center, center 32%;
  color: #C9DCEA;
  padding: 90px 0 380px;
  position: relative;
}
.site-footer .container { max-width: 1440px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.16);
}
.footer-brand img { height: 104px; width: auto; margin-bottom: 20px; }
.footer-brand p { color: #D3E3EE; font-size: 1.02rem; max-width: 34ch; text-shadow: 0 1px 4px rgba(0,0,0,0.55); }
.footer-social { display: flex; gap: 12px; margin-top: 22px; }
.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.footer-social a:hover { background: var(--color-primary); border-color: var(--color-primary); transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-col h4 { color: #FFFFFF; font-size: 1.05rem; margin-bottom: 20px; letter-spacing: 0.02em; text-shadow: 0 1px 4px rgba(0,0,0,0.55); }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.footer-col a { font-size: 1.02rem; color: #D3E3EE; transition: color 150ms ease; text-shadow: 0 1px 4px rgba(0,0,0,0.55); }
.footer-col a:hover { color: var(--color-primary); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 28px; font-size: 0.92rem; color: #C3D3DF; flex-wrap: wrap; gap: 12px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.footer-bottom-links { display: flex; gap: 24px; }
.footer-bottom-links a { color: #C3D3DF; }
.footer-bottom-links a:hover { color: #FFFFFF; }

/* Utility */
.text-center { text-align: center; }
.mt-32 { margin-top: 32px; }

/* Responsive */
@media (max-width: 1024px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats-band { grid-template-columns: repeat(2, 1fr); }
  .insight-body { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 768px) {
  .service-box { padding: 28px 24px; margin-bottom: 24px; }
  /* These two service boxes have the bullet list before the heading in
     the HTML (order:1/2 flips them left/right on desktop) -- on a single
     mobile column that source order would put bullets above the heading,
     so swap the numbers to force the heading first regardless. */
  .order-1 { order: 2; }
  .order-2 { order: 1; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-logo svg, .nav-logo img { height: 62px; }
  /* Unwrap nav-cta so its two children become direct grid items of .nav
     (1fr auto 1fr): logo stays left, the CTA lands centred in the middle
     track, and the burger sits alone in the right track. */
  .nav-cta { display: contents; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 0.85rem; justify-self: center; }
  .nav-toggle { justify-self: end; }
  /* Web only, per request -- also keeps the mobile logo/CTA/burger 3-column
     grid from having a 4th item to place. */
  .nav-portal { display: none; }
  .nav.open .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-bottom: 1px solid var(--color-border);
    padding: 20px 24px 28px;
    gap: 18px;
    box-shadow: var(--shadow-md);
  }
  /* Dropdowns collapse/expand on mobile the same way they do on desktop
     (tap the label or chevron to toggle .open) instead of always being
     shown expanded. Label + chevron share a row; the menu wraps onto its
     own full-width row below via flex-basis. */
  .nav-dropdown { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; width: 100%; }
  .nav-dropdown-label { flex: 1; }
  .nav-dropdown-toggle { display: inline-flex; }
  .nav-dropdown-menu {
    flex-basis: 100%;
    width: 100%;
    position: static;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transform: none;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0 0 0 16px;
    margin-top: 0;
    min-width: 0;
    transition: max-height 220ms ease, opacity 180ms ease;
  }
  .nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    max-height: 260px;
    margin-top: 10px;
  }
  .nav-dropdown-menu a { padding: 4px 0; font-size: 0.92rem; color: var(--color-muted); }
  .hero-scene { display: none; }
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .team-lead { grid-template-columns: 1fr; text-align: center; padding: 32px 24px; }
  .team-lead-photo { display: flex; justify-content: center; }
  .team-lead-info p { margin: 0 auto; }
  .section { padding: 56px 0; }
  .hero { padding: 152px 0 72px; }
  .hero-actions { margin-bottom: 48px; }
  .stat-row { gap: 16px; }
  .stat-row-item { flex: 1 1 45%; border-left: none; padding: 0 8px; }
  .page-header { padding-top: 128px; }
  .page-header-body { flex-direction: column-reverse; gap: 24px; text-align: center; }
  .page-header-illustration { width: 220px; max-width: 60%; }
  .insight { padding: 56px 0; }
  .insight-panel { padding: 28px 24px; }
  .cta-band { flex-direction: column; text-align: center; padding: 48px 28px; }
  .stats-band { grid-template-columns: 1fr 1fr; padding: 40px 24px; }
  .form-grid { grid-template-columns: 1fr; }
}

/* Scroll-reveal (progressively enhanced; content is visible with no JS) */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
}
html.js .hero [data-reveal] {
  transform: translateY(16px);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  html.js [data-reveal] { opacity: 1; transform: none; }
}