/* ==========================================================================
   Components: BEM-style, one block per section. Order follows the page:
   buttons · header/nav · heroes · trust strip · cards · steps · testimonials
   · FAQ · CTA band · forms · contact · footer · floating buttons · motion
   ========================================================================== */

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.8em 1.4em;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.btn .icon { width: 1.1em; height: 1.1em; vertical-align: 0; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

.btn--primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn--primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); box-shadow: var(--shadow-md); }

.btn--secondary { background: var(--color-secondary); color: var(--n-0); }
.btn--secondary:hover { background: var(--color-secondary-hover); color: var(--n-0); box-shadow: var(--shadow-md); }

.btn--outline { border-color: var(--color-secondary); color: var(--color-secondary); background: transparent; }
.btn--outline:hover { background: var(--color-secondary-soft); color: var(--color-secondary-hover); }

.btn--light { background: var(--n-0); color: var(--navy-600); }
.btn--light:hover { background: var(--navy-50); color: var(--navy-700); box-shadow: var(--shadow-md); }

.btn--outline-light { border-color: rgba(255, 255, 255, 0.7); color: var(--n-0); background: transparent; }
.btn--outline-light:hover { background: var(--n-0); color: var(--navy-800); border-color: var(--n-0); }

.btn--ghost { padding-inline: 0; color: var(--color-primary); border-radius: 0; }
.btn--ghost:hover { color: var(--color-primary-hover); text-decoration: underline; text-underline-offset: 0.2em; }
.btn--ghost .icon { transition: transform var(--duration-fast) var(--ease-out); }
.btn--ghost:hover .icon { transform: translateX(3px); }

.btn--sm { font-size: var(--text-sm); padding: 0.6em 1.1em; }
.btn--lg { font-size: var(--text-lg); padding: 0.9em 1.7em; }
@media (max-width: 479px) { .btn--block-mobile { width: 100%; } }

/* ---- Header ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--n-0);
  box-shadow: 0 1px 0 var(--color-border);
  transition: box-shadow var(--duration-base) var(--ease-out);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }

.topbar {
  display: none;
  background: var(--n-800); /* live site top strip charcoal */
  color: var(--n-0);
  font-size: var(--text-sm);
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; min-height: 2.5rem; }
.topbar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.topbar a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.topbar__contact { display: flex; gap: var(--space-6); }
@media (min-width: 1024px) { .topbar { display: block; } }

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: var(--header-height);
}

/* Brand: the client's complete logo (mark + wordmark, 82×63 px source, shown at ≤ 1:1 so it stays crisp; vector pending) */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--navy-800);
}
.brand__logo { height: 3.9375rem; width: auto; display: block; }        /* 63px = the file's real size */
@media (max-width: 400px) { .brand__logo { height: 3.25rem; } }
.brand--plate { padding: var(--space-3) var(--space-4); background: var(--n-0); border-radius: var(--radius-md); } /* white plate keeps the navy half of the logo visible on dark footers */
.brand--plate .brand__logo { height: 3.5rem; }
/* drawer title reuses the wordmark styles */
.brand__name { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name strong { font-family: var(--font-heading); font-size: 1.25rem; font-weight: var(--weight-bold); letter-spacing: -0.02em; color: var(--blue-500); }
.brand__name span { font-size: 0.6875rem; font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy-600); white-space: nowrap; }

/* Review-only "Design options" (remove with the markup when designs are signed off):
   a native <details> dropdown in the top bar on desktop; a plain drawer item under 1024px */
.topbar__right { display: flex; align-items: center; gap: var(--space-5); }
.review-menu { position: relative; }
.review-menu summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.2rem 0.7rem; border: 1px dashed rgba(255, 255, 255, 0.7); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase;
}
.review-menu summary::-webkit-details-marker { display: none; }
.review-menu summary:hover, .review-menu[open] summary { background: rgba(255, 255, 255, 0.16); border-style: solid; }
.review-menu summary .icon { width: 0.95rem; height: 0.95rem; }
.review-menu__chev { transition: transform var(--duration-fast) var(--ease-out); }
.review-menu[open] .review-menu__chev { transform: rotate(180deg); }
.review-menu__list {
  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: calc(var(--z-header) + 2);
  min-width: 17rem; margin: 0; padding: var(--space-2); list-style: none;
  background: var(--n-0); color: var(--navy-800);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.review-menu__list a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--navy-800); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; white-space: nowrap; }
.review-menu__list a:hover { background: var(--n-50); color: var(--blue-500); }
/* the review menu is a grouped mega panel, one column per area */
.review-menu__mega { display: grid; grid-template-columns: repeat(2, minmax(12rem, 1fr)); gap: var(--space-4) var(--space-6); min-width: min(40rem, calc(100vw - 2rem)); padding: var(--space-5); }
@media (min-width: 900px) { .review-menu__mega { grid-template-columns: repeat(4, minmax(13rem, 1fr)); min-width: 58rem; } }
.review-menu__col ul { list-style: none; margin: 0; padding: 0; }
.review-menu__title { margin: 0 0 var(--space-2); padding: 0 var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); }
.review-menu__col + .review-menu__col { border-left: 1px solid var(--color-border); padding-left: var(--space-4); }
@media (max-width: 899px) { .review-menu__col:nth-child(odd) + .review-menu__col { border-left: 1px solid var(--color-border); } .review-menu__col:nth-child(odd) { border-left: 0; padding-left: 0; } }
.nav__item--review .nav__link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--navy-500); }
.nav__item--review .nav__link .icon { width: 1rem; height: 1rem; color: var(--blue-500); }
@media (min-width: 1024px) { .nav__item--review { display: none; } }

/* Nav toggle (mobile) */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-md);
  color: var(--navy-800);
}
.nav-toggle:hover { background: var(--n-100); }
.nav-toggle .icon { width: 1.5rem; height: 1.5rem; }
.nav-toggle .nav-toggle__close { display: none; }
.nav-open .nav-toggle .nav-toggle__open { display: none; }
.nav-open .nav-toggle .nav-toggle__close { display: block; }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

.header-cta { display: none; }
@media (min-width: 1024px) { .header-cta { display: inline-flex; } }

/* Navigation: mobile drawer first */
.nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(22rem, 100%);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  background: var(--n-0);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav.is-open { transform: none; visibility: visible; transition: transform var(--duration-base) var(--ease-out); }

.nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.nav__close { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; }
.nav__close:hover { background: var(--n-100); }

.nav__list { padding: var(--space-3) 0; }
.nav__item { border-bottom: 1px solid var(--color-border); }
.nav__row { display: flex; align-items: stretch; }
.nav__link {
  flex: 1;
  display: block;
  padding: var(--space-4) var(--space-5);
  color: var(--navy-800);
  font-weight: var(--weight-semibold);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav__link:hover, .nav__link[aria-current] { color: var(--color-primary); }
.nav__sub-toggle {
  width: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-600);
  border-left: 1px solid var(--color-border);
}
.nav__sub-toggle .icon { transition: transform var(--duration-fast) var(--ease-out); }
.nav__item.is-open > .nav__row .nav__sub-toggle .icon { transform: rotate(180deg); }

.nav__sub { display: none; background: var(--n-50); padding: var(--space-2) 0; }
.nav__item.is-open > .nav__sub { display: block; }
.nav__sub-link {
  display: block;
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-8);
  color: var(--n-700);
  text-decoration: none;
  font-size: var(--text-sm);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.nav__sub-link--all { border-top: 1px solid var(--color-border); margin-top: var(--space-1); padding-top: calc(var(--space-2) + var(--space-1)); color: var(--blue-500); }
.nav__sub-link:hover, .nav__sub-link[aria-current] { color: var(--color-primary); }
/* third level (Virtual Numbers › City Numbers › 0121…): an accordion in the drawer */
.nav__sub-row { display: flex; align-items: center; justify-content: space-between; }
.nav__sub-row .nav__sub-link { flex: 1; }
.nav__sub-item > .nav__sub { display: none; padding: 0 0 var(--space-2) var(--space-4); background: transparent; }
.nav__sub-item.is-open > .nav__sub { display: block; }
.nav__sub-item.is-open > .nav__sub-row .nav__sub-toggle .icon { transform: rotate(90deg); }

.nav__footer {
  margin-top: auto;
  padding: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-3);
}
.nav__footer .cluster { justify-content: center; }

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: rgba(11, 26, 54, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base);
}
.nav-open .nav-backdrop { opacity: 1; visibility: visible; transition: opacity var(--duration-base) var(--ease-out); }
.nav-open { overflow: hidden; }

/* Navigation: desktop bar */
@media (min-width: 1024px) {
  .nav {
    position: static;
    z-index: auto;   /* the drawer's z-index would still apply here (flex item) and paint the bar over the top-bar dropdown */
    width: auto;
    transform: none;
    visibility: visible;
    transition: none;
    box-shadow: none;
    background: transparent;
    overflow: visible;
    flex-direction: row;
    align-items: center;
  }
  .nav__head, .nav__footer { display: none; }
  .nav__list { display: flex; align-items: center; gap: var(--space-1); padding: 0; }
  .nav__item { border: 0; position: relative; }
  .nav__row { align-items: center; }
  .nav__link { padding: var(--space-2) var(--space-3); font-size: 0.8125rem; border-radius: var(--radius-md); }
  .nav__link { white-space: nowrap; }
  .nav__link:hover { background: var(--n-50); }
  .nav__link[aria-current] { color: var(--color-primary); }
  .nav__sub-toggle { width: 1.5rem; height: 1.5rem; border: 0; margin-left: -0.35rem; color: var(--navy-500); border-radius: var(--radius-sm); }
  .nav__sub-toggle .icon { width: 1rem; height: 1rem; }

  .nav__sub {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 15rem;
    padding: var(--space-2);
    background: var(--n-0);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), visibility 0s linear var(--duration-fast);
  }
  .nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -0.6rem; height: 0.6rem; } /* hover bridge */
  .nav__item--has-sub:hover > .nav__sub,
  .nav__item--has-sub:focus-within > .nav__sub,
  .nav__item.is-open > .nav__sub {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  }
  .nav__item.is-open > .nav__row .nav__sub-toggle .icon,
  .nav__item--has-sub:hover .nav__sub-toggle .icon { transform: rotate(180deg); }
  .nav__sub-link { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
  .nav__sub-link:hover { background: var(--n-50); }

  /* Services: a two-column mega menu, eight labels, none of them wrapping */
  .nav__sub--mega {
    min-width: 34rem;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-2);
    padding: var(--space-3);
  }
  .nav__sub--mega .nav__sub-link { white-space: nowrap; }

  /* third level: a flyout to the right of its item (to the left when there is no room) */
  .nav__sub-item { position: relative; }
  .nav__sub-row .nav__sub-toggle { margin-left: 0; flex: none; }
  .nav__sub-item > .nav__sub { display: block; padding: var(--space-2); background: var(--n-0); }
  .nav__sub--fly { top: calc(-1 * var(--space-2) - 1px); left: calc(100% + var(--space-2)); }
  .nav__sub--fly::before { top: 0; bottom: 0; left: calc(-1 * var(--space-3)); right: auto; width: var(--space-3); height: auto; }
  .nav__sub--fly.is-flipped { left: auto; right: calc(100% + var(--space-2)); }
  .nav__sub--fly.is-flipped::before { left: auto; right: calc(-1 * var(--space-3)); }
  .nav__sub-item > .nav__sub.nav__sub--cols { display: grid; grid-template-columns: repeat(2, minmax(14rem, 1fr)); gap: 0 var(--space-2); }
  .nav__sub--fly .nav__sub-link { white-space: nowrap; }
  .nav__sub-item--has-sub:hover > .nav__sub,
  .nav__sub-item--has-sub:focus-within > .nav__sub,
  .nav__sub-item.is-open > .nav__sub {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  }
  .nav__sub-item--has-sub:hover > .nav__sub-row .nav__sub-link,
  .nav__sub-item.is-open > .nav__sub-row .nav__sub-link { background: var(--n-50); color: var(--color-primary); }
  .nav__item--has-sub:hover .nav__sub-row .nav__sub-toggle .icon,
  .nav__item.is-open .nav__sub-row .nav__sub-toggle .icon { transform: none; }
  /* no room either side (small laptops): the flyout takes the space there is and long labels wrap */
  .nav__sub-item > .nav__sub.nav__sub--cols.is-tight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav__sub--fly.is-tight .nav__sub-link { white-space: normal; }
  /* a closed flyout takes no room (it would widen the page at the right edge); open, it shows at once */
  .nav__sub-item > .nav__sub.nav__sub--fly { display: none; }
  .nav__sub-item--has-sub:hover > .nav__sub.nav__sub--fly,
  .nav__sub-item--has-sub:focus-within > .nav__sub.nav__sub--fly,
  .nav__sub-item.is-open > .nav__sub.nav__sub--fly { display: block; }
  .nav__sub-item--has-sub:hover > .nav__sub.nav__sub--fly.nav__sub--cols,
  .nav__sub-item--has-sub:focus-within > .nav__sub.nav__sub--fly.nav__sub--cols,
  .nav__sub-item.is-open > .nav__sub.nav__sub--fly.nav__sub--cols { display: grid; }
}

/* seven top-level items on a small laptop: a little less space around each */
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav__link { padding-left: var(--space-2); padding-right: var(--space-2); }
  .nav__sub-toggle { margin-left: -0.5rem; }
}

/* ---- Hero (Home, Career) ------------------------------------------------ */
.hero {
  position: relative;
  background: var(--navy-900);
  color: var(--color-on-dark-muted);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60rem 30rem at 15% 20%, rgba(27, 152, 224, 0.28), transparent 60%),
    radial-gradient(40rem 24rem at 90% 90%, rgba(2, 62, 138, 0.55), transparent 65%);
  pointer-events: none;
}
.hero .container { position: relative; }
.hero__grid {
  display: grid;
  gap: var(--space-8);
  padding-block: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.hero__content { max-width: 36rem; }
.hero__content > * + * { margin-top: var(--space-5); }
.hero__content .eyebrow { color: var(--blue-300); }
.hero__title { color: var(--n-0); font-size: var(--text-5xl); }
.hero__title em { font-style: normal; color: var(--blue-300); }
.hero__lead { font-size: var(--text-lg); max-width: 32rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__note {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  font-size: var(--text-sm); color: var(--color-on-dark-muted);
}
.hero__note span { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__note .icon { color: var(--blue-300); }
.hero__media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-lg);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus, 65% 40%); }
.hero__media::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--blue-500), var(--navy-400));
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem); min-height: 34rem; }
  .hero__media { aspect-ratio: 5 / 4; }
}

/* ---- Page hero (inner pages) ------------------------------------------- */
.page-hero {
  position: relative;
  min-height: 22rem;
  display: flex;
  align-items: flex-end;
  background: var(--navy-900);
  color: var(--color-on-dark-muted);
  overflow: hidden;
}
.page-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus, 50% 40%);
  opacity: 0.8;   /* client: show the photo more clearly */
}
.page-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11, 26, 54, 0.88) 0%, rgba(11, 26, 54, 0.62) 55%, rgba(11, 26, 54, 0.3) 100%);
}
.page-hero .container { position: relative; z-index: 1; padding-block: var(--space-10) var(--space-12); }
.page-hero__title { color: var(--n-0); }
.page-hero__sub { margin-top: var(--space-3); font-size: var(--text-lg); max-width: 40rem; color: rgba(255, 255, 255, 0.92); }
.page-hero--plain { background: linear-gradient(120deg, var(--navy-900), var(--navy-700)); }
@media (min-width: 768px) { .page-hero { min-height: 27rem; } }

/* Breadcrumb */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}
.breadcrumb a { color: var(--color-on-dark-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--n-0); }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2); }
.breadcrumb li + li::before { content: "›"; color: var(--blue-300); }
.breadcrumb [aria-current] { color: var(--n-0); }

/* ---- Trust strip / stats ----------------------------------------------- */
/* Filled cards in the two logo colours only (crimson / navy, alternating), with clear air below the hero */
.trust {
  background: var(--n-0);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-5) var(--space-8);               /* gap under the hero halved on the user's request (was --space-10); on the section, not the ul (reset) */
}
.trust__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) {
  .trust { padding-block: var(--space-8) var(--space-12); }   /* was --space-16 */
  .trust__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
}
.stat {
  --stat-color: var(--blue-500);
  --stat-hover: var(--blue-600);
  position: relative;
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-6) var(--space-5);
  background: var(--stat-color);
  color: var(--n-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out);
}
.stat:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); background: var(--stat-hover); }
@media (max-width: 479px) { .trust__grid { grid-template-columns: 1fr; gap: var(--space-3); } .stat { padding: var(--space-5); } } /* phones: one compact row per card */
.stat--navy { --stat-color: var(--navy-500); --stat-hover: var(--navy-600); }
.stat__icon {
  flex: none;
  width: 3rem; height: 3rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--n-0);
  transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.stat:hover .stat__icon { background: var(--n-0); color: var(--stat-color); transform: scale(1.08) rotate(-6deg); }
.stat__icon .icon { width: 1.5rem; height: 1.5rem; }
.stat__label { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--n-0); line-height: var(--leading-snug); }
.stat__text { font-size: var(--text-sm); color: var(--n-0); margin-top: var(--space-1); line-height: var(--leading-body); } /* solid white: 85 % white on crimson would fail AA */

