/* =====================================================================
   NORTHERN EDGE — sections
   Section layouts in page order. Every section takes a different
   structural form; nothing here is a card grid.
   ===================================================================== */

/* ================================================================== HERO
   Full-bleed slider. The bottom edge is cut on the brand diagonal so the
   marquee sitting 40px behind it shows through the gap — the page's first
   piece of layering.
   ==================================================================== */
.ne-hero {
  position: relative;
  z-index: 1;
  /* Height of the fixed head stack this hero has to clear. */
  --ne-stack: calc(var(--ne-hazard-h) + var(--ne-header-h));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ne-cut)), 0 100%);
}

@media (min-width: 992px) {
  .ne-hero {
    --ne-stack: calc(var(--ne-hazard-h) + var(--ne-topbar-h) + var(--ne-header-h));
  }
}

.ne-hero__swiper {
  height: 88svh;
}

@media (min-width: 992px) {
  .ne-hero__swiper {
    height: min(100svh, 900px);
  }
}

.ne-slide {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-top: calc(var(--ne-stack) + 60px);
  /* Room for the slider UI pinned across the bottom. */
  padding-bottom: clamp(104px, 15vh, 176px);
  background-color: var(--ne-ink);
}

.ne-slide__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ne-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keeps the machine right of centre, clear of the headline. */
  object-position: 68% 50%;
}

/* Guarantees text contrast rather than trusting the photograph. */
.ne-slide__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg,
      var(--ne-ink) 2%,
      color-mix(in srgb, var(--ne-ink) 82%, transparent) 42%,
      color-mix(in srgb, var(--ne-ink) 14%, transparent) 80%),
    linear-gradient(to top, var(--ne-ink) 1%, transparent 44%);
}

.ne-slide__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.ne-slide__col {
  grid-column: 1 / -1;
}

@media (min-width: 992px) {
  .ne-slide__col {
    grid-column: 1 / span 8;
    max-width: 840px;
  }
}

.ne-slide__title {
  margin-top: 0;
}

.ne-slide__col .ne-lead {
  margin-top: var(--ne-space-5);
}

/* Below 700px the hero grows with its content instead of being pinned to a
   fraction of the viewport. On a 320x650 screen the eyebrow, a three-line H1,
   the lead, two stacked buttons and the reassurance line need more room than
   88svh leaves once the header and the slider controls are subtracted — and
   because the slide aligned its content to the BOTTOM, the overflow went
   upwards and the headline ended up behind the header.

   height: auto works here because the wrapper is a flex row: every slide
   takes the height of the tallest, so the fade effect still cross-fades
   between boxes of matching height.

   This block sits after the base .ne-slide rule on purpose. Same
   specificity, so position in the file is what decides it. */
@media (max-width: 699.98px) {
  .ne-hero__swiper {
    height: auto;
  }

  .ne-slide {
    align-items: flex-start;
    min-height: 82svh;
    padding-top: calc(var(--ne-stack) + 28px);
    /* Clears the bars and arrows pinned across the bottom. */
    padding-bottom: 120px;
  }

  /* The controls spread across the full width instead of bunching in the
     right corner, where they crowded the reassurance line and pushed past
     the fold: previous on the left, next on the right, the slide bars
     centred between them, everything a size down.

     Flex order does the rearranging — the markup keeps the bars first, so
     they stay the first thing a keyboard reaches. */
  .ne-hero__ui-inner {
    justify-content: stretch;
  }

  .ne-hero__nav {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .ne-hero__bars {
    order: 2;
    margin-right: 0;
    gap: 8px;
  }

  .ne-hero__arrow--prev {
    order: 1;
  }

  .ne-hero__arrow--next {
    order: 3;
  }

  .ne-hero__arrow {
    width: 42px;
    height: 42px;
  }

  .ne-hero__arrow .ne-icon {
    width: 20px;
    height: 20px;
  }

  .ne-hero__bar {
    height: 14px;
  }

  .ne-hero__bar.is-active {
    height: 22px;
  }
}

/* ------------------------------------------------------------- HERO UI
   Relocated 3 vertical bars bottom-right next to arrows, shifted upward. */
.ne-hero__ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(60px, 8.5vh, 96px);
  z-index: 4;
}

.ne-hero__ui-inner {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--ne-space-5);
}

.ne-hero__bars {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
}

.ne-hero__bar {
  position: relative;
  width: 3px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background-color: color-mix(in srgb, var(--ne-white) 32%, transparent);
  cursor: pointer;
  outline-offset: 6px;
  transition: height 200ms var(--ne-ease), background-color 200ms var(--ne-ease);
}

.ne-hero__bar::before {
  content: "";
  position: absolute;
  inset: -10px -6px;
}

.ne-hero__bar-fill {
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  background-color: var(--ne-amber);
  transform: scaleY(0);
  transform-origin: top;
}

.ne-hero__bar.is-active {
  height: 28px;
  background-color: var(--ne-amber);
}

.ne-hero__nav {
  display: flex;
  align-items: center;
  gap: var(--ne-space-4);
}

.ne-hero__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ne-white) 26%, transparent);
  background-color: transparent;
  color: var(--ne-white);
  cursor: pointer;
  transition: color 150ms var(--ne-ease), border-color 150ms var(--ne-ease),
    background-color 150ms var(--ne-ease);
}

.ne-hero__arrow:hover {
  color: var(--ne-ink);
  background-color: var(--ne-amber);
  border-color: var(--ne-amber);
}

/* Scroll cue on the right edge — clear of the counter in the corner. */
.ne-hero__scroll {
  position: absolute;
  right: clamp(16px, 2.4vw, 40px);
  bottom: 30%;
  z-index: 4;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--ne-space-4);
  transition: opacity var(--ne-dur) var(--ne-ease);
}

@media (min-width: 992px) {
  .ne-hero__scroll {
    display: flex;
  }
}

.ne-hero__scroll-word {
  writing-mode: vertical-rl;
  font-family: var(--ne-font-utility);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ne-white) 62%, transparent);
}

.ne-hero__scroll-line {
  position: relative;
  width: 1px;
  height: 40px;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--ne-white) 22%, transparent);
}

.ne-hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background-color: var(--ne-amber);
  animation: ne-scroll-cue 1800ms var(--ne-ease-power2) infinite;
}

