/* ==========================================================================
   Rely Service site stylesheet
   Hand-written, no framework, no build step.

   Palette is sampled directly from the logo:
     #00A0E3 cyan  →  #1874BB  →  #3A3D8A indigo   (the waveform gradient)
     #2B2A29 charcoal                               (the wordmark)

   Contents
     1. Tokens
     2. Reset & base
     3. Layout helpers
     4. Buttons & links
     5. Header & navigation
     6. Hero
     7. Sections, cards, motifs
     8. Client logo wall
     9. Pillar pages
    10. Contact & forms
    11. Footer
    12. Reveal animation, motion & print
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* Brand, sampled from the logo file. */
  --brand-cyan:    #00a0e3;
  --brand-cyan-lt: #3dbdf0;   /* glow / dark-background variant */
  --brand-blue:    #1874bb;
  --brand-indigo:  #3a3d8a;
  --brand-indigo-dp: #262a63;

  --brand-gradient: linear-gradient(150deg, var(--brand-cyan) 0%, var(--brand-blue) 48%, var(--brand-indigo) 100%);
  --brand-gradient-flat: linear-gradient(90deg, var(--brand-cyan), var(--brand-indigo));

  /* Warm accent, complementary to the logo's cyan-to-indigo. Used sparingly:
     calls to action, active states, required markers. Roughly 5% of the page.
     Amber carries dark text rather than white, which keeps contrast well above
     the 4.5:1 threshold; white on amber would fail it. */
  --accent:     #f5a524;
  --accent-dk:  #d9860f;
  --accent-lt:  #ffc35c;
  --accent-ink: #2b1a02;

  /* Neutrals: cooler and deeper than before, for contrast and a technical feel. */
  --ink:         #0b1220;
  --ink-2:       #3a4658;
  --muted:       #6a7789;
  --line:        #e2e8f0;
  --line-soft:   #eef2f7;
  --surface:     #ffffff;
  --surface-2:   #f5f8fc;
  --surface-3:   #e9f0f8;

  /* Dark sections: near-black navy so the brand gradient reads as light. */
  --dark:        #060a14;
  --dark-2:      #0d1526;
  --dark-line:   rgba(255,255,255,.09);

  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale, a little larger and airier than default. */
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.89rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.18vw, 1.09rem);
  --step-1:  clamp(1.16rem, 1.07rem + 0.42vw, 1.38rem);
  --step-2:  clamp(1.42rem, 1.22rem + 0.92vw, 2.05rem);
  --step-3:  clamp(1.85rem, 1.44rem + 1.85vw, 3.10rem);
  --step-4:  clamp(2.35rem, 1.60rem + 3.40vw, 4.60rem);

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4.5rem;
  --space-xl: 7rem;

  --radius-sm:  10px;
  --radius:     16px;
  --radius-lg:  24px;
  --radius-xl:  32px;

  --shadow-xs: 0 1px 2px rgba(11, 18, 32, .05);
  --shadow-sm: 0 2px 4px rgba(11, 18, 32, .04), 0 6px 16px rgba(11, 18, 32, .05);
  --shadow-md: 0 4px 10px rgba(11, 18, 32, .06), 0 18px 40px rgba(11, 18, 32, .08);
  --shadow-lg: 0 8px 20px rgba(11, 18, 32, .07), 0 32px 70px rgba(11, 18, 32, .12);
  --glow:      0 10px 30px rgba(0, 160, 227, .30);

  /* Wider than before so the layout runs closer to the edges. */
  --container: 1440px;
  --gutter:    clamp(1rem, 3.2vw, 3rem);
  --header-h:  80px;
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
}

/* 2. Reset & base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.68;
  color: var(--ink-2);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 var(--space-sm);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); letter-spacing: -0.04em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.02em; }
h4 { font-size: var(--step-0); font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0 0 var(--space-sm); max-width: 66ch; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--brand-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .18s var(--ease);
}
a:hover { color: var(--brand-indigo); }

img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.15em; }
strong { color: var(--ink); font-weight: 600; }

::selection { background: rgba(0, 160, 227, .18); color: var(--ink); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: .8rem 1.4rem;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* 3. Layout helpers -------------------------------------------------------- */
.container { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }

.section { padding-block: var(--space-xl); position: relative; }
.section--tint { background: var(--surface-2); }
.section--tight { padding-block: var(--space-lg); }

