/* ==========================================================================
   Hostvisors — Home page styles
   Palette taken from hostvisors.com
   ========================================================================== */

:root {
  /* Brand */
  --navy-900: #0a243b;
  /* headings */
  --navy-800: #0c233c;
  --navy-700: #123e75;
  /* hero background */
  --navy-600: #133f74;
  /* primary / links / footer */
  --blue-500: #3d6399;
  /* secondary blue */
  --lime: #bcff56;
  /* accent */
  --lime-dk: #a5ef34;
  --sky: #d0e8fc;
  /* light blue tint */
  --sky-26: rgba(208, 232, 252, 0.26);
  --surface: #f0f5fa;
  /* light section background */
  --maroon: #9a1f49;
  /* button hover */
  --orange: #ff741a;
  --amber: #ffb656;

  /* Neutrals */
  --white: #ffffff;
  --text: #555555;
  --muted: #7a7a7a;
  --line: #adb6be;

  /* Type */
  --font-head: "Montserrat", "Golos Text", Arial, Helvetica, sans-serif;
  --font-body: "Open Sans", Arial, Helvetica, Verdana, sans-serif;

  /* Layout */
  --wrap: 1340px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 2px 10px rgba(10, 36, 59, 0.07);
  --shadow-md: 0 10px 30px rgba(10, 36, 59, 0.10);
  --shadow-lg: 0 22px 55px rgba(10, 36, 59, 0.16);

  --header-h: 84px;
}

/* --------------------------------------------------------------- Reset --- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}

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

a {
  color: var(--navy-600);
  text-decoration: none;
  transition: color .2s ease;
}

a:hover,
a:focus-visible {
  color: var(--blue-500);
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 .6em;
  font-family: var(--font-head);
  color: var(--navy-900);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.015em;
}

p {
  margin: 0 0 1.15em;
}

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

::selection {
  background: var(--lime);
  color: #000;
}

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

/* -------------------------------------------------------------- Layout --- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding: clamp(2rem, 3.5vw, 3.25rem) 0;
}

.section--tight {
  padding: clamp(1.5rem, 2.5vw, 2.25rem) 0;
}

.section--surface {
  background: var(--surface);
}

.section--tint {
  background: var(--sky-26);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--lime);
  color: var(--navy-900);
  padding: .75rem 1.25rem;
  font-weight: 700;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* Section heads */
.eyebrow {
  display: inline-block;
  margin-bottom: .9rem;
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue-500);
}

.eyebrow::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  margin-top: .55rem;
  border-radius: 4px;
  background: var(--lime);
}

.section-head {
  max-width: 780px;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* Centred contexts: the accent bar has to be centred under the label too.
   .platforms and .leverage centre their text without using .section-head. */
.section-head--center .eyebrow::after,
.platforms .eyebrow::after,
.leverage .eyebrow::after {
  margin-inline: auto;
}

.section-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.85rem);
}

.section-head p {
  font-size: 1.075rem;
  color: var(--text);
}

.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4 {
  color: var(--white);
}

.on-dark p {
  color: rgba(255, 255, 255, .82);
}

.on-dark .eyebrow {
  color: var(--lime);
}

/* ------------------------------------------------------------- Buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.9rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .22s ease, color .22s ease,
    border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn svg {
  width: 17px;
  height: 17px;
}

.btn--primary {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--navy-900);
  box-shadow: 0 8px 22px rgba(188, 255, 86, .32);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--navy-600);
  border-color: var(--navy-600);
  color: var(--white);
  box-shadow: 0 10px 26px rgba(154, 31, 73, .3);
}

.btn--navy {
  background: var(--navy-600);
  border-color: var(--navy-600);
  color: var(--white);
}

.btn--navy:hover,
.btn--navy:focus-visible {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: var(--lime);
}

.btn--ghost {
  background: transparent;
  border-color: currentColor;
  color: var(--navy-600);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--navy-600);
  border-color: var(--navy-600);
  color: var(--white);
}

.on-dark .btn--ghost {
  color: var(--white);
}

.on-dark .btn--ghost:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy-700);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  align-items: center;
}

/* ----------------------------------------------------- Include slots ----- */

/* Holds the header's space while js/includes.js fetches the partial, so the
   page below it doesn't jump once the markup lands. */
[data-include] {
  display: block;
}

[data-include="/partials/header.html"] {
  min-height: calc(var(--header-h) + 2.6rem);
}

/* ------------------------------------------------------ Announcement ----- */

.announce {
  background: var(--navy-900);
  color: rgba(255, 255, 255, .9);
  font-size: .875rem;
  text-align: center;
}

.announce .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .6rem;
  align-items: center;
  justify-content: center;
  padding-block: .6rem;
}

.announce strong {
  color: var(--lime);
  font-weight: 700;
}

.announce a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.announce a:hover {
  color: var(--lime);
}

/* -------------------------------------------------------------- Header --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid rgba(173, 182, 190, .3);
  transition: box-shadow .25s ease;
}

.site-header.is-stuck {
  box-shadow: var(--shadow-sm);
}

.site-header .wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.brand img {
  width: auto;
  height: 40px;
}

/* Primary nav */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.6vw, 1.75rem);
}

.nav>li {
  position: relative;
}

.nav>li>a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .6rem .25rem;
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 600;
  color: var(--navy-900);
  white-space: nowrap;
}

