/* ==========================================================================
   ACEBIZ — Site Stylesheet
   Brand: Branding Bible v1.1 (Feb 2026)
   Navy #153a7c  |  Teal #14A9B9  |  Outfit + IBM Plex Sans
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------ */
:root {
  /* Primary */
  --navy: #153a7c;
  --teal: #14a9b9;

  /* Navy scale */
  --navy-900: #0e1b3a;
  --navy-800: #172755;
  --navy-700: #2c3e73;
  --navy-400: #5b6c9e;

  /* Teal scale */
  --teal-700: #0e7f8b;
  --teal-300: #5fc7d2;
  --teal-100: #d6f1f4;

  /* Neutrals */
  --ink: #1f2933;
  --slate: #4b5563;
  --line: #e5e7eb;
  --mist: #f8fafc;
  --white: #ffffff;

  /* System */
  --maxw: 1180px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 3px rgba(15, 27, 58, .08), 0 1px 2px rgba(15, 27, 58, .06);
  --shadow-md: 0 10px 30px rgba(15, 27, 58, .10);
  --shadow-lg: 0 24px 60px rgba(15, 27, 58, .16);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --font-head: "Outfit", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
}

/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
iframe, video, svg { max-width: 100%; }
a { color: var(--teal-700); text-decoration: none; }
a:hover { color: var(--navy); }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--navy); line-height: 1.12; font-weight: 700; letter-spacing: -.01em; }
h1, h2, h3, h4, p, li, summary, td, th { overflow-wrap: break-word; }
ul { padding: 0; list-style: none; }

/* ---- Responsive hardening (no horizontal overflow on any device) -------- */
/* Prevent grid/flex children from forcing the track wider than the screen */
.grid > *, .features > *, .ach-grid > *, .steps > *, .testimonials-grid > *,
.contact-grid > *, .split > *, .footer__grid > *, .awards-band__grid > * { min-width: 0; }
.map-embed { max-width: 100%; }

/* ---- Layout helpers ----------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
.section--mist { background: var(--mist); }
.section--navy { background: var(--navy-900); color: #dfe6f5; }
.center { text-align: center; }
.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 1rem;
  font-weight: 700;
  color: var(--teal-700);
  margin-bottom: 14px;
}
.section--navy .eyebrow { color: var(--teal-300); }
.section-title { font-size: clamp(2.3rem, 4.4vw, 3.35rem); margin-bottom: 16px; }
.section--navy .section-title { color: #fff; }
.section-lead { font-size: 1.12rem; color: var(--slate); max-width: 720px; }
.center .section-lead { margin-inline: auto; }
.section--navy .section-lead { color: #b9c4e0; }

/* Navy section carrying a photograph.
   The photo is left completely unblurred and unscaled, so it renders as sharp as
   the source allows. Contrast for the copy comes from two stacked layers instead
   of from dulling the picture: a light overall wash, plus a scrim concentrated
   where the heading and lead actually sit. Darkening the whole image to protect
   one block of text is what made it look muddy before.
   The photo is an <img> rather than a CSS background so it still gets a
   cache-busting hash, width/height and lazy loading like every other image. */
.section--photo { position: relative; overflow: hidden; }
.section__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.section__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.section__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(125% 64% at 50% 16%, rgba(9, 19, 42, .72), rgba(9, 19, 42, 0) 74%),
    linear-gradient(150deg, rgba(14, 27, 58, .70), rgba(14, 27, 58, .62) 45%, rgba(21, 58, 124, .68));
}
.section--photo > .container { position: relative; z-index: 1; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  padding: 14px 26px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--teal); color: #fff; box-shadow: 0 8px 20px rgba(20, 169, 185, .32); }
.btn-primary:hover { background: var(--teal-700); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20, 169, 185, .4); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-800); color: #fff; transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); background: var(--mist); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn-outline-light:hover { background: #fff; color: var(--navy); }

/* ---- Social rail -------------------------------------------------------- */
/* Fixed rail down the left edge. Separate rounded tiles with a gap rather than
   one solid block, so it reads as a designed element instead of a bar stuck to
   the window. Each tile carries its platform's own colour — set once as --brand
   so the tile, its glow and its hover ring all stay in step.
   z-index sits under .site-header (100) so the sticky header and its mobile
   menu always win. Hidden below 1280px: the content column is 1180px wide, so
   any narrower and the rail starts covering text rather than sitting beside it
   — the footer carries the same four links at those sizes. */
.social-rail {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 90; display: flex; flex-direction: column; gap: 9px;
  padding: 10px 0;
}
.social-rail__link {
  width: 44px; height: 44px; display: grid; place-items: center;
  color: #fff; position: relative; isolation: isolate;
  background: var(--brand); border-radius: 0 14px 14px 0;
  box-shadow: 0 4px 14px rgba(15, 27, 58, .22);
  transition: width .24s var(--ease), border-radius .24s var(--ease), filter .2s;
  /* The pulse and the twinkle run on different cycles so the rail never falls
     into a single visible rhythm. Delays are set per tile below. */
  animation: rail-pulse 3.4s ease-out infinite, rail-twinkle 3.4s ease-in-out infinite;
}
.social-rail__link svg { width: 20px; height: 20px; position: relative; z-index: 1; }

/* Expanding ring in the tile's own colour — the "blink". Drawn with box-shadow
   spread so it costs no extra element and never affects layout. */
@keyframes rail-pulse {
  0%        { box-shadow: 0 4px 14px rgba(15, 27, 58, .22), 0 0 0 0 var(--glow); }
  55%, 100% { box-shadow: 0 4px 14px rgba(15, 27, 58, .22), 0 0 0 14px transparent; }
}
/* A short lift in brightness on the same beat, so the mark itself catches too. */
@keyframes rail-twinkle {
  0%, 62%, 100% { filter: brightness(1); }
  10%           { filter: brightness(1.28); }
  22%           { filter: brightness(1.05); }
}
.social-rail__link:nth-child(1) { animation-delay: 0s,    0s;    }
.social-rail__link:nth-child(2) { animation-delay: .55s,  .55s;  }
.social-rail__link:nth-child(3) { animation-delay: 1.1s,  1.1s;  }
.social-rail__link:nth-child(4) { animation-delay: 1.65s, 1.65s; }

