/* ==========================================================================
   Baja Pool Plaster - inner pages (services, company, resources)
   Loaded together with baja-home.css, whose components (section, eyebrow,
   section-head, svc-card, guide-card, editorial, benefits, process, project,
   faq accordion, finalcta, floating CTA) are scoped to :is(.home, .elementor-page, .bp-landing).
   This file only adds the pieces the homepage does not have.
   All content is visible by default - nothing here waits on JavaScript.
   ========================================================================== */

/* Photo grounds for .sec-photo sections (homepage sets these by section id) */
:is(.elementor-page, .bp-landing) .ph-sunny     { --photo: url("/wp-content/uploads/2026/09/sunny-san-diego-backyard-pool-768x432.webp"); --photo-pos: 50% 58%; }
:is(.elementor-page, .bp-landing) .ph-resurfaced{ --photo: url("/wp-content/uploads/2026/09/resurfaced-swimming-pool-768x432.webp"); --photo-pos: 50% 70%; }
:is(.elementor-page, .bp-landing) .ph-coastal   { --photo: url("/wp-content/uploads/2026/09/coastal-view-pool-768x310.webp"); --photo-pos: 50% 46%; }
:is(.elementor-page, .bp-landing) .ph-maintained{ --photo: url("/wp-content/uploads/2026/09/maintained-plaster-pool-surface-768x432.webp"); --photo-pos: 50% 60%; }
:is(.elementor-page, .bp-landing) .ph-replaster { --photo: url("/wp-content/uploads/2026/09/replastered-swimming-pool-768x1365.webp"); --photo-pos: 50% 62%; }
:is(.elementor-page, .bp-landing) .ph-soft      { --veil: rgba(255, 255, 255, .9); }

/* Page wrapper ------------------------------------------------------------*/
:is(.elementor-page, .bp-landing) .bp-main { display: block; }
:is(.elementor-page, .bp-landing) .bp-main section[id] { scroll-margin-top: var(--hdr-stuck, 84px); }

/* Page hero ---------------------------------------------------------------*/
:is(.elementor-page, .bp-landing) .page-hero {
  padding-top: calc(var(--hdr-h, 127px) + clamp(30px, 4.4vw, 64px));
  padding-bottom: clamp(54px, 6.4vw, 92px);
  color: var(--ink);
  --veil: linear-gradient(180deg, rgba(244, 250, 254, .9) 0%, rgba(228, 244, 252, .9) 100%);
}
:is(.elementor-page, .bp-landing) .page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
}
:is(.elementor-page, .bp-landing) .page-hero__copy { min-width: 0; }
:is(.elementor-page, .bp-landing) .page-hero h1 {
  font-size: clamp(38px, 4.7vw, 64px);
  line-height: 1.04;
  letter-spacing: -.034em;
  color: var(--ink);
}
:is(.elementor-page, .bp-landing) .page-hero__lede { margin-top: 22px; font-size: 18.5px; line-height: 1.62; color: var(--ink-soft); }
:is(.elementor-page, .bp-landing) .page-hero__lede p { max-width: 60ch; }
:is(.elementor-page, .bp-landing) .page-hero__lede p + p { margin-top: 14px; }
:is(.elementor-page, .bp-landing) .page-hero__actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
/* Hero trust pills: quiet indicators, not buttons. Each pill fits its own text; a pale
   circle holds the check so every icon is the same size and clear of the pill edge. */