.section--ink {
  background: var(--dark);
  color: rgba(255,255,255,.68);
  position: relative;
  overflow: hidden;
}
.section--ink h2, .section--ink h3, .section--ink h4, .section--ink strong { color: #fff; }
/* Soft brand glow in the corner of every dark band. */
.section--ink::before {
  content: "";
  position: absolute; inset: auto auto -40% -10%;
  width: 46rem; height: 46rem;
  background: radial-gradient(circle, rgba(0,160,227,.16), transparent 62%);
  pointer-events: none;
}
.section--ink > * { position: relative; z-index: 1; }

.section-head { max-width: 44rem; margin-bottom: var(--space-lg); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center p { margin-inline: auto; }

/* Eyebrow: small pill with the brand gradient dot. */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: var(--space-sm);
}
.eyebrow::before {
  content: "";
  width: 1.75rem; height: 3px; border-radius: 3px;
  background: var(--brand-gradient);
}
.section--ink .eyebrow, .page-hero .eyebrow { color: #6fc9f2; }

.lead {
  font-size: var(--step-1);
  color: var(--muted);
  line-height: 1.6;
  font-weight: 400;
}
.section--ink .lead { color: rgba(255,255,255,.66); }

/* Gradient-filled words, used sparingly in headlines. */
.gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.grid { display: grid; gap: var(--space-md); }

/* Below the caps further down, auto-fit decides the column count from the
   available width. */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* Hold each grid to the column count its name promises.
   Without this, auto-fit keeps adding columns as the viewport grows: at the
   1440px container, .grid-3 was fitting four columns, so six cards landed as
   4 + 2 instead of 3 + 3. Each breakpoint is set just above the width at which
   auto-fit would otherwise overshoot. */
@media (min-width: 1000px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* For a set whose count does not divide evenly, this centres the final row
   rather than leaving an orphan hugging the left edge. */
.grid--center {
  display: flex; flex-wrap: wrap; justify-content: center;
}
.grid--center > * { flex: 1 1 15rem; max-width: 22rem; }

/* 4. Buttons & links -------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .95rem 1.75rem;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  border: 1px solid transparent;
  border-radius: 100px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), opacity .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: .6rem 1.25rem; font-size: var(--step--1); }

.btn-primary {
  background: linear-gradient(135deg, var(--accent-lt), var(--accent));
  color: var(--accent-ink);
  box-shadow: 0 10px 28px rgba(245, 165, 36, .32);
}
.btn-primary:hover {
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-dk));
  box-shadow: 0 16px 40px rgba(245, 165, 36, .40);
}

/* Brand-gradient button, for secondary emphasis where amber would be too loud. */
.btn-gradient { background: var(--brand-gradient); color: #fff; box-shadow: var(--glow); }
.btn-gradient:hover { color: #fff; box-shadow: 0 16px 40px rgba(24,116,187,.36); }

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--brand-indigo); color: #fff; box-shadow: var(--glow); }

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

/* Only on genuinely dark backgrounds. The hero and page-hero were in this list
   from when they had dark backgrounds; once they became light, the white text
   made "See what we do" invisible against white. */
.section--ink .btn-outline, .cta-band .btn-outline, .site-footer .btn-outline {
  border-color: rgba(255,255,255,.30); color: #fff;
}
.section--ink .btn-outline:hover, .cta-band .btn-outline:hover,
.site-footer .btn-outline:hover {
  background: #fff; border-color: #fff; color: var(--ink);
}

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--space-md); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  color: var(--brand-blue);
}
.link-arrow::after {
  content: "";
  width: 1.1rem; height: 1.1rem; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .2s var(--ease);
}
.link-arrow:hover { color: var(--accent-dk); }
.link-arrow:hover::after { transform: translateX(4px); }

/* 5. Header & navigation ---------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px rgba(23,24,28,.06);
  background: rgba(255,255,255,.92);
}

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

.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; flex: none; }
.brand-logo { height: 34px; width: auto; }
@media (max-width: 420px) { .brand-logo { height: 28px; } }

.nav-list { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }

.nav-link {
  display: block; padding: .55rem .85rem;
  font-family: var(--font-display);
  font-size: var(--step--1); font-weight: 600; letter-spacing: -.01em;
  color: var(--ink-2); text-decoration: none;
  border-radius: 100px;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav-link:hover { color: var(--ink); background: var(--surface-3); }
.nav-link.is-active { color: var(--ink); }
.nav-link.is-active::after {
  content: ""; display: block; height: 2px; margin: .3rem auto 0; width: 60%;
  border-radius: 2px; background: var(--accent);
}

.submenu-toggle { display: none; }

.submenu {
  position: absolute; top: calc(100% + .5rem); left: 0;
  min-width: 16.5rem; padding: .5rem; margin: 0;
  list-style: none;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98);
  transform-origin: top left;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.has-children:hover > .submenu,
.has-children:focus-within > .submenu { opacity: 1; visibility: visible; transform: none; }

.submenu a {
  display: block; padding: .55rem .75rem;
  font-size: var(--step--1); font-weight: 500;
  color: var(--ink-2); text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color .16s var(--ease), color .16s var(--ease), padding-left .16s var(--ease);
}
.submenu a:hover { background: var(--surface-3); color: var(--ink); padding-left: 1rem; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px; padding: 12px;
  background: none; border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.nav-toggle-bar + .nav-toggle-bar { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1120px) {
  .nav-toggle { display: block; }

  .primary-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    display: none;
  }
  .primary-nav.is-open { display: block; animation: navIn .22s var(--ease); }
  @keyframes navIn { from { opacity: 0; transform: translateY(-8px); } }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-sm) 1.25rem var(--space-md); }
  .nav-item { border-bottom: 1px solid var(--line-soft); }
  .nav-cta-item { border: 0; padding-top: var(--space-md); }
  .nav-cta-item .btn { width: 100%; justify-content: center; padding-block: .9rem; font-size: var(--step-0); }
  .nav-link { padding: 1rem .25rem; font-size: var(--step-1); border-radius: 0; }
  .nav-link:hover { background: none; }
  .nav-link.is-active::after { margin-left: 0; width: 2.5rem; }

  .has-children { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .submenu-toggle {
    display: block; width: 44px; height: 44px;
    background: none; border: 0; cursor: pointer; position: relative;
  }
  .submenu-toggle::before {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 9px; height: 9px;
    border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: translateY(-3px) rotate(45deg);
    transition: transform .22s var(--ease);
  }
  .submenu-toggle[aria-expanded="true"]::before { transform: translateY(1px) rotate(-135deg); }

  .submenu {
    position: static; grid-column: 1 / -1;
    opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; background: none; backdrop-filter: none;
    padding: 0 0 .75rem .25rem;
    display: none;
  }
  .submenu.is-open { display: block; }
  .has-children:hover > .submenu:not(.is-open) { display: none; }
  .submenu a { padding: .5rem .25rem; }
  .submenu a:hover { padding-left: .75rem; background: none; }
}

/* 6. Hero ------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(4rem, 9vw, 8rem) clamp(4rem, 8vw, 7rem);
  background: var(--surface);
  overflow: hidden;
}
/* Two soft brand-coloured orbs, well out of the way of the text. */
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(10px);
}
.hero::before {
  width: 52rem; height: 52rem; top: -26rem; right: -16rem;
  background: radial-gradient(circle, rgba(0,160,227,.13), transparent 60%);
}
.hero::after {
  width: 40rem; height: 40rem; bottom: -24rem; left: -14rem;
  background: radial-gradient(circle, rgba(58,61,138,.10), transparent 62%);
}
.hero > * { position: relative; }

.hero-grid {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
}
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { margin-bottom: var(--space-md); }
.hero .lead { max-width: 38rem; }

/* Small trust line under the hero buttons */
.hero-note {
  display: flex; align-items: center; gap: .5rem;
  margin-top: var(--space-md);
  font-size: var(--step--1); color: var(--muted);
}
.hero-note::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(245,165,36,.20);
}

