/* =============================================================================
   IABP — Innovate Accounting & Business Progress
   Global stylesheet. Single file, hand-written, no framework.

   Contents
     01  Design tokens
     02  Reset & base
     03  Typography
     04  Layout primitives
     05  Buttons & links
     06  Header, navigation, dropdowns, mobile menu
     07  Home hero
     08  Page hero & breadcrumb
     09  Section headers
     10  Cards
     11  Capability lists
     12  Service model diagram
     13  Process rail
     14  Country grid
     15  Callouts, notes & the professional-services disclaimer
     16  Accordion, chips & badges
     17  Forms
     18  CTA band
     19  Footer
     20  Utilities
     21  Motion & print
     22  Landing page: hero slider, stat band, forecast & insight, scroll reveal
     23  Live chat launcher
     24  Social links
     25  Site search
   ========================================================================== */

/* -----------------------------------------------------------------------------
   01  DESIGN TOKENS
   Palette derived from the IABP logo: navy wordmark, green growth arrow,
   sky-blue panes, lime figures.
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --navy:        #0F2D5C;
  --navy-deep:   #0A1F40;
  --navy-soft:   #1B4587;
  --green:       #1F7A3D;
  --green-light: #35A35A;
  --green-deep:  #155C2C;
  --sky:         #8FC4E8;
  --sky-soft:    #EAF3FA;
  --lime:        #9ACD32;

  /* Neutrals */
  --ink:         #12202F;
  --ink-2:       #33475B;
  --muted:       #5A6B7C;
  --line:        #DDE5EC;
  --line-soft:   #EDF2F6;
  --surface:     #FFFFFF;
  --bg:          #F7FAFC;

  /* Feedback */
  --danger:      #B3261E;
  --danger-bg:   #FDECEA;
  --success:     #1F7A3D;
  --success-bg:  #EAF6EE;

  /* Type */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
  --fs-xl:   clamp(1.35rem, 1vw + 1.05rem, 1.6rem);
  --fs-2xl:  clamp(1.6rem, 1.6vw + 1.15rem, 2.1rem);
  --fs-3xl:  clamp(1.95rem, 2.4vw + 1.25rem, 2.75rem);
  --fs-4xl:  clamp(2.25rem, 3.4vw + 1.35rem, 3.5rem);

  /* Space (8px scale) */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;    --s-11: 6rem;

  /* Chrome */
  --wrap: 1200px;
  --wrap-narrow: 820px;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow-1: 0 1px 2px rgba(15, 45, 92, .06), 0 2px 8px rgba(15, 45, 92, .06);
  --shadow-2: 0 4px 12px rgba(15, 45, 92, .10), 0 12px 32px rgba(15, 45, 92, .10);
  --header-h: 76px;
}

/* -----------------------------------------------------------------------------
   02  RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }

:focus-visible {
  outline: 3px solid var(--green-light);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection { background: var(--sky); color: var(--navy-deep); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* -----------------------------------------------------------------------------
   03  TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  margin: 0 0 var(--s-4);
  color: var(--navy-deep);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-base); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: var(--fs-lg);
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 68ch;
}

.eyebrow {
  display: inline-block;
  margin-bottom: var(--s-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
}
.eyebrow--light { color: var(--sky); }

strong, b { font-weight: 650; color: var(--navy-deep); }

/* -----------------------------------------------------------------------------
   04  LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--s-10); }
.section--tight { padding-block: var(--s-8); }
.section--alt { background: var(--bg); }
.section--sky { background: var(--sky-soft); }
.section--navy { background: var(--navy-deep); color: #E8EFF7; }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy .lede, .section--navy p { color: #C3D4E8; }
.section--navy .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.section--navy .card p { color: #B7CBE2; }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .section { padding-block: var(--s-8); }
}

.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-8);
  align-items: center;
}
.split--top { align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--s-6); } }

/* -----------------------------------------------------------------------------
   05  BUTTONS & LINKS
   -------------------------------------------------------------------------- */
a { color: var(--navy-soft); text-decoration: none; }
a:hover { text-decoration: underline; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.8rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }

.btn--green { background: var(--green); border-color: var(--green); color: #fff; }
.btn--green:hover { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }

.btn--outline { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }

.btn--ghost-light { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.btn--ghost-light:hover { background: #fff; border-color: #fff; color: var(--navy-deep); }

.btn--sm { padding: 0.5rem 1rem; font-size: var(--fs-sm); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 650;
  font-size: var(--fs-base);
  color: var(--green);
}
.link-arrow::after { content: "\2192"; transition: transform .18s ease; }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover::after { transform: translateX(4px); }

/* -----------------------------------------------------------------------------
   06  HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header.is-stuck { box-shadow: var(--shadow-1); }

/* The mobile nav panel is fixed, 400px wide and parked off-canvas to the right.
   Off-canvas or not, it still counts towards the document's scrollable width, so
   below the burger breakpoint every page could be dragged 400px sideways.
   `clip` rather than `hidden` because `hidden` would turn <html> into a scroll
   container and break the sticky header. Measured: scrollWidth 1153 -> 753 at a
   768px viewport. */
html { overflow-x: clip; }

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--header-h);
  /* Chrome is not body copy: the eight-item nav plus the brand and the action
     buttons need more than the 1200px reading measure, and squeezing them into
     it pushed the buttons off the right edge of the viewport. */
  max-width: 1480px;
}

.brand { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand img { height: 44px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-size: 1.15rem; font-weight: 800; color: var(--navy-deep); letter-spacing: -0.01em; }
.brand-tag { font-size: 0.66rem; font-weight: 600; letter-spacing: .045em; text-transform: uppercase; color: var(--green); }

.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }

.nav-link,
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem .7rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.nav-link:hover, .nav-toggle:hover { background: var(--line-soft); color: var(--navy); text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--navy); box-shadow: inset 0 -2px 0 var(--green); }

.nav-toggle .caret { width: 10px; height: 10px; flex-shrink: 0; transition: transform .2s ease; }
.has-dropdown.is-open .caret { transform: rotate(180deg); }

.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 300px;
  padding: var(--s-2);
  margin: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.has-dropdown.is-open > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: block;
  padding: .55rem .75rem;
  border-radius: var(--radius-sm);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink-2);
}
.dropdown a:hover { background: var(--sky-soft); color: var(--navy); text-decoration: none; }
.dropdown a small { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }

.header-actions { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }

.nav-burger {
  display: none;
  margin-left: auto;
  padding: .5rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 4px 0;
  background: var(--navy);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Condensed desktop header. Below 1500px the row is tight, so the brand
   tagline, the nav padding and the search label give up space in that order --
   measured to fit from 1180px, the width the burger takes over at, to 1700px,
   above which the full row fits unaided. */
@media (max-width: 1700px) {
  .header-inner { gap: var(--s-4); }
  .brand-tag { display: none; }
  .nav-list { gap: 0; }
  .nav-link, .nav-toggle { padding: .5rem .5rem; font-size: 0.88rem; }
  .header-actions .btn { padding: .6rem .85rem; font-size: var(--fs-sm); }
  .js .search-trigger { padding: .5rem; }
  .js .header-actions:not(.header-actions--mobile) .search-trigger span { display: none; }
}

@media (max-width: 1280px) {
  .nav-link, .nav-toggle { padding: .5rem .38rem; font-size: 0.84rem; }
  .header-inner { gap: var(--s-3); }
  .brand img { height: 38px; }
  .header-actions .btn { padding: .55rem .7rem; }
}

@media (max-width: 1180px) {
  .nav-burger { display: block; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 auto;
    z-index: 95;
    width: min(400px, 100%);
    margin: 0;
    padding: var(--s-5);
    background: var(--surface);
    border-left: 1px solid var(--line);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .22s ease;
  }
  .nav.is-open { transform: translateX(0); box-shadow: var(--shadow-2); }
  .nav-list { flex-direction: column; align-items: stretch; gap: var(--s-1); }
  .nav-link, .nav-toggle { width: 100%; padding: .75rem .5rem; font-size: var(--fs-md); justify-content: space-between; }
  .dropdown {
    position: static;
    min-width: 0;
    max-height: 0;
    padding: 0 0 0 var(--s-4);
    overflow: hidden;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: max-height .24s ease;
  }
  .has-dropdown.is-open > .dropdown { max-height: 560px; padding-bottom: var(--s-2); }
  /* The header-level action buttons move inside the slide-out panel. */
  .header-actions:not(.header-actions--mobile) { display: none; }
  .header-actions--mobile {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
  }
  .header-actions--mobile .btn { width: 100%; }
  .nav-backdrop {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 90;
    background: rgba(10, 31, 64, .35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s;
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }
  body.nav-locked { overflow: hidden; }
}

@media (min-width: 1181px) {
  .nav-backdrop { display: none; }
  .header-actions--mobile { display: none; }
}

@media (max-width: 480px) {
  .brand img { height: 36px; }
  .brand-name { font-size: 1rem; }
  .brand-tag { font-size: 0.58rem; }
}

/* -----------------------------------------------------------------------------
   07  HOME HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 480px at 88% -8%, rgba(53, 163, 90, .30), transparent 62%),
    radial-gradient(900px 520px at 10% 108%, rgba(143, 196, 232, .22), transparent 60%),
    linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 58%, #123A72 100%);
  color: #E8EFF7;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(700px 420px at 78% 12%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(700px 420px at 78% 12%, #000, transparent 72%);
  pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 1; }
.hero h1 { color: #fff; max-width: 20ch; }
.hero .hero-sub {
  max-width: 64ch;
  font-size: var(--fs-lg);
  color: #C9D9EC;
  margin-bottom: var(--s-6);
}
.hero .btn-row { margin-bottom: var(--s-8); }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6) var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(255,255,255,.16);
}
.hero-stat strong {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.hero-stat span { font-size: var(--fs-sm); color: #A9C0DA; }

/* -----------------------------------------------------------------------------
   08  PAGE HERO & BREADCRUMB
   -------------------------------------------------------------------------- */
.page-hero {
  background:
    radial-gradient(760px 340px at 92% 0%, rgba(53, 163, 90, .26), transparent 60%),
    linear-gradient(150deg, var(--navy-deep), var(--navy));
  color: #D9E5F2;
  padding-block: var(--s-7) var(--s-9);
}
.page-hero h1 { color: #fff; max-width: 24ch; margin-bottom: var(--s-4); }
.page-hero .lede { color: #C0D2E6; }

/* Photographs behind the band.
   The pictures sit under everything (z-index below the wrap) with a navy wash
   over them, because the band's job is still to carry the page title: a
   photograph that makes the heading hard to read is a photograph that has
   taken the page over. The wash is the same gradient the painted band uses,
   turned up enough to hold contrast over any image. */
.page-hero--shots { position: relative; isolation: isolate; overflow: hidden; }
.page-hero--shots .wrap { position: relative; z-index: 1; }
.page-hero-shots { position: absolute; inset: 0; z-index: 0; }
.page-hero-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease;
}
.page-hero-shot.is-active { opacity: 1; }
.page-hero--shots::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Heaviest where the words are and lightest away from them: the heading has
     to stay readable over any photograph somebody uploads, and the picture
     has to still look like a photograph rather than a navy rectangle. */
  background:
    linear-gradient(90deg, rgba(10, 31, 64, .93) 0%, rgba(10, 31, 64, .80) 42%,
                    rgba(12, 38, 78, .50) 72%, rgba(15, 45, 92, .38) 100%),
    linear-gradient(180deg, rgba(10, 31, 64, .55), rgba(10, 31, 64, .30));
}

.page-hero-controls {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.page-hero-arrow,
.page-hero-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 50%;
  background: rgba(10, 31, 64, .42);
  color: #fff;
  cursor: pointer;
}
.page-hero-arrow svg,
.page-hero-play svg { width: 1.2rem; height: 1.2rem; }
.page-hero-arrow:hover,
.page-hero-play:hover { background: rgba(255,255,255,.18); }
.page-hero-play .ico-play { display: none; }
.page-hero.is-paused .page-hero-play .ico-pause { display: none; }
.page-hero.is-paused .page-hero-play .ico-play { display: block; }

.page-hero-dots { display: flex; gap: .5rem; }
.page-hero-dot {
  width: .6rem;
  height: .6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.38);
  cursor: pointer;
}
.page-hero-dot.is-active { background: var(--lime); transform: scale(1.25); }

@media (prefers-reduced-motion: reduce) {
  .page-hero-shot { transition: none; }
}

@media (min-width: 900px) {
  .page-hero--shots { padding-block: var(--s-9); min-height: 26rem; }
}

.breadcrumb { margin-bottom: var(--s-5); font-size: var(--fs-sm); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; color: rgba(255,255,255,.4); }
.breadcrumb a { color: var(--sky); }
.breadcrumb [aria-current="page"] { color: rgba(255,255,255,.72); }

/* -----------------------------------------------------------------------------
   09  SECTION HEADERS
   -------------------------------------------------------------------------- */
.section-head { max-width: 72ch; margin-bottom: var(--s-7); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lede { margin-inline: auto; }
.section-head p { color: var(--ink-2); }

/* -----------------------------------------------------------------------------
   10  CARDS
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.card p { color: var(--ink-2); font-size: var(--fs-base); }
.card .link-arrow { margin-top: auto; padding-top: var(--s-4); }

a.card:hover, .card--hover:hover {
  border-color: var(--sky);
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
  text-decoration: none;
}

/* Full-colour illustrated icon in a tinted, glossy tile.
   Eight colour variants keep a grid of cards visually varied; each variant only
   re-points the four --ic-* custom properties. The glyphs themselves are inline
   multi-tone SVG, generated from _build/icons.py. */
.card-icon {
  --ic-from: #F2F8FD;
  --ic-to:   #DCEBF8;
  --ic-ring: #C3DCF1;
  --ic-glow: rgba(74, 144, 217, .30);

  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--s-4);
  border-radius: 21px;
  background: linear-gradient(150deg, var(--ic-from), var(--ic-to));
  border: 1px solid var(--ic-ring);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 10px 20px -10px var(--ic-glow);
  flex-shrink: 0;
  transition: transform .25s ease, box-shadow .25s ease;
}
/* gloss across the top of the tile */
.card-icon::after {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 46%;
  border-radius: 20px 20px 50% 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.card-icon .ico {
  position: relative;
  display: block;
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 2px 2px rgba(15, 45, 92, .22));
}
.card--hover:hover .card-icon,
.tile:hover .card-icon {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 16px 26px -10px var(--ic-glow);
}
@media (max-width: 560px) {
  .card-icon { width: 62px; height: 62px; border-radius: 18px; }
  .card-icon .ico { width: 40px; height: 40px; }
}

.card-icon--sky    { --ic-from:#F2F8FD; --ic-to:#DCEBF8; --ic-ring:#C3DCF1; --ic-glow:rgba(74,144,217,.30); }
.card-icon--indigo { --ic-from:#EFF2FE; --ic-to:#DDE3FA; --ic-ring:#C6D0F3; --ic-glow:rgba(60,90,200,.30); }
.card-icon--green  { --ic-from:#EEF9F1; --ic-to:#D9F0E1; --ic-ring:#BEE3CB; --ic-glow:rgba(31,122,61,.30); }
.card-icon--lime   { --ic-from:#F5FAE5; --ic-to:#E6F3C6; --ic-ring:#D0E59A; --ic-glow:rgba(124,181,24,.32); }
.card-icon--amber  { --ic-from:#FFF9EC; --ic-to:#FCEDCF; --ic-ring:#F3DCA8; --ic-glow:rgba(224,124,5,.30); }
.card-icon--teal   { --ic-from:#ECFAFA; --ic-to:#D5F0F1; --ic-ring:#B4E2E4; --ic-glow:rgba(18,149,155,.30); }
.card-icon--violet { --ic-from:#F4F1FE; --ic-to:#E7E0FB; --ic-ring:#D2C6F4; --ic-glow:rgba(109,70,217,.30); }
.card-icon--rose   { --ic-from:#FFF2F5; --ic-to:#FBDEE5; --ic-ring:#F5C6D2; --ic-glow:rgba(226,62,104,.28); }

/* Numbered "Why IABP" card */
.card--numbered { position: relative; padding-top: var(--s-6); overflow: hidden; }
.card--numbered .num {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--green);
}
.card--numbered::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green), var(--sky));
}

/* Service card with capability list */
.card--service { gap: var(--s-3); }
.card--service h3 a { color: inherit; }

/* Compact value tile */
.tile {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-sm);
}
.tile h3 { font-size: var(--fs-base); margin-bottom: var(--s-1); }
.tile p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

/* A tile that goes somewhere. The whole tile is the target, not the words
   inside it -- an anchor wrapping the contents rather than the <li> itself,
   because a list item cannot be a link. */
.tile--link { padding: 0; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.tile--link > a {
  display: block;
  padding: var(--s-5);
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
}
.tile--link:hover {
  border-left-color: var(--navy);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.tile--link > a:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

/* -----------------------------------------------------------------------------
   11  CAPABILITY LISTS
   -------------------------------------------------------------------------- */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.check-list li {
  position: relative;
  padding-left: 1.95rem;
  font-size: var(--fs-base);
  color: var(--ink-2);
}
/* Gradient tick disc. The check itself is an encoded SVG so the bullet stays a
   single element and needs no extra markup. */
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .16em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 8.5l2.5 2.5 5-5.6' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 13px 13px no-repeat,
    linear-gradient(145deg, #4FC177, #1F7A3D);
  box-shadow: 0 1px 3px rgba(31, 122, 61, .38);
}
.check-list--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
.check-list--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-5); }
@media (max-width: 860px) { .check-list--3col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .check-list--2col, .check-list--3col { grid-template-columns: 1fr; } }

.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }

/* -----------------------------------------------------------------------------
   12  SERVICE MODEL DIAGRAM
   -------------------------------------------------------------------------- */
.model-figure {
  margin: 0;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
@media (max-width: 560px) { .model-figure { padding: var(--s-4); } }
.model-figure svg { width: 100%; height: auto; }
.model-figure figcaption {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.model-label { font: 650 15px var(--font-sans); fill: #fff; }
.model-label--dark { font: 650 15px var(--font-sans); fill: var(--navy-deep); }
.model-sub { font: 500 12px var(--font-sans); fill: rgba(255,255,255,.82); }
.model-sub--dark { font: 500 12px var(--font-sans); fill: var(--muted); }

/* -----------------------------------------------------------------------------
   13  PROCESS RAIL
   -------------------------------------------------------------------------- */
.process { display: grid; gap: var(--s-5); }
.process--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .process--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .process--4 { grid-template-columns: 1fr; } }

.step { position: relative; padding-top: var(--s-7); }
.step::before {
  content: "";
  position: absolute;
  top: 15px; left: 32px; right: 0;
  height: 2px;
  background: var(--line);
}
.step:last-child::before { background: linear-gradient(90deg, var(--line), transparent); }
@media (max-width: 560px) { .step::before { display: none; } }

.step-dot {
  position: absolute;
  top: 0; left: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--navy-soft), var(--navy-deep));
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  z-index: 1;
  box-shadow:
    0 0 0 4px var(--surface),
    0 5px 12px -4px rgba(15, 45, 92, .55);
}
.step h3 { font-size: var(--fs-base); margin-bottom: var(--s-1); }
.step p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

/* -----------------------------------------------------------------------------
   14  COUNTRY GRID
   -------------------------------------------------------------------------- */
.country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s-3);
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
}
.country {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink-2);
}
/* Drawn flags rather than emoji: Windows has no colour glyphs for the
   regional-indicator pairs, so the emoji rendered as bare letters. */