@keyframes ne-scroll-cue {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(250%);
  }
}

/* ============================================================== MARQUEE
   Pulled up behind the hero's diagonal. Driven by a GSAP xPercent tween so
   its speed can be scrubbed by scroll velocity; with JavaScript off it is a
   static row of service words, which is still legible and still true. */
.ne-marquee {
  position: relative;
  z-index: 0;
  margin-top: -40px;
  padding-top: 40px;
  overflow: hidden;
  background-color: var(--ne-graphite);
  border-bottom: 1px solid var(--ne-steel);
}

.ne-marquee__track {
  display: flex;
  width: max-content;
  height: 64px;
  align-items: center;
}

.ne-marquee__run,
.ne-marquee__cell {
  display: flex;
  align-items: center;
  gap: 30px;
  padding-right: 30px;
}

/* Outlined display type: light enough to read as texture, strong enough not
   to look like a rendering fault. */
.ne-marquee__item {
  font-family: var(--ne-font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  text-transform: uppercase;
  letter-spacing: var(--ne-ls-heading);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}

/* Amber diamond separators. */
.ne-marquee__dot {
  width: 8px;
  height: 8px;
  flex: none;
  background-color: var(--ne-amber);
  transform: rotate(45deg);
}

/* ========================================================= SERVICES BENTO
   Asymmetric image tiles. No white cards, no padding frames, no borders —
   every tile is a photograph with an ink gradient rising from its lower
   half, and exactly one action.
   ==================================================================== */
.ne-bento {
  display: grid;
  gap: var(--ne-space-4);
  grid-auto-rows: minmax(300px, auto);
}

@media (min-width: 700px) {
  .ne-bento {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1080px) {
  .ne-bento {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(268px, auto);
    gap: var(--ne-space-5);
  }

  /* Groundworks and delivery split the lower row evenly. Delivery used to
     get two columns against groundworks' three, which left its title, line
     and link crammed into a box too narrow to hold them. */
  .ne-tile--feature {
    grid-column: 1 / 7;
    grid-row: 1 / 3;
  }

  .ne-tile--b {
    grid-column: 7 / 13;
    grid-row: 1;
  }

  .ne-tile--c {
    grid-column: 7 / 10;
    grid-row: 2;
  }

  .ne-tile--d {
    grid-column: 10 / 13;
    grid-row: 2;
  }
}

.ne-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  text-decoration: none;
  color: var(--ne-white);
  background-color: var(--ne-graphite);
  isolation: isolate;
}

.ne-tile__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.ne-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ne-dur-slow) var(--ne-ease-power2);
}

.ne-tile:hover .ne-tile__media img,
.ne-tile:focus-visible .ne-tile__media img {
  transform: scale(1.05);
}

/* Strong dark overlay scrim for crisp copy legibility on any photograph. */
.ne-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
      rgba(11, 11, 12, 0.98) 0%,
      rgba(11, 11, 12, 0.82) 45%,
      rgba(11, 11, 12, 0.45) 100%);
  opacity: 0.94;
  transition: opacity var(--ne-dur) var(--ne-ease);
}

.ne-tile:hover::before,
.ne-tile:focus-visible::before {
  opacity: 1;
}

/* 2px amber bar grows up the left edge. No shadow, no lift. */
.ne-tile::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--ne-amber);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--ne-dur) var(--ne-ease);
}

.ne-tile:hover::after,
.ne-tile:focus-visible::after {
  transform: scaleY(1);
}

.ne-tile__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.2vw, 30px);
  width: 100%;
}

.ne-tile__n {
  font-family: var(--ne-font-utility);
  font-weight: 600;
  font-size: var(--ne-fs-label);
  letter-spacing: var(--ne-ls-label);
  color: var(--ne-amber);
}

/* A tile title ranks under the section heading that introduces it: PLANT
   HIRE cannot be larger than WHAT WE DO. */
.ne-tile__title {
  font-family: var(--ne-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1;
  letter-spacing: var(--ne-ls-display);
  transition: transform var(--ne-dur) var(--ne-ease);
}

.ne-tile__title--lg {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.ne-tile:hover .ne-tile__title,
.ne-tile:focus-visible .ne-tile__title {
  transform: translateX(4px);
}

.ne-tile__line {
  color: color-mix(in srgb, var(--ne-white) 72%, transparent);
  max-width: 42ch;
}

/* The tile's single action. A span, not an anchor — the whole tile is
   already the link and an anchor cannot hold anchors. */
.ne-tile__go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: var(--ne-space-2);
  font-family: var(--ne-font-utility);
  font-weight: 600;
  font-size: var(--ne-fs-label);
  letter-spacing: var(--ne-ls-label);
  text-transform: uppercase;
  color: var(--ne-amber);
}

.ne-tile__go .ne-icon {
  transition: transform var(--ne-dur) var(--ne-ease);
}

.ne-tile:hover .ne-tile__go .ne-icon,
.ne-tile:focus-visible .ne-tile__go .ne-icon {
  transform: translate(3px, -3px);
}

/* ================================================================ FLEET
   The photograph bleeds off the outer page edge and the data plate overlaps
   it. The overlap is what makes this read as designed rather than
   assembled — nothing else on the page crosses a boundary like this.
   ==================================================================== */
/* ============================================================== FLEET (Option A: Side-by-Side Cards Grid) */
.ne-fleet-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ne-space-6);
}

@media (min-width: 992px) {
  .ne-fleet-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ne-space-7);
  }
}

.ne-fleet-card {
  display: flex;
  flex-direction: column;
  background-color: var(--ne-ink);
  border: 1px solid var(--ne-steel);
  border-top: 3px solid var(--ne-amber);
  transition: border-color var(--ne-dur) var(--ne-ease), transform var(--ne-dur) var(--ne-ease);
}

.ne-fleet-card:hover {
  border-color: var(--ne-amber);
}

.ne-fleet-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 260px;
  overflow: hidden;
  background-color: var(--ne-graphite);
}

.ne-fleet-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform var(--ne-dur-slow) var(--ne-ease-power2);
}

.ne-fleet-card:hover .ne-fleet-card__media img {
  transform: scale(1.04);
}

.ne-fleet-card__chip {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 12px;
  background-color: rgba(11, 11, 12, 0.88);
  border: 1px solid var(--ne-amber);
  font-family: var(--ne-font-utility);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: var(--ne-ls-label);
  text-transform: uppercase;
  color: var(--ne-white);
}

