/* ============================================================
   Landing Page Template — Stylesheet
   ALL per-client brand values live in the :root block below.
   Rebranding a client should only require editing :root
   (plus the Google Fonts <link> in index.html if fonts change).
   ============================================================ */

/* ---------- CSS Custom Properties (BRAND TOKENS) ---------- */
:root {
  /* Brand colours — edit per client */
  --brand-primary:      #1975bd;   /* main CTA / accent colour */
  --brand-primary-dark: #135d97;   /* hover state of primary */
  --brand-accent:       #cc3366;   /* secondary highlight colour */
  --gradient-brand:     linear-gradient(135deg, #0e4a79 0%, #1975bd 100%);

  /* Neutrals — usually fine to leave as-is */
  --neutral-dark:  #131a23;        /* dark nav bar, outline buttons, dark sections */
  --neutral-mid:   #1c2733;
  --neutral-darker:#0c1117;        /* hover state of dark buttons */
  --grey-lt:       #ebecee;
  --grey-mid:      #e5e5e5;
  --white:         #ffffff;
  --text-dark:     #262d3a;
  --text-mid:      #555;
  --text-soft:     #74777b;

  /* Typography — keep in sync with the Google Fonts <link> in index.html */
  --font-heading: 'Teko', sans-serif;
  --font-body:    'Helvetica', sans-serif;

  /* Layout */
  --container:   1200px;
  --radius-btn:  4px;
  --radius-card: 8px;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-dark);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a  { text-decoration: none; color: inherit; }
ul { list-style: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  line-height: 1.15;
}

/* ---------- Utility ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.btn-primary {
  display: inline-block;
  background: var(--brand-primary);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  border: 2px solid var(--brand-primary);
  cursor: pointer;
  transition: background .2s, border-color .2s;
  text-align: center;
}
.btn-primary:hover { background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); }

.btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--neutral-dark);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 26px;
  border-radius: var(--radius-btn);
  border: 2px solid var(--neutral-dark);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.btn-outline:hover { background: var(--neutral-dark); color: var(--white); }

.btn-outline-white {
  display: inline-block;
  background: transparent;
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 26px;
  border-radius: var(--radius-btn);
  border: 2px solid var(--white);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.btn-outline-white:hover { background: var(--white); color: var(--neutral-dark); }

.section-tag {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 8px;
  display: block;
}

/* ---------- NAVIGATION ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--white);
  border-bottom: 1px solid var(--grey-mid);
}

.nav-top-bar {
  background: var(--neutral-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 24px;
  font-size: 13px;
  color: var(--white);
  font-weight: 600;
}
.nav-top-bar a {
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nav-top-bar a:hover { color: var(--brand-accent); }

.btn-nav-dark {
  display: inline-block;
  background: var(--neutral-dark);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 22px;
  border-radius: var(--radius-btn);
  border: 2px solid var(--neutral-dark);
  cursor: pointer;
  transition: background .2s, border-color .2s;
  text-align: center;
  white-space: nowrap;
}
.btn-nav-dark:hover { background: var(--neutral-darker); border-color: var(--neutral-darker); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  max-width: 1440px;
  margin: 0 auto;
  height: 80px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-logo svg { height: 36px; width: auto; }

.nav-logo-text {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--neutral-dark);
  line-height: 1;
}

.nav-logo-text span {
  display: block;
  font-size: 11px;
  font-weight: 400;
  font-family: var(--font-body);
  letter-spacing: 0.05em;
  color: var(--text-mid);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links a {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--neutral-dark);
  transition: color .2s;
}
.nav-links a:hover { color: var(--brand-primary); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-phone {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--neutral-dark);
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--neutral-dark);
  border-radius: 2px;
  transition: .3s;
}

/* Mobile nav drawer */
.nav-mobile-drawer {
  display: none;
  flex-direction: column;
  background: var(--white);
  border-top: 1px solid var(--grey-mid);
  padding: 16px 24px 24px;
  gap: 16px;
}
.nav-mobile-drawer.open { display: flex; }
.nav-mobile-drawer a {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--neutral-dark);
  padding: 8px 0;
  border-bottom: 1px solid var(--grey-mid);
}
.nav-mobile-drawer .btn-primary { text-align: center; }

/* ---------- HERO / HEADER ---------- */
.hero {
  background: var(--neutral-darker);
  position: relative;
  overflow: hidden;
}

/* Stone photo background */
.hero-bg-stone {
  position: absolute;
  inset: 0;
  background: url('../images/hero-bg.webp') 50% 35%/cover no-repeat;
  z-index: 0;
}
.hero-bg-stone::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.22);
}

/* Gradient overlay */
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(122deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 100%);
  z-index: 1;
}

/* Product bottle — lower left */
.hero-product-img {
  position: absolute;
  bottom: 0;
  left: -2%;
  width: 40%;
  max-width: 520px;
  pointer-events: none;
  z-index: 2;
  object-fit: contain;
  object-position: bottom left;
}

.hero-inner {
  position: relative;
  z-index: 3;
  max-width: 1440px;
  margin: 0 auto;
  padding: 60px 80px;
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 48px;
  align-items: start;
}

.hero-content { color: var(--white); padding-top: 40px; }

.hero-content h1 {
  font-size: 46px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 20px;
}

.hero-content .hero-sub {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 20px;
  max-width: 520px;
}

.hero-stars {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 400;
  color: var(--white);
  opacity: 0.9;
  margin-bottom: 32px;
}

.hero-stars .stars { color: var(--brand-accent); font-size: 18px; }

/* Form column wrapper */
.hero-form-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Hero Form */
.hero-form-wrap {
  background: var(--grey-lt);
  padding: 32px;
}

.hero-form-title {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 24px;
  line-height: 1.2;
}

/* Form label row (label + helper link on same line) */
.form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.form-label-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
  text-decoration: underline;
  white-space: nowrap;
}
.form-label-link:hover { color: var(--brand-primary); }

.form-req { color: var(--brand-primary); }

.form-field-hint {
  font-size: 12px;
  font-style: italic;
  color: var(--text-soft);
  margin: 0 0 4px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.form-group.full { grid-column: 1 / -1; }

.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px 12px;
  border: 1px solid var(--grey-mid);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-dark);
  background: var(--white);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
}

.phone-input {
  display: flex;
  gap: 8px;
}

.phone-flag {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 10px;
  border: 1px solid var(--grey-mid);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--grey-lt);
}

.phone-input input { flex: 1; }

.form-submit-btn {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  margin-top: 4px;
  margin-bottom: 8px;
}

.form-turnaround {
  text-align: center;
  font-size: 13px;
  color: var(--text-mid);
  margin-bottom: 16px;
}

.form-contact-bar {
  background: var(--brand-accent);
  border: 1px solid var(--neutral-dark);
  padding: 14px 20px;
  color: var(--white);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 20px;
}

