/*!
 * SPS Roofing - Area Landing Pages (hardcoded)
 * ---------------------------------------------------------------------------
 * CONFLICT POLICY - read before editing.
 *
 * The theme ships an unlayered global reset in assets/css/style.css:
 *     * { margin:0; padding:0; box-sizing:border-box; line-height:inherit;
 *         font-family: var(--articulatCF); }
 *     img, svg, video { width:auto; height:auto; max-width:100%;
 *                       max-height:100%; object-fit:contain; }
 *     a { color:inherit } / h2 { color:var(--vulcan) } / ul,ol { list-style:none }
 * Bootstrap 5 is also loaded globally (.container, .btn, .row, .col...).
 *
 * Three rules keep this file collision-proof in both directions:
 *  1. Every class is prefixed `spsr-lp-`. Nothing here can be selected by, or
 *     select, a theme or Bootstrap class.
 *  2. Every rule is scoped under the `.spsr-lp` root, so the lowest selector
 *     here is (0,2,0) - it beats the theme's `*` (0,0,0) and its bare element
 *     rules (0,0,1) regardless of stylesheet order. header.php prints the
 *     theme's own <link> tags AFTER wp_head(), i.e. after this file, so
 *     specificity - not source order - is what has to win.
 *  3. Custom properties live on `.spsr-lp`, never on :root, and are prefixed
 *     `--spsr-`. The theme's :root already defines --primary/--secondary;
 *     this file must not touch them.
 *
 * Because the theme's `*` rule sets font-family on every element directly,
 * inheritance from `.spsr-lp` is not enough - `.spsr-lp *` restates it. Same
 * reason every image restates width/height/object-fit/max-height explicitly.
 *
 * No @font-face and no @import: header.php already loads Raleway and
 * El Messiri from Google Fonts, with preconnect.
 */

/* ==========================================================================
   ROOT / TOKENS
   ========================================================================== */
.spsr-lp {
  --spsr-primary: #EA8433;
  --spsr-primary-dark: #d47428;
  --spsr-secondary: #111622;
  --spsr-bg: #f6f3f3;
  --spsr-white: #fff;
  --spsr-text: #3a3a3a;
  --spsr-text-light: #7d7d7d;
  --spsr-font-body: "Raleway", sans-serif;
  --spsr-font-head: "El Messiri", sans-serif;

  display: block;
  background: var(--spsr-bg);
  color: var(--spsr-text);
  font-family: var(--spsr-font-body);
  font-size: 16px;
  line-height: 1.65;
}

/* Defeats the theme's `* { font-family: var(--articulatCF) }` (0,0,0). */
.spsr-lp * {
  font-family: var(--spsr-font-body);
  box-sizing: border-box;
}

.spsr-lp h1,
.spsr-lp h2,
.spsr-lp h3,
.spsr-lp h4,
.spsr-lp p,
.spsr-lp ul,
.spsr-lp ol,
.spsr-lp li,
.spsr-lp blockquote,
.spsr-lp figure {
  margin: 0;
  padding: 0;
}

.spsr-lp ul,
.spsr-lp ol {
  list-style: none;
}

.spsr-lp a {
  text-decoration: none;
}

.spsr-lp-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================================================
   BUTTONS  (never `.btn` - that name belongs to Bootstrap)
   ========================================================================== */
