/* ==========================================================================
   Real Estate SEO Maryland landing page (/real-estate-seo/)
   Loaded only on page-templates/niche-real-estate-seo.php.
   Uses the theme's existing design tokens (see :root in style.css) so the
   page reads as part of the site, not a bolt-on.
   ========================================================================== */
.lp-page{ overflow-x:clip; }
.lp-page h1, .lp-page h2, .lp-page h3{ overflow-wrap:break-word; }
.lp-page .btn{ white-space:normal; text-align:center; justify-content:center; }

/* ---- Shared section scaffolding ---- */
.lp-section{ padding:clamp(60px,8vw,104px) 0; }
.lp-bg-soft{ background:var(--bg-soft); }
.lp-dark{ background:var(--navy); color:#fff; }
.lp-head{ max-width:720px; margin:0 auto clamp(32px,5vw,56px); text-align:center; }
.lp-head .section-title{ margin-bottom:14px; }
.lp-head .section-sub{ margin:0; }
.lp-dark .lp-head .section-title, .lp-head-light .section-title{ color:#fff; }
.lp-dark .lp-head .section-sub, .lp-head-light .section-sub{ color:rgba(255,255,255,.74); }
.lp-narrow{ max-width:820px; }
.lp-fineprint{ font-size:13px; line-height:1.6; color:rgba(255,255,255,.66); max-width:720px; margin:28px auto 0; text-align:center; }
.lp-note{ font-size:13px; color:var(--text-muted); max-width:56ch; margin:18px 0 0; }
.lp-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.lp-editor-hint{ border:1px dashed #bdb7a8; border-radius:10px; padding:14px 18px; font-size:14px; margin:0; }

/* ---- Card grids ---- */
.lp-grid{ display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.lp-grid-4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.lp-card{ position:relative; }
.lp-card h3{ font-size:19px; margin:0 0 10px; }
.lp-card p{ margin:0; font-size:15px; }
.lp-card-num{ position:absolute; top:22px; right:26px; font-family:var(--font-display); font-weight:800; font-size:22px; color:#cfc9ba; }
.lp-engine .lp-card{ display:flex; flex-direction:column; }
.lp-engine .lp-card > p:not(.lp-solves){ margin-bottom:16px; }
.lp-solves{ margin-top:auto !important; padding-top:12px; border-top:1px solid var(--border); font-size:13.5px !important; color:var(--text-muted); }
.lp-solves span{ color:var(--accent); font-weight:700; }
.lp-quotes{ margin-top:30px; }

/* Bullet points inside cards (optional, owner-editable) */
.lp-points{ list-style:none; margin:14px 0 0; padding:0; }
.lp-points li{ position:relative; padding:5px 0 5px 24px; font-size:14.5px; line-height:1.5; color:var(--text-muted); }
.lp-points li::before{ content:''; position:absolute; left:2px; top:11px; width:10px; height:6px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg); }

/* Extra content slot (page editor / Elementor). Elementor sections manage their own width. */
.lp-extra{ padding:clamp(40px,6vw,72px) 0; }
.lp-extra:has(> .elementor){ padding:0; }
.lp-extra-body{ max-width:860px; }
.lp-extra-body > *:first-child{ margin-top:0; }
.lp-extra-body > *:last-child{ margin-bottom:0; }
.lp-extra-body img, .lp-extra-body iframe, .lp-extra-body video{ max-width:100%; height:auto; border-radius:12px; }
.lp-extra-body h2, .lp-extra-body h3{ margin:1.6em 0 .6em; }

/* Engine: 7 cards read as one connected system, so lock to 3/2/1 columns
   and let an odd final card span the full row instead of orphaning it. */
@media (min-width:961px){
  .lp-engine{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lp-engine > :last-child:nth-child(3n+1){ grid-column:1 / -1; }
}
@media (min-width:641px) and (max-width:960px){
  .lp-engine{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lp-engine > :last-child:nth-child(odd){ grid-column:1 / -1; }
}
@media (max-width:640px){ .lp-engine{ grid-template-columns:minmax(0,1fr); } }

/* ---- 1. Hero ---- */
.lp-hero{ background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%); padding:26px 0 clamp(56px,8vw,96px); overflow:hidden; }
.lp-hero-grid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(32px,5vw,72px); align-items:center; }
.lp-hero h1{ font-size:clamp(34px,4.7vw,54px); margin:0 0 20px; }
.lp-lead{ font-size:18px; max-width:56ch; margin:0 0 28px; }
.lp-breadcrumb ol{ display:flex; flex-wrap:wrap; gap:4px 8px; list-style:none; margin:0 0 26px; padding:0; font-size:13px; color:var(--text-muted); }
.lp-breadcrumb li + li::before{ content:'/'; margin-right:8px; }
.lp-breadcrumb a{ color:var(--accent); }
.lp-breadcrumb a:hover{ text-decoration:underline; }
.lp-hero-img{ width:100%; height:auto; border-radius:20px; box-shadow:var(--shadow-lg); }

/* Signature visual: search demand -> lead, lighting up node by node */
.lp-flow-card{ background:var(--navy); color:#fff; border-radius:20px; padding:28px 30px 18px; box-shadow:var(--shadow-lg); }
.lp-flow-title{ color:rgba(255,255,255,.72); font-weight:600; font-size:14px; margin:0 0 14px; }
.lp-flow-list{ list-style:none; margin:0; padding:0; }
.lp-flow-list li{ position:relative; display:flex; align-items:center; gap:16px; padding:13px 0; }
.lp-flow-list li:not(:last-child)::after{ content:''; position:absolute; left:6px; top:calc(50% + 12px); height:100%; width:2px; background:rgba(255,255,255,.16); }
.lp-flow-dot{ position:relative; z-index:1; flex:0 0 14px; width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.4); background:var(--navy); }
.lp-flow-list li:last-child .lp-flow-dot{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 5px rgba(192,63,39,.25); }
.lp-flow-text{ font-size:16px; font-weight:600; color:#fff; }
@media (min-width:961px) and (hover:hover){
  .lp-flow-card{ transform:perspective(1400px) rotateY(-5deg) rotateX(1.5deg); transition:transform var(--dur-slow) var(--ease); }
  .lp-flow-card:hover{ transform:none; }
}

/* ---- 3. Old way vs approach ---- */
.lp-compare{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:stretch; }
.lp-panel{ border-radius:20px; padding:clamp(24px,3.4vw,40px); }
.lp-panel-old{ background:#fff; border:2px dashed #cfc9ba; }
.lp-panel-new{ background:var(--navy); color:#fff; box-shadow:var(--shadow-lg); }
.lp-panel-title{ font-size:22px; margin:0 0 26px; }
.lp-panel-new .lp-panel-title{ color:#fff; }
.lp-chain{ list-style:none; margin:0; padding:0; counter-reset:lp-c; }
.lp-chain li{ position:relative; counter-increment:lp-c; padding:5px 0 26px 54px; font-size:17px; font-weight:600; line-height:1.35; }
.lp-chain li:last-child{ padding-bottom:0; }
.lp-chain li::before{ content:counter(lp-c); position:absolute; left:0; top:0; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700; }
.lp-chain li:not(:last-child)::after{ content:''; position:absolute; left:17px; top:40px; bottom:4px; width:0; }
.lp-chain-old li{ color:var(--text-muted); }
.lp-chain-old li::before{ background:var(--bg-soft); border:1px dashed #a9a393; color:var(--text-muted); }
.lp-chain-old li:not(:last-child)::after{ border-left:2px dashed #cfc9ba; }
.lp-chain-new li{ color:#fff; }
.lp-chain-new li::before{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.38); color:#fff; }
.lp-chain-new li:not(:last-child)::after{ border-left:2px solid rgba(255,255,255,.2); }
.lp-chain-new li:last-child::before{ background:var(--accent); border-color:var(--accent); }

/* ---- 5. Maryland markets ---- */
.lp-cities{ list-style:none; margin:0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); }
.lp-city{ display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border:1px solid rgba(255,255,255,.16); border-radius:12px; background:rgba(255,255,255,.04); }
.lp-city-pin{ flex:0 0 auto; color:var(--accent-light); margin-top:1px; }
.lp-city-pin .az-icon svg{ width:20px; height:20px; }
.lp-city-body{ min-width:0; }
.lp-city-name{ display:block; font-weight:600; font-size:16px; color:#fff; }
a.lp-city-name{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.4); }
a.lp-city-name:hover{ text-decoration-color:#fff; }
.lp-city-note{ display:block; font-size:13px; color:rgba(255,255,255,.68); margin-top:2px; }
.lp-dark a:focus-visible{ outline-color:#fff; }

/* ---- 6/7. Funnels ---- */
.lp-funnels-grid{ display:grid; gap:clamp(48px,7vw,80px); grid-template-columns:minmax(0,1fr); }
.lp-funnels .lp-head{ margin-bottom:30px; }
@media (min-width:961px){
  .lp-funnels.is-pair .lp-funnels-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(36px,5vw,72px); }
  .lp-funnels.is-pair .lp-head{ text-align:left; margin-left:0; }
}
.lp-funnel-wrap{ min-width:0; }
@supports (grid-template-rows: subgrid){
  @media (min-width:961px){
    .lp-funnels.is-pair .lp-funnels-grid{ grid-template-rows:auto auto; }
    .lp-funnels.is-pair .lp-funnel-wrap{ display:grid; grid-template-rows:subgrid; grid-row:span 2; }
  }
}
.lp-funnel{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; align-items:center; gap:12px; }
.lp-funnel-step{ position:relative; width:var(--w); padding:14px 18px; text-align:center; background:#fff; border:1px solid var(--border); border-radius:10px; }
.lp-funnel-step:not(:last-child)::after{ content:''; position:absolute; left:calc(50% - 1px); top:100%; width:2px; height:12px; background:#bdb7a8; }
.lp-funnel-label{ display:block; font-weight:600; font-size:15.5px; color:var(--text); overflow-wrap:anywhere; }
.lp-funnel-step.is-query .lp-funnel-label{ font-style:italic; font-weight:500; }
.lp-funnel-sub{ display:block; margin-top:2px; font-size:13px; color:var(--text-muted); }
.lp-funnel-step.is-first{ background:var(--navy); border-color:var(--navy); }
.lp-funnel-step.is-first .lp-funnel-label{ color:#fff; }
.lp-funnel-step.is-first .lp-funnel-sub{ color:rgba(255,255,255,.72); }
.lp-funnel-step.is-last{ background:var(--accent); border-color:var(--accent); }
.lp-funnel-step.is-last .lp-funnel-label{ color:#fff; }
.lp-funnel-step.is-last .lp-funnel-sub{ color:rgba(255,255,255,.85); }

/* ---- 8. One piece of the puzzle ---- */
.lp-pieces{ list-style:none; margin:0 auto; padding:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px 8px; max-width:920px; }
.lp-piece-item{ display:flex; align-items:center; gap:8px; }
.lp-chip{ display:inline-block; background:var(--navy); color:#fff; padding:10px 20px; border-radius:100px; font-weight:700; font-size:15px; }
.lp-plus{ color:var(--accent); font-weight:800; font-size:20px; line-height:1; }
.lp-equals{ text-align:center; margin:38px auto 0; max-width:760px; font-family:var(--font-display); font-size:clamp(20px,2.6vw,28px); line-height:1.25; color:var(--navy); }
.lp-equals span{ color:var(--accent); margin-right:6px; }
.lp-equals strong{ font-weight:700; }

/* ---- 9. Growth stack ---- */
.lp-stack{ list-style:none; margin:0 auto; padding:0; max-width:920px; display:flex; flex-direction:column; gap:30px; }
.lp-layer{ position:relative; display:grid; grid-template-columns:230px minmax(0,1fr); gap:20px; align-items:center; background:#fff; border:1px solid var(--border); border-radius:14px; padding:22px 26px; }
.lp-layer:not(:last-child)::after{ content:''; position:absolute; left:calc(50% - 1px); top:100%; width:2px; height:22px; background:var(--accent); }
.lp-layer:not(:last-child)::before{ content:''; position:absolute; left:calc(50% - 6px); top:calc(100% + 22px); width:0; height:0; border:6px solid transparent; border-top:8px solid var(--accent); border-bottom:0; }
.lp-layer-head{ display:flex; align-items:center; gap:14px; }
.lp-layer-head h3{ margin:0; font-size:20px; }
.lp-layer-num{ font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--accent); }
.lp-tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.lp-tags li{ background:var(--bg-soft); border:1px solid var(--border); border-radius:100px; padding:6px 14px; font-size:14px; font-weight:600; color:var(--text); }
@media (max-width:720px){ .lp-layer{ grid-template-columns:minmax(0,1fr); gap:14px; padding:20px; } }

/* ---- 10. Before / after ---- */
.lp-ba{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.lp-ba-col{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:clamp(24px,3vw,36px); }
.lp-ba-after{ border:2px solid var(--navy); box-shadow:var(--shadow); }
.lp-ba-col h3{ font-size:22px; margin:0 0 14px; }
.lp-ba-col ul{ list-style:none; margin:0; padding:0; }
.lp-ba-col li{ position:relative; padding:13px 0 13px 36px; border-top:1px solid var(--border); font-weight:500; }
.lp-ba-before li{ color:var(--text-muted); }
.lp-ba-col li::before{ content:'\00d7'; content:'\00d7' / ''; position:absolute; left:0; top:13px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-weight:800; line-height:1; background:var(--bg-soft); color:var(--text-muted); }
.lp-ba-after li::before{ content:'\2713'; content:'\2713' / ''; background:var(--navy); color:#fff; font-size:12px; }
@media (max-width:760px){ .lp-ba{ grid-template-columns:minmax(0,1fr); } }

/* ---- 11. Market snapshot (only when real stats are entered) ---- */
.lp-stats{ display:grid; gap:28px; margin:0; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); text-align:center; }
.lp-stat{ display:flex; flex-direction:column-reverse; gap:6px; }
.lp-stat dt, .lp-stat dd{ margin:0; }
.lp-stat-num{ font-family:var(--font-display); font-weight:800; font-size:clamp(32px,4.4vw,48px); line-height:1.1; color:#fff; }
.lp-stat-label{ font-size:14px; color:rgba(255,255,255,.74); }

/* ---- 14. Who we help ---- */
.lp-who{ list-style:none; margin:0; padding:0; display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); }
.lp-who-item{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:22px 16px; text-align:center; }
.lp-who-icon{ display:inline-flex; color:var(--accent); margin-bottom:10px; }
.lp-who-icon .az-icon svg{ width:30px; height:30px; }
.lp-who-item h3{ margin:0; font-size:16px; letter-spacing:0; }

/* ---- Related services (internal links) ---- */
.lp-related{ list-style:none; margin:0; padding:0; display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.lp-related li{ display:flex; }
.lp-related-link{ position:relative; display:grid; align-content:start; gap:4px; width:100%; padding:22px 52px 22px 24px; background:#fff; border:1px solid var(--border); border-radius:14px; transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.lp-related-link:hover{ border-color:var(--navy); box-shadow:var(--shadow); }
.lp-related-label{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--navy); }
.lp-related-text{ font-size:14px; color:var(--text-muted); }
.lp-related-arrow{ position:absolute; right:22px; top:22px; color:var(--accent); transition:transform var(--dur-fast) var(--ease); }
.lp-related-link:hover .lp-related-arrow{ transform:translateX(4px); }

/* ---- 15. FAQ ---- */
.lp-faq-q{ margin:0; font-size:inherit; line-height:inherit; letter-spacing:0; font-family:var(--font); }
.lp-faq .faq-q{ font-size:17px; gap:16px; }
.lp-faq .faq-item:first-child{ border-top:1px solid var(--border); }
.lp-faq .faq-item.open .faq-a{ max-height:1500px; } /* owner-edited answers may be long */

/* ---- 16. Primary CTA ---- */
.lp-cta1-grid{ display:grid; gap:clamp(32px,5vw,64px); grid-template-columns:minmax(0,1fr); align-items:center; }
.lp-cta1-grid:not(.has-form){ max-width:760px; text-align:center; }
.lp-cta1-grid:not(.has-form) .lp-actions{ justify-content:center; }
.lp-cta1-copy .section-title{ margin-bottom:14px; }
.lp-cta1-copy .section-sub{ margin-bottom:26px; }
.lp-cta1-form .lead-form h3{ margin:0 0 18px; font-size:22px; }
@media (min-width:961px){ .lp-cta1-grid.has-form{ grid-template-columns:minmax(0,1fr) minmax(0,.9fr); } }

/* ---- 17. Final CTA ---- */
.lp-final .btn-outline.lp-btn-ondark{ color:#fff; border-color:rgba(255,255,255,.45); }
.lp-final .btn-outline.lp-btn-ondark:hover{ background:#fff; color:var(--navy); border-color:#fff; }
.lp-contact{ margin-top:36px; padding-top:26px; border-top:1px solid rgba(255,255,255,.18); }
.lp-contact-title{ font-size:14px; color:rgba(255,255,255,.72); margin:0 0 10px; }
.lp-contact li{ overflow-wrap:anywhere; }
.lp-contact ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:center; color:rgba(255,255,255,.9); font-size:15px; }
.lp-contact a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.lp-final a:focus-visible{ outline-color:#fff; }

/* ---- Motion: ONE orchestrated moment per visual, triggered when it scrolls
   into view. Content is fully visible without JS (the hidden start state only
   applies once landing-page.js has added .lp-anim to <html>). ---- */
@keyframes lp-rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes lp-dot{ to{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 5px rgba(192,63,39,.25); } }
.lp-anim [data-lp-live]:not(.is-live) :is(.lp-chain li, .lp-funnel-step, .lp-layer, .lp-flow-list li){ opacity:0; }
[data-lp-live].is-live :is(.lp-chain li, .lp-funnel-step, .lp-layer){ animation:lp-rise .55s var(--ease) both; animation-delay:calc(var(--i,0) * 80ms); }
[data-lp-live].is-live .lp-flow-list li{ animation:lp-rise .5s var(--ease) both; animation-delay:calc(var(--i,0) * 110ms); }
[data-lp-live].is-live .lp-flow-list li:not(:last-child) .lp-flow-dot{ animation:lp-dot .35s var(--ease) both; animation-delay:calc(var(--i,0) * 320ms + 450ms); }

/* ---- Sticky mobile CTA (shared bar, defined in style.css): the longer
   landing-page label must wrap rather than push past the screen edge ---- */
.sticky-mobile-cta .btn{ min-width:0; white-space:normal; line-height:1.2; padding-left:12px; padding-right:12px; }

/* ---- Responsive ---- */
@media (max-width:960px){
  .lp-hero-grid{ grid-template-columns:minmax(0,1fr); }
  .lp-compare{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px){
  .lp-actions .btn{ width:100%; }
  .lp-lead{ font-size:17px; }
  .lp-flow-card{ padding:22px 22px 12px; }
  .lp-funnel-step{ padding:12px 14px; }
}

@media (prefers-reduced-motion: reduce){
  .lp-page *, .lp-page *::before, .lp-page *::after{ animation:none !important; transition-duration:0s !important; }
  .lp-anim [data-lp-live] :is(.lp-chain li, .lp-funnel-step, .lp-layer, .lp-flow-list li){ opacity:1 !important; }
  .lp-flow-card{ transform:none !important; }
}