.form-contact-bar .contact-label {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-contact-bar a { color: var(--white); font-weight: 600; }
.form-contact-bar a:hover { text-decoration: underline; }

/* ---------- TRAITS BAND ---------- */
.traits-band {
  background: var(--neutral-mid);
  overflow: hidden;
  padding: 0;
  height: 72px;
  display: flex;
  align-items: center;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }

.marquee-item {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
}

.marquee-item span {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  padding: 0 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.marquee-sep {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 600;
  color: var(--brand-accent);
  line-height: 1;
  padding: 0 4px;
  user-select: none;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- BEFORE / CLEANED / SEALED ---------- */
.before-after {
  background: var(--grey-lt);
  padding: 72px 0;
}

.before-after .section-heading {
  text-align: center;
  margin-bottom: 8px;
}

.before-after .section-heading h2 {
  font-size: 46px;
  font-weight: 700;
  color: var(--brand-primary);
  text-transform: uppercase;
}

.before-after .section-sub {
  text-align: center;
  font-size: 18px;
  color: var(--text-mid);
  margin-bottom: 40px;
}

.bcs-carousel {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

.bcs-slides {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
}

.bcs-slide {
  position: relative;
  aspect-ratio: 4/3;
  background: #aaa;
  overflow: hidden;
  min-height: 220px;
}

.bcs-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bcs-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.55);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  padding: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bcs-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

.bcs-arrow {
  background: none;
  border: 1px solid var(--grey-mid);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: var(--neutral-dark);
  transition: .2s;
}
.bcs-arrow:hover { background: var(--neutral-dark); color: var(--white); }

.bcs-dots {
  display: flex;
  gap: 8px;
}
.bcs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grey-mid);
  cursor: pointer;
  transition: .2s;
}
.bcs-dot.active { background: var(--brand-primary); }

/* ---------- SURFACES / STONE TYPES ---------- */
.surfaces {
  background: var(--white);
  padding: 72px 0;
}

.surfaces-header {
  text-align: center;
  margin-bottom: 48px;
}

.surfaces-header h2 {
  font-size: 36px;
  font-weight: 700;
  color: var(--brand-primary);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.surfaces-header p {
  font-size: 18px;
  color: var(--text-mid);
  max-width: 600px;
  margin: 0 auto;
}

.surfaces-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.surface-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  transition: transform .2s, box-shadow .2s;
}
.surface-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,0.13); }

.surface-card-img {
  aspect-ratio: 4/3;
  background: var(--grey-lt);
  position: relative;
  overflow: hidden;
  min-height: 200px;
}
.surface-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.surface-card-img .surface-location {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: var(--brand-primary);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.surface-card-body {
  padding: 20px;
  background: var(--white);
}

.surface-card-body h3 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--neutral-dark);
  margin-bottom: 12px;
}

.surface-card-body ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.surface-card-body ul li {
  font-size: 14px;
  color: var(--text-mid);
  display: flex;
  align-items: center;
  gap: 8px;
}

.surface-card-body ul li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-primary);
  flex-shrink: 0;
}

.surface-card-body .btn-outline {
  font-size: 13px;
  padding: 8px 18px;
}

/* ---------- QUOTE EXPECTATION ---------- */
.quote-expect {
  background: var(--grey-lt);
  padding: 72px 0;
}

.quote-expect-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.quote-expect-content h2 {
  font-size: 46px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--neutral-dark);
  margin-bottom: 12px;
}

.quote-expect-content .qe-sub {
  font-size: 22px;
  font-weight: 400;
  color: var(--text-mid);
  margin-bottom: 36px;
}

.qe-steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.qe-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.qe-step-num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--gradient-brand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--white);
}

.qe-step-text h4 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--neutral-dark);
  margin-bottom: 4px;
}

.qe-step-text p {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.5;
}

.quote-expect-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.quote-expect-imgs img {
  border-radius: 8px;
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
}

.quote-expect-imgs img:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 16/9;
}

/* ---------- REVIEWS ---------- */
.reviews {
  background: var(--gradient-brand);
  padding: 72px 0;
  color: var(--white);
}

.reviews-header {
  text-align: center;
  margin-bottom: 40px;
}

.reviews-header h2 {
  font-size: 46px;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 0;
}

.review-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.review-tab {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 20px;
  border: 2px solid rgba(255,255,255,0.4);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: .2s;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.review-tab.active,
.review-tab:hover {
  background: var(--white);
  color: var(--neutral-dark);
  border-color: var(--white);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.review-card {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 24px;
  color: var(--text-dark);
  display: none;
}
.review-card.visible { display: block; }

.review-card-type {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--brand-primary);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.review-card-stars {
  color: var(--brand-accent);
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.review-card blockquote {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-mid);
  margin-bottom: 16px;
  font-style: italic;
}

.review-card cite {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-dark);
  font-style: normal;
}

/* ---------- WHY PRESTIGE ---------- */
.why {
  background: var(--neutral-mid);
  padding: 72px 0;
  color: var(--white);
}

.why-header {
  text-align: center;
  margin-bottom: 48px;
}

.why-header h2 {
  font-size: 46px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 10px;
}

.why-header p {
  font-size: 22px;
  font-weight: 400;
  color: rgba(255,255,255,0.8);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.why-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.why-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-icon svg { width: 26px; height: 26px; fill: var(--white); }

.why-item-text h3 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
}

.why-item-text p {
  font-size: 15px;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
}

/* ---------- LOCATIONS ---------- */
.locations {
  background: var(--grey-lt);
  padding: 72px 0;
}

.locations-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.locations-content h2 {
  font-size: 46px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--neutral-dark);
  margin-bottom: 12px;
}

.locations-content p {
  font-size: 22px;
  color: var(--text-mid);
  margin-bottom: 32px;
}

.location-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.location-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--white);
  border-radius: 8px;
  border-left: 4px solid var(--brand-primary);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--neutral-dark);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.location-item svg { width: 20px; height: 20px; color: var(--brand-primary); flex-shrink: 0; }

.locations-map {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
}

.locations-map img { width: 100%; }

.map-placeholder {
  aspect-ratio: 4/3;
  background: var(--neutral-dark);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 18px;
  text-align: center;
  padding: 24px;
}

/* ---------- UGC / SOCIAL ---------- */
.ugc {
  background: var(--gradient-brand);
  padding: 72px 0;
  color: var(--white);
}

.ugc-header {
  text-align: center;
  margin-bottom: 12px;
}

.ugc-header h2 {
  font-size: 46px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.1;
}

.ugc-sub {
  text-align: center;
  font-size: 18px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 40px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.ugc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.ugc-item {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1;
  background: rgba(255,255,255,0.15);
}

.ugc-item img { width: 100%; height: 100%; object-fit: cover; }

.ugc-handle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  padding: 12px 10px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
}