/* Panel that sits opposite the hero copy. */
.hero-panel {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.hero-panel-title {
  font-size: var(--step-1);
  margin-bottom: 1.25rem;
}
.hero-panel .feature-list li { font-size: var(--step-0); }
.hero-panel-title { font-size: var(--step-1); }

/* Inner-page hero: light, with a hairline gradient rule at the bottom. */
.page-hero {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; top: -30rem; right: -20rem;
  width: 55rem; height: 55rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,160,227,.11), transparent 62%);
  pointer-events: none;
}
.page-hero > * { position: relative; }
.page-hero h1 { max-width: 18ch; }
.page-hero .lead { max-width: 46rem; }
.page-hero .eyebrow { color: var(--brand-blue); }

.breadcrumb { font-size: var(--step--1); color: var(--muted); margin-bottom: var(--space-md); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-blue); }
.breadcrumb span { margin-inline: .4rem; opacity: .5; }

/* 7. Sections, cards, motifs -------------------------------------------------- */
.card {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.card h3 { margin-bottom: .6rem; }
.card p { color: var(--muted); font-size: var(--step--1); flex: 1; }
.card .link-arrow { margin-top: var(--space-md); }
.section--tint .card { background: var(--surface); }
.section--ink .card {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}
.section--ink .card p { color: rgba(255,255,255,.62); }
.section--ink .card:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }

/* Numbered index used on cards: gradient numeral, no box. */
.card-icon {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1); font-weight: 800; letter-spacing: -.03em;
  line-height: 1;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 1.1rem;
}

.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.feature-list li { position: relative; padding-left: 1.9rem; color: var(--muted); font-size: var(--step--1); }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: .8rem; height: .8rem; border-radius: 50%;
  background: var(--brand-gradient);
  opacity: .9;
}
.section--ink .feature-list li { color: rgba(255,255,255,.66); }

.numbered { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 1.6rem; }
.numbered > li { counter-increment: step; position: relative; padding-left: 3.4rem; font-size: var(--step--1); color: var(--muted); }
.numbered > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -.1em;
  font-family: var(--font-display);
  font-size: var(--step-1); font-weight: 800; letter-spacing: -.03em;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Waveform motif, echoing the logo. Decorative only. */
.wave {
  display: flex; align-items: flex-end; gap: 5px; height: 34px;
  margin-bottom: var(--space-md);
}
.wave span {
  width: 5px; border-radius: 100px;
  background: var(--brand-gradient);
}
.wave span:nth-child(1) { height: 34%; }
.wave span:nth-child(2) { height: 68%; }
.wave span:nth-child(3) { height: 100%; }
.wave span:nth-child(4) { height: 62%; }
.wave span:nth-child(5) { height: 40%; }
.wave--center { justify-content: center; }

/* CTA band */
.cta-band {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background: var(--dark);
  color: rgba(255,255,255,.68);
  text-align: center;
  overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: -50% -10% auto;
  height: 60rem;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,160,227,.20), transparent 58%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.cta-band p { color: rgba(255,255,255,.66); margin-inline: auto; }
.cta-band .btn-row { justify-content: center; }

/* 8. Client logos ------------------------------------------------------------- */
/* Two layouts share one tile: a static row for a handful of clients, and a
   continuous marquee once there are enough to loop convincingly. See
   includes/client-marquee.php, where the PHP picks which one to render. */

.logo-cell {
  display: grid; place-items: center;
  flex: 0 0 auto;
  width: var(--logo-cell-w, 12rem);
  min-height: 7rem; padding: 1.25rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.logo-cell:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: transparent; }

/* Logo files are pre-normalised by aspect ratio (see the note in
   includes/client-marquee.php), so each carries its own display size via its
   width/height attributes and no CSS cap is needed. max-width is the safety net
   for a logo dropped in without being processed first. */
.logo-cell img {
  width: auto; height: auto;
  max-width: 100%; max-height: 3.5rem;
  object-fit: contain;
  filter: grayscale(1); opacity: .55;
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.logo-cell:hover img { filter: none; opacity: 1; }

/* Placeholder text until real logo files are dropped in */
.logo-cell span {
  font-family: var(--font-display);
  font-size: var(--step--1); font-weight: 600; color: #b3c0cc; text-align: center;
}

/* --- Static row (few clients) --- */
.logo-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-sm);
  padding: 0; margin: 0;
}

/* --- Marquee (many clients) --- */
.marquee { position: relative; }

/* The edge fade lives on an inner element, not on .marquee itself. A mask
   applies to every descendant, so with it on the wrapper the pause button
   sitting near the right edge was being faded out along with the logos. */
.marquee-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-slide var(--marquee-duration, 30s) linear infinite;
}

.marquee-set {
  display: flex;
  gap: var(--space-sm);
  padding: 0; margin: 0;
  /* Half the gap on each side of the seam keeps spacing even across the loop. */
  padding-right: var(--space-sm);
}

