/* =========================================================
   Scale Web Pro — services.css
   (home services overview + individual service "blog" pages + get-started page)
   ========================================================= */

/* ---------- Home: services overview grid ---------- */
.services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:60px;border-radius:var(--radius);overflow:hidden}
.service{background:var(--surface);padding:38px;min-height:280px;position:relative;transition:.4s var(--ease);overflow:hidden;min-width:0;display:flex;flex-direction:column}
.service:hover{transform:translateY(-5px);z-index:2;box-shadow:inset 0 0 0 1px var(--accent)}
.service-num{font-size:9px;letter-spacing:.2em;color:var(--accent)}
.service-icon{position:absolute;right:38px;top:36px;font-size:22px;color:var(--accent);transition:.4s}
.service:hover .service-icon{transform:rotate(-8deg) scale(1.15)}
.service h3{font-family:var(--serif);font-size:32px;font-weight:600;margin-top:30px}
.service p{color:var(--muted);font-size:13px;line-height:1.8;max-width:450px;margin-top:12px;flex:1}
.service-link{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);transition:gap .2s ease,color .2s ease}
.service-link:hover{gap:12px;color:var(--accent-2)}
/* wider, more obvious click target + underline affordance so the top-of-funnel
   grid clicks (services overview -> individual service page) don't get lost */
.service-link{padding-bottom:2px;border-bottom:1px solid transparent}
.service-link:hover{border-bottom-color:currentColor}

/* ---------- Home: service teaser cards (generic .build-card, reusable) ---------- */
.build-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px;align-items:stretch}
.build-card{min-width:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 28px rgba(20,16,12,.035);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s ease;display:flex;flex-direction:column}
.build-card:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(20,16,12,.08);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.build-card img{display:block;width:100%;height:200px;object-fit:cover;object-position:center;background:var(--soft);filter:saturate(.82) contrast(.98);transition:transform .55s var(--ease),filter .4s ease}
.build-card:hover img{transform:scale(1.025);filter:saturate(.96) contrast(1)}
.build-card .card-body{padding:24px 23px 25px;display:flex;flex-direction:column;flex:1}
.build-card h3{font-family:var(--serif);font-size:27px;line-height:1.05;letter-spacing:-.02em;margin-bottom:10px}
.build-card p{font-size:13px;line-height:1.75;color:var(--muted);flex:1}
.build-card .build-card-link{margin-top:16px}

.build-card-link{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);transition:gap .2s ease,color .2s ease}
.build-card-link:hover{gap:12px;color:var(--accent-2)}

/* ---------- Service ("blog") page layout ---------- */
.service-hero{padding:170px 0 60px}
.service-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);gap:clamp(30px,6vw,60px);align-items:center}
.service-hero-media{width:100%;min-height:360px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);position:relative}
.service-hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(.98)}
.service-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.service-meta span{border:1px solid var(--line);border-radius:20px;padding:7px 13px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.article{max-width:840px}
.article-lede{font-family:var(--serif);font-size:24px;line-height:1.45;color:var(--ink);margin-top:8px}
.article h2{font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);font-weight:600;letter-spacing:-.02em;margin-top:50px;margin-bottom:16px}
.article p{color:var(--muted);font-size:14px;line-height:1.9;margin-top:14px}
.article p+p{margin-top:14px}
.article ul{margin-top:16px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.article ul li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--muted);line-height:1.7}
.article ul li i{color:var(--accent);margin-top:4px}

.service-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(30px,6vw,70px);align-items:start}
.service-sidebar{position:sticky;top:120px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:26px;box-shadow:0 12px 40px rgba(20,16,12,.035);transition:box-shadow .3s ease,border-color .3s ease}
.service-sidebar h3{font-family:var(--serif);font-size:22px;font-weight:600;margin-bottom:14px}
.service-sidebar p{font-size:12px;color:var(--muted);line-height:1.8;margin-bottom:18px}
.service-sidebar .btn{width:100%}
.service-sidebar-list{list-style:none;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.service-sidebar-list li a{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted)}
.service-sidebar-list li a:hover{color:var(--accent)}
.service-sidebar-list li a i{width:14px;color:var(--accent)}

/* -- conversion: the sidebar is the primary lead-capture surface on a service
   page, so give it a little more presence than a plain content box, and put
   a friction-reducing line directly under the button. -- */