.country .flag { display: inline-flex; line-height: 0; flex-shrink: 0; }
.country .flag-svg {
  display: block;
  width: 28px;
  height: auto;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(15, 45, 92, .14), 0 1px 3px rgba(15, 45, 92, .22);
}
.country--more {
  grid-column: 1 / -1;
  justify-content: center;
  background: var(--sky-soft);
  border-style: dashed;
  color: var(--navy);
}

/* -----------------------------------------------------------------------------
   15  CALLOUTS, NOTES & DISCLAIMER
   -------------------------------------------------------------------------- */
.note {
  padding: var(--s-5);
  background: var(--sky-soft);
  border: 1px solid #CBE0F0;
  border-left: 4px solid var(--navy-soft);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  color: var(--ink-2);
}
.note h3, .note h4 { font-size: var(--fs-base); margin-bottom: var(--s-2); }
.note--green { background: var(--success-bg); border-color: #C6E4D1; border-left-color: var(--green); }
.note--warn  { background: #FFF8E6; border-color: #F0E0B4; border-left-color: #C08A16; }

/* Sitewide professional-services disclaimer strip */
.disclaimer-strip {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding-block: var(--s-6);
}
.disclaimer-strip p {
  max-width: 105ch;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--muted);
}
.disclaimer-strip strong { color: var(--ink-2); }

/* Draft banner used on the legal pages */
.draft-banner {
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-7);
  background: #FFF8E6;
  border: 1px solid #F0E0B4;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: #6B5310;
}

/* Long-form legal / article body */
.prose { max-width: 78ch; }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--s-8); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--s-6); }
.prose ul, .prose ol { margin: 0 0 var(--s-4); padding-left: 1.4rem; color: var(--ink-2); }
.prose li { margin-bottom: .4rem; }
.prose p { color: var(--ink-2); }

.toc {
  padding: var(--s-5);
  margin-bottom: var(--s-7);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.toc h2 { font-size: var(--fs-base); margin: 0 0 var(--s-3); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.toc ol { margin: 0; padding-left: 1.2rem; font-size: var(--fs-sm); }
.toc li { margin-bottom: .3rem; }

/* -----------------------------------------------------------------------------
   16  ACCORDION, CHIPS & BADGES
   -------------------------------------------------------------------------- */
.accordion { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.accordion + .accordion { margin-top: var(--s-3); }
.accordion > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  font-size: var(--fs-lg);
  font-weight: 650;
  color: var(--navy-deep);
  cursor: pointer;
  list-style: none;
}
.accordion > summary::-webkit-details-marker { display: none; }
.accordion > summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--green);
  line-height: 1;
  flex-shrink: 0;
}
.accordion[open] > summary { border-bottom: 1px solid var(--line-soft); }
.accordion[open] > summary::after { content: "\2212"; }
.accordion > summary:hover { background: var(--bg); }
.accordion-body { padding: var(--s-5); }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.chip {
  padding: .35rem .85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.chip:hover { border-color: var(--sky); background: var(--sky-soft); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

.badge {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 4px;
  background: var(--sky-soft);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy-soft);
}
.badge--soon { background: #FFF8E6; color: #8A6A12; }
.badge--green { background: var(--success-bg); color: var(--green-deep); }

/* -----------------------------------------------------------------------------
   17  FORMS
   -------------------------------------------------------------------------- */
.form-card {
  padding: var(--s-7);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
@media (max-width: 560px) { .form-card { padding: var(--s-5); } }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field--full { grid-column: 1 / -1; }

.fieldset-block { border: 0; padding: 0; margin: 0 0 var(--s-6); }
.fieldset-block legend {
  padding: 0;
  margin-bottom: var(--s-4);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green);
}

.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-size: var(--fs-sm); font-weight: 650; color: var(--navy-deep); }
.field .req { color: var(--danger); }
.field .hint { font-size: var(--fs-xs); color: var(--muted); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="number"],
.field input[type="file"],
.field select,
.field textarea {
  width: 100%;
  padding: .7rem .85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-base);
  color: var(--ink);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235A6B7C' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.4rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--navy-soft);
  box-shadow: 0 0 0 3px rgba(27, 69, 135, .14);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--danger);
  background: var(--danger-bg);
}
.field .error { font-size: var(--fs-xs); font-weight: 600; color: var(--danger); }
.field .error:empty { display: none; }

