/* /infrastructure — AISHTMLNEWDESIGN-587
   Page-owned styles. EVERY selector is scoped to #page-infrastructure or a
   i- prefixed class: this sheet must never style body, a bare
   element, #ais-header or #ais-footer. The document reset
   (html,body{margin:0}) is owned by the shared layout sheet.
   Font is Inter; no body/UI text below 16px. */

/* ============================================================
   PLANT ROOM — /infrastructure
   Concrete ground, steel rules, a teal "systems running" indicator.
   Every selector scoped to #page-infrastructure or .i-*.
   ============================================================ */

#page-infrastructure{
  --i-ink:#17201f;
  --i-deep:#24332f;
  --i-deep-2:#0e1817;
  --i-paper:#f2f4f3;
  --i-card:#ffffff;
  --i-signal:#0b6152;
  --i-signal-lite:#63cfb6;
  --i-line:#d2dad7;
  --i-text:#18211f;
  --i-text-2:#374151;
  font-family:"Inter",system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--i-text);
  background:var(--i-paper);
}

/* Page content is content-box by default, so side padding on a width:100%
   band is ADDED to the width and the band overflows the viewport. Both the
   layout sheet and this sheet are namespaced and decline to own the
   document, so the page owns this reset for its own subtree. */
#page-infrastructure,
#page-infrastructure *,
#page-infrastructure *::before,
#page-infrastructure *::after{box-sizing:border-box;}

#page-infrastructure .i-wrap{max-width:1140px;margin-inline:auto;padding-inline:24px;}
#page-infrastructure :is(ul,ol){list-style:none;margin:0;padding:0;}
#page-infrastructure p{margin:0;}
#page-infrastructure :is(a,button):focus-visible{
  outline:3px solid var(--i-signal);outline-offset:3px;border-radius:4px;
}

/* ---------- HERO ---------- */
#page-infrastructure .i-hero{
  width:100%;
  padding:clamp(64px,8vw,116px) 24px;
  background:linear-gradient(152deg,var(--i-deep) 0%,var(--i-ink) 58%,var(--i-deep-2) 100%);
}
#page-infrastructure .i-hero__inner{max-width:900px;margin-inline:auto;text-align:center;}
#page-infrastructure p.i-hero__eyebrow{
  margin:0 0 20px;font-size:16px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--i-signal-lite);
}
#page-infrastructure .i-hero__h1{
  margin:0;
  /* "INFRASTRUCTURE" is ONE unbreakable 14-character word. At the usual
     clamp(44px,...) floor it renders 418px wide inside a 342px column at
     390px viewport and pushes the document to 442px — a horizontal scroll
     on every phone. Every other page in this batch has an H1 that can wrap,
     so this floor is specific to this page. Sized to fit down to 320px. */
  font-size:clamp(26px,7.5vw,72px);
  line-height:1.05;
  letter-spacing:.02em;font-weight:800;color:#ffffff;
}
#page-infrastructure p.i-hero__para{
  margin:24px auto 0;max-width:740px;
  font-size:18px;line-height:1.7;color:#c2cfcb;
}

/* ---------- BREADCRUMB ---------- */
#page-infrastructure .i-crumb{background:var(--i-card);border-bottom:1px solid var(--i-line);}
#page-infrastructure .i-crumb__nav{
  display:flex;align-items:center;gap:8px;
  padding-block:6px;font-size:16px;color:var(--i-text-2);
}
#page-infrastructure .i-crumb__nav img{display:block;flex:none;}
#page-infrastructure .i-crumb__nav a{
  display:inline-flex;align-items:center;min-height:44px;color:var(--i-text-2);
}
#page-infrastructure .i-crumb__nav a:hover{color:var(--i-signal);}
/* NOT --i-line: that is a BORDER token and renders ~1.4:1 as text. */
#page-infrastructure .i-crumb__slash{color:#5c6a66;}
#page-infrastructure .i-crumb__nav [aria-current]{color:var(--i-text);font-weight:600;}

