/* Local Larry — motion layer (rev 5). Loaded after style.css. Everything here degrades to the static design. */
@property --sx{syntax:'<number>';inherits:true;initial-value:0}
@property --sy{syntax:'<number>';inherits:true;initial-value:0}
@property --sw{syntax:'<number>';inherits:true;initial-value:100}
@property --sh{syntax:'<number>';inherits:true;initial-value:100}
:root{--ease-out:cubic-bezier(.2,.8,.2,1);--ease-pop:cubic-bezier(.34,1.56,.64,1);--t-fast:180ms;--t-base:320ms;--t-slow:600ms}
body{overflow-x:clip}

/* ---------- Header: sticky, compacts on scroll ---------- */
.site-header{position:sticky;top:0;z-index:40;background:transparent;transition:height var(--t-base) var(--ease-out)}
.site-header::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);z-index:-1;box-shadow:0 1px 0 transparent;transition:box-shadow var(--t-base),background var(--t-base)}
.site-header.is-compact{height:70px}
.site-header.is-compact::before{box-shadow:0 1px 0 #e3e9f1,0 10px 30px #0e23440d}
.site-header .original-logo{transition:width var(--t-base) var(--ease-out)}
.site-header.is-compact .original-logo{width:168px}
.original-logo{mix-blend-mode:normal;aspect-ratio:538/226}
.original-logo img{position:static;width:100%;height:auto;left:auto;top:auto}
@media(max-width:700px){.site-header.is-compact{height:64px}.site-header.is-compact .original-logo{width:150px}.site-header.is-compact nav{top:60px}}

/* ---------- Small hover feedback ---------- */
.btn span,.text-link span{display:inline-block;transition:transform var(--t-fast) var(--ease-out)}
.btn:hover span,.text-link:hover span,.visual-demo-button:hover span:last-child{transform:translate(2px,-2px)}
.btn:active{transform:translateY(1px)}
.belief-step{transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base)}
.belief-step:hover{transform:translateY(-4px);box-shadow:0 18px 36px #0e23440f}

/* ---------- Scroll reveals ---------- */
html.ll-motion:not(.ll-reduce) .ll-rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .7s var(--ease-out);transition-delay:var(--rd,0ms)}
html.ll-motion:not(.ll-reduce) .ll-rv.ll-zoom{transform:translateY(24px) scale(.965)}
html.ll-motion:not(.ll-reduce) .ll-rv.is-in{opacity:1;transform:none}
html.ll-motion:not(.ll-reduce) .feature-points span.is-in i{animation:ll-pop .5s var(--ease-pop) calc(var(--rd,0ms) + 150ms) both}
html.ll-motion:not(.ll-reduce) .industry svg *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s ease calc(var(--rd,0ms) + 200ms)}
html.ll-motion:not(.ll-reduce) .industry.is-in svg *{stroke-dashoffset:0}
.intro-section h2 span.ll-fill{background:linear-gradient(90deg,var(--navy) 0 50%,#9aa6b6 50% 100%);background-size:200% 100%;background-position:calc(100% - var(--fill,0) * 100%) 0;-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- FAQ ---------- */
.faq-list summary span{display:inline-block;transition:transform var(--t-base) var(--ease-out)}
.faq-list details[open] summary span{transform:rotate(45deg)}
.faq-list details p{overflow:hidden}

/* ---------- Hero stage ---------- */
.hero-art>img{display:none}
.hero-stage{position:relative;width:100%;aspect-ratio:1448/1086;max-height:560px;margin:0 auto;--mx:0;--my:0}
.hero-stage::before{content:"";position:absolute;inset:-6% -4%;background:radial-gradient(closest-side,rgba(255,255,255,.96),rgba(255,255,255,.7) 62%,rgba(255,255,255,0));pointer-events:none}
.hero-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ring-line{fill:none;stroke:#8fc1ee;stroke-width:3;opacity:.75;stroke-dasharray:1;stroke-dashoffset:0}
.ring-spark{fill:var(--yellow);opacity:0;filter:drop-shadow(0 0 6px #ffc52baa)}
.hero-layer,.hero-larry{position:absolute;display:block;padding:0;border:0;background:none;transform:translate3d(calc(var(--mx) * var(--depth) * 1px),calc(var(--my) * var(--depth) * 1px),0);transition:transform .5s var(--ease-out)}
.hero-layer:hover,.hero-layer:focus-visible{z-index:4}
.hero-layer{cursor:pointer;z-index:2;border-radius:24px;-webkit-tap-highlight-color:transparent}
.hero-larry{z-index:3;pointer-events:none}
.hero-layer img,.hero-larry img{display:block;width:100%;height:auto;user-select:none}
.hl-hover,.hl-pop,.hl-larry-pop{display:block;position:relative}
.hl-hover{transition:transform var(--t-base) var(--ease-out),filter var(--t-base)}
.hero-layer:hover .hl-hover,.hero-layer:focus-visible .hl-hover{transform:translateY(-8px) scale(1.035);filter:drop-shadow(0 18px 26px #0e234426)}
.hero-layer:focus-visible{outline:none}
.hero-layer:focus-visible .hl-hover{outline:3px solid var(--blue);outline-offset:4px;border-radius:24px}
.hero-stage:has(.hero-layer:hover) .hero-layer:not(:hover) .hl-hover{filter:saturate(.85) opacity(.82)}
.hl-tag{position:absolute;left:50%;bottom:4%;transform:translate(-50%,8px);white-space:nowrap;background:var(--navy);color:#fff;font-size:12px;font-weight:700;padding:8px 13px;border-radius:99px;opacity:0;pointer-events:none;transition:opacity var(--t-fast),transform var(--t-base) var(--ease-out);box-shadow:0 10px 24px #0e234433;z-index:5}
.hl-tag b{color:var(--yellow);font-weight:700;margin-left:2px}
.hero-layer:hover .hl-tag,.hero-layer:focus-visible .hl-tag{opacity:1;transform:translate(-50%,0)}
.hl-plus{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--blue);color:#fff;font:700 20px/30px var(--font);text-align:center;box-shadow:0 6px 16px #0878d866,0 0 0 4px #fff;transition:transform var(--t-base) var(--ease-pop)}
.hero-layer:hover .hl-plus{transform:scale(1.15) rotate(90deg)}
.hl-pulse{position:absolute;width:14%;aspect-ratio:1;margin:-7% 0 0 -7%;border-radius:50%;pointer-events:none;opacity:0}
.hero-hint{display:flex;align-items:center;justify-content:center;gap:7px;margin:6px 0 0;font-size:12px;font-weight:600;color:var(--blue)}
.hero-hint svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Entrance — only when JS marks the stage as playing */
.ll-motion:not(.ll-reduce) .hero-stage.is-ready .hl-larry-pop{opacity:0}
.ll-motion:not(.ll-reduce) .hero-stage.is-ready .hl-pop{opacity:0}
.ll-motion:not(.ll-reduce) .hero-stage.is-ready .ring-line{stroke-dashoffset:1}
.ll-motion:not(.ll-reduce) .hero-stage.is-ready+.hero-hint{opacity:0}
.ll-motion:not(.ll-reduce) .hero-stage.is-playing .ring-line{animation:ll-draw 1.5s .25s var(--ease-out) forwards}
.ll-motion:not(.ll-reduce) .hero-stage.is-playing .ring-spark{animation:ll-spark 1.6s .25s linear forwards}
.ll-motion:not(.ll-reduce) .hero-stage.is-playing .hl-larry-pop{animation:ll-larry-in .8s .15s var(--ease-pop) forwards}
.ll-motion:not(.ll-reduce) .hero-stage.is-playing .hero-larry img{animation:ll-float 6s 1.4s ease-in-out infinite}
.ll-motion:not(.ll-reduce) .hero-stage.is-playing .hl-pop{animation:ll-burst .7s calc(.55s + var(--i) * .15s) var(--ease-pop) forwards}
.ll-motion:not(.ll-reduce) .hero-stage.is-playing .hl-phone img{animation:ll-buzz .55s 1.75s ease-in-out}
.ll-motion:not(.ll-reduce) .hero-stage.is-playing .hl-phone .hl-pulse{animation:ll-ring-red 1s 1.8s ease-out 2}
.ll-motion:not(.ll-reduce) .hero-stage.is-playing .hl-review .hl-pulse{animation:ll-tap 1s 2.1s ease-out}
.ll-motion:not(.ll-reduce) .hero-stage.is-playing .hl-voicemail .hl-pulse{animation:ll-ring-blue 1.1s 2.35s ease-out 2}
.ll-motion:not(.ll-reduce) .hero-stage.is-playing .hl-plus{animation:ll-plus .6s calc(2.5s + var(--i) * .1s) var(--ease-pop) both}
.ll-motion:not(.ll-reduce) .hero-stage.is-playing+.hero-hint{animation:ll-fade-up .6s 2.9s ease forwards}
.ll-motion:not(.ll-reduce) .hero .eyebrow,.ll-motion:not(.ll-reduce) .hero h1,.ll-motion:not(.ll-reduce) .hero-lead,.ll-motion:not(.ll-reduce) .hero-detail,.ll-motion:not(.ll-reduce) .hero .actions,.ll-motion:not(.ll-reduce) .hero-note{animation:ll-fade-up .7s var(--ease-out) both}
.ll-motion:not(.ll-reduce) .hero h1{animation-delay:.08s}
.ll-motion:not(.ll-reduce) .hero-lead{animation-delay:.2s}
.ll-motion:not(.ll-reduce) .hero-detail{animation-delay:.28s}
.ll-motion:not(.ll-reduce) .hero .actions{animation-delay:.36s}
.ll-motion:not(.ll-reduce) .hero-note{animation-delay:.44s}
.hero h1 span{position:relative;display:inline-block}
.hero h1 span::after{content:"";position:absolute;left:2%;right:2%;bottom:.02em;height:.09em;border-radius:9px;background:var(--yellow);transform-origin:left;transform:scaleX(1)}
.ll-motion:not(.ll-reduce) .hero h1 span::after{animation:ll-underline .7s .9s var(--ease-out) both}

/* ---------- Modal motion ---------- */
dialog{transform-origin:50% 50%}
#modal-content.ll-swap{animation:ll-swap .34s var(--ease-out)}
@media(max-width:640px){dialog{margin-bottom:0;max-height:92vh;border-radius:24px 24px 0 0}dialog::before{content:"";display:block;width:44px;height:5px;border-radius:9px;background:#d5dce6;margin:10px auto -4px;position:sticky;top:6px;z-index:6}}

/* ---------- Spotlight pop-ups ---------- */
dialog:has(.spot){max-width:1180px}
.spot{padding:46px 48px 30px}
.spot-head{max-width:640px}
.spot-head h2{font-size:clamp(28px,3.4vw,42px);letter-spacing:-1.6px;line-height:1.04;margin:10px 0 10px}
.spot-head p{color:var(--muted);font-size:15px;line-height:1.55;margin:0}
.spot-body{position:relative;display:grid;grid-template-columns:minmax(0,1.32fr) minmax(300px,.9fr);gap:56px;align-items:center;margin-top:26px}
.spot-left{min-width:0}
.spot-sides{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;background:var(--gray);border-radius:99px;padding:4px;margin-bottom:14px;--side:0}
.spot-sides button{position:relative;z-index:1;border:0;background:none;font:700 13px var(--font);padding:9px 22px;border-radius:99px;color:var(--navy);cursor:pointer;transition:color var(--t-base)}
.spot-sides button[aria-pressed=true]{color:#fff}
.spot-sides-pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:99px;background:var(--blue);transform:translateX(calc(var(--side) * 100%));transition:transform .42s var(--ease-pop);box-shadow:0 6px 14px #0878d844}
.spot-figure{position:relative;perspective:1600px}
.spot-turn{position:relative;transform-style:preserve-3d;--sx:0;--sy:0;--sw:100;--sh:100;transition:--sx .55s var(--ease-out),--sy .55s var(--ease-out),--sw .55s var(--ease-out),--sh .55s var(--ease-out)}
.spot-art{position:relative;overflow:hidden;border-radius:14px;box-shadow:0 24px 60px #0e234424,0 2px 6px #0e234414;background:#fff}
.spot-art.is-cut{box-shadow:none;background:none;overflow:visible}
.spot-art img{position:absolute;max-width:none;display:block;user-select:none}
.spot-art.is-cut img{position:static;width:100%;height:auto}
.spot-dim{position:absolute;inset:0;border-radius:14px;background:#0e2344;opacity:0;pointer-events:none;transition:opacity .45s ease}
.spot.has-sel .spot-dim{opacity:.4}
.spot.is-cutout .spot-dim{display:none}
.spot.is-cutout.has-sel .spot-base{filter:brightness(.62) saturate(.7);transition:filter .45s ease}
.spot-base{transition:filter .45s ease}
.spot-lens{position:absolute;inset:0;pointer-events:none;opacity:0;
  clip-path:inset(calc(var(--sy) * 1%) calc((100 - var(--sx) - var(--sw)) * 1%) calc((100 - var(--sy) - var(--sh)) * 1%) calc(var(--sx) * 1%) round 10px);
  transform:scale(1.13);transform-origin:calc((var(--sx) + var(--sw) / 2) * 1%) calc((var(--sy) + var(--sh) / 2) * 1%);
  transition:opacity .3s ease}
.spot-lens .spot-art{box-shadow:none}
.spot.has-sel .spot-lens{opacity:1}
.spot-ring{position:absolute;left:calc(var(--sx) * 1%);top:calc(var(--sy) * 1%);width:calc(var(--sw) * 1%);height:calc(var(--sh) * 1%);transform:scale(1.13);border-radius:12px;box-shadow:0 0 0 3px #fff,0 0 0 6px #0878d8cc,0 0 34px 8px #0878d855;opacity:0;pointer-events:none;transition:opacity .3s ease}
.spot.has-sel .spot-ring{opacity:1}
.spot-dots{position:absolute;inset:0}
.spot-dot{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;border:0;background:var(--blue);color:#fff;font:800 12px/28px var(--font);text-align:center;cursor:pointer;box-shadow:0 0 0 3px #fff,0 8px 18px #0e234440;transition:transform var(--t-base) var(--ease-pop),background var(--t-fast),opacity var(--t-fast);padding:0;z-index:4}
.spot-dot:hover{transform:scale(1.15)}
.spot-dot.is-active{background:var(--yellow);color:var(--navy);transform:scale(1.1)}
.spot-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--blue);opacity:0}
.spot.is-intro .spot-dot{animation:ll-dot-in .55s calc(.35s + var(--i) * .12s) var(--ease-pop) both}
.spot.is-intro .spot-dot::after{animation:ll-dot-ring 1s calc(.6s + var(--i) * .12s) ease-out both}
.spot-panel{min-width:0}
.spot-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 26px 22px;box-shadow:0 20px 50px #0e23440f;min-height:250px}
.spot-card-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.spot-num{flex:none;width:34px;height:34px;border-radius:50%;background:var(--yellow);color:var(--navy);font:800 14px/34px var(--font);text-align:center}
.spot-kicker{font-size:10px;font-weight:800;letter-spacing:1.2px;color:var(--blue);text-transform:uppercase}
.spot-card h3{font-size:22px;letter-spacing:-.6px;line-height:1.15;margin:0 0 8px}
.spot-card .spot-say{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 14px}
.spot-card ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.spot-card li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;font-weight:500}
.spot-card li i{flex:none;width:20px;height:20px;border-radius:50%;background:#e6f2fc;color:var(--blue);font:800 11px/20px var(--font);font-style:normal;text-align:center;margin-top:1px}
.spot-card .spot-cond{display:block;margin-top:14px;font-size:11px;line-height:1.45;color:#8a96a6}
.spot-tag{display:inline-block;margin-left:auto;font-size:9px;font-weight:800;letter-spacing:.8px;color:#8a6a00;background:#fff4d6;border-radius:99px;padding:5px 9px;text-transform:uppercase}
.spot-card.is-swapping .spot-card-inner{animation:ll-card-in .45s var(--ease-out)}
.spot-card.is-swapping li{animation:ll-fade-up .45s calc(.12s + var(--li) * .07s) var(--ease-out) both}
.spot-card.is-swapping li i{animation:ll-pop .45s calc(.2s + var(--li) * .07s) var(--ease-pop) both}
.spot-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.spot-chips button{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:99px;padding:7px 12px 7px 7px;font:600 12px var(--font);color:var(--navy);cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.spot-chips button b{width:20px;height:20px;border-radius:50%;background:var(--gray);font-size:10px;line-height:20px;text-align:center}
.spot-chips button:hover{transform:translateY(-1px);border-color:#b9d6f2}
.spot-chips button[aria-pressed=true]{background:#eaf4fd;border-color:var(--blue)}
.spot-chips button[aria-pressed=true] b{background:var(--yellow)}
.spot-wire{opacity:0;transition:opacity .2s;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.spot-wire path{fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round}
.spot-wire circle{fill:var(--blue)}
.spot-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.spot-tour{display:inline-flex;align-items:center;gap:9px;border:0;background:var(--navy);color:#fff;border-radius:99px;padding:11px 18px 11px 12px;font:700 13px var(--font);cursor:pointer;transition:transform var(--t-fast)}
.spot-tour:hover{transform:translateY(-1px)}
.spot-tour .play-circle{width:24px;height:24px;font-size:9px;background:#ffffff22;color:#fff}
.spot-tour[aria-pressed=true]{background:var(--blue)}
.spot-foot .text-link{font-size:13px}
.spot-foot small{flex-basis:100%;font-size:11px;color:#8a96a6;line-height:1.5}
.spot-progress{height:3px;border-radius:9px;background:var(--line);overflow:hidden;margin-top:14px;opacity:0;transition:opacity .3s}
.spot.is-touring .spot-progress{opacity:1}
.spot-progress i{display:block;height:100%;width:0;background:var(--blue)}
.spot[data-spot-key=phone] .spot-left{max-width:380px;margin:0 auto;width:100%}
@media(max-width:900px){
 .spot[data-spot-key=phone] .spot-left{max-width:300px}
 .spot{padding:38px 22px 24px}
 .spot-body{grid-template-columns:1fr;gap:20px}
 .spot-wire{display:none}
 .spot-card{min-height:0;padding:20px}
 .spot-left{max-width:560px;width:100%;margin:0 auto}
 .spot-art.is-cut{max-width:420px;margin:0 auto}
}

/* ---------- Keyframes ---------- */
@keyframes ll-fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes ll-pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes ll-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ll-spark{0%{opacity:0}8%{opacity:1}88%{opacity:1}100%{opacity:0}}
@keyframes ll-larry-in{0%{opacity:0;transform:translateY(26px) scale(.92)}100%{opacity:1;transform:none}}
@keyframes ll-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.1%)}}
@keyframes ll-burst{0%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.62)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes ll-buzz{0%,100%{transform:none}20%{transform:translateX(-1.6%) rotate(-1.4deg)}40%{transform:translateX(1.6%) rotate(1.4deg)}60%{transform:translateX(-1.2%) rotate(-1deg)}80%{transform:translateX(1%) rotate(.8deg)}}
@keyframes ll-ring-red{0%{opacity:1;box-shadow:0 0 0 0 #ef4444aa}100%{opacity:1;box-shadow:0 0 0 22px #ef444400}}
@keyframes ll-ring-blue{0%{opacity:1;box-shadow:0 0 0 0 #0878d8aa}100%{opacity:1;box-shadow:0 0 0 20px #0878d800}}
@keyframes ll-tap{0%{opacity:0;transform:scale(1.6);background:#0878d833}30%{opacity:1;transform:scale(.8);background:#0878d855}60%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 #0878d888}100%{opacity:0;transform:scale(1.8);box-shadow:0 0 0 18px #0878d800}}
@keyframes ll-plus{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.2)}80%{transform:scale(.95)}100%{opacity:1;transform:scale(1)}}
@keyframes ll-underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ll-swap{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes ll-dot-in{0%{opacity:0;transform:scale(.2)}70%{opacity:1;transform:scale(1.2)}100%{opacity:1;transform:scale(1)}}
@keyframes ll-dot-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.3)}}
@keyframes ll-card-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
 .site-header,.site-header .original-logo,.spot-turn,.spot-sides-pill,.hl-hover,.hero-layer{transition:none!important}
 .spot-lens,.spot-ring,.spot-dim{transition:none}
}
@media(max-width:700px){
 .hl-plus{width:22px;height:22px;margin:-11px 0 0 -11px;font-size:15px;line-height:22px;box-shadow:0 4px 10px #0878d855,0 0 0 3px #fff}
 .spot-dot{width:22px;height:22px;margin:-11px 0 0 -11px;font-size:10px;line-height:22px}
 .hero-hint{font-size:11px}
}
.spot.is-cutout .spot-left{max-width:470px;margin:0 auto;width:100%}

/* ---------- Services marquee ---------- */
.industries{padding-top:28px;padding-bottom:30px}
.industries>p{margin-bottom:18px}
.svc-marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.svc-track{--g:46px;display:flex;width:max-content;gap:var(--g);margin:0;padding:6px 0;list-style:none;animation:svc-scroll 46s linear infinite}
.svc-marquee:hover .svc-track,.svc-marquee:focus-within .svc-track{animation-play-state:paused}
.svc{display:flex;align-items:center;gap:10px;flex:none;color:var(--navy);font-size:13px;font-weight:600;letter-spacing:-.1px;white-space:nowrap}
.svc img{height:32px;width:auto;max-width:none;display:block;filter:saturate(.92)}
.svc span{opacity:.88}
@keyframes svc-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - var(--g) / 2))}}
@media(max-width:700px){.svc-track{--g:32px;animation-duration:36s}.svc{font-size:12px;gap:8px}.svc img{height:26px}}
@media(prefers-reduced-motion:reduce){.svc-marquee{-webkit-mask-image:none;mask-image:none}.svc-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:16px 30px}.svc[aria-hidden=true]{display:none}}
.hero-hint{margin-bottom:8px}.hero-art-caption{margin-top:0}

/* ---------- Stick to the basics (rev 9) ---------- */
.basics{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:44px auto 0;max-width:1080px;text-align:center}
.basics-track{position:absolute;left:12.5%;right:12.5%;top:36px;height:2px;border-radius:2px;background:repeating-linear-gradient(90deg,#d6e2ef 0 6px,transparent 6px 12px);pointer-events:none}
.basics-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--blue);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.basics-fill::after{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px #ffc52b33}
.basic{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 10px 18px;border-radius:20px;color:var(--navy);text-decoration:none;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.basic-ic{position:relative;z-index:1;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #e3e9f1,0 10px 24px #0e23440d;margin-bottom:8px;transition:background .35s,box-shadow .35s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.basic-ic svg{width:34px;height:34px;fill:none;stroke:var(--navy);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.basic-num{font-size:10px;font-weight:800;letter-spacing:1px;color:#9aa6b6}
.basic b{font-size:17px;letter-spacing:-.4px}
.basic small{font-size:12.5px;line-height:1.5;color:var(--muted);max-width:210px}
.basic em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--blue);opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.basic:hover em,.basic:focus-visible em,.basic.is-on em{opacity:1;transform:none}
.basic:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.basic.is-on{transform:translateY(-4px)}
.basic.is-on .basic-ic{background:#eaf4fd;box-shadow:0 0 0 2px var(--blue),0 14px 30px #0878d82e;transform:scale(1.06)}
.basic.is-on .basic-num,.basic.is-done .basic-num{color:var(--blue)}
.basic.is-done .basic-ic{box-shadow:0 0 0 2px #b9d6f2,0 10px 24px #0e23440d}
.basic .b-w,.basic .b-chat,.basic .b-spark{opacity:.0}
.basic.is-done .b-w,.basic.is-done .b-chat{opacity:1}
.basic svg .b-w{stroke:var(--blue)}
.basic svg .b-chat path:first-child{fill:#fff;stroke:var(--blue)}
.basic svg .b-dots{stroke:var(--blue);stroke-width:2.2}
.basic svg .b-spark{stroke:#e9a800;stroke-width:1.6}
.basic svg .b-heart-fill{fill:#ef4444;stroke:none;opacity:0;transform-origin:12px 12px;transform-box:view-box}
.basic.is-done .b-heart-fill{opacity:.9}
.b-min,.b-hr{transform-origin:10.5px 13px;transform-box:view-box}
.b-horn,.b-hands,.b-heart{transform-origin:12px 12px;transform-box:view-box}
.b-chat{transform-origin:20px 9px;transform-box:view-box}
.basic.is-on .b-horn{animation:b-tilt 1.2s ease-in-out}
.basic.is-on .b-w{animation:b-wave 1.2s ease-out both}
.basic.is-on .b-w2{animation-delay:.15s}.basic.is-on .b-w3{animation-delay:.3s}
.basic.is-on .b-min{animation:b-spin 1s cubic-bezier(.4,0,.2,1)}

.basic.is-on .b-chat{animation:b-pop .5s .9s cubic-bezier(.34,1.56,.64,1) both}
.basic.is-on .b-dots{animation:b-blink 1s 1.2s steps(2) 2}
.basic.is-on .b-hands{animation:b-shake .9s ease-in-out}
.basic.is-on .b-spark{animation:b-spark .9s .5s ease-out both}
.basic.is-on .b-s2{animation-delay:.65s}.basic.is-on .b-s3{animation-delay:.8s}
.basic.is-on .b-heart-fill{animation:b-fill .5s .2s ease-out both,b-beat 1.1s .2s ease-in-out}
.basic.is-on .b-heart{animation:b-beat 1.1s .2s ease-in-out}
@keyframes b-tilt{0%,100%{transform:none}30%{transform:rotate(-8deg)}60%{transform:rotate(4deg)}}
@keyframes b-wave{0%{opacity:0;transform:translateX(-3px)}40%{opacity:1}100%{opacity:1;transform:none}}
@keyframes b-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes b-pop{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:none}}
@keyframes b-blink{50%{opacity:.2}}
@keyframes b-shake{0%,100%{transform:none}20%{transform:translateY(-1.4px) rotate(-4deg)}40%{transform:translateY(1.4px) rotate(3deg)}60%{transform:translateY(-1px) rotate(-2deg)}80%{transform:translateY(.6px)}}
@keyframes b-spark{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(1)}}
@keyframes b-fill{from{opacity:0}to{opacity:.9}}
@keyframes b-beat{0%,100%{transform:scale(1)}20%{transform:scale(1.18)}40%{transform:scale(.96)}60%{transform:scale(1.1)}}
.b-spark{transform-box:fill-box;transform-origin:center}
@media(max-width:760px){
 .basics{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 12px;margin-top:34px}
 .basics-track{display:none}
 .basic-ic{width:62px;height:62px}.basic-ic svg{width:30px;height:30px}
 .basic b{font-size:15px}.basic small{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.basic,.basic-ic,.basics-fill{transition:none}.basic .b-w,.basic .b-chat{opacity:1}.basic .b-heart-fill{opacity:.9}}


/* ---------- Sample outreach fan (rev 11) ---------- */
.spot-fan{position:relative;padding-top:70px;margin-top:10px}
.spot-fan .spot-to-sample{margin-top:0!important;position:relative;z-index:2;white-space:nowrap;font-size:13px;padding:16px 22px;gap:16px}
.spot-fan-cards{position:absolute;left:18px;top:0;width:210px;height:92px;border:0;background:none;padding:0;cursor:pointer;z-index:1}
.fan-card{position:absolute;bottom:0;width:104px;aspect-ratio:815/562;border-radius:6px;overflow:hidden;background:#fff;box-shadow:0 10px 22px #0e234433,0 0 0 1px #0e234414;transform-origin:50% 100%;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.fan-card img{position:absolute;width:205.15%;max-width:none;top:-33.81%;left:-1.35%}
.fan-back img{left:-103.8%}
.fan-back{left:0;transform:translateY(8px) rotate(-9deg)}
.fan-front{left:78px;transform:translateY(4px) rotate(6deg)}
.spot-fan:hover .fan-back,.spot-fan-cards:focus-visible .fan-back{transform:translate(-8px,-6px) rotate(-14deg)}
.spot-fan:hover .fan-front,.spot-fan-cards:focus-visible .fan-front{transform:translate(8px,-10px) rotate(10deg)}
.fan-tag{position:absolute;left:150px;top:-4px;font-style:normal;font:800 9px/1 var(--font);letter-spacing:.6px;text-transform:uppercase;color:var(--blue);background:#fff;border-radius:99px;padding:5px 8px;box-shadow:0 3px 8px #0e234422;white-space:nowrap;z-index:3}
.spot-pane-how:not([hidden]) .fan-back{animation:fan-in-b .7s .5s cubic-bezier(.34,1.56,.64,1) both}
.spot-pane-how:not([hidden]) .fan-front{animation:fan-in-f .7s .64s cubic-bezier(.34,1.56,.64,1) both}
.spot-pane-how:not([hidden]) .fan-tag{animation:fan-tag .4s 1.2s ease both}
@keyframes fan-in-b{0%{opacity:0;transform:translateY(70px) rotate(0) scale(.7)}100%{opacity:1;transform:translateY(8px) rotate(-9deg)}}
@keyframes fan-in-f{0%{opacity:0;transform:translateY(70px) rotate(0) scale(.7)}100%{opacity:1;transform:translateY(4px) rotate(6deg)}}
@keyframes fan-tag{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.spot-route{grid-template-columns:minmax(0,1.5fr) minmax(290px,.8fr)!important}

/* ---------- How it all connects (rev 12): one postcard, front + back ---------- */
.connect-section{background:linear-gradient(180deg,#f5f8fc,#fff 70%);padding:80px 0 70px}
.cx-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 18px 44px #0e23440a;overflow:hidden}
.cx-stat{padding:24px 22px 20px;display:flex;flex-direction:column;gap:6px;border-left:1px solid var(--line)}
.cx-stat:first-child{border-left:0}
.cx-stat b{font-size:40px;line-height:1;letter-spacing:-1.6px;color:var(--blue);font-variant-numeric:tabular-nums}
.cx-stat span{font-size:13.5px;line-height:1.45;color:var(--navy);font-weight:600}
.cx-stat small{font-size:10.5px;color:#8a96a6;margin-top:auto}
.cx-stat small a{color:inherit;text-decoration:underline;text-decoration-color:#c9d3df;text-underline-offset:2px}
.cx-head{text-align:center;max-width:740px;margin:70px auto 0}
.cx-head h2{margin:12px 0 0}
.cx-head h2 span{color:#8c9bb0}
.cx-head p{color:var(--muted);font-size:15px;line-height:1.75;margin:18px auto 0;max-width:620px}
.cx-map{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.85fr);gap:84px;align-items:center;margin:44px auto 0;max-width:1120px}
.cx-left{display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0;position:relative;z-index:3}
.cx-sides{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;background:#e9eff7;border-radius:99px;padding:4px;--side:0}
.cx-sides button{position:relative;z-index:1;border:0;background:none;font:700 14px var(--font);padding:10px 30px;border-radius:99px;color:var(--navy);cursor:pointer;transition:color .3s}
.cx-sides button[aria-pressed=true]{color:#fff}
.cx-sides-pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:99px;background:var(--blue);transform:translateX(calc(var(--side) * 100%));transition:transform .45s cubic-bezier(.34,1.56,.64,1);box-shadow:0 6px 14px #0878d844}
.cx-pcw{position:relative;width:100%;aspect-ratio:815/562;perspective:1800px}
.cx-turn{position:absolute;inset:0;transform-style:preserve-3d}
.cx-pc{position:absolute;inset:0;border-radius:12px;overflow:hidden;box-shadow:0 30px 70px #0e234430,0 2px 6px #0e234418;background:#fff}
.cx-pc img{position:absolute;top:-33.81%;width:205.15%;max-width:none;user-select:none;transition:filter .5s}
.cx-pcw[data-side=front] .cx-pc img{left:-1.35%}
.cx-pcw[data-side=back] .cx-pc img{left:-103.8%}
.cx-pcw.has-pop .cx-pc img{filter:brightness(.6) saturate(.75)}
.cx-pop{position:absolute;overflow:hidden;border-radius:8px;opacity:0;pointer-events:none;z-index:3;transform:none;transform-origin:var(--o,50% 50%);transition:transform .6s cubic-bezier(.34,1.4,.64,1),opacity .3s,box-shadow .5s}
.cx-pop img{position:absolute;max-width:none;user-select:none}
.cx-pop.is-on{opacity:1;transform:scale(var(--s));box-shadow:0 0 0 2px #fff,0 0 0 4px var(--blue),0 0 36px 6px #0878d866,0 24px 50px #0e234466}
.cx-pop em{position:absolute;left:6%;bottom:-1px;font:800 8px/1 var(--font);font-style:normal;letter-spacing:.6px;text-transform:uppercase;background:var(--yellow);color:var(--navy);padding:4px 6px;border-radius:5px 5px 0 0;opacity:0;transition:opacity .3s .4s}
.cx-pop.is-on em{opacity:1}
.cx-hot{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;padding:0;border:0;border-radius:50%;background:var(--blue);color:#fff;font:800 12px/28px var(--font);text-align:center;cursor:pointer;box-shadow:0 0 0 3px #fff,0 8px 18px #0e234455;z-index:4;transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .2s,opacity .3s}
.cx-hot.is-hi{background:var(--yellow);color:var(--navy);transform:scale(1.15)}
.cx-pcw.has-pop .cx-hot:not(.is-hi){opacity:.35}
.cx-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%}
.cx-tabs button{flex:1 1 0;min-width:0;border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 10px;font:700 12.5px/1.2 var(--font);color:var(--navy);cursor:pointer;transition:background .25s,border-color .25s,color .25s,box-shadow .25s,transform .2s}
.cx-tabs button:hover{border-color:#9cc8f0;transform:translateY(-1px)}
.cx-tabs button[aria-selected=true]{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 8px 18px #0878d833}
.cx-tabs.is-swap button{animation:cx-tab-in .45s cubic-bezier(.2,.8,.2,1) both}
.cx-tabs.is-swap button:nth-child(2){animation-delay:.05s}.cx-tabs.is-swap button:nth-child(3){animation-delay:.1s}.cx-tabs.is-swap button:nth-child(4){animation-delay:.15s}
.cx-pc-link{border:0;background:none;font:700 13px var(--font);color:var(--blue);cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.cx-pc-link span{display:inline-block;transition:transform .2s}
.cx-pc-link:hover span{transform:translate(2px,-2px)}
.cx-panel{position:relative;z-index:2;background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 26px 24px;box-shadow:0 20px 50px #0e23440f;min-height:250px;display:flex;flex-direction:column;transition:border-color .4s,box-shadow .4s}
.cx-panel.is-hit{border-color:var(--blue);box-shadow:0 0 0 4px #0878d81a,0 26px 56px #0878d822}
.cx-panel.is-hit::after{content:"";position:absolute;inset:-2px;border-radius:23px;border:2px solid var(--blue);animation:cx-burst .8s ease-out forwards;pointer-events:none}
.cx-pn-top{display:flex;align-items:center;gap:10px}
.cx-pn-num{flex:none;width:32px;height:32px;border-radius:50%;background:var(--yellow);color:var(--navy);font:800 13px/32px var(--font);text-align:center}
.cx-pn-kicker{font-size:10px;font-weight:800;letter-spacing:1.1px;color:var(--blue);text-transform:uppercase}
.cx-pn-step{margin-left:auto;font-size:11px;font-weight:700;color:#9aa6b6;font-variant-numeric:tabular-nums}
.cx-panel h3{font-size:24px;letter-spacing:-.7px;line-height:1.15;margin:14px 0 8px}
.cx-panel p{font-size:14px;line-height:1.65;color:var(--muted);margin:0}
.cx-pn-btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:auto;padding-top:20px}
.cx-pn-btns .btn{margin:0!important;width:auto!important;padding:12px 18px;font-size:12.5px;gap:12px}
.cx-pn-btns .btn span{font-size:16px}
.cx-pn-btns .text-link{font-size:12.5px}
.cx-pn-dots{display:flex;gap:6px;margin-top:18px}
.cx-pn-dots i{width:22px;height:4px;border-radius:9px;background:#e3e9f1;transition:background .3s,width .3s}
.cx-pn-dots i.on{background:var(--blue);width:34px}
.cx-panel.is-swap .cx-pn-body{animation:cx-panel-in .45s cubic-bezier(.2,.8,.2,1)}
.cx-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:4}
.cx-laser{fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round;opacity:0;filter:drop-shadow(0 0 3px #0878d8aa) drop-shadow(0 0 8px #0878d855)}
.cx-laser-dot{fill:#fff;stroke:var(--blue);stroke-width:2.5;opacity:0;filter:drop-shadow(0 0 6px #0878d8)}
.cx-pause{position:absolute;right:0;bottom:-40px;border:1px solid var(--line);background:#fff;border-radius:99px;padding:5px 12px;font:700 11px var(--font);color:var(--muted);cursor:pointer}
.cx-pause:hover{color:var(--navy)}
.cx-check{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 150px auto;gap:10px;align-items:center;margin:72px auto 0;max-width:1060px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px 16px 16px 22px;box-shadow:0 14px 34px #0e23440a}
.cx-check-copy b{display:flex;align-items:center;gap:8px;font-size:15px;letter-spacing:-.3px}
.cx-check-copy span{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.g-dot{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0);color:#fff;font:800 11px/1 var(--font)}
.cx-check input,.cx-check select{height:46px;border:1px solid #d6e0eb;border-radius:12px;padding:0 14px;font:500 14px var(--font);color:var(--navy);background:#fff;min-width:0;width:100%}
.cx-check input:focus,.cx-check select:focus{outline:2px solid var(--blue);outline-offset:1px}
.cx-check .btn{margin:0!important;width:auto!important;height:46px;padding:0 20px;font-size:13px;gap:12px;white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cx-note{text-align:center;font-size:11px;line-height:1.6;color:#8a96a6;margin:24px auto 0;max-width:700px}
@keyframes cx-burst{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.06)}}
@keyframes cx-panel-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cx-tab-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:1000px){
 .cx-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cx-stat:nth-child(3){border-left:0}
 .cx-stat:nth-child(n+3){border-top:1px solid var(--line)}
 .cx-map{grid-template-columns:1fr;gap:18px;max-width:600px}
 .cx-pop.is-on{transform:scale(calc(1 + (var(--s) - 1) * .5))}
 .cx-wires,.cx-pause{display:none}
 .cx-panel{min-height:0;padding:20px}
 .cx-panel h3{font-size:20px}
 .cx-tabs button{flex:1 1 40%}
 .cx-check{grid-template-columns:1fr 1fr;padding:16px}
 .cx-check-copy,.cx-check input{grid-column:1/-1}
 .cx-check .btn{width:100%!important}
}
@media(max-width:520px){.cx-stat{padding:18px 14px}.cx-stat b{font-size:30px}.cx-stat span{font-size:12.5px}.connect-section{padding:56px 0}.cx-tabs button{font-size:11.5px;padding:10px 6px}.cx-sides button{padding:9px 24px}}
@media(prefers-reduced-motion:reduce){.cx-pop,.cx-pc img,.fan-card,.cx-sides-pill{transition:none!important;animation:none!important}.cx-panel.is-swap .cx-pn-body,.cx-tabs.is-swap button{animation:none}}