/* ---- Cards ------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--n-100); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.card:hover .card__media img { transform: scale(1.04); }
.card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.card__title { font-size: var(--text-xl); }
.card__text { color: var(--color-text-muted); }
.card__link { margin-top: auto; align-self: flex-start; }
.card__body > .tag { align-self: flex-start; }
.card__link::after { content: ""; position: absolute; inset: 0; }  /* whole card clickable */
.card--flat { border: 0; box-shadow: var(--shadow-sm); }

/* Industry tile */
.tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy-800);
  color: var(--n-0);
  text-decoration: none;
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.tile:hover img { transform: scale(1.05); }
.tile__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-8) var(--space-4) var(--space-4);
  background: linear-gradient(180deg, transparent, rgba(11, 26, 54, 0.85));
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--n-0);
}
.tile--icon { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--navy-700), var(--navy-900)); }
.tile--icon .icon { width: 3rem; height: 3rem; color: var(--blue-300); }

/* Feature (icon + title + text) */
.feature { display: flex; gap: var(--space-4); align-items: flex-start; }
.feature__icon {
  flex: none;
  width: 3.25rem; height: 3.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.feature__icon .icon { width: 1.6rem; height: 1.6rem; }
.feature__icon--navy { background: var(--color-secondary-soft); color: var(--color-secondary); }
.feature__body > * + * { margin-top: var(--space-2); }
.feature__title { font-size: var(--text-lg); }
.feature__text { color: var(--color-text-muted); font-size: 0.9375rem; }
.feature--stack { flex-direction: column; }
.feature--card {
  flex-direction: column;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.feature--card:hover { border-color: var(--blue-200); box-shadow: var(--shadow-md); }
.section--dark .feature__icon { background: rgba(255, 255, 255, 0.08); color: var(--blue-300); }
.section--dark .feature__text { color: var(--color-on-dark-muted); }

/* Role / service chip tile */
.role {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.role:hover { border-color: var(--blue-300); box-shadow: var(--shadow-sm); }
.role .icon { width: 1.75rem; height: 1.75rem; color: var(--color-primary); }

/* Value card (PRIDE) */
.value { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.value__letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--n-0);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  margin-bottom: var(--space-4);
}
.value__title { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.value__text { color: var(--color-text-muted); }

/* Checklist */
.checklist { display: grid; gap: var(--space-3); }
.checklist li { display: flex; gap: var(--space-3); align-items: flex-start; }
.checklist .icon { flex: none; width: 1.5rem; height: 1.5rem; padding: 3px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); margin-top: 1px; }
.section--dark .checklist .icon { background: rgba(255, 255, 255, 0.1); color: var(--blue-300); }

/* KPI chips (About) */
.kpis { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-8); }
.kpi__value { display: block; font-size: var(--text-2xl); font-weight: var(--weight-black); color: var(--color-secondary); line-height: 1.1; }
.kpi__label { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Tag & avatar */
.tag {
  display: inline-block;
  padding: 0.25em 0.7em;
  border-radius: var(--radius-full);
  background: var(--color-secondary-soft);
  color: var(--navy-700);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  text-decoration: none;
}
a.tag:hover { background: var(--navy-100); color: var(--navy-800); }
.avatar {
  flex: none;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy-100);
  color: var(--navy-700);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
}

/* ---- Steps ------------------------------------------------------------- */
.steps { display: grid; gap: var(--space-6); counter-reset: step; }
@media (min-width: 640px)  { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { position: relative; padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--n-0);
  font-weight: var(--weight-black);
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
}
.step__title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.step__text { color: var(--color-text-muted); font-size: 0.9375rem; }
@media (min-width: 1024px) {
  .step:not(:last-child)::after {
    content: ""; position: absolute; top: 2.6rem; right: calc(-1 * var(--space-6));
    width: var(--space-6); height: 2px; background: var(--blue-200);
  }
}
.steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 479px) { .steps--2 { grid-template-columns: 1fr; } }
.steps--2 .step::after { display: none; }
.section--dark .step { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }

/* PRIDE values band: navy tiles, letters alternating crimson / navy (About §4; design option H) */
.pride__grid { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 600px)  { .pride__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pride__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pride__value {
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.pride__value:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-4px); }
.pride__letter {
  display: inline-flex; width: 3rem; height: 3rem; align-items: center; justify-content: center;
  border-radius: var(--radius-md); font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-2xl);
  background: var(--blue-500); color: var(--n-0); margin-bottom: var(--space-4);
}
.pride__value:nth-child(even) .pride__letter { background: var(--navy-400); }
.pride__title { color: var(--n-0); font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.pride__text { margin: 0; font-size: var(--text-sm); color: rgba(255, 255, 255, 0.8); }
.pride.section { padding-bottom: calc(var(--section-space) + var(--space-8)); }   /* room for the strip below to overlap */

/* "The pride of…" strip: three cards overlapping the bottom edge of the PRIDE band (About §4a) */
.pride-of { background: var(--n-0); padding-bottom: var(--space-4); display: flow-root; }   /* flow-root: the grid's negative margin must not collapse through the section */
.pride-of__grid { list-style: none; margin: calc(-1 * var(--space-12)) 0 0; padding: 0; display: grid; gap: var(--space-4); position: relative; }
@media (min-width: 768px) { .pride-of__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pride-of__item {
  display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5) var(--space-6);
  background: var(--n-0); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.pride-of__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pride-of__icon { flex: none; width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--blue-500); color: var(--n-0); }
.pride-of__item:nth-child(2) .pride-of__icon { background: var(--navy-500); }
.pride-of__title { font-size: var(--text-base); margin: 0 0 var(--space-1); color: var(--color-heading); }
.pride-of__text { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* Experience badge + button row (About §2) */
.exp-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-6); }
.exp-badge {
  display: inline-flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5) var(--space-3) var(--space-4);
  border-left: 4px solid var(--blue-500); background: var(--navy-50); border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.exp-badge__num { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--weight-black); line-height: 1; color: var(--navy-500); }
.exp-badge__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.3; color: var(--color-text-muted); }

/* ---- "Our Professional Team"ported 1:1 from the reference About page's custom block (About §5) ----
   Values are the reference's own (pixel sizes, its #3EAAE7 second pink, #0B2D60 deep navy, #5F6B7E muted). */
.pro-team {
  --pink: var(--blue-500); --pink-2: #3eaae7; --navy: var(--navy-500); --navy-deep: #0B2D60; --muted: #5f6b7e;
  position: relative; overflow: hidden; isolation: isolate; background: var(--n-0);
  padding: 50px 0;
}
.pro-team::before {
  content: ""; position: absolute; inset: auto -10% -30% -10%; height: 420px; z-index: -1;
  background: radial-gradient(60% 60% at 18% 50%, rgba(27, 152, 224, 0.08), transparent 70%),
              radial-gradient(60% 60% at 82% 50%, rgba(2, 62, 138, 0.10), transparent 70%);
}
.pro-team__head { text-align: center; margin-bottom: 56px; }
.pro-team__eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0;
  font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pink);
}
.pro-team__eyebrow::before, .pro-team__eyebrow::after { content: ""; width: 36px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--pink)); }
.pro-team__eyebrow::after { background: linear-gradient(90deg, var(--pink), transparent); }
.pro-team__title { margin: 14px 0 0; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.12; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
.pro-team__title span { background: linear-gradient(90deg, var(--pink), var(--pink-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--pink); }
.pro-team__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 26px; }
.pro-card {
  position: relative; overflow: hidden; isolation: isolate; height: 100%;
  padding: 44px 32px 40px; border-radius: 24px; background: var(--n-0);
  border: 1px solid rgba(2, 62, 138, 0.10); box-shadow: 0 10px 30px -18px rgba(2, 62, 138, 0.30);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s ease, border-color 0.4s ease;
}
/* the hover: a navy ink-flood expands from behind the icon */
.pro-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 55%, #12264b 100%);
  clip-path: circle(0% at 50% 84px); transition: clip-path 0.75s cubic-bezier(0.65, 0, 0.35, 1);
}
.pro-card:hover::before { clip-path: circle(145% at 50% 84px); }
.pro-card:hover { transform: translateY(-12px); border-color: transparent; box-shadow: 0 34px 60px -28px rgba(2, 62, 138, 0.65); }
.pro-card__num { position: absolute; top: 18px; right: 26px; font-size: 46px; font-weight: 800; line-height: 1; color: rgba(2, 62, 138, 0.07); transition: color 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.pro-card:hover .pro-card__num { color: rgba(27, 152, 224, 0.55); transform: translateY(-4px) scale(1.06); }
/* icon tile rotates 45°, the glyph counter-rotates and stays upright */
.pro-card__icon {
  position: relative; width: 76px; height: 76px; margin: 0 auto 26px; display: grid; place-items: center;
  border-radius: 26px; color: var(--pink);
  background: linear-gradient(145deg, rgba(27, 152, 224, 0.10), rgba(2, 62, 138, 0.12));
  box-shadow: inset 0 0 0 1px rgba(27, 152, 224, 0.20);
  transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1), border-radius 0.6s ease, background 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}
.pro-card__icon .icon { width: 32px; height: 32px; transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pro-card:hover .pro-card__icon { transform: rotate(45deg); border-radius: 38px; color: var(--n-0); background: linear-gradient(145deg, var(--pink), var(--pink-2)); box-shadow: 0 14px 30px -10px rgba(27, 152, 224, 0.70), inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
.pro-card:hover .pro-card__icon .icon { transform: rotate(-45deg) scale(1.08); }
.pro-card__title { margin: 0 0 14px; text-align: center; font-size: 23px; line-height: 1.3; font-weight: 800; letter-spacing: -0.01em; color: var(--pink); transition: color 0.45s ease 0.05s; }
.pro-card__text { margin: 0; text-align: center; font-size: 15px; line-height: 2; color: var(--muted); transition: color 0.45s ease 0.05s; }
.pro-card:hover .pro-card__title { color: var(--n-0); }
.pro-card:hover .pro-card__text { color: rgba(255, 255, 255, 0.75); }
/* bottom accent line draws in */
.pro-card__line { position: absolute; left: 50%; bottom: 0; translate: -50% 0; height: 3px; width: 0; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--pink), var(--pink-2)); transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; }
.pro-card:hover .pro-card__line { width: 70%; }
@media (max-width: 1024px) { .pro-team { padding: 70px 0; } }
@media (max-width: 767px) { .pro-card { padding: 38px 26px 34px; } .pro-team__head { margin-bottom: 40px; } }
@media (hover: none) { .pro-card:hover { transform: none; } }

/* ---- "Our Promise, Your Success"ported 1:1 from the reference About page's custom block (About §6) ---- */
.promise {
  --pink: var(--blue-500); --pink-2: #3eaae7; --navy: var(--navy-500); --navy-deep: #0B2D60; --muted: #5f6b7e;
  position: relative; overflow: hidden; isolation: isolate; padding: 100px 0; background: var(--n-0);
}
.promise::before {   /* soft diagonal tint behind the whole band */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(45% 55% at 12% 30%, rgba(27, 152, 224, 0.09), transparent 70%),
              radial-gradient(50% 60% at 85% 75%, rgba(2, 62, 138, 0.10), transparent 70%),
              linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
}
.promise::after {    /* thin pink rule across the top */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--pink), var(--navy), transparent); opacity: 0.5;
}
.promise__watermark { position: absolute; right: -2%; top: 6%; z-index: -1; font-size: clamp(90px, 14vw, 190px); font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: rgba(2, 62, 138, 0.045); user-select: none; pointer-events: none; }
.promise__wrap { display: grid; grid-template-columns: minmax(300px, 440px) 1fr; gap: 64px; align-items: center; }
/* left: the emblem */
.promise__visual { position: relative; aspect-ratio: 1 / 1; max-width: 420px; width: 100%; margin: 0 auto; display: grid; place-items: center; }
.promise__ring { position: absolute; border-radius: 50%; }
.promise__ring--1 { inset: 6%; border: 1.5px dashed rgba(2, 62, 138, 0.30); animation: promise-spin 26s linear infinite; }
.promise__ring--2 { inset: 19%; border: 1.5px solid rgba(27, 152, 224, 0.22); box-shadow: 0 0 0 14px rgba(27, 152, 224, 0.035); animation: promise-pulse 4.5s ease-in-out infinite; }
@keyframes promise-spin { to { transform: rotate(360deg); } }
@keyframes promise-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.045); opacity: 0.75; } }
.promise__emblem {
  position: relative; width: 46%; aspect-ratio: 1 / 1; display: grid; place-items: center;
  border-radius: 38% 62% 58% 42% / 45% 40% 60% 55%;   /* organic blob, not a box */
  background: linear-gradient(145deg, var(--pink), var(--pink-2) 45%, var(--navy) 130%); color: var(--n-0);
  box-shadow: 0 28px 55px -22px rgba(27, 152, 224, 0.60);
  animation: promise-morph 9s ease-in-out infinite; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.promise__emblem .icon { width: clamp(40px, 6vw, 62px); height: clamp(40px, 6vw, 62px); }
@keyframes promise-morph { 0%, 100% { border-radius: 38% 62% 58% 42% / 45% 40% 60% 55%; } 50% { border-radius: 60% 40% 42% 58% / 55% 60% 40% 45%; } }
.promise__visual:hover .promise__emblem { transform: scale(1.07) rotate(-4deg); }
.promise__chip {
  position: absolute; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 20px;
  background: var(--n-0); color: var(--navy); box-shadow: 0 14px 30px -14px rgba(2, 62, 138, 0.45); border: 1px solid rgba(2, 62, 138, 0.08);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.4s ease, background 0.4s ease;
}
.promise__chip .icon { width: 24px; height: 24px; }
.promise__chip--a { top: 6%; left: 10%; animation: promise-float 5s ease-in-out infinite; }
.promise__chip--b { top: 44%; right: 1%; animation: promise-float 6.2s ease-in-out infinite 0.6s; }
.promise__chip--c { bottom: 8%; left: 20%; animation: promise-float 5.6s ease-in-out infinite 1.1s; }
@keyframes promise-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.promise__visual:hover .promise__chip { background: var(--navy); color: var(--n-0); transform: translateY(-6px) scale(1.08); }
/* right: the content */
.promise__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pink); }
.promise__eyebrow::before { content: ""; width: 38px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--pink), transparent); }
.promise__title { margin: 16px 0 0; font-size: clamp(32px, 4.6vw, 54px); line-height: 1.1; font-weight: 800; color: var(--navy); letter-spacing: -0.025em; }
.promise__title span { position: relative; display: inline-block; background: linear-gradient(90deg, var(--pink), var(--pink-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--pink); }
.promise__title span::after {   /* highlighter underline that wipes in when the block reveals */
  content: ""; position: absolute; left: 0; bottom: 2px; height: 10px; width: 100%; z-index: -1;
  background: rgba(27, 152, 224, 0.16); border-radius: 6px; transform: scaleX(0); transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}
.promise__content.is-visible .promise__title span::after, html:not(.js) .promise__title span::after { transform: scaleX(1); }
.promise__lead { margin: 24px 0 0; max-width: 680px; font-size: 16.5px; line-height: 1.85; color: var(--muted); }
.promise__pills { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.promise__pills li {
  position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px 11px 14px; border-radius: 999px; background: var(--n-0); border: 1px solid rgba(2, 62, 138, 0.14);
  font-size: 14.5px; font-weight: 600; color: var(--navy); box-shadow: 0 8px 20px -16px rgba(2, 62, 138, 0.7);
  transition: color 0.35s ease, border-color 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); cursor: default;
}
.promise__pills li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--pink), var(--pink-2)); transform: translateX(-101%); transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); }
.promise__pills li:hover::before { transform: translateX(0); }
.promise__pills li:hover { color: var(--n-0); border-color: transparent; transform: translateY(-3px); }
.promise__pills .icon { width: 17px; height: 17px; color: var(--pink); transition: color 0.35s ease; }
.promise__pills li:hover .icon { color: var(--n-0); }
.promise__btn {
  position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; margin-top: 34px;
  padding: 16px 30px; border-radius: 999px; text-decoration: none; background: var(--navy); color: var(--n-0); font-weight: 700; font-size: 15.5px;
  box-shadow: 0 18px 34px -18px rgba(2, 62, 138, 0.85); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.promise__btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--pink), var(--pink-2)); clip-path: circle(0% at 8% 50%); transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1); }
.promise__btn:hover::before, .promise__btn:focus-visible::before { clip-path: circle(140% at 8% 50%); }
.promise__btn:hover, .promise__btn:focus-visible { color: var(--n-0); transform: translateY(-3px); box-shadow: 0 22px 40px -18px rgba(27, 152, 224, 0.85); }
.promise__btn .icon { width: 18px; height: 18px; transition: transform 0.4s ease; }
.promise__btn:hover .icon { transform: translateX(5px); }
@media (max-width: 991px) {
  .promise__wrap { grid-template-columns: 1fr; gap: 44px; }
  .promise__content { text-align: center; }
  .promise__pills { justify-content: center; }
  .promise__visual { max-width: 330px; }
  .promise__lead { margin-left: auto; margin-right: auto; }
}
@media (max-width: 575px) {
  .promise { padding: 70px 0; }
  .promise__chip { width: 52px; height: 52px; border-radius: 17px; }
  .promise__chip .icon { width: 20px; height: 20px; }
}
.section--dark .step__text { color: var(--color-on-dark-muted); }