.ugc-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(255,255,255,0.12);
  aspect-ratio: 1;
}

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--neutral-dark);
  padding: 56px 0 0;
  color: var(--white);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-brand p {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  margin: 16px 0 24px;
  max-width: 280px;
}

.footer-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col h4 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 16px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul li a {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  transition: color .2s;
}
.footer-col ul li a:hover { color: var(--white); }

.footer-bottom {
  padding: 16px 0;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

/* ---------- REVIEWS CAROUSEL ---------- */
.review-tabs { display: none; } /* removed */

.rev-carousel {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.rev-viewport {
  flex: 1;
  overflow: hidden;
}

.rev-track {
  display: flex;
  transition: transform 0.4s ease;
}

.rev-track .review-card {
  flex: 0 0 33.333%;
  display: block;
  padding: 0 10px;
  box-sizing: border-box;
}

.rev-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.45);
  background: transparent;
  color: var(--white);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
}
.rev-arrow:hover { background: var(--white); color: var(--neutral-dark); border-color: var(--white); }

.rev-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.rev-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  border: none;
  transition: .2s;
}
.rev-dot.active { background: var(--white); }

/* ---------- SURFACES WE CLEAN, SEAL & RESTORE ---------- */
.surfaces-restore {
  background: var(--white);
  padding: 80px 0;
}

.sr-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 56px;
  align-items: center;
}

.sr-text h2 {
  font-size: 38px;
  font-weight: 700;
  color: var(--brand-primary);
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 16px;
}

.sr-text p {
  font-size: 16px;
  color: var(--text-mid);
  line-height: 1.65;
  margin-bottom: 12px;
}

.sr-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.sr-carousel-wrap { overflow: hidden; }

.sr-carousel {
  display: flex;
  gap: 0;
  transition: transform 0.4s ease;
}

.sr-card {
  flex: 0 0 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}

.sr-card-img {
  aspect-ratio: 4/3;
  background: var(--grey-lt);
  position: relative;
  overflow: hidden;
  min-height: 220px;
}

.sr-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sr-card-body {
  padding: 22px;
  background: var(--white);
}

.sr-card-body h3 {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
  color: var(--neutral-dark);
  margin-bottom: 12px;
}

.sr-card-body ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.sr-card-body ul li {
  font-size: 14px;
  color: var(--text-mid);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sr-card-body ul li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-primary);
  flex-shrink: 0;
}

.sr-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

.sr-arrow {
  background: none;
  border: 1px solid var(--grey-mid);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  color: var(--neutral-dark);
  transition: .2s;
}
.sr-arrow:hover { background: var(--neutral-dark); color: var(--white); }

.sr-dots {
  display: flex;
  gap: 8px;
}

.sr-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grey-mid);
  border: none;
  cursor: pointer;
  transition: .2s;
}
.sr-dot.active { background: var(--brand-primary); }

/* ---------- PRESS ---------- */
.press {
  background: var(--neutral-mid);
  padding: 72px 0;
  text-align: center;
}

.press-heading {
  font-size: 40px;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.press-sub {
  font-size: 17px;
  color: rgba(255,255,255,0.75);
  font-style: italic;
  max-width: 560px;
  margin: 0 auto 48px;
  line-height: 1.6;
}

.press-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.press-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity .2s;
}
.press-logo:hover { opacity: 1; }

.press-logo-radio {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  color: var(--white);
}
.plr-call {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.plr-freq {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.65);
}

.press-logo-block .press-block-logo {
  background: var(--white);
  color: var(--neutral-dark);
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  border-radius: 4px;
}
.press-block-logo span {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--neutral-dark);
}

.press-logo-nine {
  color: var(--white);
  width: 52px;
  height: 52px;
}
.press-logo-nine svg { width: 100%; height: 100%; }

/* ---------- TESTIMONIAL-PRODUCT ---------- */
.testimonial-product {
  background: var(--gradient-brand);
  padding: 0;
}

.tp-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
}

.tp-content {
  padding: 72px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--white);
}

.tp-content h2 {
  font-size: 38px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 20px;
  color: var(--white);
}

.tp-content p {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.9);
  margin-bottom: 12px;
}

.tp-content strong { color: var(--white); }

.tp-cta {
  align-self: flex-start;
  margin: 8px 0 28px;
}

.tp-quote-block {
  background: rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 24px;
  border-left: 4px solid rgba(255,255,255,0.5);
}

.tp-quote-block blockquote {
  font-size: 15px;
  line-height: 1.65;
  font-style: italic;
  color: rgba(255,255,255,0.95);
  margin-bottom: 16px;
}

.tp-cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tp-cite strong {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.04em;
}

.tp-cite span {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}

.tp-image {
  position: relative;
  overflow: hidden;
  background: rgba(0,0,0,0.2);
  min-height: 400px;
}

.tp-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.tp-name-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--brand-primary);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 20px;
}

/* ---------- LOCATIONS MAP (updated) ---------- */
.locations-map svg {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ---------- FOOTER (simplified) ---------- */
.site-footer {
  background: var(--neutral-dark);
  padding: 56px 0 0;
  color: var(--white);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 48px;
  gap: 20px;
}

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

.footer-brand-text {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-align: left;
}

.footer-tagline {
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  max-width: 480px;
  line-height: 1.6;
}

.footer-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.footer-phone-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  transition: color .2s;
}
.footer-phone-link:hover { color: var(--brand-primary); }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* --- Tablet (≤1024px) --- */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-phone { display: none; }

  .hero-inner {
    grid-template-columns: 1fr;
    padding: 40px 24px;
  }
  .hero-content h1 { font-size: 40px; }
  .hero-product-img { display: none; }

  .surfaces-grid { grid-template-columns: repeat(2, 1fr); }

  .quote-expect-inner { grid-template-columns: 1fr; }
  .quote-expect-imgs { display: none; }

  .rev-track .review-card { flex: 0 0 50%; }

  .sr-inner { grid-template-columns: 1fr; }
  .sr-ctas { flex-direction: row; }

  .tp-inner { grid-template-columns: 1fr; }
  .tp-image { min-height: 320px; }

  .locations-inner { grid-template-columns: 1fr; }
  .locations-map { display: none; }

  .press-logos { gap: 28px; }
}