.nav>li>a::after {
  content: "";
  position: absolute;
  left: .25rem;
  right: .25rem;
  bottom: .25rem;
  height: 2px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.nav>li>a:hover::after,
.nav>li.is-open>a::after,
.nav>li>a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav>li>a:hover {
  color: var(--navy-600);
}

.nav .caret {
  width: 11px;
  height: 11px;
  transition: transform .25s ease;
}

.nav li.is-open>a .caret {
  transform: rotate(180deg);
}

/* Dropdowns */
.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  min-width: 244px;
  padding: .5rem;
  background: var(--white);
  border-top: 2px solid var(--lime);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.has-submenu:hover>.submenu,
.has-submenu.is-open>.submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.submenu a {
  display: block;
  padding: .6rem .85rem;
  border-radius: 8px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--navy-900);
}

.submenu a:hover {
  background: var(--sky-26);
  color: var(--navy-600);
}

.header-cta {
  flex: 0 0 auto;
}

.header-cta .btn {
  padding: .8rem 1.5rem;
}

/* The in-nav CTA is a mobile-only duplicate of .header-cta */
.nav .nav-cta {
  display: none;
}

/* Burger */
.burger {
  display: none;
  /* flex at <=1024px */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* bar centres end up exactly 6px apart */
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(173, 182, 190, .5);
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
}

.burger span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy-900);
  transition: transform .25s ease, opacity .2s ease;
}

.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------------------------------------------------------------- Hero --- */

.hero {
  position: relative;
  background: var(--navy-700);
  color: var(--white);
  overflow: hidden;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero::before {
  width: 520px;
  height: 520px;
  top: -230px;
  left: -180px;
  background: radial-gradient(circle, rgba(188, 255, 86, .16), transparent 68%);
}

.hero::after {
  width: 640px;
  height: 640px;
  right: -280px;
  bottom: -340px;
  background: radial-gradient(circle, rgba(208, 232, 252, .16), transparent 68%);
}

.hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  min-height: 60vh;
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

.hero h1 {
  margin-bottom: 1.1rem;
  font-size: clamp(2.1rem, 4.6vw, 3.55rem);
  color: var(--white);
  line-height: 1.12;
}

.hero h1 .accent {
  background-image: linear-gradient(var(--lime), var(--lime));
  background-repeat: no-repeat;
  background-size: 100% 6px;
  background-position: 0 100%;
  padding-bottom: 4px;
}

.hero p.lead {
  max-width: 34em;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: rgba(255, 255, 255, .86);
}

.hero .btn-row {
  margin-top: 2rem;
}

.hero-media {
  position: relative;
}

.hero-media img {
  width: 100%;
  height: auto;
  max-height: 480px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 42%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: auto -14px -14px auto;
  width: 62%;
  height: 62%;
  border: 3px solid var(--lime);
  border-radius: var(--radius-lg);
  z-index: -1;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 2rem;
}

.hero-badges li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .95rem;
  border: 1px solid rgba(208, 232, 252, .35);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  font-size: .84rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
}

.hero-badges li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
}

/* -------------------------------------------------------- Who we are ----- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.split .section-head {
  margin-bottom: 1.5rem;
}

.quote-card {
  position: relative;
  padding: 2.25rem 2.25rem 2.25rem 3.5rem;
  background: var(--white);
  border-left: 5px solid var(--lime);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.quote-card::before {
  content: "\201C";
  position: absolute;
  top: .1rem;
  left: 1rem;
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--sky);
}

.quote-card p {
  font-size: 1.12rem;
  font-style: italic;
  color: var(--navy-900);
}

.quote-card cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-weight: 700;
  font-family: var(--font-head);
  color: var(--blue-500);
}

/* ------------------------------------------------------------ 50/50 band --- */

.band-5050 {
  background: var(--navy-600);
  text-align: center;
}

.band-5050 h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  margin-bottom: .35rem;
}

.band-5050 h2 .lime {
  color: var(--lime);
}

.band-5050 p {
  font-size: 1.12rem;
}

.band-5050 .split-viz {
  display: flex;
  align-items: stretch;
  max-width: 620px;
  margin: 2.25rem auto 0;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(208, 232, 252, .3);
}

.band-5050 .split-viz span {
  flex: 1;
  padding: .8rem 1rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.band-5050 .split-viz span:first-child {
  background: var(--lime);
  color: var(--navy-900);
}

.band-5050 .split-viz span:last-child {
  background: rgba(255, 255, 255, .08);
  color: var(--white);
}

/* --------------------------------------------------- Who we work with ---- */

.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.audience-card {
  padding: 2.25rem 1.9rem;
  background: var(--sky-26);
  border: 1px solid var(--sky);
  border-radius: var(--radius-lg);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.audience-card:hover {
  translate: 0 -6px;
  border-color: var(--navy-600);
  box-shadow: var(--shadow-md);
}

.audience-card .ico {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 1.15rem;
  border-radius: 16px;
  background: var(--navy-600);
  color: var(--lime);
}

.audience-card .ico svg {
  width: 27px;
  height: 27px;
}

.audience-card h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.audience-card li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .55rem;
  font-size: .97rem;
}

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

.audience-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
  border: 1.5px solid var(--navy-600);
}

/* ---------------------------------------------------------- What we do --- */

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.service-card {
  display: flex;
  flex-direction: column;
  padding: 2.15rem 1.9rem;
  background: var(--white);
  border: 1px solid rgba(208, 232, 252, .9);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .28s ease, box-shadow .28s ease;
}

.service-card:hover {
  translate: 0 -7px;
  box-shadow: var(--shadow-lg);
}

.service-card img {
  width: 56px;
  height: 56px;
  margin-bottom: 1.2rem;
  object-fit: contain;
}

.service-card h3 {
  font-size: 1.24rem;
  margin-bottom: .65rem;
}

.service-card p {
  font-size: .97rem;
  flex: 1 1 auto;
}

.service-card .more,
.post-card .more {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1.35rem;
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 700;
  color: var(--navy-600);
}