.social-rail__link:hover, .social-rail__link:focus-visible {
  width: 58px; border-radius: 0 20px 20px 0;
  filter: brightness(1.12) saturate(1.12); animation-play-state: paused;
}
.social-rail__link:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.social-rail__link--facebook  { --brand: #1877f2; --glow: rgba(24, 119, 242, .55); }
.social-rail__link--linkedin  { --brand: #0a66c2; --glow: rgba(10, 102, 194, .55); }
.social-rail__link--x         { --brand: #000;    --glow: rgba(90, 90, 90, .55); }
/* Instagram has no single flat colour — its brand mark is this gradient. The
   glow borrows the gradient's dominant pink. */
.social-rail__link--instagram {
  --glow: rgba(221, 42, 123, .55);
  background: linear-gradient(135deg, #f58529 0%, #dd2a7b 45%, #8134af 72%, #515bd4 100%);
}
@media (max-width: 1280px) { .social-rail { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .social-rail__link { animation: none; transition: none; }
}

/* ---- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.nav__logo img { height: 40px; width: auto; }
.nav__menu { display: flex; align-items: center; gap: 4px; }
.nav__menu > li { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 500; font-size: .97rem;
  color: var(--navy-800); padding: 10px 14px; border-radius: 8px; transition: color .15s, background .15s;
}
.nav__link:hover { color: var(--teal-700); background: var(--mist); }
.nav__link svg { width: 14px; height: 14px; opacity: .7; }

/* dropdown */
.has-dropdown .dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 268px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: 8px; opacity: 0; visibility: hidden;
  transform: translateY(8px); transition: all .18s var(--ease);
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: block; padding: 11px 14px; border-radius: 8px;
  color: var(--navy-800); font-size: .94rem; font-family: var(--font-body);
}
.dropdown li:not(:last-child) > a { border-bottom: 1px solid var(--line); border-radius: 0; }
.dropdown a:hover { background: var(--mist); color: var(--teal-700); }
.dropdown a span { display: block; font-size: .8rem; color: var(--slate); font-weight: 400; }

.nav__cta { display: flex; align-items: center; gap: 12px; }
.nav__phone { font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: .95rem; }
.nav__phone:hover { color: var(--teal-700); }

/* mobile toggle */
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle span { display: block; width: 24px; height: 2px; background: var(--navy); margin: 5px 0; transition: .2s; border-radius: 2px; }

/* ---- Hero --------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(20, 169, 185, .16), transparent 60%),
              linear-gradient(160deg, var(--navy-900) 0%, var(--navy) 55%, var(--navy-700) 100%);
  color: #fff; padding: 96px 0 104px;
}
.hero::after {
  content: ""; position: absolute; inset: -30px;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 26px 26px; opacity: .5; pointer-events: none; z-index: 0;
  will-change: transform; animation: hero-grid 11s linear infinite;
}
/* One full tile per cycle, so the loop point is invisible. */
@keyframes hero-grid {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(26px, 26px, 0); }
}

/* Aurora: three oversized, heavily blurred blooms drifting on their own timings.
   Slow enough (32-47s) and soft enough that nothing reads as "an animation" —
   the background simply never sits still. Transform and opacity only, so the
   whole thing stays on the GPU and costs nothing on scroll. */
.hero__aurora {
  position: absolute; inset: -25%; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.hero__aurora span {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(80px); will-change: transform, opacity;
}
.hero__aurora span:nth-child(1) {
  width: 46vw; height: 46vw; left: 2%; top: 6%; opacity: .88;
  background: radial-gradient(circle, rgba(20, 169, 185, .78), transparent 66%);
  animation: aurora-a 9s ease-in-out infinite;
}
.hero__aurora span:nth-child(2) {
  width: 40vw; height: 40vw; right: 3%; top: -4%; opacity: .78;
  background: radial-gradient(circle, rgba(95, 199, 210, .66), transparent 66%);
  animation: aurora-b 11s ease-in-out infinite;
}
.hero__aurora span:nth-child(3) {
  width: 52vw; height: 52vw; left: 26%; bottom: -20%; opacity: .68;
  background: radial-gradient(circle, rgba(44, 62, 115, .90), transparent 70%);
  animation: aurora-c 13s ease-in-out infinite;
}
@keyframes aurora-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(36%, 30%, 0) scale(1.55); }
}
@keyframes aurora-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.45); }
  50%      { transform: translate3d(-34%, 24%, 0) scale(.80); }
}
@keyframes aurora-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(28%, -30%, 0) scale(1.5); }
}

/* Motes: small teal points that rise out of the bottom edge, drift sideways and
   fade out before the top — things visibly entering and leaving, rather than a
   wash that only shifts in place. Each one's lane, size, speed, delay and drift
   come from custom properties in the markup, so no two ever travel in step. The
   negative delays start them mid-flight, so the field is already populated on
   the first paint instead of filling up over the first half minute. */
.hero__motes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero__motes span {
  position: absolute; left: var(--x); bottom: -8%;
  width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, rgba(190, 245, 250, 1), rgba(20, 169, 185, .55) 50%, transparent 74%);
  box-shadow: 0 0 14px 3px rgba(95, 199, 210, .35);
  opacity: 0; will-change: transform, opacity;
  animation: mote-rise var(--d) var(--dl) linear infinite;
}
@keyframes mote-rise {
  0%   { transform: translate3d(0, 0, 0) scale(.5); opacity: 0; }
  10%  { opacity: .95; }
  70%  { opacity: .7; }
  100% { transform: translate3d(var(--dx), -105vh, 0) scale(1.3); opacity: 0; }
}

/* A single wide, very soft beam sweeping across every 14s. It is the one element
   that clearly crosses the whole hero, which is what sells the sense of movement
   the blooms alone can't. */
