/* Colocation Scout : home page, "Requirement Console" treatment.
   Loaded after styles.css on index.html only. Everything here is scoped to
   body.home, so interior pages are untouched.

   Two changes from the previous home page:
   1. One accent system. Navy carries structure, a single green carries signal.
      The teal/amber lane colours are retired, so colour means something again.
   2. The search box is replaced by a requirement console. There is no listing
      service for colocation, so a keyword search promises something the site
      cannot deliver. Power, density, market and date are what operators price
      against, so those are the fields. */

body.home {
  --h-navy: #003b5c;
  --h-navy-deep: #00263c;
  --h-navy-deeper: #001c2e;
  --h-signal: #43b763;
  --h-signal-ink: #052b14;
  --h-signal-bright: #7fe0a0;
  --h-accent-inv: #7fd4f0;
  --h-ink-inv: rgba(230, 239, 245, .68);
  --h-ink-inv-2: rgba(230, 239, 245, .5);
  --h-rule-inv: rgba(230, 239, 245, .12);
}

/* ---- Requirement console hero ---- */
.home .hero-req {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(115% 130% at 12% 0%, #00587f 0%, #003b5c 46%, #00263c 100%);
  color: #e6eff5;
  padding: 74px 0 64px;
  border-bottom: 0;
}
.home .hero-req::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 38, 60, .66) 0%, rgba(0, 38, 60, .12) 48%, rgba(0, 38, 60, .2) 100%),
    linear-gradient(180deg, rgba(0, 38, 60, .04), rgba(0, 38, 60, .24));
}
.home data-hall-background {
  z-index: 0;
  opacity: .82;
  filter: saturate(1.12) contrast(1.1) brightness(1.04);
}
.home .req-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 56px; align-items: start;
}
.home .hero-req .eyebrow { color: var(--h-accent-inv); }
.home .hero-req h1 { color: #fff; font-size: 58px; letter-spacing: -.03em; }
.home .hero-req .sub { max-width: 560px; margin-top: 22px; color: var(--h-ink-inv); }

/* The three claims that used to be a separate proof strip. Folding them into
   the hero removes a full-width band without losing the disclosure. */
.home .req-proof {
  display: flex; flex-wrap: wrap; gap: 34px;
  margin-top: 42px; padding-top: 26px; border-top: 1px solid var(--h-rule-inv);
}
.home .req-proof div { max-width: 210px; }
.home .req-proof strong {
  display: block; font: 600 15px/1.2 var(--font-mono); color: var(--h-signal-bright);
}
.home .req-proof span { display: block; margin-top: 5px; font-size: 13.5px; color: var(--h-ink-inv-2); }

.home .req-panel {
  padding: 26px; border: 1px solid rgba(230, 239, 245, .16); border-radius: 16px;
  background: #003b5c; box-shadow: 0 30px 60px -30px rgba(0, 20, 33, .8);
}
.home .req-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 16px; border-bottom: 1px solid rgba(230, 239, 245, .14);
}
.home .req-head h2 { font-size: 18px; color: #fff; }
.home .req-step {
  font: 700 11.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--h-accent-inv);
}
.home .req-fields { display: grid; gap: 18px; padding: 20px 0 22px; }
.home .req-field > .req-label {
  display: block; margin-bottom: 8px;
  font: 700 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(230, 239, 245, .55);
}
.home .req-power { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 8px; }
.home .req-panel input,
.home .req-panel select {
  width: 100%; padding: 12px 13px; border: 1px solid rgba(230, 239, 245, .2); border-radius: 9px;
  background: rgba(0, 20, 33, .5); color: #fff; font: 16px/1.3 var(--font-body);
}
.home .req-power input { font-family: var(--font-mono); font-size: 17px; }
.home .req-panel input::placeholder { color: rgba(230, 239, 245, .38); }
.home .req-panel input:focus,
.home .req-panel select:focus {
  outline: 3px solid rgba(127, 212, 240, .3); border-color: var(--h-accent-inv);
}
.home .req-panel select option { color: #16181d; }

/* Density is a choice between four named regimes, not a slider. Radios keep it
   keyboard-operable and submit cleanly without script. */
.home .req-segment { display: flex; gap: 7px; }
.home .req-segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.home .req-segment label {
  flex: 1; padding: 10px 4px; border: 1px solid rgba(230, 239, 245, .16); border-radius: 8px;
  color: rgba(230, 239, 245, .6); font-size: 13.5px; text-align: center; cursor: pointer;
}
.home .req-segment input:checked + label {
  background: rgba(67, 183, 99, .18); border-color: rgba(67, 183, 99, .5);
  color: var(--h-signal-bright); font-weight: 700;
}
.home .req-segment input:focus-visible + label { outline: 2px solid var(--h-accent-inv); outline-offset: 2px; }

.home .req-panel .btn-primary {
  width: 100%; background: var(--h-signal); color: var(--h-signal-ink); font-size: 16.5px; padding: 15px;
}
.home .req-panel .btn-primary:hover { background: #37a154; }
.home .req-note { margin-top: 13px; text-align: center; font-size: 13px; color: var(--h-ink-inv-2); }
.home .req-note a { color: #fff; }

/* ---- The tape ----
   A continuous horizontal run of the markets we hold records for, sitting
   between the hero and the operator strip. It carries counts rather than
   slogans, so the movement is doing a job: it shows the coverage is wide
   without spending a full section on a list of fifteen cities.

   The loop is two identical tracks moving as one rail. The rail travels
   exactly minus fifty percent, which lands the second track precisely where
   the first began, so the seam never shows and the animation can restart
   invisibly. Everything below is width-independent for that reason: no
   pixel distance is ever assumed.

   Three things keep it from being hostile:
     - it stops on hover and on keyboard focus, so a link can be read and hit
     - the duplicate track is aria-hidden and untabbable, so it is neither
       announced nor focused twice
     - reduced motion stops it dead and lets the row scroll by hand instead */
.home .sec-tape {
  background: var(--h-navy-deep);
  border-top: 1px solid var(--h-rule-inv);
  padding: 22px 0 24px;
  overflow: hidden;
}
.home .tape-label {
  max-width: var(--maxw);
  margin: 0 auto 14px;
  padding: 0 32px;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(230, 239, 245, .45);
}
/* The viewport is full-bleed on purpose. A tape that stops at the content
   gutter reads as a broken carousel; one that runs off both edges reads as
   something continuous that the window happens to be showing part of. */
.home .tape-viewport {
  overflow: hidden;
  /* Fades the two ends into the band so items enter and leave rather than
     being clipped. Masked rather than gradient-overlaid so it holds up on any
     background. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.home .tape-rail {
  display: flex;
  width: max-content;
  animation: tape-run 70s linear infinite;
}
.home .tape-viewport:hover .tape-rail,
.home .tape-rail:focus-within { animation-play-state: paused; }

.home .tape-track {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home .tape-track li { display: flex; align-items: center; }
/* The separator belongs to the item, not to the gap, so the run stays even
   across the seam between the two tracks. */
.home .tape-track li::after {
  content: "";
  width: 5px; height: 5px; flex: none;
  margin: 0 26px;
  border-radius: 50%;
  background: rgba(230, 239, 245, .22);
}
.home .tape-track a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--h-ink-inv);
  font-size: 14px;
}
.home .tape-track a:hover { color: #fff; }
.home .tape-track a:focus-visible { outline: 2px solid var(--h-accent-inv); outline-offset: 4px; border-radius: 4px; }
.home .tape-track em {
  font-style: normal;
  font-weight: 700;
  color: #fff;
  font-size: 15px;
}
.home .tape-track b {
  font: 600 15px/1 var(--font-mono);
  color: var(--h-signal-bright);
  letter-spacing: -.01em;
}
/* Announced megawatts are somebody else's claim rather than a record we hold,
   so they read in the muted colour the rest of the site gives unverified
   figures instead of the signal green. */
.home .tape-track .tape-mw { color: var(--h-ink-inv-2); }
.home .tape-track .tape-mw b { color: var(--h-accent-inv); }

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

@media (prefers-reduced-motion: reduce) {
  .home .tape-rail { animation: none; }
  /* Standing still, the offscreen half is dead weight, so the row becomes a
     hand-scrollable strip and the duplicate is dropped. */
  .home .tape-viewport { overflow-x: auto; }
  .home .tape-track[aria-hidden="true"] { display: none; }
}

@media (max-width: 600px) {
  .home .tape-rail { animation-duration: 46s; }
  .home .tape-track li::after { margin: 0 18px; }
}

/* ---- Operator strip, unchanged in structure, darker so it reads as one block
       with the hero above it ---- */
.home .sec-providers {
  background: var(--h-navy-deeper);
  border-top: 1px solid var(--h-rule-inv); border-bottom: 0;
  padding: 34px 0 36px;
}
.home .sec-providers .logo-note { color: #7f9cad; }

/* ---- Market conditions. The quarter's figures carried as numbers rather than
       headlines, because the number is the argument. ---- */
/* Bands alternate cream and white the whole way down. styles.css still paints
   these three from the retired lane palette, so each one is set explicitly. */
.home .sec-tiles { background: var(--bg); }
.home .sec-backers { background: var(--bg); }
.home .sec-index { background: var(--surface); }
.home .stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.home .stat-card {
  display: block; padding: 24px; background: var(--surface); color: inherit; text-decoration: none;
  border: 1px solid var(--line); border-left: 3px solid var(--h-navy); border-radius: 12px;
  transition: border-color .15s, transform .15s;
}
.home .stat-card:hover { border-color: var(--h-navy); transform: translateY(-2px); }
.home .stat-card b {
  display: block; font: 600 34px/1 var(--font-mono); letter-spacing: -.03em; color: var(--h-navy);
}
.home .stat-card strong { display: block; margin-top: 9px; font: 700 15px/1.3 var(--font-head); }
.home .stat-card p { margin-top: 5px; color: var(--ink-2); font-size: 14px; }
.home .sec-conditions .callout { margin: 30px 0 0; }

/* ---- Single-accent overrides for the sections kept from the previous page.
       Each of these replaced a per-child teal/green/amber rule. ---- */
.home .sec-final { background: var(--bg); border-top: 1px solid var(--line); }

.home .backer,
.home .backer:nth-child(2),
.home .backer:nth-child(3),
.home .backer:nth-child(4) { border-top-color: var(--h-navy); }
.home .backer .text-link,
.home .backer:nth-child(2) .text-link,
.home .backer:nth-child(3) .text-link,
.home .backer:nth-child(4) .text-link { color: var(--h-navy); }

.home .sec-services .path-card,
.home .sec-services .path-card:nth-child(2),
.home .sec-services .path-card:nth-child(3),
.home .sec-services .path-card:nth-child(4) { border-left-color: var(--h-navy); }
.home .sec-services .path-card:nth-child(3) .btn-primary { background: var(--h-navy); }
.home .sec-services .path-card:nth-child(3) .btn-primary:hover { background: var(--accent-ink); }

.home .sec-markets .market-card,
.home .sec-markets .market-card:nth-child(2),
.home .sec-markets .market-card:nth-child(3),
.home .sec-markets .market-card:nth-child(4) { border-top-color: var(--h-navy); }
.home .sec-markets .market-card:nth-child(2) .market-metric strong,
.home .sec-markets .market-card:nth-child(3) .market-metric strong,
.home .sec-markets .market-card:nth-child(4) .market-metric strong,
.home .sec-markets .market-card:nth-child(2) .text-link,
.home .sec-markets .market-card:nth-child(3) .text-link,
.home .sec-markets .market-card:nth-child(4) .text-link { color: var(--h-navy); }

/* The one place a second colour still earns its keep: published research is
   navy, our own construction-record collection is green, so the two kinds of
   number stay visually distinct as well as labelled. */
.home .count-tile { border-left-color: var(--h-navy); }
.home .count-tile:nth-child(n+5) { border-left-color: var(--h-signal); }
.home .count-tile:nth-child(n+5) .tile-num { color: #2e8a48; }
.home .tier-2 .tier-head, .home .tier-3 .tier-head { border-bottom-color: var(--h-navy); }
.home .tier-2 .tier-count, .home .tier-3 .tier-count { color: var(--h-navy); }
.home .news-item time { color: var(--ink-3); }

/* Trust band keeps the inverted treatment, minus the three-colour card tops. */
.home .sec-trust .trust-card:nth-child(1),
.home .sec-trust .trust-card:nth-child(2),
.home .sec-trust .trust-card:nth-child(3) { border-top: 3px solid var(--h-accent-inv); }

@media (max-width: 1080px) {
  .home .req-grid { grid-template-columns: 1fr; gap: 40px; }
  .home .req-panel { max-width: 540px; }
  .home data-hall-background { opacity: .58; }
}
@media (max-width: 900px) {
  .home .hero-req h1 { font-size: 42px; }
  .home .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .home .hero-req { padding: 52px 0 48px; }
  .home .hero-req h1 { font-size: 34px; }
  .home .req-proof { gap: 22px; }
  .home .stat-grid { grid-template-columns: 1fr; }
  .home .req-segment { flex-wrap: wrap; }
  .home .req-segment label { flex: 1 1 46%; }
  .home data-hall-background { opacity: .44; }
}