.service-card .more svg,
.post-card .more svg {
  width: 15px;
  height: 15px;
  /* Without an explicit size the global `svg { max-width: 100% }` lets the
     arrow expand to the card's full width. */
  flex: 0 0 auto;
  transition: transform .22s ease;
}

.service-card .more:hover svg,
.post-card .more:hover svg {
  transform: translateX(4px);
}

/* ------------------------------------------------------------- Leverage --- */

.leverage {
  background: linear-gradient(120deg, var(--navy-700) 0%, var(--navy-900) 100%);
  text-align: center;
}

.leverage h2 {
  max-width: 20ch;
  margin-inline: auto;
  font-size: clamp(1.85rem, 3.8vw, 3rem);
}

.leverage .btn-row {
  justify-content: center;
  margin-top: 2rem;
}

/* --------------------------------------------------- Why we're different -- */

.diff-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.diff-tabs {
  display: grid;
  gap: 1rem;
}

.diff-tab {
  width: 100%;
  padding: 1.4rem 1.6rem;
  text-align: left;
  background: var(--white);
  border: 1px solid rgba(208, 232, 252, .26);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-family: var(--font-head);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.diff-tab:hover {
  transform: translateX(4px);
}

.diff-tab[aria-selected="true"] {
  border-color: var(--navy-600);
  box-shadow: var(--shadow-md);
}

.diff-tab .num {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--blue-500);
  margin-bottom: .3rem;
}

.diff-tab .title {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--blue-500);
  line-height: 1.3;
  transition: color .25s ease;
}

.diff-tab:hover .title {
  color: var(--navy-900);
}

/* The selected tab's label matches its border and number, so the active row
   reads as one colour instead of relying on the border alone. */
.diff-tab[aria-selected="true"] .num {
  color: var(--navy-600);
}

.diff-tab[aria-selected="true"] .title {
  color: var(--navy-600);
}

.diff-panels {
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: var(--sky-26);
  border: 1px solid var(--sky);
  border-radius: var(--radius-lg);
}

.diff-panel {
  display: none;
}

.diff-panel.is-active {
  display: block;
  animation: fadeUp .35s ease both;
}

.diff-panel h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  margin-bottom: .9rem;
}

.diff-panel h3 .kicker {
  display: block;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy-600);
  margin-bottom: .45rem;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------ Platforms --- */

.platforms {
  text-align: center;
}

.platforms h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}

.marquee {
  position: relative;
  margin-top: 2.25rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 1.6rem;
  animation: scroll-x 42s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* Logo tiles. The icons ship with their own backgrounds, so they sit on the
   section directly rather than inside a bordered pill. */
.marquee-track li {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
}

.marquee-track li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
}

/* Fallback pill, applied by js/main.js when a logo file is missing. */
.marquee-track li.is-text {
  width: auto;
  height: auto;
  padding: .7rem 1.5rem;
  background: var(--white);
  border: 1px solid rgba(173, 182, 190, .4);
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 600;
  color: var(--navy-900);
  white-space: nowrap;
}

@keyframes scroll-x {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------- Testimonials --- */

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem 1rem;
  /* tight between columns, roomier when they stack */
}

.testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  /* <figure> carries a UA default of `margin: 1em 40px`, which was silently
     shaving 80px off every card's width. */
  margin: 0;
  padding: 2.25rem 2rem 1.85rem;
  background: var(--white);
  border: 1px solid rgba(173, 182, 190, .3);
  border-top: 4px solid var(--lime);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(10, 36, 59, .04),
    0 14px 30px -20px rgba(10, 36, 59, .3);
  transition: translate .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* These cards also carry .reveal, which owns `transform` and `transition` on
   the same element. The lift uses the independent `translate` property so it
   composes with the entrance animation instead of fighting it, and the
   entrance timings are restated here so the hover transitions can join them. */
.testimonial.is-visible {
  transition: opacity .6s ease var(--reveal-delay, 0ms),
    transform .6s ease var(--reveal-delay, 0ms),
    translate .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.testimonial:hover {
  translate: 0 -4px;
  /* Sides and bottom only — a blanket border-color would repaint the lime cap. */
  border-inline-color: rgba(19, 63, 116, .3);
  border-bottom-color: rgba(19, 63, 116, .3);
  box-shadow: 0 2px 4px rgba(10, 36, 59, .05),
    0 24px 46px -24px rgba(10, 36, 59, .4);
}

/* Watermark quote glyph, echoing the .quote-card in the About section. */
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: .55rem;
  right: 1.4rem;
  font-family: var(--font-head);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--sky);
  pointer-events: none;
  user-select: none;
}

.testimonial .stars {
  display: flex;
  gap: .2rem;
  margin-bottom: 1.05rem;
  color: var(--amber);
}

.testimonial .stars svg {
  width: 16px;
  height: 16px;
}

.testimonial blockquote {
  position: relative;
  margin: 0 0 1.5rem;
  flex: 1 1 auto;
  font-size: .99rem;
  line-height: 1.62;
  color: var(--text);
}

.testimonial blockquote p {
  margin-bottom: .6rem;
}

.testimonial figcaption {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(173, 182, 190, .35);
}

/* Reserves room for a name plus a two-line company/location, so the divider
   rules line up across all three cards however long each attribution runs.
   Measured: the tallest attribution is 4.66rem. */
.testimonial .who {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 4.7rem;
}

.testimonial .avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  background: var(--navy-600);
  color: var(--lime);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  overflow: hidden;
}

.testimonial .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Company logos rather than photos: they arrive on transparent backgrounds and
   are often dark, so they need a light ground instead of the navy default, and
   `contain` so the whole mark shows rather than being cropped to a circle. */