.spsr-lp .spsr-lp-btn {
  display: inline-block;
  background: var(--spsr-primary);
  color: var(--spsr-white);
  font-family: var(--spsr-font-body);
  font-weight: 700;
  font-size: 14px;
  padding: 13px 30px;
  border-radius: 0;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 2px solid var(--spsr-primary);
  line-height: 1.4;
}
.spsr-lp .spsr-lp-btn:hover,
.spsr-lp .spsr-lp-btn:focus-visible {
  background: var(--spsr-primary-dark);
  border-color: var(--spsr-primary-dark);
  color: var(--spsr-white);
}
.spsr-lp .spsr-lp-btn-outline {
  background: transparent;
  border-color: var(--spsr-white);
  color: var(--spsr-white);
}
.spsr-lp .spsr-lp-btn-outline:hover,
.spsr-lp .spsr-lp-btn-outline:focus-visible {
  background: var(--spsr-white);
  border-color: var(--spsr-white);
  color: var(--spsr-secondary);
}
.spsr-lp .spsr-lp-btn-white {
  background: var(--spsr-white);
  border-color: var(--spsr-white);
  color: var(--spsr-primary);
}
.spsr-lp .spsr-lp-btn-white:hover,
.spsr-lp .spsr-lp-btn-white:focus-visible {
  background: var(--spsr-secondary);
  border-color: var(--spsr-secondary);
  color: var(--spsr-white);
}
.spsr-lp a:focus-visible,
.spsr-lp summary:focus-visible {
  outline: 3px solid var(--spsr-primary);
  outline-offset: 3px;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.spsr-lp .spsr-lp-hero {
  background: var(--spsr-secondary);
  color: var(--spsr-white);
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
}
/* A real <img> rather than a CSS ::before background: the preload scanner can
   discover it, which removes the LCP "resource load delay" that a
   background-image always pays. Visually identical (cover + 0.2 opacity). */
.spsr-lp .spsr-lp-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  opacity: 0.2;
  z-index: 0;
  pointer-events: none;
}
.spsr-lp .spsr-lp-hero > .spsr-lp-container {
  position: relative;
  z-index: 1;
  padding-top: 80px;
  padding-bottom: 80px;
}
.spsr-lp .spsr-lp-hero-badge {
  display: inline-block;
  background: var(--spsr-primary);
  color: var(--spsr-white);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 16px;
  margin-bottom: 22px;
}
.spsr-lp .spsr-lp-hero h1 {
  font-family: var(--spsr-font-head);
  font-size: clamp(32px, 5.5vw, 62px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 22px;
  max-width: 740px;
  letter-spacing: -0.02em;
  color: var(--spsr-white);
}
.spsr-lp .spsr-lp-hero h1 em {
  font-style: normal;
  color: var(--spsr-primary);
}
.spsr-lp .spsr-lp-hero-sub {
  font-size: clamp(15px, 2vw, 17px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  max-width: 560px;
  margin-bottom: 36px;
  line-height: 1.7;
}
.spsr-lp .spsr-lp-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.spsr-lp .spsr-lp-trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 52px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 28px;
}
.spsr-lp .spsr-lp-trust-pill {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 24px 10px 0;
  margin-right: 24px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.02em;
}
.spsr-lp .spsr-lp-trust-pill:last-child {
  border-right: none;
  margin-right: 0;
}
.spsr-lp .spsr-lp-dot {
  width: 7px;
  height: 7px;
  background: var(--spsr-primary);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ==========================================================================
   SECTION HEAD
   ========================================================================== */
.spsr-lp .spsr-lp-head {
  text-align: center;
  margin-bottom: 56px;
}
.spsr-lp .spsr-lp-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--spsr-primary);
  margin-bottom: 14px;
  display: block;
}
.spsr-lp .spsr-lp-head h2 {
  font-family: var(--spsr-font-head);
  font-size: clamp(26px, 3.5vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--spsr-secondary);
  letter-spacing: -0.02em;
}
.spsr-lp .spsr-lp-head h2 span {
  color: var(--spsr-primary);
}
.spsr-lp .spsr-lp-lede {
  text-align: center;
  color: var(--spsr-text);
  max-width: 600px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.75;
}

/* ==========================================================================
   INTRO + STATS
   ========================================================================== */
