/**
 * Service (pillar / cluster), About and Disclaimer pages.
 * Loaded after /blog/blog.css, which supplies tokens, nav, hero, prose,
 * charts, tables, FAQ and footer. Everything here mirrors homepage patterns:
 * dark bands, conic orange/acid hover borders, gradient process cards.
 */
@property --border-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes borderSpin{to{--border-angle:360deg}}

/* ---------- Hero ---------- */
.svc-hero .post-hero-content{padding-bottom:8vh}
.svc-hero h1{max-width:980px}
.svc-lede{margin-top:22px;max-width:660px;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:rgba(255,255,255,.86)}
.svc-hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn-accent{background:var(--orange);color:#fff}
.btn-accent .hover-bg{background:#fff}
.btn-accent:hover .btn-text{color:var(--ink)}
.btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.btn-outline .hover-bg{background:#fff}
.btn-outline:hover .btn-text{color:var(--ink)}
.svc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.svc-chips span{font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(10,14,12,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:rgba(255,255,255,.9)}

/* ---------- Bands ---------- */
.band{padding:84px 0}
.band + .band{padding-top:12px}
.band-dark,.band-steps{background:#0d0d0d;color:#fff;padding:96px 0!important;margin:40px 0}
.band-dark + .band,.band-steps + .band{padding-top:84px}
.band-head{max-width:760px;margin-bottom:34px}
.band-head .eyebrow{margin-bottom:12px}
.band-head h2{font-size:clamp(30px,3.6vw,52px);line-height:1.04;letter-spacing:-.02em}
.band-head p{margin-top:16px;font-size:17px;line-height:1.6;color:var(--muted)}
.band-dark .band-head p,.band-steps .band-head p{color:rgba(255,255,255,.72)}
.svc-prose{max-width:760px;margin:0 auto}
.band-prose .svc-prose.post-body{padding-bottom:0}
.svc-prose.post-body > h2:first-child{margin-top:0}
.svc-prose.post-body h2{font-size:clamp(28px,3.2vw,42px);line-height:1.08;letter-spacing:-.015em}

/* ---------- Cards (homepage stat-card language) ---------- */
.svc-cards{display:grid;gap:14px}
.svc-cards.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.svc-cards.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.svc-cards.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.svc-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px 24px 28px;border-radius:24px;border:1px solid rgba(0,0,0,.14);background:rgba(255,255,255,.35);transition:transform .3s ease,background .3s ease,box-shadow .3s ease}
.svc-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--border-angle),transparent 0%,transparent 75%,var(--acid) 88%,var(--orange) 96%,transparent 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease;animation:borderSpin 4s linear infinite;pointer-events:none}
.svc-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.6);box-shadow:0 18px 40px rgba(0,0,0,.08)}
.svc-card:hover::after{opacity:1}
.svc-card-num{font-size:12px;font-weight:800;color:var(--orange);letter-spacing:.04em}
.svc-card h3{font-size:20px;line-height:1.22}
.svc-card p{font-size:15px;line-height:1.6;color:#4a453d}
.band-dark .svc-card{border-color:rgba(255,255,255,.14);background:linear-gradient(160deg,#242424,#0b0b0b 80%)}
.band-dark .svc-card p{color:rgba(255,255,255,.72)}
.band-dark .svc-card:hover{background:linear-gradient(160deg,#2c2c2c,#0b0b0b 80%)}

/* ---------- Steps (homepage process cards) ---------- */
.svc-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
@media(min-width:1100px){
  .svc-steps.n-3,.svc-steps.n-6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .svc-steps.n-4,.svc-steps.n-7,.svc-steps.n-8{grid-template-columns:repeat(4,minmax(0,1fr))}
  .svc-steps.n-5{grid-template-columns:repeat(5,minmax(0,1fr))}
}
.svc-card a{color:#161616;font-weight:700;text-decoration:underline;text-decoration-color:rgba(255,91,24,.6);text-decoration-thickness:2px;text-underline-offset:3px}
.svc-card a:hover{color:var(--orange)}
.band-dark .svc-card a{color:#fff}
.svc-step{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px 24px 30px;border-radius:28px;background:linear-gradient(160deg,#2a2a2a,#000 78%);border:1px solid rgba(255,255,255,.16)}
.svc-step::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--border-angle),transparent 0%,transparent 75%,var(--acid) 88%,var(--orange) 96%,transparent 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease;animation:borderSpin 4s linear infinite;pointer-events:none}
.svc-step:hover::after{opacity:1}
.svc-step-num{font-size:13px;font-weight:800;color:var(--acid);letter-spacing:.06em}
.svc-step h3{font-size:21px;line-height:1.2;color:#fff}
.svc-step p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.72)}

/* ---------- Case band ---------- */
.svc-case{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;align-items:center;background:var(--ink);color:#fff;border-radius:32px;padding:28px;overflow:hidden}
.svc-case-media{border-radius:22px;overflow:hidden;aspect-ratio:16/10;background:#222}
.svc-case-media img{width:100%;height:100%;object-fit:cover}
.svc-case-body{padding:10px 16px 10px 0}
.svc-case-body h2{font-size:clamp(26px,2.8vw,38px);line-height:1.08;margin:12px 0 16px}
.svc-case-body p{font-size:16px;line-height:1.65;color:rgba(255,255,255,.78);margin:0 0 14px}
.svc-case-body ul{margin:0 0 16px;padding-left:20px;color:rgba(255,255,255,.78);font-size:15.5px;line-height:1.6}
.svc-case-body li{margin-bottom:6px}
.svc-case-body strong{color:#fff}
.svc-case-body a:not(.svc-case-link){color:#fff;text-decoration:underline;text-decoration-color:rgba(255,91,24,.6)}
.svc-case-link{display:inline-flex;margin-top:8px;font-weight:800;color:var(--acid)}
.svc-case-link:hover{color:#fff}

/* ---------- Related link cards ---------- */
.svc-related{padding-top:40px}
.svc-link-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.svc-link-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px;border-radius:22px;background:var(--paper2);border:1px solid var(--line);transition:transform .3s ease,background .3s ease}
.svc-link-card:hover{transform:translateY(-4px);background:#fff}
.svc-link-card .eyebrow{font-size:10.5px}
.svc-link-card strong{font-size:19px;line-height:1.2}
.svc-link-card span:not(.eyebrow){font-size:14px;line-height:1.5;color:var(--muted)}
.svc-link-card em{margin-top:auto;padding-top:6px;font-style:normal;font-size:13px;font-weight:800;color:var(--orange)}
.svc-related-alt .svc-link-card{background:var(--ink);color:#fff;border-color:transparent}
.svc-related-alt .svc-link-card span:not(.eyebrow){color:rgba(255,255,255,.7)}
.svc-related-alt .svc-link-card:hover{background:#000}
.band-reading .blog-grid{padding:0 0 20px}

/* ---------- About page extras ---------- */
.page-about .post-hero-media img{object-position:78% 22%}
.timeline{list-style:none;margin:28px 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--orange),var(--acid))}

/* ---------- Contact (Calendly + HubSpot side by side) ---------- */
.svc-contact{padding:60px 0 20px}
.svc-contact-card{position:relative;border-radius:32px;padding:54px 56px;background:linear-gradient(160deg,#1f1f1f,#0a0a0a 70%);color:#fff;overflow:hidden}
.svc-contact-card::before{content:"";position:absolute;width:520px;height:520px;right:-160px;top:-220px;border-radius:50%;background:radial-gradient(circle,rgba(255,91,24,.28),transparent 62%);pointer-events:none}
.svc-contact-card h2{position:relative;font-size:clamp(30px,3.4vw,46px);line-height:1.05;max-width:760px;margin-top:10px}
.svc-contact-card > p{position:relative;margin-top:14px;max-width:640px;color:rgba(255,255,255,.75);font-size:16.5px;line-height:1.6}
.svc-book-mobile{display:none;margin-top:22px}
.contact-embeds{position:relative;margin-top:30px}
.contact-or{display:flex;align-items:center;gap:12px;margin:22px 0 4px;font-size:12.5px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.04em}
.contact-or i{flex:1 1 auto;height:1px;background:rgba(255,255,255,.18)}
.contact-or b{font-weight:600}
.hubspot-form-wrap{border-radius:18px;background:#fff;padding:18px 18px 6px;color:var(--ink)}
@media(min-width:851px){
  .contact-embeds{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:28px;align-items:stretch}
  .contact-embed--cal{position:relative;border-radius:18px;overflow:hidden;background:#fff}
  .contact-embed--cal .calendly-inline-widget{position:absolute!important;inset:0;height:100%!important;min-width:0!important}
  .contact-embeds .contact-or{flex-direction:column;margin:0;gap:10px}
  .contact-embeds .contact-or i{width:1px;height:auto}
  .contact-or-more{display:none}
  .contact-embeds .hubspot-form-wrap{min-height:340px}
}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .svc-cards.cols-3,.svc-cards.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-case{grid-template-columns:1fr;gap:22px;padding:20px}
  .svc-case-body{padding:0 6px 10px}
}
@media(max-width:850px){
  .calendly-inline-widget,.contact-embed--cal{display:none}
  .svc-book-mobile{display:inline-flex}
  .svc-contact-card{padding:34px 22px;border-radius:26px}
  .band{padding:64px 0}
  .band-dark,.band-steps{padding:70px 0!important}
}
@media(max-width:620px){
  .svc-cards.cols-2,.svc-cards.cols-3,.svc-cards.cols-4{grid-template-columns:1fr}
  .svc-lede{font-size:16.5px}
}
@media(prefers-reduced-motion:reduce){.svc-card::after,.svc-step::after{animation:none}}