.testimonial .avatar--logo {
  background: var(--white);
  border: 1px solid rgba(173, 182, 190, .45);
  padding: 4px;
}

.testimonial .avatar--logo img {
  object-fit: contain;
}

.testimonial .who strong {
  display: block;
  font-family: var(--font-head);
  color: var(--navy-900);
  font-size: 1rem;
}

.testimonial .who span {
  font-size: .87rem;
  color: var(--muted);
}

/* ------------------------------------------------------------ Final CTA --- */

.cta-final {
  background: var(--lime);
  text-align: center;
}

.cta-final h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  color: var(--navy-900);
  margin-bottom: .6rem;
}

.cta-final p {
  font-size: 1.1rem;
  color: rgba(10, 36, 59, .78);
}

.cta-final .btn-row {
  justify-content: center;
  margin-top: 2rem;
}

.cta-final .btn--navy:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy-900);
}

/* -------------------------------------------------------------- Footer --- */

.site-footer {
  background: var(--navy-600);
  color: rgba(255, 255, 255, .78);
  font-size: .93rem;
}

.site-footer a {
  color: rgba(255, 255, 255, .78);
}

.site-footer a:hover {
  color: var(--lime);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.5rem 2rem;
  padding-block: clamp(3rem, 0vw, 4.5rem);
}

.footer-brand img {
  height: 42px;
  width: auto;
  margin-bottom: 0;
}

.footer-brand p {
  max-width: 32ch;
}

.footer-mail {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .35rem;
  font-weight: 600;
  color: var(--white) !important;
}

.footer-mail svg {
  width: 17px;
  height: 17px;
  color: var(--lime);
}

.socials {
  display: flex;
  gap: .6rem;
  margin-top: 1.5rem;
}

.socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}

.socials a svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.socials a:hover {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--navy-900);
}

.footer-col h4 {
  margin-bottom: 1.1rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
}

.footer-col li {
  margin-bottom: .6rem;
}

.footer-bottom {
  padding-block: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.footer-bottom .legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  margin-bottom: 1.1rem;
}

.footer-bottom .legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.disclaimer {
  font-size: .8rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .55);
  max-width: 95ch;
}

/* --------------------------------------------------- Hero entrance fx --- */

/* The hero sits above the fold, so it animates on load rather than on scroll.
   `backwards` holds each element hidden through its delay. */
.hero-copy>*,
.hero-media {
  animation: heroIn .75s cubic-bezier(.22, .68, .3, 1) backwards;
}

.hero-copy h1 {
  animation-delay: .08s;
}

.hero-copy .lead {
  animation-delay: .20s;
}

.hero-copy .btn-row {
  animation-delay: .32s;
}

.hero-copy .hero-badges {
  animation-delay: .44s;
}

.hero-media {
  animation-delay: .18s;
}

/* The badges cascade within their own row, after the row itself lands. */
.hero-badges li {
  animation: heroIn .6s cubic-bezier(.22, .68, .3, 1) backwards;
}

.hero-badges li:nth-child(1) {
  animation-delay: .52s;
}

.hero-badges li:nth-child(2) {
  animation-delay: .60s;
}

.hero-badges li:nth-child(3) {
  animation-delay: .68s;
}