.ne-fleet-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: clamp(20px, 2.5vw, 32px);
}

.ne-fleet-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ne-space-3);
}

.ne-fleet-card__title {
  font-family: var(--ne-font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  text-transform: uppercase;
  margin-top: 4px;
  color: var(--ne-white);
}

.ne-fleet-card__ton {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--ne-font-display);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--ne-amber);
}

.ne-fleet-card__ton-u {
  font-size: 0.35em;
  color: var(--ne-amber-deep);
}

.ne-btn--full {
  width: 100%;
  justify-content: center;
}

/* ============================================================== PROCESS
   Numbered rows with an amber line drawing down the left edge on scroll,
   each index flipping to amber as the line passes it.
   ==================================================================== */
.ne-steps {
  position: relative;
  min-width: 0;
  padding-left: clamp(20px, 3vw, 40px);
}

.ne-steps__line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--ne-rule);
}

.ne-steps__line-fill {
  position: absolute;
  inset: 0;
  background-color: var(--ne-amber);
  transform: scaleY(0);
  transform-origin: top;
}

.ne-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ne-space-5);
  align-items: baseline;
  padding-block: clamp(26px, 3.4vw, 44px);
  border-bottom: 1px solid var(--ne-rule);
}

.ne-step__body {
  min-width: 0;
}

.ne-step:first-of-type {
  padding-top: 0;
}

.ne-step__n {
  font-family: var(--ne-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1;
  color: var(--ne-fg-soft);
  transition: color var(--ne-dur) var(--ne-ease);
}

.ne-step.is-lit .ne-step__n {
  color: var(--ne-amber);
}

.ne-step__body>.ne-h3 {
  margin-bottom: var(--ne-space-3);
}

/* ====================================================== EVERY HIRE INCLUDES
   The brightest moment on the page. The oversized numeral overlaps its own
   heading — layering, not alignment.
   ==================================================================== */
.ne-incl {
  display: grid;
  gap: var(--ne-space-8);
  align-items: start;
}

@media (min-width: 992px) {
  .ne-incl {
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(48px, 6vw, 104px);
  }
}

.ne-incl__numeral {
  font-family: var(--ne-font-display);
  font-weight: 700;
  font-size: var(--ne-fs-numeral);
  line-height: 0.76;
  letter-spacing: -0.05em;
  color: var(--ne-amber);
  /* Pulls the heading up into the numeral's shoulder. */
  margin-bottom: -0.14em;
}

.ne-incl__plate {
  /* Lifts the plate off the heading's baseline so the pair reads as two
     columns rather than one long stack on desktop. */
  padding-top: var(--ne-space-3);
}

/* ---------------------------------------------------------------- STATS */
.ne-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--ne-space-9);
  border-top: 1px solid var(--ne-rule);
}

/* Introduced by a chip, the row belongs to it and sits close. */
.ne-chip-row+.ne-stats {
  margin-top: var(--ne-space-5);
}

