/* ==========================================================================
   INLINE PLUMBING & RENOVATIONS - PREMIUM DESIGN SYSTEM
   Professional, corporate-grade style guidelines. 
   Focus: Prussian Navy, clean architectural lines, micro-interactions, 
   glassmorphism, and elegant editorial typography.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS & VARIABLES
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  /* Core Brand: Corporate Master Plumbing (Deep Prussian Navy) */
  --primary-navy: #0a1128;      /* Rich, authoritative deep navy */
  --accent-blue: #1d4ed8;       /* Clean, professional engineering blue */
  --accent-teal: #06b6d4;       /* Water accent */
  --text-primary: #0f172a;     /* Dark slate for body copy */
  --text-muted: #475569;        /* Muted slate for captions */
  --bg-base: #f8fafc;           /* Light, luxurious off-white background */
  --bg-card: #ffffff;           
  --border-light: rgba(15, 23, 42, 0.08);
  --border-focus: #1d4ed8;

  /* Sub-Brand: Bathroom Renovations (Luxury Architectural Editorial) */
  --bath-charcoal: #1e1e1e;     /* Deep modern charcoal */
  --bath-sand: #dad3c7;         /* Warm stone/sand neutral */
  --bath-gold: #b49a5c;         /* Premium brass gold */
  --bath-gold-hover: #9c7a43;
  --bath-cream: #faf8f5;        /* Soft ivory backdrop */
  --bath-border: rgba(180, 154, 92, 0.2);

  /* Sub-Brand: Nuflow Trenchless (Technical High-Performance) */
  --nuflow-navy: #091026;       /* Ultra dark technical slate */
  --nuflow-green: #10b981;      /* Technical emerald green */
  --nuflow-sky: #38bdf8;        /* Flow blue */
  --nuflow-slate: #f1f5f9;
  --nuflow-border: rgba(16, 185, 129, 0.2);

  /* Typography & Layout Spacing */
  --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-serif: 'Cormorant Garamond', serif;
  --font-display: 'Montserrat', sans-serif;
  
  --transition-premium: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: all 0.2s ease;
  
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  
  --shadow-sm: 0 2px 8px rgba(10, 17, 40, 0.04);
  --shadow-md: 0 10px 30px rgba(10, 17, 40, 0.06);
  --shadow-lg: 0 20px 50px rgba(10, 17, 40, 0.1);
  --shadow-bath: 0 30px 60px rgba(30, 30, 30, 0.12);
}

/* --------------------------------------------------------------------------
   2. REFINED GLOBAL STYLES
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-body);
  color: var(--text-primary);
  background-color: var(--bg-base);
  line-height: 1.6;
}

body {
  overflow-x: hidden;
  background-color: var(--bg-base);
  transition: background-color 0.4s ease;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--primary-navy);
  letter-spacing: -0.5px;
}

/* --------------------------------------------------------------------------
   3. GLASSMORPHIC CORPORATE HEADER
   -------------------------------------------------------------------------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  transition: var(--transition-premium);
}

.header-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 1.1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 150px: the solid wordmark is a single line of type (6.2:1), where the old
   two-line lockup was 3.8:1 — at 120px it rendered only 20px tall and read as
   an afterthought beside the nav. Mobile overrides below are unaffected. */
.logo-img-box {
  width: 150px;
  height: auto;
  display: flex;
  align-items: center;
}

.logo-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--border-radius-sm);
}

.logo-text {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--primary-navy);
  letter-spacing: 1px;
  text-transform: uppercase;
  border-left: 2px solid var(--accent-blue);
  padding-left: 12px;
}

.logo-text span {
  color: var(--accent-blue);
}

nav ul {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.nav-link {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  position: relative;
  padding: 0.5rem 0;
  cursor: pointer;
  font-family: var(--font-display);
  transition: var(--transition-fast);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent-blue);
  transition: var(--transition-fast);
}

.nav-link.active {
  color: var(--primary-navy);
}

.nav-link.active::after {
  width: 100%;
}

.nav-cta {
  background: var(--primary-navy);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: var(--transition-premium);
}

.nav-cta:hover {
  background: var(--accent-blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(29, 78, 216, 0.25);
}

/* Header dynamic adjustments based on active page theme */
header.theme-bathrooms {
  background: rgba(30, 30, 30, 0.9);
  border-bottom: 1px solid rgba(218, 211, 199, 0.15);
}
header.theme-bathrooms .logo-img {
  filter: brightness(0) invert(1);
}
header.theme-bathrooms .logo-text {
  color: var(--bath-cream);
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 1.5px;
  border-left-color: var(--bath-gold);
}
header.theme-bathrooms .logo-text span {
  color: var(--bath-gold);
}
header.theme-bathrooms .nav-link {
  color: var(--bath-sand);
}
header.theme-bathrooms .nav-link.active {
  color: var(--bath-gold);
}
header.theme-bathrooms .nav-link::after {
  background-color: var(--bath-gold);
}
header.theme-bathrooms .nav-cta {
  background: var(--bath-gold);
  color: var(--bath-charcoal);
  border-radius: 0;
}
header.theme-bathrooms .nav-cta:hover {
  background: var(--bath-cream);
}

header.theme-nuflow {
  background: rgba(9, 16, 38, 0.9);
  border-bottom: 1px solid rgba(16, 185, 129, 0.15);
}
/* The solid navy wordmark would disappear against this header's navy, so it
   gets the same knock-to-white treatment the bathrooms theme uses. */
header.theme-nuflow .logo-img {
  filter: brightness(0) invert(1);
}
header.theme-nuflow .logo-text {
  color: white;
  border-left-color: var(--nuflow-green);
}
header.theme-nuflow .logo-text span {
  color: var(--nuflow-green);
}
header.theme-nuflow .nav-link {
  color: rgba(255, 255, 255, 0.7);
}
header.theme-nuflow .nav-link.active {
  color: var(--nuflow-green);
}
header.theme-nuflow .nav-link::after {
  background-color: var(--nuflow-green);
}
header.theme-nuflow .nav-cta {
  background: var(--nuflow-green);
}
header.theme-nuflow .nav-cta:hover {
  background: white;
  color: var(--nuflow-navy);
}

/* --------------------------------------------------------------------------
   4. SPA PAGE CONTAINER & SECTIONS
   -------------------------------------------------------------------------- */
.spa-page {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  padding-top: 80px;
}

.spa-page.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   5. PAGE 1: CORPORATE PLUMBING CORE (DEEP NAVY)
   -------------------------------------------------------------------------- */
.plumbing-hero {
  position: relative;
  /* Real crew, real Christchurch job — pulled from the drone footage. Shared by
     the home page and every service hero via .service-hero. */
  background: linear-gradient(135deg, rgba(10, 17, 40, 0.96) 0%, rgba(10, 17, 40, 0.85) 50%, rgba(10, 17, 40, 0.2) 100%), url('photos/hero-inline-crew-drainage-trench.webp') no-repeat center right;
  background-size: cover;
  padding: 11rem 2rem 9rem 2rem;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  min-height: 85vh;
}

.plumbing-hero-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.hero-text-content {
  max-width: 650px;
}

.hero-badge-emergency {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.25);
  color: var(--accent-teal);
  padding: 0.6rem 1.2rem;
  border-radius: 50px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2rem;
}

.hero-title-main {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.1;
  color: white;
  margin-bottom: 1.8rem;
  letter-spacing: -2px;
  text-shadow: 0 2px 10px rgba(10, 17, 40, 0.5);
}

.hero-title-main span {
  color: var(--accent-teal);
}

.hero-subtitle {
  font-size: 1.1rem;
  color: rgba(248, 250, 252, 0.85);
  margin-bottom: 3rem;
  max-width: 580px;
  line-height: 1.8;
  text-shadow: 0 1px 5px rgba(10, 17, 40, 0.5);
}

.hero-actions {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

/* These are <a> elements, so without an explicit display they are inline. A
   label that wraps then splits the background into two fragments with the
   vertical padding applied only to the first and last line — which is what put
   "RELINED" outside the blue box on the Nuflow page at 375px. inline-flex keeps
   the button a single box and centres a wrapped label inside it. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--accent-blue);
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  padding: 1.1rem 2.4rem;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-premium);
}

.btn-primary:hover {
  background: #2563eb;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(29, 78, 216, 0.25);
}

/* Same fragmenting-inline problem as .btn-primary above. */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 1rem 2.4rem;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: var(--transition-premium);
}

.btn-outline:hover {
  background: white;
  color: var(--primary-navy);
  border-color: white;
  transform: translateY(-3px);
}

.hero-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* Three tags since the Sep 2026 review (emergency / residential / industrial),
   so the row must be allowed to wrap on narrow screens. */
.hero-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
}

.plumbing-hero .trust-badge-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.95);
}

.plumbing-hero .trust-badge-item svg {
  width: 24px;
  height: 24px;
  color: var(--accent-teal);
  flex-shrink: 0;
}