@keyframes heroIn {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------ 3D tilt --- */

/* Perspective lives on the parent so siblings share one vanishing point —
   put it on each card and they'd each get their own and the row would skew. */
.hero .wrap,
.service-grid,
.audience-grid {
  perspective: 1200px;
}

/* `transform` on these elements is already spoken for: .reveal drives the
   cards, heroIn drives .hero-media. The tilt therefore uses the independent
   `rotate` property and the lift uses `translate`, so all three compose
   instead of overwriting one another. js/main.js sets `rotate` inline. */
.service-card.is-visible,
.audience-card.is-visible {
  transition: opacity .6s ease var(--reveal-delay, 0ms),
    transform .6s ease var(--reveal-delay, 0ms),
    rotate .16s ease-out, translate .22s ease,
    box-shadow .28s ease, border-color .28s ease;
}

.hero-media {
  transition: rotate .16s ease-out;
}

/* ----------------------------------------------------------- Reveal fx --- */

/* --reveal-delay is set per element by js/main.js to cascade grid children.
   It is applied only to the entrance properties so hover/tilt stay instant. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s ease var(--reveal-delay, 0ms),
    transform .6s ease var(--reveal-delay, 0ms);
}

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

/* ---------------------------------------------------------- Responsive --- */

@media (max-width: 1100px) {
  .footer-top {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1024px) {
  :root {
    --header-h: 74px;
  }

  .burger {
    display: flex;
  }

  .header-cta {
    display: none;
  }

  /* Drawer hangs off the header's real bottom edge — the announcement bar
     means the header is not always flush with the top of the viewport. */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    max-height: 75dvh;
    overflow-y: auto;
    padding: 1rem var(--gutter) 2rem;
    background: var(--white);
    border-bottom: 1px solid rgba(173, 182, 190, .35);
    box-shadow: var(--shadow-md);
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav>li {
    border-bottom: 1px solid rgba(173, 182, 190, .25);
  }

  .nav>li>a {
    display: flex;
    justify-content: space-between;
    padding: 1rem .25rem;
    font-size: 1.02rem;
  }

  .nav>li>a::after {
    display: none;
  }

  .submenu {
    position: static;
    translate: none;
    min-width: 0;
    padding: 0 0 .75rem .75rem;
    border: 0;
    border-left: 2px solid var(--lime);
    margin-left: .25rem;
    border-radius: 0;
    box-shadow: none;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .has-submenu:hover>.submenu {
    display: none;
  }

  .has-submenu.is-open>.submenu {
    display: block;
  }

  .nav .nav-cta {
    display: block;
    padding-top: 1.15rem;
    border-bottom: 0;
  }

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

  .hero .wrap {
    grid-template-columns: 1fr;
  }

  .hero-media {
    max-width: 620px;
  }

  .hero-media::after {
    display: none;
  }

  .split {
    grid-template-columns: 1fr;
  }

  .diff-layout {
    grid-template-columns: 1fr;
  }

  .diff-tab:hover {
    transform: none;
  }
}

@media (max-width: 900px) {

  .audience-grid,
  .service-grid,
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  body {
    font-size: .97rem;
  }

  .audience-grid,
  .service-grid,
  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .btn {
    width: 100%;
  }

  .btn-row {
    flex-direction: column;
    align-items: stretch;
  }

  .announce {
    font-size: .8rem;
  }

  .footer-bottom .legal {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    /* Delays need clearing too: the staggered hero and grid entrances hold
       elements hidden through their delay, so zeroing only the durations
       would still blank them for up to .68s. !important also beats the
       inline transition-delay that js/main.js sets for the grid cascade. */
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   About Us page
   ========================================================================== */

/* Shorter hero for interior pages — the home hero reserves 60vh for its
   badge stack, which an interior page doesn't have. */
.hero--page .wrap {
  min-height: 42vh;
}

/* --------------------------------------------------------- Our founder --- */

.founder {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.founder-media {
  position: relative;
}

.founder-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

/* Offset accent frame, echoing the lime outline on the hero image. */
.founder-media::after {
  content: "";
  position: absolute;
  inset: auto -14px -14px auto;
  width: 58%;
  height: 58%;
  border: 3px solid var(--lime);
  border-radius: var(--radius-lg);
}

.founder-copy .section-head {
  margin-bottom: 1.5rem;
}

.founder-copy .section-head h2 {
  margin-bottom: .25rem;
}

.founder-role {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--blue-500);
}

.founder .btn-row {
  margin-top: 1.75rem;
}

/* ------------------------------------------------ Education & certs --- */

.credential-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.credential-card {
  padding: 2.25rem 2rem;
  background: var(--white);
  border: 1px solid rgba(173, 182, 190, .3);
  border-top: 4px solid var(--lime);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(10, 36, 59, .04),
    0 14px 30px -20px rgba(10, 36, 59, .3);
}

.credential-card h3 {
  font-size: 1.2rem;
  margin-bottom: 1.1rem;
}

.credential-card li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .6rem;
  color: var(--text);
}

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

.credential-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  border: 1px solid var(--navy-600);
}

/* ---------------------------------------------------------- Your team --- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.team-card {
  /* <figure> defaults to `margin: 1em 40px`, which would shrink every card. */
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.25rem 1.75rem 1.9rem;
  background: var(--white);
  border: 1px solid rgba(173, 182, 190, .3);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(10, 36, 59, .04),
    0 14px 30px -20px rgba(10, 36, 59, .3);
  /* .reveal owns `transform` on these cards, so the lift uses `translate`.
     This rule sits after .reveal in the file and would otherwise replace its
     transition outright, so the entrance timings are restated here — with the
     stagger delay scoped to them, keeping the hover lift instant. */
  transition: opacity .6s ease var(--reveal-delay, 0ms),
    transform .6s ease var(--reveal-delay, 0ms),
    translate .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.team-card:hover {
  translate: 0 -5px;
  border-color: rgba(19, 63, 116, .3);
  box-shadow: 0 2px 4px rgba(10, 36, 59, .05),
    0 24px 46px -24px rgba(10, 36, 59, .4);
}

/* The portraits were shot against a mix of backdrops — purple, grey, blue,
   cream. A circular crop keeps only the head and shoulders, so the grid reads
   as one consistent set instead of nine mismatched rectangles. */
.team-card img {
  width: 148px;
  height: 148px;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--white), 0 0 0 5px rgba(173, 182, 190, .45);
  transition: box-shadow .25s ease;
}

.team-card:hover img {
  box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--lime);
}

.team-card figcaption {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 1.25rem;
  /* Roles run to two lines for some members; reserving the space keeps every
     card the same height so the rows stay level. Measured: the tallest
     caption needs 5.71rem including its padding. */
  min-height: 5.8rem;
}

.team-card h3 {
  font-size: 1.1rem;
  margin-bottom: .35rem;
}

.team-card p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--muted);
}

/* -------------------------------------------------- About responsive --- */

@media (max-width: 1024px) {
  .founder {
    grid-template-columns: 1fr;
  }

  .founder-media {
    max-width: 380px;
  }
}

@media (max-width: 900px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {

  .credential-grid,
  .team-grid {
    grid-template-columns: 1fr;
  }

  .founder-media {
    max-width: 100%;
  }
}

/* ==========================================================================
   Glossary page
   ========================================================================== */

/* Text-only hero — no media column, so the copy spans the full width. */
.hero--narrow .wrap {
  grid-template-columns: 1fr;
  min-height: 0;
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
}

.hero--narrow .hero-copy {
  max-width: 900px;
}

.hero--narrow h1 {
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
}

/* ------------------------------------------------------- A–Z jump bar --- */

.glossary-nav {
  position: sticky;
  top: calc(var(--header-h) + .5rem);
  z-index: 20;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding: .85rem 1rem;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(173, 182, 190, .35);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.glossary-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem;
}

.glossary-nav a {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding-inline: .5rem;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: .85rem;
  font-weight: 700;
  color: var(--navy-900);
  transition: background-color .2s ease, color .2s ease;
}

.glossary-nav a:hover,
.glossary-nav a:focus-visible {
  background: var(--navy-600);
  color: var(--white);
}

/* Letter for the section currently in view — set by js/main.js. Uses the brand
   lime so it stays distinct from the navy hover state. */
.glossary-nav a.is-active {
  background: var(--lime);
  color: var(--navy-900);
}

.glossary-nav a.is-active:hover {
  background: var(--navy-600);
  color: var(--white);
}

/* ------------------------------------------------------------- Groups --- */

.glossary-group {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(173, 182, 190, .3);
  /* Clears the sticky header AND the sticky A–Z bar, so a jump link doesn't
     land the first term underneath them. */
  scroll-margin-top: calc(var(--header-h) + 6rem);
}

.glossary-group:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.glossary-letter {
  position: sticky;
  top: calc(var(--header-h) + 5.5rem);
  align-self: start;
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--blue-500);
}

