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

.guide-card{background:var(--ink);color:#fff;border-radius:14px;padding:clamp(30px,3.6vw,44px);position:sticky;top:110px}
.guide-card .guide-logo{height:28px;width:auto;filter:brightness(0) invert(1);opacity:.9;margin-bottom:18px;display:block}
.guide-card .gcover{width:100%;border-radius:10px;aspect-ratio:4/3;object-fit:cover;margin:-4px 0 22px}
.guide-card .ph{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.guide-card h3{color:#fff;font-size:clamp(23px,2.6vw,29px);font-weight:800;letter-spacing:-0.03em;line-height:1.06;margin-bottom:10px}
.guide-card .gsub{color:#e2c79c;font-size:15px;font-weight:600;margin-bottom:14px;line-height:1.45}
.guide-card>p{color:#c8c7c2;font-size:15px;line-height:1.6;margin-bottom:22px}
.guide-list{list-style:none;margin-bottom:22px}
.guide-list li{position:relative;padding-left:24px;margin-bottom:11px;color:#d4d3ce;font-size:14.5px;line-height:1.45}
.guide-list li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.guide-form{display:flex;flex-direction:column;gap:11px}
.guide-form input{font-family:var(--sans);font-size:15px;padding:15px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(178,138,87,.14);color:#fff}
.guide-form input::placeholder{color:#b6b2a9}
.guide-form input:focus{outline:none;border-color:var(--accent);background:rgba(178,138,87,.22)}
.guide-form .btn{width:100%;justify-content:center}
.guide-note{font-size:12.5px;color:#9a9992;margin-top:16px;line-height:1.5}@media(max-width:820px){.price-grid{grid-template-columns:1fr;gap:34px}.guide-card{position:static}}

/* WORKFLOW spec */
/* The two images are lifted out of the columns into one edge-to-edge strip of 2,
   butted together with no gap; the spec tables stay inside .wrap. */
.flow-strip{display:grid;grid-template-columns:1fr 1fr;gap:0;width:var(--vw);max-width:none;margin-left:calc(50% - var(--vw)/2);margin-bottom:clamp(30px,4vw,52px)}
.flow-strip img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:0}
.flow-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,56px)}
.flow-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;margin-bottom:24px}
.flow-block h4{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.flow-row{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:15px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.flow-row .fk{font-family:var(--disp);font-weight:700;color:var(--ink);font-size:15px;letter-spacing:-0.01em}
.flow-row .fv{color:var(--body);font-size:15px;line-height:1.5}
.flow-row .fv b{color:var(--ink);font-weight:700}
.flow-foot{margin-top:30px;font-size:16px;color:var(--body);line-height:1.6}@media(max-width:820px){.flow-grid{grid-template-columns:1fr;gap:30px}.flow-row{grid-template-columns:130px 1fr}}@media(max-width:560px){.flow-strip img{aspect-ratio:1/1}}@media(max-width:480px){.flow-row{grid-template-columns:1fr;gap:4px}}

/* CASE STUDY — stacked image bundle + stats */
/* The render stack bleeds right and the rotated top card deliberately overhangs the
   viewport (clipped by body{overflow-x:hidden}) so the set reads bigger. Do NOT add
   overflow:hidden to this section — .guide-card and .faq-aside are position:sticky
   and a new overflow ancestor would break them. */
.case-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,80px);align-items:center;width:var(--bleed);max-width:none;margin-left:calc(50% - var(--bleed)/2);padding-left:var(--edge)}
.case-copy{max-width:var(--measure);min-width:0}
.case-copy .kicker{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.case-copy h3{font-size:clamp(27px,3vw,40px);font-weight:800;letter-spacing:-0.03em;line-height:1.05;margin-bottom:16px}
.case-copy p{color:var(--body);line-height:1.72;margin-bottom:18px}
.case-bullets{list-style:none;margin-bottom:24px}
.case-bullets li{position:relative;padding-left:28px;margin-bottom:11px;color:var(--body);font-size:15.5px;line-height:1.5}
.case-bullets li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.case-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:26px}
.case-stats>div{border-top:2px solid var(--ink);padding-top:12px}
.case-stats b{display:block;font-family:var(--disp);font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-0.01em;line-height:1.2;margin-bottom:5px}
.case-stats span{font-size:12.5px;color:var(--muted);line-height:1.4}
.case-copy .btn{margin-top:2px}
/* stacked, mac-download-style bundle */
/* The fan pushes cs-2 and cs-3 out to the right by 17 and 34px, and this column
   ends at the viewport edge on a full-bleed grid, so the third card was hanging 48px
   past it and the whole document scrolled sideways. overflow-x:clip on the section,
   not overflow:hidden: clip does not create a scroll container, so the sticky filter
   rail further down the page keeps working. */
#proof{overflow-x:clip}
.case-stack{position:relative;aspect-ratio:3/2;margin:30px 0 16px 0;cursor:pointer}
.case-stack .cs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:12px;box-shadow:0 24px 60px -28px rgba(20,19,16,.5);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.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}}