/* ---------- THE PLATE (heading + its figure, no caption) ---------- */
#page-infrastructure .i-plate{
  background:var(--i-card);
  padding:clamp(48px,6vw,92px) 0;
}
#page-infrastructure .i-plate__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(28px,4vw,56px);
  align-items:center;
}
#page-infrastructure .i-plate__h2{
  margin:0;
  font-size:clamp(28px,3.4vw,42px);line-height:1.18;
  letter-spacing:-.015em;font-weight:800;color:var(--i-ink);
  border-left:4px solid var(--i-signal);
  padding-left:clamp(16px,2vw,24px);
}
#page-infrastructure .i-plate__fig{margin:0;}
#page-infrastructure .i-plate__fig img{
  display:block;width:100%;max-width:320px;height:auto;margin-inline:auto;
  border:1px solid var(--i-line);border-radius:4px;
}

/* ---------- VIRTUAL TOUR ---------- */
#page-infrastructure .i-tour{
  background:var(--i-ink);
  padding:clamp(48px,6vw,92px) 0;
}
#page-infrastructure .i-tour__h2{
  margin:0 0 28px;
  font-size:clamp(28px,3.4vw,42px);line-height:1.16;
  letter-spacing:-.015em;font-weight:800;color:#ffffff;
}
#page-infrastructure .i-tour__frame{
  max-width:900px;
  border:1px solid #2d3d39;
  border-radius:5px;
  overflow:hidden;
  background:#000;
}
#page-infrastructure .i-vid{
  position:relative;display:block;width:100%;
  padding:0;border:0;background:#000;cursor:pointer;line-height:0;
}
#page-infrastructure .i-vid img{
  display:block;width:100%;height:auto;opacity:.86;
  transition:opacity .18s ease;
}
#page-infrastructure .i-vid:hover img{opacity:1;}
#page-infrastructure .i-vid__play{
  position:absolute;top:50%;left:50%;
  width:74px;height:74px;margin:-37px 0 0 -37px;
  border-radius:50%;background:rgba(11,97,82,.94);
  transition:transform .18s ease;
}
#page-infrastructure .i-vid__play::after{
  content:"";position:absolute;top:50%;left:55%;
  transform:translate(-50%,-50%);
  border-style:solid;border-width:13px 0 13px 21px;
  border-color:transparent transparent transparent #ffffff;
}
#page-infrastructure .i-vid:hover .i-vid__play{transform:scale(1.07);}
#page-infrastructure .i-tour__iframe{
  display:block;width:100%;aspect-ratio:16/9;border:0;
}

/* ---------- INFRASTRUCTURE & SUPPORT ---------- */
#page-infrastructure .i-support{
  background:var(--i-paper);
  padding:clamp(52px,7vw,100px) 0;
}
#page-infrastructure .i-support__head{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(28px,4vw,52px);
  align-items:center;
}
#page-infrastructure .i-support__h2{
  margin:0;
  font-size:clamp(30px,3.6vw,44px);line-height:1.14;
  letter-spacing:-.02em;font-weight:800;color:var(--i-ink);
}
#page-infrastructure p.i-support__para{
  margin:20px 0 0;
  font-size:17px;line-height:1.75;color:var(--i-text-2);
}
#page-infrastructure .i-support__fig{margin:0;}
#page-infrastructure .i-support__fig img{
  display:block;width:100%;height:auto;
  border:1px solid var(--i-line);border-radius:4px;
}

/* the three bays */
#page-infrastructure .i-bays{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));
  gap:clamp(18px,2.4vw,26px);
  margin-top:clamp(34px,4.5vw,56px);
}
#page-infrastructure .i-bay{
  position:relative;
  background:var(--i-card);
  border:1px solid var(--i-line);
  border-top:3px solid var(--i-signal);
  border-radius:4px;
  padding:26px 24px 28px;
}
#page-infrastructure .i-bay__lamp{
  display:block;width:10px;height:10px;border-radius:50%;
  background:var(--i-signal);margin-bottom:16px;
}
#page-infrastructure .i-bay__h3{
  margin:0 0 12px;
  font-size:clamp(20px,2.2vw,24px);line-height:1.25;
  letter-spacing:-.01em;font-weight:700;color:var(--i-ink);
}
#page-infrastructure p.i-bay__para{
  font-size:16px;line-height:1.72;color:var(--i-text-2);
}

