/* HydroStop — Global Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy: #0b1f3a;
  --navy-light: #132d52;
  --blue: #1a4a8a;
  --blue-light: #2563b8;
  --accent: #e8a020;
  --white: #ffffff;
  --off-white: #f8f9fb;
  --grey-light: #eef1f6;
  --grey: #6b7a99;
  --text: #1a2540;
  --radius: 8px;
  --shadow: 0 2px 16px rgba(0,0,0,0.08);
}

body { font-family: 'Inter', 'Segoe UI', Arial, sans-serif; color: var(--text); line-height: 1.65; background: var(--white); -webkit-font-smoothing: antialiased; }

a { color: var(--blue-light); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── HEADER — white so the logo blends seamlessly ── */
.site-header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #e8ecf2;
  box-shadow: 0 2px 20px rgba(0,0,0,0.07);
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  gap: 20px;
}
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 50px; width: auto; display: block; }
.logo span { color: var(--navy); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; }

nav ul { list-style: none; display: flex; gap: 2px; }
nav ul li a {
  color: #374151;
  padding: 8px 13px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  display: block;
}
nav ul li a:hover, nav ul li a.active {
  background: var(--off-white);
  color: var(--navy);
  text-decoration: none;
}

.header-phone { flex-shrink: 0; }
.header-phone a {
  background: var(--accent);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 18px;
  border-radius: var(--radius);
  display: inline-block;
  white-space: nowrap;
  transition: background 0.15s;
}
.header-phone a:hover { background: #f5b030; text-decoration: none; }

/* TOP BAR */
.top-bar { background: var(--navy); color: rgba(255,255,255,0.82); text-align: center; padding: 9px 20px; font-size: 0.82rem; letter-spacing: 0.1px; }
.top-bar a { color: var(--accent); font-weight: 600; }

/* ── HERO — real photo with gradient overlay ── */
.hero {
  position: relative;
  background:
    linear-gradient(105deg, rgba(11,31,58,0.90) 0%, rgba(11,31,58,0.75) 55%, rgba(11,31,58,0.35) 100%),
    url('https://cdn.shopify.com/s/files/1/1051/5732/9235/files/hs-epdm-extension1.jpg') center 40% / cover no-repeat;
  color: var(--white);
  padding: 110px 20px 100px;
}
.hero .container { position: relative; max-width: 1200px; margin: 0 auto; }
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
  max-width: 680px;
  letter-spacing: -1.5px;
}
.hero h1 em { color: var(--accent); font-style: normal; }
.hero p { font-size: 1.1rem; max-width: 560px; margin-bottom: 34px; opacity: 0.88; line-height: 1.75; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.hero-badge {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.92);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* BUTTONS */
.cta-group { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, opacity 0.15s;
  white-space: nowrap;
  letter-spacing: -0.2px;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--navy); box-shadow: 0 4px 14px rgba(232,160,32,0.35); }
.btn-primary:hover { background: #f5b030; box-shadow: 0 6px 20px rgba(232,160,32,0.4); }
.btn-outline { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.55); }
.btn-outline:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.9); }
.btn-blue { background: var(--blue-light); color: var(--white); }
.btn-blue:hover { background: #1d57d0; }
.btn-sm { padding: 10px 20px; font-size: 0.88rem; }

/* ── TRUST BAR — dark for impact under hero ── */
.trust-bar { background: var(--navy); padding: 22px 20px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.trust-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: center; }
.trust-item { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.85); letter-spacing: 0.1px; }
.trust-item .icon { font-size: 1.1rem; }

/* PLATFORMS BAR */
.platforms-bar { background: #f3f5f9; padding: 22px 20px; border-bottom: 1px solid #e4e8f0; }
.platforms-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: center; }
.platforms-inner span { color: #94a3b8; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; }
.platforms-inner img { height: 34px; width: auto; opacity: 0.75; filter: grayscale(40%); transition: opacity 0.2s, filter 0.2s; }
.platforms-inner img:hover { opacity: 1; filter: none; }

/* ── CONTENT SECTIONS ── */
.section { padding: 66px 20px; }
.section-alt { background: var(--off-white); }
.container { max-width: 1200px; margin: 0 auto; }
.section-label {
  color: var(--blue-light);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: block;
}
h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 18px;
  line-height: 1.15;
  letter-spacing: -0.5px;
}
h3 { font-size: 1.1rem; font-weight: 700; color: var(--navy); margin-bottom: 10px; letter-spacing: -0.2px; }
.lead { font-size: 1.05rem; color: var(--grey); max-width: 680px; margin-bottom: 26px; line-height: 1.7; }
p { margin-bottom: 14px; }