.spsr-lp .spsr-lp-intro {
  padding: 80px 0;
  background: var(--spsr-white);
}
.spsr-lp .spsr-lp-intro > .spsr-lp-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
.spsr-lp .spsr-lp-intro-content h2 {
  font-family: var(--spsr-font-head);
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.15;
  color: var(--spsr-secondary);
  letter-spacing: -0.02em;
}
.spsr-lp .spsr-lp-intro-content h2 strong {
  color: var(--spsr-primary);
  font-weight: 700;
}
.spsr-lp .spsr-lp-intro-content p {
  margin-bottom: 16px;
  color: var(--spsr-text);
  font-size: 16px;
  line-height: 1.75;
}
.spsr-lp .spsr-lp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  background: var(--spsr-secondary);
}
.spsr-lp .spsr-lp-stat {
  text-align: center;
  padding: 28px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.spsr-lp .spsr-lp-stat:last-child {
  border-right: none;
}
.spsr-lp .spsr-lp-stat-num {
  font-family: var(--spsr-font-head);
  font-size: 38px;
  font-weight: 700;
  color: var(--spsr-primary);
  display: block;
  line-height: 1;
}
.spsr-lp .spsr-lp-stat-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 8px;
  display: block;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   SIGNALS (numbered cards) - 3 cols, 6 cards
   ========================================================================== */
.spsr-lp .spsr-lp-signals {
  padding: 80px 0;
  background: var(--spsr-bg);
}
.spsr-lp .spsr-lp-signals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-top: 48px;
}
.spsr-lp .spsr-lp-signal {
  background: var(--spsr-white);
  padding: 32px 28px;
  border-left: 4px solid var(--spsr-primary);
  position: relative;
}
.spsr-lp .spsr-lp-signal-num {
  font-family: var(--spsr-font-head);
  font-size: 48px;
  font-weight: 700;
  color: var(--spsr-primary);
  opacity: 0.18;
  line-height: 1;
  margin-bottom: 12px;
  display: block;
}
.spsr-lp .spsr-lp-signal h3 {
  font-family: var(--spsr-font-head);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--spsr-secondary);
}
.spsr-lp .spsr-lp-signal p {
  font-size: 14px;
  color: var(--spsr-text);
  line-height: 1.7;
}

/* ==========================================================================
   SERVICE CARDS (text only) - 3 cols, 6 cards
   ========================================================================== */
.spsr-lp .spsr-lp-services {
  padding: 80px 0;
  background: var(--spsr-bg);
}
.spsr-lp .spsr-lp-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 48px;
}
.spsr-lp .spsr-lp-service {
  background: var(--spsr-white);
  padding: 36px 28px;
  border-top: 3px solid var(--spsr-primary);
  transition: background 0.25s ease;
}
.spsr-lp .spsr-lp-service:hover {
  background: var(--spsr-secondary);
}
.spsr-lp .spsr-lp-service h3 {
  font-family: var(--spsr-font-head);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--spsr-secondary);
  transition: color 0.25s;
}
.spsr-lp .spsr-lp-service:hover h3 {
  color: var(--spsr-primary);
}
.spsr-lp .spsr-lp-service p {
  font-size: 14px;
  color: var(--spsr-text);
  line-height: 1.7;
  transition: color 0.25s;
}
.spsr-lp .spsr-lp-service:hover p {
  color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   MATERIALS - badge + copy + list
   ========================================================================== */
.spsr-lp .spsr-lp-materials {
  padding: 80px 0;
  background: var(--spsr-white);
}
.spsr-lp .spsr-lp-materials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3px;
  margin-top: 48px;
}
.spsr-lp .spsr-lp-material {
  background: var(--spsr-bg);
  padding: 40px 32px;
  border-top: 3px solid var(--spsr-primary);
  transition: background 0.25s ease;
}
.spsr-lp .spsr-lp-material:hover {
  background: var(--spsr-secondary);
}
.spsr-lp .spsr-lp-material-badge {
  display: inline-block;
  background: rgba(234, 132, 51, 0.1);
  color: var(--spsr-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  margin-bottom: 16px;
  transition: background 0.25s ease;
}
.spsr-lp .spsr-lp-material:hover .spsr-lp-material-badge {
  background: rgba(234, 132, 51, 0.2);
}
.spsr-lp .spsr-lp-material h3 {
  font-family: var(--spsr-font-head);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--spsr-secondary);
  transition: color 0.25s;
}
.spsr-lp .spsr-lp-material:hover h3 {
  color: var(--spsr-primary);
}
.spsr-lp .spsr-lp-material p {
  font-size: 14px;
  color: var(--spsr-text);
  line-height: 1.7;
  margin-bottom: 16px;
  transition: color 0.25s;
}
.spsr-lp .spsr-lp-material ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spsr-lp .spsr-lp-material li {
  font-size: 13px;
  color: var(--spsr-text-light);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.55;
  transition: color 0.25s;
}
.spsr-lp .spsr-lp-material li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--spsr-primary);
  flex-shrink: 0;
  margin-top: 6px;
  transform: rotate(45deg);
}
.spsr-lp .spsr-lp-material:hover p,
.spsr-lp .spsr-lp-material:hover li {
  color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   MEDIA (image + video)
   ========================================================================== */
.spsr-lp .spsr-lp-media {
  padding: 80px 0;
  background: var(--spsr-white);
}
.spsr-lp .spsr-lp-media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
  align-items: stretch;
}
.spsr-lp .spsr-lp-media-img-wrap,
.spsr-lp .spsr-lp-media-video-wrap {
  height: 360px;
  overflow: hidden;
}
.spsr-lp .spsr-lp-media-img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  display: block;
}
.spsr-lp .spsr-lp-media-video-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ==========================================================================
   FEATURE SPLIT (coastal / heritage / terrace)
   ========================================================================== */