/* ---- Testimonials ------------------------------------------------------ */
.testimonial {
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  height: 100%;
}
.testimonial__quote-mark { width: 2rem; height: 2rem; color: var(--blue-200); fill: currentColor; stroke: none; }
.testimonial__text { font-size: var(--text-md); color: var(--n-700); flex: 1; }
.testimonial__text::before { content: "\201C"; }
.testimonial__text::after { content: "\201D"; }
.testimonial__footer { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.testimonial__name { font-weight: var(--weight-bold); color: var(--color-heading); display: block; }
.testimonial__role { font-size: var(--text-sm); color: var(--color-text-muted); }
.testimonial__footer > div { flex: 1 1 8rem; min-width: 0; }
.testimonial__footer .tag { margin-left: auto; }
.testimonial--featured { border-top: 4px solid var(--color-primary); }

/* Pull quote strip */
.pullquote { border-left: 4px solid var(--color-primary); padding-left: var(--space-5); font-size: var(--text-xl); color: var(--navy-800); font-weight: var(--weight-medium); }
.pullquote cite { display: block; margin-top: var(--space-3); font-style: normal; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---- Testimonials coverflow (Home §8): centre card faces you, neighbours tilt away; infinite loop ---- */
.tst-cover { position: relative; }
.tst-cover .swiper { padding: var(--space-6) 0 var(--space-12); overflow: hidden; max-width: 1480px; margin-inline: auto; }   /* 3 cards in view; capped so cards stay a sane width on very wide screens */
.tst-cover .swiper-slide { transition: opacity 0.4s ease; }
.tst-cover .swiper-initialized .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) { opacity: 0; }   /* only the centre card and its two neighbours are shown */
.tst-cover .swiper-slide { height: auto; display: flex; }
.tst-cover .swiper:not(.swiper-initialized) .swiper-slide { width: min(22rem, 80vw); }   /* before Swiper sizes the slides */
.tst-cover .swiper-slide > * { width: 100%; }
.tst-cover .swiper-slide:not(.swiper-slide-active) { cursor: pointer; }
.tst-cover .swiper-slide:not(.swiper-slide-active) a { pointer-events: none; }   /* a click on a side card centres it; its links work once it is the active card */
.tst-cover .swiper-slide-shadow-left, .tst-cover .swiper-slide-shadow-right { border-radius: var(--radius-lg); }
.tst-cover .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(18, 38, 75, 0.55), rgba(18, 38, 75, 0)); }
.tst-cover .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(18, 38, 75, 0.55), rgba(18, 38, 75, 0)); }
.tst-cover .swiper-pagination { bottom: 0; }
.tst-cover .swiper-pagination-bullet { width: 0.6rem; height: 0.6rem; background: var(--navy-200); opacity: 1; transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.tst-cover .swiper-pagination-bullet-active { background: var(--blue-500); transform: scale(1.25); }
.tst-cover .text-center { margin-top: var(--space-2); }
/* navy variant (option G): centre card large, neighbours smaller and tucked behind, dimmed */
.tst-cover--navy { background: linear-gradient(120deg, var(--navy-900), var(--navy-700)); }
.tst-cover--navy .swiper { max-width: 90rem; margin-inline: auto; }
.tst-cover--navy .swiper-slide { width: min(24rem, 84vw); }
.tst-cover--navy .swiper-slide > * { transition: filter var(--duration-base) var(--ease-out); }
.tst-cover--navy .swiper-slide:not(.swiper-slide-active) > * { filter: brightness(0.82); }
.tst-cover--navy .swiper-slide-active > * { box-shadow: var(--shadow-lg); }
.tst-cover--navy .testimonial a.tag { color: var(--navy-700); }   /* the cards stay white: keep the tag's own colour, not the dark section's link colour */
.tst-cover--navy .testimonial a.tag:hover { color: var(--n-0); }
.tst-cover--navy .ind-slider__btn { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); color: var(--n-0); }
.tst-cover--navy .swiper-pagination-bullet { background: rgba(255, 255, 255, 0.35); }
.tst-cover--navy .swiper-pagination-bullet-active { background: var(--blue-500); }

/* ---- FAQ (native details) ---------------------------------------------- */
.faq { display: grid; gap: var(--space-3); }
.faq__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.faq__item[open] { border-color: var(--blue-200); box-shadow: var(--shadow-sm); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--color-primary); }
.faq__q .icon { flex: none; color: var(--color-primary); transition: transform var(--duration-fast) var(--ease-out); }
.faq__item[open] .faq__q .icon { transform: rotate(180deg); }
.faq__a { padding: 0 var(--space-6) var(--space-6); color: var(--color-text-muted); }

/* ---- CTA band ---------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(110deg, var(--blue-600), var(--blue-500) 60%, var(--blue-400));
  color: rgba(255, 255, 255, 0.9);
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(40rem 20rem at 85% 50%, rgba(2, 62, 138, 0.35), transparent 65%);
  pointer-events: none;
}
.cta-band .container { position: relative; padding-block: clamp(2.5rem, 5vw, 4rem); display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) { .cta-band .container { grid-template-columns: 1fr auto; } }
.cta-band__title { color: var(--n-0); font-size: var(--text-2xl); }
.cta-band__text { margin-top: var(--space-2); max-width: 36rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---- Two-audience CTA (Home, after Services): crimson panel for employers, navy for job seekers ---- */
.cta-c { display: grid; grid-template-columns: 1fr; color: var(--n-0); }
@media (min-width: 900px) { .cta-c { grid-template-columns: 1fr 1fr; } }
.cta-c__panel { position: relative; overflow: hidden; padding: clamp(2.5rem, 5vw, 4rem) var(--gutter); display: grid; gap: var(--space-4); align-content: center; }
.cta-c__panel--hire { background: linear-gradient(120deg, var(--blue-600), var(--blue-500)); }
.cta-c__panel--work { background: linear-gradient(120deg, var(--navy-600), var(--navy-500)); }
@media (min-width: 900px) {
  .cta-c__panel--hire { padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2)); padding-right: 4rem; -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 3rem) 100%, 0 100%); clip-path: polygon(0 0, 100% 0, calc(100% - 3rem) 100%, 0 100%); margin-right: -3rem; z-index: 1; }
  .cta-c__panel--work { padding-left: 5rem; padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
}
.cta-c__panel::after { content: ""; position: absolute; right: -4rem; bottom: -6rem; width: 16rem; height: 16rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.18); pointer-events: none; }
.cta-c__icon { width: 3.25rem; height: 3.25rem; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.3); display: inline-flex; align-items: center; justify-content: center; }
.cta-c__icon .icon { width: 1.5rem; height: 1.5rem; }
.cta-c__title { font-size: var(--text-2xl); color: var(--n-0); margin: 0; }
.cta-c__panel .btn { transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.cta-c__panel .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cta-c__text { margin: 0; color: rgba(255, 255, 255, 0.88); max-width: 30rem; }
.cta-c__panel .btn { justify-self: start; }

/* ---- Forms ------------------------------------------------------------- */
.form { display: grid; gap: var(--space-4); }
.form__grid { display: grid; gap: var(--space-3) var(--space-4); }
@media (min-width: 640px) { .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .field--full { grid-column: 1 / -1; } }

.field { display: grid; gap: var(--space-1); align-content: start; }
.field__label { font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--color-heading); }
.field__label .req { color: var(--color-primary); }
.field__hint { font-size: var(--text-xs); color: var(--color-text-faint); }
.field__error { min-height: 1rem; font-size: var(--text-xs); line-height: 1rem; color: var(--color-error); } /* line is always reserved: an error appearing/clearing on blur must not shift the submit button under the pointer */
.field:not(.is-invalid) .field__error { visibility: hidden; }

.input, .select, .textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--n-0);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--navy-400);
  box-shadow: 0 0 0 3px var(--navy-100);
}
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--color-error); }
.textarea { min-height: 8rem; resize: vertical; }
.select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4988' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 1.1rem;
}

/* File input styled as a drop area */
.file { position: relative; }
.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.file__box {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  background: var(--n-50);
  transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.file:hover .file__box, .file input:focus-visible + .file__box { border-color: var(--navy-400); background: var(--navy-50); }
.file__box .icon { color: var(--color-primary); width: 1.5rem; height: 1.5rem; }
.file__name { font-weight: var(--weight-semibold); color: var(--color-heading); }

.form__consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); color: var(--color-text-muted); }
.form__consent input { margin-top: 0.2rem; accent-color: var(--color-primary); width: 1rem; height: 1rem; }
.form__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.form__status { display: none; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); font-weight: var(--weight-medium); }
.form__status.is-success { display: block; background: #e8f5ee; color: #14532d; border: 1px solid #b7e2c8; }
.form__status.is-error { display: block; background: #fdecee; color: #8a0c20; border: 1px solid #f5c2c9; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Form panel (form inside a card next to copy) */
.form-panel {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.form-panel__title { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.form-panel__text { color: var(--color-text-muted); margin-bottom: var(--space-4); }

/* ---- Job list (Career) -------------------------------------------------- */
.jobs { display: grid; gap: var(--space-3); }
.job {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.job__body { flex: 1 1 18rem; }
.job__title { font-size: var(--text-lg); }
.job__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
.job__meta span { display: inline-flex; align-items: center; gap: var(--space-1); }
.jobs-empty {
  padding: var(--space-8);
  text-align: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}
.jobs-empty .icon { width: 2.5rem; height: 2.5rem; color: var(--color-primary); margin: 0 auto var(--space-3); }
.jobs-empty p { max-width: 34rem; margin-inline: auto; }
.jobs-empty .btn { margin-top: var(--space-5); }

/* ---- Contact ----------------------------------------------------------- */
.contact-card {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  height: 100%;
}
.contact-card > div { flex: 1; min-width: 0; }
/* compact variant used beside the enquiry form: phone / WhatsApp / head office / email */
.contact-card--compact { padding: var(--space-4) var(--space-5); gap: var(--space-3); height: auto; }
.contact-card--compact .feature__icon { width: 2.5rem; height: 2.5rem; }
.contact-card--compact .feature__icon .icon { width: 1.25rem; height: 1.25rem; }
.contact-card--compact .contact-card__title { font-size: var(--text-base); margin-bottom: 0; }
.contact-card--compact .contact-card__text { font-size: var(--text-sm); }
.contact-card--compact .contact-card__text a { color: var(--navy-600); }
/* enquiry side cards: lift, crimson edge and a turning icon on hover */
.contact-card--compact { position: relative; overflow: hidden; border-radius: var(--radius-lg); transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); }
.contact-card--compact::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-primary); transform: scaleY(0); transform-origin: top; transition: transform var(--duration-base) var(--ease-out); }
.contact-card--compact:hover::before, .contact-card--compact:focus-within::before { transform: scaleY(1); }
.contact-card--compact .feature__icon { transition: transform var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); }
.contact-card--compact:hover .feature__icon, .contact-card--compact:focus-within .feature__icon { transform: rotate(-8deg) scale(1.08); background: var(--color-primary); color: var(--n-0); }
.contact-card--compact:hover .feature__icon .icon, .contact-card--compact:focus-within .feature__icon .icon { color: var(--n-0); }
.contact-card--whatsapp:hover .feature__icon, .contact-card--whatsapp:focus-within .feature__icon { background: #1f8a4c; }   /* WhatsApp keeps its own colour */
.contact-cards { display: grid; gap: var(--space-3); }
.contact-card--whatsapp .feature__icon { background: #e8f8ef; color: #1f8a4c; }
/* compact variant used beside the enquiry form: phone / WhatsApp / head office / email */
.contact-card--compact { padding: var(--space-4) var(--space-5); gap: var(--space-3); height: auto; }
.contact-card--compact .feature__icon { width: 2.5rem; height: 2.5rem; }
.contact-card--compact .feature__icon .icon { width: 1.25rem; height: 1.25rem; }
.contact-card--compact .contact-card__title { font-size: var(--text-base); margin-bottom: 0; }
.contact-card--compact .contact-card__text { font-size: var(--text-sm); }
.contact-card--compact .contact-card__text a { color: var(--navy-600); }
/* enquiry side cards: lift, crimson edge and a turning icon on hover */
.contact-card--compact { position: relative; overflow: hidden; border-radius: var(--radius-lg); transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); }
.contact-card--compact::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-primary); transform: scaleY(0); transform-origin: top; transition: transform var(--duration-base) var(--ease-out); }
.contact-card--compact:hover::before, .contact-card--compact:focus-within::before { transform: scaleY(1); }
.contact-card--compact .feature__icon { transition: transform var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); }
.contact-card--compact:hover .feature__icon, .contact-card--compact:focus-within .feature__icon { transform: rotate(-8deg) scale(1.08); background: var(--color-primary); color: var(--n-0); }
.contact-card--compact:hover .feature__icon .icon, .contact-card--compact:focus-within .feature__icon .icon { color: var(--n-0); }
.contact-card--whatsapp:hover .feature__icon, .contact-card--whatsapp:focus-within .feature__icon { background: #1f8a4c; }   /* WhatsApp keeps its own colour */
.contact-cards { display: grid; gap: var(--space-3); }
.contact-card--whatsapp .feature__icon { background: #e8f8ef; color: #1f8a4c; }
.contact-card__title { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.contact-card__text { color: var(--color-text-muted); }
.contact-card a { text-decoration: none; font-weight: var(--weight-semibold); }
.map { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); background: var(--n-100); }
.map iframe { width: 100%; height: 100%; border: 0; }
.map__caption { margin-top: var(--space-3); font-weight: var(--weight-semibold); color: var(--color-heading); }

/* ---- Map facade --------------------------------------------------------
   A Google embed costs ~1 MB of tiles, scripts and cookies before anyone has
   asked to see it. Every map ships as this panel instead, our own navy grid
   with a crimson pin, and `maps.js` creates the iframe on the first click.
   The "Open in Google Maps" link works with no JavaScript at all.           */
.map-facade {
  position: relative; display: grid; place-items: center; overflow: hidden;
  /* width: 100%: a box with an aspect-ratio stops stretching to its grid track,
     so a 16rem min-height would size the WIDTH from the ratio (16rem x 16/10 =
     410px) and overflow the card on a phone. */
  width: 100%; min-height: 17rem; border-color: transparent; color: var(--n-0);   /* 17rem: the stacked buttons need 258px at 375 */
  background: linear-gradient(150deg, var(--navy-600), var(--navy-800) 60%, var(--navy-900));
}
.map-facade__grid {
  position: absolute; inset: -40% -25%; opacity: 0.4; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: perspective(700px) rotateX(54deg) scale(1.3);
  transform-origin: 50% 30%;
  animation: map-drift 30s linear infinite;
  transition: opacity 0.5s ease;
}
@keyframes map-drift { to { background-position: 46px 92px; } }
.map-facade:hover .map-facade__grid { opacity: 0.62; }
.map-facade__body { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-5); text-align: center; }
.map-facade__pin { position: relative; display: grid; place-items: center; margin-bottom: var(--space-1); color: var(--blue-400); }
.map-facade__pin .icon {
  width: 2.25rem; height: 2.25rem; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.map-facade:hover .map-facade__pin .icon { transform: translateY(-4px) scale(1.06); }
.map-facade__pin::after {
  content: ""; position: absolute; bottom: -0.3rem; width: 1.5rem; height: 0.45rem; border-radius: 50%;
  background: rgba(27, 152, 224, 0.5); animation: map-ping 2.8s ease-out infinite;
}
@keyframes map-ping { 0% { transform: scale(0.5); opacity: 0.9; } 70% { transform: scale(2.4); opacity: 0; } 100% { opacity: 0; } }
.map-facade__name { font-family: var(--font-heading); font-size: var(--text-lg); }
.map-facade__addr { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.82); }
.map-facade__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-2); }
@media (max-width: 479px) { .map-facade__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 15rem; } }
.map-facade__note { display: none; font-size: var(--text-xs); color: rgba(255, 255, 255, 0.62); }
@media (min-width: 560px) { .map-facade__note { display: block; } }
.map-facade iframe { width: 100%; height: 100%; border: 0; }
.map-facade.is-loaded { background: var(--n-100); }
.map-facade.is-loaded > :not(iframe) { display: none; }
@media (prefers-reduced-motion: reduce) { .map-facade__grid, .map-facade__pin::after { animation: none; } }

