/* components part 7 of 7 — split for the host's 16KB FTP ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */

.case-stack .cs-3{transform:translate(34px,-30px) rotate(4deg);z-index:1;filter:brightness(.93)}
.case-stack .cs-2{transform:translate(17px,-15px) rotate(2deg);z-index:2;filter:brightness(.97)}
.case-stack .cs-front{z-index:3}
.case-stack:hover .cs-3{transform:translate(44px,-40px) rotate(6deg)}
.case-stack:hover .cs-2{transform:translate(24px,-22px) rotate(3deg)}
.case-stack .cs-count{position:absolute;bottom:12px;left:12px;z-index:4;background:rgba(20,18,14,.72);backdrop-filter:blur(6px);color:#fff;font-size:12px;font-weight:700;letter-spacing:.03em;padding:8px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:7px}
.case-stack .cs-count svg{width:13px;height:13px}@media(max-width:820px){.case-grid{grid-template-columns:minmax(0,1fr);gap:40px;padding-left:0}.case-copy{padding-inline:var(--gut)}.case-media{order:-1}.case-stack{margin:20px 40px 10px 0}.case-stats{gap:12px}}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:0.72fr 1.28fr;gap:clamp(36px,5vw,72px);align-items:start}
.faq-aside{position:sticky;top:110px}
.faq-aside h2{font-size:clamp(30px,3.6vw,46px);font-weight:800;letter-spacing:-0.035em;line-height:1.03;margin-bottom:16px}
.faq-aside p{color:var(--muted);font-size:16.5px;line-height:1.6;margin-bottom:24px}
details.faq{border-bottom:1px solid var(--hair)}
details.faq summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;align-items:center;gap:20px;font-family:var(--sans)}
details.faq summary::-webkit-details-marker{display:none}
details.faq:hover summary .q{color:var(--accent)}
details.faq summary .q{font-size:19px;font-weight:700;color:var(--ink);flex:1;letter-spacing:-0.015em;transition:color .2s}
details.faq summary .pl{width:20px;height:20px;position:relative;flex:0 0 20px}
details.faq summary .pl::before,details.faq summary .pl::after{content:"";position:absolute;background:var(--accent);transition:.3s;border-radius:2px}
details.faq summary .pl::before{top:9px;left:0;width:20px;height:2.5px}
details.faq summary .pl::after{top:0;left:9px;width:2.5px;height:20px}
details.faq[open] summary .pl::after{transform:rotate(90deg);opacity:0}
details.faq .a{padding:0 0 26px;color:var(--body);max-width:74ch;line-height:1.72;font-size:16px}@media(max-width:820px){.faq-grid{grid-template-columns:1fr;gap:20px}.faq-aside{position:static}}

/* PAGE CTA */
.pagecta{position:relative;overflow:hidden;background:var(--warm)}
.pagecta img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pagecta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,19,16,.74),rgba(20,19,16,.86));z-index:1}
.pagecta .wrap{position:relative;z-index:2;text-align:center;padding-block:clamp(68px,8vw,112px)}
.pagecta .eyebrow{color:#d8b98a}
.pagecta h2{color:#fff;font-size:clamp(34px,4.6vw,58px);font-weight:800;letter-spacing:-0.035em;line-height:1.03;max-width:20ch;margin:0 auto 20px}
.pagecta p{color:rgba(255,255,255,.82);font-size:18px;line-height:1.6;max-width:56ch;margin:0 auto 30px}
.pagecta .cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.pagecta .btn-g{--btn-fg:#fff;color:#fff;border-color:rgba(255,255,255,.55)}
.pagecta .btn-g:hover,.pagecta .btn-g:focus{background:rgba(255,255,255,.14)}
.pagecta .offer{margin-top:24px;font-size:14.5px;color:rgba(255,255,255,.66);font-weight:600;letter-spacing:.02em;max-width:56ch;margin-inline:auto}
/* [hidden] must actually hide. The UA rule is `[hidden]{display:none}` at specificity
   (0,1,0), and this sheet carries `img:not([class*="elementor"]){display:block}` and
   `.lb img{display:block}`, both (0,1,1) — so every `el.hidden = true` in our JS was
   silently doing nothing to images. It surfaced in the panorama viewer: opening a 360
   sets lbImg.hidden and removes its src, but the element stayed in flow carrying the
   ALT TEXT of whatever image was opened before it, which the browser then drew as
   broken-image text across the viewer. !important because the whole point of the
   attribute is that it wins. */
[hidden]{display:none!important}
/* The rating cluster in the footer. Deliberately NOT .client-rating: that component is
   drawn for a light band, its rules live in the page-gated components sheet which loads
   after this one, and at equal specificity it won every property — `Rated 4.9` computed
   to var(--ink) on a var(--dark) footer, i.e. black on black. Standalone rules instead.
   `.foot-rating .hero-avatars img` is (0,2,1) so it also clears the bare
   `.hero-avatars img` rule at (0,1,1). */
/* "See our reviews" is coming out everywhere: the plan is to link the Clutch profile
   from the rating itself. Hidden rather than deleted so the markup and the data-proof
   hooks stay intact for that swap. */
.rl-more{display:none}@media(max-width:1040px){
  .timeline{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:44%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;-webkit-overflow-scrolling:touch}
  .timeline .step{scroll-snap-align:start}
  .timeline .step:not(:last-child)::after{display:none}}@media(max-width:760px){
  .vs-cols{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;-webkit-overflow-scrolling:touch}
  .vs-cols>.vs-card{scroll-snap-align:start}}@media(max-width:700px){
  .cardgrid.four{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:74%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;-webkit-overflow-scrolling:touch}
  .cardgrid.four>.mini{scroll-snap-align:start}
  .timeline{grid-auto-columns:80%}}@media(max-width:900px){
  .cardgrid.ind{grid-template-columns:repeat(3,1fr);grid-auto-flow:row;grid-template-rows:none;grid-auto-columns:auto;overflow-x:visible;gap:14px 10px;padding-bottom:0}
  .cardgrid.ind .mini.svc{flex-direction:column;text-align:center;gap:10px;padding:14px 8px}
  .cardgrid.ind .mini.svc .svc-img{width:100%;height:auto;max-width:104px}
  .cardgrid.ind .mini.svc .svc-body{text-align:center}
  .cardgrid.ind .mini.svc h3{font-size:14px;line-height:1.2}
  .cardgrid.ind .mini.svc p,.cardgrid.ind .mini.svc .svc-more{display:none}}
/* reveal */
.rv{opacity:0;transform:translateY(20px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.card img,.mini.svc .svc-img,.mini.why .why-img{transition:none}}

/* live colour switcher */
body.mono .btn-p{background:var(--ink);border-color:var(--ink)}
body.mono .btn-p:hover{background:#000;border-color:#000}
body.mono .ba-knob svg{color:var(--ink)}
.note{position:fixed;right:12px;bottom:12px;max-width:330px;z-index:210;background:var(--white);border:1px solid var(--hair);color:var(--muted);font-size:10.5px;letter-spacing:.02em;line-height:1.4;text-align:center;padding:9px 13px;border-radius:6px;box-shadow:0 6px 24px rgba(0,0,0,.1)}