/* ---------------------------------------------------------------------------
   IT EASY — site stylesheet.

   Implements the visual language delivered by Claude Design (sheet 00). Colour,
   type and spacing all come from the tokens below; component rules only ever
   reference tokens, never literals, so the system stays adjustable in one place.
   --------------------------------------------------------------------------- */

@layer reset, tokens, base, layout, components, utilities;

/* ===========================================================================
   Fonts — self-hosted WOFF2, subset to Latin-1 plus typographic punctuation
   and instanced to the weight ranges the design uses.
   =========================================================================== */

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4.woff2") format("woff2-variations");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@layer tokens {
  :root {
    /* Brand and fields ------------------------------------------------------ */
    --navy-600: #074378;   /* the company colour: buttons, links, active states */
    --navy-800: #052E52;   /* navy fields, footer, primary button hover */
    --navy-900: #031F38;   /* deepest field, hero scrims */
    --navy-400: #2E6EA6;   /* data bars, diagram strokes */
    --navy-100: #E6EEF6;   /* tint bands, data tracks */

    /* Ink and paper --------------------------------------------------------- */
    --ink-900: #101A24;    /* headings */
    --ink-700: #1F2A36;    /* nav, labels, emphasis */
    --ink-500: #3C4A57;    /* body copy, 8.1:1 on paper */
    --ink-400: #5C6B7A;    /* captions, 5.4:1, the floor */
    --paper:   #FAF9F6;
    --surface: #FFFFFF;
    --rule:    #E3E1DA;

    /* Ink on navy fields ---------------------------------------------------- */
    --on-navy:        #FFFFFF;
    --on-navy-body:   #C8D6E4;
    --on-navy-muted:  #A9BED2;
    --on-navy-finest: #8FA6BC;
    --rule-on-navy:   rgb(255 255 255 / 0.16);

    /* Signal, used sparingly ------------------------------------------------ */
    --signal:      #C97A21;   /* focus rings, the diamond accent, eyebrows on dark */
    --signal-ink:  #96570F;   /* eyebrows on light, 5.1:1 */
    --signal-lift: #E0A868;   /* eyebrows and accents on navy */

    /* Form validation, the only semantic hues in the system ----------------- */
    --ok:    #1F6B4A;
    --error: #A3341F;

    /* Type ------------------------------------------------------------------ */
    --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    --display-1: clamp(2.5rem, 4.6vw, 4.25rem);
    --display-2: clamp(1.875rem, 3vw, 2.75rem);
    --heading-3: 1.375rem;
    --lead:      clamp(1.0625rem, 1.35vw, 1.25rem);
    --body:      1.0625rem;
    --prose:     1.1875rem;
    --eyebrow:   0.75rem;
    --small:     0.875rem;
    --data:      clamp(2.25rem, 3.4vw, 3rem);

    /* Rhythm — 4px base: 8 12 16 24 32 48 64 96 128 ------------------------- */
    --s-1: 8px;
    --s-2: 12px;
    --s-3: 16px;
    --s-4: 24px;
    --s-5: 32px;
    --s-6: 48px;
    --s-7: 64px;
    --s-8: 96px;
    --s-9: 128px;

    --radius: 2px;
    --container: 1240px;
    --gutter: 32px;
    --section-y: clamp(72px, 9vw, 128px);
    --measure: 68ch;
    --header-height: 76px;
    --page-index-height: 53px;
    /* Applied to the scrollport. Any per-element scroll-margin ADDS to this,
       so only the extra chrome goes on the element, never the header again. */
    --anchor-offset: calc(var(--header-height) + var(--s-3));
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  img, picture, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  :where(h1, h2, h3, h4) { text-wrap: balance; }
  :where(p, li) { text-wrap: pretty; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer base {
  html {
    /* Deliberately no scroll-behavior: smooth. It animated a cold visit to a deep
       link (/managed-services#cloud) all the way down the page before settling,
       which reads as the page still loading after it has finished. Anchors jump
       straight to the target; scroll-padding-top is what makes them land clear of
       the sticky header, and is unrelated to the animation. */
    scroll-padding-top: var(--anchor-offset);
  }

  body {
    background: var(--paper);
    color: var(--ink-500);
    font-family: var(--font-text);
    font-size: var(--body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  main { flex: 1; }

  h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--ink-900);
    font-weight: 400;
  }
  h1 { font-size: var(--display-1); line-height: 1.05; letter-spacing: -0.022em; }
  h2 { font-size: var(--display-2); line-height: 1.1;  letter-spacing: -0.02em; }
  h3 { font-size: var(--heading-3); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }

  a { color: var(--navy-600); text-underline-offset: 0.15em; }
  a:hover { color: var(--signal-ink); }

  strong { font-weight: 600; color: var(--ink-900); }
  em { font-style: italic; }

  /* One focus treatment everywhere, including skip links. */
  :focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
    border-radius: 1px;
  }

  ::selection { background: var(--navy-600); color: var(--on-navy); }
}

@layer layout {
  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* Three fields only: paper, navy tint, navy. */
  .field-paper { background: var(--paper); }
  .field-tint  { background: var(--navy-100); }
  .field-navy  { background: var(--navy-800); color: var(--on-navy-body); }

  /* Anything sitting on a navy field, the hero included, takes the same ink. */
  :is(.field-navy, .hero) :is(h1, h2, h3) { color: var(--on-navy); }
  :is(.field-navy, .hero) strong { color: var(--on-navy); }
  :is(.field-navy, .hero) a:not(.btn) { color: var(--on-navy); }
  :is(.field-navy, .hero) a:not(.btn):hover { color: var(--signal-lift); }
  :is(.field-navy, .hero) .eyebrow { color: var(--signal-lift); }
  :is(.field-navy, .hero) .lead { color: var(--on-navy-body); }

  .section { padding-block: var(--section-y); }
  .section--flush-top { padding-block-start: 0; }

  /* Section anatomy: hairline rule, eyebrow, heading, lead. */
  .section-head {
    border-top: 1px solid var(--rule);
    padding-top: var(--s-4);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--s-3) var(--s-6);
    align-items: start;
    margin-bottom: var(--s-6);
  }
  .field-navy .section-head { border-top-color: var(--rule-on-navy); }
  .section-head--stacked { display: block; }
  .section-head > :last-child { margin-bottom: 0; }

  .eyebrow {
    font-family: var(--font-text);
    font-size: var(--eyebrow);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--signal-ink);
    margin-bottom: var(--s-3);
  }

  .lead {
    font-size: var(--lead);
    line-height: 1.58;
    color: var(--ink-500);
    max-width: 56ch;
  }

  .prose { max-width: var(--measure); }
  .prose > * + * { margin-block-start: var(--s-3); }
  .prose h2 { margin-block-start: var(--s-6); }
  .prose h3 { margin-block-start: var(--s-5); }
  .prose ul, .prose ol { padding-inline-start: 1.35rem; }
  .prose li + li { margin-block-start: var(--s-1); }

  /* The three legal pages set long-form copy in the serif at a 68ch measure. */
  .prose--document { font-family: var(--font-display); font-size: var(--prose); line-height: 1.72; }
  .prose--document .eyebrow { font-family: var(--font-text); }

  .grid-auto {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  }

  .split {
    display: grid;
    gap: var(--s-6);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  @media (min-width: 62rem) {
    .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }
  /* For closing calls to action, where a heading sits beside its buttons. */
  .split--center { align-items: center; }

  .skip-link {
    position: absolute;
    inset-inline-start: var(--s-3);
    inset-block-start: -100%;
    z-index: 100;
    background: var(--navy-600);
    color: var(--on-navy);
    padding: var(--s-2) var(--s-3);
    text-decoration: none;
    border-radius: var(--radius);
  }
  .skip-link:focus { inset-block-start: var(--s-3); color: var(--on-navy); }
}

@layer components {

  /* --- Buttons --------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-family: var(--font-text);
    font-size: 1rem;
    font-weight: 600;
    padding: 15px var(--s-4);
    border-radius: var(--radius);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    background: var(--navy-600);
    color: var(--on-navy);
  }
  .btn:hover { background: var(--navy-800); color: var(--on-navy); }

  .btn--secondary {
    background: transparent;
    color: var(--navy-600);
    border-color: var(--rule);
  }
  .btn--secondary:hover { background: var(--surface); border-color: var(--navy-600); color: var(--navy-600); }

  /* On navy fields the primary action inverts to paper. */
  .btn--on-navy { background: var(--surface); color: var(--navy-800); }
  .btn--on-navy:hover { background: var(--signal-lift); color: var(--navy-900); }

  .btn--ghost-on-navy {
    background: transparent;
    color: var(--on-navy);
    border-color: rgb(255 255 255 / 0.42);
  }
  .btn--ghost-on-navy:hover { background: rgb(255 255 255 / 0.08); border-color: var(--on-navy); color: var(--on-navy); }

  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-family: var(--font-text);
    font-size: var(--small);
    font-weight: 600;
    color: var(--navy-600);
    text-decoration: none;
  }
  .link-arrow:hover { color: var(--signal-ink); gap: var(--s-2); }
  .link-arrow svg { transition: transform 0.15s ease; }

  /* --- Site header ----------------------------------------------------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    min-height: var(--header-height);
  }
  .site-header__brand { display: flex; align-items: center; flex-shrink: 0; }
  .site-header__brand img { height: 44px; width: auto; }

  .site-nav { display: flex; align-items: center; gap: 30px; margin-right: auto; flex-wrap: wrap; }
  .site-nav a {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--ink-700);
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
  }
  .site-nav a:hover { color: var(--navy-600); border-bottom-color: var(--signal); }
  .site-nav a.active { color: var(--navy-600); border-bottom-color: var(--navy-600); }

  .site-header__actions { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }
  .site-header__phone {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-500);
    text-decoration: none;
  }
  .site-header__phone:hover { color: var(--navy-600); }
  .site-header__cta { font-size: 14px; padding: 11px 18px; }

  /* Mobile nav: a checkbox toggle, so it needs no JavaScript. */
  .nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
  .nav-toggle-label { display: none; }

  @media (max-width: 60rem) {
    .site-header__inner { gap: var(--s-3); flex-wrap: wrap; }
    .nav-toggle-label {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      margin-left: auto;
      width: 44px;
      height: 44px;
      padding: 12px 10px;
      cursor: pointer;
      border: 1px solid var(--rule);
      border-radius: var(--radius);
    }
    .nav-toggle-label span { display: block; height: 2px; background: var(--ink-700); }
    .nav-toggle:focus-visible + .nav-toggle-label { outline: 2px solid var(--signal); outline-offset: 3px; }

    .site-nav,
    .site-header__actions {
      display: none;
      width: 100%;
      order: 3;
    }
    .site-nav { flex-direction: column; align-items: stretch; gap: 0; margin-right: 0; }
    .site-nav a { padding-block: var(--s-2); border-bottom: 1px solid var(--rule); }
    .site-header__actions { flex-direction: column; align-items: stretch; padding-block: var(--s-3) var(--s-4); gap: var(--s-3); }
    .site-header__cta { justify-content: center; }

    .nav-toggle:checked ~ .site-nav,
    .nav-toggle:checked ~ .site-header__actions { display: flex; }
    .nav-toggle:checked + .nav-toggle-label span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle:checked + .nav-toggle-label span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked + .nav-toggle-label span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  }

  /* --- Hero ------------------------------------------------------------ */
  .hero {
    position: relative;
    background: var(--navy-900);
    color: var(--on-navy-body);
    overflow: hidden;
    isolation: isolate;
  }
  /* A hero with no photograph behind it sits on the brand blue rather than the
     deep navy, which is reserved for the two photo-backed heroes. */
  .hero--brand { background: var(--navy-600); }

  .hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    opacity: 0.15;
    filter: grayscale(1) contrast(1.15);
    z-index: 0;
  }
  .hero__inner {
    position: relative;
    z-index: 1;
    padding-block: clamp(72px, 8vw, 116px) clamp(64px, 7vw, 96px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(32px, 4vw, 56px) clamp(40px, 5vw, 72px);
    align-items: end;
  }
  @media (min-width: 62rem) {
    .hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  }
  /* The headline spans both columns so it uses the full measure of the page
     rather than wrapping early inside one. */
  .hero__head { grid-column: 1 / -1; }
  .hero h1 { color: var(--on-navy); }
  .hero .eyebrow { color: var(--signal-lift); }
  .hero__lead { max-width: 56ch; font-size: var(--lead); line-height: 1.6; color: var(--on-navy-body); }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: 40px; }
  .hero em { color: var(--signal-lift); font-style: italic; }

  /* The mark from the logo, reused as a typographic accent. */
  .diamond {
    display: inline-block;
    width: 0.42em;
    height: 0.42em;
    background: var(--signal-lift);
    transform: rotate(45deg);
    margin: 0 0.34em 0.12em;
    vertical-align: middle;
  }

  /* Fills its column: capping this left a third of the row empty once the
     headline moved out of the two-column row. */
  .hero__aside { border-top: 2px solid var(--signal-lift); padding-top: var(--s-4); }
  .hero__aside-claim {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2vw, 1.875rem);
    line-height: 1.22;
    letter-spacing: -0.018em;
    color: var(--on-navy);
    margin-bottom: 22px;
  }
  .proof-list { display: flex; flex-direction: column; gap: var(--s-2); }
  .proof-list li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--on-navy-body); }
  .proof-list svg { color: var(--signal-lift); margin-top: 1px; flex-shrink: 0; }

  /* --- Cards ----------------------------------------------------------- */
  .card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
  }
  .card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
  .card__icon { color: var(--navy-600); }
  .card__tag {
    font-size: var(--eyebrow);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-400);
  }
  .card h3 a { color: inherit; text-decoration: none; }
  .card h3 a::after { content: ""; position: absolute; inset: 0; }
  .card { position: relative; }
  .card p { flex: 1; }
  .card__footer { margin-top: var(--s-2); }

  /* --- Statistics ------------------------------------------------------ */
  .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--s-6) var(--s-5);
  }
  .stat { display: flex; flex-direction: column; gap: var(--s-1); }
  .stat__value {
    font-family: var(--font-text);
    font-size: var(--data);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--navy-800);
    font-variant-numeric: tabular-nums lining-nums;
  }
  .stat__label { font-weight: 600; color: var(--ink-900); font-size: var(--small); }
  .stat__note { font-size: var(--small); color: var(--ink-400); line-height: 1.5; }

  /* --- Outcome bars ---------------------------------------------------- */
  .outcomes { display: flex; flex-direction: column; gap: var(--s-4); }
  .outcome__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-1); }
  .outcome__label { font-size: var(--small); color: var(--on-navy-body); }
  .outcome__value { font-size: var(--small); font-weight: 600; color: var(--on-navy); font-variant-numeric: tabular-nums; }
  .outcome__track { height: 6px; background: rgb(255 255 255 / 0.14); border-radius: 1px; overflow: hidden; }
  /* One hue for every bar. These are shares of a whole, not good-versus-bad. */
  .outcome__fill { height: 100%; background: var(--signal-lift); }
  .outcome__source { margin-top: var(--s-4); font-size: 13px; line-height: 1.55; color: var(--on-navy-finest); }

  /* --- Testimonials ---------------------------------------------------- */
  .quotes { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
  .quote {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
  }
  .quote--feature { grid-column: span 1; }
  .quote--feature blockquote p {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    line-height: 1.35;
    letter-spacing: -0.012em;
    color: var(--ink-900);
  }
  .quote blockquote p { flex: 1; }
  .quote__mark { color: var(--signal); }
  .quote figcaption { display: flex; align-items: center; gap: var(--s-2); margin-top: auto; }
  .quote figcaption img { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
  .quote__name { font-weight: 600; color: var(--ink-900); font-size: var(--small); }
  .quote__role { font-size: 13px; color: var(--ink-400); }

  @media (min-width: 62rem) {
    .quotes--feature { grid-template-columns: 1.15fr 1fr 1fr; grid-auto-rows: min-content; }
    .quotes--feature .quote--feature { grid-row: span 2; }
  }

  /* --- Partner logos --------------------------------------------------- */
  .partners {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6) var(--s-5);
  }
  .partners img {
    height: 26px;
    width: auto;
    filter: grayscale(1);
    opacity: 0.62;
  }
  .partners a:hover img { filter: none; opacity: 1; }

  /* --- In-page index (Managed Services) -------------------------------- */
  .page-index {
    position: sticky;
    top: var(--header-height);
    z-index: 40;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
  .page-index ul { display: flex; gap: var(--s-4); overflow-x: auto; padding-block: var(--s-2); }
  .page-index a {
    white-space: nowrap;
    font-size: var(--small);
    font-weight: 500;
    color: var(--ink-500);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
  }
  .page-index a:hover { color: var(--navy-600); border-bottom-color: var(--signal); }

  /* The header is already covered by the scrollport's scroll-padding-top; this
     adds only the in-page index that sits beneath it. */
  .service-section { scroll-margin-top: var(--page-index-height); }

  /* --- Numbered sequence (SOE lifecycle) ------------------------------- */
  .sequence { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); counter-reset: step; }
  .sequence li { counter-increment: step; border-top: 2px solid var(--navy-100); padding-top: var(--s-2); }
  .sequence li::before {
    content: counter(step, decimal-leading-zero);
    display: block;
    font-size: var(--eyebrow);
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--signal-ink);
    margin-bottom: var(--s-1);
    font-variant-numeric: tabular-nums;
  }
  .sequence h3 { font-size: 1.0625rem; margin-bottom: var(--s-1); }
  .sequence p { font-size: var(--small); }

  /* --- Timeline (About Us) --------------------------------------------- */
  .timeline { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
  .timeline li { border-top: 2px solid var(--navy-600); padding-top: var(--s-3); }
  .timeline__year {
    display: block;
    font-family: var(--font-text);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--navy-800);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--s-1);
  }
  .timeline h3 { font-size: 1.0625rem; margin-bottom: var(--s-1); }
  .timeline p { font-size: var(--small); }

  /* --- Tag / pill lists ------------------------------------------------ */
  .tags { display: flex; flex-wrap: wrap; gap: var(--s-1); }
  .tags li {
    font-size: var(--small);
    padding: 6px var(--s-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink-500);
  }

  /* --- Forms ----------------------------------------------------------- */
  .form { display: flex; flex-direction: column; gap: var(--s-4); max-width: 34rem; }
  .field { display: flex; flex-direction: column; gap: 6px; }
  .field label { font-size: var(--small); font-weight: 600; color: var(--ink-900); }
  .field__hint { font-size: 13px; color: var(--ink-400); }
  .field input, .field textarea {
    font-family: var(--font-text);
    font-size: var(--body);
    padding: 12px var(--s-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink-900);
  }
  .field input::placeholder, .field textarea::placeholder { color: var(--ink-400); }
  .field input:hover, .field textarea:hover { border-color: var(--ink-400); }
  .field .validation-message { font-size: 13px; color: var(--error); font-weight: 500; }
  .field:has(.validation-message) input,
  .field:has(.validation-message) textarea { border-color: var(--error); }

  .notice { border-radius: var(--radius); padding: var(--s-3) var(--s-4); border-left: 3px solid; }
  .notice h2, .notice h3 { font-size: var(--heading-3); margin-bottom: var(--s-1); }
  .notice--success { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 7%, var(--surface)); }
  .notice--error { border-color: var(--error); background: color-mix(in srgb, var(--error) 7%, var(--surface)); }
  .notice ul { margin-top: var(--s-1); padding-inline-start: 1.2rem; }
  .notice a { color: inherit; }

  /* Honeypot: off-screen rather than display:none, which some bots skip. */
  .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  /* --- Site footer ----------------------------------------------------- */
  .site-footer { background: var(--navy-800); color: var(--on-navy-body); font-size: var(--small); }
  .site-footer__inner { padding-block: var(--s-7) var(--s-5); }
  .site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: var(--s-6) var(--s-6);
    align-items: start;
  }
  .site-footer h2 {
    font-family: var(--font-text);
    font-size: var(--eyebrow);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--signal-lift);
    margin-bottom: var(--s-2);
  }
  .site-footer__col { display: flex; flex-direction: column; gap: 14px; }
  .site-footer a { color: var(--on-navy-body); text-decoration: none; }
  .site-footer a:hover { color: var(--on-navy); }
  /* No reversed logo exists yet, so the mark sits on a white plate. */
  .site-footer__plate {
    display: inline-flex;
    background: var(--surface);
    padding: 10px 12px;
    border-radius: var(--radius);
    width: fit-content;
  }
  .site-footer__plate img { height: 50px; width: auto; }
  .site-footer__blurb { color: var(--on-navy-muted); line-height: 1.65; max-width: 32ch; }
  .site-footer address { font-style: normal; }
  .site-footer__phone { color: var(--on-navy); font-weight: 500; }
  .site-footer__phone:hover { color: var(--signal-lift); }
  .site-footer__base {
    margin-top: var(--s-7);
    padding-top: var(--s-4);
    border-top: 1px solid var(--rule-on-navy);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-5);
    align-items: baseline;
    justify-content: space-between;
    font-size: 13px;
    color: var(--on-navy-finest);
  }
  .site-footer__base a { color: var(--on-navy-finest); }
  .site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-4); }
}

@layer utilities {
  .visually-hidden:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .text-muted { color: var(--ink-400); }
  .flow > * + * { margin-block-start: var(--s-3); }
  .flow-lg > * + * { margin-block-start: var(--s-5); }
}

@layer components {
  /* --- Pipeline (ConnectiX architecture) -------------------------------- */
  .pipeline {
    display: grid;
    gap: var(--s-2);
    /* Six stages across a 1240px container once the gaps are taken out. A wider
       track wraps to 5 + 1, which reads as a broken sequence rather than a flow. */
    grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr));
    counter-reset: stage;
  }
  .pipeline li {
    counter-increment: stage;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: var(--s-3);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
  }
  .pipeline li::before {
    content: counter(stage, decimal-leading-zero);
    font-size: var(--eyebrow);
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--signal-ink);
    font-variant-numeric: tabular-nums;
  }
  .pipeline h3 { font-size: 1.0625rem; }
  .pipeline p { font-size: var(--small); color: var(--ink-400); }
  .pipeline svg { color: var(--navy-600); }

  /* The Command Centre is the platform itself, so it carries the navy field. */
  .pipeline li.is-platform {
    background: var(--navy-800);
    border-color: var(--navy-800);
  }
  .pipeline li.is-platform h3 { color: var(--on-navy); }
  .pipeline li.is-platform p { color: var(--on-navy-muted); }
  .pipeline li.is-platform svg { color: var(--signal-lift); }
  .pipeline li.is-platform::before { color: var(--signal-lift); }

  /* A dashed outline marks the stage that sits in the customer's estate. */
  .pipeline li.is-external { border-style: dashed; border-color: #9FB8CE; }
}

@layer components {
  /* The diamond as a quote mark sits above the quote, not inline in text. */
  .quote__mark.diamond {
    margin: 0;
    width: 10px;
    height: 10px;
    background: var(--signal);
  }
}

@layer utilities {
  .rounded { border-radius: var(--radius); }
}

@layer layout {
  /* The brand-blue field, used for closing calls to action. */
  .field-brand { background: var(--navy-600); color: var(--on-navy-body); }
  :is(.field-brand) :is(h1, h2, h3) { color: var(--on-navy); }
  :is(.field-brand) strong { color: var(--on-navy); }
  :is(.field-brand) a:not(.btn) { color: var(--on-navy); }
  :is(.field-brand) a:not(.btn):hover { color: var(--signal-lift); }
  :is(.field-brand) .eyebrow { color: var(--signal-lift); }
  :is(.field-brand) .lead { color: var(--on-navy-body); }
  :is(.field-brand) .section-head { border-top-color: var(--rule-on-navy); }

  /* A photograph used as a field wash rather than as content. The images the
     design supplies are pre-faded for exactly this, not for inline display. */
  .wash { position: relative; overflow: hidden; isolation: isolate; }
  .wash > picture > img,
  .wash > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .wash > .container { position: relative; z-index: 1; }
  /* The design specifies 0.4 here, but the photograph it supplies is near-white
     (mean rgb 241,241,239), so at 0.4 it lifts the navy field to rgb(98,123,144)
     and body ink drops to 2.9:1, failing AA. At 0.10 the field stays at
     rgb(29,66,98): body ink 7.1:1 and the signal eyebrow 5.0:1, both passing. */
  .wash--subtle > picture > img { opacity: 0.1; filter: grayscale(0.7) contrast(1.05); }

  /* The faintest ink is not legible over a wash, so lift it to body weight. */
  .wash .outcome__source,
  .wash .stat__note { color: var(--on-navy-body); }
}

@layer components {
  /* Defensive: a card on a navy field must not inherit white ink on white paper. */
  :is(.field-navy, .field-brand) .card {
    background: rgb(255 255 255 / 0.06);
    border-color: var(--rule-on-navy);
  }
  :is(.field-navy, .field-brand) .card p { color: var(--on-navy-body); }
  :is(.field-navy, .field-brand) .card__tag { color: var(--on-navy-finest); }
  :is(.field-navy, .field-brand) .card__icon { color: var(--signal-lift); }
}

@layer components {
  /* The form follows its heading directly; give the heading room to breathe. */
  .form { margin-top: var(--s-4); }
}

@layer layout {
  /* Legal pages: a sticky contents rail beside the measure. */
  .document {
    display: grid;
    gap: var(--s-6);
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    align-items: start;
  }
  @media (min-width: 64rem) {
    .document { grid-template-columns: 260px minmax(0, 1fr); }
  }
}

@layer components {
  .doc-nav {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    font-family: var(--font-text);
    font-size: var(--small);
  }
  @media (min-width: 64rem) {
    .doc-nav { position: sticky; top: calc(var(--header-height) + var(--s-4)); }
  }
  .doc-nav ul { display: flex; flex-direction: column; gap: var(--s-1); }
  .doc-nav a { color: var(--ink-500); text-decoration: none; display: block; line-height: 1.4; }
  .doc-nav a:hover { color: var(--navy-600); }
  .doc-nav__meta { border-top: 1px solid var(--rule); padding-top: var(--s-3); }
  .doc-nav__pending { color: var(--ink-400); font-style: italic; }
}

@layer components {
  /* A list that keeps its markers, used where bullets carry meaning but the
     surrounding block is not running prose. */
  .marker-list { padding-inline-start: 1.15rem; list-style: disc; }
  .marker-list li { margin-block-start: var(--s-1); }

  /* Use-case tiles: a label and an icon, no body copy. A tighter track than the
     default card grid, so seven items land 4 + 3 rather than 3 + 3 + 1. */
  .use-cases { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
  .use-cases h3 { font-size: 1rem; }
  .use-cases .card { gap: var(--s-1); }
}

@layer components {
  /* --- Promoted claim ---------------------------------------------------
     One point lifted out of a grid onto a navy panel. The onshore service desk
     is the strongest differentiator on the site and read as one of nine equal
     cards before this. */
  .feature-panel {
    display: grid;
    gap: var(--s-5);
    grid-template-columns: minmax(0, 1fr);
    background: var(--navy-800);
    border-radius: var(--radius);
    padding: var(--s-5);
    margin-bottom: var(--s-4);
  }
  @media (min-width: 62rem) {
    .feature-panel { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  }
  .feature-panel h3 {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    line-height: 1.16;
    letter-spacing: -0.018em;
    color: var(--on-navy);
    margin-bottom: var(--s-2);
  }
  .feature-panel p { color: var(--on-navy-body); }
  .feature-panel__points { display: flex; flex-direction: column; gap: var(--s-4); }
  .feature-panel__points dt {
    font-family: var(--font-text);
    font-size: var(--eyebrow);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--signal-lift);
    margin-bottom: var(--s-1);
  }
  .feature-panel__points dd { margin: 0; color: var(--on-navy-body); font-size: var(--small); }

  /* --- Check list -------------------------------------------------------
     For options that are too long to sit in a pill without cramping. */
  .check-list { display: flex; flex-direction: column; gap: var(--s-2); }
  .check-list li { display: flex; gap: var(--s-2); align-items: flex-start; }
  .check-list svg { color: var(--signal-ink); margin-top: 3px; flex-shrink: 0; }

  /* --- Callout ----------------------------------------------------------- */
  .callout {
    border: 1px solid #CFDEEC;
    border-left: 3px solid var(--signal);
    border-radius: var(--radius);
    padding: var(--s-4);
    background: var(--surface);
  }
  .callout > :last-child { margin-bottom: 0; }

  /* --- Cloud service tiles ----------------------------------------------- */
  .cloud-services { grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr)); }
  .cloud-services .abbr {
    font-family: var(--font-text);
    font-size: var(--eyebrow);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--signal-ink);
    margin-bottom: var(--s-1);
  }
  .cloud-services h3 { font-size: 1.0625rem; }

  /* Four pillars, so four or two across rather than three and a stray one. */
  .pillars { grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr)); }
}

@layer components {
  /* The enquiry form sits in a card with a brand rule along the top, so it reads
     as a distinct object rather than fields floating on the page. */
  .form-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-top: 2px solid var(--navy-600);
    border-radius: var(--radius);
    padding: clamp(28px, 3.2vw, 40px);
  }
  .form-card > h2 { margin-bottom: var(--s-3); }
  .form-card .form { margin-top: 0; max-width: none; }
}

@layer layout {
  /* Contact details against the enquiry form: the details are short, especially
     with phone numbers hidden, so the form takes the larger share. */
  @media (min-width: 62rem) {
    .split--form { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  }
}