/* =========================================================
   Revive Bath Co — shared styles
   Designed for readability and ease of use for visitors
   ages 55-80: large text, high contrast, big tap targets.
   ========================================================= */

:root {
  /* ---------- Revive Bath Co brand palette ----------
     The four colors from the brand sheet, plus two derived values.
     Change these to reskin the whole site — everything below is
     expressed in terms of them.

     These are the exact codes from the brand sheet. Contrast
     against white is measured and noted on each.                 */
  --brand-navy: #19314B;        /* brand 1 — 13.3:1, primary: buttons, links, dark sections */
  --brand-teal: #78B0B4;        /* brand 2 —  2.4:1, DECORATIVE ONLY. Never text on white.
                                   Does work as an accent ON navy (5.5:1).                 */
  --brand-grey-dark: #4C4B4B;   /* brand 3 —  8.7:1, the "co" grey in the logo             */
  --brand-grey-light: #EEEEEE;  /* brand 4 — the light grey base background                */

  /* Derived — not on the brand sheet, needed for hover states and legibility. */
  --brand-navy-dark: #101F31;   /* 16.6:1 — hovers, footers                                */
  --brand-teal-deep: #376A6E;   /* 6.1:1 — the readable teal, safe for links and body text.
                                   Use this anywhere the brand teal would fail on white.   */

  /* ---------- Role colors (used throughout this file and
     in a few inline page styles — keep these names) ---------- */
  --navy: var(--brand-navy);    /* secondary dark surfaces */
  --navy-dark: var(--brand-navy-dark);
  --accent-blue: var(--brand-teal);
  --teal: var(--brand-teal-deep);
  --teal-dark: #2C595D;             /* 7.8:1 — link hover, deeper than --teal */
  --indigo: var(--brand-navy);      /* card accent A */
  --indigo-dark: var(--brand-navy-dark);
  --clay: var(--brand-teal-deep);   /* card accent B */
  --clay-dark: #2C595D;
  --sand: var(--brand-grey-light);
  /* Body/secondary text. Deliberately lighter than --brand-grey-dark (8.7:1):
     at full strength the brand grey is so close to the navy headings that the
     visual hierarchy flattens. This sits at 5.7:1 — comfortably AA.          */
  --grey: #5D6265;
  --grey-light: #E9EBEB;
  --silver: #D2D6D7;
  --white: #FFFFFF;
  --cream: #F8F9F9;
  --success-bg: #E6F1EA;
  --success-text: #1E5C3C;
  --error: #B3261E;

  --font-heading: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Nunito Sans', 'Segoe UI', Arial, sans-serif;

  --max-width: 1180px;
  --radius: 12px;
  --shadow-sm: 0 2px 10px rgba(25, 49, 75, 0.08);
  --shadow: 0 4px 18px rgba(25, 49, 75, 0.10);
  --shadow-lg: 0 10px 30px rgba(25, 49, 75, 0.16);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--navy-dark);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--teal-dark); }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--navy-dark);
  line-height: 1.25;
  margin: 0 0 0.6em 0;
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1em 0; }

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

.section {
  padding: 64px 0;
}

.section--alt {
  background: var(--cream);
}

.section--sand {
  background: var(--sand);
  position: relative;
  overflow: hidden;
}
.section--sand::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='120' viewBox='0 0 400 120'%3E%3Cpath d='M0 90 L60 40 L110 75 L170 15 L230 70 L290 30 L340 65 L400 20' fill='none' stroke='%2378B0B4' stroke-width='2' stroke-opacity='0.16'/%3E%3Cpath d='M0 105 L60 60 L110 95 L170 45 L230 90 L290 55 L340 85 L400 50' fill='none' stroke='%2319314B' stroke-width='2' stroke-opacity='0.12'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 400px 120px;
  background-position: bottom;
}
.section--sand > .container { position: relative; z-index: 1; }

.section--navy {
  background: var(--navy-dark);
  color: var(--white);
}
.section--navy h2, .section--navy h3 { color: var(--white); }

.eyebrow {
  display: inline-block;
  color: var(--teal-dark);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.95rem;
  margin-bottom: 0.75em;
}