.spsr-lp .spsr-lp-feature {
  padding: 80px 0;
}
.spsr-lp .spsr-lp-feature--light {
  background: var(--spsr-bg);
}
.spsr-lp .spsr-lp-feature--white {
  background: var(--spsr-white);
}
.spsr-lp .spsr-lp-feature-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
.spsr-lp .spsr-lp-feature-content h2 {
  font-family: var(--spsr-font-head);
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: 700;
  color: var(--spsr-secondary);
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  line-height: 1.15;
}
.spsr-lp .spsr-lp-feature-content h2 span {
  color: var(--spsr-primary);
}
.spsr-lp .spsr-lp-feature-content p {
  font-size: 16px;
  color: var(--spsr-text);
  line-height: 1.75;
  margin-bottom: 14px;
}
.spsr-lp .spsr-lp-feature-list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.spsr-lp .spsr-lp-feature-list li {
  font-size: 15px;
  color: var(--spsr-text);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.6;
}
.spsr-lp .spsr-lp-feature-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--spsr-primary);
  flex-shrink: 0;
  margin-top: 7px;
  transform: rotate(45deg);
}
.spsr-lp .spsr-lp-feature-stats {
  background: var(--spsr-secondary);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.spsr-lp .spsr-lp-feature-stat h3 {
  font-family: var(--spsr-font-head);
  font-size: 44px;
  font-weight: 700;
  color: var(--spsr-primary);
  line-height: 1;
  margin-bottom: 6px;
}
.spsr-lp .spsr-lp-feature-stat p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}

/* ==========================================================================
   PROCESS
   ========================================================================== */
.spsr-lp .spsr-lp-process {
  padding: 80px 0;
  background: var(--spsr-bg);
}
.spsr-lp .spsr-lp-process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 3px;
  margin-top: 56px;
}
.spsr-lp .spsr-lp-process-step {
  background: var(--spsr-white);
  padding: 40px 32px;
  border-top: 3px solid var(--spsr-primary);
}
.spsr-lp .spsr-lp-step-num {
  font-family: var(--spsr-font-head);
  font-size: 52px;
  font-weight: 700;
  color: var(--spsr-primary);
  opacity: 0.22;
  line-height: 1;
  margin-bottom: 20px;
  display: block;
}
.spsr-lp .spsr-lp-process-step h3 {
  font-family: var(--spsr-font-head);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--spsr-secondary);
}
.spsr-lp .spsr-lp-process-step p {
  font-size: 14px;
  color: var(--spsr-text);
  line-height: 1.7;
}

/* ==========================================================================
   WHY
   ========================================================================== */