@media (min-width: 900px) {
  .ne-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ne-stat {
  padding: var(--ne-space-6) var(--ne-space-5) var(--ne-space-6) 0;
  border-bottom: 1px solid var(--ne-rule);
}

@media (min-width: 900px) {
  .ne-stat+.ne-stat {
    border-left: 1px solid var(--ne-rule);
    padding-left: var(--ne-space-6);
  }
}

.ne-stat__n {
  font-family: var(--ne-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1;
  letter-spacing: var(--ne-ls-display);
  color: var(--ne-accent);
}

.ne-stat__k {
  margin-top: var(--ne-space-4);
  font-family: var(--ne-font-utility);
  font-weight: 500;
  font-size: var(--ne-fs-label);
  letter-spacing: var(--ne-ls-label);
  text-transform: uppercase;
  color: var(--ne-fg-soft);
}

@media (max-width: 991.98px) {}

/* ------------------------------------------------------ RIDGE WATERMARK */
.ne-ridge {
  position: absolute;
  z-index: 1;
  bottom: -6%;
  right: -8%;
  width: min(1100px, 120%);
  color: var(--ne-white);
  opacity: 0.05;
  fill: currentColor;
  stroke: none;
  pointer-events: none;
}

.ne-section--amber .ne-ridge {
  color: var(--ne-ink);
  opacity: 0.07;
}

/* ============================================================= COVERAGE */

/* A list of places, and nothing more. These were buttons inherited from the
   interactive GB map this build no longer carries: they showed a pointer
   cursor and lit up on hover while doing absolutely nothing on click. */
.ne-areas {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ne-rule);
}
.ne-area {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ne-space-4);
  width: 100%;
  padding: clamp(12px, 1.5vw, 16px) 0;
  border-bottom: 1px solid var(--ne-rule);
  color: inherit;
}
.ne-area__name {
  font-family: var(--ne-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  line-height: 1.15;
  letter-spacing: var(--ne-ls-heading);
}
.ne-area .ne-icon {
  color: var(--ne-accent);
}

/* ================================================================== FAQ */
.ne-faq {
  border-top: 1px solid var(--ne-rule);
}

.ne-faq__item {
  border-bottom: 1px solid var(--ne-rule);
}

/* The <h3> is structural only — the button inside carries the styling. */
.ne-faq__h {
  margin: 0;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.ne-faq__q {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--ne-space-4);
  width: 100%;
  padding: var(--ne-space-6) 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: color var(--ne-dur-fast) var(--ne-ease);
}

@media (min-width: 768px) {
  .ne-faq__q {
    gap: var(--ne-space-6);
  }
}

.ne-faq__q:hover,
.ne-faq__q[aria-expanded="true"] {
  color: var(--ne-accent);
}

.ne-faq__n {
  font-family: var(--ne-font-utility);
  font-weight: 600;
  font-size: var(--ne-fs-label);
  letter-spacing: var(--ne-ls-label);
  color: var(--ne-accent);
}

.ne-faq__label {
  font-family: var(--ne-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.125rem, 2vw, 1.6rem);
  line-height: 1.12;
  letter-spacing: var(--ne-ls-heading);
}

.ne-faq__sign {
  display: inline-flex;
  flex: none;
}

.ne-faq__sign .ne-icon {
  transition: transform var(--ne-dur) var(--ne-ease-power2);
}

.ne-faq__q[aria-expanded="true"] .ne-faq__sign .ne-icon {
  transform: rotate(45deg);
}

/* Heights are animated by GSAP. The panel ships open so every answer is
   readable with JavaScript off; main.js collapses all but the first. */
.ne-faq__a {
  overflow: hidden;
}

.ne-faq__a.is-collapsed {
  visibility: hidden;
}

.ne-faq__a>p {
  max-width: 62ch;
  padding-bottom: var(--ne-space-6);
}

@media (min-width: 768px) {
  .ne-faq__a>p {
    /* Lines up under the question, clear of the index column. */
    padding-left: calc(2.5ch + var(--ne-space-6));
  }
}

.ne-faq__foot {
  margin-top: var(--ne-space-7);
}

.ne-faq__foot a {
  color: var(--ne-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* ================================================================== CTA
   Ink on amber throughout: white fails contrast here. The heading and the
   phone number are given real separation — they collided in the last build.
   ==================================================================== */
.ne-cta {
  overflow: hidden;
}

.ne-cta__inner {
  display: grid;
  gap: var(--ne-space-9);
  align-items: center;
}

@media (min-width: 992px) {
  .ne-cta__inner {
    grid-template-columns: 1fr auto;
    gap: clamp(80px, 8vw, 148px);
  }
}

.ne-cta__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ne-cta__tel {
  display: inline-block;
  font-family: var(--ne-font-display);
  font-weight: 700;
  font-size: var(--ne-fs-tel);
  line-height: 1;
  letter-spacing: var(--ne-ls-display);
  color: var(--ne-ink);
  text-decoration: none;
  transition: opacity 150ms var(--ne-ease);
}

.ne-cta__tel:hover {
  opacity: 0.72;
}

.ne-cta__status {
  margin-top: var(--ne-space-4);
}

/* ========================================================= LEGAL PROSE
   Retained for the privacy, cookie and terms pages. */
/* .ne-legal {
  max-width: 68ch;
} */
.ne-legal h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-top: var(--ne-space-8);
  margin-bottom: var(--ne-space-4);
}

.ne-legal h2:first-child {
  margin-top: 0;
}

.ne-legal h3 {
  font-size: 1.25rem;
  margin-top: var(--ne-space-6);
  margin-bottom: var(--ne-space-3);
}

.ne-legal p+p {
  margin-top: var(--ne-space-4);
}

.ne-legal ul {
  margin: var(--ne-space-4) 0 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

/* ================================== LEGACY SECTION PIECES (other pages)
   Structures the ten un-rebuilt pages still use. They read the contrast
   contract, so they follow their surface correctly. Delete with the
   propagation pass.
   ==================================================================== */
.ne-specplate {
  margin-top: var(--ne-space-6);
  border: 1px solid var(--ne-rule);
  background-color: var(--ne-graphite);
  color: var(--ne-white);
}

.ne-section--light .ne-specplate {
  background-color: var(--ne-white);
  color: var(--ne-ink);
}

.ne-specplate__row {
  display: flex;
  justify-content: space-between;
  gap: var(--ne-space-4);
  padding: 9px 16px;
  border-bottom: 1px solid var(--ne-rule);
}

.ne-specplate__row:last-child {
  border-bottom: 0;
}

.ne-specplate__k {
  font-family: var(--ne-font-utility);
  font-weight: 500;
  font-size: var(--ne-fs-label);
  letter-spacing: var(--ne-ls-label);
  text-transform: uppercase;
  color: var(--ne-mute);
}

.ne-section--light .ne-specplate__k {
  color: var(--ne-mute-ink);
}

.ne-specplate__v {
  font-family: var(--ne-font-utility);
  font-weight: 600;
  font-size: 0.875rem;
  text-align: right;
}

.ne-specplate__v a {
  text-decoration: none;
}

.ne-specnote {
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--ne-fg-soft);
}

.ne-numeral {
  font-family: var(--ne-font-display);
  font-weight: 700;
  font-size: var(--ne-fs-numeral);
  line-height: 0.8;
  color: var(--ne-accent);
}

@media (min-width: 768px) {}

.ne-rows {
  border-top: 1px solid var(--ne-rule);
}

.ne-rows__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ne-space-4);
  padding: clamp(14px, 2vw, 24px) 0;
  border-bottom: 1px solid var(--ne-rule);
}

.ne-rows__name {
  font-family: var(--ne-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.375rem, 3.2vw, 2.5rem);
  line-height: 1;
}

a.ne-rows__row {
  text-decoration: none;
  transition: color 150ms var(--ne-ease);
}

a.ne-rows__row:hover {
  color: var(--ne-accent);
}

.ne-hero--compact {
  min-height: 55vh;
}

.ne-hero__media {
  position: absolute;
  inset: -6% 0;
  z-index: 0;
}

.ne-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}

.ne-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg,
      var(--ne-ink) 4%,
      color-mix(in srgb, var(--ne-ink) 82%, transparent) 42%,
      color-mix(in srgb, var(--ne-ink) 12%, transparent) 78%),
    linear-gradient(to top, var(--ne-ink) 2%, transparent 40%);
}

.ne-hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.ne-hero__col {
  grid-column: 1 / -1;
}

@media (min-width: 992px) {
  .ne-hero__col {
    grid-column: 1 / span 7;
  }
}

/* The un-rebuilt pages use .ne-hero without a slider, so they need the
   padding the slide would otherwise carry. */
.ne-hero:not(:has(.ne-hero__swiper)) {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--ne-ink);
  color: var(--ne-white);
  clip-path: none;
  padding-top: calc(var(--ne-hazard-h) + var(--ne-header-h) + 56px);
  padding-bottom: clamp(64px, 10vw, 140px);
  min-height: 62vh;
}

@media (min-width: 992px) {

  /* Clears the utility bar too. */
  .ne-hero:not(:has(.ne-hero__swiper)) {
    padding-top: calc(var(--ne-hazard-h) + var(--ne-topbar-h) + var(--ne-header-h) + 56px);
  }
}

/* ============================================================== INTEGRATED FLEET BUCKETS & STATS */
.ne-fleet-integrated {
  margin-top: var(--ne-space-8);
  padding: clamp(24px, 3.5vw, 48px);
  background-color: var(--ne-ink);
  border: 1px solid var(--ne-steel);
  border-left: 4px solid var(--ne-amber);
}