.field--check { flex-direction: row; align-items: flex-start; gap: var(--s-3); }
.field--check input[type="checkbox"] { width: 18px; height: 18px; margin-top: .25rem; accent-color: var(--navy); flex-shrink: 0; }
.field--check label { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); line-height: 1.55; }
.field--check .error { flex-basis: 100%; }

.form-status {
  padding: var(--s-4);
  margin-bottom: var(--s-5);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid #F3C9C5;
}
.form-status[hidden] { display: none; }

.newsletter-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); max-width: 560px; }
.newsletter-form .field { flex: 1 1 260px; }

/* -----------------------------------------------------------------------------
   18  CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(120deg, var(--green-deep) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  color: #E4EDF7;
  padding-block: var(--s-9);
  text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: var(--s-3); }
.cta-band p { max-width: 62ch; margin-inline: auto; margin-bottom: var(--s-6); color: #C6D7E9; }
.cta-band .btn-row { justify-content: center; }

/* -----------------------------------------------------------------------------
   19  FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-deep);
  color: #A9BED6;
  font-size: var(--fs-base);
  padding-block: var(--s-9) var(--s-5);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr 1.2fr;
  gap: var(--s-7) var(--s-6);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 1080px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand img { height: 48px; width: auto; margin-bottom: var(--s-4); background: #fff; padding: 4px 8px; border-radius: var(--radius-sm); }
.footer-brand .brand-name { display: block; color: #fff; font-size: 1.3rem; font-weight: 800; }
.footer-brand .brand-full { display: block; margin-top: var(--s-1); font-size: var(--fs-sm); color: #8FA8C4; }
.footer-brand .brand-slogan { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--sky); font-weight: 600; }

.footer-col h4 {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--s-4);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer-col a { color: #A9BED6; font-size: var(--fs-sm); }
.footer-col a:hover { color: #fff; }
.footer-col address { font-style: normal; font-size: var(--fs-sm); line-height: 1.9; }
.footer-col address a { display: inline; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s-5);
  font-size: var(--fs-sm);
  color: #7E97B5;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer-bottom a { color: #7E97B5; }
.footer-bottom a:hover { color: #fff; }

/* -----------------------------------------------------------------------------
   20  UTILITIES
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-7 { margin-bottom: var(--s-7); }
.is-hidden { display: none !important; }

/* -----------------------------------------------------------------------------
   21  MOTION & PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .site-header, .site-footer, .cta-band, .nav-backdrop, .skip-link { display: none !important; }
  body { font-size: 11pt; color: #000; }
  a { color: #000; text-decoration: underline; }
  .card, .form-card, .model-figure { break-inside: avoid; box-shadow: none; }
}

/* -----------------------------------------------------------------------------
   22  LANDING PAGE: HERO SLIDER, STAT BAND, FORECAST & INSIGHT, SCROLL REVEAL
   All of this is used on index.html only. Everything degrades: without the
   `js` class on <html> the slides stack down to slide one, the controls stay
   hidden and revealed content is simply visible.
   -------------------------------------------------------------------------- */

/* --- hero slider ---------------------------------------------------------- */

/* The slides share one grid cell, so the hero sizes itself to the tallest
   slide instead of jumping height as they change. */
.hero-slides {
  position: relative;   /* keeps the slides above the .hero-video layer */
  z-index: 1;
  display: grid;
  grid-template-areas: "slide";
}
.hero-slide {
  grid-area: slide;
  min-width: 0;
}
/* Without JS every slide would stack; hide all but the active one only once
   the slider is running. */
.hero--ready .hero-slide {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease, visibility .5s;
}
.hero--ready .hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.hero-slide h1,
.hero-slide h2 {
  color: #fff;
  max-width: 22ch;
  font-size: var(--fs-3xl);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: var(--s-4);
}

.hero-controls {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-7);
}
.hero-arrow,
.hero-play {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #E8EFF7;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.hero-arrow:hover,
.hero-play:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .5);
  transform: translateY(-1px);
}
.hero-arrow svg,
.hero-play svg { width: 20px; height: 20px; }
.hero-play { margin-left: auto; }
.hero-play .ico-play { display: none; }
.hero.is-paused .hero-play .ico-play { display: block; }
.hero.is-paused .hero-play .ico-pause { display: none; }

.hero-dots { display: flex; gap: var(--s-2); }
.hero-dot {
  width: 34px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, .28);
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.hero-dot:hover { background: rgba(255, 255, 255, .5); }
.hero-dot.is-active { width: 52px; background: var(--green-light); }

.hero--slider .hero-stats { margin-top: var(--s-7); }

@media (max-width: 640px) {
  .hero-slide h1, .hero-slide h2 { max-width: none; }
  .hero-controls { gap: var(--s-2); }
  .hero-arrow, .hero-play { width: 36px; height: 36px; }
  .hero-dot { width: 26px; }
  .hero-dot.is-active { width: 40px; }
}

/* --- at-a-glance stat band ------------------------------------------------ */
.stat-band { background: var(--surface); border-block: 1px solid var(--line); }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5) var(--s-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stat-grid { grid-template-columns: 1fr; } }

.stat { padding-left: var(--s-5); border-left: 3px solid var(--green-light); }
.stat-num {
  display: block;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--navy-soft), var(--green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  display: block;
  margin-top: var(--s-2);
  font-weight: 700;
  color: var(--ink);
}
.stat-sub {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* --- forecast & insight --------------------------------------------------- */
.insight {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.insight-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-3) 0;
  background: var(--sky-soft);
  border-bottom: 1px solid var(--line);
}
.insight-tab {
  position: relative;
  padding: .7rem 1.1rem;
  border: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.insight-tab:hover { background: rgba(255, 255, 255, .7); color: var(--navy); }
.insight-tab.is-active { background: var(--surface); color: var(--navy); }
.insight-tab.is-active::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--green), var(--sky));
}