.section-intro {
  max-width: 720px;
  margin: 0 auto 40px auto;
  text-align: center;
}
.section-intro p { color: var(--grey); font-size: 1.15rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  padding: 16px 30px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  min-height: 56px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  line-height: 1.1;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color 0.15s ease; }
  .btn:hover, .btn:active { transform: none; }
}

.btn-primary {
  background: var(--teal);
  color: var(--white);
  box-shadow: var(--shadow);
}
.btn-primary:hover { background: var(--teal-dark); }

.btn-secondary {
  background: var(--white);
  color: var(--navy-dark);
  border-color: var(--navy-dark);
}
.btn-secondary:hover { background: var(--grey-light); }

.btn-call {
  background: var(--navy);
  color: var(--white);
}
.btn-call:hover { background: var(--navy-dark); }

.btn-block { width: 100%; }

.btn-lg {
  font-size: 1.3rem;
  padding: 20px 36px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--white);
  border-bottom: 1px solid var(--silver);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 24px;
  /* Wider than --max-width (1180px) on purpose: the logo lockup, the tagline,
     six nav links, the phone number and the CTA do not fit in 1180px, and the
     browser resolves that by crushing the logo and wrapping the tagline into a
     narrow column. The header alone gets the extra room. */
  max-width: 1320px;
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--navy-dark);
}

.brand-logo {
  height: 68px;
  width: auto;
  flex-shrink: 0;
  display: block;
  /* Beats the global `img { max-width: 100% }`, which otherwise defeats
     flex-shrink: 0 and lets the logo be squeezed when the header is tight. */
  max-width: none;
}

/* Hidden in the header at every width. The row needs roughly 1468px for the
   logo (272) + tagline (190) + nav (612) + phone and CTA (342) + gaps, but the
   container caps at 1320px — about 196px short. Something has to give, and the
   tagline is the right thing to drop: the logo already carries the brand name,
   and the tagline still appears in the footer via .footer-tagline.

   Kept in the markup rather than deleted from 39 pages, so restoring it is a
   one-line change if the nav ever gets shorter. */
.brand-tagline {
  display: none;
  font-size: 0.85rem;
  color: var(--teal-dark);
  font-weight: 700;
  line-height: 1.15;
  max-width: 190px;
  flex-shrink: 0;
}

.owner-avatar {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin: 0 auto 24px auto;
  background: linear-gradient(135deg, var(--accent-blue), var(--teal));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.6rem;
}
/* Initials sit underneath the photo. If the photo is missing or fails to load
   the inline onerror strips the <img>, and these show through instead of a
   broken-image icon. Set them with data-initials on .owner-avatar. */
.owner-avatar::after {
  content: attr(data-initials);
}
.owner-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  /* Portrait photos centre-crop to the chest, cutting the head off. Biasing
     upward keeps the face in the circle. Tune this one value if the crop sits
     wrong: lower % = higher in frame. */
  object-position: center 22%;
}

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

.main-nav a {
  color: var(--navy-dark);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 12px 16px;
  border-radius: 8px;
}
.main-nav a:hover { background: var(--grey-light); }
.main-nav a.active { color: var(--teal-dark); background: var(--grey-light); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.phone-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--navy-dark);
  text-decoration: none;
  white-space: nowrap;
}
.phone-link svg { flex-shrink: 0; }