/* ------------------------------------------------------------- Entries --- */

.glossary-list {
  margin: 0;
  display: grid;
  gap: 1.15rem;
}

.glossary-item {
  padding: 1.25rem 1.4rem;
  background: var(--white);
  border: 1px solid rgba(173, 182, 190, .3);
  border-left: 3px solid var(--lime);
  border-radius: var(--radius);
  transition: border-color .22s ease, box-shadow .22s ease, translate .22s ease;
}

.glossary-item:hover {
  translate: 0 -2px;
  border-inline-end-color: rgba(19, 63, 116, .3);
  box-shadow: var(--shadow-sm);
}

.glossary-item dt {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--navy-900);
  margin-bottom: .3rem;
}

.glossary-item dd {
  margin: 0;
  color: var(--text);
}

.glossary-item dd strong {
  color: var(--navy-800);
  font-weight: 600;
}

/* -------------------------------------------------- Glossary responsive --- */

@media (max-width: 700px) {
  .glossary-group {
    grid-template-columns: 1fr;
    gap: .75rem;
  }

  .glossary-letter {
    position: static;
  }

  .glossary-nav {
    border-radius: var(--radius);
  }
}

/* ==========================================================================
   FAQs page
   ========================================================================== */

/* ------------------------------------------------------ Category nav --- */

.faq-nav {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.faq-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.faq-nav a {
  display: inline-flex;
  align-items: center;
  padding: .6rem 1.15rem;
  background: var(--white);
  border: 1px solid rgba(173, 182, 190, .4);
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: .88rem;
  font-weight: 600;
  color: var(--navy-900);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.faq-nav a:hover,
.faq-nav a:focus-visible {
  background: var(--navy-600);
  border-color: var(--navy-600);
  color: var(--white);
}

/* Category for the section currently in view — set by js/main.js. Brand lime,
   matching the glossary jump bar and distinct from the navy hover state. */
.faq-nav a.is-active {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--navy-900);
}

.faq-nav a.is-active:hover {
  background: var(--navy-600);
  border-color: var(--navy-600);
  color: var(--white);
}

/* ---------------------------------------------------------- Groups --- */

.faq-group {
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
  scroll-margin-top: calc(var(--header-h) + 2rem);
}

.faq-category {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  margin-bottom: 1.1rem;
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--sky);
}

.faq-items {
  display: grid;
  gap: .85rem;
}

/* --------------------------------------------------------- Accordion --- */

/* <details> gives keyboard support, screen-reader semantics and open/close
   for free — no JS needed, and it still works if scripting fails. */
.faq-item {
  background: var(--white);
  border: 1px solid rgba(173, 182, 190, .35);
  border-radius: var(--radius);
  transition: border-color .22s ease, box-shadow .22s ease;
}

.faq-item[open],
.faq-item:hover {
  border-color: rgba(19, 63, 116, .35);
  box-shadow: var(--shadow-sm);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--navy-900);
  list-style: none;
}

/* Hide the native disclosure triangle in both engines. */
.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::marker {
  content: "";
}

.faq-item summary:hover {
  color: var(--navy-600);
}

.faq-chevron {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--blue-500);
  transition: rotate .25s ease;
}

.faq-item[open] .faq-chevron {
  rotate: 180deg;
}

.faq-answer {
  padding: 0 1.35rem 1.25rem;
  color: var(--text);
}

.faq-answer p {
  margin-bottom: .8rem;
}

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

.faq-bullets {
  display: grid;
  gap: .4rem;
  margin: .3rem 0 .8rem;
}

.faq-bullets li {
  position: relative;
  padding-left: 1.4rem;
}

.faq-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  border: 1px solid var(--navy-600);
}

@media (max-width: 640px) {
  .faq-item summary {
    padding: .95rem 1.1rem;
    font-size: .97rem;
  }

  .faq-answer {
    padding: 0 1.1rem 1.1rem;
  }
}

/* ==========================================================================
   Pricing page
   ========================================================================== */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.25rem 1.9rem 2rem;
  background: var(--white);
  border: 1px solid rgba(173, 182, 190, .32);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(10, 36, 59, .04),
    0 14px 30px -20px rgba(10, 36, 59, .3);
  /* .reveal owns `transform` on these cards, so the lift uses `translate`. */
  transition: opacity .6s ease var(--reveal-delay, 0ms),
    transform .6s ease var(--reveal-delay, 0ms),
    translate .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.plan-card:hover {
  translate: 0 -5px;
  border-color: rgba(19, 63, 116, .3);
  box-shadow: 0 2px 4px rgba(10, 36, 59, .05),
    0 24px 46px -24px rgba(10, 36, 59, .4);
}

/* Highlighted tier */
.plan-card--featured {
  border-color: var(--navy-600);
  border-top: 4px solid var(--lime);
}