.insight-body {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: var(--s-7);
  padding: var(--s-6);
}
@media (max-width: 900px) {
  .insight-body { grid-template-columns: 1fr; gap: var(--s-6); }
}
.insight-chart { min-width: 0; }
.insight-chart .chart { width: 100%; height: auto; display: block; }
.insight-read h3 { font-size: var(--fs-base); margin-bottom: var(--s-3); }
.insight-meta {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.insight-note {
  margin: 0;
  padding: var(--s-4) var(--s-6);
  background: #FFF8E6;
  border-top: 1px solid #F0E0B4;
  font-size: var(--fs-sm);
  color: #6B5310;
}

/* Chart draw-in. The line is dashed out to its own length and dashoffset is
   animated back to zero; the area, band and dots fade behind it. */
.chart-line {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 1.4s cubic-bezier(.22, .61, .36, 1);
}
.chart-line--forecast {
  /* keeps its 7 7 dash pattern; reveal by clipping the width instead */
  stroke-dasharray: 7 7;
  opacity: 0;
  transition: opacity .5s ease .9s;
}
.chart-area, .chart-band, .chart-dots, .chart-tag, .chart-split {
  opacity: 0;
  transition: opacity .6s ease .35s;
}
.bar {
  transform: scaleY(0);
  transform-origin: 50% 220px;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.bars .bar:nth-child(2n)  { transition-delay: .07s; }
.bars .bar:nth-child(3n)  { transition-delay: .13s; }
.bars .bar:nth-child(5n)  { transition-delay: .2s; }
.chart-key, .chart-xlab, .chart-ylab { opacity: 0; transition: opacity .5s ease .3s; }

.insight-panel.is-drawn .chart-line { stroke-dashoffset: 0; }
.insight-panel.is-drawn .chart-line--forecast { opacity: 1; }
.insight-panel.is-drawn .chart-area,
.insight-panel.is-drawn .chart-band,
.insight-panel.is-drawn .chart-dots,
.insight-panel.is-drawn .chart-tag,
.insight-panel.is-drawn .chart-split,
.insight-panel.is-drawn .chart-key,
.insight-panel.is-drawn .chart-xlab,
.insight-panel.is-drawn .chart-ylab { opacity: 1; }
.insight-panel.is-drawn .bar { transform: scaleY(1); }

/* No JS: show the finished chart rather than an empty frame. */
html:not(.js) .chart-line { stroke-dasharray: none; stroke-dashoffset: 0; }
html:not(.js) .chart-line--forecast { stroke-dasharray: 7 7; opacity: 1; }
html:not(.js) .chart-area,
html:not(.js) .chart-band,
html:not(.js) .chart-dots,
html:not(.js) .chart-tag,
html:not(.js) .chart-split,
html:not(.js) .chart-key,
html:not(.js) .chart-xlab,
html:not(.js) .chart-ylab { opacity: 1; }
html:not(.js) .bar { transform: none; }

/* KPI tiles */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 520px) { .kpi-grid { grid-template-columns: 1fr; } }
.kpi {
  padding: var(--s-4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 4px solid var(--sky);
  border-radius: var(--radius-sm);
}
.kpi--good { border-left-color: var(--green-light); }
.kpi-label { display: block; font-size: var(--fs-sm); font-weight: 650; color: var(--muted); }
.kpi-value {
  display: block;
  margin: var(--s-1) 0;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.kpi-unit { margin-left: .25rem; font-size: var(--fs-base); font-weight: 600; color: var(--muted); }
.kpi-delta { display: block; font-size: var(--fs-xs); color: var(--muted); }
.kpi-delta--up { color: var(--green-deep); }
.kpi-delta--down { color: #B26A05; }
/* preserveAspectRatio="none" on the sparkline lets it stretch to the tile
   width; vector-effect keeps the stroke an even weight despite the stretch. */
.kpi-spark { display: block; width: 100%; height: 30px; margin-top: var(--s-3); }
.kpi-spark path { vector-effect: non-scaling-stroke; }

/* --- scroll reveal -------------------------------------------------------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}
html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
/* Stagger siblings inside a grid so a row arrives as a wave, not a block. */
html.js .grid > [data-reveal]:nth-child(2),
html.js .stat-grid > [data-reveal]:nth-child(2),
html.js .process > [data-reveal]:nth-child(2) { transition-delay: .06s; }
html.js .grid > [data-reveal]:nth-child(3),
html.js .stat-grid > [data-reveal]:nth-child(3),
html.js .process > [data-reveal]:nth-child(3) { transition-delay: .12s; }
html.js .grid > [data-reveal]:nth-child(4),
html.js .stat-grid > [data-reveal]:nth-child(4),
html.js .process > [data-reveal]:nth-child(4) { transition-delay: .18s; }
html.js .grid > [data-reveal]:nth-child(n + 5),
html.js .process > [data-reveal]:nth-child(n + 5) { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero--ready .hero-slide { transition: none; }
  .chart-line, .chart-line--forecast, .chart-area, .chart-band, .chart-dots,
  .chart-tag, .chart-split, .chart-key, .chart-xlab, .chart-ylab, .bar {
    transition: none;
  }
}

/* --- hero background video ------------------------------------------------
   The layer sits between the hero's gradient and its content. It is empty and
   invisible until main.js injects a <video>, so a site with no footage yet
   looks exactly as it does today. A scrim keeps the headline contrast well
   clear of AA over any footage. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Two players stacked in the same box. Only the one carrying .is-current is
   visible, and the opacity transition is the cross-fade between clips. */
.hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .9s ease;
}
.hero-video.is-playing video.is-current { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-video video { transition: none; }
}
/* Scrim: without it, light footage would drop the headline below AA. */
.hero-video.is-playing::after {
  content: "";
  position: absolute;
  inset: 0;
  /* One layer, not two. It stays heavy over the left third where the headline
     sits (white on this keeps well clear of AA) and thins out to the right so
     the footage is actually visible rather than crushed to black. */
  background: linear-gradient(90deg,
    rgba(10, 31, 64, .90) 0%,
    rgba(10, 31, 64, .78) 34%,
    rgba(10, 31, 64, .42) 68%,
    rgba(10, 31, 64, .30) 100%);
}
/* The decorative grid overlay would fight the footage. */
.hero:has(.hero-video.is-playing)::after { opacity: .35; }

/* --- what's new / news & notices ------------------------------------------
   One list style serves the compact landing-page block and the full listing on
   news.html; the compact variant simply omits the summary paragraph. */
.section-head--row {
  /* .section-head caps at 72ch for readability; the row variant has to span the
     full width or space-between has nothing to push the link against. */
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.section-head--row > div { max-width: 72ch; }
.section-head--row .link-arrow { padding-bottom: .35rem; white-space: nowrap; }

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.news-item {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: var(--s-2) var(--s-6);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
  transition: background .18s ease;
}
.news-item.is-hidden { display: none; }
.news-item:hover { background: var(--sky-soft); }
@media (max-width: 720px) {
  .news-item { grid-template-columns: 1fr; gap: var(--s-2); }
}

.news-meta { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }
@media (max-width: 720px) {
  .news-meta { flex-direction: row; align-items: center; gap: var(--s-3); }
}
.news-date {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.news-cat {
  display: inline-block;
  padding: .18rem .55rem;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--sky-soft);
  color: var(--navy-soft);
}
.news-cat--training     { background: #F4F1FE; color: #5B39C4; }
.news-cat--network      { background: #EEF9F1; color: var(--green-deep); }
.news-cat--publication  { background: #FFF8E6; color: #8A6A12; }
.news-cat--service      { background: #ECFAFA; color: #0E6F80; }
.news-cat--announcement { background: var(--sky-soft); color: var(--navy-soft); }

.news-body { min-width: 0; }
.news-title { font-size: var(--fs-md); line-height: 1.4; margin: 0; }
.news-title a { color: var(--ink); text-decoration: none; }
.news-title a:hover { color: var(--navy-soft); text-decoration: underline; }
.news-summary { margin: var(--s-2) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.news-list--compact .news-item { padding: var(--s-4) 0; }

/* --- animated hero background (no video file needed) ----------------------
   Three drifting light pools plus a slow network motif. Everything moves by
   transform only, so it stays off the layout and compositor-cheap. Durations
   are deliberately long: this should register as ambient depth, not as an
   animation competing with the headline. */
.hero-motion {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-motion svg { width: 100%; height: 100%; display: block; }

.hm-blob { transform-box: fill-box; transform-origin: center; will-change: transform; }
.hm-blob--a { animation: hm-drift-a 26s ease-in-out infinite alternate; }
.hm-blob--b { animation: hm-drift-b 34s ease-in-out infinite alternate; }
.hm-blob--c { animation: hm-drift-c 30s ease-in-out infinite alternate; }

@keyframes hm-drift-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-90px, 60px) scale(1.12); }
}
@keyframes hm-drift-b {
  from { transform: translate(0, 0) scale(1.06); }
  to   { transform: translate(-70px, -80px) scale(.94); }
}
@keyframes hm-drift-c {
  from { transform: translate(0, 0) scale(.96); }
  to   { transform: translate(110px, -50px) scale(1.15); }
}

/* Connector lines draw themselves in, then hold. */
.hm-lines path {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: hm-draw 2.4s ease-out forwards;
}
.hm-lines path:nth-child(2) { animation-delay: .25s; }
.hm-lines path:nth-child(3) { animation-delay: .5s; }
.hm-lines path:nth-child(4) { animation-delay: .75s; }
.hm-lines path:nth-child(5) { animation-delay: 1s; }
.hm-lines path:nth-child(6) { animation-delay: 1.25s; }
@keyframes hm-draw { to { stroke-dashoffset: 0; } }

/* Nodes breathe. */
.hm-node {
  fill: #9ACD32;
  transform-box: fill-box;
  transform-origin: center;
  animation: hm-pulse 4.5s ease-in-out infinite;
}
.hm-node--2 { fill: #8FC4E8; animation-duration: 5.5s; animation-delay: .6s; }
.hm-node--3 { fill: #8FC4E8; animation-duration: 6s;   animation-delay: 1.2s; }
.hm-node--4 { animation-duration: 5s;   animation-delay: .3s; }
.hm-node--5 { fill: #8FC4E8; animation-duration: 6.5s; animation-delay: 1.8s; }
@keyframes hm-pulse {
  0%, 100% { transform: scale(1);   opacity: .75; }
  50%      { transform: scale(1.6); opacity: 1; }
}

/* Dots travel along three of the connectors. */
.hm-dot { opacity: 0; will-change: transform; }
.hm-dot--1 { animation: hm-travel-1 7s linear infinite; }
.hm-dot--2 { animation: hm-travel-2 9s linear infinite 1.5s; }
.hm-dot--3 { animation: hm-travel-3 8s linear infinite 3s; }
@keyframes hm-travel-1 {
  0%        { transform: translate(0, 0);        opacity: 0; }
  12%, 88%  { opacity: .95; }
  100%      { transform: translate(180px, -80px); opacity: 0; }
}
@keyframes hm-travel-2 {
  0%        { transform: translate(0, 0);         opacity: 0; }
  12%, 88%  { opacity: .95; }
  100%      { transform: translate(190px, 90px);  opacity: 0; }
}
@keyframes hm-travel-3 {
  0%        { transform: translate(0, 0);         opacity: 0; }
  12%, 88%  { opacity: .95; }
  100%      { transform: translate(180px, 100px); opacity: 0; }
}

/* One switch stops the lot, driven by the hero pause button. */
.hero.is-paused .hero-motion * { animation-play-state: paused; }

/* Real footage wins: hide the drawn background when a video is actually playing. */
.hero-motion.is-hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hm-blob, .hm-node, .hm-dot, .hm-lines path { animation: none; }
  .hm-lines path { stroke-dashoffset: 0; }
  .hm-dot { opacity: .9; }
  .hm-node { opacity: .85; }
}
@media (max-width: 700px) {
  /* The motif lives in the right third, which is off-canvas on a phone; the
     blobs alone still give the hero depth. */
  .hm-net { display: none; }
}

/* --- what's new carousel --------------------------------------------------
   Without JS the viewport scrolls horizontally and the controls stay hidden,
   so the cards are still reachable. Once initNewsCarousel runs it takes over
   and drives the track by transform. */
.news-carousel { position: relative; }
.news-viewport { overflow: hidden; }
.news-carousel:not(.is-ready) .news-viewport { overflow-x: auto; }

.news-track {
  display: flex;
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-reduced-motion: reduce) { .news-track { transition: none; } }

.news-card {
  flex: 0 0 calc((100% - 2 * var(--s-5)) / 3);
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--green-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
/* The whole carousel card is the link now, so it fills the card and keeps the
   layout the card's own padding used to give it. */
.news-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
}
.news-card-link .news-meta { display: flex; align-items: center; gap: var(--s-3); }
.news-card-link:hover .news-title { color: var(--navy-soft); text-decoration: underline; }
.news-card:focus-within { outline: 3px solid var(--sky); outline-offset: 2px; }
.news-card-link:focus-visible { outline: none; }
@media (max-width: 1000px) { .news-card { flex-basis: calc((100% - var(--s-5)) / 2); } }
@media (max-width: 660px)  { .news-card { flex-basis: 100%; } }

.news-card .news-meta { flex-direction: row; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.news-card .news-title { margin-top: var(--s-2); }
.news-card .news-summary { margin-top: var(--s-3); }
.news-card .badge--soon { align-self: flex-start; }

.news-controls {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.news-arrow,
.news-play {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--navy);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.news-arrow:hover,
.news-play:hover { background: var(--sky-soft); border-color: var(--sky); transform: translateY(-1px); }
.news-arrow svg, .news-play svg { width: 19px; height: 19px; }
.news-play { margin-left: auto; }
.news-play .ico-play { display: none; }
.news-carousel.is-paused .news-play .ico-play { display: block; }
.news-carousel.is-paused .news-play .ico-pause { display: none; }

.news-dots { display: flex; gap: var(--s-2); }
.news-dot {
  width: 30px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--line);
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.news-dot:hover { background: var(--sky); }
.news-dot.is-active { width: 46px; background: var(--green); }

/* -----------------------------------------------------------------------------
   23  LIVE CHAT LAUNCHER
   Our own button, not the vendor's. It sits bottom-right until the visitor
   presses it; once tawk.to loads it hides itself and the vendor's launcher
   takes the same corner. Kept under the mobile nav panel (z-index 95) so an
   open menu is never covered by a floating bubble.
   -------------------------------------------------------------------------- */
.live-chat {
  position: fixed;
  right: clamp(12px, 2.5vw, 24px);
  bottom: clamp(12px, 2.5vw, 24px);
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
  max-width: min(320px, calc(100vw - 24px));
}
.live-chat[hidden] { display: none; }

.live-chat-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: .7rem 1.15rem .7rem .95rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--green-light), var(--green-deep));
  color: #fff;
  font: 600 var(--fs-sm)/1 var(--font-sans);
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: var(--shadow-2);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.live-chat-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.live-chat-btn:active { transform: translateY(0); }
.live-chat-btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.live-chat-btn[disabled] { cursor: progress; filter: saturate(.7); transform: none; }

.live-chat-icon { flex: none; }

/* The third-party notice. Present for screen readers at all times through
   aria-describedby; shown to sighted visitors on hover or keyboard focus, so
   the promise about cookies is readable before the button is pressed, not
   after. */
.live-chat-note {
  margin: 0;
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.45;
  box-shadow: var(--shadow-1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.live-chat-note strong { color: var(--ink); }
.live-chat-note a { color: var(--navy); }
.live-chat:hover .live-chat-note,
.live-chat:focus-within .live-chat-note,
.live-chat-note.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .live-chat-btn,
  .live-chat-note { transition: none; }
  .live-chat-btn:hover { transform: none; }
}

@media print { .live-chat { display: none; } }

/* -----------------------------------------------------------------------------
   24  SOCIAL LINKS
   One row of brand tiles. The marks carry their own colour, so the row needs
   no colour of its own -- it only sets size, spacing and the hover lift. Used
   on the dark footer (--light) and inside the contact card.
   -------------------------------------------------------------------------- */
.social-links {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.social-link {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  /* The tiles are square-ish artwork; the padding keeps the hover target at the
     44px the WCAG target-size rule asks for without inflating the artwork. */
  padding: 3px;
  line-height: 0;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.social-link svg { width: 100%; height: 100%; display: block; }
.social-link:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .10);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
}
.social-link:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
}

.social-heading {
  margin: var(--s-5) 0 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
}
.social-heading--dark { color: var(--ink); margin-top: var(--s-4); }

/* On the light contact card the hover wash has to darken, not lighten. */
.social-links:not(.social-links--light) .social-link:hover {
  background: var(--line-soft);
  box-shadow: var(--shadow-1);
}

@media (prefers-reduced-motion: reduce) {
  .social-link { transition: none; }
  .social-link:hover { transform: none; }
}

/* -----------------------------------------------------------------------------
   25  SITE SEARCH
   A header trigger, a full-width overlay panel, and the standalone results
   page. Search cannot work without JavaScript on a static site, so the trigger
   is revealed only once main.js has set .js on <html> -- no dead button.
   -------------------------------------------------------------------------- */
.search-trigger { display: none; }

.js .search-trigger {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font: 600 var(--fs-sm)/1 var(--font-sans);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.js .search-trigger:hover { border-color: var(--sky); color: var(--navy); background: var(--sky-soft); }
.js .search-trigger:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

/* --- the overlay ---------------------------------------------------------- */
.site-search {
  position: fixed;
  inset: 0;
  z-index: 150;              /* over the header (100), under the skip link (200) */
}
.site-search[hidden] { display: none; }

.site-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 31, 64, .55);
  animation: ss-fade-in .2s ease;
}

.site-search-panel {
  position: relative;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  padding: var(--s-5) var(--s-4) var(--s-5);
  max-height: 88vh;
  overflow-y: auto;
  animation: ss-drop-in .22s ease;
}

/* Entrance only. The keyframes have no `to` and no fill, so the panel's real
   state is the visible one: if the animation is skipped, blocked or frozen the
   panel is still there, rather than a locked page behind an invisible dialog. */
@keyframes ss-fade-in { from { opacity: 0; } }
@keyframes ss-drop-in { from { opacity: 0; transform: translateY(-14px); } }

.site-search-form,
.search-page-form {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: min(var(--wrap), 100%);
  margin-inline: auto;
  padding-inline: var(--s-4);
}
.site-search-glass { flex: none; color: var(--muted); }

.site-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-bottom: 2px solid var(--line);
  border-radius: 0;
  padding: .7rem .2rem;
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--ink);
  background: transparent;
}
.site-search-input::placeholder { color: #97A7B6; font-weight: 500; }
.site-search-input:focus { outline: none; border-bottom-color: var(--green); }
/* The browser's own clear button sits badly against a borderless field. */
.site-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.site-search-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.site-search-close:hover { color: var(--navy); border-color: var(--sky); }

.site-search-status,
.search-page-status {
  width: min(var(--wrap), 100%);
  margin: var(--s-4) auto 0;
  padding-inline: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.site-search-results {
  list-style: none;
  width: min(var(--wrap), 100%);
  margin: var(--s-2) auto 0;
  padding: 0 var(--s-4);
  display: grid;
  gap: var(--s-2);
}

.ss-result {
  display: block;
  padding: var(--s-3) var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
}
.ss-result:hover,
.ss-result.is-active {
  background: var(--sky-soft);
  border-color: #CBE0F0;
}
.ss-result-crumb {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--green);
}
.ss-result-title {
  display: block;
  margin-top: .15rem;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}
.ss-result-snip {
  display: block;
  margin-top: .2rem;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-2);
}
.ss-result mark,
.search-page-snip mark {
  background: #FFF1B8;
  color: inherit;
  padding: 0 .1em;
  border-radius: 2px;
}
.ss-more { padding: var(--s-2) var(--s-4) 0; font-size: var(--fs-sm); font-weight: 600; }

.site-search-hint {
  width: min(var(--wrap), 100%);
  margin: var(--s-4) auto 0;
  padding-inline: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.search-seed {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  padding: .3rem .75rem;
  margin: .2rem .25rem 0 0;
  font: 600 var(--fs-xs)/1.4 var(--font-sans);
  color: var(--navy);
  cursor: pointer;
}
.search-seed:hover { border-color: var(--sky); background: var(--sky-soft); }

/* --- search.html ---------------------------------------------------------- */
.search-page-form {
  padding-inline: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
}
.search-page-form .site-search-input { font-size: var(--fs-lg); }
.search-page-status { padding-inline: 0; }

.search-page-results {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-5);
  max-width: 78ch;
}
.search-page-result { padding-bottom: var(--s-5); border-bottom: 1px solid var(--line-soft); }
.search-page-link { font-size: var(--fs-lg); font-weight: 700; color: var(--navy); }
.search-page-crumb {
  display: inline-block;
  margin-left: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--green);
}
.search-page-snip { margin: var(--s-2) 0 0; color: var(--ink-2); line-height: 1.65; }
.search-page-url { margin: var(--s-1) 0 0; font-size: var(--fs-xs); color: var(--muted); }
.search-page-empty { color: var(--ink-2); }

@media (max-width: 900px) {
  .site-search-panel { padding-top: var(--s-4); }
  .site-search-input { font-size: var(--fs-lg); }
  .js .search-trigger { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .site-search-backdrop,
  .site-search-panel { animation: none; }
}

@media print { .site-search, .search-trigger { display: none !important; } }

/* -----------------------------------------------------------------------------
   26  PLACEHOLDER LINKS
   A link whose address is still a [TOKEN] is not rendered as a link: the words
   stay, the navigation does not. This is what they look like -- present, plainly
   inert, and not pretending to be clickable.
   -------------------------------------------------------------------------- */
.link-pending {
  cursor: default;
  opacity: .55;
  text-decoration: none;
  color: inherit;
}
.social-link.link-pending { pointer-events: none; }

/* --------------------------------------------------------------------------
   27  PEOPLE
   The team grid. A photograph is optional -- a member with none gets their
   initials on a tinted disc rather than a grey silhouette, which reads as a
   deliberate placeholder instead of a missing file.
   -------------------------------------------------------------------------- */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.person {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.person-figure {
  aspect-ratio: 1 / 1;
  background: var(--sky-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.person-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.person-initials {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--navy);
  opacity: .55;
}
.person-body { padding: var(--s-4); }
.person-name { font-size: var(--fs-base); font-weight: 700; color: var(--ink); margin: 0; }
.person-quals {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green);
  margin: var(--s-1) 0 0;
}
.person-role { font-size: var(--fs-sm); color: var(--muted); margin: var(--s-2) 0 0; }
.person-note { font-size: var(--fs-sm); color: var(--ink-2); margin: var(--s-3) 0 0; }
.person-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* --- the team as a chart --------------------------------------------------
   Grouped by what people are responsible for. The group name is a navy pill
   that overlaps the top edge of its panel, which is what makes the page read
   as an organisation chart rather than as four unrelated grids.

   The cards are deliberately narrow: a row of six across a desktop, wrapping
   to two on a tablet and one on a phone. What each one carries -- a
   qualification, a discipline, a length of service -- is three short lines,
   so a taller card would be mostly air.
   -------------------------------------------------------------------------- */
.team-chart {
  display: grid;
  gap: calc(var(--s-6) + var(--s-3));
}

.team-group {
  position: relative;
  background: var(--sky-soft);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  padding: calc(var(--s-6) + var(--s-2)) var(--s-4) var(--s-4);
}

.team-group-name {
  position: absolute;
  top: 0;
  left: var(--s-4);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-2) var(--s-4);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--navy) 0%, #1c4e91 100%);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: var(--shadow-1);
}
.team-group-name svg { flex: none; opacity: .92; }

.people--chart {
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: var(--s-4);
}

/* Where the page has said how many people are in this group, give it that
   many columns so the department is one rank rather than a row and a
   remainder. Only above the width where that many cards can still be read --
   below it the grid goes back to deciding. */
@media (min-width: 1000px) {
  .people--chart[style] {
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  }
}

/* A group of one or two: the card turns on its side and takes the room a
   column of six would have left empty. */
.people--wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.people--wide .person--card { flex-direction: row; align-items: center; }
.people--wide .person-portrait {
  margin: var(--s-4) 0 var(--s-4) var(--s-4);
  width: 76px;
  height: 76px;
}
.people--wide .person--card .person-body {
  flex: 1;
  padding: var(--s-4);
  text-align: left;
}
.people--wide .person-facts { margin-top: var(--s-2); }

.person--card {
  align-items: stretch;
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(15, 45, 92, .05);
  transition: transform .18s ease, box-shadow .18s ease;
}
.person--card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
}

/* Round, and centred over the card, because that is what a roster of faces
   looks like -- the square edge-to-edge portrait belongs to the flat grid the
   home page still uses. */
.person-portrait {
  width: 88px;
  height: 88px;
  margin: var(--s-5) auto var(--s-3);
  border-radius: 50%;
  overflow: hidden;
  background: var(--sky-soft);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
  display: grid;
  place-items: center;
  flex: none;
}
.person-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.person-portrait .person-initials { font-size: 1.6rem; }

.person--card .person-body {
  padding: 0 var(--s-4) var(--s-4);
  text-align: center;
}
.person--card .person-name {
  font-size: var(--fs-base);
  line-height: 1.3;
  color: var(--navy);
}

.person-facts {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
  text-align: left;
}
.person-facts li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--ink-2);
}
.person-facts svg {
  flex: none;
  margin-top: 1px;
  color: var(--navy);
  opacity: .75;
}

.person-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin: var(--s-3) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.person-social a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
}
.person-social a:hover { color: var(--navy); text-decoration: underline; }
.person-social svg { flex: none; }

@media (max-width: 640px) {
  .team-group { padding-left: var(--s-3); padding-right: var(--s-3); }
  .team-group-name { left: var(--s-3); font-size: var(--fs-xs); }
  .people--chart { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  /* On a phone there is no room to the side of a photograph, so the wide card
     stands back up like every other one. */
  .people--wide { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .people--wide .person--card { flex-direction: column; }
  .people--wide .person-portrait { margin: var(--s-5) auto var(--s-3); }
  .people--wide .person--card .person-body { text-align: center; }
}

/* --------------------------------------------------------------------------
   28  GALLERY
   -------------------------------------------------------------------------- */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.shot {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--sky-soft);
}
.shot figcaption { padding: var(--s-3) var(--s-4); }
.shot-title { font-size: var(--fs-base); font-weight: 600; color: var(--ink); margin: 0; }
.shot-caption { font-size: var(--fs-sm); color: var(--muted); margin: var(--s-1) 0 0; }
.shot-date {
  font-size: var(--fs-xs);
  color: var(--muted);
  display: block;
  margin-top: var(--s-2);
}

/* --------------------------------------------------------------------------
   29  LOGO RAIL
   Clients and partners, sliding. The track holds the logos twice and moves by
   exactly half its width, so the loop has no seam; the copy is aria-hidden so
   a screen reader is not read the same list of organisations twice.

   Logos are shown in their own colours. Tinting somebody else's mark to match
   this site is a change to their brand, and plenty of brand guidelines say so
   in as many words.
   -------------------------------------------------------------------------- */
.logo-rail {
  overflow: hidden;
  position: relative;
  padding: var(--s-2) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-track {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  width: max-content;
  animation: logo-drift 46s linear infinite;
}
.logo-rail:hover .logo-track,
.logo-rail:focus-within .logo-track { animation-play-state: paused; }
@keyframes logo-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logo-slide {
  flex: 0 0 auto;
  width: 168px;
  height: 84px;
  display: grid;
  place-items: center;
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.logo-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.logo-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  text-align: center;
  line-height: 1.25;
}
.logo-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--muted);
}
/* Movement that nobody asked for is movement somebody has to tolerate. With
   reduced motion the rail stops being a rail and becomes a wrapped grid. */
@media (prefers-reduced-motion: reduce) {
  .logo-rail { -webkit-mask-image: none; mask-image: none; }
  .logo-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .logo-track [data-logo-copy] { display: none; }
}

/* --------------------------------------------------------------------------
   30  LIGHTBOX
   A photograph, larger, over the page. The grid crops every image to the same
   shape so the page reads well; this is where the photograph gets to be the
   photograph.
   -------------------------------------------------------------------------- */
.shot-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.shot-zoom:focus-visible { outline: 3px solid var(--sky); outline-offset: -3px; }

body.has-lightbox { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background: rgba(10, 31, 64, .93);
  backdrop-filter: blur(3px);
}
.lightbox[hidden] { display: none; }

.lightbox-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  color: #fff;
}
.lightbox-count { font-size: var(--fs-sm); opacity: .8; }
.lightbox-tools { display: flex; align-items: center; gap: var(--s-2); }
.lightbox-level {
  min-width: 3.6rem;
  text-align: center;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  opacity: .85;
}
.lightbox-btn, .lightbox-nav {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
}
.lightbox-btn:hover:not(:disabled), .lightbox-nav:hover {
  background: rgba(255, 255, 255, .18);
}
.lightbox-btn:disabled { opacity: .35; cursor: default; }
.lightbox-nav { width: 48px; height: 48px; }
.lightbox-nav[hidden] { display: none; }