/* Glassmorphic floating trust card */
.floating-trust-pill {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius-md);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: var(--transition-premium);
}

.hero-inline-pill {
  position: static !important;
  transform: none !important;
}

.plumbing-hero .floating-pill-info h4 {
  color: white !important;
}

.plumbing-hero .floating-pill-info p {
  color: rgba(248, 250, 252, 0.75) !important;
}

.plumbing-hero .floating-pill-avatar {
  background: rgba(6, 182, 212, 0.15) !important;
  color: var(--accent-teal) !important;
}

.floating-trust-pill:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.15);
}

.floating-pill-avatar {
  background: rgba(29, 78, 216, 0.08);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.floating-pill-info h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--primary-navy);
  margin-bottom: 2px;
}

.floating-pill-info p {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hero-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin-top: 1.5rem;
}

.trust-badge-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--primary-navy);
}

.trust-badge-item svg {
  width: 24px;
  height: 24px;
  color: var(--accent-blue);
  flex-shrink: 0;
}

/* Dynamic Brand Portal */
.brand-portal-grid-section {
  max-width: 1200px;
  margin: -4rem auto 6rem auto;
  padding: 0 2rem;
  position: relative;
  z-index: 10;
}

.portal-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.portal-card {
  background: white;
  border-radius: var(--border-radius-lg);
  padding: 3.5rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition-premium);
  position: relative;
  overflow: hidden;
}

/* Beautiful unified brand top accent line */
.portal-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-teal) 100%);
}

.portal-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(29, 78, 216, 0.15);
}

.portal-tag {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-blue);
  margin-bottom: 1.2rem;
}

.portal-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-navy);
  margin-bottom: 1rem;
  letter-spacing: -0.5px;
}

.portal-desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

.portal-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-blue);
  cursor: pointer;
  transition: var(--transition-fast);
}

.portal-action-btn:hover {
  color: var(--primary-navy);
}

.portal-action-btn svg {
  transition: var(--transition-fast);
  stroke: currentColor;
}

.portal-action-btn:hover svg {
  transform: translateX(6px);
}

/* Accreditation Banner */
.accreditation-bar {
  background: white;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 2.5rem 2rem;
}

.accreditation-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 2rem;
}

.accreditation-item {
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--primary-navy);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.accreditation-item .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: rgba(29, 78, 216, 0.04);
  border: 1px solid rgba(29, 78, 216, 0.08);
  border-radius: var(--border-radius-md);
  transition: var(--transition-premium);
}

.accreditation-item:hover .icon {
  background: rgba(29, 78, 216, 0.08);
  border-color: rgba(29, 78, 216, 0.2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.accreditation-svg {
  width: 32px;
  height: 32px;
  transition: var(--transition-premium);
}

.accreditation-item:hover .accreditation-svg {
  transform: scale(1.05);
}

/* Corporate Pricing / Guarantee Columns */
.corporate-details-section {
  padding: 7rem 2rem;
  background: white;
  border-bottom: 1px solid var(--border-light);
}

.corporate-details-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 6rem;
  max-width: 1200px;
  margin: 0 auto;
}

.detail-column-left h2 {
  font-size: 2.5rem;
  color: var(--primary-navy);
  margin-bottom: 1.5rem;
}

.detail-column-left p {
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 2rem;
}

.guarantee-box {
  background: var(--bg-base);
  border: 1px solid var(--border-light);
  border-left: 5px solid var(--accent-blue);
  padding: 2.5rem;
  border-radius: var(--border-radius-md);
}

.guarantee-box h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--primary-navy);
  margin-bottom: 0.8rem;
}

.guarantee-box p {
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* Pricing Grid Column */
.pricing-breakdown-card {
  background: var(--bg-base);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-lg);
  padding: 3rem;
  box-shadow: var(--shadow-sm);
}

.pricing-header {
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}

.pricing-header h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--primary-navy);
}

.pricing-header p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

.rate-row {
  display: flex;
  justify-content: space-between;
  padding: 1.2rem 0;
  border-bottom: 1px dashed rgba(0,0,0,0.06);
}

.rate-row:last-of-type {
  border-bottom: none;
}

.rate-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
}

.rate-label span {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 2px;
}

.rate-value {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent-blue);
  font-size: 1.15rem;
  text-align: right;
}

/* --------------------------------------------------------------------------
   6. PAGE 2: INLINE BATHROOMS (QUIET LUXURY CHARCOAL & GOLD)
   -------------------------------------------------------------------------- */
.bath-page-root {
  background-color: var(--bath-cream);
  color: var(--bath-text);
  font-family: var(--font-body);
}

.bath-hero {
  position: relative;
  background: linear-gradient(135deg, rgba(30, 30, 30, 0.95) 0%, rgba(30, 30, 30, 0.82) 50%, rgba(30, 30, 30, 0.25) 100%), url('luxury_bathroom.webp') no-repeat center right;
  background-size: cover;
  padding: 12rem 2rem 10rem 2rem;
  border-bottom: 1px solid rgba(218, 211, 199, 0.1);
  display: flex;
  align-items: center;
  min-height: 85vh;
}

.bath-hero-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4rem;
}

.bath-tagline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--bath-gold);
  margin-bottom: 1.5rem;
  display: block;
}

.bath-title-main {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 4.2rem;
  line-height: 1.1;
  letter-spacing: 1px;
  margin-bottom: 2rem;
  color: var(--bath-cream);
}

.bath-title-main span {
  font-style: italic;
  font-weight: 400;
  color: var(--bath-gold);
}

.bath-desc-hero {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.1rem;
  line-height: 1.9;
  color: var(--bath-sand);
  margin-bottom: 3.5rem;
}

/* Same fragmenting-inline problem as .btn-primary. Not currently broken — the
   bathrooms labels happen to be short — but it is the same latent bug. */
.btn-bath-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--bath-gold);
  color: var(--bath-charcoal);
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 1.25rem 2.8rem;
  cursor: pointer;
  transition: var(--transition-premium);
}

.btn-bath-gold:hover {
  background: var(--bath-cream);
  color: var(--bath-charcoal);
}

.bath-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
}

.bath-hero-image-box {
  display: none;
}

.bath-experience-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--bath-cream);
  border: 1px solid rgba(218, 211, 199, 0.2);
  padding: 3rem;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
  border-radius: var(--border-radius-md);
}

.bath-experience-card h3 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  margin-bottom: 0.8rem;
  color: var(--bath-gold);
}

.bath-experience-card p {
  font-size: 0.9rem;
  color: var(--bath-sand);
  line-height: 1.7;
}

/* 5-Step Project Roadmap */
.bath-roadmap-section {
  padding: 9rem 2rem;
  background: var(--bath-cream);
}

.timeline-container {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  padding: 2rem 0;
}

.timeline-container::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background-color: var(--bath-sand);
  transform: translateX(-50%);
}

.timeline-step-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  margin-bottom: 6rem;
  position: relative;
}

.timeline-step-item:last-of-type {
  margin-bottom: 0;
}

.timeline-step-item:nth-of-type(even) .timeline-step-content {
  grid-column: 2;
}

.timeline-step-item:nth-of-type(even) .timeline-step-info {
  grid-column: 1;
  text-align: right;
}

.timeline-dot {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 16px;
  height: 16px;
  background-color: var(--bath-gold);
  border-radius: 50%;
  transform: translateX(-50%);
  border: 4px solid var(--bath-cream);
  z-index: 5;
}

.timeline-step-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.timeline-number {
  font-family: var(--font-serif);
  font-size: 4rem;
  color: var(--bath-sand);
  font-weight: 300;
  line-height: 1;
}

.timeline-step-content h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.8rem;
  color: var(--bath-charcoal);
  margin-bottom: 0.8rem;
}

.timeline-step-content p {
  font-size: 0.95rem;
  color: var(--bath-text-light);
  line-height: 1.8;
}

/* Before/After Drag Slider section */
.bath-slider-section {
  padding: 9rem 2rem;
  background-color: #f3eff0;
  border-top: 1px solid var(--bath-sand);
}

.slider-narrative {
  text-align: center;
  margin-bottom: 5rem;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.slider-narrative h2 {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 400;
  margin-bottom: 1.2rem;
}

.slider-narrative p {
  color: var(--bath-text-light);
  font-size: 1rem;
  font-weight: 300;
}

.before-after-slider-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 520px;
  margin: 0 auto;
  overflow: hidden;
  border: 8px solid white;
  box-shadow: var(--shadow-lg);
}

.slider-image-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slider-image-layer.after-layer {
  background-size: cover;
  background-position: center;
}

.slider-image-layer.before-layer {
  width: 50%;
  z-index: 2;
  overflow: hidden;
  filter: grayscale(80%) contrast(90%);
  background-size: cover;
  background-position: center;
}

.before-label-text {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 0.5rem 1.2rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 1px;
  font-weight: 700;
  border-radius: var(--border-radius-sm);
}

.after-label-text {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--bath-gold);
  color: var(--bath-charcoal);
  padding: 0.5rem 1.2rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 1px;
  font-weight: 700;
  border-radius: var(--border-radius-sm);
  z-index: 5;
}