.spsr-lp .spsr-lp-why {
  padding: 80px 0;
  background: var(--spsr-secondary);
}
.spsr-lp .spsr-lp-why .spsr-lp-head h2 {
  color: var(--spsr-white);
}
.spsr-lp .spsr-lp-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 56px;
}
.spsr-lp .spsr-lp-why-item {
  background: rgba(255, 255, 255, 0.04);
  padding: 36px 28px;
  border-top: 3px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.spsr-lp .spsr-lp-why-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-top-color: var(--spsr-primary);
}
.spsr-lp .spsr-lp-why-icon {
  width: 44px;
  height: 44px;
  background: var(--spsr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--spsr-white);
  font-size: 20px;
  margin-bottom: 18px;
}
.spsr-lp .spsr-lp-why-item h3 {
  font-family: var(--spsr-font-head);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--spsr-white);
}
.spsr-lp .spsr-lp-why-item p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
}

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.spsr-lp .spsr-lp-reviews {
  padding: 80px 0;
  background: var(--spsr-bg);
}
.spsr-lp .spsr-lp-reviews-band {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 48px;
  padding: 24px 32px;
  background: var(--spsr-secondary);
  flex-wrap: wrap;
}
.spsr-lp .spsr-lp-reviews-score {
  font-family: var(--spsr-font-head);
  font-size: 52px;
  font-weight: 700;
  color: var(--spsr-primary);
  line-height: 1;
}
.spsr-lp .spsr-lp-reviews-info {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}
.spsr-lp .spsr-lp-reviews-info strong {
  display: block;
  font-size: 16px;
  color: var(--spsr-white);
  margin-bottom: 4px;
}
.spsr-lp .spsr-lp-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 3px;
}
.spsr-lp .spsr-lp-review {
  background: var(--spsr-white);
  padding: 36px 30px;
  border-bottom: 3px solid transparent;
  transition: border-color 0.25s;
}
.spsr-lp .spsr-lp-review:hover {
  border-bottom-color: var(--spsr-primary);
}
.spsr-lp .spsr-lp-review-stars {
  color: var(--spsr-primary);
  font-size: 15px;
  margin-bottom: 16px;
  letter-spacing: 3px;
}
.spsr-lp .spsr-lp-review blockquote {
  font-size: 15px;
  color: var(--spsr-text);
  line-height: 1.75;
  font-style: italic;
  margin-bottom: 20px;
  border-left: 3px solid var(--spsr-primary);
  padding-left: 16px;
}
.spsr-lp .spsr-lp-review-author {
  font-family: var(--spsr-font-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--spsr-secondary);
}

/* ==========================================================================
   SERVICE TILES (image grid) - 5 cols, 15 tiles
   ========================================================================== */
.spsr-lp .spsr-lp-tiles {
  padding: 80px 0;
  background: var(--spsr-secondary);
}
.spsr-lp .spsr-lp-tiles .spsr-lp-head h2 {
  color: var(--spsr-white);
}
.spsr-lp .spsr-lp-tiles-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  margin-top: 48px;
}
.spsr-lp .spsr-lp-tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #1a1a2e;
}
.spsr-lp .spsr-lp-tile img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0.55;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.spsr-lp .spsr-lp-tile:hover img,
.spsr-lp .spsr-lp-tile:focus-within img {
  opacity: 0.35;
  transform: scale(1.04);
}
.spsr-lp .spsr-lp-tile-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, transparent 100%);
}
.spsr-lp .spsr-lp-tile-body h3 {
  font-family: var(--spsr-font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--spsr-white);
  line-height: 1.25;
  margin-bottom: 8px;
}
.spsr-lp .spsr-lp-tile-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--spsr-white);
  border-radius: 50%;
  color: var(--spsr-primary);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
/* Stretched link: the whole tile is the hit area, but the accessible name
   still comes from the <a>, and only the <a> takes focus. */
.spsr-lp .spsr-lp-tile-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
}
.spsr-lp .spsr-lp-tile:hover .spsr-lp-tile-arrow,
.spsr-lp .spsr-lp-tile-arrow:focus-visible {
  background: var(--spsr-primary);
  color: var(--spsr-white);
}