.ne-fleet-integrated__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ne-space-4);
  padding-bottom: var(--ne-space-5);
  border-bottom: 1px solid var(--ne-steel);
}

.ne-fleet-integrated__title {
  font-family: var(--ne-font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  text-transform: uppercase;
  color: var(--ne-white);
}

/* ============================================================== BUILDNEST-STYLE ABOUT SECTION */
.ne-about-buildnest {
  display: grid;
  gap: var(--ne-space-8);
  align-items: stretch;
}

@media (min-width: 992px) {
  .ne-about-buildnest {
    grid-template-columns: 46% 54%;
    gap: var(--ne-space-8);
  }
}

.ne-about-media {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
}

.ne-about-media__img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--ne-steel);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.ne-about-badge {
  position: absolute;
  left: -16px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  background-color: var(--ne-ink);
  border: 2px solid var(--ne-amber);
  color: var(--ne-white);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  text-align: center;
  z-index: 2;
  min-width: 150px;
}

.ne-about-badge__num {
  font-family: var(--ne-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1;
  color: var(--ne-amber);
  margin-top: 2px;
}

.ne-about-badge__label {
  font-family: var(--ne-font-utility);
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: var(--ne-ls-label);
  text-transform: uppercase;
  color: var(--ne-mute);
  margin-top: 2px;
}

.ne-about-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--ne-space-4);
}

.ne-about-content .ne-h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  line-height: 1.12;
  max-width: 580px;
}

.ne-checklist {
  display: grid;
  gap: var(--ne-space-3);
  margin-top: var(--ne-space-3);
  margin-bottom: var(--ne-space-4);
  list-style: none;
  padding: 0;
}

.ne-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--ne-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ne-fg);
}

.ne-checklist__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--ne-amber);
  margin-top: 1px;
}

/* ============================================================== TESTIMONIALS SLIDER SECTION */
.ne-testimonials {
  position: relative;
  overflow: hidden;
}

/* Slides stretch so every card is the height of the tallest, whatever the
   quote length — Swiper leaves slides at their content height otherwise, and
   the row ended up ragged. */
.ne-testimonials__swiper {
  padding-bottom: var(--ne-space-5);
}
.ne-testimonials__swiper .swiper-wrapper {
  align-items: stretch;
}
.ne-testimonials__swiper .swiper-slide {
  height: auto;
  display: flex;
}

.ne-testimonial-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: clamp(24px, 3vw, 40px);
  background-color: var(--ne-ink);
  border: 1px solid var(--ne-steel);
  border-top: 3px solid var(--ne-amber);
  transition: border-color var(--ne-dur) var(--ne-ease);
}

.ne-testimonial-card:hover {
  border-color: var(--ne-amber);
}

.ne-testimonial-card__stars {
  display: flex;
  gap: 4px;
  color: var(--ne-amber);
  font-size: 1.1rem;
  margin-bottom: var(--ne-space-4);
}

.ne-testimonial-card__quote {
  font-family: var(--ne-font-body);
  font-weight: 500;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.6;
  color: var(--ne-fg);
  margin-bottom: var(--ne-space-6);
  flex-grow: 1;
}

.ne-testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--ne-space-4);
  padding-top: var(--ne-space-4);
  border-top: 1px solid var(--ne-steel);
}

.ne-testimonial-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--ne-amber);
  color: var(--ne-ink);
  font-family: var(--ne-font-display);
  font-weight: 700;
  font-size: 1.1rem;
  flex: none;
}

.ne-testimonial-card__name {
  font-family: var(--ne-font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ne-white);
}

.ne-testimonial-card__role {
  font-family: var(--ne-font-utility);
  font-size: 0.8125rem;
  color: var(--ne-mute);
}

/* ============================================================== COVERAGE GLOBE IMAGE */
/* The globe is a dark render on a near-black ground, so it is framed as an
   ink plate rather than dropped on the light surface as a square. Left to
   float it read as a pasted-in box; inside a hairline frame it reads as a
   panel, which is the language the rest of the page is already speaking.
   No hover transform: it is a picture, not a control. */
.ne-coverage__globe-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--ne-ink);
  border: 1px solid var(--ne-steel);
  border-top: 3px solid var(--ne-amber);
}

.ne-coverage__globe {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
}

.ne-fleet-integrated {
  margin-top: var(--ne-space-5);
  padding: clamp(20px, 3vw, 36px);
}

/* ============================================================== LIGHT SURFACE TESTIMONIALS (IMAGE 5 STYLE) */
.ne-section--light.ne-testimonials {
  background-color: #f7f7f5;
}