.slider-handle-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background-color: var(--bath-gold);
  z-index: 10;
  cursor: ew-resize;
  transform: translateX(-50%);
}

.slider-handle-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  background-color: var(--bath-gold);
  color: var(--bath-charcoal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 1.2rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.35);
}

/* --------------------------------------------------------------------------
   7. PAGE 3: NUFLOW TRENCHLESS (NAVY & TECHNICAL GREEN)
   -------------------------------------------------------------------------- */
.nuflow-page-root {
  background-color: var(--nuflow-slate);
  color: var(--nuflow-text);
  font-family: var(--font-body);
}

.nuflow-hero {
  position: relative;
  background: linear-gradient(135deg, rgba(9, 16, 38, 0.96) 0%, rgba(9, 16, 38, 0.85) 50%, rgba(9, 16, 38, 0.25) 100%), url('trenchless_pipe.webp') no-repeat center right;
  background-size: cover;
  padding: 12rem 2rem 10rem 2rem;
  border-bottom: 1px solid rgba(16, 185, 129, 0.15);
  display: flex;
  align-items: center;
  min-height: 85vh;
}

.nuflow-hero-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.nuflow-tech-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: var(--nuflow-green);
  padding: 0.5rem 1.2rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 2rem;
}

.nuflow-title-main {
  color: #ffffff;
  font-size: 3.8rem;
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.15;
  margin-bottom: 1.8rem;
}

.nuflow-title-main span {
  color: var(--nuflow-green);
}

.nuflow-desc-hero {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.8;
  margin-bottom: 3rem;
}

.nuflow-stats-row {
  display: flex;
  gap: 4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 2.5rem;
}

.nuflow-stat-item h3 {
  font-size: 2.5rem;
  color: var(--nuflow-green);
  font-family: var(--font-display);
}

.nuflow-stat-item p {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 0.3rem;
}

.nuflow-hero-visual {
  display: none;
}

/* CCTV Inversion roadmap sequence */
.nuflow-process-section {
  padding: 8rem 2rem;
  background: white;
  border-bottom: 1px solid var(--border-light);
}

.process-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.process-step-card {
  background: var(--bg-base);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-md);
  padding: 2.5rem;
  position: relative;
}

.process-step-num {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.5rem;
  color: rgba(16, 185, 129, 0.15);
  line-height: 1;
}

.process-step-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--primary-navy);
  margin-bottom: 0.8rem;
}

.process-step-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Nuflow Technical Spec Table */
.nuflow-table-section {
  padding: 8rem 2rem;
}

.tech-table-container {
  max-width: 900px;
  margin: 4rem auto 0 auto;
  background: white;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.tech-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.tech-table th {
  background-color: var(--primary-navy);
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 1.2rem 2rem;
}

.tech-table td {
  padding: 1.2rem 2rem;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.9rem;
}

.tech-table tr:last-of-type td {
  border-bottom: none;
}

.tech-table tr:nth-of-type(even) {
  background-color: var(--bg-base);
}

.tech-table-badge {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.75rem;
}

.tech-table-badge.blue {
  background: rgba(14, 165, 233, 0.08);
  color: var(--nuflow-sky);
}

.tech-table-badge.green {
  background: rgba(16, 185, 129, 0.08);
  color: var(--nuflow-green);
}

/* --------------------------------------------------------------------------
   8. UNIFIED DYNAMIC BOOKING & INQUIRY FORM
   -------------------------------------------------------------------------- */
.booking-section {
  padding: 8rem 2rem;
  background: linear-gradient(180deg, white 0%, var(--bg-base) 100%);
}

.booking-card {
  max-width: 850px;
  margin: 0 auto;
  background: white;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid var(--border-light);
}

.booking-form-header {
  background: var(--primary-navy);
  color: white;
  padding: 4rem 3.5rem;
  text-align: center;
  transition: var(--transition-premium);
}

.booking-card.theme-bathrooms .booking-form-header {
  background: var(--bath-charcoal);
  border-bottom: 1px solid var(--bath-sand);
}

.booking-card.theme-nuflow .booking-form-header {
  background: var(--nuflow-navy);
  border-bottom: 1px solid var(--nuflow-border);
}

.booking-form-header h2 {
  font-family: var(--font-display);
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
}

.booking-card.theme-bathrooms .booking-form-header h2 {
  font-family: var(--font-serif);
  font-weight: 300;
}

.booking-form-header p {
  font-size: 0.95rem;
  opacity: 0.8;
}

.booking-form-body {
  padding: 4rem 3.5rem;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 2rem;
}

.form-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--primary-navy);
}

.booking-card.theme-bathrooms .form-label {
  color: var(--bath-charcoal);
  font-family: var(--font-body);
}

.booking-card.theme-nuflow .form-label {
  color: white;
  background: var(--nuflow-green);
  align-self: flex-start;
  padding: 0.1rem 0.6rem;
  border-radius: var(--border-radius-sm);
  font-size: 0.7rem;
}

.form-control {
  border: 1px solid #cbd5e1;
  padding: 1rem 1.2rem;
  border-radius: var(--border-radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-primary);
  background: #fdfdfd;
  transition: var(--transition-fast);
  outline: none;
}

.booking-card.theme-bathrooms .form-control {
  border-radius: 0;
  border-color: var(--bath-sand);
  background-color: var(--bath-cream);
}

.form-control:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.08);
  background: white;
}

.booking-card.theme-bathrooms .form-control:focus {
  border-color: var(--bath-gold);
  box-shadow: none;
}

.booking-card.theme-nuflow .form-control:focus {
  border-color: var(--nuflow-green);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.08);
}

textarea.form-control {
  resize: vertical;
  min-height: 140px;
}

.form-response-alert {
  display: none;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  padding: 1.5rem;
  border-radius: var(--border-radius-md);
  margin-bottom: 2rem;
  font-size: 0.95rem;
  align-items: center;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   9. PREMIUM SUPPORT CHATBOT MODULE
   -------------------------------------------------------------------------- */
.chatbot-trigger-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--primary-navy);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 10px 30px rgba(10, 17, 40, 0.2);
  cursor: pointer;
  z-index: 999;
  transition: var(--transition-bounce);
}

.chatbot-trigger-button:hover {
  transform: scale(1.08) rotate(6deg);
}

body.theme-bathrooms .chatbot-trigger-button {
  background: var(--bath-gold);
  color: var(--bath-charcoal);
  box-shadow: 0 10px 30px rgba(180, 154, 92, 0.3);
}

body.theme-nuflow .chatbot-trigger-button {
  background: var(--nuflow-green);
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
}

.chatbot-panel {
  position: fixed;
  bottom: 105px;
  right: 30px;
  width: 390px;
  height: 540px;
  background: white;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 998;
  transform: translateY(30px) scale(0.92);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-premium);
}

.chatbot-panel.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
}

.chat-header {
  background: var(--primary-navy);
  color: white;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.theme-bathrooms .chat-header {
  background: var(--bath-charcoal);
  border-bottom: 2px solid var(--bath-gold);
}

body.theme-nuflow .chat-header {
  background: var(--nuflow-navy);
  border-bottom: 2px solid var(--nuflow-green);
}

.chat-header h3 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 1px;
}

.chat-close {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}

.chat-body {
  flex-grow: 1;
  padding: 2rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  background: #f8fafc;
}

.chat-message {
  max-width: 85%;
  padding: 0.9rem 1.2rem;
  border-radius: var(--border-radius-lg);
  font-size: 0.88rem;
  line-height: 1.5;
}

.chat-message.bot {
  background: white;
  color: var(--text-primary);
  align-self: flex-start;
  box-shadow: var(--shadow-sm);
  border-bottom-left-radius: 0;
  border: 1px solid var(--border-light);
}

.chat-message.user {
  background: var(--accent-blue);
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 0;
}

body.theme-bathrooms .chat-message.user {
  background: var(--bath-gold);
  color: var(--bath-charcoal);
}

body.theme-nuflow .chat-message.user {
  background: var(--nuflow-green);
}

.chat-message a {
  color: var(--accent-blue);
  text-decoration: underline;
  font-weight: 600;
  transition: var(--transition-fast);
}
.chat-message a:hover {
  color: var(--accent-teal);
}
body.theme-bathrooms .chat-message a {
  color: var(--bath-gold);
}
body.theme-bathrooms .chat-message a:hover {
  color: var(--bath-gold-hover);
}
body.theme-nuflow .chat-message a {
  color: var(--nuflow-green);
}
body.theme-nuflow .chat-message a:hover {
  color: var(--nuflow-sky);
}

.chat-input-area {
  padding: 1.2rem;
  background: white;
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: 10px;
}

.chat-input {
  flex-grow: 1;
  border: 1px solid #e2e8f0;
  padding: 0.8rem 1.2rem;
  border-radius: 50px;
  outline: none;
  font-family: var(--font-body);
  font-size: 0.88rem;
}