:is(.elementor-page, .bp-landing) .page-hero__facts .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
}
:is(.elementor-page, .bp-landing) .page-hero__facts.elementor-widget-icon-list .elementor-icon-list-items .elementor-icon-list-item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin: 0;
  padding: 7px 15px 7px 8px;
  border: 1px solid #D5ECF8;
  border-radius: 999px;
  background: rgba(247, 252, 255, .94);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.005em;
  color: #123A52;
  white-space: nowrap;
}
:is(.elementor-page, .bp-landing) .page-hero__facts.elementor-widget-icon-list .elementor-icon-list-items .elementor-icon-list-icon {
  display: inline-flex;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  top: 0;
  border-radius: 50%;
  background: #E3F3FC;
}
:is(.elementor-page, .bp-landing) .page-hero__facts.elementor-widget-icon-list .elementor-icon-list-items .elementor-icon-list-icon svg { width: 10px; height: 10px; fill: #1B8CE2; }
:is(.elementor-page, .bp-landing) .page-hero__facts.elementor-widget-icon-list .elementor-icon-list-items .elementor-icon-list-text { margin: 0; padding: 0; line-height: 1; }
@media (max-width: 480px) {
  :is(.elementor-page, .bp-landing) .page-hero__facts .elementor-icon-list-items { gap: 8px; }
  :is(.elementor-page, .bp-landing) .page-hero__facts.elementor-widget-icon-list .elementor-icon-list-items .elementor-icon-list-item { min-height: 34px; padding: 6px 11px 6px 6px; gap: 7px; font-size: 13px; }
  :is(.elementor-page, .bp-landing) .page-hero__facts.elementor-widget-icon-list .elementor-icon-list-items .elementor-icon-list-icon { flex-basis: 18px; width: 18px; height: 18px; }
  :is(.elementor-page, .bp-landing) .page-hero__facts.elementor-widget-icon-list .elementor-icon-list-items .elementor-icon-list-icon svg { width: 9px; height: 9px; }
}
:is(.elementor-page, .bp-landing) .page-hero__media { aspect-ratio: 5 / 4; box-shadow: 0 34px 70px -40px rgba(6, 46, 74, .55); }
@media (max-width: 960px) {
  :is(.elementor-page, .bp-landing) .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
  :is(.elementor-page, .bp-landing) .page-hero__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 760px) {
  :is(.elementor-page, .bp-landing) .page-hero { padding-top: calc(var(--hdr-h, 115px) + 26px); }
  :is(.elementor-page, .bp-landing) .page-hero__lede { font-size: 17px; }
  :is(.elementor-page, .bp-landing) .page-hero__actions .elementor-widget-button { flex: 1 1 100%; }
  :is(.elementor-page, .bp-landing) .page-hero__actions .elementor-button { width: 100%; justify-content: center; }
}

/* Breadcrumbs (plain HTML trail) -----------------------------------------*/
:is(.elementor-page, .bp-landing) .bp-crumbs { margin-bottom: 22px; }
:is(.elementor-page, .bp-landing) .bp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
:is(.elementor-page, .bp-landing) .bp-crumbs li + li::before { content: "/"; margin: 0 9px; color: var(--ink-soft); opacity: .6; }
:is(.elementor-page, .bp-landing) .bp-crumbs a { color: var(--pool-ink); font-weight: 600; }
:is(.elementor-page, .bp-landing) .bp-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Direct-answer blocks + prose --------------------------------------------*/
:is(.elementor-page, .bp-landing) .answer { max-width: 880px; }
:is(.elementor-page, .bp-landing) .answer h2,
:is(.elementor-page, .bp-landing) .prose-head h2 { font-size: clamp(30px, 3.5vw, 48px); color: var(--ink); }
:is(.elementor-page, .bp-landing) .lede-answer p { max-width: 68ch; }
:is(.elementor-page, .bp-landing) .prose { margin-top: 20px; color: var(--ink-soft); font-size: 16.5px; line-height: 1.7; }
:is(.elementor-page, .bp-landing) .prose p { max-width: 70ch; }
:is(.elementor-page, .bp-landing) .prose p + p,
:is(.elementor-page, .bp-landing) .prose p + ul,
:is(.elementor-page, .bp-landing) .prose ul + p { margin-top: 16px; }
:is(.elementor-page, .bp-landing) .prose ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
:is(.elementor-page, .bp-landing) .prose ul li { position: relative; padding-left: 26px; }
:is(.elementor-page, .bp-landing) .prose ul li::before {
  content: "";
  position: absolute;
  left: 2px; top: .62em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pool-500);
}
:is(.elementor-page, .bp-landing) .prose strong { color: var(--ink); }
:is(.elementor-page, .bp-landing) :is(.prose, .lede-answer, .info-card__text, .factor-card, .takeaway, .cmp-wrap, .area-note, .why-intro, .issue-list, .qa-panel__when, .fact-box, .sh-lede) a:not(.arrow-link) {
  color: var(--pool-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(10, 118, 190, .35);
  text-underline-offset: 3px;
}
:is(.elementor-page, .bp-landing) :is(.prose, .lede-answer, .info-card__text, .factor-card, .takeaway, .cmp-wrap, .area-note, .why-intro, .issue-list, .qa-panel__when, .fact-box, .sh-lede) a:not(.arrow-link):hover { text-decoration-color: currentColor; }
:is(.elementor-page, .bp-landing) :is(.section--deep, .section--navy900) .prose { color: var(--text-muted); }

/* Two-column text + intro row */
:is(.elementor-page, .bp-landing) .intro-row {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
@media (max-width: 960px) { :is(.elementor-page, .bp-landing) .intro-row { grid-template-columns: minmax(0, 1fr); } }

/* Key takeaway -------------------------------------------------------------*/
:is(.elementor-page, .bp-landing) .takeaway {
  margin-top: 28px;
  padding: 22px 24px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(10, 130, 208, .24);
  background: linear-gradient(180deg, #F1F9FE, #E6F4FC);
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.62;
}
:is(.elementor-page, .bp-landing) .takeaway p { margin: 0; }
:is(.elementor-page, .bp-landing) .takeaway p + p { margin-top: 8px; }
:is(.elementor-page, .bp-landing) .takeaway b:first-child {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pool-ink);
}

/* Info cards (risks, symptoms, what-we-check) ------------------------------*/
:is(.elementor-page, .bp-landing) .card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: clamp(32px, 3.6vw, 48px);
}
:is(.elementor-page, .bp-landing) .card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(.elementor-page, .bp-landing) .info-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 2.2vw, 28px);
  border-radius: clamp(16px, 1.7vw, 22px);
  border: 1px solid rgba(10, 118, 190, .18);
  background: #FFFFFF;
  box-shadow: 0 20px 44px -36px rgba(9, 60, 92, .5);
}
:is(.elementor-page, .bp-landing) .info-card__num.elementor-widget {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--pool-ink);
}
:is(.elementor-page, .bp-landing) .info-card h3 { font-size: 18.5px; line-height: 1.25; letter-spacing: -.02em; color: var(--ink); }
:is(.elementor-page, .bp-landing) .info-card__text { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
:is(.elementor-page, .bp-landing) .info-card__text p + p { margin-top: 10px; }
:is(.elementor-page, .bp-landing) :is(.section--deep, .section--navy900) .info-card { background: rgba(8, 44, 66, .55); border-color: rgba(99, 221, 216, .22); box-shadow: none; }
:is(.elementor-page, .bp-landing) :is(.section--deep, .section--navy900) .info-card h3 { color: #FFFFFF; }
:is(.elementor-page, .bp-landing) :is(.section--deep, .section--navy900) .info-card__text { color: var(--text-muted); }
:is(.elementor-page, .bp-landing) :is(.section--deep, .section--navy900) .info-card__num.elementor-widget { color: var(--pool-300); }
@media (max-width: 1100px) { :is(.elementor-page, .bp-landing) .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { :is(.elementor-page, .bp-landing) .card-grid, :is(.elementor-page, .bp-landing) .card-grid--2 { grid-template-columns: minmax(0, 1fr); } }

/* Comparison table (Text Editor <table>) ----------------------------------*/
:is(.elementor-page, .bp-landing) .cmp-wrap { margin-top: clamp(30px, 3.4vw, 44px); }
:is(.elementor-page, .bp-landing) .cmp-wrap table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgba(10, 118, 190, .2);
  border-radius: clamp(16px, 1.7vw, 22px);
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 22px 50px -40px rgba(9, 60, 92, .5);
  margin: 0;
}
:is(.elementor-page, .bp-landing) .cmp-wrap th {
  padding: 16px 20px;
  background: var(--navy-900, #0B2A3D);
  color: #FFFFFF;
  text-align: left;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  border: 0;
}
:is(.elementor-page, .bp-landing) .cmp-wrap td {
  padding: 16px 20px;
  border: 0;
  border-top: 1px solid var(--line-light);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  vertical-align: top;
  background: #FFFFFF;
}
:is(.elementor-page, .bp-landing) .cmp-wrap tbody tr:nth-child(even) td { background: #F7FBFE; }
:is(.elementor-page, .bp-landing) .cmp-wrap td:first-child { font-weight: 700; color: var(--ink); }
:is(.elementor-page, .bp-landing) .cmp-note { margin-top: 14px; font-size: 14px; color: var(--ink-soft); }
@media (max-width: 760px) {
  :is(.elementor-page, .bp-landing) .cmp-wrap table,
  :is(.elementor-page, .bp-landing) .cmp-wrap tbody,
  :is(.elementor-page, .bp-landing) .cmp-wrap tr,
  :is(.elementor-page, .bp-landing) .cmp-wrap td { display: block; width: 100%; }
  :is(.elementor-page, .bp-landing) .cmp-wrap thead { display: none; }
  :is(.elementor-page, .bp-landing) .cmp-wrap table { border: 0; background: none; box-shadow: none; overflow: visible; border-radius: 0; }
  :is(.elementor-page, .bp-landing) .cmp-wrap tr {
    margin-bottom: 14px;
    border: 1px solid rgba(10, 118, 190, .2);
    border-radius: 16px;
    overflow: hidden;
    background: #FFFFFF;
  }
  :is(.elementor-page, .bp-landing) .cmp-wrap td { border-top: 1px solid var(--line-light); padding: 12px 16px; }
  :is(.elementor-page, .bp-landing) .cmp-wrap td:first-child { border-top: 0; background: var(--navy-900, #0B2A3D) !important; color: #FFFFFF; }
  :is(.elementor-page, .bp-landing) .cmp-wrap tbody tr:nth-child(even) td:not(:first-child) { background: #FFFFFF; }
  :is(.elementor-page, .bp-landing) .cmp-wrap td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pool-ink);
  }
}

/* Cost / timeline factor cards ---------------------------------------------*/
:is(.elementor-page, .bp-landing) .factor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
  margin-top: clamp(32px, 3.6vw, 48px);
}
:is(.elementor-page, .bp-landing) .factor-card {
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: clamp(18px, 1.9vw, 24px);
  border: 1px solid rgba(10, 118, 190, .18);
  background: #FFFFFF;
  box-shadow: 0 22px 50px -40px rgba(9, 60, 92, .5);
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.62;
}
:is(.elementor-page, .bp-landing) .factor-card h3 { font-size: 22px; letter-spacing: -.024em; color: var(--ink); margin-bottom: 12px; }
:is(.elementor-page, .bp-landing) .factor-card ul { list-style: none; margin: 16px 0 0; padding: 0; }
:is(.elementor-page, .bp-landing) .factor-card li { position: relative; padding: 11px 0 11px 30px; border-top: 1px solid var(--line-light); }
:is(.elementor-page, .bp-landing) .factor-card li::before {
  content: "";
  position: absolute;
  left: 2px; top: 17px;
  width: 16px; height: 16px;
  background: var(--pool-500);
  -webkit-mask: var(--ico-check, none) center / contain no-repeat;
  mask: var(--ico-check, none) center / contain no-repeat;
  border-radius: 50%;
}
:is(.elementor-page, .bp-landing) .factor-card li b { color: var(--ink); }
:is(.elementor-page, .bp-landing) .factor-card p + p, :is(.elementor-page, .bp-landing) .factor-card ul + p { margin-top: 14px; }
@media (max-width: 860px) { :is(.elementor-page, .bp-landing) .factor-grid { grid-template-columns: minmax(0, 1fr); } }

/* Related services (text-over-image .project cards in a 3-up grid) --------*/
:is(.elementor-page, .bp-landing) .rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 26px); }
:is(.elementor-page, .bp-landing) .rel-grid .project { aspect-ratio: 4 / 3; }
:is(.elementor-page, .bp-landing) .rel-grid .project__meta { flex-direction: column; align-items: flex-start; }
:is(.elementor-page, .bp-landing) .project__line.elementor-widget { font-size: 14px; line-height: 1.5; color: #D6E8F2; margin-top: 6px; max-width: 34ch; }
@media (max-width: 1024px) { :is(.elementor-page, .bp-landing) .rel-grid .project { aspect-ratio: 3 / 4; } }
@media (max-width: 860px)  {
  :is(.elementor-page, .bp-landing) .rel-grid { grid-template-columns: minmax(0, 1fr); }
  :is(.elementor-page, .bp-landing) .rel-grid .project { aspect-ratio: 16 / 9; }
}
@media (max-width: 430px)  { :is(.elementor-page, .bp-landing) .rel-grid .project { aspect-ratio: 4 / 3; } }

/* Pill list (service areas etc.) -------------------------------------------*/
:is(.elementor-page, .bp-landing) .pill-list .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
:is(.elementor-page, .bp-landing) .pill-list .elementor-icon-list-item {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(10, 118, 190, .22);
  background: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}
:is(.elementor-page, .bp-landing) .pill-list a { color: inherit; }
:is(.elementor-page, .bp-landing) .area-note { margin-top: 18px; font-size: 15px; color: var(--ink-soft); }

/* Section rhythm helpers ---------------------------------------------------*/
:is(.elementor-page, .bp-landing) .section-head--center { margin-inline: auto; text-align: center; }
:is(.elementor-page, .bp-landing) .section-head--center .sh-lede p { margin-inline: auto; }
:is(.elementor-page, .bp-landing) .sec-foot { margin-top: clamp(26px, 3vw, 38px); }
:is(.elementor-page, .bp-landing) .editorial__body .elementor-widget + .elementor-widget.prose { margin-top: 18px; }
:is(.elementor-page, .bp-landing) .editorial__body .signs .elementor-icon-list-items { margin-top: 26px; }

/* Process tracks sized by step count (base rules handle tablet/phone) ------*/
@media (min-width: 1101px) {
  :is(.elementor-page, .bp-landing) .process-track--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 46px; }
  :is(.elementor-page, .bp-landing) :is(.process-track--n4, .process-track--n7, .process-track--n8) { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 46px; }
}
/* ==========================================================================
   Refinement pass (2026-09-25): readability, chapters, premium components.
   Typography changes apply to every rebuilt inner page; the new components
   (qa-split, issue-list, fact-box, factor-panel, stat-row, rel-cards, ...)
   are opt-in and only appear where a page module uses them.
   ========================================================================== */

/* Readability: slightly larger body sizes, calmer line lengths ------------*/
:is(.elementor-page, .bp-landing) .prose { font-size: 17.5px; line-height: 1.72; }
:is(.elementor-page, .bp-landing) .prose p { max-width: 72ch; }
:is(.elementor-page, .bp-landing) .prose ul { gap: 12px; }
:is(.elementor-page, .bp-landing) .lede-answer { font-size: 19.5px; line-height: 1.6; }
:is(.elementor-page, .bp-landing) .lede-answer p { max-width: 70ch; }
:is(.elementor-page, .bp-landing) .section-head { max-width: 800px; }
:is(.elementor-page, .bp-landing) .section-head .sh-lede { font-size: 19px; line-height: 1.62; }
:is(.elementor-page, .bp-landing) .body-copy { font-size: 17.5px; line-height: 1.7; }
:is(.elementor-page, .bp-landing) .info-card h3 { font-size: 20px; line-height: 1.28; }
:is(.elementor-page, .bp-landing) .info-card__text { font-size: 16.5px; line-height: 1.65; }
:is(.elementor-page, .bp-landing) .factor-card { font-size: 16.5px; line-height: 1.66; }
:is(.elementor-page, .bp-landing) .benefit { padding: 22px 0; }
:is(.elementor-page, .bp-landing) .benefit h3 { font-size: 19.5px; margin-bottom: 6px; }
:is(.elementor-page, .bp-landing) .benefit__text { font-size: 16px; line-height: 1.62; }
:is(.elementor-page, .bp-landing) .svc-card__text { font-size: 16px; line-height: 1.62; }
:is(.elementor-page, .bp-landing) .answer--wide { max-width: 1000px; }
:is(.elementor-page, .bp-landing) .head-row + :is(.card-grid, .factor-grid) { margin-top: 0; }
@media (max-width: 760px) {
  :is(.elementor-page, .bp-landing) .prose { font-size: 17px; }
  :is(.elementor-page, .bp-landing) .lede-answer { font-size: 18px; padding-left: 16px; }
  :is(.elementor-page, .bp-landing) .section-head .sh-lede { font-size: 17.5px; }
  :is(.elementor-page, .bp-landing) .body-copy { font-size: 17px; }
  :is(.elementor-page, .bp-landing) .info-card__text { font-size: 16px; }
}

/* Chapters: related sections share one background instead of striping ----*/
:is(.elementor-page, .bp-landing) .section--ice { background: #EEF7FC; color: var(--ink); }
:is(.elementor-page, .bp-landing) .section.chap-next { padding-top: clamp(4px, 1.4vw, 20px); }
:is(.elementor-page, .bp-landing) .section--ice .btn--ghost .elementor-button { border-color: rgba(21, 56, 74, .26); color: var(--ink); background: rgba(255, 255, 255, .6); }

/* Hero ---------------------------------------------------------------------*/
:is(.elementor-page, .bp-landing) .page-hero h1 { font-size: clamp(40px, 5vw, 70px); }
:is(.elementor-page, .bp-landing) .page-hero__lede { margin-top: 28px; }
:is(.elementor-page, .bp-landing) .page-hero__actions { margin-top: 34px; }
:is(.elementor-page, .bp-landing) .page-hero .btn--primary .elementor-button {
  min-height: 58px;
  padding: 0 34px;
  font-size: 15px;
  box-shadow: 0 18px 36px -16px rgba(10, 130, 208, .75);
}
:is(.elementor-page, .bp-landing) .page-hero--lg .page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(34px, 4.6vw, 72px); }
:is(.elementor-page, .bp-landing) .page-hero--lg .page-hero__media { aspect-ratio: 11 / 10; border-radius: clamp(22px, 2.4vw, 32px); }
@media (max-width: 960px) {
  :is(.elementor-page, .bp-landing) .page-hero--lg .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
  :is(.elementor-page, .bp-landing) .page-hero--lg .page-hero__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 760px) { :is(.elementor-page, .bp-landing) .page-hero .btn--primary .elementor-button { min-height: 56px; } }
/* Long H1s on small phones */
@media (max-width: 430px) { :is(.elementor-page, .bp-landing) .page-hero h1 { font-size: 36px; } }
@media (max-width: 374px) { :is(.elementor-page, .bp-landing) .page-hero h1 { font-size: 34px; } }

/* Direct answer, split layout --------------------------------------------*/
:is(.elementor-page, .bp-landing) .qa-split {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
:is(.elementor-page, .bp-landing) .qa-split__head h2 { font-size: clamp(32px, 3.8vw, 52px); color: var(--ink); }
:is(.elementor-page, .bp-landing) .qa-split__support { margin-top: 24px; }
:is(.elementor-page, .bp-landing) .qa-panel {
  padding: clamp(26px, 3vw, 42px);
  border-radius: clamp(20px, 2vw, 28px);
  border: 1px solid rgba(10, 130, 208, .22);
  background: linear-gradient(180deg, #F3FAFE 0%, #E7F4FC 100%);
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.65;
}
:is(.elementor-page, .bp-landing) .qa-panel p { margin: 0; }
:is(.elementor-page, .bp-landing) .qa-panel__eb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pool-ink);
}
:is(.elementor-page, .bp-landing) .qa-panel__eb::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .6; }
:is(.elementor-page, .bp-landing) .qa-panel .qa-panel__term {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: clamp(23px, 2vw, 27px);
  font-weight: 700;
  letter-spacing: -.026em;
  line-height: 1.2;
}
:is(.elementor-page, .bp-landing) .qa-panel .qa-panel__answer { margin-top: 8px; font-size: 18.5px; line-height: 1.6; }
:is(.elementor-page, .bp-landing) .qa-panel .qa-panel__sub {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(10, 118, 190, .2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #4F6879;
}
:is(.elementor-page, .bp-landing) .qa-panel__rel { list-style: none; margin: 8px 0 0; padding: 0; }
:is(.elementor-page, .bp-landing) .qa-panel__rel li {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 4px 22px;
  padding: 15px 0;
  border-top: 1px solid rgba(10, 118, 190, .13);
}
:is(.elementor-page, .bp-landing) .qa-panel__rel li:first-child { border-top: 0; }
:is(.elementor-page, .bp-landing) .qa-panel__svc { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; letter-spacing: -.015em; line-height: 1.4; }
:is(.elementor-page, .bp-landing) .qa-panel__svc a { color: var(--pool-ink); text-decoration: underline; text-decoration-color: rgba(10, 118, 190, .3); text-underline-offset: 4px; }
:is(.elementor-page, .bp-landing) .qa-panel__svc a:hover { text-decoration-color: currentColor; }
:is(.elementor-page, .bp-landing) .qa-panel__when { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 960px) { :is(.elementor-page, .bp-landing) .qa-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { :is(.elementor-page, .bp-landing) .qa-panel__rel li { grid-template-columns: minmax(0, 1fr); } }

/* Problem list: H3 per item -----------------------------------------------*/
:is(.elementor-page, .bp-landing) .issue-list ul { list-style: none; margin: 30px 0 0; padding: 0; }
:is(.elementor-page, .bp-landing) .issue-list li { position: relative; padding: 18px 0 18px 48px; border-top: 1px solid var(--line-light); }
:is(.elementor-page, .bp-landing) .issue-list li:last-child { border-bottom: 1px solid var(--line-light); }
:is(.elementor-page, .bp-landing) .issue-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 19px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(10, 130, 208, .3);
  background: rgba(10, 130, 208, .08);
}
:is(.elementor-page, .bp-landing) .issue-list li::after {
  content: "";
  position: absolute;
  left: 10px; top: 29px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pool-500);
}
:is(.elementor-page, .bp-landing) .issue-list h3 { margin: 0 0 4px; font-size: 19px; line-height: 1.32; letter-spacing: -.02em; color: var(--ink); }
:is(.elementor-page, .bp-landing) .issue-list p { margin: 0; font-size: 16.5px; line-height: 1.62; color: var(--ink-soft); }
:is(.elementor-page, .bp-landing) .note-line { margin-top: 24px; }

/* Editorial with a sticky image column (text taller than the image) -------*/
:is(.elementor-page, .bp-landing) .pshot { aspect-ratio: 4 / 5; }
:is(.elementor-page, .bp-landing) .pshot__inset {
  position: absolute;
  right: -22px; bottom: -30px;
  z-index: 2;
  width: 42%;
  max-width: 250px;
  aspect-ratio: 1 / 1;
  border: 6px solid #FFFFFF;
  box-shadow: 0 26px 50px -26px rgba(3, 14, 22, .55);
}
@media (min-width: 961px) {
  :is(.elementor-page, .bp-landing) .editorial--problems { grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); }
  :is(.elementor-page, .bp-landing) .editorial--sticky { align-items: start; }
  :is(.elementor-page, .bp-landing) .editorial--sticky > .editorial__media { position: sticky; top: calc(var(--hdr-stuck, 84px) + 28px); }
  :is(.elementor-page, .bp-landing) .pshot { max-height: calc(100vh - var(--hdr-stuck, 84px) - 96px); min-height: 420px; }
}
@media (max-width: 960px) {
  :is(.elementor-page, .bp-landing) .pshot { aspect-ratio: 16 / 11; }
  :is(.elementor-page, .bp-landing) .pshot__inset { right: 16px; bottom: -28px; width: 32%; }
  :is(.elementor-page, .bp-landing) .editorial--problems .editorial__media { margin-bottom: 20px; }
}
@media (max-width: 480px) { :is(.elementor-page, .bp-landing) .pshot__inset { width: 36%; border-width: 4px; bottom: -22px; } }