/* --- Mobile (≤767px) --- */
@media (max-width: 767px) {
  .nav-top-bar { font-size: 12px; }

  .hero-inner { padding: 32px 16px; }
  .hero-content h1 { font-size: 32px; }
  .hero-content .hero-sub { font-size: 16px; }

  .hero-form-wrap { margin: 0; }
  .hero-form-title { font-size: 24px; }
  .hero-content { padding-top: 0; }
  .form-row { grid-template-columns: 1fr; }

  .traits-band { height: 60px; }
  .marquee-item span { font-size: 16px; }
  .marquee-sep { font-size: 28px; }

  .before-after { padding: 48px 0; }
  .before-after .section-heading h2 { font-size: 32px; }
  .bcs-slides { grid-template-columns: 1fr; }
  .bcs-slide:not(:first-child) { display: none; }

  .surfaces { padding: 48px 0; }
  .surfaces-header h2 { font-size: 28px; }
  .surfaces-grid { grid-template-columns: 1fr; }

  .quote-expect { padding: 48px 0; }
  .quote-expect-content h2 { font-size: 32px; }
  .quote-expect-content .qe-sub { font-size: 18px; }

  .reviews { padding: 48px 0; }
  .reviews-header h2 { font-size: 32px; }
  .rev-track .review-card { flex: 0 0 100%; }
  .rev-carousel { gap: 8px; }

  .surfaces-restore { padding: 48px 0; }
  .sr-text h2 { font-size: 28px; }
  .sr-ctas { flex-direction: column; }

  .press { padding: 48px 0; }
  .press-heading { font-size: 28px; }
  .press-logos { gap: 20px; }
  .plr-call { font-size: 22px; }

  .testimonial-product .tp-content { padding: 48px 24px; }
  .tp-content h2 { font-size: 28px; }
  .tp-image { min-height: 280px; }

  .locations { padding: 48px 0; }
  .locations-content h2 { font-size: 32px; }
  .locations-content p { font-size: 18px; }

  .site-footer { padding: 40px 0 0; }
  .footer-brand-text { font-size: 20px; }
  .footer-actions { flex-direction: column; gap: 12px; }
}

/* ---------- TEMPLATE ADDITIONS ----------
   Classes that replace per-element hardcoded colours so the
   whole page rebrands from the :root tokens above. */

/* Logo marks (nav + footer) pick up the brand colour */
.nav-logo svg,
.footer-logo-wrap svg { color: var(--brand-primary); }

/* Mobile drawer phone link */
.nav-mobile-drawer .drawer-phone {
  color: var(--brand-primary);
  font-weight: 700;
}

