/* ============================================================
   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:      #64BEA4;   /* main CTA / accent colour */
  --brand-primary-dark: #4A9B84;   /* hover state of primary */
  --brand-accent:       #272D31;   /* secondary highlight colour */
  /* Gradients retired 2026-08-17 (agency owner direction) — dark sections use
     the solid brand accent instead. */
  --star-gold:          #FBBC04;   /* Google-review gold */

  /* Neutrals — usually fine to leave as-is */
  --neutral-dark:  #262d3a;        /* dark nav bar, outline buttons, dark sections */
  --neutral-mid:   #2e3746;
  --neutral-darker:#1a2030;        /* hover state of dark buttons */
  --grey-lt:       #f6f6f6;
  --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: 'Montserrat', sans-serif;
  --font-body:    'Red Hat Display', 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;
  flex-shrink: 0;
}

.nav-logo img { height: 44px; width: auto; }

.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-stone-bg.jpg') 50% 75%/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;
}

/* Grid items must be able to shrink below their content width —
   a long <select> option otherwise widens the 1fr track past the viewport */
.hero-inner > * { min-width: 0; }

.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;
  color: var(--brand-primary-dark);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 24px;
  line-height: 1.2;
}

/* Short brand keyline under the form title — same motif as the trust panel */
.hero-form-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--brand-primary);
  margin: 12px auto 0;
  border-radius: 2px;
}

/* 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;
}

/* Columns must shrink below content width — long <select> options
   otherwise push the row past the form edge */
.form-row > .form-group { min-width: 0; }

.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);
}

.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(--brand-primary-dark);
  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(--brand-accent);
  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(--brand-accent);
  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);
}

/* The offer T&Cs live here (anchor #terms, linked from the form and the
   offer section) — footer fine print, but it must stay readable */
.footer-terms {
  max-width: 880px;
  margin: 0 auto 14px;
  padding: 0 24px;
  font-size: 11px;
  line-height: 1.7;
  text-align: center;
  color: rgba(255,255,255,0.45);
}

/* ---------- 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 calc(33.333% - 24px);
  display: block;
  margin: 0 12px;
  padding: 28px;
  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;
}

/* Width cap keeps the taller 4:5 cards from towering over the text column —
   the portrait crop comes from .sr-card-img's aspect-ratio, the overall card
   size from this. */
.sr-carousel-wrap {
  overflow: hidden;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
}

.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 {
  /* The headshots are 2:3 portraits. A 4:5 box shows 83% of the frame
     (top-anchored, so only legs are cropped) — a 4:3 box was showing
     half and cutting the dentists off at the chest. */
  aspect-ratio: 4/5;
  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 ---------- */
/* The standalone .press band was folded into the offer section's right
   column (.tp-accred) — the press-* classes below are still its skin. */
.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 ---------- */
/* Real clinic photography behind a heavy brand-accent wash: the section keeps
   its dark, readable ground but stops being a flat colour block. The image is
   the client's own (Dr Rachel with a patient), NOT stock. */
.testimonial-product {
  position: relative;
  background: var(--brand-accent) url('../images/service-1.jpg') center 30%/cover no-repeat;
  padding: 0;
}
.testimonial-product::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(39, 45, 49, 0.88);
}
.testimonial-product .tp-inner { position: relative; }

/* True parallax (fixed background) only where it behaves: desktop pointers.
   iOS Safari repaints fixed backgrounds so badly it ships broken, and a
   reduced-motion visitor asked for none. */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  .testimonial-product { background-attachment: fixed; }
}

.tp-inner {
  display: grid;
  /* Copy gets the wider column; the trust panel doesn't need half. */
  grid-template-columns: 1.15fr 0.85fr;
  min-height: 600px;
  /* Full-bleed background, contained content — unconstrained, an ultrawide
     screen turned this row into two small islands in a sea of colour.
     Column separation comes from the grid gap alone: horizontal padding
     inside the columns on top of it is what squished the copy. */
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
  align-items: center;
  gap: 72px;
}

.tp-content {
  padding: 72px 0;
  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;
}

/* Right column: the Accredited & Trusted content, folded in from its old
   standalone band. Reuses the press-* classes so the white-logo filters
   keep working on this dark background. A tinted panel gives the column
   its own shape instead of floating loose on the section colour. */
.tp-accred {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 64px 48px;
  margin: 72px 0;
  background: rgba(100, 190, 164, 0.08);
  border: 1px solid rgba(100, 190, 164, 0.25);
  border-radius: var(--radius-card);
}

.tp-accred .press-heading { font-size: 28px; }

/* Short brand keyline above the heading */
.tp-accred .press-heading::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--brand-primary);
  margin: 0 auto 18px;
  border-radius: 2px;
}

.tp-accred .press-sub { margin: 0 0 40px; }

/* Logos live in two labelled groups mirroring the client's own site:
   industry associations, then payment plans. */
.accred-group { margin-bottom: 34px; }
.accred-group:last-child { margin-bottom: 0; }

.accred-group-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 18px;
}

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

/* The Afterpay wordmark is a wide lockup — matched by cap height, not box
   height, or it dwarfs the Zip mark beside it. */
.press-logo img.logo-afterpay { height: 26px; }