.plan-badge {
  position: absolute;
  top: -.75rem;
  left: 1.9rem;
  padding: .3rem .8rem;
  background: var(--lime);
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy-900);
}

.plan-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: 1.1rem;
}

.plan-card h3 {
  font-size: 1.3rem;
  margin-bottom: .5rem;
}

.plan-note {
  margin-bottom: 1rem;
  font-size: .87rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.plan-features {
  display: grid;
  gap: .6rem;
  margin-bottom: 1.75rem;
  /* Pushes the CTA to the bottom so buttons line up across the row. */
  flex: 1 1 auto;
}

.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .95rem;
  color: var(--text);
}

.plan-features svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: .38em;
  color: var(--navy-600);
}

.plan-cta {
  align-self: stretch;
  margin-top: auto;
}

/* ---------------------------------------------------------- Pull quotes --- */

.pull-quote blockquote {
  max-width: 46ch;
  margin: 0 auto;
  text-align: center;
}

.pull-quote p {
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy-900);
  margin-bottom: .75rem;
}

.pull-quote cite {
  font-style: normal;
  font-weight: 600;
  color: var(--blue-500);
}

.pull-quote.on-dark {
  background: linear-gradient(120deg, var(--navy-700) 0%, var(--navy-900) 100%);
}

.pull-quote.on-dark p {
  color: var(--white);
}

.pull-quote.on-dark cite {
  color: var(--lime);
}

/* ---------------------------------------------------- Pricing responsive --- */

@media (max-width: 900px) {
  .plan-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .plan-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Financial Management page
   ========================================================================== */

.fm-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.fm-feature {
  padding: 2rem 1.9rem;
  background: var(--white);
  border: 1px solid rgba(173, 182, 190, .3);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(10, 36, 59, .04),
    0 14px 30px -20px rgba(10, 36, 59, .3);
  transition: opacity .6s ease var(--reveal-delay, 0ms),
    transform .6s ease var(--reveal-delay, 0ms),
    translate .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.fm-feature:hover {
  translate: 0 -4px;
  border-color: rgba(19, 63, 116, .3);
  box-shadow: 0 2px 4px rgba(10, 36, 59, .05),
    0 24px 46px -24px rgba(10, 36, 59, .4);
}

.fm-feature h3 {
  font-size: 1.2rem;
  margin-bottom: .6rem;
}

.fm-feature p {
  margin: 0;
}

/* ------------------------------------------------------- How it works --- */

.fm-steps {
  display: grid;
  gap: 1.25rem;
  counter-reset: fm;
}

.fm-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1.6rem 1.75rem;
  background: var(--white);
  border: 1px solid rgba(173, 182, 190, .3);
  border-left: 3px solid var(--lime);
  border-radius: var(--radius);
  transition: opacity .6s ease var(--reveal-delay, 0ms),
    transform .6s ease var(--reveal-delay, 0ms),
    translate .22s ease, box-shadow .22s ease;
}

.fm-step:hover {
  translate: 0 -3px;
  box-shadow: var(--shadow-sm);
}

.fm-step-num {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--sky);
  -webkit-text-stroke: 1px var(--blue-500);
}

.fm-step h3 {
  font-size: 1.12rem;
  margin-bottom: .4rem;
}

.fm-step p {
  margin: 0;
}

/* ------------------------------------------------------- Good hands band --- */

.fm-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.fm-kicker {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--navy-600);
}

/* --------------------------------------------------------- FM responsive --- */

@media (max-width: 900px) {
  .fm-feature-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .fm-step {
    grid-template-columns: 1fr;
    gap: .5rem;
  }
}

/* ------------------------------------------------- Four-up service row --- */

/* The Financial Management page has exactly four services and wants them on a
   single row. These rules sit at the end of the file deliberately: the generic
   .service-grid breakpoints above carry the same specificity, so the narrow
   overrides have to be restated here or they'd lose to the 4-column rule. */
.service-grid--four {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) {
  .service-grid--four {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .service-grid--four {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------- Leverage: card variant --- */

/* Contained navy card rather than the full-bleed gradient band. The section
   itself goes transparent and .wrap becomes the card, so it inherits the site
   width and gutters automatically. */
.leverage--card {
  background: none;
  padding-block: clamp(3rem, 2.5vw, 2rem);
}

.leverage--card .wrap {
  background: var(--navy-600);
  border-radius: var(--radius-lg);
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}

/* Plain white label — no uppercase tracking and no lime rule underneath. */
.leverage--card .eyebrow {
  margin-bottom: .55rem;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--white);
}

.leverage--card .eyebrow::after {
  display: none;
}

.leverage--card h2 {
  max-width: 34ch;
  margin-inline: auto;
  margin-bottom: 0;
  text-transform: capitalize;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
}

.leverage--card .btn-row {
  margin-top: 1.75rem;
}

/* Squared-off button to match the card's geometry. */
.leverage--card .btn {
  padding: .75rem 1.4rem;
  border-radius: 6px;
  box-shadow: none;
}

/* --------------------------------------------- FM: integrations tint --- */

/* The integrations marquee is a shared partial, so it can't carry a
   background modifier of its own without changing the home page too. Scoped
   here to the Financial Management page, where it takes the tint that the
   "Our difference" section gave up. */
.page-fm #integrations {
  background: var(--surface);
}

/* ==========================================================================
   PMS Setup & Automations page
   ========================================================================== */

.pms-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* Flip cards. The card is the perspective host; .pms-flip is what rotates, so
   it never touches the `transform` that .reveal owns on .pms-card itself. */
.pms-card {
  perspective: 1400px;
  border-radius: var(--radius-lg);
  transition: opacity .6s ease var(--reveal-delay, 0ms),
    transform .6s ease var(--reveal-delay, 0ms);
}

.pms-card:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}

