/* ============================================================================
   PipeCo UK Ltd — custom.css  (design pass: "Industrial Engineering")
   Loaded AFTER styles.css + the inline brand-token block, so it wins the cascade.
   Theme: steel-blue + deep navy, blueprint motifs, technical mono labels, and a
   graphic (photo-free) hero — an engineered look that sets it apart from the
   generic generator skeleton.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  --font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --steel: #2E6A95;
  --steel-deep: #0E2536;
  --steel-mid: #1d3f5c;
  --line: #d7dee6;
  --blueprint: rgba(46,106,149,.10);
  --radius: 4px;
}

body { letter-spacing: -0.005em; }
h1, h2, h3, h4 { font-family: var(--font-heading); letter-spacing: -0.02em; }

/* ---- Header: keep light (logo has white bg) but tighten + lift ------------ */
.site-header { box-shadow: 0 1px 0 var(--line); border-bottom: none; }
.nav-logo img { height: 46px; max-width: 240px; }
.nav-links a { font-weight: 600; letter-spacing: .01em; }
.nav-cta { letter-spacing: .02em; box-shadow: 0 6px 18px rgba(46,106,149,.28); }

/* ---- Technical mono labels everywhere ------------------------------------ */
.x-eyebrow {
  background: transparent; color: #cfe0ee; font-family: var(--font-mono);
  border: 1px solid rgba(255,255,255,.28); border-radius: 3px;
  letter-spacing: .22em; font-weight: 600; padding: 6px 13px;
}
.x-head .k, .x-stat .lbl { font-family: var(--font-mono); }
.x-head .k { display: inline-flex; align-items: center; gap: 10px; }
.x-head .k::before { content: ""; width: 26px; height: 2px; background: var(--steel); display: inline-block; }

/* ---- HERO: photo-free, engineered. Blueprint grid + glow + diagonal ------ */
.x-hero--gradient {
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(46,106,149,.55), transparent 60%),
    linear-gradient(155deg, #0b1f2f 0%, var(--steel-deep) 48%, #0a1c2a 100%);
  border-bottom: 3px solid var(--steel);
}
/* blueprint grid overlay */
.x-hero--gradient::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(120deg, #000 25%, transparent 78%);
          mask-image: linear-gradient(120deg, #000 25%, transparent 78%);
}
.x-hero .container { padding-top: 132px; padding-bottom: 80px; max-width: var(--container-max); }
.x-hero h1 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -.03em; max-width: 20ch; }
.x-hero .x-sub { color: rgba(255,255,255,.85); max-width: 52ch; }
.x-chip { color: rgba(255,255,255,.92); }
.x-chip svg { color: var(--steel); }
.x-btn-primary { background: var(--steel); box-shadow: 0 14px 34px rgba(46,106,149,.4); }
.x-btn-primary:hover { background: #3a7db0; }

/* Decorative isometric pipework graphic injected into the hero (right side) */
.pc-hero-art {
  position: absolute; right: -40px; top: 50%; transform: translateY(-50%);
  width: min(46vw, 620px); height: auto; z-index: 1; opacity: .9;
  pointer-events: none; filter: drop-shadow(0 30px 60px rgba(0,0,0,.45));
}
@media (max-width: 980px) { .pc-hero-art { opacity: .16; right: -80px; width: 90vw; } }

/* ---- STATS: top accent + mono ------------------------------------------- */
.x-stats { border-top: 3px solid var(--steel); }
.x-stat .num { font-family: var(--font-heading); letter-spacing: -.02em; }

/* ---- SERVICE CARDS: light "spec-sheet" cards (no photos) ------------------ */
.x-services { gap: 22px; }
.x-svc {
  background: #fff; color: var(--steel-deep); min-height: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(14,37,54,.04); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.x-svc::after { display: none; }
.x-svc::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--steel); transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease; z-index: 3;
}
.x-svc:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(14,37,54,.13); border-color: #c2cedb; }
.x-svc:hover::before { transform: scaleX(1); }
.x-svc .x-svc-body { padding: 30px 28px 28px; }
.x-svc h3 { color: var(--steel-deep); font-size: 1.32rem; font-weight: 700; }
.x-svc p { color: var(--brand-text-muted); }
.x-svc .x-arrow { color: var(--steel); }
.x-svc .x-arrow span { color: var(--steel); }

/* ---- WHY: framed feature cells ------------------------------------------ */
.x-feat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; }
.x-feat .ic { background: rgba(46,106,149,.10); border-radius: 8px; }
.x-feat h4 { color: var(--steel-deep); }

/* ---- PROCESS: connected steps with mono index ---------------------------- */
.x-steps { counter-reset: step; }
.x-step { position: relative; padding-top: 26px; border-top: 2px solid var(--line); }
.x-step .n { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--steel);
  background: rgba(46,106,149,.10); width: 44px; height: 44px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.x-step h4 { color: var(--steel-deep); }

/* ---- COVERAGE band (replaces clickable area cards on home) ---------------- */
.pc-coverage { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.pc-coverage span {
  font-family: var(--font-mono); font-size: .92rem; font-weight: 500; color: var(--steel-deep);
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 10px 20px;
}
.pc-coverage span::before { content: "◆ "; color: var(--steel); }

/* ---- FAQ + CTA ----------------------------------------------------------- */
.x-faq summary { font-family: var(--font-heading); font-weight: 600; }
.x-bigcta { background: linear-gradient(135deg, var(--steel-deep), var(--steel-mid)); border-top: 3px solid var(--steel); }
.x-bigcta h2 { font-family: var(--font-heading); }

/* ---- Contact enquiry form (spec build, client-side confirm) -------------- */
.pc-form { display: grid; gap: 16px; }
.pc-form label { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel-deep); font-weight: 600; display: block; margin-bottom: 7px; }
.pc-form input, .pc-form textarea, .pc-form select {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; color: var(--steel-deep); background: #fff; transition: border-color .15s, box-shadow .15s;
}
.pc-form input:focus, .pc-form textarea:focus, .pc-form select:focus {
  outline: none; border-color: var(--steel); box-shadow: 0 0 0 3px rgba(46,106,149,.15);
}
.pc-form textarea { min-height: 130px; resize: vertical; }
.pc-form .x-btn { border: none; cursor: pointer; width: fit-content; }
.pc-form-ok { display: none; padding: 18px 20px; border-radius: var(--radius); background: rgba(46,106,149,.10);
  border: 1px solid var(--steel); color: var(--steel-deep); font-weight: 600; }
.pc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.pc-contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 760px) { .pc-contact-grid { grid-template-columns: 1fr; } }