.nav-toggle {
  display: none;
  background: var(--grey-light);
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  display: block;
  width: 24px;
  height: 3px;
  background: var(--navy-dark);
  margin: 5px 0;
  border-radius: 2px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    linear-gradient(125deg, rgba(25, 49, 75, 0.90) 0%, rgba(55, 106, 110, 0.86) 100%),
    /* NOTE: this is a 1000x1333 portrait photo used as a wide banner, so it crops
       hard and upscales on desktop. The dark gradient above it hides most of that,
       but a wide landscape shot of a finished bathroom (1800px+ across) would look
       considerably better — swap the filename below when one exists. */
    url('../images/photo-walk-in-shower-grab-bars.jpg') center 45% / cover no-repeat;
  padding: 72px 0 84px 0;
  color: var(--white);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.hero .eyebrow {
  color: #A6CFD2;
}
.hero h1 {
  color: var(--white);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
}
.hero-copy p.lead {
  font-size: 1.25rem;
  color: #DDE4E8;
  max-width: 560px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}
.hero-actions .btn { box-shadow: 0 10px 28px rgba(6, 20, 34, 0.35); }
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--white);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 10px 16px;
  border-radius: 999px;
}
.trust-item svg { flex-shrink: 0; color: #8FC0C4; }
.trust-item--clay {
  background: rgba(120, 176, 180, 0.30);
  border-color: rgba(160, 205, 208, 0.55);
}
.trust-item--clay svg { color: #A6CFD2; }

.hero-card {
  background: var(--white);
  color: var(--navy-dark);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(8, 24, 38, 0.38);
  padding: 34px;
  border-top: 6px solid var(--teal);
}
.hero-card h3 { margin-bottom: 0.3em; color: var(--navy); }
.hero-card ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.hero-card li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
  font-size: 1.05rem;
}
.hero-card li svg { flex-shrink: 0; margin-top: 3px; color: var(--teal); }

/* ---------- Stat ribbon (regional trust badges) ---------- */
.stat-ribbon {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.stat-chip {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--silver);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.stat-chip-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}
.stat-chip:nth-child(odd) .stat-chip-icon { background: var(--indigo); }
.stat-chip:nth-child(even) .stat-chip-icon { background: var(--clay); }
.stat-chip strong { display: block; color: var(--navy-dark); font-family: var(--font-heading); }
.stat-chip span { color: var(--grey); font-size: 0.98rem; }
@media (max-width: 560px) {
  .stat-ribbon { grid-template-columns: 1fr; }
}

/* ---------- Cards / grids ---------- */
.grid {
  display: grid;
  gap: 28px;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--silver);
  border-top: 4px solid var(--indigo);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:nth-of-type(even) { border-top-color: var(--clay); }
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(25, 49, 75, 0.18);
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: box-shadow 0.2s ease; }
  .card:hover { transform: none; }
}
.card-icon {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: rgba(25, 49, 75, 0.10);
  color: var(--indigo);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.card:nth-of-type(even) .card-icon {
  background: rgba(120, 176, 180, 0.22);
  color: var(--clay-dark);
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.service-card .btn { align-self: flex-start; margin-top: 10px; }

/* ---------- Feature photos (safety/accessibility imagery) ---------- */
.feature-photo {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.feature-photo-lg { height: 420px; }
.photo-caption {
  color: var(--grey);
  font-size: 0.92rem;
  margin: -10px 0 20px 0;
}

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  counter-reset: step;
}
.step {
  text-align: center;
  padding: 10px;
}
.step-number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
}

/* ---------- Testimonials ---------- */
.testimonial {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  border-left: 6px solid var(--accent-blue);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.testimonial:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(25, 49, 75, 0.16);
}
@media (prefers-reduced-motion: reduce) {
  .testimonial { transition: box-shadow 0.2s ease; }
  .testimonial:hover { transform: none; }
}
.testimonial p.quote {
  font-size: 1.15rem;
  font-style: italic;
  color: var(--navy-dark);
}
/* Review stars stay gold — it's a near-universal convention and reads as a
   rating instantly. Darkened from #B5761F to clear 4.5:1 on white. */
.stars { color: #8C5A12; letter-spacing: 2px; margin-bottom: 10px; font-size: 1.1rem; }
.testimonial-author { font-weight: 800; color: var(--teal-dark); }

/* ---------- CTA banner ---------- */
.cta-banner {
  background:
    radial-gradient(120% 160% at 15% 0%, rgba(120, 176, 180, 0.38) 0%, rgba(120, 176, 180, 0) 55%),
    radial-gradient(90% 140% at 100% 100%, rgba(25, 49, 75, 0.32) 0%, rgba(25, 49, 75, 0) 55%),
    linear-gradient(120deg, var(--indigo-dark) 0%, var(--teal-dark) 100%);
  color: var(--white);
  border-radius: var(--radius);
  padding: 48px;
  text-align: center;
  box-shadow: 0 22px 50px rgba(16, 31, 49, 0.28);
}
.cta-banner h2 { color: var(--white); }
.cta-banner p { color: #DDE4E8; font-size: 1.15rem; }
.cta-banner .hero-actions { justify-content: center; }

/* ---------- Forms ---------- */
.form-card {
  background: var(--white);
  border: 1px solid var(--silver);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.form-group {
  margin-bottom: 22px;
}
.form-group label {
  display: block;
  font-weight: 800;
  color: var(--navy-dark);
  margin-bottom: 8px;
  font-size: 1.05rem;
}
.form-group .hint {
  display: block;
  font-weight: 400;
  color: var(--grey);
  font-size: 0.92rem;
  margin-top: 4px;
}
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
select,
textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.1rem;
  padding: 14px 16px;
  border: 2px solid var(--silver);
  border-radius: 10px;
  background: var(--white);
  color: var(--navy-dark);
}
/* Focus rings use --teal (6.1:1 on white), not the brand teal (2.4:1). WCAG
   wants 3:1 minimum for focus indicators, and a faint ring is exactly the
   thing an older visitor tabbing through the form cannot find. */
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}
textarea { resize: vertical; min-height: 120px; }

fieldset {
  border: 2px solid var(--silver);
  border-radius: 10px;
  padding: 18px 20px;
  margin: 0 0 22px 0;
}
fieldset legend {
  font-weight: 800;
  color: var(--navy-dark);
  font-size: 1.05rem;
  padding: 0 8px;
}
.radio-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 1.08rem;
}
.radio-option input {
  width: 24px;
  height: 24px;
  accent-color: var(--teal);
}

.form-note {
  background: var(--grey-light);
  border-radius: 10px;
  padding: 16px 20px;
  font-size: 0.98rem;
  color: var(--grey);
  margin-top: 18px;
}

/* ---------- Divider / or ---------- */
.or-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 36px 0;
  color: var(--grey);
  font-weight: 700;
}
.or-divider::before,
.or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--silver);
}