.chat-send-btn {
  background: var(--primary-navy);
  color: white;
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

body.theme-bathrooms .chat-send-btn {
  background: var(--bath-gold);
  color: var(--bath-charcoal);
}

body.theme-nuflow .chat-send-btn {
  background: var(--nuflow-green);
}

/* --------------------------------------------------------------------------
   10. REFINED FOOTER
   -------------------------------------------------------------------------- */
footer {
  background: var(--primary-navy);
  color: rgba(255, 255, 255, 0.6);
  padding: 6rem 2rem 2.5rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

body.theme-bathrooms footer {
  background: var(--bath-charcoal);
  color: var(--bath-sand);
  border-top: 1px solid rgba(180, 154, 92, 0.15);
}

body.theme-nuflow footer {
  background: var(--nuflow-navy);
}

.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 3.5rem;
  margin-bottom: 5rem;
}

.footer-brand h4 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: white;
  margin-bottom: 1.2rem;
  letter-spacing: 1px;
}

body.theme-bathrooms .footer-brand h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--bath-cream);
  letter-spacing: 1.5px;
}

.footer-brand p {
  font-size: 0.9rem;
  line-height: 1.8;
}

.footer-links h5, .footer-contact h5 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: white;
  margin-bottom: 1.5rem;
}

body.theme-bathrooms .footer-links h5, 
body.theme-bathrooms .footer-contact h5 {
  color: var(--bath-gold);
}

.footer-links ul {
  list-style: none;
}

.footer-links li {
  margin-bottom: 1rem;
  font-size: 0.88rem;
}

.footer-links a {
  cursor: pointer;
}

.footer-links a:hover {
  color: white;
  padding-left: 6px;
}

body.theme-bathrooms .footer-links a:hover {
  color: var(--bath-gold);
}

.footer-contact p {
  font-size: 0.88rem;
  margin-bottom: 1rem;
}

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

body.theme-bathrooms .footer-bottom {
  border-top-color: rgba(180, 154, 92, 0.15);
}

/* --------------------------------------------------------------------------
   11. RESPONSIVENESS AND FALLBACKS
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .plumbing-hero {
    padding: 8rem 1.5rem 6rem 1.5rem;
    min-height: auto;
  }
  .plumbing-hero-container, 
  .bath-hero-container, 
  .nuflow-hero-container, 
  .corporate-details-grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  .accreditation-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1.5rem;
  }
  .timeline-container::before {
    left: 20px;
  }
  .timeline-dot {
    left: 20px;
  }
  .timeline-step-item {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-left: 50px;
  }
  .timeline-step-item:nth-of-type(even) .timeline-step-content,
  .timeline-step-item:nth-of-type(even) .timeline-step-info {
    grid-column: 1;
    text-align: left;
  }
}

@media (max-width: 768px) {
  .header-container {
    padding: 1rem;
  }
  nav {
    display: none;
  }
  .mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: content-box;
    width: 24px;
    height: 16px;
    padding: 14px 10px;
    margin-right: -10px;
    cursor: pointer;
    background: none;
    border: none;
  }
  .mobile-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--primary-navy);
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  header.theme-bathrooms .mobile-menu-toggle span {
    background-color: var(--bath-cream);
  }
  header.theme-nuflow .mobile-menu-toggle span {
    background-color: white;
  }
  /* Hamburger morphs into an X while the menu is open */
  header.nav-open .mobile-menu-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  header.nav-open .mobile-menu-toggle span:nth-child(2) {
    opacity: 0;
  }
  header.nav-open .mobile-menu-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Open mobile menu: solid theme-matched panel below the header */
  header.nav-open nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 18px 30px rgba(10, 17, 40, 0.14);
    padding: 0.4rem 0 0.6rem;
  }
  header.nav-open nav ul {
    flex-direction: column;
    gap: 0;
  }
  header.nav-open .nav-link {
    display: block;
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
    color: var(--primary-navy);
    border-bottom: 1px solid var(--border-light);
    border-left: 3px solid transparent;
  }
  header.nav-open li:last-child .nav-link {
    border-bottom: none;
  }
  header.nav-open .nav-link::after {
    display: none;
  }
  header.nav-open .nav-link.active {
    color: var(--accent-blue);
    border-left-color: var(--accent-blue);
    background: rgba(29, 78, 216, 0.05);
  }
  /* Bathrooms: dark charcoal panel, cream links, gold active */
  header.theme-bathrooms.nav-open nav {
    background: #1e1e1e;
    border-bottom-color: rgba(218, 211, 199, 0.15);
  }
  header.theme-bathrooms.nav-open .nav-link {
    color: var(--bath-cream);
    border-bottom-color: rgba(218, 211, 199, 0.12);
  }
  header.theme-bathrooms.nav-open .nav-link.active {
    color: var(--bath-gold);
    border-left-color: var(--bath-gold);
    background: rgba(180, 154, 92, 0.08);
  }
  /* Nuflow: dark navy panel, white links, green active */
  header.theme-nuflow.nav-open nav {
    background: #091026;
    border-bottom-color: rgba(16, 185, 129, 0.2);
  }
  header.theme-nuflow.nav-open .nav-link {
    color: rgba(255, 255, 255, 0.9);
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
  header.theme-nuflow.nav-open .nav-link.active {
    color: var(--nuflow-green);
    border-left-color: var(--nuflow-green);
    background: rgba(16, 185, 129, 0.07);
  }
  .portal-container {
    grid-template-columns: 1fr;
  }
  .accreditation-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .nuflow-products-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .nuflow-product-card {
    padding: 2.5rem 2rem;
  }
  .form-grid-2 {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 1.2rem;
    text-align: center;
  }
  .hero-title-main {
    font-size: 2.5rem;
    margin-bottom: 1.2rem;
    letter-spacing: -1px;
  }
  .bath-title-main {
    font-size: 2.5rem;
    line-height: 1.2;
  }
  .nuflow-title-main {
    font-size: 2.4rem;
    line-height: 1.2;
  }
  .plumbing-hero, .bath-hero, .nuflow-hero {
    padding: 7rem 1.5rem 5rem 1.5rem;
  }
  .services-section, .corporate-details-section, .bath-roadmap-section, .bath-slider-section, .nuflow-process-section, .nuflow-table-section, .booking-section {
    padding: 4.5rem 1.5rem;
  }
  .section-title-center, .detail-column-left h2, .slider-narrative h2 {
    font-size: 2rem;
  }
  .before-after-slider-container {
    height: 300px;
  }
  .bath-experience-card {
    position: relative;
    bottom: 0;
    right: 0;
    margin-top: 2rem;
    max-width: 100%;
    padding: 2rem;
  }
  .bath-hero-visual {
    height: auto;
  }
  .chatbot-panel {
    width: calc(100% - 40px);
    height: 480px;
    right: 20px;
    bottom: 95px;
  }
  .chatbot-trigger-button {
    width: 50px;
    height: 50px;
    bottom: 25px;
    right: 25px;
    font-size: 1.25rem;
  }
}

/* Core Services Grid Section styling */
.services-section {
  padding: 8rem 2rem;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-light);
}

.section-container-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.section-header-center {
  text-align: center;
  margin-bottom: 5rem;
}

.section-tag-center {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent-blue);
  margin-bottom: 1rem;
}

.section-title-center {
  font-size: 2.8rem;
  color: var(--primary-navy);
  font-weight: 800;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 2.5rem;
}

.service-card {
  background: white;
  padding: 3rem 2.5rem;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-premium);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(29, 78, 216, 0.15);
}

.service-icon-box {
  background: rgba(29, 78, 216, 0.04);
  border: 1px solid rgba(29, 78, 216, 0.08);
  width: 60px;
  height: 60px;
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-premium);
}

.service-card:hover .service-icon-box {
  background: rgba(29, 78, 216, 0.08);
  border-color: rgba(29, 78, 216, 0.2);
  transform: scale(1.05);
}

.service-svg {
  width: 32px;
  height: 32px;
  transition: var(--transition-premium);
}

.service-card:hover .service-svg {
  transform: scale(1.1);
}

.service-card-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--primary-navy);
  font-weight: 700;
}

.service-card-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Nuflow Products Section styling */
.nuflow-products-section {
  padding: 8rem 2rem;
  background-color: var(--bg-base);
  border-bottom: 1px solid var(--border-light);
}

.nuflow-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

.nuflow-product-card {
  background: white;
  border-radius: var(--border-radius-lg);
  padding: 3.5rem;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-premium);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.nuflow-product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
}

.nuflow-product-card.blueline::before {
  background: var(--nuflow-sky);
}

.nuflow-product-card.greenline::before {
  background: var(--nuflow-green);
}

.nuflow-product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.product-pill {
  display: inline-block;
  align-self: flex-start;
  padding: 0.4rem 1rem;
  border-radius: 50px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2rem;
}

.blueline .product-pill {
  background: rgba(56, 189, 248, 0.08);
  color: var(--nuflow-sky);
}