/* ---- Contact page: contact panel + office cards ------------------------ */
.contact-layout { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: 5fr 7fr; gap: var(--space-8); } }
/* variation B: no CV card, the panel fills the column and spreads its contents */
.contact-layout--balanced { align-items: stretch; }
.contact-layout--balanced .contact-layout__side { display: flex; }
.contact-panel--tall { display: flex; flex-direction: column; gap: var(--space-6); width: 100%; }
.contact-panel--tall .contact-panel__list { flex: 1; align-content: space-evenly; gap: var(--space-4); }
.contact-panel--tall .contact-panel__item { padding-block: var(--space-4); }
.contact-panel { position: relative; overflow: hidden; padding: var(--space-8) var(--space-6); border-radius: var(--radius-xl); background: linear-gradient(160deg, var(--navy-600), var(--navy-900)); color: var(--n-0); box-shadow: var(--shadow-lg); }
.contact-panel::after { content: ""; position: absolute; right: -6rem; top: -6rem; width: 18rem; height: 18rem; border-radius: 50%; background: var(--blue-500); opacity: 0.25; filter: blur(50px); pointer-events: none; }
.contact-panel > * { position: relative; }
.contact-panel .eyebrow { color: var(--blue-300); }
.contact-panel__title { color: var(--n-0); font-size: var(--text-2xl); margin: 0 0 var(--space-2); }
.contact-panel__text { color: rgba(255, 255, 255, 0.85); margin: 0 0 var(--space-6); }
.contact-panel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.contact-panel__item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--n-0); text-decoration: none; transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
a.contact-panel__item:hover { background: rgba(255, 255, 255, 0.14); transform: translateX(4px); }
/* the tiles are crimson/green, so their glyphs are always white, without this the link's
   hover colour cascades into the icon and it disappears into its own tile */
.contact-panel__icon, .contact-panel__icon .icon { color: var(--n-0); }
a.contact-panel__item:hover .contact-panel__icon { transform: scale(1.08) rotate(-6deg); }
.contact-panel__icon { transition: transform var(--duration-base) var(--ease-out); }
.contact-panel__icon { flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); background: var(--blue-500); display: inline-flex; align-items: center; justify-content: center; }
.contact-panel__icon--wa { background: #1f8a4c; }
.contact-panel__icon .icon { width: 1.3rem; height: 1.3rem; }
.contact-panel__item strong { display: block; font-family: var(--font-heading); font-size: var(--text-lg); line-height: 1.2; color: var(--n-0); }
.contact-panel__item > span:not(.contact-panel__icon) { display: block; font-size: var(--text-sm); color: rgba(255, 255, 255, 0.8); }   /* the text span only, the icon span must keep its flex centring */
.contact-panel .social { margin-top: var(--space-6); }
.contact-panel .social a { background: rgba(255, 255, 255, 0.12); color: var(--n-0); }
.contact-panel .social a:hover { background: var(--blue-500); }
.contact-panel .btn { margin-top: var(--space-6); width: 100%; }
.office-cards { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .office-cards { grid-template-columns: 1fr 1fr; } }
.office-cards--row { gap: var(--space-6); }
@media (min-width: 768px) { .office-cards--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.office-cards--row .office-card .map { aspect-ratio: 16 / 9; }
.office-card { display: flex; flex-direction: column; background: var(--n-0); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm); }
.office-card .map { aspect-ratio: 16 / 10; border: 0; border-radius: 0; }
/* single office: map beside the details */
.office-card--wide { display: grid; gap: 0; }
@media (min-width: 900px) { .office-card--wide { grid-template-columns: 7fr 5fr; align-items: stretch; } .office-card--wide .map { height: 100%; aspect-ratio: auto; min-height: 22rem; } }
.office-card--wide .office-card__body { display: flex; flex-direction: column; gap: var(--space-3); justify-content: center; padding: var(--space-8) var(--space-7); }
.office-card__meta { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.office-card__meta li { display: flex; align-items: center; gap: var(--space-3); }
.office-card__meta .icon { color: var(--color-primary); }
.office-card__meta a { color: inherit; text-decoration: none; font-weight: var(--weight-semibold); }
.office-card__meta a:hover { color: var(--color-primary); }
.office-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); flex: 1; }
.office-card__label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-500); }
.office-card__label .icon { width: 1rem; height: 1rem; }
.office-card__title { margin: 0; font-size: var(--text-lg); }
.office-card__addr { margin: 0; color: var(--color-text-muted); flex: 1; }
.office-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Social icon buttons */
.social { display: flex; gap: var(--space-2); }
.social a {
  width: 2.25rem; height: 2.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--n-0);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.social a:hover { background: var(--color-primary); color: var(--n-0); transform: translateY(-2px); }
.social .icon { width: 1.1rem; height: 1.1rem; }
.social--light a { background: var(--n-100); color: var(--navy-700); }
.topbar .social a { width: 1.75rem; height: 1.75rem; background: transparent; color: rgba(255, 255, 255, 0.92); }
.topbar .social a:hover { color: var(--n-0); background: rgba(255, 255, 255, 0.18); transform: none; }
.topbar .social .icon { width: 0.95rem; height: 0.95rem; }

/* ---- Footer ------------------------------------------------------------ */
.site-footer {
  position: relative;
  background: var(--navy-900);
  color: var(--color-on-dark-muted);
  font-size: 0.9375rem;
  overflow: hidden;
}
.site-footer--skyline::before {
  content: "";
  position: absolute; inset: 0;
  /* a 12 %-opacity wash: the 768 frame is plenty, and AVIF halves it again.
     The plain url() stays as the fallback for browsers without image-set(). */
  background: url("../img/hero/hero-contact-768.webp") center 60% / cover no-repeat;
  background-image: image-set(url("../img/hero/hero-contact-768.avif") type("image/avif"),
                              url("../img/hero/hero-contact-768.webp") type("image/webp"));
  opacity: 0.12;
  pointer-events: none;
}
.site-footer > .container { position: relative; }
.footer__grid {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--section-space-sm);
}
@media (min-width: 640px)  { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-10); } }
.footer__about { max-width: 22rem; }
.footer__about p { margin-top: var(--space-4); }
.footer__about .social { margin-top: var(--space-5); }
.footer__title {
  color: var(--n-0);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.footer__list { display: grid; gap: var(--space-2); }
.footer__list a { color: var(--color-on-dark-muted); text-decoration: none; }
.footer__list a:hover { color: var(--n-0); text-decoration: underline; text-underline-offset: 0.2em; }
.footer__contact { display: grid; gap: var(--space-3); }
.footer__contact li { display: flex; gap: var(--space-3); align-items: flex-start; }
.footer__contact .icon { flex: none; color: var(--blue-300); margin-top: 0.15rem; }
.footer__contact a { color: var(--n-0); text-decoration: none; }
.footer__contact a:hover { text-decoration: underline; }
.footer__bottom {
  position: relative;
  background: var(--n-800);   /* reference copyright bar */
  font-size: var(--text-sm);
}
.footer__bottom .container {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3);
  padding-block: var(--space-5);
  padding-right: 4.5rem;   /* keep clear of the floating call/WhatsApp buttons */
}
.footer__bottom a { color: var(--navy-300); text-decoration: none; }
.footer__bottom a:hover { color: var(--n-0); }

/* ---- Floating call / WhatsApp ------------------------------------------ */
.float-cta {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: var(--z-float);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: opacity var(--duration-fast) var(--ease-out), visibility 0s;
}
.nav-open .float-cta { opacity: 0; visibility: hidden; }
.float-cta a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  color: var(--n-0);
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: transform var(--duration-fast) var(--ease-out);
}
.float-cta a:hover { transform: scale(1.06); color: var(--n-0); }
.float-cta .icon { width: 1.5rem; height: 1.5rem; }
.float-cta__call { background: var(--navy-500); }
.float-cta__whatsapp { background: #25d366; }

/* ---- Industries page ---------------------------------------------------- */
/* slider of industry cards (Swiper, vendored; JS in assets/js/industries.js) */
.ind-slider { position: relative; }
.ind-slider .swiper { padding: var(--space-2) var(--space-1) var(--space-12); }
.ind-slider .swiper-slide { height: auto; display: flex; }
.ind-slider .swiper-pagination { bottom: 0; }
.ind-slider .swiper-pagination-bullet { width: 0.6rem; height: 0.6rem; background: var(--navy-200); opacity: 1; transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.ind-slider .swiper-pagination-bullet-active { background: var(--blue-500); transform: scale(1.25); }
.ind-slider__nav { display: flex; gap: var(--space-2); }
.ind-slider__btn { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--navy-500); background: var(--n-0); border: 1px solid var(--color-border); transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.ind-slider__btn:hover { background: var(--blue-500); border-color: var(--blue-500); color: var(--n-0); transform: scale(1.06); }
.ind-slider__btn .icon { width: 1.1rem; height: 1.1rem; }
.ind-slider__btn.swiper-button-disabled { opacity: 0.4; pointer-events: none; }
.section-head--row > .ind-slider__nav > * + * { margin-top: 0; }
.ind-card { position: relative; display: flex; flex-direction: column; width: 100%; background: var(--n-0); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.ind-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ind-card__media { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--navy-700), var(--navy-900)); color: var(--n-0); display: flex; align-items: center; justify-content: center; }
.ind-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ind-card__media > .icon { width: 3rem; height: 3rem; opacity: 0.9; }
.ind-card__icon { position: absolute; left: var(--space-4); bottom: calc(-1 * var(--space-5)); width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); background: var(--blue-500); color: var(--n-0); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); }
.ind-card__icon .icon { width: 1.35rem; height: 1.35rem; }
.ind-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8) var(--space-5) var(--space-5); flex: 1; }
.ind-card__title { font-size: var(--text-lg); margin: 0; }
.ind-card__title a { color: var(--color-heading); text-decoration: none; }
.ind-card__title a::after { content: ""; position: absolute; inset: 0; }
.ind-card__text { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); flex: 1; }
.ind-card__roles { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.ind-card__roles li { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--navy-600); background: var(--navy-50); padding: 0.15rem 0.55rem; border-radius: var(--radius-full); }