/* Problems / warning-signs sections: soft blurred photo ground (a .ph-* class
   picks the service-specific photo). The veil is lightest behind the photos
   and densest behind the text column, so the copy keeps full contrast.
   overflow: clip (not hidden) keeps the image column sticky. */
:is(.elementor-page, .bp-landing) .ph-ground {
  --veil: linear-gradient(100deg,
    rgba(232, 245, 252, .78) 0%,
    rgba(240, 249, 254, .86) 46%,
    rgba(247, 252, 255, .93) 100%);
}
:is(.elementor-page, .bp-landing) .sec-photo.ph-ground { overflow: clip; }
@media (max-width: 960px) {
  :is(.elementor-page, .bp-landing) .ph-ground {
    --veil: linear-gradient(180deg,
      rgba(236, 247, 253, .84) 0%,
      rgba(244, 250, 254, .9) 38%,
      rgba(247, 252, 255, .93) 100%);
  }
}
/* Service-specific grounds (each page uses its own imagery) */
:is(.elementor-page, .bp-landing) .ph-resurfaced.ph-ground { --photo-pos: 50% 42%; }
:is(.elementor-page, .bp-landing) .ph-worn     { --photo: url("/wp-content/uploads/2026/09/worn-pool-plaster-guide.webp"); --photo-pos: 50% 50%; }
:is(.elementor-page, .bp-landing) .ph-etched   { --photo: url("/wp-content/uploads/2026/09/etched-pool-plaster-texture.webp"); --photo-pos: 50% 60%; }
:is(.elementor-page, .bp-landing) .ph-crack    { --photo: url("/wp-content/uploads/2026/09/hairline-crack-guide.webp"); --photo-pos: 50% 50%; }
:is(.elementor-page, .bp-landing) .ph-steps    { --photo: url("/wp-content/uploads/2026/09/pool-steps-waterline-detail.webp"); --photo-pos: 50% 55%; }
:is(.elementor-page, .bp-landing) .ph-crew     { --photo: url("/wp-content/uploads/2026/09/crew-applying-plaster-pool-walls-768x432.webp"); --photo-pos: 50% 55%; }
:is(.elementor-page, .bp-landing) .ph-freshwhite { --photo: url("/wp-content/uploads/2026/09/freshly-plastered-white-pool-768x432.webp"); --photo-pos: 50% 60%; }
:is(.elementor-page, .bp-landing) .ph-sunnywhite { --photo: url("/wp-content/uploads/2026/09/sunny-backyard-pool-white-plaster-768x432.webp"); --photo-pos: 50% 62%; }
/* FAQ grounds: the homepage sets #faq's photo by id, so page-specific grounds
   need the id in the selector to take over */