.greenline .product-pill {
  background: rgba(16, 185, 129, 0.08);
  color: var(--nuflow-green);
}

.product-card-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--primary-navy);
  font-weight: 800;
  margin-bottom: 1rem;
}

.product-card-desc {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

.product-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: auto;
}

.product-features-list li {
  font-size: 0.95rem;
  color: var(--text-primary);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.product-features-list li::before {
  content: '✓';
  font-weight: 800;
  flex-shrink: 0;
}

.blueline .product-features-list li::before {
  color: var(--nuflow-sky);
}

.greenline .product-features-list li::before {
  color: var(--nuflow-green);
}

/* --------------------------------------------------------------------------
   CUSTOMER REVIEWS / SOCIAL PROOF MODULE
   -------------------------------------------------------------------------- */
.reviews-section {
  padding: 8rem 2rem;
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-base) 100%);
  border-bottom: 1px solid var(--border-light);
}

.reviews-aggregate {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.5rem;
  padding: 0.65rem 1.4rem;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.reviews-aggregate-text {
  font-size: 0.95rem;
  color: var(--text-muted);
}
.reviews-aggregate-text strong { color: var(--primary-navy); }

.review-stars {
  color: #f5a623;
  letter-spacing: 2px;
  font-size: 1.05rem;
  line-height: 1;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 2rem;
}

.review-card {
  background: #fff;
  padding: 2.4rem 2.2rem;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-premium);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin: 0;
}

.review-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(29, 78, 216, 0.15);
}

.review-card .review-stars { font-size: 1.15rem; }

.review-quote {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-primary);
  margin: 0;
  flex-grow: 1;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  color: var(--primary-navy);
  font-size: 0.95rem;
}

.review-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), var(--primary-navy));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.review-source {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Theme accents for reviews */
.theme-bathrooms .review-avatar { background: linear-gradient(135deg, var(--bath-gold), var(--bath-gold-hover)); }
.theme-bathrooms .section-tag-center,
.theme-bathrooms .reviews-aggregate-text strong { color: var(--bath-gold); }
.theme-nuflow .review-avatar { background: linear-gradient(135deg, var(--nuflow-green), var(--nuflow-navy)); }

@media (max-width: 768px) {
  .reviews-section { padding: 4.5rem 1.5rem; }
  .review-card { padding: 2rem 1.6rem; }
}

/* --------------------------------------------------------------------------
   FAQ ACCORDION (native <details>, AI/crawler friendly)
   -------------------------------------------------------------------------- */
.faq-section {
  padding: 8rem 2rem;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-light);
}

.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition-fast);
}

.faq-item[open] {
  border-color: rgba(29, 78, 216, 0.2);
  box-shadow: var(--shadow-md);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 1.6rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--primary-navy);
  list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }

.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--accent-blue);
  border-radius: 2px;
  transition: var(--transition-fast);
}
.faq-icon::before { top: 9px; left: 0; width: 20px; height: 2px; }
.faq-icon::after { top: 0; left: 9px; width: 2px; height: 20px; }
.faq-item[open] .faq-icon::after { transform: rotate(90deg); opacity: 0; }

.faq-answer {
  padding: 0 1.6rem 1.5rem 1.6rem;
  color: var(--text-muted);
  line-height: 1.75;
  font-size: 1rem;
}

/* Theme accents */
.theme-bathrooms .faq-icon::before,
.theme-bathrooms .faq-icon::after { background: var(--bath-gold); }
.theme-nuflow .faq-icon::before,
.theme-nuflow .faq-icon::after { background: var(--nuflow-green); }

@media (max-width: 768px) {
  .faq-section { padding: 4.5rem 1.5rem; }
  .faq-question { font-size: 0.98rem; padding: 1.2rem 1.2rem; }
  .faq-answer { padding: 0 1.2rem 1.3rem 1.2rem; }
}

/* --------------------------------------------------------------------------
   "WHY CHOOSE INLINE" TRUST BAND
   -------------------------------------------------------------------------- */
.why-section {
  padding: 8rem 2rem;
  background: var(--primary-navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.why-section .section-tag-center { color: var(--accent-teal); }
.why-section .section-title-center { color: #fff; }

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 2rem;
}

.why-card {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-lg);
  transition: var(--transition-premium);
}

.why-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(6, 182, 212, 0.35);
}

.why-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.25);
  color: var(--accent-teal);
}
.why-icon svg { width: 26px; height: 26px; }

.why-card-body h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
}

.why-card-body p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
}

/* Theme accents */
.theme-bathrooms .why-section { background: var(--bath-charcoal); }
.theme-bathrooms .why-section .section-tag-center,
.theme-bathrooms .why-icon { color: var(--bath-gold); }
.theme-bathrooms .why-icon { background: rgba(180, 154, 92, 0.14); border-color: rgba(180, 154, 92, 0.3); }
.theme-bathrooms .why-card:hover { border-color: rgba(180, 154, 92, 0.4); }

.theme-nuflow .why-section { background: var(--nuflow-navy); }
.theme-nuflow .why-section .section-tag-center,
.theme-nuflow .why-icon { color: var(--nuflow-green); }
.theme-nuflow .why-icon { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.28); }
.theme-nuflow .why-card:hover { border-color: rgba(16, 185, 129, 0.4); }

@media (max-width: 768px) {
  .why-section { padding: 4.5rem 1.5rem; }
  .why-card { padding: 1.6rem; }
}

/* --------------------------------------------------------------------------
   STICKY MOBILE CALL BAR (mobile only, high-intent tap targets)
   -------------------------------------------------------------------------- */
.mobile-call-bar {
  display: none;
}

.mobile-call-bar .mcb-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
  transition: var(--transition-fast);
}

.mobile-call-bar .mcb-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.mobile-call-bar .mcb-btn:active {
  filter: brightness(0.92);
}

/* Default (plumbing) theme colours */
.mobile-call-bar .mcb-call { background: var(--accent-blue); }
.mobile-call-bar .mcb-book { background: var(--primary-navy); }

.theme-bathrooms .mobile-call-bar .mcb-call { background: var(--bath-gold); color: var(--bath-charcoal); }
.theme-bathrooms .mobile-call-bar .mcb-book { background: var(--bath-charcoal); }

.theme-nuflow .mobile-call-bar .mcb-call { background: var(--nuflow-green); color: var(--nuflow-navy); }
.theme-nuflow .mobile-call-bar .mcb-book { background: var(--nuflow-navy); }

@media (max-width: 768px) {
  .mobile-call-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    box-shadow: 0 -4px 20px rgba(10, 17, 40, 0.16);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  /* keep the last content clear of the fixed bar */
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0));
  }
  /* lift the chat widgets above the call bar */
  .chatbot-trigger-button {
    bottom: calc(72px + env(safe-area-inset-bottom, 0));
    right: 18px;
  }
  .chatbot-panel {
    bottom: calc(134px + env(safe-area-inset-bottom, 0));
    height: calc(100vh - 240px);
    max-height: 480px;
  }
}

/* --------------------------------------------------------------------------
   MOBILE LAYOUT FIXES (overflow + readability)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Nuflow hero stats: keep three stats on one row without overflowing */
  .nuflow-stats-row {
    gap: 1.25rem;
    justify-content: space-between;
  }
  .nuflow-stat-item h3 { font-size: 2rem; }
  .nuflow-stat-item p { font-size: 0.68rem; letter-spacing: 1px; }

  /* Nuflow spec table: swipe horizontally instead of clipping the 3rd column */
  .tech-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tech-table { min-width: 580px; }
  .tech-table th,
  .tech-table td { padding: 0.9rem 1rem; font-size: 0.82rem; }

  /* Booking form: reclaim field width on small screens */
  .booking-form-body { padding: 2.5rem 1.5rem; }
}

/* ==========================================================================
   RELATED SERVICES — internal linking cluster (hub <-> spokes)
   ========================================================================== */
.related-services-section {
  padding: 6rem 2rem;
  background: var(--bg-subtle, #f7f9fc);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.related-card {
  position: relative;
  display: block;
  padding: 1.75rem 3rem 1.75rem 1.75rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.related-card:hover,
.related-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent-blue, #2b7fd4);
  box-shadow: 0 12px 28px rgba(9, 16, 38, 0.1);
}

.related-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary-navy, #091026);
}

.related-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted, #5a6478);
}