/* ---------- 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 calc(50% - 24px); }

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

  .tp-inner { grid-template-columns: 1fr; gap: 0; }
  .tp-accred { margin: 0 0 64px; padding: 40px 24px; }

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

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

/* --- Mobile (≤767px) --- */
@media (max-width: 767px) {
  /* Announcement bar off on phones — it double-stacked over a header that
     already carries the CTA, and every vertical pixel is hero space */
  .nav-top-bar { display: none; }

  /* Header must fit logo + CTA + hamburger side by side — full-size pieces
     overlapped the logo at phone widths. */
  .nav-inner { height: 64px; padding: 0 16px; gap: 10px; }
  .nav-logo img { height: 30px; }
  .nav-actions { gap: 0; }
  .btn-nav-dark { font-size: 12px; padding: 8px 12px; letter-spacing: 0.03em; }

  /* Rating line stays on ONE line at phone width */
  .hero-stars { font-size: 13px; gap: 6px; white-space: nowrap; }
  .hero-stars .stars { font-size: 13px; letter-spacing: 0.02em; }

  /* Paired CTAs (claim + call) render at one width when stacked */
  .cta-pair a { width: 100%; justify-content: center; }
  .sr-ctas a { width: 100%; justify-content: center; text-align: center; }

  .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 calc(100% - 24px); }
  .rev-carousel { gap: 8px; }

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

  .press-heading { font-size: 28px; }
  .press-logos { gap: 20px; }

  .tp-inner { padding: 0 20px; }
  .testimonial-product .tp-content { padding: 48px 4px; }
  .tp-content h2 { font-size: 28px; }
  .tp-accred { margin: 0 0 56px; padding: 36px 20px; }

  .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); }

/* ---------- Lead-form contract states ----------
   Class names here are a CONTRACT with modules/lead-form.js: .qf-trap,
   .qf-fields, .field, .form-msg and the button's .btn-label / .btn-spinner.
   Restyle freely, but do not rename them or the shared submission logic
   stops finding things. */

/* Honeypot. Off-canvas rather than display:none, because some bots skip
   fields they can tell are hidden. Never focusable, never announced. */
.qf-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field.is-error input,
.field.is-error select,
.field.is-error textarea { border-color: #d64545; }

/* Locked while sending, so a slow connection cannot produce two submissions. */
.qf-fields.is-sending {
  opacity: .6;
  pointer-events: none;
}

/* The submit button doubles as the loader: the label swaps for a spinner so
   the button never changes size and nothing below it shifts. */
.form-submit-btn {
  position: relative;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: qf-spin .6s linear infinite;
}
.is-sending .btn-label { display: none; }
.is-sending .btn-spinner { display: block; }
@keyframes qf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation-duration: 1.6s; }
}

/* Status line: errors and the in-page thank-you message.
   role=status aria-live=polite is set in the markup. */
.form-msg {
  display: none;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}
.form-msg.is-ok  { display: block; background: #e7f6ec; color: #1e7a41; }
.form-msg.is-err { display: block; background: #fcf3f3; color: #b23b3b; }

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

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

/* ---------- GREVILLE RD CLIENT OVERRIDES ---------- */

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

/* Google G badge (white circle) + inline G icon */
.g-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.g-badge svg { width: 20px; height: 20px; }
.g-inline { width: 18px; height: 18px; vertical-align: -3px; }

/* Hero testimonial snippet */
.hero-quote {
  margin: 20px 0 0;
  padding-left: 16px;
  border-left: 3px solid var(--star-gold);
  color: var(--white);
  font-size: 17px;
  font-style: italic;
  line-height: 1.6;
  max-width: 520px;
}
.hero-quote cite {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 14px;
  opacity: 0.85;
}

/* Review cards: stars left, G icon right */
.review-card-stars {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Read-all-reviews button with G icon */
/* The reviews CTA sits on the dark reviews section — a solid white button
   with the full-colour Google G reads as the section's one bright action,
   where the old ghost outline disappeared into the background. */
.btn-google {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border-color: var(--white);
  color: var(--neutral-dark);
  font-weight: 700;
  padding: 16px 34px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.btn-google:hover {
  background: var(--grey-lt);
  color: var(--neutral-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
.btn-google .g-inline { width: 20px; height: 20px; }

/* Meet Your Dentists: heading aligns with the card top, CTAs follow the copy */
.sr-inner { align-items: start; }

/* About-the-clinic points (copy from the client's own About section) — these
   fill the column so it holds its own against the tall dentist card */
.sr-clinic-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0 0;
}
.sr-clinic-points li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-mid);
}
.sr-clinic-points li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* The clinic's own referral line, set as a pull-quote */
.sr-refer {
  margin: 24px 0 0;
  padding: 16px 20px;
  border-left: 3px solid var(--brand-primary);
  background: var(--grey-lt);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  font-size: 15.5px;
  font-style: italic;
  line-height: 1.6;
  color: var(--text-dark);
}

/* Call buttons: centred label with phone icon */
.btn-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-call svg { flex: 0 0 auto; }

/* Headshots are portraits — anchor the crop to the face */
.sr-card-img img { object-position: top center; }

/* Accreditation logos rendered white on the dark band.
   Parent opacity must stay 1 — it breaks the screen blend on the jpg. */
.press-logo { opacity: 1; }
.press-logo img {
  height: 44px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}
.press-logo:hover img { opacity: 1; }
.press-logo img.logo-jpg {
  filter: grayscale(1) invert(1) brightness(1.9);
  mix-blend-mode: screen;
  opacity: 1;
}