:is(.elementor-page, .bp-landing) #faq:is(.ph-sunny, .ph-maintained, .ph-freshwhite, .ph-sunnywhite, .ph-resurfaced, .ph-coastal) { --photo: var(--faq-photo); }
:is(.elementor-page, .bp-landing) .ph-sunny      { --faq-photo: url("/wp-content/uploads/2026/09/sunny-san-diego-backyard-pool-768x432.webp"); }
:is(.elementor-page, .bp-landing) .ph-maintained { --faq-photo: url("/wp-content/uploads/2026/09/maintained-plaster-pool-surface-768x432.webp"); }
:is(.elementor-page, .bp-landing) .ph-freshwhite { --faq-photo: url("/wp-content/uploads/2026/09/freshly-plastered-white-pool-768x432.webp"); }
:is(.elementor-page, .bp-landing) .ph-sunnywhite { --faq-photo: url("/wp-content/uploads/2026/09/sunny-backyard-pool-white-plaster-768x432.webp"); }
:is(.elementor-page, .bp-landing) .ph-resurfaced { --faq-photo: url("/wp-content/uploads/2026/09/resurfaced-swimming-pool-768x432.webp"); }
:is(.elementor-page, .bp-landing) .ph-coastal    { --faq-photo: url("/wp-content/uploads/2026/09/coastal-view-pool-768x310.webp"); }