.related-arrow {
  position: absolute;
  top: 1.75rem;
  right: 1.5rem;
  font-size: 1.1rem;
  color: var(--accent-blue, #2b7fd4);
  transition: transform 0.2s ease;
}

.related-card:hover .related-arrow { transform: translateX(4px); }

/* Division themes */
.theme-bathrooms .related-card h3 { color: var(--bath-charcoal, #1e1e1e); }
.theme-bathrooms .related-card:hover { border-color: var(--bath-gold, #b08d57); }
.theme-bathrooms .related-arrow { color: var(--bath-gold, #b08d57); }
.theme-nuflow .related-card:hover { border-color: var(--nuflow-green, #2e9e5b); }
.theme-nuflow .related-arrow { color: var(--nuflow-green, #2e9e5b); }

@media (max-width: 768px) {
  .related-services-section { padding: 4rem 1.25rem; }
  .related-grid { grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
  .related-card { padding: 1.35rem 2.75rem 1.35rem 1.35rem; }
}

/* ==========================================================================
   UX AUDIT FIXES (2026-08-02)
   Final-in-source overrides — these intentionally win the cascade.
   ========================================================================== */

/* iOS Safari zooms the whole viewport when a focused field is under 16px */
.form-control { font-size: 1rem; }

@media (max-width: 768px) {
  /* Hero CTAs sat side-by-side on mobile, squeezing the call button into a
     3-line wrap at 13.6px. Stack them full-width instead. */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-outline {
    width: 100%;
    text-align: center;
    font-size: 1rem;
    padding: 1.05rem 1rem;
    white-space: nowrap;
  }

  /* The chat bubble overlapped the sticky call bar by ~21px: an earlier
     mobile rule (bottom:25px) was beating the intended 72px lift. */
  .chatbot-trigger-button {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
    right: 16px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  .chatbot-panel {
    bottom: calc(134px + env(safe-area-inset-bottom, 0px));
  }

  /* Footer links were 18px-tall tap targets; pad to a comfortable size */
  .footer-links li a,
  .footer-contact a {
    display: inline-block;
    padding: 0.4rem 0;
  }
}

/* ==========================================================================
   SERVICE HERO VISUAL + INLINE SVG ICONS (2026-08-02)
   ========================================================================== */

/* Emoji replaced by inline SVG so glyphs are identical cross-platform and
   inherit theme colour. Sized in em so they scale with their label. */
.ui-icon {
  flex-shrink: 0;
  vertical-align: -0.125em;
}

.btn-primary .ui-icon { margin-right: 0.55em; }

.hero-badge-emergency .ui-icon {
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.15em;
}

.floating-pill-avatar .ui-icon {
  width: 1em;
  height: 1em;
  color: #f5b301;
}

/* (A stray closing brace sat here until Sep 2026. It made the parser read
   "} .nav-cta" as one invalid selector and silently drop the .nav-cta rule
   below — so the call button never got inline-flex / nowrap and its number
   wrapped onto four lines on tablets.) */

/* Header call CTA: keep the number tappable without overflowing small screens.
   At 375px the old layout came to 404px (logo 120 + CTA 182 + burger 44 + pad 32). */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
  text-decoration: none;
}

@media (max-width: 768px) {
  .nav-cta {
    padding: 0.6rem 0.85rem;
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    gap: 0.4em;
  }
  /* Drop the word "Call" — the icon already says it */
  .nav-cta-word { display: none; }
  .logo-img-box { width: 100px; }
}

@media (max-width: 360px) {
  .nav-cta { padding: 0.55rem 0.7rem; font-size: 0.68rem; }
  .logo-img-box { width: 88px; }
}

/* Grid/flex children default to min-width:auto and refuse to shrink below their
   content, which pushed the inline booking card past the viewport at 375px and
   dragged the fixed header + call bar out to the overflowed width with it. */
.corporate-details-grid > *,
.plumbing-hero-container > *,
.services-grid > *,
.related-grid > * {
  min-width: 0;
}

.booking-card {
  max-width: 100%;
  box-sizing: border-box;
}

.booking-card * {
  max-width: 100%;
}

/* The service <select> takes its min-content width from its longest option
   ("Inline Bathroom Renovation Consult"), which widened its grid column and
   pushed the form past the card. Let the columns shrink and the control wrap. */
.form-grid-2 > *,
.form-group {
  min-width: 0;
}

.form-control {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

select.form-control {
  text-overflow: ellipsis;
}

/* ==========================================================================
   CARD GRID POLISH (2026-08-02)
   Fixes: ragged card bottoms from uneven copy length, an orphaned 9th card on
   a 4-col grid, and text that floated in too much empty space.
   ========================================================================== */

/* 3 columns divides 9 service links evenly; 4 left a single orphan on row 3 */
.related-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.25rem;
}

.related-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.6rem 3rem 1.6rem 1.6rem;
}

/* Title and arrow on one baseline, so the arrow never drifts mid-card */
.related-card h3 {
  font-size: 1rem;
  line-height: 1.35;
  margin: 0;
}

.related-card p {
  margin: 0;
  font-size: 0.875rem;
}

.related-arrow { top: 1.6rem; }

/* Equal-height cards with copy anchored to the top rather than centred in
   whitespace — uneven descriptions were leaving big ragged gaps */
.services-grid { align-items: stretch; }

.service-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.service-card-desc { margin-top: 0; }

/* Section rhythm: 8rem top-and-bottom on every section made the page feel
   sparse and endless. Tighten where two card sections sit back to back. */
.related-services-section + .services-section { padding-top: 4.5rem; }
.related-services-section { padding: 5rem 2rem; }

@media (max-width: 768px) {
  .related-services-section { padding: 3.5rem 1.25rem; }
  .related-services-section + .services-section { padding-top: 3rem; }
}

/* 9 service links / 3 columns = 3 clean rows. auto-fit was resolving to 4 at
   desktop and stranding a single card alone on row 3. Spoke pages pass 3
   related items, so they land as one tidy row. */
@media (min-width: 1025px) {
  .related-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .related-grid { grid-template-columns: 1fr; }
}

/* Service-page hero: the old 11rem/9rem padding + 85vh floor made a text-only
   hero 1095px tall, pushing the service directory far below the fold on the
   hub. Tighten so the next section starts pulling the eye down. */
.service-hero {
  padding: 8.5rem 2rem 4.5rem;
  min-height: 0;
}

.service-hero .hero-title-main { margin-bottom: 1.25rem; }
.service-hero .hero-subtitle { margin-bottom: 2rem; }
.service-hero .hero-actions { margin-bottom: 2.5rem; }

@media (max-width: 768px) {
  .service-hero { padding: 7rem 1.25rem 3rem; }
  .service-hero .hero-actions { margin-bottom: 2rem; }
}

/* ==========================================================================
   DESIGN REFINEMENT PASS (2026-08-02)
   Addresses: flat page rhythm, excess vertical air, inert cards, and cards
   that barely read as objects against a near-identical background.
   ========================================================================== */

/* --- 3. Tighten vertical rhythm -------------------------------------------
   Every section ran 7–8rem top and bottom, which made the page long and
   sparse. ~25% off without crowding anything. */
.services-section,
.faq-section,
.reviews-section,
.why-section { padding: 5.5rem 2rem; }

.corporate-details-section { padding: 5rem 2rem; }
.related-services-section { padding: 5rem 2rem; }
.related-services-section + .services-section { padding-top: 4rem; }

.section-header-center { margin-bottom: 3rem; }

/* --- 2. Section rhythm ----------------------------------------------------
   Alternate surfaces so no two adjacent sections share a background, and give
   the page dark anchors to break the endless light-on-light scroll. */
.services-section { background: #fff; }
.corporate-details-section { background: var(--bg-base); }
.faq-section { background: #fff; }
.reviews-section { background: linear-gradient(180deg, #fff 0%, var(--bg-base) 100%); }

/* --- 5. Cards read as real objects ---------------------------------------
   White cards on #f8fafc was ~1% contrast. Firmer border + a real shadow. */
.service-card,
.related-card {
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 1px 2px rgba(9, 16, 38, 0.04), 0 6px 16px rgba(9, 16, 38, 0.06);
}

.service-card { padding: 2.25rem 1.75rem; gap: 1.1rem; }
.service-card:hover { box-shadow: 0 8px 28px rgba(9, 16, 38, 0.12); }

/* --- 4. Icons give the cards meaning at a glance -------------------------- */
.service-icon-box { width: 52px; height: 52px; }
.service-icon-box .ui-icon {
  width: 26px;
  height: 26px;
  color: var(--accent-blue);
}

.service-card-title { font-size: 1.05rem; line-height: 1.35; }
.service-card-desc { font-size: 0.9rem; line-height: 1.6; }

/* Directory card: icon | text | arrow */
.related-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 0.95rem;
  padding: 1.4rem 1.5rem;
}

.related-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(29, 78, 216, 0.06);
  border: 1px solid rgba(29, 78, 216, 0.1);
  transition: var(--transition-fast);
}

.related-card-icon .ui-icon { width: 20px; height: 20px; color: var(--accent-blue); }
.related-card-body { display: block; min-width: 0; }
.related-card:hover .related-card-icon {
  background: rgba(29, 78, 216, 0.12);
  border-color: rgba(29, 78, 216, 0.25);
}

/* arrow now sits in its own grid column rather than absolutely positioned */
.related-arrow {
  position: static;
  top: auto;
  right: auto;
  align-self: center;
  /* 1.05rem rendered the pipe glyph at ~17px, where its strokes fused into a
     blob. 1.6rem (~26px) gives the tube, coupling and chevron room to read. */
  font-size: 1.6rem;
  line-height: 1;
}

/* --- Dark directory (hub only) -------------------------------------------
   The service menu is the job of the hub page, so it gets a dark full-bleed
   panel instead of being a third near-white band. */
.related-services-section.is-dark {
  background: linear-gradient(160deg, var(--primary-navy) 0%, #101c3f 100%);
  border-top: none;
}

.related-services-section.is-dark .section-title-center { color: #fff; }
.related-services-section.is-dark .section-tag-center { color: var(--accent-teal); }

.related-services-section.is-dark .related-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

.related-services-section.is-dark .related-card:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--accent-teal);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.related-services-section.is-dark .related-card h3 { color: #fff; }
.related-services-section.is-dark .related-card p { color: rgba(248, 250, 252, 0.68); }
.related-services-section.is-dark .related-arrow { color: var(--accent-teal); }

.related-services-section.is-dark .related-card-icon {
  background: rgba(6, 182, 212, 0.12);
  border-color: rgba(6, 182, 212, 0.28);
}

.related-services-section.is-dark .related-card-icon .ui-icon { color: var(--accent-teal); }
.related-services-section.is-dark .related-card:hover .related-card-icon {
  background: rgba(6, 182, 212, 0.2);
}

@media (max-width: 768px) {
  .services-section,
  .faq-section,
  .reviews-section,
  .why-section,
  .corporate-details-section { padding: 3.5rem 1.25rem; }
  .related-services-section { padding: 3.5rem 1.25rem; }
  .related-services-section + .services-section { padding-top: 3rem; }
  .section-header-center { margin-bottom: 2rem; }
  .service-card { padding: 1.75rem 1.35rem; }
}

/* ==========================================================================
   RESPONSIVE PASS (2026-08-02)
   The site jumped between a handful of fixed breakpoints, so type and spacing
   stepped abruptly and awkward widths (tablet portrait, 1100px laptops, very
   small phones) fell between the cracks. Everything below scales continuously
   with the viewport instead.
   ========================================================================== */

/* --- Fluid type: no more 64px headlines on a 360px phone ------------------ */
.hero-title-main { font-size: clamp(2.1rem, 6.2vw, 4rem); line-height: 1.08; }
.hero-subtitle   { font-size: clamp(0.98rem, 1.35vw, 1.14rem); }
.section-title-center { font-size: clamp(1.65rem, 3.6vw, 2.75rem); line-height: 1.15; }
.detail-column-left h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1.15; }
.bath-title-main { font-size: clamp(2.1rem, 6vw, 4rem); line-height: 1.08; }
.nuflow-title-main { font-size: clamp(1.9rem, 5.2vw, 3.4rem); line-height: 1.12; }

/* --- Fluid section padding and gutters ------------------------------------ */
.services-section,
.faq-section,
.reviews-section,
.why-section,
.corporate-details-section,
.related-services-section {
  padding-top: clamp(2.75rem, 6vw, 5.5rem);
  padding-bottom: clamp(2.75rem, 6vw, 5.5rem);
  padding-left: clamp(1.1rem, 4vw, 2rem);
  padding-right: clamp(1.1rem, 4vw, 2rem);
}

.service-hero { padding: clamp(6.5rem, 12vw, 8.5rem) clamp(1.1rem, 4vw, 2rem) clamp(2.5rem, 5vw, 4.5rem); }
.header-container { padding: 1rem clamp(1rem, 3vw, 2rem); }
.section-header-center { margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }

/* --- Grids adapt continuously rather than snapping at one breakpoint ------ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.5rem);
}

.related-grid { gap: clamp(0.75rem, 1.5vw, 1.25rem); }

/* Tablet portrait: the four service cards read far better 2-up than squashed
   4-up or stretched 1-up */
@media (min-width: 641px) and (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .corporate-details-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
}

/* Laptops between the tablet and desktop rules — previously inherited desktop
   spacing and felt cramped */
@media (min-width: 1025px) and (max-width: 1200px) {
  .plumbing-hero-container,
  .section-container-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* --- Very small phones (≤380px) ------------------------------------------- */
@media (max-width: 380px) {
  .hero-badge-emergency { font-size: 0.68rem; padding: 0.45rem 0.8rem; }
  .service-card { padding: 1.4rem 1.1rem; }
  .related-card { padding: 1.1rem 1.15rem; gap: 0.7rem; }
  .related-card-icon { width: 34px; height: 34px; }
  .related-card-icon .ui-icon { width: 17px; height: 17px; }
  .rate-value { font-size: 1.05rem; }
  .booking-form-body { padding: 1.75rem 1rem; }
}

/* --- Landscape phones: the 85vh hero swallowed the whole screen ----------- */
@media (max-height: 500px) and (orientation: landscape) {
  .plumbing-hero { min-height: auto; padding-top: 6rem; padding-bottom: 3rem; }
  .mobile-call-bar { position: static; }
  body { padding-bottom: 0; }
}

/* --- Large screens: stop the content sprawling ---------------------------- */
@media (min-width: 1600px) {
  .plumbing-hero-container,
  .section-container-inner,
  .corporate-details-grid,
  .footer-grid { max-width: 1360px; }
}

/* --- Respect reduced-motion and improve focus visibility ------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

a:focus-visible,
button:focus-visible,
.form-control:focus-visible {
  outline: 3px solid var(--accent-teal);
  outline-offset: 2px;
}

/* Never let a long word or URL force a horizontal scrollbar */
h1, h2, h3, p, li, td { overflow-wrap: break-word; }
img { max-width: 100%; height: auto; }

/* Footer service-area list: compact two-column chip list */
.footer-areas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
}

/* .why-grid used minmax(320px,1fr), which cannot fit inside a 320px viewport
   once section padding is taken off — it overflowed by 33px. min() lets the
   track collapse to the available width instead. */
.why-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1rem, 2.2vw, 2rem);
}

.why-grid > *,
.why-card-body { min-width: 0; }

@media (max-width: 380px) {
  .why-card { padding: 1.25rem; gap: 0.9rem; }
}

/* Same minmax-too-wide problem as .why-grid, 13px over at 320px */
.reviews-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 2.2vw, 2rem);
}

.reviews-grid > * { min-width: 0; }

@media (max-width: 380px) {
  .review-card { padding: 1.5rem 1.15rem; }
}

/* The Nuflow spec table is meant to scroll horizontally inside its container,
   but the container was expanding to the table's 580px min-width instead of
   constraining it, so the page scrolled rather than the table. */
.tech-table-container {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.nuflow-table-section .section-container-inner,
.nuflow-table-section { min-width: 0; }

@media (max-width: 380px) {
  .tech-table { min-width: 520px; }
  .tech-table th, .tech-table td { padding: 0.75rem 0.8rem; font-size: 0.78rem; }
}

/* ==========================================================================
   REAL JOB PHOTOGRAPHY
   Gallery band used by home / bathrooms (partials/recent-work.ejs) plus the
   Nuflow contrast band. Every photo is shot on an Inline job site, so the
   tiles are deliberately plain — no filters, no overlays, just the work.
   ========================================================================== */

.work-section {
  padding: clamp(2.75rem, 6vw, 5.5rem) clamp(1.1rem, 4vw, 2rem);
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-light);
}

.work-intro {
  max-width: 620px;
  margin: 1rem auto 0;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1rem, 2.2vw, 1.75rem);
}

.work-grid > * { min-width: 0; }

.work-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(9, 16, 38, 0.04), 0 6px 16px rgba(9, 16, 38, 0.06);
  transition: var(--transition-premium);
}

.work-figure:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 28px rgba(9, 16, 38, 0.12);
}

/* Mixed portrait/landscape sources, so every tile is cropped to one ratio and
   the wide hero shot spans two columns where there is room for it. */
.work-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.work-figure.wide img { aspect-ratio: 16 / 10; }

/* Tiles in a row stretch to the tallest, so pin captions to the bottom edge
   rather than letting them float under the shorter crops. */
.work-figure figcaption { margin-top: auto; }

@media (min-width: 900px) {
  .work-figure.wide { grid-column: span 2; }
}

.work-figure figcaption {
  padding: 1rem 1.25rem 1.15rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Bathrooms runs the same band against the charcoal/gold sub-brand. */
.theme-bathrooms .work-section { background: #f3eff0; border-bottom-color: var(--bath-sand); }
.theme-bathrooms .work-section .section-tag-center { color: var(--bath-gold); }
.theme-bathrooms .work-section .section-title-center {
  font-family: var(--font-serif);
  font-weight: 300;
  color: var(--bath-charcoal);
}
.theme-bathrooms .work-figure { border-color: var(--bath-sand); border-radius: 0; }

/* --- Nuflow: the dig-and-replace contrast band --------------------------- */

.nuflow-contrast-section {
  padding: clamp(2.75rem, 6vw, 5.5rem) clamp(1.1rem, 4vw, 2rem);
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-light);
}

.nuflow-contrast-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

.nuflow-contrast-grid > * { min-width: 0; }

.nuflow-contrast-figure {
  margin: 0;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(9, 16, 38, 0.14);
}

.nuflow-contrast-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.nuflow-contrast-figure figcaption {
  padding: 0.9rem 1.15rem;
  background: var(--primary-navy);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  line-height: 1.45;
}

.nuflow-contrast-copy h2 {
  font-size: clamp(1.65rem, 3.6vw, 2.4rem);
  line-height: 1.15;
  color: var(--primary-navy);
  font-weight: 800;
  margin: 1rem 0 1.25rem;
}

.nuflow-contrast-copy p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.1rem;
}

.nuflow-contrast-copy .btn-primary { margin-top: 0.9rem; }

/* ==========================================================================
   HERO BACKGROUND VIDEO
   Opt-in per page via .has-hero-video. The element is decorative: it replaces
   the hero's background image rather than adding a second visual.
   ========================================================================== */

/* Hidden by default. Only the desktop, no-reduced-motion case below turns it
   on, so mobile and reduced-motion users keep the static background and never
   download the file. */
.plumbing-hero.has-hero-video .hero-video { display: none; }

@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  .plumbing-hero.has-hero-video .hero-video {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    z-index: 0;
  }

  /* The section's own background gradient sits UNDER the video, so it has to be
     re-applied on top of it. Scoped to this media query — applying it while the
     video is hidden would double up with the background shorthand and crush the
     photo underneath. */
  .plumbing-hero.has-hero-video::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(10, 17, 40, 0.96) 0%, rgba(10, 17, 40, 0.85) 50%, rgba(10, 17, 40, 0.2) 100%);
  }

  .plumbing-hero.has-hero-video .plumbing-hero-container {
    position: relative;
    z-index: 2;
  }
}

/* ==========================================================================
   SERVICE CLIP BAND
   Portrait phone footage beside message-matched copy. Rendered only where a
   service entry defines `video` in service-data.js.
   ========================================================================== */

.service-video-section {
  padding: clamp(2.75rem, 6vw, 5.5rem) clamp(1.1rem, 4vw, 2rem);
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-light);
}

.service-video-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

.service-video-grid > * { min-width: 0; }

/* The source is 9:16, so the frame is capped rather than fluid — a full-width
   portrait video would tower over the copy beside it. */
.service-video-frame {
  max-width: 320px;
  width: 100%;
  margin: 0 auto;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(9, 16, 38, 0.16);
  background: var(--primary-navy);
}

.service-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

.service-video-copy h2 {
  font-size: clamp(1.65rem, 3.6vw, 2.4rem);
  line-height: 1.15;
  color: var(--primary-navy);
  font-weight: 800;
  margin: 0.75rem 0 1.25rem;
}

.service-video-copy p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.75rem;
}

@media (max-width: 860px) {
  .service-video-grid { grid-template-columns: 1fr; }
  .service-video-copy { text-align: left; }
}

/* ==========================================================================
   WRENCH CURSOR
   The cursor becomes the brand wrench on non-interactive ground; clicking
   "tightens" it (rotated variant while the button is down) and leaves a brief
   quarter-turn spark at the click point. Fine pointers only — touch devices
   never see any of this, and interactive elements are untouched: links,
   buttons and inputs keep their own cursor declarations, so the pointer
   affordance on CTAs is exactly as before.
   ========================================================================== */

@media (pointer: fine) {
  body {
    cursor: url('/cursor-wrench.png') 6 6, auto;
  }
  html.wrench-turning body {
    cursor: url('/cursor-wrench-turn.png') 6 6, auto;
  }
}

/* Click spark: one span per click, removed by app.js after the animation.
   pointer-events none so it can never swallow a tap on the thing clicked. */
.wrench-spark {
  position: fixed;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  background: url('/cursor-wrench@2x.png') center / contain no-repeat;
  pointer-events: none;
  z-index: 3000;
  animation: wrench-tighten 0.45s ease-out forwards;
}

@keyframes wrench-tighten {
  0%   { transform: rotate(0deg)   scale(1);    opacity: 0.9; }
  60%  { transform: rotate(-70deg) scale(1.05); opacity: 0.7; }
  100% { transform: rotate(-90deg) scale(0.9);  opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wrench-spark { display: none; }
}

/* "Commissioning" cannot fit the 193px content column at 320px wide — let the
   browser hyphenate rather than paint past the box. */
.timeline-step-content h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ==========================================================================
   PRICING — shared rate card + /pricing page
   Rate cards render from RATES in service-data.js via partials/rate-card.ejs.
   ========================================================================== */

.rate-unit {
  font-size: 0.8rem;
  font-weight: normal;
  color: var(--text-muted);
}

.rate-note {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.rate-card-actions {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.9rem;
  text-align: center;
}

.rate-card-actions .btn-primary { width: 100%; }

.rate-card-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent-blue);
  text-decoration: none;
}
.rate-card-link:hover { text-decoration: underline; }

/* Inline-form service pages (drains, gas) show their rates in a band below. */
.service-pricing-section {
  padding: clamp(2.75rem, 6vw, 5.5rem) clamp(1.1rem, 4vw, 2rem);
  background: #fff;
  border-bottom: 1px solid var(--border-light);
}
.service-pricing-wrap { max-width: 720px; margin: 0 auto; }

/* --- /pricing page ------------------------------------------------------- */
.pricing-section {
  padding: clamp(2.75rem, 6vw, 5.5rem) clamp(1.1rem, 4vw, 2rem);
  background: #fff;
  border-bottom: 1px solid var(--border-light);
}
.pricing-section-alt { background: var(--bg-base); }

.pricing-intro {
  max-width: 680px;
  margin: 1rem auto 0;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.pricing-table-wrap { max-width: 1000px; margin: 0 auto; }
.pricing-table th { vertical-align: top; }
.pricing-table .th-sub {
  display: block;
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.75;
  margin-top: 0.2rem;
}
.pricing-table td { white-space: nowrap; }
.pricing-table td:last-child { white-space: normal; }
.ex-gst {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 0.15rem;
}

.pricing-zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 1000px;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
}
.pricing-zone-card {
  background: var(--bg-base);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: var(--border-radius-lg);
  padding: 1.25rem 1.4rem;
}
.pricing-zone-card > * { display: block; min-width: 0; }
.pricing-zone-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-blue);
  margin-bottom: 0.35rem;
}
.pricing-zone-card strong { color: var(--primary-navy); font-size: 1.05rem; }
.pricing-zone-card p { margin: 0.35rem 0 0; color: var(--text-muted); font-size: 0.92rem; }