@keyframes marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pause on hover, on keyboard focus anywhere inside, and via the button.
   Because it stops first, the greyscale-to-colour hover lands on a still logo
   rather than a moving target. */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track,
.marquee.is-paused .marquee-track { animation-play-state: paused; }

.marquee-pause {
  position: absolute; right: .5rem; bottom: .5rem; z-index: 2;
  display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
/* Stays out of the way until it's wanted, but always reachable by keyboard. */
.marquee:hover .marquee-pause,
.marquee:focus-within .marquee-pause,
.marquee-pause:focus-visible,
.marquee.is-paused .marquee-pause { opacity: 1; }
.marquee-pause:hover { border-color: var(--ink); transform: scale(1.06); }

.marquee-pause-icon {
  width: 9px; height: 10px;
  background: var(--ink);
  /* Two bars = pause. */
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 3px 100% no-repeat,
                linear-gradient(#000 0 0) 100% 0 / 3px 100% no-repeat;
          mask: linear-gradient(#000 0 0) 0 0 / 3px 100% no-repeat,
                linear-gradient(#000 0 0) 100% 0 / 3px 100% no-repeat;
}
/* One triangle = play, shown once paused. */
.marquee.is-paused .marquee-pause-icon {
  width: 10px; height: 11px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 11'%3E%3Cpath d='M1 .8v9.4l8-4.7z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 11'%3E%3Cpath d='M1 .8v9.4l8-4.7z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (max-width: 560px) {
  .logo-cell { --logo-cell-w: 10rem; min-height: 6rem; }
}

/* 9. Pillar pages ------------------------------------------------------------- */
.pillar { padding-block: var(--space-lg); border-top: 1px solid var(--line-soft); }
.pillar:first-of-type { border-top: 0; padding-top: var(--space-md); }

.pillar-grid {
  display: grid; gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) { .pillar-grid { grid-template-columns: 1fr; gap: var(--space-md); } }

/* On a service page the right column runs much longer than the left, leaving a
   tall gap beside the heading. Pinning the heading keeps it beside the copy it
   describes instead of stranding it at the top. Offset clears the sticky header
   and the sticky jump nav beneath it. */
@media (min-width: 901px) {
  .pillar .pillar-grid > *:first-child {
    position: sticky;
    top: calc(var(--header-h) + 5rem);
  }
}

.pillar-index {
  font-family: var(--font-display);
  font-size: var(--step-2); font-weight: 800; letter-spacing: -.04em; line-height: 1;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 0 0 .5rem;
}

.panel {
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}
.panel h3 { color: var(--ink); margin-bottom: 1rem; font-size: var(--step-0); font-weight: 700; letter-spacing: -.01em; }
.section--tint .panel { background: var(--surface); border-color: var(--line); }

/* Sticky jump nav on pillar pages */
.jump-nav {
  position: sticky; top: var(--header-h); z-index: 50;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.jump-nav ul {
  display: flex; gap: .5rem; overflow-x: auto;
  list-style: none; margin: 0; padding: .85rem 0;
  scrollbar-width: none;
}
.jump-nav ul::-webkit-scrollbar { display: none; }
.jump-nav a {
  display: block; white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--step--1); font-weight: 600;
  color: var(--muted); text-decoration: none;
  padding: .45rem 1rem; border-radius: 100px;
  border: 1px solid var(--line);
  transition: all .2s var(--ease);
}
.jump-nav a:hover { color: var(--ink); border-color: var(--ink); }
.jump-nav a.is-current { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

/* 10. Contact & forms --------------------------------------------------------- */
.contact-grid {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: start;
}
@media (max-width: 920px) { .contact-grid { grid-template-columns: 1fr; } }

.form-grid { display: grid; gap: 1.15rem; }
.form-row { display: grid; gap: 1.15rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }

.field { display: grid; gap: .4rem; }
.field label {
  font-family: var(--font-display);
  font-size: var(--step--1); font-weight: 600; color: var(--ink);
}
.field .req { color: var(--accent-dk); }
.field .hint { font-size: var(--step--1); color: var(--muted); margin: 0; }

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%;
  padding: .85rem 1rem;
  font: 400 var(--step-0)/1.5 var(--font-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
input::placeholder, textarea::placeholder { color: #a9b4bf; }
input:hover, select:hover, textarea:hover { border-color: #cfd9e3; }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand-cyan);
  box-shadow: 0 0 0 4px rgba(0,160,227,.13);
  outline: none;
}
textarea { min-height: 9.5rem; resize: vertical; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%236b7683' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 1.15rem;
  padding-right: 2.75rem;
}

input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: #d64545;
  box-shadow: 0 0 0 4px rgba(214,69,69,.10);
}
.field-error { font-size: var(--step--1); color: #c23b3b; font-weight: 500; margin: 0; }

.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.alert {
  padding: 1.15rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid;
  margin-bottom: var(--space-md);
}
.alert-success { background: #f0fbf5; border-color: #b8e6ce; color: #14603c; }
.alert-error   { background: #fdf2f1; border-color: #f3ccc8; color: #8e2b20; }
.alert strong { color: inherit; }
.alert p { margin: .4rem 0 0; color: inherit; }
.alert ul { margin: .5rem 0 0; }
.alert a { color: inherit; }

.contact-aside .panel + .panel { margin-top: 1rem; }
.contact-aside address { font-style: normal; color: var(--muted); font-size: var(--step--1); line-height: 1.8; }
.contact-aside p { font-size: var(--step--1); }

/* 11. Footer ------------------------------------------------------------------ */
.site-footer {
  position: relative;
  background: var(--dark);
  color: rgba(255,255,255,.60);
  padding-block: var(--space-lg) var(--space-md);
  font-size: var(--step--1);
  overflow: hidden;
}
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--brand-gradient); opacity: .8;
}
.footer-grid {
  display: grid; gap: var(--space-md);
  grid-template-columns: 1.6fr repeat(3, 1fr) 1.3fr;
}
@media (max-width: 1080px) { .footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-lg); } }
@media (max-width: 620px)  { .footer-grid { grid-template-columns: 1fr; } }

.footer-logo { height: 30px; width: auto; }
.footer-blurb { color: rgba(255,255,255,.52); margin-top: 1.1rem; max-width: 30ch; }

.footer-heading {
  font-size: var(--step--1); color: #fff; margin-bottom: 1rem;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.35;
  /* Reserve two lines. "Incubation & Entrepreneurship" wraps while the other
     headings do not, which pushed that column's links out of alignment. */
  min-height: 2.7em;
}
@media (max-width: 1080px) { .footer-heading { min-height: 0; } }
.footer-heading a { color: #fff; text-decoration: none; }
.footer-heading a:hover { color: var(--brand-cyan); }

.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-footer a { color: rgba(255,255,255,.60); text-decoration: none; transition: color .18s var(--ease); }
.site-footer a.btn { color: #fff; }
.site-footer a.btn:hover { color: var(--ink); }
.site-footer a:hover { color: #fff; }

.footer-contact address { font-style: normal; margin-bottom: 1.25rem; line-height: 1.9; }

.social-list { display: flex; gap: 1.25rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  align-items: center; justify-content: space-between;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.44);
}
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }

/* 11b. Stats bands, AI callouts and richer interaction ------------------------ */

/* --- Stats band -------------------------------------------------------------
   Used on every service page. Figures count up once, when scrolled into view.
   Without JS (or with reduced motion) the final value is already in the HTML. */
.stats-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1px;
  background: var(--dark-line);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat-cell {
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--dark-2);
  transition: background-color .3s var(--ease);
}
.stat-cell:hover { background: #131d33; }

.stat-value {
  display: flex; align-items: baseline; gap: .1rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  /* Solid, not a gradient. A gradient is clipped to each numeral's own box, so
     a one-character value sampled only the first stop while a six-character one
     spanned the whole ramp: the figures in a single row came out different
     colours. */
  color: var(--brand-cyan-lt);
  margin-bottom: .55rem;
}
.stat-caption {
  font-size: var(--step--1);
  color: rgba(255,255,255,.60);
  line-height: 1.5;
}
/* Light variant, for stats bands placed on a white section. */
.stats-band--light { background: var(--line); border-color: var(--line); }
.stats-band--light .stat-cell { background: var(--surface); }
.stats-band--light .stat-cell:hover { background: var(--surface-2); }
.stats-band--light .stat-value { color: var(--brand-blue); }
.stats-band--light .stat-caption { color: var(--muted); }

/* Placeholder figures render as literal "XX" rather than invented numbers, so
   every cell is styled identically and nothing false can reach a visitor. */
.stat-value .is-placeholder { letter-spacing: -.02em; opacity: .9; }

/* --- AI callout -------------------------------------------------------------
   A distinct block used inside each service section to name the AI capability
   concretely, rather than sprinkling the word through the prose. */
.ai-note {
  position: relative;
  margin-top: var(--space-md);
  padding: 1.35rem 1.5rem 1.35rem 1.65rem;
  background: linear-gradient(135deg, rgba(0,160,227,.07), rgba(58,61,138,.06));
  border: 1px solid rgba(0,160,227,.20);
  border-radius: var(--radius);
  overflow: hidden;
}
.ai-note::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--brand-gradient-flat);
}
.ai-label {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: .5rem;
}
.ai-label::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-cyan);
  box-shadow: 0 0 0 3px rgba(0,160,227,.18);
  animation: ai-pulse 2.4s var(--ease) infinite;
}
@keyframes ai-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(0,160,227,.18); }
  50%      { box-shadow: 0 0 0 7px rgba(0,160,227,0); }
}
.ai-note p { font-size: var(--step--1); color: var(--ink-2); margin: 0; max-width: none; }
.section--ink .ai-note {
  background: linear-gradient(135deg, rgba(0,160,227,.10), rgba(58,61,138,.10));
  border-color: rgba(0,160,227,.26);
}
.section--ink .ai-note p { color: rgba(255,255,255,.72); }
.section--ink .ai-label { color: var(--brand-cyan-lt); }

/* --- Animated waveform, the site's signature motif -------------------------- */
/* Bars breathe continuously at low amplitude. This is the one piece of
   always-on motion, and it is small, slow and off to the side. */
.js .wave span {
  animation: wave-breathe 2.8s var(--ease) infinite;
  transform-origin: bottom;
}
.js .wave span:nth-child(1) { animation-delay: 0s; }
.js .wave span:nth-child(2) { animation-delay: .16s; }
.js .wave span:nth-child(3) { animation-delay: .32s; }
.js .wave span:nth-child(4) { animation-delay: .48s; }
.js .wave span:nth-child(5) { animation-delay: .64s; }
@keyframes wave-breathe {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(.55); }
}