/* ---------- Info blocks (Location page) ---------- */
.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.info-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--silver);
  font-size: 1.08rem;
}
.info-list li:last-child { border-bottom: none; }
.info-list svg { color: var(--teal); flex-shrink: 0; margin-top: 3px; }

.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.08rem;
}
.hours-table td {
  padding: 12px 4px;
  border-bottom: 1px solid var(--silver);
}
.hours-table td:last-child { text-align: right; font-weight: 700; color: var(--navy); }

.map-frame {
  border: none;
  width: 100%;
  height: 100%;
  min-height: 340px;
  border-radius: var(--radius);
}

.area-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.area-tag {
  background: var(--grey-light);
  color: var(--navy);
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.98rem;
  text-decoration: none;
}
a.area-tag {
  border: 2px solid var(--teal);
}
a.area-tag:hover {
  background: var(--teal);
  color: var(--white);
}

/* ---------- FAQ ---------- */
.faq-item {
  background: var(--white);
  border: 1px solid var(--silver);
  border-radius: var(--radius);
  padding: 6px 24px;
  margin-bottom: 16px;
}
.faq-item summary {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  padding: 18px 0;
  cursor: pointer;
  color: var(--navy-dark);
  list-style: none;
  position: relative;
  padding-right: 30px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 16px;
  font-size: 1.6rem;
  color: var(--teal);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { padding-bottom: 18px; color: var(--grey); }

.field-error {
  border-color: var(--error) !important;
  background: #FCEEEE;
}
.form-error-banner {
  display: none;
  background: #FCEEEE;
  color: var(--error);
  border: 2px solid var(--error);
  border-radius: 10px;
  padding: 16px 20px;
  font-weight: 700;
  margin-bottom: 24px;
}

/* ---------- Success message ---------- */
.success-box {
  background: var(--success-bg);
  color: var(--success-text);
  border-radius: var(--radius);
  padding: 40px;
  text-align: center;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-dark);
  color: #CFD6DA;
  padding: 56px 0 28px 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 36px;
}
.site-footer h4 { color: var(--white); font-size: 1.1rem; }
.site-footer a {
  color: #CFD6DA;
  text-decoration: none;
  display: block;
  margin-bottom: 12px;
  font-size: 1.02rem;
}
.site-footer a:hover { color: var(--white); }
.footer-brand p { color: #A8B4BD; max-width: 340px; }
.footer-bottom {
  border-top: 1px solid #2A4460;
  margin-top: 40px;
  padding-top: 22px;
  text-align: center;
  color: #8E9BA4;
  font-size: 0.92rem;
}

/* ---------- Chat widget (Nova) ---------- */
.cb-chat-widget {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 800;
}

.cb-launcher {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 2px solid var(--teal);
  border-radius: 999px;
  padding: 10px 22px 10px 10px;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--navy-dark);
}
.cb-launcher svg, .cb-launcher img { width: 44px; height: 44px; flex-shrink: 0; }
.cb-avatar-img { border-radius: 50%; object-fit: cover; border: 2px solid var(--teal); display: block; }
.cb-launcher:hover { background: var(--grey-light); }