/* one panel per industry, alternating sides */
.ind-panel { display: grid; gap: var(--space-6); align-items: center; padding-block: var(--space-10); border-top: 1px solid var(--color-border); scroll-margin-top: calc(var(--header-height) + 1rem); }
.ind-panel:first-child { border-top: 0; }
@media (min-width: 900px) { .ind-panel { grid-template-columns: 5fr 7fr; gap: var(--space-10); } .ind-panel--flip .ind-panel__media { order: 2; } }
.ind-panel__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--navy-700), var(--navy-900)); color: var(--n-0); display: flex; align-items: center; justify-content: center; }
.ind-panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ind-panel__media > .icon { width: 4rem; height: 4rem; opacity: 0.9; }
.ind-panel__num { position: absolute; left: var(--space-4); top: var(--space-4); padding: 0.25rem 0.7rem; border-radius: var(--radius-sm); background: var(--blue-500); color: var(--n-0); font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-sm); letter-spacing: 0.06em; }
.ind-panel__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.ind-panel__head .feature__icon { flex: none; }
.ind-panel__title { margin: 0; font-size: var(--text-2xl); }
.ind-panel__text { margin: 0 0 var(--space-4); }
.ind-panel__label--inline { margin: 0; }
.ind-panel__label { display: block; font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-500); margin-bottom: var(--space-2); }
.ind-panel__roles { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.ind-panel__roles li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--navy-700); background: var(--n-50); border: 1px solid var(--color-border); padding: 0.3rem 0.7rem; border-radius: var(--radius-full); }
.ind-panel__roles .icon { width: 1rem; height: 1rem; color: var(--blue-500); }
.ind-panel__services { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ind-panel__services .tag { text-decoration: none; }
.ind-panel__services a.tag:hover { background: var(--navy-500); color: var(--n-0); }

/* the per-industry panels as a slider: one panel per view, height follows the active panel */
.ind-slider--panels .swiper { padding-bottom: var(--space-12); }
.ind-slider--panels .swiper-slide { height: auto; }
.ind-slider--panels .ind-panel { border-top: 0; padding-block: var(--space-4) 0; }
.ind-slider--panels .ind-panel--flip .ind-panel__media { order: 0; }   /* in the slider every panel reads photo-left; alternating sides would make the slides jump */
.ind-slider--panels .swiper-pagination-bullet { width: 0.6rem; height: 0.6rem; }
.ind-slider__fraction { font-family: var(--font-heading); font-weight: var(--weight-bold); color: var(--navy-500); min-width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.section-head--row > .ind-slider__nav { align-items: center; }

/* jump list under the hero */
.ind-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ind-jump a { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--n-0); color: var(--navy-800); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.ind-jump a .icon { width: 1rem; height: 1rem; color: var(--blue-500); }
.ind-jump a:hover { border-color: var(--blue-500); color: var(--blue-500); }

/* ---- Marquee (Home §5b): two rows of industry tiles, one scrolling each way; pauses on hover/focus ---- */
.marquee-section { padding-bottom: var(--section-space); }
.marquee { position: relative; overflow: hidden; margin-top: var(--space-4); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-section .section-head + .marquee, .marquee-section .container + .marquee { margin-top: 0; }
.marquee__track { display: flex; gap: var(--space-4); width: max-content; animation: marquee-left 48s linear infinite; }
.marquee--reverse .marquee__track { animation-name: marquee-right; animation-duration: 54s; }
.marquee__group { display: flex; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.marquee__item { flex: none; }
.marquee .tile { width: clamp(12rem, 20vw, 16rem); }
.marquee .tile--icon { aspect-ratio: 4 / 3; }
/* keeps moving under the pointer, :focus-within still holds it still so a
   keyboard user can reach the links, and reduced motion stops it outright */
.marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee-left { to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.tag--review { margin-left: var(--space-2); vertical-align: middle; background: var(--navy-50); color: var(--navy-600); border: 1px dashed var(--navy-300); text-transform: none; letter-spacing: 0; font-weight: var(--weight-semibold); }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; width: auto; padding-inline: var(--gutter); }
  .marquee__group { flex-wrap: wrap; justify-content: center; }
  .marquee__group[aria-hidden="true"] { display: none; }
}

/* ---- Motion: reveal on scroll (only when JS is present) ---------------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 80ms; }
.js .reveal[data-delay="2"] { transition-delay: 160ms; }
.js .reveal[data-delay="3"] { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ---- Styleguide only --------------------------------------------------- */
.sg-swatch { border-radius: var(--radius-md); border: 1px solid var(--color-border); overflow: hidden; font-size: var(--text-xs); }
.sg-swatch__color { height: 4rem; }
.sg-swatch__meta { padding: var(--space-2) var(--space-3); background: var(--n-0); color: var(--n-700); }
.sg-block { padding-block: var(--space-10); border-top: 1px solid var(--color-border); }
.sg-block > .container > h2 { margin-bottom: var(--space-6); }
.sg-type > * + * { margin-top: var(--space-3); }

/* ==========================================================================
   SERVICE DETAIL: REFERENCE LAYOUT, refined. Built for design-options/service-detail/,
   now used by the live service pages (hybrid layout, 22 Sep 2026): the .rs-* blocks are
   wrapped in <div class="rs"> so the site's own blocks in between keep their own styling.
   The live site's section order kept; spacing put on one rhythm (a 64–96 px
   section step, 24/32 px inner gaps), type sizes made fluid (clamp), icons
   sized to their boxes, and a hover state on every interactive block.
   Scoped under .rs-* ; measured values from the live page are the starting
   point, not a constraint any more (user: "refine … spacing, font size, icon
   size, add hover effect").
   ========================================================================== */
.rs { font-family: "Public Sans", sans-serif; color: #4d5765; font-size: 1rem; line-height: 1.65; --rs-step: clamp(3.5rem, 7vw, 6rem); --rs-gap: clamp(1.5rem, 3vw, 2.5rem); }
.rs .container { max-width: 1244px; }
.rs h1, .rs h2, .rs h3, .rs h4 { font-family: var(--font-heading); }
.rs a:not(.btn):not(.rs-ctabox__btn):not(.rs-card__btn) { transition: color 0.25s; }

/* hero */
.rs-hero { position: relative; overflow: hidden; background: #0e121d; padding: clamp(5rem, 11vw, 9rem) 0; color: #fff; }
.rs-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; transform: scale(1.02); transition: transform 8s ease-out; }
.rs-hero:hover .rs-hero__bg { transform: scale(1.06); }
.rs-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 18, 29, 0.75), rgba(14, 18, 29, 0.2)); pointer-events: none; }
.rs-hero .container { position: relative; z-index: 1; }   /* above the ::after wash */
.rs-hero__title { font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem); font-weight: 700; line-height: 1.12; text-transform: uppercase; color: #fff; margin: 0; letter-spacing: 0.01em; }
.rs-hero__crumb { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 0.6rem; font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; }
.rs-hero__crumb a { color: #fff; text-decoration: none; }
.rs-hero__crumb a:hover { color: #6cc0ef; }
.rs-hero__crumb li + li::before { content: "»"; margin-right: 0.6rem; color: rgba(255, 255, 255, 0.7); }
.rs-hero__crumb li:last-child { color: #6cc0ef; }

/* about block: photo collage + text */
.rs-about { padding: var(--rs-step) 0 calc(var(--rs-step) * 0.5); }
.rs-about__grid { display: grid; gap: var(--rs-gap); align-items: center; }
@media (min-width: 992px) { .rs-about__grid { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4rem); } }
.rs-collage { position: relative; aspect-ratio: 5 / 4; max-width: 34rem; }
.rs-collage__a, .rs-collage__b { position: absolute; object-fit: cover; border-radius: 6px; box-shadow: 0 14px 34px rgba(7, 36, 95, 0.16); transition: transform 0.5s ease; }
.rs-collage__a { left: 0; top: 6%; width: 56%; aspect-ratio: 403 / 340; }
.rs-collage__b { right: 0; bottom: 0; width: 60%; aspect-ratio: 333 / 298; }
.rs-collage:hover .rs-collage__a { transform: translate(-4px, -4px); }
.rs-collage:hover .rs-collage__b { transform: translate(4px, 4px); }
.rs-collage__dots { position: absolute; width: 8.5rem; height: 6.5rem; background-image: radial-gradient(#1b98e0 1.6px, transparent 2.1px); background-size: 14px 14px; opacity: 0.6; }
.rs-collage__dots--tr { right: 10%; top: -2%; }
.rs-collage__dots--bl { left: -6%; bottom: 12%; }
.rs-label { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 4px; background: #d2ecfa; color: #12699d; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 1rem; }
.rs-h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); font-weight: 600; line-height: 1.18; color: #023e8a; margin: 0 0 1.25rem; }
.rs-about__text { margin: 0; }
.rs-about__text + .rs-about__text { margin-top: 0.9em; }

/* four outlined feature boxes */
.rs-feats { padding: calc(var(--rs-step) * 0.5) 0; }
.rs-feats__grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .rs-feats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .rs-feats__grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
/* benefit cards: brand blue with a white icon disc as standard; on hover they deepen to navy, lift,
   and the icon turns orange (client, 16 Oct 2026: the old hover look is now the normal look) */
.rs-feat { position: relative; border: 1px solid #1b98e0; border-radius: 10px; padding: 1.75rem 1.25rem 1.5rem; text-align: center; background: #1b98e0; box-shadow: 0 14px 32px rgba(27, 152, 224, 0.18); }
.rs-feats .rs-feat { transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, background-color 0.35s ease; } /* motion.css would drop background-color */
.rs-feats .rs-feat:hover { transform: translateY(-8px); background: var(--navy-500); border-color: var(--navy-500); box-shadow: 0 22px 44px rgba(2, 62, 138, 0.3); }
.rs-feat__icon { width: 4rem; height: 4rem; margin: 0 auto 1rem; border-radius: 50%; background: #fff; color: #1b98e0; display: flex; align-items: center; justify-content: center; transition: color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease; }
.rs-feat__icon .icon { width: 2rem; height: 2rem; }
.rs-feat:hover .rs-feat__icon { color: var(--orange-500); transform: scale(1.1) rotate(-8deg); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18); }
.rs-feat__title { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); font-weight: 600; line-height: 1.25; color: #fff; margin: 0 0 0.6rem; }
.rs-feat__text { font-size: 0.95rem; line-height: 1.5; color: rgba(255, 255, 255, 0.92); margin: 0; }

/* crimson CTA box */
/* CTA band: full-width navy in the brand colours (user: "use our colours, full width, blue shade"; was a boxed crimson gradient) */
.rs-ctabox {
  position: relative; overflow: hidden; isolation: isolate;
  margin: calc(var(--rs-step, 5rem) * 0.5) 0; padding: clamp(2.5rem, 5vw, 3.75rem) 0;
  background: linear-gradient(105deg, var(--navy-700) 0%, var(--navy-500) 55%, var(--navy-600) 100%); color: var(--n-0);
}
.rs-ctabox::before {   /* crimson rule along the top, soft glow at the right, the two brand colours together */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-300));
}
.rs-ctabox::after {
  content: ""; position: absolute; right: -8rem; top: -10rem; width: 26rem; height: 26rem; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(27, 152, 224, 0.35), transparent 65%); pointer-events: none;
}
.rs-ctabox__box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2.5rem; }
.rs-ctabox__box > div { flex: 1 1 28rem; }
.rs-ctabox__title { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem); font-weight: 700; line-height: 1.2; color: var(--n-0); margin: 0 0 0.45rem; }
.rs-ctabox__text { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 1rem; }
.rs-ctabox__btn {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.95rem 1.75rem; border-radius: var(--radius-md);
  background: var(--blue-500); color: var(--n-0); font-weight: 700; font-size: 1rem; text-decoration: none;
  box-shadow: 0 10px 24px -10px rgba(27, 152, 224, 0.8);
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.rs-ctabox__btn:hover, .rs-ctabox__btn:focus-visible { background: var(--blue-600); color: var(--n-0); transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(27, 152, 224, 0.9); }

/* best partner split */
.rs-partner { padding: calc(var(--rs-step) * 0.5) 0 var(--rs-step); }
.rs-partner__grid { display: grid; gap: var(--rs-gap); align-items: center; }
@media (min-width: 992px) { .rs-partner__grid { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4rem); } }
.rs-partner__media { overflow: hidden; border-radius: 12px; box-shadow: 0 14px 34px rgba(7, 36, 95, 0.14); }
.rs-partner__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s ease; }
.rs-partner__media:hover .rs-partner__img { transform: scale(1.04); }
.rs-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #1b98e0; margin-bottom: 0.9rem; }
.rs-eyebrow .icon { width: 1rem; height: 1rem; }
.rs-check { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.75rem 1.5rem; }
@media (min-width: 640px) { .rs-check { grid-template-columns: 1fr 1fr; } }
.rs-check li { position: relative; padding: 0.55rem 0.75rem 0.55rem 2.6rem; color: #0e121d; line-height: 1.5; border-radius: 8px; transition: background-color 0.25s ease, transform 0.25s ease; }
.rs-check li .icon { position: absolute; left: 0.75rem; top: 0.7rem; width: 1.25rem; height: 1.25rem; color: #1b98e0; transition: transform 0.25s ease; }
.rs-check li:hover { background: #d2ecfa; transform: translateX(4px); }
.rs-check li:hover .icon { transform: scale(1.15); }

/* role tiles */
.rs-roles { padding: 0 0 var(--rs-step); text-align: center; }
.rs-roles__h2a { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #023e8a; margin: 0 0 0.25rem; }
.rs-roles__h2b { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 700; color: #1b98e0; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
.rs-roles__grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .rs-roles__grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.rs-role { position: relative; overflow: hidden; border-radius: 14px; padding: 1.75rem 1rem 1.5rem; color: #fff; background: #1b98e0; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.rs-role::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)); opacity: 0; transition: opacity 0.3s ease; }
.rs-role:nth-child(4n+2), .rs-role:nth-child(4n+4) { background: #023e8a; }
.rs-role:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(14, 18, 29, 0.22); }
.rs-role:hover::before { opacity: 1; }
.rs-role .icon { width: 3.25rem; height: 3.25rem; transition: transform 0.35s ease; }
.rs-role:hover .icon { transform: translateY(-3px) scale(1.1); }
.rs-role__title { position: relative; font-family: var(--font-heading); font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem); font-weight: 600; line-height: 1.3; color: #fff; margin: 0; }

/* three outlined cards with round icon + arrow */
.rs-cards { padding: 0 0 var(--rs-step); }
.rs-cards__grid { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .rs-cards__grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; max-width: 1000px; margin: 0 auto; } }
.rs-card { position: relative; border: 1px solid #a6d9f5; border-radius: 14px; background: #fff; padding: 2.25rem 1.5rem 2.75rem; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.rs-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(7, 36, 95, 0.14); border-color: #1b98e0; }
.rs-card__icon { position: relative; width: 3.5rem; height: 3.5rem; margin: 0 auto 1.25rem; border-radius: 50%; background: #1b98e0; color: #fff; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; }
.rs-card__icon::before { content: ""; position: absolute; left: -0.8rem; top: -0.5rem; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: rgba(27, 152, 224, 0.22); z-index: -1; transition: transform 0.3s ease; }
.rs-card:hover .rs-card__icon { transform: scale(1.08); }
.rs-card:hover .rs-card__icon::before { transform: translate(0.4rem, 0.3rem); }
.rs-card__icon .icon { width: 1.6rem; height: 1.6rem; }
.rs-card__title { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); font-weight: 700; line-height: 1.25; color: #0e121d; margin: 0 0 0.75rem; }
.rs-card__text { font-size: 0.95rem; line-height: 1.55; color: #4d5765; margin: 0; }
.rs-card__btn { position: absolute; left: 50%; bottom: -1.375rem; transform: translateX(-50%); width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #1b98e0; color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 19px rgba(27, 152, 224, 0.3); transition: background-color 0.3s ease, transform 0.3s ease; }
.rs-card__btn:hover, .rs-card:hover .rs-card__btn { background: #023e8a; transform: translateX(-50%) scale(1.1); }
.rs-card__btn .icon { width: 1.1rem; height: 1.1rem; }

/* form card on grey */
.rs-formsec { background: #f3f3f3; padding: var(--rs-step) 0; }
.rs-formcard { max-width: 600px; margin: 0 auto; background: #fff; border-top: 4px solid #1b98e0; border-radius: 0 0 10px 10px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08); padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem); }
.rs-formcard__title { font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem); font-weight: 700; color: #0e121d; margin: 0 0 1.25rem; }
.rs-form { display: grid; gap: 1rem; }
.rs-form__row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .rs-form__row { grid-template-columns: 1fr 1fr; } }
.rs-form .field { gap: 0; }
.rs-form .field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rs-form .input, .rs-form .select, .rs-form .textarea { background: #f8f8f8; border: 1px solid #eeeeee; border-radius: 6px; height: 3.25rem; padding: 0 1.25rem; font-size: 0.95rem; color: #4d5765; transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; }
.rs-form .input:hover, .rs-form .select:hover, .rs-form .textarea:hover { border-color: #d5d5d5; background: #fff; }
.rs-form .input:focus, .rs-form .select:focus, .rs-form .textarea:focus { border-color: #1b98e0; background: #fff; box-shadow: 0 0 0 3px rgba(27, 152, 224, 0.12); }
.rs-form .textarea { height: 8.5rem; padding-top: 0.9rem; }
.rs-form .field__error { min-height: 0; }
.rs-form .field.is-invalid .field__error { margin-top: 0.25rem; min-height: 1.25rem; }
.rs-form__submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; height: 3.25rem; background: #1b98e0; color: #fff; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 6px; transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; }
.rs-form__submit:hover { background: #023e8a; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(2, 62, 138, 0.28); }
.rs-form__submit .icon { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.rs-form__submit:hover .icon { transform: translateX(3px); }

/* FAQ with angled arrow buttons + photo */
.rs-faq { padding: var(--rs-step) 0; }
.rs-faq__grid { display: grid; gap: var(--rs-gap); align-items: start; }
@media (min-width: 992px) { .rs-faq__grid { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4rem); } }
.rs-faq__label { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #0e121d; margin: 0 0 0.5rem; }
.rs-faq__label::before, .rs-faq__label::after { content: ""; width: 2.5rem; height: 2px; background: repeating-linear-gradient(90deg, #1b98e0 0 6px, transparent 6px 10px); }
.rs-faq__title { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.5rem); font-weight: 700; line-height: 1.15; color: #0e121d; margin: 0 0 1.5rem; }
.rs-acc { display: grid; gap: 0.875rem; }
.rs-acc__item { background: #e7e9f0; border-radius: 8px; overflow: hidden; transition: box-shadow 0.25s ease; }
.rs-acc__item:hover { box-shadow: 0 8px 22px rgba(7, 36, 95, 0.1); }
.rs-acc__item[open] { box-shadow: 0 8px 22px rgba(7, 36, 95, 0.1); }
.rs-acc__q { display: flex; align-items: stretch; justify-content: space-between; gap: 1rem; padding: 0 0 0 1.25rem; font-size: 1rem; font-weight: 500; color: #0e121d; cursor: pointer; list-style: none; transition: background-color 0.25s ease; }
.rs-acc__q::-webkit-details-marker { display: none; }
.rs-acc__q:hover { background: #dde1ea; }
.rs-acc__q span:first-child { padding: 1rem 0; }
.rs-acc__arrow { flex: none; width: 3.75rem; background: #1b98e0; color: #fff; display: inline-flex; align-items: center; justify-content: center; -webkit-clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); transition: background-color 0.25s ease; }
.rs-acc__q:hover .rs-acc__arrow { background: #023e8a; }
.rs-acc__arrow .icon { width: 1.1rem; height: 1.1rem; transition: transform 0.3s ease; }
.rs-acc__item[open] .rs-acc__arrow .icon { transform: rotate(180deg); }
.rs-acc__a { background: #fff; padding: 1.1rem 1.5rem; color: #4d5765; font-size: 0.95rem; line-height: 1.6; }
.rs-faq__media { overflow: hidden; border-radius: 12px; box-shadow: 0 14px 34px rgba(7, 36, 95, 0.14); }
.rs-faq__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s ease; }
.rs-faq__media:hover .rs-faq__img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) { .rs *, .rs *::before, .rs *::after { transition: none; } }


/* ---- Legal / policy text (privacy page) ---- */
.legal { --container-narrow: 46rem; }
.legal h2 { font-size: var(--text-xl); margin: var(--space-8) 0 var(--space-3); }
.legal p, .legal li { color: var(--color-text); }
.legal ul { padding-left: 1.25rem; margin: 0 0 var(--space-4); }
.legal li + li { margin-top: var(--space-2); }
.legal__meta { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-6); }

/* ---- CTA band with a photo and navy wash, CTA option D, live on the Home page ---- */
.cta-x__title { color: var(--n-0); margin: 0; }
.cta-x__text { margin: var(--space-3) 0 0; max-width: 38rem; color: rgba(255, 255, 255, 0.88); }
.cta-x__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-300); margin-bottom: var(--space-3); }
.cta-x__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.cta-x__phone { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--n-0); font-weight: var(--weight-semibold); text-decoration: none; }
.cta-x__phone .icon { width: 1.1rem; height: 1.1rem; color: var(--blue-300); }
.cta-x__phone:hover { color: var(--blue-300); }
.cta-d { position: relative; overflow: hidden; isolation: isolate; color: var(--n-0); text-align: center; }
.cta-d__bg { position: absolute; inset: 0; z-index: -1; }
.cta-d__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-d__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 38, 75, 0.86), rgba(18, 38, 75, 0.78)); }
.cta-d .container { padding-block: clamp(3.5rem, 8vw, 6rem); display: grid; justify-items: center; gap: var(--space-4); }
.cta-d .cta-x__title { font-size: var(--text-4xl); max-width: 22ch; }
.cta-d .cta-x__text { margin: 0; text-align: center; }
.cta-d .cta-x__actions { justify-content: center; margin-top: var(--space-2); }
.cta-d__note { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.75); }
.cta-d-band { display: block; }

/* ---- Vision & Mission cards (About §3): watermark glyph, sweeping rule, hover lift ---- */
.vm-grid { display: grid; gap: var(--space-5); margin-top: var(--space-8); }
@media (min-width: 900px) { .vm-grid { grid-template-columns: 1fr 1fr; } }
.vm-card {
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--space-8) var(--space-7);
  background: var(--n-0); border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.vm-card::before {   /* colour wash that grows from the corner on hover */
  content: ""; position: absolute; inset: auto -30% -60% auto; width: 22rem; height: 22rem; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(27, 152, 224, 0.16), transparent 65%);
  transform: scale(0.6); opacity: 0; transition: transform 0.7s var(--ease-out), opacity 0.5s var(--ease-out);
}
.vm-card--mission::before { background: radial-gradient(circle, rgba(2, 62, 138, 0.18), transparent 65%); }
.vm-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.vm-card:hover::before { transform: scale(1); opacity: 1; }
.vm-card__glyph { display: inline-flex; width: 3.5rem; height: 3.5rem; align-items: center; justify-content: center; border-radius: var(--radius-lg); background: var(--blue-500); color: var(--n-0); margin-bottom: var(--space-5); transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.vm-card--mission .vm-card__glyph { background: var(--blue-500); }   /* client: both glyphs in the brand red */
.vm-card:hover .vm-card__glyph { transform: rotate(-10deg) scale(1.1); }
.vm-card__glyph .icon { width: 1.6rem; height: 1.6rem; }
.vm-card__watermark { position: absolute; right: -1.5rem; top: -1.5rem; z-index: -1; opacity: 0.06; transition: transform 0.8s var(--ease-out), opacity 0.5s var(--ease-out); }
.vm-card__watermark .icon { width: 11rem; height: 11rem; }
.vm-card:hover .vm-card__watermark { transform: rotate(8deg) scale(1.08); opacity: 0.1; }
.vm-card__title { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.vm-card__text { color: var(--color-text-muted); margin: 0; }
.vm-card__rule { display: block; height: 3px; width: 0; margin-top: var(--space-5); border-radius: 3px; background: linear-gradient(90deg, var(--blue-500), var(--blue-300)); transition: width 0.6s var(--ease-out); }
.vm-card--mission .vm-card__rule { background: linear-gradient(90deg, var(--navy-500), var(--navy-300)); }
.vm-card:hover .vm-card__rule { width: 4.5rem; }

/* ---- "How we work": three connected habits (About §4b) ---- */
.habits-section { background: var(--color-bg-tint); }
.habits { list-style: none; margin: var(--space-10) 0 0; padding: 0; display: grid; gap: var(--space-6); position: relative; }
@media (min-width: 900px) {
  .habits { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
  .habits::before {   /* dashed line joining the three rings */
    content: ""; position: absolute; top: 2.75rem; left: 16%; right: 16%; height: 2px;
    background-image: linear-gradient(90deg, var(--blue-300) 45%, transparent 45%);
    background-size: 14px 2px; opacity: 0.7;
  }
}
.habit { position: relative; text-align: center; padding: 0 var(--space-3); }
.habit__ring {
  position: relative; z-index: 1; display: inline-flex; width: 5.5rem; height: 5.5rem; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--n-0); color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--blue-200), var(--shadow-md);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.habit__ring .icon { width: 2.1rem; height: 2.1rem; }
.habit:hover .habit__ring { transform: translateY(-6px) rotate(-8deg); background: var(--color-primary); color: var(--n-0); box-shadow: 0 0 0 6px var(--blue-100), var(--shadow-lg); }
.habit:nth-child(2) .habit__ring { color: var(--navy-500); box-shadow: 0 0 0 2px var(--navy-200), var(--shadow-md); }
.habit:nth-child(2):hover .habit__ring { background: var(--navy-500); color: var(--n-0); box-shadow: 0 0 0 6px var(--navy-100), var(--shadow-lg); }
.habit__step { display: block; margin-top: var(--space-4); font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-sm); letter-spacing: 0.18em; color: var(--color-text-muted); }
.habit__title { font-size: var(--text-xl); margin: var(--space-2) 0 var(--space-3); }
.habit__text { color: var(--color-text-muted); margin: 0; max-width: 26rem; margin-inline: auto; }

/* the tagline inside the About tagline section */
.promise__tagline { color: var(--blue-500); font-weight: var(--weight-bold); }

/* section anchors must clear the sticky header when the About menu jumps to them */
h2[id], h3[id], section[id] { scroll-margin-top: 7rem; }

/* closing CTA band on the Home page: crimson, two actions, no gap before the footer */
.rs-ctabox__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.rs-ctabox--closing {
  margin-bottom: 0;
  background: linear-gradient(105deg, var(--blue-600) 0%, var(--blue-500) 55%, var(--blue-600) 100%);
}
.rs-ctabox--closing::before { background: linear-gradient(90deg, var(--navy-500), var(--navy-300)); }   /* navy rule on crimson */
.rs-ctabox--closing::after { background: radial-gradient(circle, rgba(2, 62, 138, 0.45), transparent 65%); }
.rs-ctabox--closing .rs-ctabox__btn { background: var(--n-0); color: var(--blue-600); box-shadow: 0 10px 24px -10px rgba(11, 26, 54, 0.55); }
.rs-ctabox--closing .rs-ctabox__btn:hover, .rs-ctabox--closing .rs-ctabox__btn:focus-visible { background: var(--navy-700); color: var(--n-0); }
.rs-ctabox__btn--ghost { background: transparent; box-shadow: none; border: 2px solid rgba(255, 255, 255, 0.55); }
.rs-ctabox__btn--ghost:hover, .rs-ctabox__btn--ghost:focus-visible { background: var(--n-0); color: var(--navy-700); border-color: var(--n-0); box-shadow: none; }
.rs-ctabox--closing .rs-ctabox__btn--ghost { background: transparent; color: var(--n-0); border-color: rgba(255, 255, 255, 0.6); box-shadow: none; }
.rs-ctabox--closing .rs-ctabox__btn--ghost:hover, .rs-ctabox--closing .rs-ctabox__btn--ghost:focus-visible { background: var(--n-0); color: var(--blue-600); border-color: var(--n-0); }

/* ---- "Send your CV instead" card under the contact panel (Contact page) ---- */
.seeker-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-6); border-radius: var(--radius-xl);
  background: linear-gradient(120deg, var(--blue-600), var(--blue-500) 70%); color: var(--n-0);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.seeker-card::after {
  content: ""; position: absolute; right: -5rem; bottom: -7rem; width: 15rem; height: 15rem; border-radius: 50%; z-index: -1;
  background: rgba(255, 255, 255, 0.12);
}
.seeker-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.seeker-card__icon { flex: none; width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.18); color: var(--n-0); transition: transform var(--duration-base) var(--ease-out); }
.seeker-card:hover .seeker-card__icon { transform: rotate(-8deg) scale(1.08); }
.seeker-card__eyebrow { margin: 0 0 var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.seeker-card__title { font-size: var(--text-xl); color: var(--n-0); margin: 0 0 var(--space-2); }
.seeker-card__text { margin: 0 0 var(--space-4); color: rgba(255, 255, 255, 0.9); font-size: var(--text-sm); }

/* ---- Home §8 "Why choose Adrem": photo with a floating badge + numbered reasons ---- */
.why-home { background: var(--n-0); }
.why-home__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .why-home__grid { grid-template-columns: 5fr 7fr; } }
.why-home__media { position: relative; }
.why-home__photo { position: relative; z-index: 1; overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.why-home__photo img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.why-home__media:hover .why-home__photo img { transform: scale(1.05); }
.why-home__badge {
  position: absolute; z-index: 2; left: clamp(-1rem, -2vw, 0rem); bottom: -1.5rem;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-6); border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--blue-600), var(--blue-500)); color: var(--n-0);
  box-shadow: 0 18px 40px -18px rgba(27, 152, 224, 0.8);
  transition: transform var(--duration-base) var(--ease-out);
}
.why-home__media:hover .why-home__badge { transform: translateY(-4px); }
.why-home__badge-num { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--weight-black); line-height: 1; }
.why-home__badge-label { font-size: var(--text-sm); line-height: 1.3; color: rgba(255, 255, 255, 0.92); }
.why-home__dots {
  position: absolute; right: -1.25rem; top: -1.25rem; width: 9rem; height: 9rem; z-index: 0;
  background-image: radial-gradient(var(--navy-200) 1.5px, transparent 1.5px);
  background-size: 12px 12px; border-radius: var(--radius-md);
}
.why-home__list { list-style: none; margin: var(--space-7) 0 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .why-home__list { grid-template-columns: 1fr 1fr; } }
.why-home__item {
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-6);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--n-0);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.why-home__item::before {   /* crimson edge grows on hover */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-primary);
  transform: scaleY(0); transform-origin: top; transition: transform var(--duration-base) var(--ease-out);
}
.why-home__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.why-home__item:hover::before { transform: scaleY(1); }
.why-home__num {
  position: absolute; right: var(--space-4); top: var(--space-3); z-index: -1;
  font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--weight-black); line-height: 1;
  color: var(--navy-50); transition: color var(--duration-base) var(--ease-out);
}
.why-home__item:hover .why-home__num { color: var(--blue-100); }
.why-home__icon {
  display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center;
  border-radius: var(--radius-md); background: var(--navy-50); color: var(--navy-500); margin-bottom: var(--space-4);
  transition: transform var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.why-home__item:nth-child(even) .why-home__icon { background: var(--blue-50); color: var(--blue-500); }
.why-home__item:hover .why-home__icon { transform: rotate(-8deg) scale(1.08); background: var(--color-primary); color: var(--n-0); }
.why-home__title { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.why-home__text { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.why-home__actions { margin-top: var(--space-7); }
@media (max-width: 899px) { .why-home__badge { left: var(--space-4); bottom: -1.25rem; } .why-home__list { margin-top: var(--space-6); } .why-home__dots { right: 0; top: -0.75rem; width: 6rem; height: 6rem; } }

/* ---- Compact enquiry form (Home, Services hub, service pages) --------------
   The Contact page keeps the roomy version; everywhere else the form sits beside
   the contact-info column, so it is tightened to finish at the same height. */
.form-panel--compact { padding: clamp(0.9rem, 2vw, 1.25rem); }
.form-panel--compact .form-panel__title { font-size: var(--text-lg); margin-bottom: 0.1rem; }
.form-panel--compact .form-panel__text { font-size: var(--text-sm); margin-bottom: var(--space-3); }
.form-panel--compact .form__grid { gap: var(--space-2) var(--space-3); }
.form-panel--compact .field__label { font-size: var(--text-sm); margin-bottom: 0.15rem; }
.form-panel--compact .input, .form-panel--compact .select { padding: 0.42rem 0.7rem; }
.form-panel--compact .textarea { padding: 0.45rem 0.7rem; min-height: 3.9rem; }
.form-panel--compact .field__error { font-size: var(--text-xs); min-height: 0.85rem; line-height: 1.1; }
.form-panel--compact .form__actions { margin-top: var(--space-3); gap: var(--space-3); }

/* ---- Map band with a floating office card (contact-form option D) ---------- */
.office-band { position: relative; }
.office-band__map { height: clamp(20rem, 46vw, 30rem); background: var(--n-100); }
.office-band__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.office-band__overlay { position: relative; }
.office-band__card {
  background: var(--n-0); border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); padding: var(--space-7);
  display: flex; flex-direction: column; gap: var(--space-3);
}
@media (min-width: 900px) {
  .office-band__overlay { pointer-events: none; }            /* clicks pass through to the map */
  .office-band__card { pointer-events: auto; position: absolute; left: var(--gutter); bottom: var(--space-8); width: min(26rem, 42%); }
  .office-band { margin-bottom: var(--space-10); }
}
@media (max-width: 899px) {
  .office-band__card { margin: calc(-1 * var(--space-8)) var(--gutter) 0; }
}

/* ==========================================================================
   Alphatalk additions
   ========================================================================== */

/* Top bar: info note, portal + cart links, item-count badge */
.topbar__note { display: inline-flex; align-items: center; gap: var(--space-2); opacity: 0.85; }
@media (max-width: 1279px) { .topbar__note { display: none; } }
.topbar__link { font-weight: var(--weight-medium); }
.cart-count {
  display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem;
  border-radius: var(--radius-full); background: var(--color-accent); color: var(--n-900);
  font-size: 0.6875rem; font-weight: var(--weight-bold); line-height: 1;
}
.cart-count:empty, .cart-count[data-empty] { display: none; }

/* Footer with five columns (about + four link lists) */
@media (min-width: 1024px) { .footer__grid--5 { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr; gap: var(--space-8); } }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-5); }

/* Number-range chips (home marquee, number pages) */
.num-chip {
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-1);
  width: clamp(11rem, 16vw, 13rem); min-height: 6.5rem; padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--n-0);
  color: var(--color-heading); text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.num-chip:hover { border-color: var(--blue-300); box-shadow: var(--shadow-md); transform: translateY(-2px); color: var(--color-heading); }
.num-chip__code { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-primary); line-height: 1.1; letter-spacing: -0.01em; }
.num-chip__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.num-chip__price { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Price cards */
.price-card { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8) var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--n-0); }
.price-card--featured { border: 2px solid var(--color-primary); box-shadow: var(--shadow-lg); }
.price-card__badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 0.25rem 0.75rem; border-radius: var(--radius-full); background: var(--color-primary); color: var(--n-0); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; white-space: nowrap; }
.price-card__name { font-size: var(--text-lg); margin: 0; }
.price-card__amount { display: flex; align-items: baseline; gap: var(--space-2); color: var(--color-heading); }
.price-card__amount strong { font-family: var(--font-heading); font-size: var(--text-4xl); line-height: 1; letter-spacing: -0.02em; }
.price-card__amount span { color: var(--color-text-muted); font-size: var(--text-sm); }
.price-card__from { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.price-card .checklist { flex: 1; }
.price-note { margin-top: var(--space-6); text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); }

/* Number range price cards (virtual number pages) */
.range-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.range-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--n-0); scroll-margin-top: calc(var(--header-height) + 3rem); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.range-card:hover, .range-card:target { border-color: var(--blue-300); box-shadow: var(--shadow-md); }
.range-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.range-card__code { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: 1; color: var(--color-primary); letter-spacing: -0.01em; }
.range-card__name { margin: 0; font-size: var(--text-lg); }
.range-card__area { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.range-card__monthly { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; }
.range-card__monthly strong { color: var(--color-heading); font-size: var(--text-lg); }
.tier-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.tier-list li { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--n-50); font-size: var(--text-sm); }
.tier-list li span { color: var(--color-text-muted); }
.tier-list li strong { color: var(--color-heading); }
.range-card .btn { margin-top: auto; }
.range-card__note { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }

/* Tier explainer */
.tier-cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.tier-card { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--n-0); border-top: 4px solid var(--color-primary); box-shadow: var(--shadow-sm); }
.tier-card--silver { border-top-color: #9aa5b1; }
.tier-card--gold { border-top-color: #e0a100; }
.tier-card--platinum { border-top-color: var(--navy-500); }
.tier-card__name { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.tier-card__price { margin: 0 0 var(--space-2); font-weight: var(--weight-bold); color: var(--color-primary); }
.tier-card__text { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.tier-card__eg { margin: var(--space-3) 0 0; font-family: var(--font-heading); font-size: var(--text-sm); letter-spacing: 0.04em; color: var(--color-heading); }

/* Short notice box (eligibility, call-cost rules) */
.notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--navy-50); border-left: 4px solid var(--navy-500); font-size: var(--text-sm); }
.notice .icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; color: var(--navy-500); }
.notice p { margin: 0; }

/* ==========================================================================
   Number finder (shop/find-a-number)
   ========================================================================== */
.finder-hero { position: relative; overflow: hidden; padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(5rem, 9vw, 6.5rem); background: radial-gradient(120% 140% at 85% 0%, var(--blue-500) 0%, var(--navy-500) 45%, var(--navy-800) 100%); color: var(--n-0); }
.finder-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(90deg, transparent, #000 60%); pointer-events: none; }
.finder-hero .container { position: relative; z-index: 1; }
.finder-hero .breadcrumb, .finder-hero .breadcrumb a { color: rgba(255, 255, 255, 0.8); }
.finder-hero__title { color: var(--n-0); font-size: var(--text-4xl); margin-top: var(--space-4); }
.finder-hero__sub { max-width: 40rem; margin-top: var(--space-3); color: rgba(255, 255, 255, 0.88); font-size: var(--text-lg); }
.finder-hero__facts { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin: var(--space-5) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.finder-hero__facts li { display: inline-flex; align-items: center; gap: var(--space-2); }
.finder-hero__facts .icon { width: 1.1rem; height: 1.1rem; color: var(--blue-300); }

.finder-bar { position: relative; z-index: 2; margin-top: calc(-1 * clamp(3.25rem, 6vw, 4rem)); }
.finder-bar__box { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-xl); background: var(--n-0); box-shadow: var(--shadow-lg); }
@media (min-width: 768px) { .finder-bar__box { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; align-items: end; padding: var(--space-5); } }
.finder-bar__field { display: grid; gap: var(--space-1); }
.finder-bar__label { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.finder-bar__digits { position: relative; }
.finder-bar__digits .icon { position: absolute; left: 0.9rem; top: 50%; width: 1.2rem; height: 1.2rem; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
.finder-bar__digits .input { padding-left: 2.6rem; font-size: var(--text-lg); letter-spacing: 0.06em; }

.finder { padding: var(--space-10) 0 var(--section-space); }
.finder__layout { display: grid; gap: var(--space-8); }
@media (min-width: 1024px) { .finder__layout { grid-template-columns: 17.5rem minmax(0, 1fr); align-items: start; } }
.finder__filters { display: grid; gap: var(--space-5); }
@media (min-width: 1024px) { .finder__filters { position: sticky; top: calc(var(--header-height) + 3.5rem); } }
.filter-group { display: grid; gap: var(--space-3); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.filter-group:last-child { border-bottom: 0; padding-bottom: 0; }
.filter-group__title { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-heading); }
.type-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-toggle { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.45rem 0.85rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); background: var(--n-0); color: var(--color-text); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.chip-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }
.chip-toggle[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--n-0); }
.tier-check { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); cursor: pointer; }
.tier-check span { display: inline-flex; align-items: center; gap: var(--space-2); }
.tier-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--color-primary); }
.tier-check small { color: var(--color-text-muted); }
.finder__help { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--navy-50); font-size: var(--text-sm); }
.finder__help h3 { margin: 0 0 var(--space-2); font-size: var(--text-base); }
.finder__help p { margin: 0 0 var(--space-3); color: var(--color-text-muted); }
.finder__toggle { display: none; }
@media (max-width: 1023px) {
  .finder__toggle { display: inline-flex; }
  .finder__filters[data-collapsed] .filter-group, .finder__filters[data-collapsed] .finder__help { display: none; }
}