.lightbox-stage {
  grid-column: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}
.lightbox-stage img {
  max-width: 100%;
  max-height: calc(100vh - 230px);
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: #0a1f40;
  transform-origin: center center;
  transition: transform .18s ease;
  cursor: zoom-in;
}
.lightbox-stage img.is-zoomed { cursor: grab; }
.lightbox-stage img.is-zoomed:active { cursor: grabbing; }
.lightbox-stage figcaption {
  color: #dbe8f5;
  font-size: var(--fs-sm);
  text-align: center;
  max-width: 60ch;
}

@media (max-width: 720px) {
  .lightbox { grid-template-columns: 1fr; padding: var(--s-3); }
  .lightbox-stage { grid-column: 1; }
  /* The arrows sit over the foot of the picture rather than beside it: at this
     width, a column each side leaves the photograph nothing. */
  .lightbox-nav {
    position: fixed;
    bottom: var(--s-4);
  }
  .lightbox-nav--prev { left: var(--s-4); }
  .lightbox-nav--next { right: var(--s-4); }
  .lightbox-stage img { max-height: calc(100vh - 260px); }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox-stage img { transition: none; }
  .lightbox { backdrop-filter: none; }
}

/* --------------------------------------------------------------------------
   31  CV READING
   What the careers form says while it reads the uploaded CV, and afterwards.
   A field filled from the document is marked, because it is a suggestion the
   applicant should read rather than an answer they gave.
   -------------------------------------------------------------------------- */