.pms-flip {
  position: relative;
  height: 100%;
  min-height: 340px;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.pms-card:hover .pms-flip,
.pms-card:focus-visible .pms-flip,
.pms-card:focus-within .pms-flip {
  transform: rotateY(180deg);
}

.pms-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(173, 182, 190, .32);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(10, 36, 59, .04),
    0 14px 30px -20px rgba(10, 36, 59, .3);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.pms-back {
  transform: rotateY(180deg);
  align-items: center;
  justify-content: center;
  padding: 1.75rem 1.5rem;
  text-align: center;
}

.pms-back p {
  margin: 0;
  font-weight: 600;
  color: var(--navy-900);
}

.pms-front img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  padding: 1rem 1rem 0;
  background: var(--sky-26);
}

.pms-card-body {
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.5rem 1.6rem;
}

.pms-card h3 {
  font-size: 1.08rem;
  margin-bottom: .5rem;
}

.pms-card p {
  margin-bottom: .65rem;
  font-size: .93rem;
}

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

.pms-lead {
  font-weight: 600;
  color: var(--navy-800);
}

/* No hover on touch: stack both faces so the back copy stays reachable. */
@media (hover: none) {
  .pms-flip {
    min-height: 0;
    transform: none !important;
    transform-style: flat;
  }

  .pms-face {
    position: static;
    backface-visibility: visible;
  }

  .pms-back {
    transform: none;
    margin-top: -1px;
    border-top: 0;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    text-align: left;
    align-items: stretch;
    padding-top: 0;
  }

  .pms-front {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
}

/* -------------------------------------------------------- PMS responsive --- */

@media (max-width: 1100px) {
  .pms-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .pms-grid {
    grid-template-columns: 1fr;
  }
}

/* Kicker above a service card title (Operations Support page). */
.service-kicker {
  display: block;
  margin-bottom: .2rem;
  font-family: var(--font-head);
  font-size: .88rem;
  font-weight: 600;
  color: var(--blue-500);
}

/* --------------------------------------------------- Two-up service row --- */

/* Advisory Services runs two cards per row. Like --four, these rules sit at the
   end of the file: the generic .service-grid breakpoints share their
   specificity, so the narrow override has to be restated to win. */
.service-grid--two {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 640px) {
  .service-grid--two {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Articles — index + single post
   ========================================================================== */

.article-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

.article-list {
  display: grid;
  gap: 1.25rem;
}

.post-card {
  padding: 1.85rem 2rem;
  background: var(--white);
  border: 1px solid rgba(173, 182, 190, .3);
  border-left: 3px solid var(--lime);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(10, 36, 59, .04),
    0 14px 30px -20px rgba(10, 36, 59, .3);
  /* .reveal owns `transform` on these cards, so the lift uses `translate`. */
  transition: opacity .6s ease var(--reveal-delay, 0ms),
    transform .6s ease var(--reveal-delay, 0ms),
    translate .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.post-card:hover {
  translate: 0 -4px;
  box-shadow: 0 2px 4px rgba(10, 36, 59, .05),
    0 24px 46px -24px rgba(10, 36, 59, .4);
}

.post-cat {
  display: inline-block;
  margin-bottom: .5rem;
  font-family: var(--font-head);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-500);
}

.post-card h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  margin-bottom: .6rem;
}

.post-card h2 a {
  color: var(--navy-900);
}

.post-card h2 a:hover {
  color: var(--navy-600);
}

/* ------------------------------------------------------------- Sidebar --- */

.article-side {
  padding: 1.6rem 1.5rem;
  background: var(--surface);
  border-radius: var(--radius-lg);
}

.side-title {
  font-size: 1.05rem;
  margin-bottom: .85rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--sky);
}

.cat-list {
  display: grid;
  gap: .5rem;
}

.cat-list a {
  display: block;
  padding: .45rem .7rem;
  border-radius: var(--radius);
  font-weight: 600;
  color: var(--navy-900);
  transition: background-color .2s ease, color .2s ease;
}

.cat-list a:hover {
  background: var(--navy-600);
  color: var(--white);
}

/* --------------------------------------------------------- Single post --- */

.article-body .wrap {
  max-width: 820px;
}

.hero--narrow .eyebrow a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-intro {
  font-size: 1.1rem;
  color: var(--navy-800);
  margin-bottom: 2rem;
}

.article-block {
  margin-bottom: 2rem;
}

.article-block h2 {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  margin-bottom: .9rem;
}

.article-num {
  font-size: .95rem;
  font-weight: 800;
  color: var(--blue-500);
}

.mi-list {
  display: grid;
  gap: 1rem;
}

.mi-list li {
  padding: 1.1rem 1.3rem;
  background: var(--white);
  border: 1px solid rgba(173, 182, 190, .3);
  border-radius: var(--radius);
}

.mi-list p {
  margin-bottom: .5rem;
}

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

/* Inline label so "Mistake" and "Impact" scan without repeating the word. */
.mi-label {
  display: inline-block;
  margin-right: .5rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: var(--sky);
  font-family: var(--font-head);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy-800);
  vertical-align: .08em;
}

.mi-label--impact {
  background: var(--lime);
  color: var(--navy-900);
}

.article-conclusion {
  padding: 1.75rem 1.9rem;
  background: var(--surface);
  border-radius: var(--radius-lg);
}

.article-conclusion h2 {
  font-size: 1.35rem;
  margin-bottom: .7rem;
}

.article-back {
  margin-top: 2rem;
  font-weight: 600;
}

/* --------------------------------------------------- Articles responsive --- */

@media (max-width: 860px) {
  .article-layout {
    grid-template-columns: 1fr;
  }
}