/* Dark process sections on inner pages: a finished-pool photo under the
   navy wash (the homepage one shows a rock waterfall) */
:is(.elementor-page, .bp-landing) #process::before {
  background-image:
    linear-gradient(180deg, rgba(9, 39, 56, .93), rgba(6, 28, 42, .97)),
    url("/wp-content/uploads/2026/09/resurfaced-swimming-pool.webp");
  background-position: center, center 60%;
}

/* Text-left / image-right variant of the image-led editorial */
@media (min-width: 961px) {
  :is(.elementor-page, .bp-landing) .editorial--flip { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); }
  :is(.elementor-page, .bp-landing) .editorial--flip > .editorial__media { order: 2; }
  :is(.elementor-page, .bp-landing) .editorial--flip .pshot__inset { right: auto; left: -22px; }
  :is(.elementor-page, .bp-landing) .editorial--flip .pshot .editorial__cap { left: auto; right: 22px; }
}

/* Image under the answer heading (fills the left column beside the panel) */
:is(.elementor-page, .bp-landing) .qa-split__media { aspect-ratio: 16 / 10; margin-top: 30px; }
@media (max-width: 960px) { :is(.elementor-page, .bp-landing) .qa-split__media { aspect-ratio: 16 / 9; } }

/* Feature cards whose badge is a word (Chemistry, Surface...) not a number */
:is(.elementor-page, .bp-landing) .card-grid--labels .info-card .info-card__num.elementor-widget {
  width: auto; height: 32px; padding: 0 14px;
  border-radius: var(--radius-pill);
  align-self: flex-start;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
}
@media (max-width: 640px) {
  :is(.elementor-page, .bp-landing) .card-grid--labels .info-card:not(.info-card--accent) { display: flex; flex-direction: column; align-items: stretch; }
  :is(.elementor-page, .bp-landing) .card-grid--labels .info-card:not(.info-card--accent) .info-card__num.elementor-widget { width: auto; height: 32px; }
}
:is(.elementor-page, .bp-landing) .card-grid--2.card-grid--feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { :is(.elementor-page, .bp-landing) .card-grid--2.card-grid--feature { grid-template-columns: minmax(0, 1fr); } }