.cb-window {
  display: none;
  flex-direction: column;
  position: absolute;
  right: 0;
  bottom: 76px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: 70vh;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid var(--silver);
}

.cb-chat-widget.cb-open .cb-window { display: flex; }
.cb-chat-widget.cb-open .cb-launcher-label { display: none; }

.cb-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--navy-dark);
  color: var(--white);
  padding: 14px 16px;
  flex-shrink: 0;
}
.cb-header-avatar svg, .cb-header-avatar img { width: 42px; height: 42px; display: block; }
.cb-header-text { display: flex; flex-direction: column; line-height: 1.2; margin-right: auto; }
.cb-header-text strong { font-family: var(--font-heading); font-size: 1.05rem; }
.cb-header-text span { font-size: 0.85rem; color: #C2CFD3; }

.cb-close {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}
.cb-close:hover { background: rgba(255,255,255,0.15); }

.cb-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cb-msg { display: flex; gap: 10px; align-items: flex-start; }
.cb-msg-bot { justify-content: flex-start; }
.cb-msg-user { justify-content: flex-end; }
.cb-msg-avatar svg, .cb-msg-avatar img { width: 30px; height: 30px; flex-shrink: 0; }
.cb-msg-bubble {
  background: var(--white);
  border: 1px solid var(--silver);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 1rem;
  line-height: 1.5;
  max-width: 240px;
}
.cb-msg-user .cb-msg-bubble {
  background: var(--teal);
  color: var(--white);
  border-color: var(--teal);
}

.cb-controls {
  border-top: 1px solid var(--silver);
  padding: 14px;
  flex-shrink: 0;
  background: var(--white);
}

.cb-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cb-quick-reply {
  background: var(--grey-light);
  border: 2px solid var(--silver);
  color: var(--navy-dark);
  font-weight: 700;
  font-size: 0.98rem;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
}
.cb-quick-reply:hover { background: var(--silver); }
.cb-quick-reply-primary {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}
.cb-quick-reply-primary:hover { background: var(--teal-dark); }

.cb-input-row {
  display: flex;
  gap: 8px;
}
.cb-text-input {
  flex: 1;
  font-size: 1rem;
  padding: 10px 14px;
  border: 2px solid var(--silver);
  border-radius: 10px;
}
.cb-text-input:focus {
  outline: 3px solid var(--teal);
  border-color: var(--teal);
}
.cb-send {
  background: var(--teal);
  color: var(--white);
  border: none;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
}
.cb-send:hover { background: var(--teal-dark); }
.cb-skip {
  background: none;
  border: 2px solid var(--silver);
  color: var(--grey);
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
}

@media (max-width: 760px) {
  .cb-chat-widget { right: 12px; bottom: 76px; }
  .cb-launcher-label { display: none; }
  .cb-launcher { padding: 10px; }
  .cb-window {
    right: -4px;
    bottom: 68px;
    width: calc(100vw - 24px);
    height: 72vh;
  }
}

/* ---------- Blog ---------- */
.post-date {
  display: inline-block;
  color: var(--teal-dark);
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.article-body {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.1rem;
}
.article-body h2 {
  margin-top: 1.6em;
}
.article-body h3 {
  margin-top: 1.3em;
}
.article-body ul,
.article-body ol {
  padding-left: 1.4em;
  margin-bottom: 1.2em;
}
.article-body li {
  margin-bottom: 0.5em;
}
.article-hero {
  max-width: 760px;
  margin: 0 auto 8px auto;
  text-align: left;
}
.article-cta {
  max-width: 760px;
  margin: 48px auto 0 auto;
}

/* ---------- Sticky mobile call bar ---------- */
.mobile-bar {
  display: none;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--teal);
  color: var(--white);
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
}

/* Breakpoint is 1280px, not 1200px: below this the full logo lockup, tagline,
   six nav links, phone number and CTA overflow the header row. The mobile
   header (hamburger, no tagline, no phone label) is used instead. */
@media (max-width: 1280px) {
  body { font-size: 17px; }
  .main-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--silver);
    box-shadow: var(--shadow-lg);
    padding: 10px 16px 20px 16px;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 16px; font-size: 1.15rem; border-bottom: 1px solid var(--grey-light); }
  .nav-toggle { display: block; }
  .header-actions .phone-link span.phone-label { display: none; }
  .header-actions .header-cta { display: none; }
  .header-actions { gap: 8px; }
  /* .brand-tagline is hidden at all widths now — see the base rule above. */
  .brand-logo { height: 52px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-banner { padding: 32px 22px; }
  .mobile-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 600;
    box-shadow: 0 -4px 14px rgba(0,0,0,0.12);
  }
  .mobile-bar a {
    flex: 1;
    text-align: center;
    padding: 16px 6px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.98rem;
    text-decoration: none;
  }
  /* "Book" uses the brand teal at full strength with navy text (5.5:1) rather
     than white (2.4:1) — it passes contrast AND makes the primary action the
     one spot of brand color on the bar. */
  .mobile-bar .call { background: var(--navy); color: var(--white); }
  .mobile-bar .text { background: var(--teal-dark); color: var(--white); }
  .mobile-bar .book { background: var(--brand-teal); color: var(--brand-navy); }
  body { padding-bottom: 64px; }
}