.finder__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.finder__count { margin: 0; font-weight: var(--weight-semibold); color: var(--color-heading); }
.finder__count span { color: var(--color-text-muted); font-weight: var(--weight-regular); }
.finder__sort { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.finder__sort .select { width: auto; padding-block: 0.45rem; }
.finder__results { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
.finder__more { margin-top: var(--space-8); text-align: center; }
.finder__empty { padding: var(--space-10) var(--space-6); border: 2px dashed var(--color-border); border-radius: var(--radius-xl); text-align: center; }
.finder__empty h3 { margin-bottom: var(--space-2); }
.finder__empty p { margin: 0 auto var(--space-5); max-width: 30rem; color: var(--color-text-muted); }

/* One number in the results */
.num-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--n-0); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.num-card:hover { border-color: var(--blue-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.num-card.is-in-cart { border-color: var(--color-primary); background: var(--blue-50); }
.num-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.num-card__area { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.num-card__number { margin: 0; font-family: var(--font-heading); font-size: 1.45rem; font-weight: var(--weight-bold); letter-spacing: 0.02em; color: var(--color-heading); white-space: nowrap; font-variant-numeric: tabular-nums; }
.num-card__number mark { background: #fff1c2; color: inherit; border-radius: 3px; padding: 0 1px; }
.num-card__price { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.num-card__price strong { font-size: var(--text-lg); color: var(--color-heading); }
.num-card .btn { width: 100%; justify-content: center; }
.btn.is-in-cart { background: var(--color-primary); border-color: var(--color-primary); color: var(--n-0); }
.tier-badge { display: inline-flex; align-items: center; padding: 0.15rem 0.55rem; border-radius: var(--radius-full); font-size: 0.6875rem; font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; background: var(--blue-50); color: var(--blue-700); }
.tier-badge--silver { background: #eef1f4; color: #4a5562; }
.tier-badge--gold { background: #fff4d6; color: #8a6300; }
.tier-badge--platinum { background: var(--navy-500); color: var(--n-0); }

/* "Added to cart" notification */
.cart-toast { position: fixed; left: 50%; bottom: var(--space-6); z-index: 400; display: flex; align-items: center; gap: var(--space-3); max-width: calc(100vw - 2rem); padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); background: var(--navy-800); color: var(--n-0); box-shadow: var(--shadow-lg); font-size: var(--text-sm); transform: translate(-50%, 150%); opacity: 0; transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out); }
.cart-toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.cart-toast .icon { width: 1.1rem; height: 1.1rem; color: var(--blue-300); flex: none; }
.cart-toast__link { color: var(--orange-500); font-weight: var(--weight-bold); white-space: nowrap; }
.cart-toast__link:hover { color: var(--n-0); }

/* ==========================================================================
   Cart, checkout and order confirmation
   ========================================================================== */
.shop-hero { padding: clamp(2rem, 5vw, 3.25rem) 0; background: linear-gradient(120deg, var(--navy-800), var(--navy-500)); color: var(--n-0); }
.shop-hero .breadcrumb, .shop-hero .breadcrumb a { color: rgba(255, 255, 255, 0.8); }
.shop-hero__title { margin-top: var(--space-3); color: var(--n-0); font-size: var(--text-3xl); }
.shop-hero__sub { margin-top: var(--space-2); color: rgba(255, 255, 255, 0.85); }

.checkout-steps { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: var(--space-5) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); counter-reset: step; }
.checkout-steps li { display: inline-flex; align-items: center; gap: var(--space-2); color: rgba(255, 255, 255, 0.7); counter-increment: step; }
.checkout-steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); font-weight: var(--weight-bold); font-size: var(--text-xs); }
.checkout-steps li[aria-current] { color: var(--n-0); font-weight: var(--weight-semibold); }
.checkout-steps li[aria-current]::before { background: var(--orange-500); border-color: var(--orange-500); color: var(--n-900); }
.checkout-steps li.is-done::before { content: "✓"; background: var(--blue-500); border-color: var(--blue-500); color: var(--n-0); }

.shop-section { padding: var(--space-10) 0 var(--section-space); }
.shop-layout { display: grid; gap: var(--space-8); }
@media (min-width: 1024px) { .shop-layout { grid-template-columns: minmax(0, 1fr) 23rem; align-items: start; } }

/* Cart items */
.cart-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.cart-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--n-0); }
@media (min-width: 640px) { .cart-item { grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; } }
.cart-item__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius-md); background: var(--blue-50); color: var(--color-primary); }
.cart-item__icon .icon { width: 1.4rem; height: 1.4rem; }
.cart-item__name { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-heading); }
.cart-item__name--number { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.cart-item__detail { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.cart-item__prices { grid-column: 2; font-size: var(--text-sm); text-align: left; }
@media (min-width: 640px) { .cart-item__prices { grid-column: auto; text-align: right; } }
.cart-item__prices strong { display: block; font-size: var(--text-base); color: var(--color-heading); }
.cart-item__actions { grid-column: 2; display: flex; align-items: center; gap: var(--space-3); }
@media (min-width: 640px) { .cart-item__actions { grid-column: auto; } }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); overflow: hidden; }
.qty button { width: 2.1rem; height: 2.1rem; border: 0; background: var(--n-50); color: var(--color-heading); font-size: var(--text-lg); line-height: 1; cursor: pointer; }
.qty button:hover { background: var(--blue-50); color: var(--color-primary); }
.qty input { width: 2.6rem; height: 2.1rem; border: 0; text-align: center; font: inherit; font-weight: var(--weight-semibold); -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cart-item__remove { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-muted); cursor: pointer; }
.cart-item__remove:hover { background: #fdecee; color: #b3122b; }
.cart-item__remove .icon { width: 1.1rem; height: 1.1rem; }

.cart-empty { padding: var(--space-12) var(--space-6); border: 2px dashed var(--color-border); border-radius: var(--radius-xl); text-align: center; }
.cart-empty .icon { width: 3rem; height: 3rem; color: var(--blue-300); margin-bottom: var(--space-3); }
.cart-empty p { margin: var(--space-2) auto var(--space-6); max-width: 28rem; color: var(--color-text-muted); }

/* Order summary */
.summary { display: grid; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-xl); background: var(--n-0); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); }
@media (min-width: 1024px) { .summary { position: sticky; top: calc(var(--header-height) + 3.5rem); } }
.summary__title { margin: 0; font-size: var(--text-xl); }
.summary__items { display: grid; gap: var(--space-2); margin: 0; padding: 0 0 var(--space-4); list-style: none; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.summary__items li { display: flex; justify-content: space-between; gap: var(--space-3); }
.summary__items span { color: var(--color-text-muted); }
.summary__rows { display: grid; gap: var(--space-2); margin: 0; font-size: var(--text-sm); }
.summary__rows div { display: flex; justify-content: space-between; gap: var(--space-3); }
.summary__rows dt { color: var(--color-text-muted); }
.summary__rows dd { margin: 0; font-weight: var(--weight-semibold); color: var(--color-heading); }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.summary__total span { font-weight: var(--weight-bold); color: var(--color-heading); }
.summary__total strong { font-family: var(--font-heading); font-size: var(--text-3xl); color: var(--color-heading); }
.summary__then { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.summary .btn { width: 100%; justify-content: center; }
.summary__trust { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--color-text-muted); }
.summary__trust li { display: flex; gap: var(--space-2); align-items: center; }
.summary__trust .icon { width: 1rem; height: 1rem; color: var(--color-primary); }

.upsell { margin-top: var(--space-10); }
.upsell__grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.upsell-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--n-50); }
.upsell-card h3 { margin: 0; font-size: var(--text-lg); }
.upsell-card p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.upsell-card .btn { margin-top: auto; align-self: flex-start; }