/* CARDS */
.card-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05);
  padding: 28px;
  border: 1px solid #e8ecf4;
  transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.12); transform: translateY(-3px); }
.card h3 { margin-bottom: 8px; font-size: 1.05rem; }
.card p { color: var(--grey); font-size: 0.91rem; margin-bottom: 14px; line-height: 1.6; }
.card a.card-link { font-weight: 700; font-size: 0.88rem; color: var(--blue-light); }

/* 2-COL */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
@media(max-width: 768px) { .two-col { grid-template-columns: 1fr; gap: 40px; } }

/* STATS */
.stats { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; }
.stat { text-align: center; }
.stat-num { font-size: 2.4rem; font-weight: 800; color: var(--blue-light); letter-spacing: -1px; }
.stat-label { font-size: 0.85rem; color: var(--grey); font-weight: 600; }

/* CHECKLIST */
.checklist { list-style: none; }
.checklist li { padding: 8px 0 8px 28px; position: relative; font-size: 0.95rem; border-bottom: 1px solid var(--grey-light); line-height: 1.6; }
.checklist li:last-child { border-bottom: none; }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--blue-light); font-weight: 700; }

/* NUMBERED STEPS */
.steps { display: grid; gap: 24px; }
.step { display: flex; gap: 18px; align-items: flex-start; }
.step-num { background: var(--blue-light); color: var(--white); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.95rem; flex-shrink: 0; }
.step-body h3 { margin-bottom: 4px; }
.step-body p { color: var(--grey); font-size: 0.92rem; margin: 0; }

/* ACCREDITATIONS */
.accred-bar { background: #fff; border-top: 1px solid var(--grey-light); border-bottom: 1px solid var(--grey-light); padding: 32px 20px; }
.accred-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: center; }
.accred-inner span { color: #94a3b8; font-size: 0.73rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; }
.accred-inner img { height: 50px; width: auto; opacity: 0.85; filter: grayscale(15%); transition: opacity 0.2s; }
.accred-inner img:hover { opacity: 1; filter: none; }

/* BREADCRUMB */
.breadcrumb { background: var(--grey-light); padding: 12px 20px; font-size: 0.8rem; color: var(--grey); }
.breadcrumb a { color: var(--grey); }
.breadcrumb span { margin: 0 6px; }

/* PAGE HERO (inner pages) */
.page-hero {
  background:
    linear-gradient(135deg, rgba(11,31,58,0.95) 0%, rgba(26,74,138,0.85) 100%),
    url('https://cdn.shopify.com/s/files/1/1051/5732/9235/files/hs-epdm-extension1.jpg') center/cover no-repeat;
  color: var(--white);
  padding: 60px 20px 52px;
}
.page-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; margin-bottom: 14px; letter-spacing: -0.5px; }
.page-hero .badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.page-hero .badges span { background: rgba(255,255,255,0.11); border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.9); padding: 5px 13px; border-radius: 100px; font-size: 0.79rem; font-weight: 600; }

/* SERVICE SIDEBAR */
.page-layout { display: grid; grid-template-columns: 1fr 300px; gap: 44px; max-width: 1200px; margin: 0 auto; padding: 52px 20px; }
@media(max-width: 960px) { .page-layout { grid-template-columns: 1fr; } }
.sidebar { display: flex; flex-direction: column; gap: 22px; }
.sidebar-box { background: var(--off-white); border: 1px solid var(--grey-light); border-radius: 12px; padding: 24px; }
.sidebar-box h3 { font-size: 1rem; margin-bottom: 14px; color: var(--navy); }
.sidebar-box ul { list-style: none; }
.sidebar-box ul li { padding: 7px 0; border-bottom: 1px solid var(--grey-light); font-size: 0.9rem; }
.sidebar-box ul li:last-child { border-bottom: none; }
.sidebar-box ul li a { color: var(--blue-light); font-weight: 600; }

/* CTA SECTION */
.cta-section {
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  color: var(--white);
  text-align: center;
  padding: 62px 20px;
}
.cta-section h2 { color: var(--white); margin-bottom: 14px; }
.cta-section p { opacity: 0.88; max-width: 540px; margin: 0 auto 32px; font-size: 1.05rem; }