/* Service-area map */
.locations-map .map-land   { fill: #2e3b4e; stroke: #4a5c72; }
.locations-map .map-border { stroke: #4a5c72; }
.locations-map .map-pin    { fill: var(--brand-primary); }
.locations-map .map-pin-halo { fill: var(--brand-primary); opacity: .25; }

/* Default background behind card images (shows until photos are added) */
.surface-card-img,
.sr-card-img { background: var(--grey-mid); }

/* Form states (toggled by landing.js — no inline colours) */
.field-error { border-color: var(--brand-primary) !important; }
.form-submit-btn.sent {
  background: var(--neutral-mid);
  border-color: var(--neutral-mid);
}

/* ============================================================
   ZEEE CLIENT OVERRIDES & SECTIONS
   ============================================================ */
:root {
  --star: #f4b400;   /* Google-review gold for star ratings */
}

/* Logo images */
.nav-logo-img { height: 48px; width: auto; }
.footer-logo-chip {
  display: inline-block;
  background: var(--white);
  border-radius: 8px;
  padding: 10px 16px;
}
.footer-logo-chip img { height: 44px; width: auto; }

/* Gold star ratings (Google style) */
.hero-stars .stars,
.review-card-stars { color: var(--star); }

/* Hero promo pill */
.hero-promo-pill {
  display: inline-block;
  margin-top: 22px;
  padding: 10px 18px;
  border: 2px solid var(--star);
  border-radius: 999px;
  color: var(--white);
  font-size: 15px;
  background: rgba(0,0,0,0.35);
  transition: background .2s, transform .2s;
}
.hero-promo-pill strong {
  color: var(--star);
  font-family: var(--font-heading);
  font-size: 18px;
  letter-spacing: 0.04em;
}
.hero-promo-pill:hover { background: rgba(0,0,0,0.55); }

/* Promo fine print */
.tp-fineprint {
  margin-top: 22px;
  font-size: 11px;
  line-height: 1.6;
  opacity: 0.65;
}

/* Benefits icon grid */
.benefits {
  background: var(--grey-lt);
  padding: 72px 0;
}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 48px;
  margin-top: 48px;
}
.benefit-item { text-align: center; }
.benefit-item img {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
}
.benefit-item h4 {
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
  color: var(--text-dark);
}
.benefit-item p {
  font-size: 15px;
  color: var(--text-mid);
  max-width: 320px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .benefits { padding: 56px 0; }
  .benefits-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Accreditation logos */
.press-logo-img {
  height: 56px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}
.press-logo-img-lg { height: 88px; max-width: 160px; }

/* Service-areas photo (replaces the map SVG) */
.locations-photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

/* Footer extras */
.footer-contact-line {
  margin-top: 18px;
  font-size: 14px;
  opacity: 0.85;
}
.footer-contact-line a { text-decoration: underline; text-underline-offset: 2px; }
.footer-fineprint {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.6;
  opacity: 0.55;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* Range section colour swatches */
.sr-swatches {
  width: 100%;
  max-width: 360px;
  border-radius: 8px;
  margin: 4px 0 20px;
}

/* Teko sits high — nudge heading rhythm slightly */
h1, h2, h3, h4 { letter-spacing: 0.01em; }

/* Keep the quote form fully on-brand blue (accent #c36 is reserved
   for text links per the Zeee style guide) */
.hero-form-title {
  background: linear-gradient(90deg, var(--brand-primary-dark) 0%, var(--brand-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.form-contact-bar {
  background: var(--brand-primary);
  border-color: var(--brand-primary-dark);
}

/* Brief: link colour #c36 applies to inline text links */
.tp-content a:not(.btn-outline-white),
.footer-contact-line a { color: inherit; }
.benefit-item a,
p a:not([class]) { color: var(--brand-accent); }

/* Uniform white chips behind accreditation logos (mixed gif/png/webp
   sources — some have baked-in white backgrounds) */
.press-logo-img {
  background: var(--white);
  padding: 10px 14px;
  border-radius: 8px;
  height: 72px;
  box-sizing: content-box;
}
.press-logo-img-lg { height: 96px; }
.press-logo { opacity: 1; }

/* Mobile nav: the wide Zeee logo needs the room — CTA lives in the
   top bar, drawer, and hero form on small screens */
@media (max-width: 767px) {
  .nav-actions { display: none; }
  .nav-logo-img { height: 40px; }
}

/* Drawer CTA: .nav-mobile-drawer a outranks .btn-primary's white text */
.nav-mobile-drawer a.btn-primary { color: var(--white); }

/* ============================================================
   ZEEE ROUND-2 FEEDBACK FIXES
   ============================================================ */

/* --- Hero: show the bright home-entry photo; gradient only where text sits --- */
.hero-bg-stone {
  background-position: 50% 62%;
}
.hero-bg-stone::after { background: rgba(0,0,0,0.08); }
.hero-bg-overlay {
  background: linear-gradient(97deg,
    rgba(10,16,22,0.86) 0%,
    rgba(10,16,22,0.62) 38%,
    rgba(10,16,22,0.18) 66%,
    rgba(10,16,22,0.02) 85%);
}

/* --- Google icons --- */
.hero-google-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.rev-track .review-card { position: relative; }
.review-google-icon {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* --- Review cards: real padding + visible gutters (margins keep the
       33.333%-per-card page math intact for translateX paging) --- */
.rev-track .review-card {
  flex: 0 0 calc(33.333% - 20px);
  margin: 0 10px;
  padding: 24px;
}
@media (max-width: 1024px) and (min-width: 768px) {
  .rev-track .review-card { flex: 0 0 calc(50% - 20px); }
}
@media (max-width: 767px) {
  .rev-track .review-card { flex: 0 0 calc(100% - 20px); }
}

/* --- Nav: click-to-call phone + blue CTA --- */
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color .2s;
}
.nav-phone svg { color: var(--brand-primary); }
.nav-phone:hover { color: var(--brand-primary); }
.nav-actions .btn-nav {
  padding: 10px 22px;
  font-size: 15px;
  white-space: nowrap;
}

/* --- Promo: solid white CTA + uncropped banner image --- */
.testimonial-product .tp-cta {
  background: var(--white);
  color: var(--brand-primary-dark);
  border-color: var(--white);
}
.testimonial-product .tp-cta:hover {
  background: var(--grey-lt);
  border-color: var(--grey-lt);
  color: var(--brand-primary-dark);
}
.testimonial-product .tp-image { background: #000; } /* matches the creative's black */
.testimonial-product .tp-image img {
  object-fit: contain;
  object-position: center;
}

/* --- Range cards: warranty chip was unpositioned inside sr-card-img
       (template scopes .surface-location to .surface-card-img only) --- */
.sr-card-img .surface-location {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--brand-primary);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Why Crimsafe: licensee badge (moved out of accreditations row) --- */
.why-licensee-badge {
  display: block;
  width: 120px;
  margin: 18px auto 28px;
}

/* --- Accreditation logos: render at native-ish size to avoid upscale blur --- */
.press-logo-img {
  height: 44px;
  width: auto;
  max-width: 150px;
  padding: 12px 18px;
}

/* --- Form: keep fields contained inside the card --- */
.form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  min-width: 0;
}
.phone-input input {
  flex: 1;
  min-width: 0;
}
.phone-input .phone-flag { flex-shrink: 0; }

/* --- Footer: single inline row, tighter spacing --- */
.site-footer { padding: 32px 0 0; }
.footer-inner {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  gap: 18px 28px;
  padding-bottom: 28px;
}
.footer-logo-chip { padding: 8px 12px; }
.footer-logo-chip img { height: 38px; }
.footer-tagline {
  margin: 0;
  font-size: 14px;
  max-width: 420px;
  opacity: 0.85;
}
.footer-actions { margin: 0; gap: 18px; }
.footer-actions .btn-primary { padding: 11px 20px; font-size: 14px; }
.footer-bottom a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 767px) {
  .footer-inner {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }
}

/* ============================================================
   ZEEE ROUND-3 FEEDBACK FIXES
   ============================================================ */

/* --- Accreditation logos: no chips — light-grey artwork straight on
       the dark band (invert flips the white-background source files,
       screen blend drops the resulting black box), single row --- */
.press-logos {
  flex-wrap: nowrap;
  gap: 48px;
  justify-content: center;
}
.press-logo-img,
.press-logo-img-lg {
  background: transparent;
  padding: 0;
  border-radius: 0;
  height: 40px;
  max-width: 170px;
  width: auto;
  object-fit: contain;
  filter: invert(1) grayscale(1) brightness(1.75) contrast(0.92);
  mix-blend-mode: screen;
}
@media (max-width: 1023px) {
  .press-logos { flex-wrap: wrap; gap: 28px 36px; }
}

/* --- Range slider: keep card image below the 680px-wide source
       files so the product renders crisp --- */
.sr-carousel-wrap {
  max-width: 540px;
  justify-self: center;
  width: 100%;
}

/* --- Form: uniform control heights (phone flag + inputs matched) --- */
.form-group input,
.form-group select {
  height: 46px;
}
.phone-input { align-items: stretch; }
.phone-flag { height: 46px; }

/* --- Promo fine print as a link (scrolls to full T&Cs in footer) --- */
.tp-fineprint a {
  color: var(--white);
  opacity: 0.9;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tp-fineprint a:hover { opacity: 1; }

/* ============================================================
   ZEEE ROUND-4: POLISH & ANIMATIONS
   ============================================================ */

/* --- Scroll-reveal (classes applied/removed by JS; without JS the
       page renders fully visible) --- */
.will-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .65s ease, transform .65s ease;
}
.will-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --- Card hover lift --- */
.surface-card,
.sr-card,
.review-card,
.benefit-item {
  transition: transform .25s ease, box-shadow .25s ease;
}
.surface-card:hover,
.sr-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.13);
}
.rev-track .review-card:hover { transform: translateY(-4px); }
.benefit-item:hover { transform: translateY(-4px); }

/* --- Hero ambient zoom --- */
@keyframes heroZoom { to { transform: scale(1.06); } }
.hero-bg-stone {
  animation: heroZoom 16s ease-out forwards;
  will-change: transform;
}

/* --- Promo countdown --- */
.promo-countdown {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.pc-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.85;
  margin-right: 2px;
}
.pc-unit {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  min-width: 64px;
}
.pc-unit strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}

/* --- Sticky mobile CTA bar --- */
.mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: none;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--white);
  box-shadow: 0 -4px 18px rgba(0,0,0,0.15);
  transform: translateY(110%);
  transition: transform .3s ease;
}
.mobile-cta-bar.visible { transform: translateY(0); }
.mcb-call {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  border: 2px solid var(--brand-primary);
  border-radius: var(--radius-btn);
  color: var(--brand-primary);
  padding: 10px 14px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.mcb-quote {
  flex: 1;
  background: var(--brand-primary);
  border: 2px solid var(--brand-primary);
  border-radius: var(--radius-btn);
  color: var(--white);
  text-align: center;
  padding: 10px 12px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .mobile-cta-bar { display: flex; }
}

/* --- Respect reduced-motion preferences --- */
@media (prefers-reduced-motion: reduce) {
  .will-reveal { opacity: 1; transform: none; transition: none; }
  .hero-bg-stone { animation: none; }
  .surface-card:hover,
  .sr-card:hover,
  .rev-track .review-card:hover,
  .benefit-item:hover { transform: none; }
  .mobile-cta-bar { transition: none; }
}

/* ============================================================
   ZEEE ROUND-5 FEEDBACK FIXES
   ============================================================ */

/* --- Hero parallax (JS drives --hero-parallax; the bg is oversized
       and pre-scaled so it can drift without exposing edges) --- */
.hero-bg-stone {
  inset: -14% 0;
  animation: none; /* ambient zoom replaced by parallax */
  transform: translate3d(0, var(--hero-parallax, 0px), 0) scale(1.06);
  will-change: transform;
}

/* --- Promo countdown on mobile: label on its own line, four units
       share the row so "sec" never wraps --- */
@media (max-width: 767px) {
  .promo-countdown { gap: 8px; }
  .pc-label { flex-basis: 100%; margin-bottom: 2px; }
  .pc-unit { min-width: 0; flex: 1; padding: 6px 4px; }
}

/* --- Why Crimsafe on mobile: show all three feature tiles stacked
       (template hides slides 2-3 for its rotating carousel) --- */
@media (max-width: 767px) {
  .bcs-slide:not(:first-child) { display: block; }
}

/* --- Accreditation band: same navy as zeee.com.au footer, logos at
       35px = 70px native pixels → 1:1 on retina (no upscale blur) --- */
.press { background: #01112b; }
.press-logo-img,
.press-logo-img-lg { height: 35px; }
.press-logos { gap: 40px; }

/* --- Footer clearance so the sticky mobile bar never covers the
       T&Cs fine print at the end of the page --- */
@media (max-width: 767px) {
  .footer-bottom { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
}

/* --- Count-up stats band --- */
.stats-band {
  background: var(--white);
  padding: 64px 0;
  border-top: 1px solid var(--grey-mid);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
.stat-num {
  font-family: var(--font-heading);
  font-size: 58px;
  font-weight: 600;
  color: var(--brand-primary);
  line-height: 1;
}
.stat-label {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-mid);
}
@media (max-width: 767px) {
  .stats-band { padding: 48px 0; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 30px 16px; }
  .stat-num { font-size: 46px; }
}

/* --- Promo creative: fade the image's top/bottom edges into the
       panel's black so the letterbox bands read as one seamless
       composition instead of hard seams --- */
.testimonial-product .tp-image img {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

/* --- Promo creative on stacked layouts: panel matches the image's
       exact aspect ratio — fills edge-to-edge, no letterbox bands --- */
@media (max-width: 1024px) {
  .testimonial-product .tp-image {
    aspect-ratio: 1030 / 787;
    min-height: 0;
  }
  .testimonial-product .tp-image img {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ============================================================
   NINJA FORMS SHIM (production WordPress plugin)
   Makes the embedded Ninja Form match the static form design.
   Scoped to .hero-form-wrap — no effect anywhere else.
   ============================================================ */
.hero-form-wrap .nf-form-fields-required { display: none; }
.hero-form-wrap .nf-field-container { margin-bottom: 12px; }
.hero-form-wrap .nf-field-label label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  font-family: var(--font-body);
}
.hero-form-wrap .nf-field-element input[type="text"],
.hero-form-wrap .nf-field-element input[type="tel"],
.hero-form-wrap .nf-field-element input[type="email"],
.hero-form-wrap .nf-field-element textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--grey-mid);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-dark);
  background: var(--white);
  transition: border-color .2s;
}
.hero-form-wrap .nf-field-element input[type="text"],
.hero-form-wrap .nf-field-element input[type="tel"],
.hero-form-wrap .nf-field-element input[type="email"] { height: 46px; }
.hero-form-wrap .nf-field-element input:focus,
.hero-form-wrap .nf-field-element textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
}
.hero-form-wrap .nf-field-element input[type="button"],
.hero-form-wrap .nf-field-element input[type="submit"] {
  width: 100%;
  background: var(--brand-primary);
  border: 2px solid var(--brand-primary);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.hero-form-wrap .nf-field-element input[type="button"]:hover,
.hero-form-wrap .nf-field-element input[type="submit"]:hover {
  background: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}
.hero-form-wrap .nf-error-msg,
.hero-form-wrap .ninja-forms-req-symbol { color: #c0392b; }
.hero-form-wrap .nf-response-msg {
  color: var(--text-dark);
  font-size: 15px;
}

/* ============================================================
   WORDPRESS EMBED HARDENING
   Every Zeee plugin wraps its output in .zeee-lp-root (alongside its own
   per-page class), so these rules cover every Zeee landing page.
   These rules only apply there — the static page is untouched.
   ============================================================ */

/* Break every top-level section out of boxed page-builder containers
   (Elementor boxed sections, theme content wrappers, etc.) */
.zeee-lp-root > nav,
.zeee-lp-root > section,
.zeee-lp-root > footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* wpautop debris: empty paragraphs / stray breaks injected by content
   filters must never become grid children */
.zeee-lp-root p:empty,
.zeee-lp-root > br { display: none; }

/* ============================================================
   WORDPRESS THEME-BLEED ARMOUR
   The host theme styles generic `button`, `img`, and even
   `.site-footer` — these rules re-assert our design with
   enough force to survive any theme/optimiser cascade.
   Scoped to the plugin's root wrapper; static page untouched.
   ============================================================ */

/* --- Nav + footer logos: themes love `img { height: auto }` --- */
.zeee-lp-root .nav-logo-img {
  height: 48px !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
}
.zeee-lp-root .footer-logo-chip img {
  height: 38px !important;
  width: auto !important;
  max-width: none !important;
}
@media (max-width: 767px) {
  .zeee-lp-root .nav-logo-img { height: 40px !important; }
}

/* --- Footer: themes commonly style `.site-footer` directly --- */
.zeee-lp-root > footer.site-footer {
  width: 100vw !important;
  max-width: none !important;
  margin: 0 0 0 calc(50% - 50vw) !important;
  background: var(--neutral-dark) !important;
  padding: 32px 0 0 !important;
  color: var(--white) !important;
}
.zeee-lp-root .footer-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  text-align: left !important;
  gap: 18px 28px !important;
  padding-bottom: 28px !important;
  margin: 0 auto !important;
}
@media (max-width: 767px) {
  .zeee-lp-root .footer-inner {
    flex-direction: column !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* --- Reinforce the full-bleed breakout on every section --- */
.zeee-lp-root > nav,
.zeee-lp-root > section {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
}

/* --- Carousel controls: themes style bare <button> elements --- */
.zeee-lp-root .bcs-arrow,
.zeee-lp-root .sr-arrow {
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 1px solid var(--grey-mid) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  color: var(--neutral-dark) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.zeee-lp-root .rev-arrow {
  width: 44px !important;
  height: 44px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 2px solid rgba(255,255,255,0.45) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  color: var(--white) !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
.zeee-lp-root .rev-arrow:hover {
  background: var(--white) !important;
  color: var(--neutral-dark) !important;
}
.zeee-lp-root .bcs-dot,
.zeee-lp-root .sr-dot,
.zeee-lp-root .rev-dot {
  width: 8px !important;
  height: 8px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px;
  overflow: hidden;
}
.zeee-lp-root .sr-dot { background: var(--grey-mid) !important; }
.zeee-lp-root .sr-dot.active { background: var(--brand-primary) !important; }
.zeee-lp-root .rev-dot { background: rgba(255,255,255,0.3) !important; }
.zeee-lp-root .rev-dot.active { background: var(--white) !important; }

/* --- Accreditation logos: re-assert the invert/screen treatment --- */
.zeee-lp-root .press-logo-img {
  height: 35px !important;
  width: auto !important;
  max-width: 170px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  filter: invert(1) grayscale(1) brightness(1.75) contrast(0.92) !important;
  mix-blend-mode: screen !important;
}

/* --- Ninja Forms: keep its anti-spam honeypot invisible (our input
       styling was giving the hidden field a visible box) --- */
.zeee-lp-root .nf-field-hp,
.zeee-lp-root .nf-form-hp,
.zeee-lp-root [class*="-hp-wrap"],
.zeee-lp-root .nf-form-fields-required {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Anchor-scroll offset for the sticky nav (used by scrollIntoView and
   native hash navigation alike) */
:where([id]) { scroll-margin-top: 96px; }

/* Sticky bar must out-stack third-party chat widgets (Podium etc. use
   near-max z-index with invisible tap-catching containers) */
.mobile-cta-bar { z-index: 2147483600 !important; }

/* ============================================================
   SHUTTERS / BLINDS / AWNINGS PAGE
   The window-coverings landing page (/shutters-blinds-awnings)
   shares this whole stylesheet with the Crimsafe page. The only
   thing it needs of its own is its hero photograph, so it carries
   .hero-wc on the hero section.

   ADDITIVE ONLY. Everything above is shared by both pages — a
   change up there ships to the live Crimsafe page too.
   ============================================================ */

.hero-wc .hero-bg-stone {
  /* Indoor-outdoor living shot: reads as blinds AND awnings, which is
     what this page has to cover in one hero. Swap the URL to re-shoot
     it — nothing else in the hero depends on the image. */
  background-image: url('../images/wc/ziptrak-hero.jpg');
  background-position: 50% 50%;
}

/* The alfresco photo is brighter than the Crimsafe streetscape, so the
   headline needs a touch more separation from it than the 0.08 above. */
.hero-wc .hero-bg-stone::after { background: rgba(0,0,0,0.18); }

/* The Crimsafe promo panel above is a designed creative: it letterboxes on
   black (object-fit:contain) and is masked top and bottom. The window-coverings
   page puts a PHOTOGRAPH in that slot instead, which has to fill the panel
   edge to edge — so .tp-photo undoes all three. */
.tp-photo .tp-image { background: var(--brand-primary-dark); }
.tp-photo .tp-image img {
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: none;
  mask-image: none;
}

/* ============================================================
   CATEGORY BLOCKS — window-coverings page only
   One block per ad-group category, each holding a COMPACT
   sub-product grid plus its own colours/fabrics strip.

   Deliberately not a carousel: the whole point of naming every
   sub-product is that someone searching "roman blinds" sees the
   word on landing. A carousel would hide 7 of 8 behind a click.
   Compact cards cost about the same vertical space as a carousel
   and hide nothing.
   ============================================================ */

.cat-block { padding: 50px 0 54px; }
.cat-block.cat-alt { background: var(--grey-lt); }

.cat-head { max-width: 820px; margin-bottom: 32px; }
.cat-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 8px;
}
.cat-head h2 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--text-dark);
  margin-bottom: 12px;
}
.cat-head p { font-size: 15.5px; line-height: 1.65; color: var(--text-mid); }

/* --- compact sub-product cards --- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.cat-card {
  background: var(--white);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0,0,0,0.13); }
.cat-card-img { aspect-ratio: 4 / 3; background: var(--grey-mid); }
.cat-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-card-body { padding: 14px 16px 18px; }
.cat-card-body h3 {
  font-family: var(--font-heading);
  font-size: 21px;
  line-height: 1.1;
  color: var(--text-dark);
  margin-bottom: 5px;
}
.cat-card-body p { font-size: 13.5px; line-height: 1.5; color: var(--text-mid); }


/* Motorisation band: three text columns, no imagery — keeps a
   cross-category section from reading as a fifth product family. */
.smart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.smart-item h4 {
  font-family: var(--font-heading);
  font-size: 22px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 6px;
}
.smart-item p { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.82); }
.cat-block.cat-dark { background: var(--neutral-dark); }
.cat-dark .cat-head h2 { color: var(--white); }
.cat-dark .cat-head p { color: rgba(255,255,255,0.78); }
.cat-dark .cat-eyebrow { color: #6fb4ef; }

@media (max-width: 1024px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .smart-grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 767px) {
  .cat-block { padding: 38px 0 42px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cat-card-body { padding: 12px 13px 15px; }
  .cat-card-body h3 { font-size: 19px; }
  .cat-card-body p { font-size: 12.5px; }
}

/* A couple of sub-products only exist as a PORTRAIT product shot. Cropping
   those to the 4:3 card cuts the very thing on display — the stacked panels
   and the head track — so those cards letterbox the whole image instead. */
.cat-card-img.fit-whole { background: #f3f3f1; }
.cat-card-img.fit-whole img { object-fit: contain; }

/* ============================================================
   THE PROMISE BLOCK — window-coverings page
   Replaces the repurposed Crimsafe promo panel that used to sit
   below the hero. That layout carried a blockquote box whose
   1-2-3-4 "how it works" duplicated the "What happens after you
   enquire" section further down the page, plus a corner badge
   that only made sense on a prize promo. This is built for the
   job instead: one claim, three pillars, one CTA.
   ============================================================ */

.promise {
  background: var(--gradient-brand);
  color: var(--white);
  padding: 56px 0 60px;
}
.promise-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.promise-head h2 {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4.6vw, 48px);
  line-height: 1.04;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.promise-head p { font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,0.88); }

.promise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 38px;
}
.promise-item {
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-card);
  padding: 26px 24px 24px;
}
.promise-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  color: var(--white);
}
.promise-icon svg { width: 100%; height: 100%; display: block; }
.promise-item h3 {
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.promise-item p { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.84); }

.promise-cta { text-align: center; }
.promise-note {
  margin-top: 14px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.76);
}

/* ============================================================
   WORK GALLERY
   Only genuine Zeee installs belong here — a section headed
   "our work" is a claim about work they did, so supplier stock
   from the product blocks must never be dropped in.
   Feature tile spans 2x2, four singles fill the rest of the 4x2.
   ============================================================ */

.gallery { padding: 52px 0 56px; background: var(--white); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: 14px;
}
.gallery-item {
  overflow: hidden;
  border-radius: var(--radius-card);
  position: relative;
  background: var(--grey-mid);
}
.gallery-item.is-feature { grid-column: span 2; grid-row: span 2; }
/* Two half-width tiles close the last row exactly: the 2x2 feature (4 cells)
   + 4 singles + 2 wides (4 cells) = 12 = three full rows of four. Without
   them, seven photos leave two dead cells hanging off the end. */
.gallery-item.is-wide { grid-column: span 2; }
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 16px 12px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
  background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
}