.ne-section--light .ne-testimonial-card {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-top: 3px solid var(--ne-amber);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.ne-section--light .ne-testimonial-card__quote {
  color: #2c2f35;
}

.ne-section--light .ne-testimonial-card__author {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.ne-section--light .ne-testimonial-card__name {
  color: #121417;
}

.ne-section--light .ne-testimonial-card__role {
  color: #6c7077;
}

@media (min-width: 992px) {}

/* ============================================================== TESTIMONIALS SWIPER PAGINATION */
.ne-testimonials .swiper-pagination {
  position: relative;
  margin-top: var(--ne-space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ne-testimonials .swiper-pagination-bullet {
  background: var(--ne-mute);
  opacity: 0.4;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: all 250ms var(--ne-ease);
  cursor: pointer;
}

.ne-testimonials .swiper-pagination-bullet-active {
  background: var(--ne-amber);
  opacity: 1;
  width: 28px;
  border-radius: 6px;
}

/* ============================================================== SINGLE LINE FOOTER BIG TEXT */
/* The clamp's 2.75rem floor was wider than a 390px screen once the container
   padding was taken off, so with nowrap in force the EDGE ran off the right
   edge. Below 450px the size follows the viewport instead of holding a
   minimum — it is decorative type, so shrinking is the right trade. */
.ne-footer__word {
  font-family: var(--ne-font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 8vw, 7.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
  margin-top: var(--ne-space-7);
  margin-bottom: var(--ne-space-4);
  text-align: center;

  /* Transparent stroke + background clip for scroll fill animation */
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ne-white) 22%, transparent);
  color: transparent;
  background: linear-gradient(to right,
      var(--ne-amber) 0%,
      var(--ne-amber) var(--ne-scroll-pct, 0%),
      transparent var(--ne-scroll-pct, 0%),
      transparent 100%);
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-size 100ms linear;
}

@media (max-width: 449.98px) {
  .ne-footer__word {
    font-size: 8.2vw;
    letter-spacing: -0.01em;
  }
}

/* ============================================================== IMAGE 1 REFERENCE: STADIUM OVAL SHOWCASE */
.ne-stadium-showcase {
  display: grid;
  gap: var(--ne-space-8);
  align-items: center;
}

@media (min-width: 992px) {
  .ne-stadium-showcase {
    grid-template-columns: 1fr 250px 1fr;
    gap: clamp(24px, 3vw, 48px);
  }
}

.ne-stadium-col {
  display: flex;
  flex-direction: column;
  gap: var(--ne-space-6);
}

.ne-stadium-item {
  display: flex;
  gap: var(--ne-space-4);
  align-items: flex-start;
}

.ne-stadium-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(245, 166, 35, 0.15);
  border: 1px solid var(--ne-amber);
  color: var(--ne-amber);
  flex: none;
}

.ne-stadium-title {
  font-family: var(--ne-font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--ne-fg);
  margin-bottom: 6px;
}

.ne-stadium-desc {
  font-family: var(--ne-font-body);
  font-size: 0.9375rem;
  color: var(--ne-muted);
  line-height: 1.5;
}

.ne-section--light .ne-stadium-title {
  color: var(--ne-ink);
}

.ne-section--light .ne-stadium-desc {
  color: #4a4d52;
}

/* The capsule takes its height from the row, not from a fixed ratio. Locked
   to 1 / 1.6 it ran about 760px tall beside two columns of roughly 250px,
   which left a void above and below it and read as a mistake. Stretched, it
   ends up a little taller than the content beside it — which is the whole
   point of the shape — and the clamped floor and ceiling keep it a stadium
   rather than letting it collapse to a circle on a short row. */
.ne-stadium-capsule {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  align-self: stretch;
  margin-inline: auto;
  width: 100%;
  max-width: 250px;
  /* Fixed at 450px on request, rather than taking the row's height. */
  height: 450px;
  min-height: 450px;
  max-height: 450px;
}

.ne-stadium-capsule__img {
  width: 100%;
  height: 100%;
  border-radius: var(--ne-radius-pill);
  object-fit: cover;
  border: 3px solid var(--ne-amber);
  box-shadow: 0 0 35px rgba(245, 166, 35, 0.25), 0 20px 48px rgba(0, 0, 0, 0.5);
  background-color: var(--ne-ink);
}

/* =====================================================================
   =====================================================================
   SERVICE PAGES
   The shared skeleton every inner page is built from: page hero, service
   band, capability list, plate list, timeline. Written once, used four
   times — these are the components the WordPress conversion loops over.
   =====================================================================
   ===================================================================== */

/* ========================================================== PAGE HERO
   Not a cropped banner. A 6/6 split: content on ink to the left, the
   photograph bleeding off the right page edge and masked by the brand
   diagonal so its edge cuts 4° into the text side.

   The content is top-aligned to a baseline below the header, never
   vertically centred — centring a short column in a tall box is exactly
   what made the previous heroes feel loose.
   ==================================================================== */
.ne-page-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  isolation: isolate;
  min-height: 60vh;
  --ne-stack: calc(var(--ne-hazard-h) + var(--ne-header-h));
  padding-top: calc(var(--ne-stack) + 56px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

@media (min-width: 992px) {
  .ne-page-hero {
    --ne-stack: calc(var(--ne-hazard-h) + var(--ne-topbar-h) + var(--ne-header-h));
    min-height: 72vh;
    padding-top: calc(var(--ne-stack) + 120px);
    padding-bottom: clamp(88px, 9vw, 132px);
  }
}

@media (min-width: 992px) and (max-height: 760px) {

  /* A short laptop viewport should not force the fold below the fact strip. */
  .ne-page-hero {
    min-height: 560px;
    padding-top: calc(var(--ne-stack) + 84px);
  }
}

.ne-page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.ne-page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  will-change: transform;
}

@media (min-width: 992px) {
  .ne-page-hero__media {
    left: 44%;
    right: 0;
    clip-path: polygon(var(--ne-hero-skew) 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* On desktop the scrim only has to soften the diagonal seam; on mobile the
   photograph is behind the whole column and the scrim is doing the entire
   contrast job. */
.ne-page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
      var(--ne-ink) 6%,
      color-mix(in srgb, var(--ne-ink) 84%, transparent) 46%,
      color-mix(in srgb, var(--ne-ink) 24%, transparent) 82%),
    linear-gradient(to top, var(--ne-ink) 2%, transparent 46%);
}

@media (min-width: 992px) {
  .ne-page-hero__scrim {
    background: linear-gradient(100deg,
        var(--ne-ink) 40%,
        color-mix(in srgb, var(--ne-ink) 62%, transparent) 52%,
        transparent 68%);
  }
}

.ne-page-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.ne-page-hero__col {
  max-width: 42rem;
}

@media (min-width: 992px) {
  .ne-page-hero__col {
    max-width: 46%;
    min-width: 30rem;
  }
}

/* The page index — 02 / SERVICES. Utility type, amber numeral, so the
   visitor can see where they are in the set without reading the nav. */
.ne-page-hero__ix {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--ne-space-4);
  font-family: var(--ne-font-utility);
  font-weight: 600;
  font-size: var(--ne-fs-label);
  letter-spacing: var(--ne-ls-label);
  text-transform: uppercase;
  color: var(--ne-fg-soft);
}

.ne-page-hero__ix b {
  color: var(--ne-amber);
  font-variant-numeric: tabular-nums;
}

.ne-page-hero__ix::after {
  content: "";
  width: clamp(28px, 5vw, 64px);
  height: 1px;
  background-color: var(--ne-rule);
}

.ne-page-hero .ne-lead {
  margin-top: var(--ne-r-lead);
  max-width: 52ch;
}

/* ======================================================== SERVICE BAND
   Alternating image / text bands. The image bleeds off the outer page edge
   and the plate overlaps it by 48px — one component, two variants, and the
   overlap is the whole point.
   ==================================================================== */
.ne-sband {
  position: relative;
  display: grid;
  gap: 0;
}

.ne-sband+.ne-sband {
  margin-top: clamp(40px, 5vw, 72px);
}

.ne-sband__media {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  background-color: var(--ne-graphite);
}

/* Taller than its own frame, and pulled up by half the difference. The
   scrubbed parallax moves this by up to 8%, and an image that exactly
   filled the box would drag a strip of empty background in behind it. */
.ne-sband__media img {
  position: absolute;
  inset: -6% 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  will-change: transform;
}

.ne-sband__plate {
  position: relative;
  z-index: 2;
  padding: clamp(24px, 3.4vw, 48px);
  background-color: var(--ne-graphite);
  border: 1px solid var(--ne-steel);
  --ne-fg: var(--ne-white);
  --ne-fg-soft: var(--ne-mute);
  --ne-rule: var(--ne-steel);
  --ne-accent: var(--ne-amber);
  color: var(--ne-fg);
}

.ne-sband__n {
  display: block;
  font-family: var(--ne-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 0.9;
  letter-spacing: var(--ne-ls-display);
  color: var(--ne-amber);
  margin-bottom: var(--ne-space-4);
  font-variant-numeric: tabular-nums;
}

.ne-sband__plate .ne-prose {
  margin-top: var(--ne-space-4);
  max-width: 56ch;
}

.ne-sband__plate .ne-chip-row {
  margin-top: var(--ne-space-5);
}

.ne-sband__plate .ne-btn {
  margin-top: var(--ne-space-5);
}

@media (min-width: 992px) {
  .ne-sband {
    grid-template-columns: 58% 42%;
    align-items: center;
  }

  .ne-sband__media {
    min-height: 520px;
    /* Stretch explicitly: the band centres its plate, and a centred grid
       item does not fill its row, which would leave the photograph short of
       the plate it is supposed to run behind. */
    align-self: stretch;
  }

  /* The seam side carries a 1px amber hairline where the plate crosses the
     photograph, so the overlap reads as deliberate joinery. */
  .ne-sband__plate {
    margin-left: -48px;
    margin-right: var(--ne-gut);
    border-left: 1px solid var(--ne-amber);
  }

  .ne-sband--reverse {
    grid-template-columns: 42% 58%;
  }

  .ne-sband--reverse .ne-sband__media {
    order: 2;
  }

  .ne-sband--reverse .ne-sband__plate {
    order: 1;
    margin-left: var(--ne-gut-l);
    margin-right: -48px;
    border-left: 1px solid var(--ne-steel);
    border-right: 1px solid var(--ne-amber);
  }
}

@media (max-width: 991.98px) {
  .ne-sband__media {
    height: 280px;
  }

  .ne-sband__plate {
    margin-inline: var(--ne-gut-l) var(--ne-gut);
    margin-top: -1px;
  }
}

/* ========================================================= MEDIA SPLIT
   The fix for the orphan cell. Three items in a two-column grid left
   FULL PUBLIC LIABILITY COVER stranded on its own row beside an empty
   box; here the remainder is filled by a photograph running the full
   height of the block.

   Rule this component exists to enforce: when the item count does not
   divide into the column count, put an image in the remainder — never
   leave a blank cell.
   ==================================================================== */
.ne-media-split {
  display: grid;
  gap: var(--ne-space-7);
  align-items: stretch;
}

.ne-media-split__media {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  background-color: var(--ne-graphite);
}

.ne-media-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* An amber index plate sitting on the photograph's lower corner, so the
   image is carrying a fact rather than just filling space. */
.ne-media-split__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background-color: var(--ne-amber);
  color: var(--ne-ink);
  font-family: var(--ne-font-utility);
  font-weight: 600;
  font-size: var(--ne-fs-label);
  letter-spacing: var(--ne-ls-label);
  text-transform: uppercase;
}

@media (min-width: 992px) {
  .ne-media-split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(32px, 4vw, 64px);
  }

  .ne-media-split__media {
    grid-column: 1 / span 5;
  }

  .ne-media-split__body {
    grid-column: 6 / -1;
  }

  .ne-media-split--flip .ne-media-split__media {
    grid-column: 8 / -1;
  }

  .ne-media-split--flip .ne-media-split__body {
    grid-column: 1 / span 7;
    grid-row: 1;
  }
}

/* ==================================================== CAPABILITY LIST
   The section that used to look like a navigation menu: plain rows with a
   tiny arrow. Now oversized display rows that fill amber from the left on
   hover — the same mechanic as the primary button, one language — with a
   photograph following the cursor.
   ==================================================================== */
.ne-cap-section {
  position: relative;
  isolation: isolate;
}

/* A site photograph at 8% behind the block, so it has material rather than
   flat black. The section's own grain overlay sits above it. */
.ne-cap-section__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.ne-cap-section__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.08;
}