/* Finish swatches */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.swatch-card {
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  border: none;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
}
.swatch-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--grey-light);
}
.swatch-card .swatch-label {
  padding: 14px 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--navy-dark);
  font-size: 1.05rem;
}
@media (prefers-reduced-motion: no-preference) {
  .swatch-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
  .swatch-card:hover, .swatch-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
}
.swatch-card:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

.swatch-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 30, 0.88);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.swatch-lightbox.open { display: flex; }
.swatch-lightbox-inner {
  background: var(--white);
  border-radius: 16px;
  max-width: min(92vw, 1100px);
  max-height: 92vh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.swatch-lightbox-inner img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, 1100px);
  max-height: 80vh;
  object-fit: contain;
  background: var(--grey-light);
}
.swatch-lightbox-caption {
  padding: 18px 22px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--navy-dark);
}
.swatch-lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.95);
  color: var(--navy-dark);
  font-size: 1.4rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swatch-lightbox-close:hover { background: var(--white); }

/* Before/after photo toggle */
.before-after { position: relative; }
.before-after-img { display: block; }
.before-after-toggle {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.before-after-btn {
  flex: 1;
  min-height: 56px;
  border-radius: 10px;
  border: 2px solid var(--navy-dark);
  background: var(--white);
  color: var(--navy-dark);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
}
.before-after-btn.active {
  background: var(--navy-dark);
  color: var(--white);
}
.before-after-btn:hover { opacity: 0.9; }

.photo-expand-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
  text-align: left;
  margin-bottom: 20px;
}
.photo-expand-btn .feature-photo,
.photo-expand-btn .feature-photo-lg { margin-bottom: 0; }
.photo-expand-btn::after {
  content: "🔍 Click to see full photo";
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: rgba(10, 20, 30, 0.75);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  pointer-events: none;
}
.photo-expand-btn:hover::after,
.photo-expand-btn:focus-visible::after { background: rgba(10, 20, 30, 0.9); }
.photo-expand-btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* Brand tagline in the footer brand block, under the wordmark. */
.footer-tagline {
  color: var(--brand-aqua);
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0 0 10px;
  letter-spacing: 0.3px;
}