/* CONTACT FORM */
.contact-form { background: var(--white); border-radius: 16px; box-shadow: 0 1px 3px rgba(11,31,58,0.06), 0 12px 40px rgba(11,31,58,0.10); padding: 34px; border: 1px solid #e6ebf3; }
.form-group { margin-bottom: 22px;
 }
.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--navy);
  margin-bottom: 7px;
  letter-spacing: -0.1px;
}
.form-group label .req { color: #c0392b; margin-left: 2px; }

/* One rule for every control, so a select can never look like a different
   species to the text input above it — which is exactly what was happening. */
.form-group input,
.form-group select,
.form-group textarea,
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  display: block;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--white);
  padding: 13px 15px;
  border: 1.5px solid #d8dfea;
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.form-group textarea, .contact-form textarea { min-height: 130px; resize: vertical; line-height: 1.6; }

/* Selects lose their arrow to appearance:none, so it is drawn back on. */
.form-group select, .contact-form select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%236b7a99' d='M1.4 0 7 5.6 12.6 0 14 1.4 7 8.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 42px;
  cursor: pointer;
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: #9aa7bd; }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(37,99,184,0.14);
}

/* A required field that has been filled in wrong should say so before the
   customer hits submit and loses the lot. :not(:placeholder-shown) means it
   only scolds them once they have actually typed something. */
.form-group input:not(:placeholder-shown):invalid { border-color: #e0a1a1; }

.contact-form .btn, .contact-form button[type="submit"] { width: 100%; margin-top: 4px; }
.form-note { font-size: 0.8rem; color: var(--grey); margin-top: 14px; text-align: center; line-height: 1.55; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; gap: 0; } }

/* ── FOOTER ── */
footer {
  background: var(--navy);
  color: rgba(255,255,255,0.72);
  padding: 60px 20px 0;
  font-size: 0.9rem;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 46px;
}
.footer-brand p { color: rgba(255,255,255,0.62); font-size: 0.88rem; line-height: 1.7; max-width: 330px; }
.footer-logo {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}
.footer-col h4 {
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 9px; line-height: 1.5; }
.footer-col ul li a {
  color: rgba(255,255,255,0.66);
  font-size: 0.875rem;
  transition: color 0.15s;
}
.footer-col ul li a:hover { color: var(--accent); text-decoration: none; }
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 22px 0 26px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
}

@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 34px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  footer { padding-top: 44px; }
  .footer-inner { grid-template-columns: 1fr; gap: 30px; }
  .footer-brand p { max-width: none; }
}

/* ── THE LOGO ──
   The markup points at https://hydrostopuk.co.uk/cdn/shop/files/hs-logo.jpg —
   an image on the old Shopify store. That store is going away, which is why
   the header currently shows no logo at all, just the fallback text.
   The real logo now lives in the repo at /hs-logo.png, so it cannot break
   again when that store is switched off. The <img> is hidden and its text is
   kept for screen readers. */
.logo {
  background: url("/hs-logo.png") left center / auto 44px no-repeat;
  width: 119px;
  height: 50px;
  flex-shrink: 0;
}
.logo img { display: none !important; }
.logo span {
  display: block !important;
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── IMAGES ── */
.img-full { width: 100%; height: auto; display: block; border-radius: 12px; }

/* ── MOBILE MENU ──
   The button was rendering as a bare ▤ glyph in the middle of the header
   because it had no styling whatsoever. */
.mobile-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  color: var(--navy);
  font-size: 1.3rem;
  line-height: 1;
  padding: 8px 12px;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
}
.mobile-menu-btn:hover { background: var(--off-white); }