.ne-cap {
  border-top: 1px solid var(--ne-rule);
}

.ne-cap__row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--ne-space-4);
  padding: clamp(20px, 2.6vw, 32px) clamp(14px, 1.6vw, 22px);
  border-bottom: 1px solid var(--ne-rule);
  text-decoration: none;
  color: var(--ne-fg);
  isolation: isolate;
}

@media (min-width: 768px) {
  .ne-cap__row {
    gap: var(--ne-space-6);
  }
}

.ne-cap__row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--ne-amber);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ne-ease-power3);
}

.ne-cap__row:hover::before,
.ne-cap__row:focus-visible::before {
  transform: scaleX(1);
}

.ne-cap__row:hover,
.ne-cap__row:focus-visible {
  color: var(--ne-ink);
}

.ne-cap__n {
  font-family: var(--ne-font-utility);
  font-weight: 600;
  font-size: var(--ne-fs-label);
  letter-spacing: var(--ne-ls-label);
  color: var(--ne-amber);
  font-variant-numeric: tabular-nums;
  transition: color var(--ne-dur) var(--ne-ease);
}

.ne-cap__row:hover .ne-cap__n,
.ne-cap__row:focus-visible .ne-cap__n {
  color: var(--ne-ink);
}

.ne-cap__t {
  font-family: var(--ne-font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  line-height: 1.04;
  letter-spacing: var(--ne-ls-display);
  text-transform: uppercase;
}

.ne-cap__ico {
  transition: transform var(--ne-dur) var(--ne-ease);
}

.ne-cap__row:hover .ne-cap__ico,
.ne-cap__row:focus-visible .ne-cap__ico {
  transform: translate(6px, -6px);
}

/* One image element does both jobs: a 64px thumbnail at the row's right
   edge on touch and small screens, and the cursor-following preview from
   1200px up. Two elements would mean two downloads of the same picture. */
.ne-cap__preview {
  display: block;
  width: 64px;
  height: 64px;
  flex: none;
  overflow: hidden;
  background-color: var(--ne-graphite);
}

.ne-cap__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1200px) {
  .ne-cap__preview {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 70;
    width: 300px;
    height: 210px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
  }
}

