/* trust.css : proof blocks from includes/proof-blocks.php (doc/TRUST-PROOF-PLAN.md).
   Tokens from site.css. Shape rule: cards 16px, images 12px, buttons 10px, chips/tags full pill.
   One accent (blue). The site is light-only, so these blocks are too. */

.tr-in{max-width:1240px;margin:0 auto;padding:0 24px;}
.tr-sec{padding:clamp(56px,7vw,96px) 0;background:#fff;}
.tr-head{max-width:720px;margin:0 0 36px;}
.tr-head h2{margin:14px 0 0;font:800 clamp(28px,3.2vw,42px)/1.12 var(--f);letter-spacing:-.02em;color:var(--ink);}
.tr-head .pill + h2{margin-top:14px;}
.tr-head h2:first-child{margin-top:0;}
.tr-head p{margin:12px 0 0;max-width:60ch;font-size:16px;line-height:1.65;color:var(--ink-2);}
.tr-note{margin:22px 0 0;font-size:13px;line-height:1.6;color:var(--muted);}
.tr-stars{color:#F5A623;letter-spacing:1px;font-size:15px;line-height:1;white-space:nowrap;}
.tr-stars span{color:#D5DDEA;}

/* ── Google rating badge ── */
.tr-rate{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--f);color:var(--ink);text-decoration:none;}
.tr-rate .fa-google{font-size:16px;color:#4285F4;}
.tr-rate b{font-weight:800;font-size:16px;}
.tr-rate-n{color:var(--ink-2);font-weight:500;}
a.tr-rate:hover .tr-rate-n{text-decoration:underline;text-underline-offset:3px;}
.tr-rate--card{display:flex;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-card);background:#fff;}
.tr-rate--footer{color:#fff;font-size:13px;}
.tr-rate--footer .tr-rate-n{color:#AFC1E0;}
.tr-rate--footer .tr-stars span{color:#33466B;}

/* ── Proof chip on service cards ── */
.tr-chip{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:6px 11px;border-radius:999px;background:#ECF8F1;color:#11683D;font:700 12.5px/1.25 var(--f);}
.tr-chip i{font-size:12px;}

/* ── Logo wall ── */
.tr-logos{background:#fff;border-bottom:1px solid var(--line);padding:26px 0;}
.tr-logos .tr-in{display:flex;align-items:center;gap:20px 36px;flex-wrap:wrap;}
.tr-logos-lbl{margin:0;font:700 13px/1.4 var(--f);color:var(--muted);max-width:180px;flex:none;}
.tr-logo-row,.tr-marquee ul{display:flex;align-items:center;gap:40px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.tr-logos li img{display:block;height:56px;width:auto;max-width:170px;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .3s ease,opacity .3s ease;}
.tr-logos li a:hover img,.tr-logos li a:focus-visible img{filter:none;opacity:1;}
.tr-logos.is-marquee .tr-in{flex-wrap:nowrap;}
.tr-marquee{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.tr-marquee-track{display:flex;width:max-content;animation:trMarq 48s linear infinite;}
.tr-marquee:hover .tr-marquee-track,.tr-marquee:focus-within .tr-marquee-track{animation-play-state:paused;}
.tr-marquee ul{flex-wrap:nowrap;padding:0 20px;}
@keyframes trMarq{to{transform:translateX(-50%);}}

/* ── Result cards: 1 = wide, 2 = halves, 3 = large left + two stacked ── */
.tr-results{background:linear-gradient(180deg,var(--sky) 0%,#fff 100%);}
.tr-res-grid{display:grid;gap:22px;}
.tr-res-2{grid-template-columns:1fr 1fr;}
.tr-res-3{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:auto auto;}
.tr-res-3 .tr-res:first-child{grid-row:1 / span 2;}
.tr-res-3 .tr-res:first-child .tr-res-img{flex:1;min-height:0;}
.tr-res-3 .tr-res:first-child .tr-res-img img{aspect-ratio:auto;position:absolute;inset:0;}
.tr-res{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-card);}
.tr-res-1 .tr-res{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center;}
.tr-res-img{position:relative;display:block;background:var(--sky);overflow:hidden;}
.tr-res-img img{display:block;width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;transition:transform .6s var(--ease);}
.tr-res-img:hover img{transform:scale(1.025);}
.tr-zoom-ic{position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:999px;background:rgba(10,26,61,.78);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;opacity:0;transition:opacity .25s ease;}
.tr-res-img:hover .tr-zoom-ic,.tr-res-img:focus-visible .tr-zoom-ic{opacity:1;}
.tr-res figcaption{padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px;}
.tr-res-num{font:800 clamp(22px,2.2vw,30px)/1.15 var(--f);letter-spacing:-.02em;color:var(--ink);}
.tr-res-3 .tr-res:not(:first-child) .tr-res-num{font-size:clamp(19px,1.7vw,23px);}
.tr-res-detail{font-size:15px;line-height:1.55;color:var(--ink-2);}
.tr-res-meta{font-size:13px;color:var(--muted);}
.tr-res-meta:empty{display:none;}
.tr-res-link{margin-top:6px;font:700 14px/1.3 var(--f);color:var(--blue);display:inline-flex;align-items:center;gap:7px;}
.tr-res-link i{transition:transform .25s var(--ease);}
.tr-res-link:hover i{transform:translateX(3px);}

/* ── Before / after ── */
.tr-ba-grid{display:grid;gap:26px;}
.tr-ba-2{grid-template-columns:1fr 1fr;}
.tr-ba-1{max-width:960px;}
.tr-ba-item{margin:0;}
.tr-ba-frame{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--sky);box-shadow:var(--sh-card);aspect-ratio:3/2;touch-action:pan-y;user-select:none;}
.tr-ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.tr-ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0);}
.tr-ba-frame::after{content:"";position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(10,26,61,.12);pointer-events:none;}
.tr-ba-handle{position:absolute;top:50%;left:var(--pos);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:999px;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 8px 24px rgba(10,26,61,.25);pointer-events:none;z-index:2;}
.tr-ba-tag{position:absolute;top:12px;padding:5px 11px;border-radius:999px;font:700 11.5px/1 var(--f);letter-spacing:.04em;text-transform:uppercase;background:rgba(10,26,61,.78);color:#fff;pointer-events:none;z-index:1;}
.tr-ba-tag.is-before{left:12px;} .tr-ba-tag.is-after{right:12px;background:var(--blue);}
.tr-ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3;}
.tr-ba-range:focus-visible + *{outline:none;}
.tr-ba-frame:focus-within{outline:3px solid rgba(8,102,255,.45);outline-offset:3px;}
.tr-ba-item figcaption{display:flex;flex-direction:column;gap:4px;padding:16px 4px 0;}
.tr-ba-item figcaption b{font:800 18px/1.3 var(--f);color:var(--ink);}
.tr-ba-item figcaption span{font-size:15px;color:var(--ink-2);line-height:1.55;}
.tr-ba-item figcaption small{font-size:13px;color:var(--muted);}

/* ── Videos (click to play, nothing loads from YouTube until tapped) ── */
.tr-videos{background:var(--sky);}
.tr-vid-grid{display:grid;gap:24px;align-items:start;}
.tr-vid-2{grid-template-columns:1fr 1fr;}
.tr-vid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.tr-vid-1{max-width:880px;}
.tr-vid{margin:0;}
.tr-vid-frame{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--navy-900);aspect-ratio:16/9;box-shadow:var(--sh-card);}
.tr-vid.is-vertical .tr-vid-frame{aspect-ratio:9/16;max-height:560px;margin:0 auto;}
.tr-vid-frame iframe,.tr-vid-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.tr-vid-play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;display:block;}
.tr-vid-play img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease),opacity .3s ease;}
.tr-vid-play:hover img{transform:scale(1.03);opacity:.9;}
.tr-vid-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:44px;color:rgba(255,255,255,.35);background:linear-gradient(160deg,#0A2C7A,#061127);}
.tr-vid-btn{position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:999px;background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 14px 34px rgba(6,17,39,.35);transition:transform .25s var(--ease);}
.tr-vid-btn i{margin-left:3px;}
.tr-vid-play:hover .tr-vid-btn{transform:scale(1.08);}
.tr-vid-play:active .tr-vid-btn{transform:scale(.96);}
.tr-vid figcaption{padding:14px 2px 0;display:flex;flex-direction:column;gap:5px;}
.tr-vid-type{font:700 12px/1.2 var(--f);color:var(--blue-600);}
.tr-vid figcaption b{font:800 17px/1.35 var(--f);color:var(--ink);}
.tr-vid-sub{font-size:14px;color:var(--ink-2);line-height:1.5;}
.tr-vid-tx{margin-top:4px;font-size:13.5px;color:var(--ink-2);}
.tr-vid-tx summary{cursor:pointer;font-weight:600;color:var(--blue);}
.tr-vid-tx p{margin:8px 0 0;line-height:1.65;max-height:220px;overflow:auto;}

/* ── Reviews ── */
.tr-rv-layout{display:grid;gap:22px;}
.tr-rv-layout.has-rating{grid-template-columns:260px minmax(0,1fr);align-items:start;}
.tr-rv-score{position:sticky;top:96px;padding:26px 24px;border-radius:var(--r-card);background:var(--navy-900);color:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
.tr-rv-g{font-size:22px;color:#fff;}
.tr-rv-score > b{font:800 54px/1 var(--f);letter-spacing:-.03em;}
.tr-rv-score .tr-stars{font-size:18px;}
.tr-rv-score .tr-stars span{color:#33466B;}
.tr-rv-score p{margin:0;font-size:14.5px;line-height:1.5;color:#C9D6EE;}
.tr-rv-score p small{display:block;margin-top:2px;font-size:12px;color:#8FA3C6;}
.tr-btn-ghost{margin-top:6px;display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:var(--r-btn);border:1px solid rgba(255,255,255,.28);color:#fff;font:700 14px/1 var(--f);white-space:nowrap;transition:background .2s ease;}
.tr-btn-ghost:hover{background:rgba(255,255,255,.1);}
.tr-rv-write{font-size:13px;color:#AFC1E0;text-decoration:underline;text-underline-offset:3px;}
.tr-rv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;}
.tr-rv{margin:0;padding:22px;border:1px solid var(--line);border-radius:var(--r-card);background:#fff;display:flex;flex-direction:column;gap:14px;}
.tr-rv-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.tr-rv-src{font:700 11.5px/1.2 var(--f);color:var(--blue-600);background:var(--blue-50);padding:5px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;}
a.tr-rv-src:hover{text-decoration:underline;}
.tr-rv blockquote{margin:0;font-size:15.5px;line-height:1.65;color:var(--ink);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;}
.tr-rv figcaption{margin-top:auto;display:flex;align-items:center;gap:12px;}
.tr-rv-av{width:44px;height:44px;border-radius:999px;flex:none;object-fit:cover;background:var(--blue-50);color:var(--blue-600);display:inline-flex;align-items:center;justify-content:center;font:800 14px/1 var(--f);}
.tr-rv figcaption b{display:block;font-size:14.5px;color:var(--ink);}
.tr-rv figcaption small{display:block;font-size:13px;color:var(--muted);margin-top:2px;}
.tr-chats{margin-top:40px;}
.tr-chats h3{margin:0 0 16px;font:800 20px/1.3 var(--f);color:var(--ink);}
.tr-chat-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;}
.tr-chat{margin:0;}
.tr-chat a{display:block;border-radius:var(--r-card);overflow:hidden;border:6px solid #fff;box-shadow:var(--sh-card);background:#ECE5DD;}
.tr-chat img{display:block;width:100%;aspect-ratio:9/14;object-fit:cover;object-position:top;}
.tr-chat figcaption{padding:10px 4px 0;font-size:13.5px;color:var(--ink);}
.tr-chat figcaption small{display:block;color:var(--muted);font-size:12.5px;}

/* ── Promises + samples ── */
.tr-promise{background:#fff;}
.tr-promise-in.has-both{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:center;}
.tr-promise-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px 24px;}
.tr-promise-in.has-both .tr-promise-list{grid-template-columns:1fr;}
.tr-promise-list li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5;color:var(--ink);}
.tr-promise-list i{flex:none;width:26px;height:26px;border-radius:999px;background:var(--blue-50);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:12px;margin-top:-1px;}
.tr-samples{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,260px));gap:18px;justify-content:center;}
.tr-sample{margin:0;}
.tr-sample a{display:block;border-radius:var(--r-img);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-card);background:var(--sky);}
.tr-sample img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;transition:transform .5s var(--ease);}
.tr-sample a:hover img{transform:scale(1.03);}
.tr-sample figcaption{padding:12px 2px 0;display:flex;flex-direction:column;gap:3px;}
.tr-sample figcaption b{font:800 15.5px/1.35 var(--f);color:var(--ink);}
.tr-sample figcaption span{font-size:13.5px;color:var(--ink-2);line-height:1.5;}

/* ── Beside a form ── */
.tr-side{display:flex;flex-direction:column;gap:16px;}
.tr-steps{padding:20px;border:1px solid var(--line);border-radius:var(--r-card);background:#fff;}
.tr-steps h3{margin:0 0 14px;font:800 16px/1.3 var(--f);color:var(--ink);}
.tr-steps ol{list-style:none;margin:0;padding:0;counter-reset:trs;display:flex;flex-direction:column;gap:14px;}
.tr-steps li{counter-increment:trs;display:grid;grid-template-columns:28px 1fr;column-gap:12px;font-size:14px;line-height:1.45;color:var(--ink-2);}
.tr-steps li::before{content:counter(trs);grid-row:1 / span 2;width:28px;height:28px;border-radius:999px;background:var(--blue-50);color:var(--blue-600);font:800 13px/28px var(--f);text-align:center;}
.tr-steps li b{color:var(--ink);font-size:14.5px;}
.tr-side-rv{margin:0;padding:20px;border-radius:var(--r-card);background:var(--sky);display:flex;flex-direction:column;gap:10px;}
.tr-side-rv blockquote{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink);}
.tr-side-rv figcaption{font-size:13px;color:var(--ink-2);}
.tr-side-rv figcaption b{color:var(--ink);}
.tr-side-logos{list-style:none;margin:0;padding:4px 2px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;}
.tr-side-logos img{display:block;height:36px;width:auto;max-width:120px;object-fit:contain;filter:grayscale(1);opacity:.7;}

/* ── Case study teaser ── */
.tr-case{padding-top:0;}
.tr-case-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);border-radius:var(--r-card);overflow:hidden;background:var(--navy-900);color:#fff;text-decoration:none;box-shadow:var(--sh-lift);}
.tr-case-card:not(:has(.tr-case-img)){grid-template-columns:1fr;}
.tr-case-img{display:block;min-height:260px;background:#0A2C7A;}
.tr-case-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease);}
.tr-case-card:hover .tr-case-img img{transform:scale(1.03);}
.tr-case-copy{padding:clamp(26px,4vw,48px);display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
.tr-case-copy .pill{background:rgba(8,102,255,.2);color:#9CC2FF;}
.tr-case-metric{font:800 clamp(26px,3vw,38px)/1.12 var(--f);letter-spacing:-.02em;}
.tr-case-client{font-weight:700;color:#C9D6EE;}
.tr-case-prob{font-size:15px;line-height:1.6;color:#AFC1E0;max-width:52ch;}
.tr-case-go{margin-top:6px;font:700 15px/1 var(--f);color:#fff;display:inline-flex;align-items:center;gap:8px;}
.tr-case-go i{transition:transform .25s var(--ease);}
.tr-case-card:hover .tr-case-go i{transform:translateX(4px);}

/* ── Footer credentials ── */
.ft-rating{margin:14px 0 4px;}
.tr-creds{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:#8FA3C6;}
.tr-creds b{color:#C9D6EE;font-weight:600;}

/* ── Lightbox (screenshots, message shots, samples) ── */
.tr-lb{position:fixed;inset:0;z-index:9000;background:rgba(3,12,27,.88);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .25s ease;}
.tr-lb.is-on{opacity:1;}
.tr-lb img{max-width:min(1400px,100%);max-height:100%;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:scale(.97);transition:transform .35s var(--ease);}
.tr-lb.is-on img{transform:none;}
.tr-lb button{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:999px;border:0;background:#fff;color:var(--ink);font-size:18px;cursor:pointer;}

/* ── Phones ── */
@media(max-width:900px){
  .tr-res-3 .tr-res:first-child .tr-res-img img{position:static;aspect-ratio:16/10;}
  .tr-res-2,.tr-res-3,.tr-res-1 .tr-res,.tr-ba-2,.tr-vid-2,.tr-vid-3,.tr-promise-in.has-both,.tr-case-card{grid-template-columns:minmax(0,1fr);}
  .tr-res-3 .tr-res:first-child{grid-row:auto;}
  .tr-rv-layout.has-rating{grid-template-columns:minmax(0,1fr);}
  .tr-rv-score{position:static;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px;}
  .tr-rv-score > b{font-size:42px;}
  .tr-rv-score p{flex-basis:100%;}
  .tr-case-img{min-height:200px;}
}
@media(max-width:640px){
  .tr-in{padding:0 16px;}
  .tr-head{margin-bottom:26px;}
  .tr-logos .tr-in{flex-direction:column;align-items:flex-start;gap:14px;}
  .tr-logos.is-marquee .tr-in{flex-wrap:wrap;}
  .tr-logos-lbl{max-width:none;}
  .tr-marquee{width:100%;}
  .tr-logo-row{gap:22px 30px;}
  .tr-logos li img{height:44px;max-width:130px;}
  .tr-rv-grid,.tr-chat-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none;}
  .tr-rv-grid::-webkit-scrollbar,.tr-chat-row::-webkit-scrollbar{display:none;}
  .tr-rv{flex:0 0 86%;scroll-snap-align:start;}
  .tr-chat{flex:0 0 60%;scroll-snap-align:start;}
  .tr-vid.is-vertical .tr-vid-frame{max-height:520px;}
}

@media (prefers-reduced-motion: reduce){
  .tr-marquee-track{animation:none;}
  .tr-marquee{overflow-x:auto;}
  .tr-marquee ul[aria-hidden="true"]{display:none;}
  .tr-res-img img,.tr-vid-play img,.tr-sample img,.tr-case-img img,.tr-vid-btn,.tr-lb,.tr-lb img{transition:none;}
}

/* Placement tweaks for the form pages */
.ct-proof{margin:0 0 28px;}
.gs-proof{margin-bottom:18px;}
.eq-proof{max-width:640px;margin:24px auto 0;}

/* ── Without vs with (includes/service-contrast.php) ──
   State lives on [data-cx][data-state]. Red is used only for "lost" meaning; blue is the outcome. */
.cx{--cx-lost:#C03A2B;--cx-lost-bg:#FDF0EE;background:linear-gradient(180deg,#fff 0%,var(--sky) 100%);transition:background-color .6s ease;}
.cx-toggle{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-card);margin-bottom:26px;}
.cx-toggle button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border:0;background:none;border-radius:999px;font:700 14.5px/1 var(--f);color:var(--ink-2);cursor:pointer;white-space:nowrap;transition:color .35s ease;}
.cx-toggle button:active{transform:scale(.98);}
.cx-thumb{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--ink);transition:transform .5s var(--ease),background-color .5s ease;}
.cx[data-state="without"] [data-cx-set="without"],.cx[data-state="with"] [data-cx-set="with"]{color:#fff;}
.cx[data-state="with"] .cx-thumb{transform:translateX(100%);background:var(--blue);}

.cx-stage{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-card);padding:clamp(22px,3.4vw,40px);}
/* both texts stay in the DOM; only the active one is visible and announced */
.cx-summary,.cx-txt,.cx-lost{display:grid;}
.cx-w,.cx-y{grid-area:1 / 1;transition:opacity .45s ease,transform .5s var(--ease),visibility 0s linear .45s;}
.cx[data-state="without"] .cx-y,.cx[data-state="with"] .cx-w{opacity:0;visibility:hidden;transform:translateY(6px);}
.cx[data-state="without"] .cx-w,.cx[data-state="with"] .cx-y{transition-delay:0s,0s,0s;}
.cx-summary{margin:0 0 30px;font:800 clamp(21px,2.4vw,30px)/1.2 var(--f);letter-spacing:-.02em;}
.cx-summary .cx-w{color:var(--ink-2);}
.cx-summary .cx-y{color:var(--ink);}

/* journey track */
.cx-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;}
.cx-node{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:0 6px;}
.cx-line{position:absolute;top:22px;left:50%;width:100%;height:3px;margin-top:-1.5px;background:#DCE4F0;border-radius:3px;overflow:hidden;}
.cx-line > span{position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease),background-color .3s ease;transition-delay:calc(var(--i) * 220ms);}
.cx-dot{position:relative;z-index:1;width:44px;height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid var(--ink);color:var(--ink);font:800 15px/1 var(--f);transition:background-color .4s ease,border-color .4s ease,color .4s ease,opacity .4s ease,transform .4s var(--ease);transition-delay:calc(var(--i) * 220ms);}
.cx-dot i{position:absolute;opacity:0;transform:scale(.6);transition:opacity .3s ease,transform .35s var(--ease);transition-delay:inherit;}
.cx-dot b{transition:opacity .3s ease;transition-delay:inherit;}
.cx-label{font:700 14.5px/1.35 var(--f);color:var(--ink);max-width:16ch;transition:opacity .4s ease,color .4s ease;transition-delay:calc(var(--i) * 220ms);}
/* without: reached steps grey line, the break step red, later steps faded with a dashed line */
.cx[data-state="without"] .cx-line:not(.is-cut) > span{transform:scaleX(1);background:#8A97AF;transition-delay:0s;}
.cx[data-state="without"] .cx-line.is-cut{background:repeating-linear-gradient(90deg,#E8B9B2 0 7px,transparent 7px 13px);}
.cx[data-state="without"] .cx-node.is-break .cx-dot{background:var(--cx-lost);border-color:var(--cx-lost);color:#fff;transition-delay:0s;}
.cx[data-state="without"] .cx-node.is-break .cx-no{opacity:1;transform:none;}
.cx[data-state="without"] .cx-node.is-break b{opacity:0;}
.cx[data-state="without"] .cx-node.is-lost:not(.is-break) .cx-dot{border-style:dashed;border-color:#B7C2D6;color:#9AA6BC;opacity:.75;transition-delay:0s;}
.cx[data-state="without"] .cx-node.is-lost .cx-label{color:#8D99B0;transition-delay:0s;}
/* with: the line draws through every step, each step lights up in turn */
.cx[data-state="with"] .cx-line > span{transform:scaleX(1);}
.cx[data-state="with"] .cx-dot{background:var(--blue);border-color:var(--blue);color:#fff;}
.cx[data-state="with"] .cx-ok{opacity:1;transform:none;}
.cx[data-state="with"] .cx-dot b{opacity:0;}
.cx[data-state="with"] .cx-node:last-child .cx-dot::after{content:"";position:absolute;inset:-2px;border-radius:999px;border:2px solid var(--blue);animation:cxPulse 1.4s var(--ease) calc(3 * 220ms + 300ms) 2 both;}
@keyframes cxPulse{from{transform:scale(1);opacity:.8;}to{transform:scale(1.7);opacity:0;}}

.cx-lost{margin:26px 0 0;padding:14px 16px;border-radius:12px;grid-template-columns:auto 1fr;align-items:start;column-gap:12px;font-size:15px;line-height:1.55;transition:background-color .45s ease,color .45s ease;}
.cx-lost > i{grid-row:1;grid-column:1;margin-top:3px;font-size:16px;}
.cx-lost .cx-w,.cx-lost .cx-y{grid-area:1 / 2;}
.cx[data-state="without"] .cx-lost{background:var(--cx-lost-bg);color:#7A2318;}
.cx[data-state="with"] .cx-lost{background:var(--blue-50);color:#0B3D91;}

/* problem -> outcome rows */
.cx-rows{list-style:none;margin:30px 0 0;padding:28px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;}
.cx-rows li{display:flex;gap:14px;align-items:flex-start;font-size:15.5px;line-height:1.5;}
.cx-ic{position:relative;flex:none;width:30px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:13px;transition:background-color .4s ease,color .4s ease;transition-delay:calc(var(--i) * 90ms + 300ms);}
.cx-ic i{position:absolute;transition:opacity .3s ease,transform .35s var(--ease);transition-delay:inherit;}
.cx[data-state="without"] .cx-ic{background:var(--cx-lost-bg);color:var(--cx-lost);}
.cx[data-state="without"] .cx-ok,.cx[data-state="with"] .cx-rows .cx-no{opacity:0;transform:scale(.5);}
.cx[data-state="with"] .cx-ic{background:var(--blue-50);color:var(--blue);}
.cx-rows .cx-w{color:var(--ink-2);}
.cx-rows .cx-y{color:var(--ink);font-weight:600;}
.cx[data-state="with"] .cx-rows .cx-y{transition-delay:calc(var(--i) * 90ms + 300ms),calc(var(--i) * 90ms + 300ms),0s;}

@media(max-width:760px){
  .cx-toggle{display:grid;width:100%;}
  .cx-toggle button{padding:0 10px;font-size:14px;}
  .cx-track{grid-template-columns:minmax(0,1fr);gap:0;}
  .cx-node{flex-direction:row;text-align:left;gap:14px;padding:0 0 22px;}
  .cx-node:last-child{padding-bottom:0;}
  .cx-line{top:44px;left:22px;width:3px;height:calc(100% - 44px);margin:0 0 0 -1.5px;}
  .cx-line > span{transform:scaleY(0);transform-origin:center top;}
  .cx[data-state="without"] .cx-line:not(.is-cut) > span,.cx[data-state="with"] .cx-line > span{transform:scaleY(1);}
  .cx[data-state="without"] .cx-line.is-cut{background:repeating-linear-gradient(180deg,#E8B9B2 0 7px,transparent 7px 13px);}
  .cx-label{max-width:none;}
  .cx-rows{grid-template-columns:minmax(0,1fr);}
}
@media (prefers-reduced-motion: reduce){
  .cx *,.cx *::after{transition:none!important;animation:none!important;}
}

/* ── Case study cards + "100+ more clients" card (renderCaseStudyCards) ── */
.tr-cs{background:linear-gradient(180deg,#fff,#F5F8FE);}
.tr-cs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;align-items:stretch;}
.tr-cs-card{display:flex;flex-direction:column;border-radius:var(--r-card);overflow:hidden;background:#fff;color:var(--ink);text-decoration:none;box-shadow:0 1px 0 var(--line),0 14px 34px rgba(13,27,62,.08);transition:transform .35s var(--ease),box-shadow .35s var(--ease);}
.tr-cs-card:hover{transform:translateY(-4px);box-shadow:0 1px 0 var(--line),0 24px 50px rgba(13,27,62,.14);}
.tr-cs-card:focus-visible,.tr-cs-more:focus-visible{outline:3px solid #0866FF;outline-offset:3px;}
.tr-cs-img{display:block;aspect-ratio:4/3;overflow:hidden;background:#0A2C7A;}
.tr-cs-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease);}
.tr-cs-card:hover .tr-cs-img img{transform:scale(1.05);}
.tr-cs-body{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;flex:1;}
.tr-cs-client{font:800 13px/1.3 var(--f);letter-spacing:.02em;text-transform:uppercase;color:#0866FF;}
.tr-cs-client em{display:block;margin-top:3px;font-style:normal;font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted);}
.tr-cs-head{font:800 19px/1.3 var(--f);letter-spacing:-.01em;color:var(--ink);}
.tr-cs-prob{font-size:14.5px;line-height:1.6;color:var(--ink-2);}
.tr-cs-go{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:8px;font:700 14px/1 var(--f);color:var(--ink);}
.tr-cs-go i{transition:transform .25s var(--ease);}
.tr-cs-card:hover .tr-cs-go i,.tr-cs-more:hover .tr-cs-go i{transform:translateX(4px);}
.tr-cs-more{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:30px 26px;border-radius:var(--r-card);background:radial-gradient(120% 90% at 0% 0%,#1D4FD8 0%,#0D1B3E 62%);color:#fff;text-decoration:none;min-height:240px;transition:transform .35s var(--ease);}
.tr-cs-more:hover{transform:translateY(-4px);}
.tr-cs-more b{font:900 clamp(46px,5vw,64px)/1 var(--f);letter-spacing:-.03em;}
.tr-cs-more > span:not(.tr-cs-go){font-size:17px;font-weight:600;color:#C9D6EE;}
.tr-cs-more .tr-cs-go{color:#fff;margin-top:14px;}
@media(max-width:640px){
  .tr-cs-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -16px;padding:0 16px 8px;scrollbar-width:none;}
  .tr-cs-grid::-webkit-scrollbar{display:none;}
  .tr-cs-card,.tr-cs-more{flex:0 0 82%;scroll-snap-align:start;}
}
@media (prefers-reduced-motion: reduce){
  .tr-cs-card,.tr-cs-more,.tr-cs-img img,.tr-cs-go i{transition:none;}
}