/* San Diego: image pair fills the column beside the text -----------------*/
@media (min-width: 961px) { :is(.elementor-page, .bp-landing) .editorial--local { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: stretch; } }
:is(.elementor-page, .bp-landing) .editorial--local > .editorial__media { display: flex; }
:is(.elementor-page, .bp-landing) .mstack { display: grid; flex: 1; grid-template-rows: 1.7fr 1fr; gap: clamp(12px, 1.3vw, 18px); min-height: clamp(460px, 44vw, 720px); }
@media (max-width: 960px) {
  :is(.elementor-page, .bp-landing) .mstack { min-height: 0; grid-template-rows: none; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  :is(.elementor-page, .bp-landing) .mstack__main { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  :is(.elementor-page, .bp-landing) .mstack { grid-template-columns: minmax(0, 1fr); }
  :is(.elementor-page, .bp-landing) .mstack__main { aspect-ratio: 16 / 11; }
  :is(.elementor-page, .bp-landing) .mstack__sub { aspect-ratio: 16 / 8; }
}

/* Highlighted fact box ------------------------------------------------------*/
:is(.elementor-page, .bp-landing) .fact-box {
  margin-top: 26px;
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: clamp(18px, 1.9vw, 24px);
  border: 1px solid rgba(10, 130, 208, .22);
  background: linear-gradient(180deg, #F3FAFE 0%, #E9F5FC 100%);
}
:is(.elementor-page, .bp-landing) .fact-box__title {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--pool-ink);
}
:is(.elementor-page, .bp-landing) .fact-box__title::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .6; }
:is(.elementor-page, .bp-landing) .fact-box dl { margin: 0; }
:is(.elementor-page, .bp-landing) .fact-box dl > div {
  display: grid;
  grid-template-columns: minmax(130px, 34%) minmax(0, 1fr);
  gap: 4px 22px;
  padding: 14px 0;
  border-top: 1px solid rgba(10, 118, 190, .14);
}
:is(.elementor-page, .bp-landing) .fact-box dl > div:first-child { border-top: 0; }
:is(.elementor-page, .bp-landing) .fact-box dt { font-family: var(--font-display); font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; line-height: 1.4; color: var(--ink); }
:is(.elementor-page, .bp-landing) .fact-box dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 560px) { :is(.elementor-page, .bp-landing) .fact-box dl > div { grid-template-columns: minmax(0, 1fr); } }