.service-sidebar{border-color:color-mix(in srgb,var(--accent) 22%,var(--line))}
.service-sidebar:hover,.service-sidebar:focus-within{box-shadow:0 18px 50px rgba(20,16,12,.08)}
.service-sidebar .btn{position:relative;animation:sw-cta-pulse 2.8s ease-in-out infinite}
.service-sidebar-trust{margin-top:12px;text-align:center;font-size:10px;color:var(--muted);line-height:1.6}
.service-sidebar-trust i{color:var(--accent);margin-right:4px}

.step-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:24px}
.step-card{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:var(--surface);transition:transform .25s var(--ease),box-shadow .25s ease,border-color .25s ease}
.step-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,16,12,.06);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.step-card .step-number{font-family:var(--serif);font-size:34px;color:var(--accent);line-height:1}
.step-card h4{font-size:13px;margin-top:14px;letter-spacing:.02em}
.step-card p{font-size:12px;color:var(--muted);line-height:1.7;margin-top:8px}

.feature-list{display:flex;flex-direction:column;gap:18px;margin-top:24px}
.feature-row{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:var(--surface)}
.feature-row-icon{width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:18px;color:var(--accent)}
.feature-row strong{display:block;font-size:14px;margin-bottom:6px}
.feature-row p{font-size:12px;color:var(--muted);line-height:1.7;margin-top:0}

/* ---------- Related services ---------- */
.related-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px}
.related-service-card{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:var(--surface);transition:transform .25s var(--ease),box-shadow .25s ease}
.related-service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.related-service-card i{font-size:20px;color:var(--accent)}
.related-service-card h4{font-family:var(--serif);font-size:20px;font-weight:600;margin-top:14px}
.related-service-card p{font-size:12px;color:var(--muted);line-height:1.7;margin-top:8px}

/* ---------- Brokerage identity-theft example / review components ---------- */
.theft-greeting{margin-top:22px;font-family:var(--serif);font-size:22px;color:var(--ink)}
.theft-example-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:30px}
.theft-example-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;position:relative}
.theft-example-tag{display:inline-block;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:5px 8px;margin-bottom:16px}
.theft-example-domain{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:10px}
.theft-example-domain i{color:var(--accent)}
.theft-example-card h3{font-family:var(--serif);font-size:24px;font-weight:600}
.theft-example-category{color:var(--muted);font-size:12px;margin-top:4px}
.theft-example-badge{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8f1724;background:#fff0f1;border:1px solid #d9a0a7;border-radius:20px;padding:6px 12px}
.theft-example-link{display:flex;align-items:center;gap:8px;margin-top:20px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.theft-example-link.is-disabled{opacity:.55;cursor:not-allowed}
.theft-example-caption{margin-top:20px;font-size:12px;color:var(--muted)}
.theft-example-disclaimer{margin-top:8px;font-size:10px;color:var(--muted);font-style:italic}

.theft-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:30px}
.review-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;position:relative}
.review-card-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.review-card-head i{font-size:22px;color:var(--accent)}
.review-card-head strong{display:block;font-size:12px}
.review-card-head small{display:block;color:var(--muted);font-size:9px;margin-top:2px}
.review-card-head .theft-example-tag{margin-left:auto;margin-bottom:0}
.review-stars{color:var(--accent);font-size:12px;letter-spacing:2px;margin-bottom:10px}
.review-card p{font-family:var(--serif);font-size:17px;line-height:1.3;color:var(--ink);margin-top:0}
.review-author{display:flex;align-items:center;gap:10px;margin-top:18px}
.review-avatar{width:32px;height:32px;border-radius:50%;background:var(--soft);border:1px solid var(--line);display:grid;place-items:center;font-size:13px;color:var(--muted)}
.review-author strong{display:block;font-size:11px}
.review-author small{display:block;color:var(--muted);font-size:9px;margin-top:2px}
.review-flag{display:flex;align-items:center;gap:7px;margin-top:16px;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8f1724}

.theft-checklist{list-style:none;display:flex;flex-direction:column;gap:13px;margin-top:18px}
.theft-checklist li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--muted);line-height:1.6}
.theft-checklist li i{color:var(--accent);margin-top:3px}
.theft-checklist--center{max-width:520px;margin:26px auto 0;text-align:left}

/* ---------- .services-cttta (full-bleed, high-contrast call-to-action used
   at the bottom of service pages: colored gradient section, copy +
   checklist on the left, a floating white action card with the primary
   button and direct contact links on the right) ---------- */
.services-cttta{
  position:relative;
  overflow:hidden;
  padding:clamp(70px,9vw,120px) 0;
  background:
    radial-gradient(circle at 8% 10%, rgba(255,255,255,.16), transparent 42%),
    radial-gradient(circle at 92% 88%, rgba(0,0,0,.32), transparent 55%),
    linear-gradient(135deg,#c72d3d 0%,#8f1724 48%,#3a0a10 100%);
  color:#fff;
}
.services-cttta:before,.services-cttta:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.services-cttta:before{width:640px;height:640px;border:1px solid rgba(255,255,255,.14);left:-200px;top:-260px}
.services-cttta:after{width:420px;height:420px;border:1px solid rgba(255,255,255,.10);right:-140px;bottom:-180px}
.services-cttta .container{position:relative;z-index:1}
.services-cttta-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(30px,6vw,70px);align-items:start}

.services-cttta-kicker{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:#ffe3e5;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.26);border-radius:20px;padding:8px 16px}
.services-cttta-title{font-family:var(--serif);font-size:clamp(36px,4.6vw,56px);line-height:1.04;font-weight:600;letter-spacing:-.02em;margin-top:22px;color:#fff}
.services-cttta-title em{color:#ffc4c9;font-style:italic}
.services-cttta-text{font-size:14px;line-height:1.9;color:rgba(255,255,255,.85);margin-top:20px;max-width:520px}
.services-cttta-list{list-style:none;display:flex;flex-direction:column;gap:13px;margin-top:28px}
.services-cttta-list li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:#fff;line-height:1.6}
.services-cttta-list li i{color:#8f1724;background:#fff;width:19px;height:19px;flex:0 0 19px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;margin-top:2px}

/* -- action card: this is the single highest-value pixel area on the page.
   give it a visible "lift off the page" presence, a focus/hover state, and
   a low-key trust row right under the button so clicking feels low-risk. -- */
.services-cttta-action{
  background:#fff;color:var(--ink);border-radius:var(--radius);
  padding:clamp(26px,3vw,36px);
  box-shadow:0 30px 70px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.5);
  transition:transform .3s var(--ease),box-shadow .3s ease;
}
.services-cttta-action:hover,.services-cttta-action:focus-within{
  transform:translateY(-3px);
  box-shadow:0 36px 84px rgba(0,0,0,.42);
}
.services-cttta-action-tag{display:inline-flex;align-items:center;gap:7px;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8f1724;background:#fff0f1;border:1px solid #f0c3c8;border-radius:20px;padding:7px 12px}
.services-cttta-action h3{font-family:var(--serif);font-size:26px;font-weight:600;margin-top:16px}
.services-cttta-action>p{font-size:12px;color:var(--muted);line-height:1.8;margin-top:8px}
.services-cttta-action .btn{width:100%;margin-top:20px;position:relative;animation:sw-cta-pulse 2.8s ease-in-out infinite}
.services-cttta-divider{display:flex;align-items:center;gap:10px;margin:22px 0 12px;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.services-cttta-divider:before,.services-cttta-divider:after{content:"";flex:1;height:1px;background:var(--line)}
.services-cttta-contact-row{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px}
.services-cttta-contact{width:54px;height:54px;flex:0 0 54px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--accent);font-size:20px;transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease}
.services-cttta-contact:hover,.services-cttta-contact:focus-visible{transform:translateY(-2px);background:var(--soft);border-color:var(--accent);color:var(--accent)}
.services-cttta-contact-row .services-cttta-contact:first-child{color:#20a65a}
.services-cttta-contact-row .services-cttta-contact:first-child:hover,.services-cttta-contact-row .services-cttta-contact:first-child:focus-visible{color:#20a65a;border-color:#20a65a}
html[data-theme="dark"] .services-cttta-contact{background:#181716;border-color:#34302c}
html[data-theme="dark"] .services-cttta-contact:hover,html[data-theme="dark"] .services-cttta-contact:focus-visible{background:#211f1d}

/* trust row: drop this markup directly under the .btn inside .services-cttta-action
   (and optionally under the sidebar button too, using .service-sidebar-trust):
   <div class="services-cttta-trust">
     <span><i class="fa-solid fa-clock" aria-hidden="true"></i> Replies within 24 hrs</span>
     <span><i class="fa-solid fa-lock" aria-hidden="true"></i> No obligation</span>
     <span><i class="fa-solid fa-shield-halved" aria-hidden="true"></i> Free, no-pressure review</span>
   </div> */
.services-cttta-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 16px;margin-top:16px}
.services-cttta-trust span{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted)}
.services-cttta-trust span i{color:var(--accent);font-size:11px}

/* shared pulse used to draw the eye to the one action that matters on the
   page, without turning every button into a light show */
@keyframes sw-cta-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(143,23,36,.28)}
  50%{box-shadow:0 0 0 9px rgba(143,23,36,0)}
}
.services-cttta-action .btn{animation-name:sw-cta-pulse}
@media(prefers-reduced-motion:reduce){
  .service-sidebar .btn,.services-cttta-action .btn{animation:none}
}

html[data-theme="light"] .services-cttta{background:radial-gradient(circle at 8% 10%,rgba(255,255,255,.92),transparent 38%),radial-gradient(circle at 92% 88%,rgba(143,23,36,.10),transparent 52%),linear-gradient(135deg,#fff8f8 0%,#f6e4e5 48%,#ead0d3 100%);color:var(--ink)}
html[data-theme="light"] .services-cttta:before,html[data-theme="light"] .services-cttta:after{border-color:rgba(143,23,36,.12)}
html[data-theme="light"] .services-cttta-kicker{color:#8f1724;background:rgba(143,23,36,.06);border-color:rgba(143,23,36,.18)}
html[data-theme="light"] .services-cttta-title{color:#11100f}
html[data-theme="light"] .services-cttta-title em{color:#8f1724}
html[data-theme="light"] .services-cttta-text{color:#5f5855}
html[data-theme="light"] .services-cttta-list li{color:#24201f}
html[data-theme="light"] .services-cttta-action{background:#fff;border-color:rgba(143,23,36,.14);box-shadow:0 30px 70px rgba(83,18,25,.16)}
html[data-theme="dark"] .services-cttta{background:radial-gradient(circle at 8% 10%,rgba(255,255,255,.10),transparent 42%),radial-gradient(circle at 92% 88%,rgba(0,0,0,.45),transparent 55%),linear-gradient(135deg,#4b0c14 0%,#24070b 52%,#0d0808 100%);color:#fff}
html[data-theme="dark"] .services-cttta-action{background:#181716;border-color:#34302c;box-shadow:0 30px 70px rgba(0,0,0,.55)}

@media(max-width:900px){
  .services-cttta-grid{grid-template-columns:1fr}
  .services-cttta-action{order:2}
}

/* ---------- Get Started page ---------- */
.get-started-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(35px,7vw,80px);align-items:start}
.get-started-side h1{font-family:var(--serif);font-size:clamp(38px,5vw,54px);font-weight:600;letter-spacing:-.02em;line-height:1}
.get-started-side .section-copy{margin-top:20px}
.get-started-steps{list-style:none;margin-top:34px;display:flex;flex-direction:column;gap:20px}
.get-started-steps li{display:flex;gap:14px;align-items:flex-start}
.get-started-steps .num{width:30px;height:30px;flex:0 0 30px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);display:grid;place-items:center;font-family:var(--serif);font-size:14px}
.get-started-steps strong{display:block;font-size:13px}
.get-started-steps p{font-size:12px;color:var(--muted);margin-top:4px}
.get-started-form{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:34px;box-shadow:0 20px 60px rgba(20,16,12,.05)}
.phone-row{display:grid;grid-template-columns:130px 1fr;gap:8px}

@media(max-width:1100px){
  .service-layout{grid-template-columns:1fr}
  .service-sidebar{position:static}
  .related-services{grid-template-columns:1fr 1fr}
}

/* On phones the sticky bottom CTA bar already offers "Get Started" +
   WhatsApp, so the mid-article "Talk to us" card is a redundant repeat
   of the same two actions — hide it there instead of showing it twice. */
@media(max-width:820px){
  .service-sidebar{display:none}
}

@media(max-width:820px){
  .services-grid,.build-grid{grid-template-columns:1fr}
  .service-hero-grid{grid-template-columns:1fr}
  .service-hero{padding:150px 0 40px}
  .theft-example-grid,.theft-review-grid{grid-template-columns:1fr}
  .related-services{grid-template-columns:1fr}
  .get-started-grid{grid-template-columns:1fr}
  .get-started-form{padding:24px}
  /* leave room so the sticky mobile CTA bar never covers the last bit of
     content — but only on pages that actually render that bar. Without this
     scoping, every other page (get-started, contact, about, home) got a
     stray ~76px empty gap at the bottom on phones, since the CTA element
     itself is display:none there. */
}

@media(max-width:600px){
  .service{padding:30px 24px;min-height:0}
  .service h3{font-size:28px}
  .build-card img{height:190px}
  .phone-row{grid-template-columns:1fr}
} 
@media(max-width:600px){
  .services-cttta-contact-row{justify-content:center;gap:18px}
  .services-cttta-contact{width:58px;height:58px;flex-basis:58px;font-size:21px}
}