/* --- Card hover: gradient hairline instead of a heavier shadow -------------- */
.card { position: relative; isolation: isolate; }
.card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--brand-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
  z-index: -1;
}
.card:hover::after { opacity: 1; }

/* --- Pointer-tracked glow on the hero panel --------------------------------- */
/* --mx/--my are set by JS in px; the glow simply follows the cursor. */
.hero-panel { position: relative; overflow: hidden; }
.hero-panel::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(20rem 20rem at var(--mx, 50%) var(--my, 0%),
                              rgba(0,160,227,.13), transparent 65%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.hero-panel:hover::before { opacity: 1; }
.hero-panel > * { position: relative; }

/* --- Dark sections get a faint technical grid ------------------------------- */
.section--ink::after, .cta-band::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 78%);
  pointer-events: none;
}

/* --- Buttons: sheen sweep on hover ------------------------------------------ */
.btn-primary { overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.30) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .65s var(--ease-out);
  pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(120%); }

/* --- Section links list, used for in-page navigation on service pages ------- */
.section--ink .feature-list li::before { opacity: 1; }

/* 12. Reveal animation, motion & print ----------------------------------------- */
/* Elements fade up as they scroll in. JS adds .is-visible; without JS the
   .reveal class is never applied, so content is always visible by default. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal-delay-1 { transition-delay: .08s; }
.js .reveal-delay-2 { transition-delay: .16s; }
.js .reveal-delay-3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  /* The marquee becomes a static, centred, wrapping wall. The duplicate set is
     removed so no client appears twice, and the edge fade goes with it. */
  .marquee-viewport { -webkit-mask-image: none; mask-image: none; overflow: visible; }
  .marquee-track { width: auto; flex-wrap: wrap; justify-content: center; animation: none !important; }
  .marquee-set { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .marquee-set[aria-hidden="true"] { display: none; }
  .marquee-pause { display: none; }

  /* Silence the new always-on motion too. */
  .js .wave span { animation: none !important; }
  .ai-label::before { animation: none !important; }
  .btn-primary::after { display: none; }
  .hero-panel::before { display: none; }
}

@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle, .jump-nav, .hero::before, .hero::after { display: none; }
  body { color: #000; background: #fff; }
  .section, .hero, .page-hero { padding-block: 1.5rem; }
  a::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}