/* ============================================================
   MOTORISATION PANEL — image beside the three points
   ============================================================ */

.smart-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.smart-photo {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.smart-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.smart-list { display: grid; gap: 20px; }
.smart-row { display: flex; gap: 16px; align-items: flex-start; }
.smart-row-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  color: #6fb4ef;
}
.smart-row-icon svg { width: 100%; height: 100%; display: block; }
.smart-row h4 {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 5px;
}
.smart-row p { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.82); }

@media (max-width: 1024px) {
  .promise-grid { grid-template-columns: 1fr; gap: 16px; }
  .smart-inner { grid-template-columns: 1fr; gap: 26px; }
  .gallery-grid { grid-auto-rows: 165px; }
}
@media (max-width: 767px) {
  .promise { padding: 48px 0 52px; }
  .gallery { padding: 46px 0 50px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 10px; }
  .gallery-item.is-feature { grid-column: span 2; grid-row: span 2; }
  .gallery-item.is-wide { grid-column: span 2; }
}

/* ============================================================
   GALLERY LIGHTBOX
   Overlay is built by landing.js on first use, so the WordPress
   plugin template needs no extra markup. Sits above the sticky
   mobile CTA bar, which claims a near-max z-index of its own.
   ============================================================ */

.gallery-item { cursor: zoom-in; }
.gallery-item:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 3px;
}