.cv-status {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.cv-status--good { color: var(--green); font-weight: 600; }
.cv-status--quiet { color: var(--muted); }

.field input.is-from-cv,
.field select.is-from-cv,
.row-grid input.is-from-cv {
  border-color: var(--green);
  background: #f3faf5;
}

/* --------------------------------------------------------------------------
   32  FORM GROUPS — qualifications, skills
   A qualification is four things about one thing, so it is a row; skills are a
   list to scan, so they are a grid. Both collapse to one column on a phone,
   where a four-column row is four unreadable columns.
   -------------------------------------------------------------------------- */
.field-legend {
  display: block;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink);
  margin-bottom: var(--s-1);
}

.rows { display: flex; flex-direction: column; gap: var(--s-3); }
/* .field is a flex column, so a button in it would stretch the full width and
   read as the form's main action rather than a small addition to one field. */
[data-row-add] { align-self: flex-start; }
/* The remove control sits in the corner of the row rather than on a line of
   its own: a line per row for one small button is a lot of page for nothing. */
.row-item { position: relative; padding-right: 2.6rem; }
/* Two by two, not four across: the form card is about 700px wide, and four
   columns in it truncate every placeholder to "Passing y". This matches the
   two-column grid the rest of the form uses. */
.row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  align-items: center;
}
.row-remove { position: absolute; top: 0; right: 0; }
/* A one-column row -- an extra skill -- has nothing to line up with. */
.row-grid--single { grid-template-columns: 1fr; }
.row-remove {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.row-remove:hover { color: #B42318; border-color: #B42318; }
.row-remove[hidden] { display: none; }

.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s-2) var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.check-grid label {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}
.check-grid input { margin-top: .2rem; flex: 0 0 auto; }

@media (max-width: 720px) {
  .row-grid { grid-template-columns: 1fr; }
  .row-item { border-left: 3px solid var(--line); padding-left: var(--s-3); }
}