/* ---------- KEY INFRASTRUCTURE FEATURES ---------- */
#page-infrastructure .i-feat{
  background:var(--i-card);
  padding:clamp(52px,7vw,100px) 0;
  border-top:1px solid var(--i-line);
}
#page-infrastructure .i-feat__h2{
  margin:0;
  font-size:clamp(30px,3.6vw,44px);line-height:1.14;
  letter-spacing:-.02em;font-weight:800;color:var(--i-ink);
}
#page-infrastructure p.i-feat__para{
  margin:18px 0 0;max-width:820px;
  font-size:17px;line-height:1.75;color:var(--i-text-2);
}
/* min(Npx,100%) not a bare Npx: a bare track minimum cannot shrink below
   its floor, so at 320px viewport the 272px wrap was forced to 320px and
   the document scrolled sideways. */
#page-infrastructure .i-checks{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:12px 28px;
  margin-top:clamp(28px,3.5vw,42px);
}
#page-infrastructure .i-checks li{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;
  background:var(--i-paper);
  border-left:3px solid var(--i-signal);
  border-radius:3px;
}
#page-infrastructure .i-checks img{display:block;flex:none;margin-top:3px;}
#page-infrastructure .i-checks span{
  font-size:16px;line-height:1.6;color:var(--i-text);
}

/* ---------- AREA WE SERVE ---------- */
#page-infrastructure .i-area{
  background:var(--i-paper);
  padding:clamp(52px,7vw,96px) 0;
  border-top:1px solid var(--i-line);
}
#page-infrastructure .i-area__h2{
  margin:0 0 34px;
  font-size:clamp(30px,3.6vw,44px);line-height:1.14;
  letter-spacing:-.02em;font-weight:800;color:var(--i-ink);
}
#page-infrastructure .i-area__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(248px,100%),1fr));
  gap:clamp(18px,2.6vw,26px);
}
#page-infrastructure .i-place{
  background:var(--i-card);
  border:1px solid var(--i-line);
  border-top:3px solid var(--i-signal);
  border-radius:3px;
  padding:24px 22px 26px;
}
#page-infrastructure .i-place__h3{
  margin:0 0 14px;
  font-size:16px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--i-signal);
}
#page-infrastructure p.i-place__tel{margin:0 0 10px;}
#page-infrastructure .i-place__tel a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:18px;font-weight:700;color:var(--i-ink);
}
#page-infrastructure .i-place__tel a:hover{color:var(--i-signal);}
#page-infrastructure p.i-place__addr{
  font-size:16px;line-height:1.65;color:var(--i-text-2);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:940px){
  #page-infrastructure .i-plate__grid,
  #page-infrastructure .i-support__head{grid-template-columns:1fr;}
  #page-infrastructure .i-plate__fig{order:-1;}
}
@media (max-width:560px){
  #page-infrastructure .i-plate__fig img{max-width:240px;}
}

@media (prefers-reduced-motion:reduce){
  #page-infrastructure *,
  #page-infrastructure *::before,
  #page-infrastructure *::after{
    animation:none !important;transition-duration:.01ms !important;
  }
}

/* ── ENQUIRY FORM (restored; see restore-enquiry-forms.py) ─────────── */
#page-infrastructure .i-enquiry{padding:54px 0;}
#page-infrastructure .i-enquiry__frame{
  display:block;width:100%;border:0;min-height:860px;background:#fff;
}
@media (max-width:640px){
  #page-infrastructure .i-enquiry__frame{min-height:900px;}
}