/* ==========================================================================
   SUBURBS
   ========================================================================== */
.spsr-lp .spsr-lp-suburbs {
  padding: 80px 0;
  background: var(--spsr-white);
}
.spsr-lp .spsr-lp-suburbs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 2px;
  margin-top: 40px;
}
.spsr-lp .spsr-lp-suburb {
  background: var(--spsr-bg);
  border-left: 3px solid var(--spsr-primary);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--spsr-secondary);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   FAQ  (native <details> - no JS, therefore no INP cost)
   ========================================================================== */
.spsr-lp .spsr-lp-faq {
  background: var(--spsr-bg);
  padding: 80px 0;
}
.spsr-lp .spsr-lp-faq-list {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.spsr-lp .spsr-lp-faq-item {
  background: var(--spsr-white);
  border-left: 3px solid transparent;
  transition: border-color 0.2s;
}
.spsr-lp .spsr-lp-faq-item[open] {
  border-left-color: var(--spsr-primary);
}
.spsr-lp .spsr-lp-faq-item summary {
  padding: 22px 28px;
  font-family: var(--spsr-font-head);
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--spsr-secondary);
}
.spsr-lp .spsr-lp-faq-item summary::-webkit-details-marker {
  display: none;
}
.spsr-lp .spsr-lp-faq-toggle {
  width: 28px;
  height: 28px;
  background: var(--spsr-primary);
  color: var(--spsr-white);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  transition: transform 0.2s ease;
}
.spsr-lp .spsr-lp-faq-item[open] .spsr-lp-faq-toggle {
  transform: rotate(45deg);
}
.spsr-lp .spsr-lp-faq-answer {
  padding: 0 28px 24px;
  font-size: 15px;
  color: var(--spsr-text);
  line-height: 1.75;
}

/* ==========================================================================
   CTA STRIP
   ========================================================================== */
.spsr-lp .spsr-lp-cta {
  background: var(--spsr-primary);
  color: var(--spsr-white);
  padding: 80px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.spsr-lp .spsr-lp-cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
}
.spsr-lp .spsr-lp-cta > .spsr-lp-container {
  position: relative;
  z-index: 1;
}
.spsr-lp .spsr-lp-cta h2 {
  font-family: var(--spsr-font-head);
  font-size: clamp(26px, 4vw, 48px);
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--spsr-white);
}
.spsr-lp .spsr-lp-cta p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 520px;
  margin: 0 auto 40px;
  line-height: 1.7;
}
.spsr-lp .spsr-lp-cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 768px) {
  .spsr-lp .spsr-lp-intro > .spsr-lp-container {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .spsr-lp .spsr-lp-feature-inner {
    grid-template-columns: 1.2fr 1fr;
  }
}

@media (max-width: 900px) {
  .spsr-lp .spsr-lp-signals-grid,
  .spsr-lp .spsr-lp-services-grid,
  .spsr-lp .spsr-lp-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .spsr-lp .spsr-lp-tiles-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .spsr-lp .spsr-lp-media-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .spsr-lp .spsr-lp-trust-pills {
    flex-direction: column;
    gap: 10px;
  }
  .spsr-lp .spsr-lp-trust-pill {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    margin-right: 0;
  }
  .spsr-lp .spsr-lp-trust-pill:last-child {
    border-bottom: none;
  }
  .spsr-lp .spsr-lp-stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 580px) {
  .spsr-lp .spsr-lp-signals-grid,
  .spsr-lp .spsr-lp-services-grid,
  .spsr-lp .spsr-lp-why-grid {
    grid-template-columns: 1fr;
  }
  .spsr-lp .spsr-lp-tiles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* The hover transitions above are the only motion on the page, but honouring
   the preference is required, not optional. */
@media (prefers-reduced-motion: reduce) {
  .spsr-lp *,
  .spsr-lp *::before,
  .spsr-lp *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Visually hidden, still announced. Own class rather than the theme-agnostic
   .screen-reader-text, which this theme does not define. */
.spsr-lp .spsr-lp-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}