/* ========================================================== PLATE LIST
   Numbered process rows. The previous version put three pieces of content
   on no shared grid at all — the title floated mid-row while its own
   description sat under the index. One explicit grid fixes it, and
   everything is top-aligned.
   ==================================================================== */
.ne-pl {
  position: relative;
  padding-left: clamp(16px, 2.4vw, 32px);
}

.ne-pl__line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--ne-rule);
}

.ne-pl__fill {
  position: absolute;
  inset: 0;
  background-color: var(--ne-amber);
  transform: scaleY(0);
  transform-origin: top center;
}

.ne-pl__row {
  display: grid;
  grid-template-columns: 88px minmax(180px, 1fr) minmax(0, 2fr);
  gap: var(--ne-space-5);
  align-items: start;
  padding-block: 28px;
  border-bottom: 1px solid var(--ne-rule);
}

.ne-pl__row:last-child {
  border-bottom: 0;
}

.ne-pl__n {
  font-family: var(--ne-font-display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.05;
  letter-spacing: var(--ne-ls-display);
  color: var(--ne-fg-soft);
  font-variant-numeric: tabular-nums;
  transition: color var(--ne-dur) var(--ne-ease);
}

.ne-pl__row.is-lit .ne-pl__n {
  color: var(--ne-amber);
}

/* Optically aligned to the index's cap height rather than to the box. */
.ne-pl__t {
  font-family: var(--ne-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: var(--ne-ls-heading);
  text-transform: uppercase;
  color: var(--ne-fg);
  padding-top: 4px;
}

.ne-pl__d {
  max-width: 56ch;
  color: var(--ne-fg-soft);
  padding-top: 3px;
}

@media (max-width: 767.98px) {
  .ne-pl__row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--ne-space-3) var(--ne-space-4);
    padding-block: 22px;
  }

  .ne-pl__n {
    font-size: 1.375rem;
  }

  .ne-pl__t {
    padding-top: 0;
  }

  .ne-pl__d {
    grid-column: 1 / -1;
  }
}

/* ============================================================ TIMELINE
   Four steps across the page on desktop, drawn in with a scrubbed amber
   line; the same markup stacks to a vertical list on mobile.
   ==================================================================== */
.ne-tline {
  position: relative;
  display: grid;
  gap: var(--ne-space-6);
}

/* Stacked below 900px: the line runs down through the middle of the number
   boxes, which sit flush to the container's left edge. Centring the boxes
   ON a line at left:0 pushed half of each one off the screen. */
.ne-tline__line {
  position: absolute;
  left: 22px;
  top: 22px;
  width: 1px;
  bottom: 22px;
  background-color: var(--ne-rule);
}

.ne-tline__fill {
  position: absolute;
  inset: 0;
  background-color: var(--ne-amber);
  transform: scaleY(0);
  transform-origin: top center;
}

.ne-tline__step {
  position: relative;
  padding-left: 64px;
}

.ne-tline__n {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: var(--ne-ink);
  border: 1px solid var(--ne-rule);
  font-family: var(--ne-font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ne-amber);
  font-variant-numeric: tabular-nums;
}

.ne-section--light .ne-tline__n {
  background-color: var(--ne-concrete);
}

.ne-tline__t {
  font-family: var(--ne-font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.15;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ne-tline__d {
  color: var(--ne-fg-soft);
  max-width: 44ch;
}

@media (min-width: 900px) {
  .ne-tline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ne-space-6);
    padding-top: 62px;
  }

  .ne-tline__line {
    left: 22px;
    right: 22px;
    top: 22px;
    bottom: auto;
    width: auto;
    height: 1px;
  }

  .ne-tline__fill {
    transform: scaleX(0);
    transform-origin: left center;
  }

  .ne-tline__step {
    padding-left: 0;
    padding-right: var(--ne-space-5);
  }

  .ne-tline__n {
    top: -62px;
    left: 0;
  }
}

/* ================================================= DELIVERY IN BRIEF
   Three short columns and one ghost link out to the full page. Hairlines,
   no boxes — it is a signpost, not a section.
   ==================================================================== */
.ne-brief {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ne-rule);
}

@media (min-width: 768px) {
  .ne-brief {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ne-brief__col {
  padding: clamp(20px, 2.4vw, 30px) clamp(16px, 2vw, 28px) clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--ne-rule);
}

@media (min-width: 768px) {
  .ne-brief__col {
    border-bottom: 0;
  }

  .ne-brief__col+.ne-brief__col {
    border-left: 1px solid var(--ne-rule);
    padding-left: clamp(16px, 2vw, 28px);
  }
}

.ne-brief__k {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ne-font-utility);
  font-weight: 600;
  font-size: var(--ne-fs-label);
  letter-spacing: var(--ne-ls-label);
  text-transform: uppercase;
  color: var(--ne-accent);
  margin-bottom: var(--ne-space-3);
}

.ne-brief__d {
  color: var(--ne-fg-soft);
  max-width: 40ch;
}

/* ============================================================== IMAGE 2 REFERENCE: MISSION & STORY SPLIT */
.ne-mission-grid {
  display: grid;
  gap: var(--ne-space-7);
  margin-top: var(--ne-space-6);
}

@media (min-width: 768px) {
  .ne-mission-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.ne-mission-card {
  padding: clamp(20px, 2.5vw, 32px);
  background-color: var(--ne-ink);
  border: 1px solid var(--ne-steel);
  border-top: 3px solid var(--ne-amber);
}

.ne-mission-card__title {
  font-family: var(--ne-font-display);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--ne-white);
  margin-bottom: 8px;
}