/* Checkout form */
.checkout-block { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--n-0); }
.checkout-block + .checkout-block { margin-top: var(--space-5); }
.checkout-block__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.checkout-block__num { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-primary); color: var(--n-0); font-weight: var(--weight-bold); }
.checkout-block__title { margin: 0; font-size: var(--text-xl); }
.checkout-block__text { margin: calc(-1 * var(--space-3)) 0 var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); }
.divert { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--n-50); }
.divert + .divert { margin-top: var(--space-3); }
.divert__number { margin: 0; font-weight: var(--weight-bold); color: var(--color-heading); font-variant-numeric: tabular-nums; }
.divert__later { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-sm); }
.pay-option { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border: 2px solid var(--color-primary); border-radius: var(--radius-lg); background: var(--blue-50); }
.pay-option input { margin-top: 0.3rem; accent-color: var(--color-primary); }
.pay-option strong { display: block; color: var(--color-heading); }
.pay-option span { font-size: var(--text-sm); color: var(--color-text-muted); }
.pay-cards { display: flex; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-text-muted); }
.pay-cards span { padding: 0.15rem 0.45rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--n-0); color: var(--color-heading); }
.check-line { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); }
.check-line input { margin-top: 0.2rem; width: 1rem; height: 1rem; accent-color: var(--color-primary); flex: none; }
.check-line + .check-line { margin-top: var(--space-3); }
.field.is-invalid .check-line { color: #b3122b; }

/* Order confirmation */
.order-done { text-align: center; }
.order-done__icon { display: inline-grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: #e8f5ee; color: #1f8a4c; margin-bottom: var(--space-4); }
.order-done__icon .icon { width: 2.25rem; height: 2.25rem; }
.order-done__ref { display: inline-block; margin-top: var(--space-3); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: var(--navy-50); font-weight: var(--weight-bold); color: var(--navy-500); letter-spacing: 0.04em; }

/* ==========================================================================
   Shop: phone system packages and handsets
   ========================================================================== */
.plan-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); align-items: stretch; }
.plan-users { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--n-50); }
.plan-users label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-heading); }
.plan-estimate { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; }
.plan-estimate strong { color: var(--color-heading); }

.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); background: var(--n-0); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; }
.compare th, .compare td { padding: var(--space-3) var(--space-5); text-align: center; border-bottom: 1px solid var(--color-border); }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare thead th { background: var(--navy-800); color: var(--n-0); font-size: var(--text-base); }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody tr:nth-child(even) td { background: var(--n-50); }
.compare .icon { width: 1.2rem; height: 1.2rem; color: var(--color-primary); }
.compare-wrap { overflow-x: auto; border-radius: var(--radius-xl); }

.product-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.product-card { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--n-0); overflow: hidden; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.product-card:hover { border-color: var(--blue-300); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.product-card[hidden] { display: none; }
.product-card__media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: var(--space-4); background: radial-gradient(circle at 50% 40%, var(--n-0) 0%, var(--n-50) 70%); }
.product-card__media img { max-height: 100%; width: auto; object-fit: contain; transition: transform var(--duration-slow) var(--ease-out); }
.product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card__badge { position: absolute; top: var(--space-3); left: var(--space-3); }
.product-card__body { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; padding: var(--space-5); }
.product-card__name { margin: 0; font-size: var(--text-lg); }
.product-card__text { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.product-card__note { margin: 0; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--navy-500); }
.product-card__price { display: flex; align-items: baseline; gap: var(--space-2); margin-top: auto; }
.product-card__price strong { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--color-heading); }
.product-card__price span { font-size: var(--text-xs); color: var(--color-text-muted); }
.product-card .btn { width: 100%; justify-content: center; }
.shop-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-6); }

/* Six-value variant of the values band (About): 3 × 2 instead of a single row of five */
@media (min-width: 900px) { .pride__grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Legal pages: contents box, tables, placeholders awaiting confirmation */
.legal-toc { margin: var(--space-6) 0 var(--space-8); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--n-50); }
.legal-toc h2 { margin: 0 0 var(--space-3); font-size: var(--text-base); }
.legal-toc ol { margin: 0; padding-left: 1.25rem; columns: 2 14rem; column-gap: var(--space-8); font-size: var(--text-sm); }
.legal-toc li { margin-bottom: var(--space-1); break-inside: avoid; }
.legal table { width: 100%; margin: var(--space-4) 0 var(--space-6); border-collapse: collapse; font-size: var(--text-sm); }
.legal th, .legal td { padding: var(--space-3); border: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.legal th { background: var(--n-50); color: var(--color-heading); }
.legal h2 { scroll-margin-top: calc(var(--header-height) + 3rem); }
.legal ol.clauses { padding-left: 0; list-style: none; }
.legal ol.clauses > li { margin-bottom: var(--space-3); }
.legal .clause-no { font-weight: var(--weight-bold); color: var(--color-heading); margin-right: var(--space-2); }
.tbc { padding: 0 0.3em; border-radius: var(--radius-sm); background: #fff4d6; color: #8a6300; font-weight: var(--weight-semibold); }
.legal-contact { margin-top: var(--space-8); padding: var(--space-5) var(--space-6); border-left: 4px solid var(--color-primary); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; background: var(--blue-50); }
.legal-contact p { margin: 0; }
/* Legal tables with many columns stack into labelled rows on phones (labels come from data-label) */
@media (max-width: 40rem) {
  .legal table.stack, .legal table.stack tbody, .legal table.stack tr, .legal table.stack td { display: block; }
  .legal table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal table.stack tr { margin-bottom: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
  .legal table.stack td { border: 0; border-top: 1px solid var(--color-border); }
  .legal table.stack td:first-child { border-top: 0; background: var(--n-50); }
  .legal table.stack td::before { content: attr(data-label); display: block; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
}

/* ---------- Blog ---------------------------------------------------------------------------------
   Covers are drawn in CSS: category colour, a big "kicker" (an area code, a year…) and the topic icon. */
.post-card__media, .post-hero__cover { container-type: inline-size; }
.post-cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; color: var(--n-0);
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.16) 1px, transparent 0), linear-gradient(135deg, var(--navy-800), var(--navy-500));
  background-size: 18px 18px, auto; }
.post-cover--numbers { background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.18) 1px, transparent 0), linear-gradient(135deg, var(--navy-500), var(--blue-500)); }
.post-cover--guides { background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.14) 1px, transparent 0), linear-gradient(135deg, var(--n-800), var(--navy-700)); }
.post-cover::after { content: ""; position: absolute; right: -12%; bottom: -30%; width: 60%; aspect-ratio: 1; border-radius: 50%; border: 2.5rem solid rgba(255, 255, 255, 0.07); }
.post-cover--guides::after { border-color: rgba(255, 162, 0, 0.2); }
.post-cover__kicker { position: absolute; left: 7%; bottom: 12%; font-size: clamp(2.25rem, 16cqi, 5rem); font-weight: var(--weight-black); line-height: 1; letter-spacing: -0.02em; }
.post-cover__icon { position: absolute; top: 10%; right: 7%; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.post-cover--guides .post-cover__icon { background: var(--orange-500); color: var(--n-900); }
.post-cover__icon .icon { width: 1.4rem; height: 1.4rem; }
.post-cover__brand { position: absolute; top: 12%; left: 7%; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
.post-cover__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.blog-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); }
.blog-filter__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.blog-filter__chips .icon { width: 1rem; height: 1rem; }
.blog-filter__n { padding: 0 0.45em; border-radius: var(--radius-full); background: var(--n-100); color: var(--color-text-muted); font-size: var(--text-xs); }
.chip-toggle[aria-pressed="true"] .blog-filter__n { background: rgba(255, 255, 255, 0.2); color: var(--n-0); }
.blog-filter__count { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

.post-grid { display: grid; gap: var(--space-6); }
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--n-0); transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.post-card[hidden] { display: none; }
.post-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-6) var(--space-6); }
.post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.post-card__title { font-size: var(--text-lg); line-height: 1.35; }
.post-card__title a { color: var(--color-heading); text-decoration: none; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; }   /* whole card clickable */
.post-card:hover .post-card__title a, .post-card__title a:focus-visible { color: var(--color-primary); }
.post-card__excerpt { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.post-card__more { display: flex; align-items: center; gap: var(--space-2); margin: auto 0 0; padding-top: var(--space-2); color: var(--color-primary); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.post-card__more .icon { width: 1rem; height: 1rem; transition: transform var(--duration-fast) var(--ease-out); }
.post-card:hover .post-card__more .icon { transform: translateX(3px); }
@media (min-width: 640px) { .post-card--feature { grid-column: 1 / -1; } }
@media (min-width: 900px) {
  .post-card--feature { display: grid; grid-template-columns: 1.15fr 1fr; }
  .post-card--feature .post-cover { height: 100%; }
  .post-card--feature .post-card__body { justify-content: center; padding: var(--space-8) var(--space-10); }
  .post-card--feature .post-card__title { font-size: var(--text-2xl); }
  .post-card--feature .post-card__excerpt { font-size: var(--text-base); }
  .post-card--feature .post-card__more { margin-top: var(--space-2); }
}

.post-hero { padding: clamp(2rem, 5vw, 3.5rem) 0; background: linear-gradient(120deg, var(--navy-900), var(--navy-500)); color: var(--n-0); }
.post-hero .breadcrumb, .post-hero .breadcrumb a { color: rgba(255, 255, 255, 0.8); }
.post-hero__grid { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .post-hero__grid { grid-template-columns: 1.4fr 1fr; } }
.post-hero__title { margin-top: var(--space-4); color: var(--n-0); font-size: var(--text-3xl); line-height: 1.2; }
.post-hero__lead { margin-top: var(--space-4); color: rgba(255, 255, 255, 0.85); font-size: var(--text-lg); }
.post-hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); color: rgba(255, 255, 255, 0.8); font-size: var(--text-sm); }
.post-hero__meta span { display: inline-flex; align-items: center; gap: var(--space-2); }
.post-hero__meta .icon { width: 1rem; height: 1rem; color: var(--orange-500); }
.post-hero__cover { overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
@media (max-width: 899px) { .post-hero__cover { display: none; } }

.post-layout { display: grid; gap: var(--space-10); padding-block: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 1024px) { .post-layout { grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--space-12); } }
.post-body { max-width: 46rem; min-width: 0; }
.post-aside { display: flex; flex-direction: column; gap: var(--space-6); }
@media (min-width: 1024px) { .post-aside { position: sticky; top: calc(var(--header-height) + 1.5rem); align-self: start; } }
.post-toc { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--n-50); }
.post-toc__title { margin: 0 0 var(--space-3); font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.post-toc ol { margin: 0; padding-left: 1.1rem; font-size: var(--text-sm); }
.post-toc li + li { margin-top: var(--space-2); }
.post-toc a { color: var(--color-text); text-decoration: none; }
.post-toc a:hover, .post-toc a[aria-current] { color: var(--color-primary); }
.post-toc a[aria-current] { font-weight: var(--weight-semibold); }
@media (max-width: 1023px) { .post-toc { display: none; } }
.post-cta { padding: var(--space-6); border-radius: var(--radius-lg); background: linear-gradient(150deg, var(--navy-800), var(--navy-500)); color: var(--n-0); }
.post-cta__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: var(--orange-500); }
.post-cta__title { margin-top: var(--space-4); color: var(--n-0); font-size: var(--text-lg); }
.post-cta__text { margin: var(--space-2) 0 var(--space-5); color: rgba(255, 255, 255, 0.85); font-size: var(--text-sm); }