@media (max-width: 980px) {
  .header-inner { height: 64px; gap: 12px; }
  .mobile-menu-btn { display: block; order: 3; }
  .header-phone { order: 2; margin-left: auto; }
  nav {
    order: 4;
    display: none;
    width: 100%;
    border-top: 1px solid #e8ecf2;
    padding: 8px 0 12px;
  }
  nav.open { display: block; }
  .header-inner { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 0; }
  nav ul { flex-direction: column; gap: 0; }
  nav ul li a { padding: 13px 4px; border-radius: 0; font-size: 0.95rem; min-height: 44px; }
  nav ul li + li a { border-top: 1px solid #f0f3f7; }
}

@media (max-width: 640px) {
  .hero { padding: 66px 20px 58px; }
  .hero p { font-size: 1rem; }
  .section { padding: 54px 20px; }
  .cta-section { padding: 56px 20px; }
  .contact-form { padding: 24px 20px; }
  .cta-group { flex-direction: column; align-items: stretch; }
  .cta-group .btn { text-align: center; width: 100%; }
  .header-phone a { padding: 9px 14px; font-size: 0.85rem; }
  .trust-inner { gap: 14px 22px; }
  .trust-item { font-size: 0.8rem; }
  .page-layout { padding: 40px 20px; gap: 36px; }
  .stats { gap: 22px; }
  .stat-num { font-size: 2rem; }
}

/* Nothing on a touch screen should be smaller than a fingertip. */
@media (max-width: 980px) {
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .footer-col ul li a, .sidebar-box ul li a { display: inline-block; padding: 3px 0; }
}


/* ── SPACING AND FINISH (added in the audit) ───────────────────────────────
   Two sections of the same background colour stacked together produced a
   single enormous band of nothing. Collapsing the padding where they meet is
   what removes the "massive gaps" without making any one section cramped. */
.section:not(.section-alt) + .section:not(.section-alt) { padding-top: 0; }
.section-alt + .section-alt { padding-top: 0; }
.section > .container > .two-col:last-child,
.section > .container > .card-grid:last-child { margin-bottom: 0; }
.section p:last-child, .section .container > *:last-child { margin-bottom: 0; }

h2 + .lead { margin-top: -4px; }
.section-label + h2 { margin-top: 0; }

/* Images sitting beside text should end level with it rather than leaving a
   ragged column of white down one side. */
.two-col img.img-full { width: 100%; height: auto; border-radius: 12px; }
.two-col > div > img.img-full + img.img-full { margin-top: 14px; }

/* The bars either side of the hero were carrying more air than content. */
.trust-bar { padding: 18px 20px; }
.platforms-bar { padding: 18px 20px; }
.accred-bar { padding: 26px 20px; }

/* Emoji in the trust bar read as clip-art next to a professional logo. The
   glyphs are replaced with a single brand-coloured tick, which is quieter and
   does not change on different phones the way emoji do. */
.trust-item .icon { display: none; }
.trust-item::before {
  content: "✓";
  color: var(--accent);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
}

/* A heading immediately under a dark band needs air above it or it reads as
   part of the band. */
.trust-bar + .section, .platforms-bar + .section, .page-hero + .section { padding-top: 52px; }

/* ── FORM, FINAL PASS ── */
.contact-form h2 { font-size: 1.5rem; letter-spacing: -0.4px; }
.contact-form .form-group { margin-bottom: 18px; }
.contact-form button[type="submit"] { box-shadow: 0 4px 14px rgba(232,160,32,0.35); }
.form-note a { color: var(--blue-light); }

@media (max-width: 640px) {
  .section { padding: 46px 18px; }
  .cta-section { padding: 48px 18px; }
  .contact-form { padding: 22px 18px; border-radius: 14px; }
  .two-col { gap: 32px; }
  h2 { margin-bottom: 14px; }
  .lead { margin-bottom: 22px; font-size: 1rem; }
  .page-hero { padding: 42px 18px 38px; }
  .page-layout { padding: 34px 18px; gap: 30px; }
  .trust-bar, .platforms-bar { padding: 15px 18px; }
  .trust-bar + .section, .platforms-bar + .section, .page-hero + .section { padding-top: 38px; }
}

/* ── LOGO BLENDING (final audit pass) ──────────────────────────────────────
   The MyBuilder, Rated People, MyJobQuote and Bark badges are JPGs with baked
   white backgrounds, so on the light grey bar each one sat in a visible white
   rectangle. multiply blends white into whatever is behind it, which removes
   the boxes without needing the images re-cut. */
.platforms-inner img, .accred-inner img { mix-blend-mode: multiply; }
.platforms-inner img { max-width: 130px; object-fit: contain; }

/* The footer brand was the word "HydroStop" set in bold — no mark at all.
   The emblem alone is used here rather than the full lockup, because the
   lockup's navy wordmark is invisible on a navy footer. */
.footer-logo {
  display: flex;
  align-items: center;
  gap: 11px;
}
.footer-logo::before {
  content: "";
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: url("/favicon-180.png") center / contain no-repeat;
}

/* Long service lists in the footer were running to seven rows on a phone and
   pushing the contact details off the bottom of a thumb's reach. */
@media (max-width: 560px) {
  .footer-col ul li { margin-bottom: 6px; }
  .footer-logo::before { width: 34px; height: 34px; }
}