.pricing-footnote {
  max-width: 1000px;
  margin: 1.5rem auto 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.pricing-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  max-width: 820px;
  margin: 0 auto;
}
.pricing-stat {
  background: var(--primary-navy);
  color: #fff;
  border-radius: var(--border-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
  min-width: 0;
}
.pricing-stat-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-teal);
  margin-bottom: 0.6rem;
}
.pricing-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
}
.pricing-stat strong small { font-size: 0.45em; font-weight: 600; opacity: 0.8; }
.pricing-stat .ex-gst { color: rgba(255, 255, 255, 0.72); margin-top: 0.6rem; }

/* Outline button on a light background (pricing page CTA) */
.btn-outline-dark {
  color: var(--primary-navy);
  border-color: rgba(10, 17, 40, 0.35);
}
.btn-outline-dark:hover { background: var(--primary-navy); color: #fff; border-color: var(--primary-navy); }

/* ==========================================================================
   TABLET / LARGE-PHONE HEADER (769px – 1100px)
   The desktop nav gained a sixth item (Pricing, Sep 2026). Between the
   hamburger breakpoint and ~1100px the logo, six links and the call button no
   longer fit at desktop sizing: the logo ran into HOME and NUFLOW was clipped.
   Tighten everything in that band instead of moving the hamburger up — a
   visible nav still converts better than a hidden one on a tablet.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1100px) {
  .header-container { padding: 0.9rem 1.25rem; gap: 1rem; }
  .logo-img-box { width: 110px; flex-shrink: 0; }
  nav { min-width: 0; }
  nav ul { gap: 1rem; }
  .nav-link { font-size: 0.74rem; letter-spacing: 1px; }
  .nav-cta {
    flex-shrink: 0;
    padding: 0.6rem 0.9rem;
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    gap: 0.4em;
  }
  /* Drop the word "Call" — the icon already says it (same as ≤768px) */
  .nav-cta-word { display: none; }
}

/* Narrow tablets (769–900px): six links still collide with the call button at
   the 769–1100 sizing above, so tighten one more notch here. */
@media (min-width: 769px) and (max-width: 900px) {
  .header-container { padding: 0.8rem 1rem; gap: 0.75rem; }
  .logo-img-box { width: 96px; }
  nav ul { gap: 0.7rem; }
  .nav-link { font-size: 0.68rem; letter-spacing: 0.6px; }
  .nav-cta { padding: 0.55rem 0.75rem; font-size: 0.68rem; }
}

/* Honeypot field on the booking form: off-screen rather than display:none,
   because some bots skip fields that are display:none. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}