.prose { font-size: 1.0625rem; line-height: 1.75; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-10); font-size: var(--text-2xl); scroll-margin-top: calc(var(--header-height) + 1.5rem); }
.prose h3 { margin-top: var(--space-6); font-size: var(--text-lg); }
.prose h2 + *, .prose h3 + * { margin-top: var(--space-3); }
.prose > p:first-child { font-size: var(--text-lg); color: var(--color-heading); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: var(--space-2); }
.prose li::marker { color: var(--color-primary); font-weight: var(--weight-bold); }
.prose a { color: var(--color-primary); text-underline-offset: 0.18em; }
.prose .table-wrap { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: 1.5; }
.prose th, .prose td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.prose thead th { border-bottom: 2px solid var(--color-primary); color: var(--color-heading); }
.prose tbody th { color: var(--color-heading); }

.post-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.post-foot__label { margin: 0; font-weight: var(--weight-semibold); color: var(--color-heading); }
.post-share { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.post-share a { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.45rem 0.85rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); color: var(--color-text); font-size: var(--text-sm); text-decoration: none; }
.post-share a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.post-share .icon { width: 1rem; height: 1rem; }
.post-foot .btn { margin-left: auto; }

/* ---------- 404 ---------- */
.notfound { padding: clamp(3rem, 8vw, 5.5rem) 0; text-align: center; color: var(--n-0);
  background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.12) 1px, transparent 0) 0 0 / 22px 22px, linear-gradient(120deg, var(--navy-900), var(--navy-500)); }
.notfound__inner { max-width: 44rem; }
.notfound__code { margin: 0; font-size: clamp(5rem, 18vw, 9rem); font-weight: var(--weight-black); line-height: 1; letter-spacing: -0.04em; }
.notfound__code span { color: var(--orange-500); }
.notfound__title { margin-top: var(--space-4); color: var(--n-0); font-size: var(--text-3xl); }
.notfound__text { margin: var(--space-4) auto 0; color: rgba(255, 255, 255, 0.85); font-size: var(--text-lg); }
.notfound__search { display: flex; flex-wrap: wrap; gap: var(--space-3); max-width: 32rem; margin: var(--space-8) auto 0; }
.notfound__search .input { flex: 1 1 14rem; }
.notfound__search .btn { flex: 0 0 auto; }
.notfound__links { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .notfound__links { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .notfound__links { grid-template-columns: repeat(3, 1fr); } }
.notfound__links a { display: flex; align-items: flex-start; gap: var(--space-4); height: 100%; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-text-muted); font-size: var(--text-sm); text-decoration: none; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.notfound__links a:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.notfound__links .icon { flex: none; width: 2.5rem; height: 2.5rem; padding: 0.6rem; border-radius: 50%; background: var(--blue-50); color: var(--color-primary); }
.notfound__links strong { display: block; margin-bottom: 0.15rem; color: var(--color-heading); font-size: var(--text-base); }
.notfound__home { margin-top: var(--space-8); text-align: center; }
@media (max-width: 30rem) { .notfound__search .btn { flex: 1 1 100%; justify-content: center; } }

/* ---------- Get a quote: three-step form --------------------------------------------------------- */
.quote-hero__points { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: var(--space-5) 0 0; padding: 0; list-style: none; color: rgba(255, 255, 255, 0.9); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.quote-hero__points li { display: inline-flex; align-items: center; gap: var(--space-2); }
.quote-hero__points .icon { width: 1.1rem; height: 1.1rem; color: var(--orange-500); }

.quote-layout { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 1024px) { .quote-layout { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--space-12); } }
.quote-form, .quote-done { padding: clamp(1.25rem, 3.5vw, 2.25rem); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--n-0); box-shadow: var(--shadow-lg); scroll-margin-top: calc(var(--header-height) + 1rem); }
.quote-form { gap: var(--space-6); }

.quote-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin: 0; padding: 0; list-style: none; counter-reset: qstep; font-size: var(--text-sm); }
.quote-steps[hidden] { display: none; }
.quote-steps li { display: flex; flex-direction: column; gap: var(--space-1); padding-top: var(--space-3); border-top: 4px solid var(--n-200); color: var(--color-text-muted); counter-increment: qstep; }
.quote-steps li::before { content: "Step " counter(qstep); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--n-500); }
.quote-steps li.is-done { border-top-color: var(--blue-500); }
.quote-steps li[aria-current] { border-top-color: var(--orange-500); color: var(--color-heading); font-weight: var(--weight-semibold); }
@media (max-width: 479px) { .quote-steps li { font-size: var(--text-xs); } }

.quote-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.quote-step[hidden] { display: none; }
.quote-form:not(.is-stepped) .quote-step + .quote-step { padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.quote-step__title { padding: 0; font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-heading); line-height: 1.25; }
.quote-step__title:focus { outline: none; }
.quote-step__no { display: block; margin-bottom: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); }
.quote-form.is-stepped .quote-step__no { display: none; }
.quote-step__hint { margin: var(--space-2) 0 var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); }

.quote-tiles { display: grid; gap: var(--space-3); }
@media (min-width: 560px) { .quote-tiles { grid-template-columns: repeat(2, 1fr); } }
.quote-tile { position: relative; display: block; cursor: pointer; }
.quote-tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.quote-tile__box { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-3); align-items: center; height: 100%; padding: var(--space-4) var(--space-10) var(--space-4) var(--space-4); border: 2px solid var(--color-border); border-radius: var(--radius-lg); transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
.quote-tile__box .icon { grid-row: span 2; width: 2.5rem; height: 2.5rem; padding: 0.6rem; border-radius: 50%; background: var(--blue-50); color: var(--color-primary); }
.quote-tile__box strong { color: var(--color-heading); line-height: 1.3; }
.quote-tile__box span { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.35; }
.quote-tile__box::after { content: ""; position: absolute; top: 50%; right: var(--space-4); width: 1.25rem; height: 1.25rem; margin-top: -0.625rem; border: 2px solid var(--n-300); border-radius: var(--radius-sm); background: var(--n-0) center / 0.85rem no-repeat; }
.quote-tile:hover .quote-tile__box { border-color: var(--blue-300); }
.quote-tile input:focus-visible + .quote-tile__box { outline: 3px solid var(--navy-200); outline-offset: 2px; }
.quote-tile input:checked + .quote-tile__box { border-color: var(--color-primary); background: var(--blue-50); }
.quote-tile input:checked + .quote-tile__box .icon { background: var(--color-primary); color: var(--n-0); }
.quote-tile input:checked + .quote-tile__box::after { border-color: var(--color-primary); background-color: var(--color-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.quote-step.is-invalid .quote-tile__box { border-color: #f5c2c9; }
.quote-group-error { margin-top: var(--space-3); }

.quote-q { min-width: 0; margin: 0 0 var(--space-5); padding: 0; border: 0; }
.quote-q > legend { margin-bottom: var(--space-2); padding: 0; }
.quote-q--inline { margin-bottom: 0; }
.quote-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.quote-chips label { position: relative; cursor: pointer; }
.quote-chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.quote-chips span { display: inline-block; min-width: 3.25rem; padding: 0.5rem 0.95rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); text-align: center; font-size: var(--text-sm); font-weight: var(--weight-medium); transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.quote-chips label:hover span { border-color: var(--color-primary); color: var(--color-primary); }
.quote-chips input:checked + span { border-color: var(--color-primary); background: var(--color-primary); color: var(--n-0); }
.quote-chips input:focus-visible + span { outline: 3px solid var(--navy-200); outline-offset: 2px; }

.quote-summary { position: relative; margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--n-50); font-size: var(--text-sm); }
.quote-summary[hidden] { display: none; }
.quote-summary__title { margin: 0 0 var(--space-2); font-weight: var(--weight-semibold); color: var(--color-heading); }
.quote-summary__list { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); margin: 0; }
.quote-summary__list dt { color: var(--color-text-muted); }
.quote-summary__list dd { margin: 0; color: var(--color-heading); }
.quote-summary__edit { position: absolute; top: var(--space-3); right: var(--space-4); padding: 0; border: 0; background: none; color: var(--color-primary); font: inherit; font-weight: var(--weight-semibold); text-decoration: underline; cursor: pointer; }
.quote-privacy { margin: var(--space-4) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }

.quote-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.quote-nav [hidden] { display: none; }
.quote-nav [data-quote-next], .quote-nav [data-quote-submit] { margin-left: auto; }
@media (max-width: 479px) { .quote-nav .btn--lg { flex: 1 1 100%; justify-content: center; } .quote-nav [data-quote-back] { order: 2; } }

.quote-done { text-align: center; }
.quote-done[hidden] { display: none; }
.quote-done.is-in { animation: cta-modal-in 0.35s var(--ease-out) both; }
.quote-done__icon { display: inline-grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: #e8f5ee; color: #15803d; }
.quote-done__icon .icon { width: 2rem; height: 2rem; }
.quote-done__title { margin: var(--space-4) 0 var(--space-3); font-size: var(--text-2xl); }
.quote-done p { max-width: 34rem; margin-inline: auto; color: var(--color-text-muted); }
.quote-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }

.quote-aside { display: grid; gap: var(--space-5); }
@media (min-width: 1024px) { .quote-aside { position: sticky; top: calc(var(--header-height) + 1.5rem); } }
.quote-call { padding: var(--space-6); border-radius: var(--radius-xl); background: linear-gradient(150deg, var(--navy-800), var(--navy-500)); color: var(--n-0); }
.quote-call__label { margin: 0; color: rgba(255, 255, 255, 0.75); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; }
.quote-call__number { display: inline-flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); color: var(--n-0); font-size: var(--text-2xl); font-weight: var(--weight-bold); text-decoration: none; }
.quote-call__number .icon { width: 1.5rem; height: 1.5rem; color: var(--orange-500); }
.quote-call__number:hover { color: var(--orange-500); }
.quote-call__text { margin: var(--space-3) 0 0; color: rgba(255, 255, 255, 0.85); font-size: var(--text-sm); }
.quote-call__text a { color: var(--n-0); }
.quote-next { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-xl); }
.quote-next__title { margin: 0 0 var(--space-4); font-size: var(--text-lg); }
.quote-next__list { margin: 0; padding: 0; list-style: none; counter-reset: qn; }
.quote-next__list li { position: relative; padding-left: 2.75rem; counter-increment: qn; }
.quote-next__list li + li { margin-top: var(--space-4); }
.quote-next__list li::before { content: counter(qn); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--blue-50); color: var(--color-primary); font-weight: var(--weight-bold); font-size: var(--text-sm); }
.quote-next__list strong { display: block; color: var(--color-heading); }
.quote-next__list span { color: var(--color-text-muted); font-size: var(--text-sm); }
.quote-aside__note { display: flex; gap: var(--space-3); margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.quote-aside__note .icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--color-primary); }
/* teaser rows of three: on two-column screens show two, so no card sits alone on a row */
@media (min-width: 640px) and (max-width: 1023px) { .post-grid--three > :nth-child(3) { display: none; } }

/* Blog topic chips as links (server-rendered category pages) and page navigation */
a.chip-toggle { text-decoration: none; }
a.chip-toggle[aria-current] { background: var(--color-primary); border-color: var(--color-primary); color: var(--n-0); }
a.chip-toggle[aria-current] .blog-filter__n { background: rgba(255, 255, 255, 0.2); color: var(--n-0); }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-10); padding: 0; list-style: none; }
.pager a, .pager span { display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 0.75rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; }
.pager a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pager [aria-current] { background: var(--color-primary); border-color: var(--color-primary); color: var(--n-0); }
.pager .is-disabled { opacity: 0.45; }

/* ---- live shop (cart, checkout and Find a Number talking to the server) ---- */
.cart-toast--error .icon { color: var(--orange-500); }
[data-add-to-cart][aria-busy="true"], .btn[aria-busy="true"] { opacity: 0.65; cursor: progress; }
.notice--error { background: var(--orange-50); border-left-color: var(--color-error); }
.notice--error .icon { color: var(--color-error); }
.notice + .notice { margin-top: var(--space-3); }
.shop-notices { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.cart-item--unavailable { opacity: 0.7; }
.cart-item__issue { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-error); font-weight: var(--weight-semibold); }
.hold-timer { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.hold-timer .icon { width: 1rem; height: 1rem; color: var(--color-primary); }
.hold-timer strong { color: var(--color-heading); font-variant-numeric: tabular-nums; }
.stock-note { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--orange-600); }
.is-out-of-stock .product-card__price strong, .is-out-of-stock .price-card__amount strong { opacity: 0.6; }
.shop-notices:empty { display: none; }

/* ---- FAQ, questions and answer side by side (from 900px) -------------------------------------
   main.js gives every .faq accordion a twin: the questions as a list on the left, the chosen answer
   in a navy panel on the right that fades in. Below 900px (and without JavaScript) the accordion
   is used. (Adrem design option D.) */
.faq-d { display: none; }
@media (min-width: 900px) {
  .faq[data-faq-split] { display: none; }
  .faq-d { display: grid; grid-template-columns: 5fr 7fr; align-items: start; gap: var(--space-5); }
  .faq-d__panels { position: sticky; top: calc(var(--header-height, 5rem) + 1.5rem); }
  .container--narrow.container--faq { max-width: calc(var(--container) + 2 * var(--gutter)); }
}
.faq-d__list { display: grid; gap: var(--space-2); }
.faq-d__q {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left; cursor: pointer;
  padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--n-0); font: inherit; font-weight: var(--weight-semibold); color: var(--color-heading);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.faq-d__q:hover { transform: translateX(4px); border-color: var(--blue-200); box-shadow: var(--shadow-sm); }
.faq-d__q:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.faq-d__q[aria-selected="true"] { background: linear-gradient(120deg, var(--blue-600), var(--blue-500)); border-color: transparent; color: var(--n-0); box-shadow: 0 16px 32px -18px rgba(27, 152, 224, 0.8); }
.faq-d__q .icon { margin-left: auto; flex: none; width: 1.1rem; height: 1.1rem; opacity: 0; transform: translateX(-6px); transition: opacity 0.3s ease, transform 0.3s ease; }
.faq-d__q[aria-selected="true"] .icon { opacity: 1; transform: none; }
.faq-d__index { flex: none; font-family: var(--font-heading); font-size: var(--text-sm); color: var(--color-primary); transition: color 0.3s ease; }
.faq-d__q[aria-selected="true"] .faq-d__index { color: rgba(255, 255, 255, 0.85); }
.faq-d__answer {
  padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius-xl); color: var(--n-0);
  background: linear-gradient(150deg, var(--navy-600), var(--navy-800) 70%, #12264b);
  box-shadow: var(--shadow-lg); animation: faq-d-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-d__answer[hidden] { display: none; }
.faq-d__answer:focus-visible { outline: 3px solid var(--blue-300); outline-offset: 3px; }
@keyframes faq-d-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.faq-d__label { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-300); }
.faq-d__title { color: var(--n-0); font-size: var(--text-xl); margin: 0 0 var(--space-3); }
.faq-d__text { margin: 0 0 var(--space-5); color: rgba(255, 255, 255, 0.88); line-height: 1.7; }
.faq-d__text > * + * { margin-top: var(--space-3); }
.faq-d__text a { color: var(--blue-300); }
.faq-d__more { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--blue-300); font-weight: var(--weight-semibold); text-decoration: none; }
.faq-d__more:hover { color: var(--n-0); }
.faq-d__more .icon { width: 1rem; height: 1rem; transition: transform 0.3s ease; }
.faq-d__more:hover .icon { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .faq-d__answer { animation: none; } .faq-d__q:hover { transform: none; } }

/* Number hubs: a range card's name links to the range's own page */
.range-card__name a { color: inherit; text-decoration: none; }
.range-card__name a:hover,
.range-card__name a:focus-visible { text-decoration: underline; text-underline-offset: 0.18em; }

/* PSTN switch-off page: the days left to the deadline (main.js keeps [data-countdown-days] current) */
.countdown { text-align: center; padding: var(--space-6); background: var(--n-0); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.countdown__days { display: flex; align-items: baseline; justify-content: center; gap: var(--space-2); margin: var(--space-4) 0; }
.countdown__days strong { font-size: clamp(3rem, 8vw, 5rem); line-height: 1; color: var(--orange-500); font-variant-numeric: tabular-nums; }
.countdown__days span { font-size: var(--text-lg); font-weight: 600; color: var(--navy-800); }