.lb {
  position: fixed;
  inset: 0;
  z-index: 2147483640;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  background: rgba(8, 12, 18, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
.lb.is-open { opacity: 1; visibility: visible; }

.lb-stage {
  position: relative;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  transform: scale(0.94) translateY(10px);
  opacity: 0;
  transition: transform 0.34s cubic-bezier(0.22, 0.9, 0.3, 1), opacity 0.28s ease;
}
.lb.is-open .lb-stage { transform: none; opacity: 1; }

/* Direction-aware swap between images. The stage animates in from
   the side you are travelling towards, so paging feels physical. */
.lb-stage.slide-next { animation: lbNext 0.34s cubic-bezier(0.22, 0.9, 0.3, 1); }
.lb-stage.slide-prev { animation: lbPrev 0.34s cubic-bezier(0.22, 0.9, 0.3, 1); }
@keyframes lbNext {
  from { opacity: 0; transform: translateX(34px); }
  to   { opacity: 1; transform: none; }
}
@keyframes lbPrev {
  from { opacity: 0; transform: translateX(-34px); }
  to   { opacity: 1; transform: none; }
}

.lb-img {
  max-width: min(100%, calc(100vw - 160px));
  max-height: calc(100vh - 150px);
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  background: var(--neutral-mid);
}
.lb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 2px 0;
  color: var(--white);
}
.lb-cap {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.lb-count { font-size: 13px; color: rgba(255, 255, 255, 0.6); white-space: nowrap; }

.lb-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.lb-btn:hover { background: rgba(255, 255, 255, 0.28); }
.lb-prev { left: 20px; }
.lb-next { right: 20px; }

.lb-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.lb-close:hover { background: rgba(255, 255, 255, 0.3); }

@media (max-width: 767px) {
  .lb { padding: 16px 10px; }
  .lb-img { max-height: calc(100vh - 132px); }
  .lb-btn { width: 40px; height: 40px; }
  .lb-cap { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .lb, .lb-stage { transition: none; }
  .lb-stage.slide-next, .lb-stage.slide-prev { animation: none; }
  .gallery-item:hover img { transform: none; }
}

/* ============================================================
   MOBILE HEADER CALL BUTTON
   .nav-actions (which holds the desktop phone link) is hidden
   below 1024px, so the header had no call action on the screens
   that are most likely to want one. margin-left:auto keeps the
   logo hard left and groups this with the hamburger on the right,
   because .nav-inner is space-between and a third visible child
   would otherwise spread all three evenly.
   ============================================================ */

.nav-call-mobile { display: none; }

@media (max-width: 1024px) {
  .nav-call-mobile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    margin-right: 14px;
    padding: 9px 15px;
    border-radius: var(--radius-btn);
    background: var(--brand-primary);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
  }
  .nav-call-mobile:hover,
  .nav-call-mobile:active { background: var(--brand-primary-dark); color: var(--white); }
  .nav-call-mobile svg { flex: 0 0 16px; }
}

/* Only genuinely narrow phones drop the word — at 390px (iPhone 12–15) the
   logo, a labelled button and the hamburger all fit with room to spare, and
   "CALL" is worth keeping. The aria-label carries it either way. */
@media (max-width: 350px) {
  .nav-call-mobile { padding: 9px 11px; margin-right: 10px; }
  .nav-call-mobile span { display: none; }
}

/* One image instead of three in "what happens after you enquire".
   The base rules build a 2-up mosaic with a 16/9 hero tile, which a
   lone image would inherit as a wide letterbox; this makes it a single
   4/3 frame matching the crop that ships with it. */
.quote-expect-imgs.is-single { grid-template-columns: 1fr; }
.quote-expect-imgs.is-single img:first-child { grid-column: auto; aspect-ratio: 4 / 3; }


/* ============================================================
   SERVICE AREAS — cards beside a repeat of the quote form
   The right column used to hold a map. The form earns the space
   better: by the time someone has read 10,000px of range and
   gallery, they are nowhere near the hero form.
   ============================================================ */

.locations-form .hero-form-wrap {
  position: static;
  margin: 0;
  width: 100%;
  /* .hero-form-wrap fills with --grey-lt, which is exactly the .locations
     background — on the hero that reads as a panel over a photo, here it
     vanished. White + a shadow matches the service-area cards beside it. */
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
  padding: 30px 28px 28px;
}
/* 36px wraps "BOOK YOUR FREE MEASURE & QUOTE" in this narrower column */
.locations-form .hero-form-title { font-size: 30px; }
.locations-form-alt {
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
  color: var(--text-mid);
}
.locations-form-alt a { color: var(--brand-primary); font-weight: 700; }

/* Six cards is taller than the form, so top-align the columns rather than
   letting the base `align-items: center` float the form down the page. */
.locations .locations-inner { align-items: start; }

@media (max-width: 767px) {
  .locations-form { margin-top: 26px; }
}