/* Feature cards (3 x 2) -----------------------------------------------------*/
:is(.elementor-page, .bp-landing) .card-grid--feature { gap: clamp(18px, 2vw, 28px); }
:is(.elementor-page, .bp-landing) .card-grid--feature .info-card { gap: 14px; padding: clamp(26px, 2.8vw, 38px); }
:is(.elementor-page, .bp-landing) .card-grid--feature .info-card__num.elementor-widget {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 6px;
  border-radius: 50%;
  border: 1px solid rgba(10, 130, 208, .26);
  background: rgba(10, 130, 208, .08);
  font-size: 13px;
  letter-spacing: .04em;
}
:is(.elementor-page, .bp-landing) .card-grid--feature .info-card h3 { font-size: clamp(20px, 1.7vw, 22.5px); }
:is(.elementor-page, .bp-landing) .info-card--accent { background: linear-gradient(160deg, #0D3B58 0%, #082A40 100%); border-color: rgba(99, 221, 216, .28); }
:is(.elementor-page, .bp-landing) .info-card--accent h3 { color: #FFFFFF; }
:is(.elementor-page, .bp-landing) .info-card--accent .info-card__text { color: #CFE2EE; }
:is(.elementor-page, .bp-landing) .card-grid--feature .info-card--accent .info-card__num.elementor-widget {
  width: auto; height: 34px; padding: 0 16px;
  border-radius: var(--radius-pill);
  border-color: rgba(99, 221, 216, .4);
  background: rgba(99, 221, 216, .12);
  color: var(--pool-300);
  align-self: flex-start;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
}

/* Phones: number beside the title so six stacked cards stay compact */
@media (max-width: 640px) {
  :is(.elementor-page, .bp-landing) .card-grid--feature .info-card:not(.info-card--accent) {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px 16px;
    padding: 22px;
  }
  :is(.elementor-page, .bp-landing) .card-grid--feature .info-card:not(.info-card--accent) .info-card__num.elementor-widget { width: 42px; height: 42px; margin: 0; }
  :is(.elementor-page, .bp-landing) .card-grid--feature .info-card:not(.info-card--accent) .info-card__text { grid-column: 1 / -1; }
}

/* Comparison table: roomier desktop rows --------------------------------*/
:is(.elementor-page, .bp-landing) .cmp-wrap table { border-radius: clamp(18px, 2vw, 26px); }
@media (min-width: 761px) {
  :is(.elementor-page, .bp-landing) .cmp-wrap th { padding: 20px 26px; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; }
  :is(.elementor-page, .bp-landing) .cmp-wrap td { padding: 22px 26px; font-size: 16px; line-height: 1.6; }
  :is(.elementor-page, .bp-landing) .cmp-wrap td:first-child { width: 24%; background: #F1F8FD; font-family: var(--font-display); font-size: 17px; letter-spacing: -.015em; }
  :is(.elementor-page, .bp-landing) .cmp-wrap tbody tr:nth-child(even) td { background: #F8FCFE; }
  :is(.elementor-page, .bp-landing) .cmp-wrap tbody tr:nth-child(even) td:first-child { background: #E9F5FC; }
}
@media (max-width: 760px) { :is(.elementor-page, .bp-landing) .cmp-wrap td { font-size: 16px; } }

/* Process: larger type, continuous line per row with a marker per step -----*/
:is(.elementor-page, .bp-landing) .process-step h3 { font-size: 21px; margin-bottom: 12px; }
:is(.elementor-page, .bp-landing) .process-step__text { font-size: 16px; line-height: 1.64; }
:is(.elementor-page, .bp-landing) .process-note { font-size: 15.5px; line-height: 1.6; }
@media (min-width: 761px) {
  :is(.elementor-page, .bp-landing) .process-track { column-gap: 0; }
  :is(.elementor-page, .bp-landing) .process-track.process-track { row-gap: clamp(46px, 4.6vw, 64px); }
  :is(.elementor-page, .bp-landing) .process-step { padding-top: 30px; padding-right: clamp(22px, 2.8vw, 44px); border-top-color: rgba(99, 221, 216, .36); }
  :is(.elementor-page, .bp-landing) .process-step::after {
    content: "";
    position: absolute;
    left: 0; top: -6px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--pool-300);
    box-shadow: 0 0 0 5px rgba(99, 221, 216, .15);
  }
}

/* Finish cards on inner pages: landscape photos, equal heights -----------*/
:is(.elementor-page, .bp-landing) .finish-grid--page { gap: clamp(20px, 2.2vw, 30px); }
:is(.elementor-page, .bp-landing) .finish-grid--page .finish-card__media { aspect-ratio: 4 / 3; }
:is(.elementor-page, .bp-landing) .finish-grid--page .finish-card__text { font-size: 16px; line-height: 1.62; }
:is(.elementor-page, .bp-landing) .finish-grid--page .finish-card__specs dl { font-size: 14.5px; }
:is(.elementor-page, .bp-landing) .finish-grid--page .finish-card__specs dt { font-size: 11.5px; }
@media (max-width: 1100px) and (min-width: 861px) { :is(.elementor-page, .bp-landing) .finish-grid--page { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 860px) { :is(.elementor-page, .bp-landing) .finish-grid--page .finish-card__media { aspect-ratio: 16 / 10; } }

/* Cost / timeline panels ----------------------------------------------------*/
:is(.elementor-page, .bp-landing) .factor-grid--panels { gap: clamp(20px, 2.4vw, 32px); }
:is(.elementor-page, .bp-landing) .factor-panel { padding: clamp(26px, 3vw, 44px); border-radius: clamp(20px, 2vw, 28px); }
:is(.elementor-page, .bp-landing) .factor-panel p { margin: 0; }
:is(.elementor-page, .bp-landing) .factor-panel .factor-panel__label {
  display: inline-flex;
  padding: 6px 14px;
  margin-bottom: 16px;
  border-radius: var(--radius-pill);
  background: rgba(10, 130, 208, .1);
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--pool-ink);
}
:is(.elementor-page, .bp-landing) .factor-panel h3 { font-size: clamp(24px, 2.2vw, 30px); margin-bottom: 0; }
:is(.elementor-page, .bp-landing) .factor-panel .factor-panel__key {
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: 14px;
  border-left: 3px solid var(--pool-500);
  background: linear-gradient(180deg, #F1F9FE, #E6F4FC);
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink);
}
:is(.elementor-page, .bp-landing) .factor-panel .factor-panel__key + p { margin-top: 18px; }
:is(.elementor-page, .bp-landing) .factor-panel ul { margin-top: 18px; }
:is(.elementor-page, .bp-landing) .factor-panel li { padding: 14px 0 14px 36px; }
:is(.elementor-page, .bp-landing) .factor-panel li::before { top: 18px; width: 20px; height: 20px; }
:is(.elementor-page, .bp-landing) .factor-panel--steps ul { counter-reset: fstep; }
:is(.elementor-page, .bp-landing) .factor-panel--steps li { counter-increment: fstep; }
:is(.elementor-page, .bp-landing) .factor-panel--steps li::before {
  content: counter(fstep);
  top: 14px; left: 0;
  width: 24px; height: 24px;
  -webkit-mask: none; mask: none;
  background: rgba(10, 130, 208, .12);
  color: var(--pool-ink);
  font: 700 12px/24px var(--font-display);
  text-align: center;
}
:is(.elementor-page, .bp-landing) .factor-panel .factor-panel__outro { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-light); font-size: 15.5px; }
/* The shorter panel of a pair can carry a photo that fills the space left at
   the bottom of its stretched card, so both cards end level (2026-09-28). */
:is(.elementor-page, .bp-landing) .factor-panel--media { display: flex; flex-direction: column; gap: 0; }
:is(.elementor-page, .bp-landing) .factor-panel--media > .factor-panel__text { flex: 0 0 auto; width: 100%; margin: 0; }
:is(.elementor-page, .bp-landing) .factor-panel--media > .factor-panel__media { flex: 1 1 170px; width: 100%; min-height: 170px; margin-top: 24px; aspect-ratio: auto; }
@media (max-width: 860px) {
  :is(.elementor-page, .bp-landing) .factor-panel--media > .factor-panel__media { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
}

/* Why Baja: stat row + text-first variant ----------------------------------*/
:is(.elementor-page, .bp-landing) .stat-row { margin-top: 30px; }
:is(.elementor-page, .bp-landing) .stat-row__in {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(10, 118, 190, .18);
  border-radius: clamp(16px, 1.7vw, 22px);
  background: #FFFFFF;
  box-shadow: 0 22px 46px -38px rgba(9, 60, 92, .5);
  overflow: hidden;
}
:is(.elementor-page, .bp-landing) .stat { display: flex; flex-direction: column; gap: 4px; padding: clamp(16px, 1.8vw, 22px); }
:is(.elementor-page, .bp-landing) .stat + .stat { border-left: 1px solid rgba(10, 118, 190, .14); }
:is(.elementor-page, .bp-landing) .stat__k { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pool-ink); }
:is(.elementor-page, .bp-landing) .stat__v { font-family: var(--font-display); font-size: clamp(24px, 2.3vw, 32px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; color: var(--ink); }
:is(.elementor-page, .bp-landing) .stat__d { font-size: 13.5px; line-height: 1.45; color: #4F6879; }
:is(.elementor-page, .bp-landing) .why--flip .benefits { margin-top: 28px; }
@media (max-width: 560px) {
  :is(.elementor-page, .bp-landing) .stat-row__in { grid-template-columns: minmax(0, 1fr); }
  :is(.elementor-page, .bp-landing) .stat + .stat { border-left: 0; border-top: 1px solid rgba(10, 118, 190, .14); }
}

/* Related services: image-top cards ---------------------------------------*/
:is(.elementor-page, .bp-landing) .rel-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(20px, 2.2vw, 30px); }
:is(.elementor-page, .bp-landing) .rel-card .svc-card__media.elementor-widget { aspect-ratio: 3 / 2; }
:is(.elementor-page, .bp-landing) .rel-card .svc-card__body { padding: clamp(22px, 2.2vw, 30px); }
:is(.elementor-page, .bp-landing) .rel-card h3 { font-size: clamp(20px, 1.8vw, 23px); line-height: 1.25; }
:is(.elementor-page, .bp-landing) .rel-card h3 a { color: inherit; }
:is(.elementor-page, .bp-landing) .rel-card h3 a:hover { color: var(--pool-ink); }
:is(.elementor-page, .bp-landing) :is(.rel-card, .guides--editorial .guide-card) .arrow-link { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
:is(.elementor-page, .bp-landing) .rel-also { margin-top: clamp(24px, 2.6vw, 34px); font-size: 16.5px; }
@media (max-width: 860px) {
  :is(.elementor-page, .bp-landing) .rel-cards { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  :is(.elementor-page, .bp-landing) .rel-card .svc-card__media.elementor-widget { aspect-ratio: 16 / 9; }
}

/* Guides: editorial cards ---------------------------------------------------*/
:is(.elementor-page, .bp-landing) .guides--editorial .guides__grid { gap: clamp(22px, 2.4vw, 32px); }
:is(.elementor-page, .bp-landing) .guides--editorial .guide-card__media.elementor-widget { aspect-ratio: 3 / 2; }
:is(.elementor-page, .bp-landing) .guides--editorial .svc-card__body { padding: clamp(22px, 2.2vw, 30px); }
:is(.elementor-page, .bp-landing) .guides--editorial .guide-card h3 { font-size: clamp(19.5px, 1.6vw, 21.5px); line-height: 1.3; }
@media (max-width: 1080px) and (min-width: 761px) {
  :is(.elementor-page, .bp-landing) .guides--editorial .guide-card:nth-child(3) .guide-card__media.elementor-widget { aspect-ratio: auto; }
}

/* FAQ: wider accordion, clearer open state ---------------------------------*/
:is(.elementor-page, .bp-landing) .faq { grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); }
@media (max-width: 960px) { :is(.elementor-page, .bp-landing) .faq { grid-template-columns: minmax(0, 1fr); } }
:is(.elementor-page, .bp-landing) .accordion .e-n-accordion-item { margin-bottom: 14px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
:is(.elementor-page, .bp-landing) .accordion .e-n-accordion-item .e-n-accordion-item-title-text { font-size: 18.5px; line-height: 1.36; }
:is(.elementor-page, .bp-landing) .accordion .e-n-accordion-item[open] {
  border-color: rgba(10, 130, 208, .5);
  box-shadow: inset 3px 0 0 var(--pool-500), 0 24px 50px -32px rgba(9, 60, 92, .5);
}
:is(.elementor-page, .bp-landing) .accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon {
  background: var(--pool-500);
  border-color: var(--pool-500);
  color: #FFFFFF;
}
:is(.elementor-page, .bp-landing) .accordion .e-n-accordion-item > .e-con p { font-size: 17px; line-height: 1.7; max-width: 72ch; }
@media (min-width: 761px) {
  :is(.elementor-page, .bp-landing) .accordion .e-n-accordion-item .e-n-accordion-item-title { padding: 26px 30px; }
  :is(.elementor-page, .bp-landing) .accordion .e-n-accordion-item > .e-con { padding: 0 30px 28px; }
}
@media (max-width: 760px) {
  :is(.elementor-page, .bp-landing) .accordion .e-n-accordion-item .e-n-accordion-item-title-text { font-size: 17px; }
  :is(.elementor-page, .bp-landing) .accordion .e-n-accordion-item > .e-con p { font-size: 16.5px; }
}

/* Final CTA: "what happens next" beside the form --------------------------*/
:is(.elementor-page, .bp-landing) .cta-next { margin-top: 28px; }
:is(.elementor-page, .bp-landing) .cta-next p { margin: 0; }
:is(.elementor-page, .bp-landing) .cta-next .cta-next__title { margin-bottom: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pool-ink); }
:is(.elementor-page, .bp-landing) .cta-next ol { list-style: none; counter-reset: nx; margin: 0; padding: 0; display: grid; gap: 12px; }
:is(.elementor-page, .bp-landing) .cta-next li { counter-increment: nx; position: relative; min-height: 30px; padding-left: 46px; font-size: 16.5px; line-height: 1.55; color: #4A6373; }
:is(.elementor-page, .bp-landing) .cta-next li::before {
  content: counter(nx);
  position: absolute;
  left: 0; top: -2px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--pool-500);
  color: #FFFFFF;
  font: 700 13px/30px var(--font-display);
  text-align: center;
}
:is(.elementor-page, .bp-landing) .cta-next b { color: var(--ink); }
:is(.elementor-page, .bp-landing) .finalcta--next .estimate-form {
  border-top: 4px solid var(--pool-400, #29B0E6);
  box-shadow: 0 40px 80px -40px rgba(8, 54, 84, .55), 0 1px 0 rgba(255, 255, 255, .9) inset;
}
:is(.elementor-page, .bp-landing) .finalcta--next .estimate-form h3 { font-size: 24px; }
:is(.elementor-page, .bp-landing) .finalcta--next .estimate-form .form-intro { font-size: 15px; }

:is(.elementor-page, .bp-landing) :is(.process-note, .process-step__text) a { color: var(--pool-300); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }