/* ==========================================================================
   IMS Services — shell, grid and section rhythm

   Section vertical padding is owned ENTIRELY by .ims-section here. No
   component sets its own top/bottom section padding, which is what stops
   the classic problem of two rules quietly cancelling each other out.
   ========================================================================== */

.ims-shell {
  width: 100%;
  max-width: var(--ims-shell);
  margin-inline: auto;
  padding-inline: var(--ims-gutter);
}

.ims-shell--narrow { max-width: var(--ims-shell-narrow); }
.ims-shell--wide   { max-width: var(--ims-shell-wide); }

/* ---- Sections ---------------------------------------------------------- */

.ims-section {
  padding-block: var(--ims-section-y);
  position: relative;
}

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

.ims-section--alt  { background-color: var(--ims-bg-alt); }

/* Dark punctuation. Used sparingly: hero, security, closing call to action.
   The site is light by default and goes dark only where it means something. */
.ims-section--deep {
  background-color: var(--ims-navy-950);
  color: var(--ims-on-dark);
  position: relative;
  overflow: hidden;
}

/* The same node field as the hero, so every dark surface on the site reads as
   one material rather than three separate blocks of navy. */
.ims-section--deep::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%, rgba(3, 134, 158, 0.22), transparent 62%),
    radial-gradient(circle, rgba(143, 227, 226, 0.11) 1px, transparent 1.5px);
  background-size: 100% 100%, 30px 30px;
  pointer-events: none;
}

.ims-section--deep > * { position: relative; }

/* ---- Section headers --------------------------------------------------- */

.ims-section__head {
  max-width: 46rem;
  margin-bottom: var(--ims-sp-8);
}

.ims-section__head--centre {
  margin-inline: auto;
  text-align: center;
}

.ims-section__head > * + * { margin-top: var(--ims-sp-4); }

.ims-section__lead {
  font-size: var(--ims-fs-lead);
  line-height: var(--ims-lh-normal);
  color: var(--ims-text-mid);
  max-width: 58ch;
}

.ims-section__head--centre .ims-section__lead { margin-inline: auto; }

/* ---- Eyebrow ----------------------------------------------------------
   The mono voice. Used for labels that annotate rather than speak: location,
   section index, technical captions. It is the "instrumentation" register.
   ---------------------------------------------------------------------- */

.ims-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ims-sp-2);
  font-family: var(--ims-font-mono);
  font-size: var(--ims-fs-label);
  font-weight: 500;
  letter-spacing: var(--ims-ls-label);
  text-transform: uppercase;
  color: var(--ims-accent);
  margin: 0;
}

.ims-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background-color: currentColor;
  opacity: 0.55;
  flex: none;
}

.ims-eyebrow--plain::before { display: none; }

/* ---- Grid -------------------------------------------------------------- */

.ims-grid {
  display: grid;
  gap: var(--ims-sp-6);
}

.ims-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.ims-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.ims-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* Asymmetric split used for hero and feature bands. Collapses at 60rem. */
.ims-split {
  display: grid;
  gap: clamp(var(--ims-sp-7), 5vw, var(--ims-sp-10));
  align-items: center;
}

@media (min-width: 60rem) {
  .ims-split            { grid-template-columns: 1.05fr 0.95fr; }
  .ims-split--wide-left { grid-template-columns: 1.35fr 0.65fr; }
  .ims-split--wide-right{ grid-template-columns: 0.65fr 1.35fr; }
}

/* ---- Flow: vertical rhythm inside a block ------------------------------ */

.ims-flow > * + * { margin-top: var(--ims-sp-4); }
.ims-flow--tight > * + * { margin-top: var(--ims-sp-3); }
.ims-flow--loose > * + * { margin-top: var(--ims-sp-6); }

/* ---- Skip link --------------------------------------------------------- */

.ims-skip-link {
  position: absolute;
  top: 0;
  left: var(--ims-sp-4);
  z-index: var(--ims-z-modal);
  transform: translateY(-120%);
  background-color: var(--ims-navy-950);
  color: var(--ims-on-dark);
  padding: var(--ims-sp-3) var(--ims-sp-5);
  border-radius: 0 0 var(--ims-r-sm) var(--ims-r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--ims-dur-base) var(--ims-ease-out);
}

.ims-skip-link:focus { transform: translateY(0); }

/* ---- Page shell -------------------------------------------------------- */

.ims-site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.ims-main { flex: 1 0 auto; }