.hero__beam {
  position: absolute; top: -30%; left: -40%; width: 34%; height: 160%;
  pointer-events: none; z-index: 0;
  background: linear-gradient(90deg, transparent, rgba(160, 235, 245, .30) 42%, rgba(255, 255, 255, .20) 56%, transparent);
  filter: blur(26px); transform: rotate(14deg); will-change: transform, opacity;
  animation: beam-sweep 9s ease-in-out infinite;
}
@keyframes beam-sweep {
  0%       { transform: translate3d(0, 0, 0) rotate(14deg); opacity: 0; }
  12%      { opacity: 1; }
  78%      { opacity: 1; }
  100%     { transform: translate3d(430%, 0, 0) rotate(14deg); opacity: 0; }
}
.hero .container { position: relative; z-index: 1; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  padding: 9px 20px; border-radius: 999px; font-size: 1.02rem; letter-spacing: .04em;
  color: var(--teal-300); margin-bottom: 22px; font-weight: 600;
}
.hero h1 { color: #fff; font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.05; margin-bottom: 20px; }
.hero h1 .accent { color: var(--teal-300); }
.hero__lead { font-size: 1.2rem; color: #c7d2ea; max-width: 560px; margin-bottom: 32px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.hero__rating { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; color: #c7d2ea; font-size: .95rem; }
/* Google rating badge.
   A white card on the navy hero, so the multi-colour "G" sits on the ground the
   Google brand expects instead of on dark blue. This replaced a plain text row
   whose link inherited the global a:hover navy and vanished into the hero — a
   card sidesteps that class of bug entirely. */
.hero__google {
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 12px; padding: 9px 16px 9px 13px;
  text-decoration: none; box-shadow: 0 6px 20px rgba(15, 27, 58, .22);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.hero__google:hover, .hero__google:focus-visible {
  transform: translateY(-2px); box-shadow: 0 11px 28px rgba(15, 27, 58, .3);
}
.hero__google:focus-visible { outline: 2px solid var(--teal-300); outline-offset: 3px; }
.hero__google-g { width: 34px; height: 34px; flex: 0 0 34px; display: block; }
.hero__google-body { display: grid; gap: 1px; }
.hero__google-label {
  font-family: var(--font-head); font-weight: 600; font-size: .78rem;
  color: #5f6368;          /* Google's own secondary grey */
  letter-spacing: .01em;
}
.hero__google-score { display: flex; align-items: center; gap: 8px; }
.hero__google-score strong {
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: #ef8b0b;
}
.hero__google-stars { color: #fbbc04; letter-spacing: 1px; font-size: .92rem; }
.hero__rating-note { color: #c7d2ea; font-size: .95rem; }
@media (prefers-reduced-motion: reduce) { .hero__google { transition: none; } }
.hero__card {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius); padding: 30px; backdrop-filter: blur(6px);
}
.hero__card h3 { color: #fff; font-size: 1.15rem; margin-bottom: 18px; }
.hero__stat { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.hero__stat:last-child { border-bottom: 0; }
.hero__stat b { font-family: var(--font-head); color: var(--teal-300); font-size: 1.9rem; line-height: 1; min-width: 76px; }
.hero__stat span { color: #c7d2ea; font-size: .92rem; }

/* Hero slider — grid-stacked slides size to the tallest, smooth cross-fade,
   constant height at every width (no jump, no overflow) */
.hero__slides { display: grid; }
.hero__slide {
  grid-area: 1 / 1; opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.hero__slide.is-active {
  opacity: 1; pointer-events: auto; transform: none;
  transition-delay: .28s;          /* let the outgoing slide clear first */
}
.hero__dots { display: flex; gap: 10px; margin-top: 24px; }
.hero__dot { width: 30px; height: 5px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,.3); transition: background .25s, width .25s; }
.hero__dot:hover { background: rgba(255,255,255,.55); }
.hero__dot.is-active { background: var(--teal-300); width: 44px; }
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; transform: none; }
  /* :nth-child(n) matches the specificity of the rules that set these
     animations, so the reset actually wins. A plain `.hero__aurora span`
     loses to `.hero__aurora span:nth-child(1)` and silently does nothing. */
  .hero::after, .hero__aurora span:nth-child(n),
  .hero__motes span, .hero__beam { animation: none; }
  .hero__motes, .hero__beam { display: none; }
}

/* Page hero (interior pages) */
.page-hero {
  background: radial-gradient(900px 500px at 85% -20%, rgba(20, 169, 185, .18), transparent 60%),
              linear-gradient(160deg, var(--navy-900), var(--navy) 80%);
  color: #fff; padding: 70px 0 74px; text-align: center;
}
.page-hero .eyebrow { color: var(--teal-300); }
.page-hero h1 { color: #fff; font-size: clamp(2.3rem, 4.6vw, 3.6rem); margin-bottom: 16px; }
.page-hero p { color: #c7d2ea; font-size: 1.15rem; max-width: 660px; margin: 0 auto; }
.breadcrumb { font-size: .86rem; color: #93a1c6; margin-bottom: 20px; }
.breadcrumb a { color: #93a1c6; }
.breadcrumb a:hover { color: #fff; }

/* ---- Trust strip -------------------------------------------------------- */
.trust { background: var(--mist); border-bottom: 1px solid var(--line); padding: 26px 0; }
.trust__row { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; }
.trust__label { font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--slate); font-weight: 600; }
.trust__item { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; color: var(--navy-700); font-size: 1.02rem; }
.trust__item svg { width: 20px; height: 20px; flex: 0 0 20px; }
/* ---- Awards band (full-width, captioned) -------------------------------- */
.awards-band { padding: 54px 0; background: var(--mist); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.awards-band__grid { display: grid; grid-template-columns: minmax(220px, 1fr) 1.7fr; gap: 44px; align-items: center; }
.awards-band__intro h2 { font-size: clamp(1.35rem, 2.1vw, 1.95rem); color: var(--navy); line-height: 1.15; margin-top: 8px; }
.awards-band__logos { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.award { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; width: 150px; }
.award__img { height: 100px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.award__img img { max-height: 100px; max-width: 150px; width: auto; transition: transform .2s var(--ease); }
.award:hover .award__img img { transform: translateY(-3px); }
.award figcaption { font-family: var(--font-head); font-weight: 600; font-size: .82rem; color: var(--navy-700); line-height: 1.3; }
@media (max-width: 860px) {
  .awards-band__grid { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .awards-band__logos { justify-content: center; gap: 30px; }
}

/* ---- Ace Biz group / brand cards ---------------------------------------- */
/* Sibling-brand cards. Same asymmetric radius as the service and segment cards
   so all three card families on this page read as one system. The corner badge
   marks these as leaving for another site, which the old plain "Visit site" link
   left ambiguous. */
.brand-card {
  position: relative; overflow: hidden;
  background: #fff; border-radius: 28px 0 28px 0; padding: 30px 30px 28px;
  display: flex; flex-direction: column; height: 100%; box-shadow: var(--shadow-md);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.brand-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.brand-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--teal-700), var(--teal-300));
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.brand-card:hover::before { transform: scaleX(1); }
.brand-card__ext {
  position: absolute; top: 20px; right: 20px; width: 34px; height: 34px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--teal-100); color: var(--teal-700);
  transition: background .25s, color .25s, transform .25s var(--ease);
}
.brand-card__ext svg { width: 15px; height: 15px; }
.brand-card:hover .brand-card__ext { background: var(--teal); color: #fff; transform: translate(2px, -2px); }
.brand-card h3 { font-size: 1.22rem; margin-bottom: 8px; padding-right: 44px; }
.brand-tag {
  color: var(--teal-700); font-family: var(--font-head); font-weight: 600;
  font-size: .92rem; line-height: 1.4; margin-bottom: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.brand-card > p:not(.brand-tag) { color: var(--slate); font-size: .95rem; line-height: 1.6; flex: 1; margin-bottom: 18px; }
@media (prefers-reduced-motion: reduce) {
  .brand-card, .brand-card::before, .brand-card__ext { transition: none; }
}
.footer__brands { border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px; margin-bottom: 22px; text-align: center; font-size: .9rem; color: #93a1c6; }
.footer__brands a { color: #c7d2ea; font-family: var(--font-head); font-weight: 500; }
.footer__brands a:hover { color: var(--teal-300); }

/* ---- Marquee (auto-scrolling partners) ---------------------------------- */
.marquee { overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.marquee__track .trust__item { margin-right: 76px; }
.marquee__track--partners { animation-duration: 48s; align-items: center; }

/* Partner logo strip.
   The source logos arrived at everything from 200x135 to 3500x2321, with very
   different amounts of built-in padding, so they were pre-trimmed and scaled to
   a common 96px height before being written to /assets/partners/.
   Here each mark gets the same height box but is also capped on width, so the
   long wordmarks are limited by width while the compact ones fill the height —
   that is what makes six unrelated logos read as one row rather than a ladder. */
.marquee__track--partners .trust__logo {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  height: 40px; margin-right: 76px;
}
.trust__logo img {
  max-height: 100%; max-width: 132px; width: auto; height: auto;
  object-fit: contain; display: block;
}
/* Near-square marks read small next to a wordmark at the same height, so give
   them a little more room. */
.trust__logo--square img { max-height: 46px; max-width: 46px; }
.trust__logo--wide img { max-height: 30px; max-width: 138px; }
@media (max-width: 620px) {
  .marquee__track--partners .trust__logo { height: 32px; margin-right: 52px; }
  .trust__logo img { max-width: 104px; }
  .trust__logo--square img { max-height: 38px; max-width: 38px; }
  .trust__logo--wide img { max-height: 24px; max-width: 108px; }
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* testimonial cards in a marquee */
/* ---- Reviews marquee --------------------------------------------------- */
/* Same mechanism as the technology-partner strip: one CSS animation on the
   track, so the glide is compositor-driven and identical in feel. The card set
   is rendered twice (second copy aria-hidden) and the animation runs to -50%,
   which is what makes the loop seamless.
   The Next button doesn't scroll anything — it steps this animation's
   currentTime forward, so there is still only one thing moving the strip. */
.marquee__track--cards { align-items: stretch; animation-duration: 64s; padding: 6px 0; gap: 24px; }
.marquee__track--cards .quote { flex: 0 0 360px; }

.marquee__nav { display: flex; justify-content: flex-end; margin-top: 26px; }
.marquee__btn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); color: var(--navy); cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease);
}
.marquee__btn svg { width: 18px; height: 18px; }
.marquee__btn:hover { background: var(--teal); border-color: var(--teal); color: #fff; transform: translateY(-2px); }
.marquee__btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

@media (max-width: 620px) { .marquee__track--cards .quote { flex-basis: 82vw; } }
/* With the animation off there is nothing for the button to step, so let the
   strip scroll by hand instead and drop the control. */
@media (prefers-reduced-motion: reduce) {
  .marquee:has(.marquee__track--cards) { overflow-x: auto; }
  .marquee__nav { display: none; }
  .marquee__btn { transition: none; }
}

/* ---- Cards / grids ------------------------------------------------------ */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
  height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card__icon {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: var(--teal-100); color: var(--teal-700); margin-bottom: 18px;
}
.card__icon svg { width: 26px; height: 26px; }
.card:nth-child(even) .card__icon { background: rgba(21, 58, 124, .1); color: var(--navy); }
.card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.card p { color: var(--slate); font-size: .98rem; margin-bottom: 16px; }
.card__link { font-family: var(--font-head); font-weight: 600; color: var(--teal-700); display: inline-flex; align-items: center; gap: 6px; }
.card__link svg { width: 16px; height: 16px; transition: transform .18s; }
.card:hover .card__link svg { transform: translateX(4px); }

/* Service cards — photo on top, copy beneath.
   The asymmetric radius (large top-left and bottom-right, square on the other
   diagonal) is the signature of this card; two rounded corners on opposite ends
   is what stops it reading as a plain rectangle.
   Stacked rather than side-by-side: at three across a card is ~360px wide, and
   splitting that leaves the photo a narrow vertical strip and the copy four
   words per line. */
.card--split {
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden; background: #fff;
  border: 1px solid var(--line); border-radius: 54px 0 54px 0;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.card--split:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }

.card--split .card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-900); }
.card--split .card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.card--split:hover .card__media img { transform: scale(1.06); }
/* Seven unrelated stock photos in one grid: a light navy wash pulls them together. */
.card--split .card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(21, 58, 124, .18), rgba(21, 58, 124, .04));
}
/* Fallback for a service with no photo yet. */
.card__media--brand { background: linear-gradient(150deg, var(--navy-900), var(--teal-700)); display: grid; place-items: center; }
.card__media--brand::after { display: none; }
.card__media-mark { width: 72px; height: 72px; color: rgba(255, 255, 255, .45); }

.card--split .card__body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.card--split .card__title { font-size: 1.2rem; line-height: 1.3; color: var(--navy); margin: 0; }
.card__rule { display: block; width: 100%; height: 1px; background: var(--line); margin: 14px 0 16px; }
.card--split .card__body p { color: var(--slate); font-size: .95rem; line-height: 1.6; margin: 0 0 24px; }
.card__btn {
  margin-top: auto; align-self: flex-start;
  font-family: var(--font-head); font-weight: 500; font-size: .95rem;
  color: var(--navy); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 26px; transition: background .22s, color .22s, border-color .22s;
}
.card--split:hover .card__btn { background: var(--teal); border-color: var(--teal); color: #fff; }

/* Three across. Seven services would strand the last one beside two empty
   cells, so it runs the full width as a wide feature card instead — the row
   completes, and the odd count reads as deliberate rather than left over. */
@media (min-width: 981px) {
  .grid--services { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .grid--services > .card--split:last-child {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 38% 1fr; align-items: stretch;
  }
  .grid--services > .card--split:last-child .card__media { aspect-ratio: 16 / 9; }
  .grid--services > .card--split:last-child .card__body { justify-content: center; padding: 34px 44px; }
  .grid--services > .card--split:last-child .card__title { font-size: 1.5rem; }
  .grid--services > .card--split:last-child .card__rule { width: 64px; margin: 16px 0 18px; }
  .grid--services > .card--split:last-child .card__body p { max-width: 58ch; font-size: 1rem; margin-bottom: 22px; }
  /* The stacked cards push their button to the bottom edge; here the block is
     vertically centred instead, so an auto top margin would strand it. */
  .grid--services > .card--split:last-child .card__btn { margin-top: 0; }
}
@media (max-width: 620px) {
  .card--split { border-radius: 36px 0 36px 0; }
  .card--split .card__body { padding: 22px 24px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .card--split, .card--split .card__media img, .card__btn { transition: none; }
}

/* Feature list (service detail sub-services) */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature { background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 24px; }
.feature h4 { font-size: 1.08rem; margin-bottom: 12px; color: var(--navy); }
.feature ul li { position: relative; padding-left: 24px; color: var(--slate); font-size: .95rem; margin-bottom: 8px; }
.feature ul li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--teal);
}

/* Split content */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split__media {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg);
  background: linear-gradient(150deg, var(--navy), var(--teal-700)); min-height: 340px;
  display: grid; place-items: center; padding: 40px; color: #fff; text-align: center;
}
.split__media .mark { font-family: var(--font-head); font-weight: 700; font-size: 3rem; }

/* Layered photo, replacing the version that hid the picture under a navy wash.
   Three planes: a large faded copy of the same shot offset behind, the photo
   itself in a white mount, and the pull-quote on a navy card overlapping the
   bottom edge. The photograph now reads at full strength, and the quote keeps
   its own contrast instead of fighting the image for it. */
.photo-stack { position: relative; padding: 0 0 62px 0; }
.photo-stack__ghost {
  position: absolute; left: -9%; top: -8%; width: 88%; z-index: 0;
  opacity: .13; pointer-events: none;
}
.photo-stack__ghost img { width: 100%; height: auto; display: block; border-radius: 10px; }
.photo-stack__frame {
  position: relative; z-index: 1; margin-left: auto; width: 86%;
  background: #fff; padding: 14px; border-radius: 6px;
  box-shadow: 0 18px 48px rgba(15, 27, 58, .16);
}
.photo-stack__frame img { width: 100%; height: auto; display: block; border-radius: 3px; }
.photo-stack__quote {
  position: absolute; left: 0; bottom: 0; z-index: 2; width: 66%;
  background: linear-gradient(150deg, var(--navy) 0%, var(--teal-700) 130%);
  color: #fff; padding: 24px 26px; border-radius: 18px 0 18px 0;
  box-shadow: 0 16px 40px rgba(15, 27, 58, .22);
}
.photo-stack__quote .mark {
  font-family: var(--font-head); font-weight: 700; font-size: 1.6rem;
  line-height: 1.18; margin: 0;
}
.photo-stack__quote p:last-child {
  margin: 12px 0 0; font-size: .92rem; line-height: 1.5; color: #d6f1f4;
}
@media (max-width: 980px) {
  .photo-stack { padding-bottom: 54px; }
  .photo-stack__quote { width: 74%; }
  .photo-stack__quote .mark { font-size: 1.4rem; }
}
@media (max-width: 620px) {
  .photo-stack { padding-bottom: 0; }
  .photo-stack__ghost { display: none; }
  .photo-stack__frame { width: 100%; padding: 10px; }
  .photo-stack__quote { position: static; width: 100%; margin-top: 16px; }
}
.tick-list li { position: relative; padding-left: 32px; margin-bottom: 14px; color: var(--slate); }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--teal-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7f8b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.tick-list li b { color: var(--ink); font-family: var(--font-head); }

/* ---- Process steps ------------------------------------------------------ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.step { position: relative; padding-top: 8px; }
.step__num {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: #fff;
  background: var(--navy); margin-bottom: 16px;
}
.step:nth-child(even) .step__num { background: var(--teal); }
.step h4 { font-size: 1.1rem; margin-bottom: 8px; }
.step p { color: var(--slate); font-size: .94rem; }

/* ---- Client segments ---------------------------------------------------- */
.segment {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line);
  /* A smaller echo of the service cards' asymmetric radius, so the two card
     families on this page read as one system without competing. */
  border-radius: 28px 0 28px 0;
  padding: 30px 30px 28px; height: 100%; display: flex; flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.segment:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.segment::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--teal-700), var(--teal-300));
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.segment:hover::before { transform: scaleX(1); }

.segment__icon {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  background: var(--teal-100); color: var(--teal-700); margin-bottom: 20px;
  transition: background .25s, color .25s, transform .25s var(--ease);
}
.segment__icon svg { width: 24px; height: 24px; }
.segment:hover .segment__icon { background: var(--teal); color: #fff; transform: translateY(-2px); }

.segment__title { font-size: 1.32rem; line-height: 1.25; color: var(--navy); margin: 0; }

.segment ul { margin: 20px 0 26px; flex: 1; }
.segment li {
  position: relative; padding-left: 32px; margin-bottom: 12px;
  color: var(--slate); font-size: .97rem; line-height: 1.5;
}
/* Soft disc plus a drawn tick — reads as "included", where the old open ring
   read as an empty checkbox. No icon font or asset needed. */
.segment li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--teal-100);
}
.segment li::after {
  content: ""; position: absolute; left: 6px; top: 8px; width: 7px; height: 3.5px;
  border-left: 2px solid var(--teal-700); border-bottom: 2px solid var(--teal-700);
  transform: rotate(-45deg);
}

.segment__cta {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  color: var(--navy); background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 20px;
  transition: background .22s, color .22s, border-color .22s;
}
.segment__cta svg { width: 16px; height: 16px; transition: transform .2s; }
.segment:hover .segment__cta { background: var(--navy); border-color: var(--navy); color: #fff; }
.segment:hover .segment__cta svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .segment, .segment__icon, .segment__cta, .segment::before, .segment__cta svg { transition: none; }
}

/* ---- Testimonials ------------------------------------------------------- */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quote {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.quote__stars { color: #ffc542; letter-spacing: 2px; margin-bottom: 14px; }
.quote__text { color: var(--ink); font-size: .98rem; margin-bottom: 20px; flex: 1; }
.quote__who { display: flex; align-items: center; gap: 12px; }
.quote__avatar {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: #fff; font-family: var(--font-head); font-weight: 600;
}
.quote__name { font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: .95rem; }
.quote__date { font-size: .82rem; color: var(--slate); }

/* ---- CTA band ----------------------------------------------------------- */
.cta-band {
  background: radial-gradient(700px 400px at 15% 20%, rgba(20, 169, 185, .2), transparent 60%),
              linear-gradient(140deg, var(--navy) 0%, var(--navy-900) 100%);
  color: #fff; border-radius: 24px; padding: 56px; text-align: center;
}
.cta-band h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 14px; }
.cta-band p { color: #c7d2ea; font-size: 1.1rem; max-width: 560px; margin: 0 auto 28px; }
.cta-band .btn-primary { background: var(--teal); }

/* ---- Contact ------------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.contact-info li { display: flex; gap: 16px; margin-bottom: 24px; }
.contact-info .ci-icon {
  width: 46px; height: 46px; border-radius: 12px; flex: 0 0 46px; display: grid; place-items: center;
  background: var(--teal-100); color: var(--teal-700);
}
.contact-info .ci-icon svg { width: 22px; height: 22px; }
.contact-info h4 { font-size: 1rem; margin-bottom: 2px; }
.contact-info a, .contact-info p { color: var(--slate); }
.contact-info a:hover { color: var(--teal-700); }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow-md); }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--font-head); font-weight: 500; font-size: .9rem; color: var(--navy); margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--mist); transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--teal); background: #fff; box-shadow: 0 0 0 4px rgba(20, 169, 185, .12);
}
.field textarea { resize: vertical; min-height: 120px; }
.field__hint { font-weight: 400; color: var(--slate); font-size: .84rem; margin-left: 6px; }
.field input[type="file"] {
  width: 100%; font-size: .92rem; color: var(--slate);
  background: var(--mist); border: 1px dashed var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; cursor: pointer;
}
.field input[type="file"]::file-selector-button {
  font-family: var(--font-head); font-weight: 600; font-size: .86rem;
  color: #fff; background: var(--navy); border: 0; border-radius: 6px;
  padding: 8px 14px; margin-right: 12px; cursor: pointer;
}
.field input[type="file"]:hover { border-color: var(--teal); }
.form-note { font-size: .85rem; color: var(--slate); margin-top: 8px; }
.map-embed { border: 0; width: 100%; height: 320px; border-radius: var(--radius); box-shadow: var(--shadow-sm); }

/* ---- FAQ ---------------------------------------------------------------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 4px 22px; margin-bottom: 14px; box-shadow: var(--shadow-sm);
}
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 0; font-family: var(--font-head);
  font-weight: 600; color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--teal); font-weight: 400; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 18px; color: var(--slate); }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: #b9c4e0; padding: 68px 0 28px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.footer__logo img { height: 42px; width: auto; margin-bottom: 20px; }
.footer__about { font-size: .95rem; color: #93a1c6; max-width: 320px; margin-bottom: 22px; }
.footer__social { display: flex; gap: 12px; }
.footer__social a {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .06); color: #c7d2ea; transition: background .18s, color .18s, transform .18s;
}
.footer__social a:hover { background: var(--teal); color: #fff; transform: translateY(-2px); }
.footer__social svg { width: 18px; height: 18px; }
.footer__creds { display: flex; align-items: center; gap: 22px; margin-top: 26px; flex-wrap: wrap; }
.footer__creds .cred { width: auto; opacity: .95; transition: opacity .18s; }
.footer__creds .cred:hover { opacity: 1; }
.cred--tpb { height: 64px; }
.cred--caanz { height: 40px; }
.cred--asic { height: 46px; }
.footer__col h4 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 18px; }
.footer__col li { margin-bottom: 11px; }
.footer__col a { color: #b9c4e0; font-size: .95rem; }
.footer__col a:hover { color: var(--teal-300); }
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: .86rem; color: #7f8db4;
}
.footer__bottom a { color: #7f8db4; }
.footer__bottom a:hover { color: var(--teal-300); }

/* ---- Data tables (due dates / thresholds) ------------------------------- */
.dtable { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.dtable caption { text-align: left; font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1.35rem; padding: 18px 18px 8px; }
.dtable th, .dtable td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: .96rem; }
.dtable thead th { background: var(--navy); color: #fff; font-family: var(--font-head); font-weight: 600; letter-spacing: .01em; }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr:nth-child(even) { background: var(--mist); }
.dtable td strong { color: var(--navy); font-family: var(--font-head); }
.dtable tfoot td { border-top: 1px solid var(--line); border-bottom: 0; background: #fff; font-size: .86rem; padding: 12px 18px; }
.dtable caption .src:hover { color: var(--navy); text-decoration: underline; }
.dtable td a { color: var(--teal-700); font-weight: 600; }
.dtable td a:hover { color: var(--navy); text-decoration: underline; }

/* ---- Blog listing ------------------------------------------------------ */
/* Filter bar: a native <select> for sort and real <button>s for the category
   pills, so keyboard and screen-reader behaviour comes for free. Filtering is
   layered on in main.js; with no JS every post is simply shown. */
.postfilter {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 34px;
}
.postfilter__sort { position: relative; display: inline-flex; }
.postfilter__sort select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-head); font-weight: 600; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--slate);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 40px 13px 18px; cursor: pointer;
}
/* Chevron drawn as a rotated square so the control needs no icon asset. */
.postfilter__sort::after {
  content: ""; position: absolute; right: 18px; top: 50%; pointer-events: none;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid var(--navy-400); border-bottom: 2px solid var(--navy-400);
  transform: rotate(45deg);
}
.postfilter__sort select:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.postfilter__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.postfilter__pill {
  font-family: var(--font-head); font-weight: 600; font-size: .74rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--slate);
  background: none; border: 0; border-radius: 999px; padding: 10px 18px; cursor: pointer;
  transition: background .18s, color .18s;
}
.postfilter__pill:hover { color: var(--navy); background: var(--mist); }
.postfilter__pill.is-on { background: var(--navy); color: #fff; }
.postfilter__pill:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.postlist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 26px; }
.postlist__empty { text-align: center; color: var(--slate); padding: 40px 0; }

.post {
  display: flex; flex-direction: column; padding: 0;
  background: none; border: 0; box-shadow: none; text-decoration: none;
}
/* `display: flex` above outranks the browser's own `[hidden] { display: none }`,
   so hiding a filtered-out card needs a rule of its own or the card stays on
   screen while its hidden property reads true. */
.post[hidden] { display: none; }
.post__media {
  display: block; overflow: hidden; border-radius: var(--radius-sm);
  background: var(--mist); margin-bottom: 16px;
}
.post__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.post:hover .post__media img { transform: scale(1.05); }
.post__body { display: flex; flex-direction: column; flex: 1; padding: 0; }
.post__cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.post__cat {
  font-size: .76rem; color: var(--navy); background: var(--teal-100);
  padding: 4px 12px; border-radius: 999px; font-family: var(--font-head); font-weight: 500;
}
.post__title { font-size: 1.16rem; line-height: 1.3; color: var(--navy); margin: 0 0 8px; }
.post:hover .post__title { color: var(--teal-700); }
.post__meta { font-size: .86rem; color: var(--slate); margin-bottom: 12px; }
.post__meta i { font-style: normal; margin: 0 4px; color: var(--navy-400); }
.post__excerpt { color: var(--slate); font-size: .94rem; line-height: 1.6; flex: 1; }
.post__btn { display: none; }

/* Featured post: full row, photo beside the copy. main.js hands this class to
   the first card still visible after a filter, so the row never starts with a
   half-width card. */
.post--feature {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr;
  gap: 30px; align-items: center;
  /* Boxed, unlike the grid cards, so the lead post reads as its own unit
     rather than a wider version of the row below it. */
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-sm);
  transition: box-shadow .25s var(--ease), border-color .25s;
}
.post--feature:hover { box-shadow: var(--shadow-md); border-color: transparent; }
.post--feature .post__media { margin-bottom: 0; }
.post--feature .post__media img { aspect-ratio: 3 / 2; }
.post--feature .post__body { justify-content: center; }
.post--feature .post__title { font-size: 1.62rem; margin-bottom: 10px; }
.post--feature .post__excerpt { flex: 0 1 auto; margin-bottom: 22px; }
.post--feature .post__btn {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-family: var(--font-head); font-weight: 600; font-size: .92rem;
  background: var(--navy); color: #fff; border-radius: var(--radius-sm); padding: 12px 24px;
  transition: background .2s, transform .2s var(--ease);
}
.post--feature .post__btn svg { width: 16px; height: 16px; }
.post--feature:hover .post__btn { background: var(--teal); transform: translateX(3px); }

@media (max-width: 980px) {
  .postlist { grid-template-columns: repeat(2, 1fr); }
  .post--feature { grid-template-columns: 1fr; gap: 18px; padding: 16px; }
  .post--feature .post__title { font-size: 1.34rem; }
}
@media (max-width: 620px) { .postlist { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .post__media img, .post--feature, .post--feature .post__btn, .postfilter__pill { transition: none; }
}

/* ---- Callout / alert box ------------------------------------------------ */
.callout {
  border-radius: var(--radius); padding: 26px 28px; margin: 0 0 28px;
  background: linear-gradient(150deg, rgba(20,169,185,.10), rgba(21,58,124,.06));
  border: 1px solid var(--teal-300);
}
.callout--navy { background: var(--navy-900); border-color: var(--navy-700); color: #dbe3f5; }
.callout__tag { display:inline-flex; align-items:center; gap:8px; font-family: var(--font-head); font-weight:600; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color: var(--teal-700); margin-bottom:10px; }
.callout h3 { font-size: 1.2rem; margin-bottom: 8px; }
.callout p { color: var(--slate); font-size: .98rem; margin-bottom: 0; }
.callout--navy h3 { color:#fff; } .callout--navy p, .callout--navy .callout__tag { color:#b9c4e0; }
.note-box { background: var(--mist); border-left: 4px solid var(--teal); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 18px 22px; font-size: .92rem; color: var(--slate); }
.note-box strong { color: var(--navy); font-family: var(--font-head); }
.stack > * + * { margin-top: 28px; }

/* ---- Team photos -------------------------------------------------------- */
.team-photo { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; object-position: top center; margin: 0 auto 18px; box-shadow: var(--shadow-md); border: 4px solid #fff; }

/* ---- Values: icon beside title ------------------------------------------ */
.value-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.value-head .card__icon { margin-bottom: 0; flex: 0 0 54px; }
.value-head h3 { margin: 0; }

/* ---- Achievements ------------------------------------------------------- */
.ach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ach { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 20px; text-align: center; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.ach:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ach__img { height: 92px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.ach__img img { max-height: 92px; max-width: 130px; width: auto; }
.ach__year { font-family: var(--font-head); font-weight: 700; color: var(--teal-700); font-size: .88rem; margin-bottom: 6px; }
.ach h4 { font-size: 1rem; color: var(--navy); line-height: 1.3; }
@media (max-width: 860px) { .ach-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ach-grid { grid-template-columns: 1fr; } }

/* ---- Journey timeline --------------------------------------------------- */
.timeline { position: relative; max-width: 840px; margin: 52px auto 0; }
.timeline::before { content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 3px; transform: translateX(-50%); background: linear-gradient(var(--teal), var(--navy)); border-radius: 3px; }
.tl { position: relative; width: 50%; padding: 14px 44px; }
.tl:nth-of-type(odd) { left: 0; text-align: right; }
.tl:nth-of-type(even) { left: 50%; text-align: left; }
.tl__dot { position: absolute; top: 26px; width: 18px; height: 18px; border-radius: 50%; background: var(--teal); border: 4px solid #fff; box-shadow: 0 0 0 3px var(--teal); }
.tl:nth-of-type(odd) .tl__dot { right: -9px; }
.tl:nth-of-type(even) .tl__dot { left: -9px; }
.tl__dot--end { background: var(--navy); box-shadow: 0 0 0 3px var(--navy); }
.tl__card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 22px; box-shadow: var(--shadow-sm); display: inline-block; text-align: left; max-width: 340px; }
.tl__year { display: inline-block; font-family: var(--font-head); font-weight: 700; color: #fff; background: var(--navy); padding: 3px 12px; border-radius: 999px; font-size: .78rem; margin-bottom: 8px; }
.tl__year--now { background: var(--teal); }
.tl__card h4 { color: var(--navy); font-size: 1.12rem; margin-bottom: 6px; }
.tl__card p { color: var(--slate); font-size: .94rem; }
.tl__medal {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--teal-100); color: var(--teal-700); margin-bottom: 10px;
}
.tl__medal svg { width: 22px; height: 22px; }
.tl__medal--now { background: rgba(20, 169, 185, .18); color: var(--teal-700); }

/* ---- Journey as a winding road (wide screens only) ---------------------- */
/* The road is one SVG path stroked twice — thick for the asphalt, thin and
   dashed for the centre line — so the U-turns are true arcs rather than stacked
   border tricks. Milestones are absolutely placed from the --x/--y percentages
   in the markup; because the SVG scales proportionally, they stay glued to the
   road at every width.
   Below 1120px the card text can no longer fit the lanes, so the whole thing
   falls back to the stacked timeline, which is the same markup unchanged. */
.timeline__road, .timeline__cap { display: none; }

@media (min-width: 1120px) {
  .timeline--road { max-width: none; margin: 36px 0 0; }
  .timeline--road::before { display: none; }          /* no vertical spine here */
  .timeline--road .timeline__road { display: block; width: 100%; height: auto; }
  .timeline__asphalt {
    fill: none; stroke: var(--navy-900); stroke-width: 46;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .timeline__centreline {
    fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round;
    stroke-dasharray: 20 20; opacity: .8;
  }
  .timeline__ring { fill: #fff; stroke: var(--navy-900); stroke-width: 26; }

  /* The nth-of-type selectors from the stacked layout are (0,3,0), so these
     overrides have to match that weight or they lose silently — which is what
     kept the end cap at full card width instead of shrinking into its ring. */
  .timeline--road .tl,
  .timeline--road .tl:nth-of-type(odd),
  .timeline--road .tl:nth-of-type(even) {
    position: absolute; left: var(--x); top: var(--y);
    transform: translate(-50%, -50%);
    width: 23%; padding: 0; text-align: left;
  }
  .timeline--road .tl__dot { display: none; }
  .timeline--road .tl__card {
    width: 100%; max-width: none; text-align: center;
    padding: 16px 20px 18px; box-shadow: var(--shadow-md);
  }
  .timeline--road .tl__medal { margin: 0 auto 10px; }

  /* The ring closing the road is decorative — the Today card carries the
     wording, so the ring just holds an arrow for "the road goes on". */
  .timeline__onward {
    fill: none; stroke: var(--navy-900); stroke-width: 4;
    stroke-linecap: round; stroke-linejoin: round;
  }

  .timeline--road .timeline__cap {
    display: block; position: absolute; left: var(--x); top: var(--y);
    transform: translate(-50%, -50%);
    font-family: var(--font-head); font-weight: 700; font-size: .95rem;
    color: var(--navy);
  }
}
@media (max-width: 680px) {
  .timeline::before { left: 19px; }
  .tl, .tl:nth-of-type(odd), .tl:nth-of-type(even) { width: 100%; left: 0; text-align: left; padding: 12px 0 12px 50px; }
  .tl:nth-of-type(odd) .tl__dot, .tl:nth-of-type(even) .tl__dot { left: 11px; right: auto; }
}

/* ---- Reveal animation (progressive enhancement) ------------------------- */
/* Hidden only when JS is active (html.js); otherwise always visible. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__card { display: none; }
  .grid-3, .steps, .testimonials-grid, .features { grid-template-columns: repeat(2, 1fr); }
  .split, .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav__menu, .nav__phone { display: none; }
  .nav__toggle { display: block; }
  .nav.open .nav__menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 76px; left: 0; right: 0; background: #fff;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); padding: 12px 16px;
  }
  .nav.open .nav__menu .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 12px; }
  .nav__link { padding: 12px 8px; }
  .section { padding: 60px 0; }
  .grid-2, .grid-3, .steps, .testimonials-grid, .features, .footer__grid { grid-template-columns: 1fr; }
  .cta-band { padding: 40px 24px; }
  body { font-size: 16px; }
}
@media (max-width: 440px) {
  .container { padding: 0 18px; }
  .btn { white-space: normal; text-align: center; }
  .hero__actions .btn, .form-card .btn { width: 100%; justify-content: center; }
  .dtable th, .dtable td { padding: 11px 12px; font-size: .9rem; }
}

/* ---------- Blog article pages ---------- */
.container--narrow { max-width: 760px; }
.page-hero--article .article-meta {
  color: var(--teal-300); font-family: var(--font-body); font-weight: 600;
  font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px;
}
.article-hero-img {
  width: 100%; border-radius: 16px; margin: 0 0 36px;
  box-shadow: 0 18px 40px rgba(14, 27, 58, .14);
}
.prose { font-size: 1.075rem; line-height: 1.75; color: var(--ink); }
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.25em; }
.prose h2 {
  font-size: 1.7rem; margin: 2em 0 .6em; color: var(--navy);
  padding-bottom: .3em; border-bottom: 2px solid var(--teal-100);
}
.prose h3 { font-size: 1.3rem; margin: 1.6em 0 .5em; color: var(--navy-800); }
.prose h4 { font-size: 1.1rem; margin: 1.4em 0 .5em; color: var(--navy-800); }
.prose ul, .prose ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.prose li { margin: 0 0 .5em; }
.prose li::marker { color: var(--teal-700); }
.prose a { color: var(--teal-700); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--navy); }
.prose strong { color: var(--navy-800); }
.prose blockquote {
  margin: 1.5em 0; padding: .2em 1.2em; border-left: 4px solid var(--teal);
  color: var(--slate); background: var(--mist); border-radius: 0 10px 10px 0;
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .98rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.prose th { background: var(--mist); color: var(--navy); font-family: var(--font-head); }
.article-back { margin-top: 40px; }
.article-back a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; color: var(--navy);
}
.article-back a svg { width: 18px; height: 18px; transform: rotate(180deg); }
.article-back a:hover { color: var(--teal-700); }

/* ---------- SEO/AIEO answer-first + hero title (non-h1 slides) ---------- */
.hero .hero__title { font-family: var(--font-head); font-weight: 700; letter-spacing: -.01em;
  color: #fff; font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.05; margin: 0 0 20px; }
.hero .hero__title .accent { color: var(--teal-300); }
.answer-first { padding: 44px 0 0; }
.answer-lead { font-family: var(--font-body); font-size: 1.18rem; line-height: 1.65; color: var(--ink);
  border-left: 4px solid var(--teal); padding: 2px 0 2px 22px; margin: 0 0 28px; }
.page-hero--article .article-meta a { color: var(--teal-300); text-decoration: none; }
.page-hero--article .article-meta a:hover { text-decoration: underline; }

/* Text credential replacing the ASIC logo (ASIC does not permit third-party logo use) */
.cred--asic-text { align-self: center; color: #fff; font-family: var(--font-head);
  font-weight: 600; font-size: .8rem; line-height: 1.25; letter-spacing: .01em;
  text-align: center; white-space: nowrap; }