:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(90px + env(safe-area-inset-top,0px))}
*{box-sizing:border-box}
:root{--bg:#0b0b0b;--panel:#101010;--orange:#ff6508;--orange2:#ff8a16;--white:#f8f8f8;--muted:#b9b9b9;--line:rgba(255,112,15,.7)}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--white);font-family:Inter,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.container{width:min(1120px,calc(100% - 64px));margin-inline:auto}
.site-header{height:92px;display:flex;align-items:center;justify-content:space-between;gap:28px;position:relative;z-index:10}
.brand{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}
.brand-mark{font-size:31px;color:var(--orange);transform:rotate(-15deg);line-height:1}
.brand-name{font-size:14px;font-weight:700;line-height:1.05;letter-spacing:-.4px}
.brand-name small{display:block;color:var(--orange);font-size:12px}
.main-nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.main-nav a{font-size:11px;color:#dedede;transition:color .2s}
.main-nav a:hover{color:var(--orange)}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 28px;border-radius:99px;background:linear-gradient(100deg,#ff4f08,#ff7809);border:1px solid #ffb06a;box-shadow:0 0 0 2px rgba(255,101,8,.1);font-size:12px;font-weight:700;color:#fff;transition:transform .2s,filter .2s}
.button:hover{transform:translateY(-2px);filter:brightness(1.1)}
.button-small{min-height:32px;padding:0 23px;font-size:10px;background:#fff;color:#f46a12;border:0}
.menu-toggle{display:none}
.hero{min-height:470px;display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative;isolation:isolate;padding-top:28px;padding-bottom:35px}
.hero-copy{position:relative;z-index:2;padding:25px 0 48px}
.eyebrow{font-size:9px;letter-spacing:2px;color:var(--orange);font-weight:700;margin:0 0 16px}
h1{font-size:clamp(34px,3.05vw,47px);line-height:1.13;letter-spacing:-1.8px;margin:0 0 16px;font-weight:750}
h1 span,.process h2 span{color:var(--orange)}
.hero-description{font-size:11px;line-height:1.65;color:#c4c4c4;max-width:405px;margin:0 0 24px}
.mobile-break{display:none}
.hero-art{height:445px;position:absolute;right:0;top:0;width:51%;overflow:visible;z-index:1}
.orange-orb{position:absolute;border-radius:50%;background:linear-gradient(130deg,#ff6a08 10%,#ff8a00 65%,#ff9b19);box-shadow:inset 25px 0 55px rgba(255,187,57,.18)}
.orb-one{width:490px;height:490px;right:-120px;top:-88px}
.orb-two{width:385px;height:385px;right:-56px;top:-30px;background:linear-gradient(135deg,#ff9a19,#ff6407);border:1px solid rgba(255,220,175,.5);box-shadow:inset 15px 0 30px rgba(255,220,140,.12)}
.stat{position:absolute;z-index:2;display:flex;align-items:center;gap:9px;min-width:145px;padding:8px 12px;border:1px solid rgba(255,255,255,.45);border-radius:50px;background:rgba(255,255,255,.18);box-shadow:0 3px 12px rgba(0,0,0,.08);backdrop-filter:blur(6px);color:white}
.stat b{display:block;font-size:11px;line-height:1.1}.stat small{display:block;font-size:8px;line-height:1.25}
.avatars{display:flex;padding-left:2px}.avatars i{font-style:normal;display:grid;place-items:center;width:22px;height:22px;margin-left:-5px;border:1px solid white;background:#ddd;border-radius:50%;font-size:12px;overflow:hidden}
.stat-clients{right:34%;top:22%}.stat-team{right:3%;top:36%}.stat-projects{left:16%;bottom:21%;min-width:160px}
.project-icons{display:grid;place-items:center;width:45px;height:26px;background:#fff;color:#ff6209;border-radius:20px;font-size:15px;white-space:nowrap}
.trusted{background:#030303;border-top:1px solid #181818;border-bottom:1px solid #181818}
.trusted-inner{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:35px}
.trusted h2{font-size:21px;line-height:1.15;letter-spacing:-.6px;margin:0}
.client-logos{display:flex;align-items:center;gap:35px}
.logo-item{font-size:15px;font-weight:700;white-space:nowrap;display:flex;align-items:center;gap:7px}
.logo-symbol{font-size:25px;line-height:1}.bolt{font-size:30px}
.process{position:relative;padding-top:60px;padding-bottom:60px;background:radial-gradient(ellipse at 0% 55%,rgba(255,86,0,.17),transparent 32%),radial-gradient(ellipse at 100% 90%,rgba(255,86,0,.15),transparent 28%)}
.process-heading{text-align:center}
.outline-label{display:inline-block;border:1px solid #69503e;border-radius:30px;padding:5px 13px;font-size:9px;color:#f0e0d5;margin-bottom:12px;box-shadow:0 0 12px rgba(255,100,0,.08)}
.process h2{font-size:clamp(25px,2.4vw,34px);line-height:1.2;letter-spacing:-1px;margin:0}
.process-intro{display:flex;justify-content:space-between;max-width:620px;margin:30px auto 6px;text-align:center;gap:35px}
.process-intro p{font-size:10px;line-height:1.5;color:#ddd;flex:1}
.process-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;position:relative;align-items:start;margin:10px 18px 0}
.process-flow:before{content:"";position:absolute;top:58px;left:7%;right:7%;height:1px;background:linear-gradient(90deg,transparent,var(--orange),var(--orange),transparent);opacity:.8}
.process-step{position:relative;z-index:1;text-align:center;min-width:0}
.step-circle{width:94px;height:94px;margin:10px auto 17px;border-radius:50%;border:1px solid #a74b12;background:radial-gradient(circle,#242424,#151515);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:0 0 0 5px rgba(255,101,8,.035),0 0 20px rgba(255,101,8,.07);position:relative}
.step-circle:before{content:"";position:absolute;inset:-8px;border:1px dashed rgba(255,111,17,.65);border-radius:50%;transform:rotate(18deg)}
.step-circle:after{content:"";position:absolute;width:6px;height:6px;background:var(--orange);border-radius:50%;top:-8px;left:calc(50% - 3px)}
.step-icon{font-size:23px;color:var(--orange);line-height:1}
.step-circle b{font-size:9px;font-weight:500}
.process-step p{font-size:9px;line-height:1.5;color:#c8c8c8;max-width:150px;margin:0 auto}
.contact-strip{border-top:1px solid #242424;border-bottom:1px solid #242424;background:#080808}
.contact-inner{display:flex;justify-content:space-between;align-items:center;padding-block:35px;gap:25px}
.contact-inner .eyebrow{margin-bottom:8px}.contact-inner h2{font-size:25px;margin:0;letter-spacing:-.7px}
.footer{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer p{font-size:10px;color:#8c8c8c}
@media(min-width:1400px){.container{width:min(1180px,calc(100% - 80px))}.hero{min-height:500px}.hero-art{height:490px}}
@media(max-width:900px){.container{width:min(100% - 44px,720px)}.site-header{height:78px}.main-nav{gap:15px}.main-nav a{font-size:10px}.hero{min-height:430px;grid-template-columns:1fr 1fr}.hero-art{width:52%;height:410px}.orb-one{width:390px;height:390px;right:-125px;top:-25px}.orb-two{width:300px;height:300px;right:-70px;top:15px}.hero-description{max-width:330px}.stat{transform:scale(.88);transform-origin:center}.stat-clients{right:25%}.stat-team{right:-3%}.trusted h2{font-size:18px}.client-logos{gap:18px}.logo-item{font-size:12px}.process-flow{gap:8px;margin-inline:0}.step-circle{width:78px;height:78px}.process-flow:before{top:49px}.step-circle b{font-size:8px}.process-step p{font-size:8px}}
@media(max-width:640px){
  html{scroll-padding-top:72px}.container{width:calc(100% - 34px)}
  .site-header{height:70px;gap:12px}.brand-mark{font-size:28px}.brand-name{font-size:13px}.brand-name small{font-size:11px}
  .menu-toggle{display:flex;flex-direction:column;gap:4px;justify-content:center;align-items:center;width:36px;height:36px;background:transparent;border:1px solid #333;border-radius:9px;margin-left:auto}
  .menu-toggle span{width:16px;height:1.5px;background:#fff;display:block;transition:transform .2s}
  .header-cta{display:none}
  .main-nav{display:none;position:absolute;top:62px;left:0;right:0;background:#111;border:1px solid #292929;border-radius:14px;padding:15px;flex-direction:column;align-items:stretch;gap:0;box-shadow:0 18px 35px rgba(0,0,0,.4)}
  .main-nav.open{display:flex}.main-nav a{padding:13px 10px;font-size:13px;border-bottom:1px solid #242424}.main-nav a:last-child{border-bottom:0}
  .hero{display:flex;flex-direction:column;align-items:stretch;padding-top:22px;padding-bottom:0;min-height:0}
  .hero-copy{text-align:center;padding:10px 0 0;z-index:2}
  .eyebrow{font-size:8px;margin-bottom:12px}
  h1{font-size:clamp(29px,8.1vw,39px);line-height:1.13;letter-spacing:-1.2px;margin-bottom:13px}
  .mobile-break{display:block}
  .hero-description{font-size:10px;line-height:1.65;max-width:340px;margin:0 auto 18px;color:#c4c4c4}
  .hero .button{min-height:36px;font-size:10px;padding-inline:24px}
  .hero-art{position:relative;right:auto;top:auto;width:calc(100% + 34px);height:290px;margin:0 -17px;overflow:hidden;flex:none}
  .orb-one{width:360px;height:360px;right:-83px;top:26px}
  .orb-two{width:280px;height:280px;right:-24px;top:66px}
  .stat{transform:scale(.78);padding:7px 10px;min-width:140px;gap:7px}
  .stat-clients{right:3%;top:34%}.stat-team{right:30%;top:57%}.stat-projects{left:3%;bottom:10%;min-width:155px}
  .trusted-inner{min-height:0;display:block;padding-top:25px;padding-bottom:22px;text-align:center}
  .trusted h2{font-size:21px;line-height:1.2;margin-bottom:21px}
  .client-logos{justify-content:space-between;gap:9px;flex-wrap:nowrap}
  .logo-item{font-size:9px;gap:4px}.logo-symbol{font-size:18px}.bolt{font-size:23px}
  .process{padding-top:35px;padding-bottom:38px;background:radial-gradient(ellipse at 0% 45%,rgba(255,86,0,.16),transparent 45%),radial-gradient(ellipse at 100% 95%,rgba(255,86,0,.13),transparent 35%)}
  .outline-label{font-size:8px;padding:5px 12px;margin-bottom:10px}
  .process h2{font-size:25px;letter-spacing:-.8px}
  .process-intro{display:none}
  .process-flow{display:flex;flex-direction:column;gap:10px;margin:27px 0 0;align-items:stretch}
  .process-flow:before{left:34px;right:auto;top:28px;bottom:28px;width:1px;height:auto;background:linear-gradient(transparent,var(--orange),var(--orange),transparent)}
  .process-step{display:grid;grid-template-columns:70px 1fr;align-items:center;text-align:left;gap:15px;min-height:78px}
  .step-circle{width:62px;height:62px;margin:0;gap:4px}
  .step-circle:before{inset:-5px}.step-circle:after{width:5px;height:5px;top:-5px;left:calc(50% - 2.5px)}
  .step-icon{font-size:19px}.step-circle b{font-size:8px}
  .process-step p{font-size:9px;line-height:1.5;max-width:none;margin:0;text-align:left}
  .contact-inner{padding-block:27px;flex-direction:column;align-items:flex-start}.contact-inner h2{font-size:23px}.contact-inner .button{min-height:38px;font-size:11px}
  .footer{min-height:75px}.footer p{font-size:8px;text-align:right}
}
@media(max-width:360px){.container{width:calc(100% - 26px)}h1{font-size:28px}.hero-art{width:calc(100% + 26px);margin-inline:-13px;height:260px}.orb-one{width:320px;height:320px;right:-90px}.orb-two{width:245px;height:245px;right:-35px}.stat-clients{right:-3%}.stat-team{right:23%}.client-logos{gap:5px}.logo-item{font-size:8px}.process h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* =====================================================
   v2 — Orbits, motion system & new sections
   ===================================================== */
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}
.accent{color:var(--orange)}

/* ---------- Scroll progress + sticky header ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;background:linear-gradient(90deg,#ff4f08,#ffb34a);transform-origin:left;transform:scaleX(var(--p,0));pointer-events:none}
.header-wrap{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:background .3s,border-color .3s,backdrop-filter .3s}
.header-wrap.scrolled{background:rgba(9,9,9,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:#1f1f1f}
.main-nav a{position:relative}
.main-nav a:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.main-nav a.active{color:var(--orange)}.main-nav a.active:after,.main-nav a:hover:after{transform:scaleX(1)}
.menu-toggle span{transition:transform .25s,opacity .2s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ---------- Buttons ---------- */
.button{position:relative;overflow:hidden}
.button:after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s}
.button:hover:after{left:140%}

/* ---------- Reveal system ---------- */
.reveal{transition:opacity .8s ease var(--d,0ms),translate .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .35s ease,border-color .35s ease,box-shadow .35s ease,background .35s ease}
html.js .reveal{opacity:0;translate:0 32px}
html.js .reveal.in{opacity:1;translate:0 0}

/* ---------- HERO: entrance, shimmer, parallax ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes orbIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer{to{background-position:200% 0}}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 20px rgba(255,101,8,.45),0 0 0 2px rgba(255,255,255,.3)}50%{box-shadow:0 0 38px rgba(255,138,22,.8),0 0 0 4px rgba(255,255,255,.18)}}

.hero-copy>*{animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>:nth-child(1){animation-delay:.05s}.hero-copy>:nth-child(2){animation-delay:.18s}.hero-copy>:nth-child(3){animation-delay:.32s}.hero-copy>:nth-child(4){animation-delay:.46s}
h1>span{background:linear-gradient(90deg,#ff6508,#ffb34a,#ff6508);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 6s linear infinite}
.orange-orb{animation:orbIn 1.2s cubic-bezier(.2,.7,.2,1) both;translate:calc(var(--px,0) * -16px) calc(var(--py,0) * -16px)}
.orb-two{animation-delay:.15s;translate:calc(var(--px,0) * 22px) calc(var(--py,0) * 22px)}
.stat{animation:floaty 6s ease-in-out infinite}
.stat-team{animation-duration:7.5s;animation-delay:-2s}.stat-projects{animation-duration:6.8s;animation-delay:-4s}

/* Orbiting planets — solar spheres that revolve around each orb */
.orbit{position:absolute;inset:calc(var(--gap) * -1);border-radius:50%;pointer-events:none;animation:orbit-spin var(--t) linear infinite}
.orbit:before{content:"";position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(255,255,255,.2)}
.orbit-planet{position:absolute;left:50%;top:0;width:var(--p);height:var(--p);margin:calc(var(--p) / -2) 0 0 calc(var(--p) / -2);border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffb34a,#ff6508 68%,#d93d00);box-shadow:0 0 25px rgba(255,101,8,.5),0 0 0 2px rgba(255,255,255,.3);animation:orbit-spin var(--t) linear infinite reverse,pulse-glow 3.2s ease-in-out infinite}
.orb-one{--p:14px;--gap:24px;--t:24s}
.orb-two{--p:28px;--gap:18px;--t:15s}
.orb-two .orbit{animation-direction:reverse}
.orb-two .orbit-planet{animation-direction:normal,normal}

/* ---------- Shared section styles ---------- */
.section{padding:90px 0;position:relative}
.section-head{text-align:center;max-width:640px;margin:0 auto 48px}
.section-head h2,.t-copy h2,.faq-copy h2{font-size:clamp(26px,3vw,38px);line-height:1.18;letter-spacing:-1.1px;margin:0 0 14px;font-weight:750}
.section-sub{font-size:13px;line-height:1.75;color:#bdbdbd;margin:0}
.section-sub.left{margin-bottom:26px;max-width:420px}
.outline-label{display:inline-block}

/* spotlight cards */
.spot{position:relative;overflow:hidden}
.spot:before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,101,8,.2),transparent 70%);opacity:0;transition:opacity .35s;pointer-events:none}
.spot:hover:before{opacity:1}

/* ---------- SERVICES ---------- */
.services,.work,.faq{isolation:isolate}
.services:before,.work:before,.faq:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;z-index:-1;pointer-events:none}
.services:before{background:radial-gradient(ellipse at 100% 0%,rgba(255,86,0,.13),transparent 35%)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.service-card{padding:30px 26px 26px;border:1px solid #262626;border-radius:20px;background:linear-gradient(160deg,#151515,#0c0c0c)}
.service-card:hover{transform:translateY(-8px);border-color:rgba(255,101,8,.65);box-shadow:0 24px 50px -24px rgba(255,101,8,.35)}
.service-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:15px;margin-bottom:22px;color:var(--orange);background:rgba(255,101,8,.1);border:1px solid rgba(255,101,8,.35);transition:transform .4s,background .3s,color .3s}
.service-icon svg{width:24px;height:24px}
.service-card:hover .service-icon{transform:rotate(-8deg) scale(1.08);background:var(--orange);color:#fff}
.service-card h3{font-size:17px;letter-spacing:-.3px;margin:0 0 10px}
.service-card p{font-size:12.5px;line-height:1.7;color:#b5b5b5;margin:0 0 20px}
.card-link{font-size:12px;font-weight:700;color:var(--orange);display:inline-flex;gap:6px;align-items:center}
.card-link span{transition:transform .3s}.card-link:hover span{transform:translateX(5px)}

/* ---------- IMPACT (by the numbers) ---------- */
.impact{padding:20px 0 90px;position:relative}
.impact-panel{position:relative;isolation:isolate;overflow:hidden;border:1px solid #262626;border-radius:32px;padding:58px 56px 50px;background:linear-gradient(160deg,#151515,#0a0a0a)}
.impact-panel:before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 85% 0%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 85% 0%,#000,transparent 70%)}
.impact-panel:after{content:"";position:absolute;z-index:-1;right:-130px;top:-170px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(255,101,8,.3),transparent 65%);animation:floaty 9s ease-in-out infinite}
.impact-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:46px}
.impact-head h2{font-size:clamp(26px,3vw,38px);line-height:1.15;letter-spacing:-1.2px;margin:14px 0 0;max-width:520px;font-weight:750}
.impact-head p{max-width:330px;font-size:13px;line-height:1.75;color:#b5b5b5;margin:0}
.impact-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #262626}
.impact-item{padding:34px 28px 4px;border-left:1px solid #262626}
.impact-item:first-child{border-left:0;padding-left:0}
.impact-num{display:flex;align-items:flex-start;font-size:clamp(46px,5vw,68px);font-weight:700;letter-spacing:-3px;line-height:1;background:linear-gradient(180deg,#fff,#cfcfcf 55%,#8a8a8a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;width:max-content}
.impact-num sup{font-size:.42em;letter-spacing:0;font-weight:600;margin:.2em 0 0 5px;color:var(--orange);-webkit-text-fill-color:var(--orange)}
.impact-bar{height:2px;background:#242424;border-radius:2px;margin:22px 0 18px;overflow:hidden}
.impact-bar span{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,#ff4f08,#ffb34a);box-shadow:0 0 12px rgba(255,101,8,.8);transform-origin:left;transform:scaleX(0);transition:transform 1.8s cubic-bezier(.2,.7,.2,1) .3s}
.impact-item.in .impact-bar span{transform:scaleX(1)}
.impact-item h3{font-size:15px;letter-spacing:-.3px;margin:0 0 6px}
.impact-item p{font-size:12px;line-height:1.65;color:#a5a5a5;margin:0;max-width:200px}

/* ---------- PROCESS enhancements ---------- */
.process-flow:before{transform-origin:left;transform:scaleX(0);transition:transform 1.6s cubic-bezier(.2,.7,.2,1) .2s}
.process-flow.in:before{transform:scaleX(1)}
@keyframes ringSpin{from{transform:rotate(18deg)}to{transform:rotate(378deg)}}
.step-circle:before{animation:ringSpin 22s linear infinite}
.step-circle{transition:transform .35s,box-shadow .35s,border-color .35s}
.process-step:hover .step-circle{transform:translateY(-6px) scale(1.06);border-color:var(--orange);box-shadow:0 0 0 5px rgba(255,101,8,.08),0 0 34px rgba(255,101,8,.35)}
.step-icon{transition:transform .4s}.process-step:hover .step-icon{transform:scale(1.2) rotate(-6deg)}

/* ---------- WORK (3D coverflow slider) ---------- */
@keyframes pulse-dot{50%{transform:scale(1.4);opacity:.7}}
.cflow{position:relative}
.cflow-stage{position:relative;height:clamp(300px,40vw,450px);perspective:1500px;perspective-origin:50% 38%;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;outline:none}
.cflow-stage:active{cursor:grabbing}
.cflow-stage:focus-visible{outline:2px solid var(--orange);outline-offset:6px;border-radius:26px}
.cf-glow{position:absolute;left:50%;top:46%;width:min(80vw,700px);aspect-ratio:1.4;translate:-50% -50%;background:radial-gradient(ellipse,rgba(255,101,8,.28),transparent 65%);pointer-events:none;animation:floaty 8s ease-in-out infinite}
.cf-ring{position:absolute;left:50%;top:48%;height:96%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px dashed rgba(255,255,255,.12);pointer-events:none;animation:orbit-spin 70s linear infinite}
.cf-ring:before{content:"";position:absolute;left:50%;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffb34a,#ff6508 68%,#d93d00);box-shadow:0 0 25px rgba(255,101,8,.6)}
.cflow-track{position:absolute;inset:0;transform-style:preserve-3d}
.cf-card{position:absolute;left:50%;top:46%;width:clamp(250px,46vw,540px);aspect-ratio:16/10.2;transform-style:preserve-3d;transform:translate3d(calc(-50% + var(--tx,0px)),-50%,var(--tz,0px)) rotateY(var(--ry,0deg)) scale(var(--s,1));opacity:var(--o,1);filter:brightness(var(--b,1));transition:transform .9s cubic-bezier(.22,.8,.22,1),opacity .6s ease,filter .6s ease;will-change:transform,opacity;-webkit-box-reflect:below 8px linear-gradient(transparent 80%,rgba(255,255,255,.11))}
.cf-card:not(.active){cursor:pointer}
.cf-frame{position:absolute;inset:0;overflow:hidden;border-radius:18px;background:#0d0d0d;border:1px solid #2c2c2c;box-shadow:0 40px 80px -30px rgba(0,0,0,.85);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--tiltY,0deg));transition:transform .3s ease,box-shadow .5s,border-color .5s}
.cf-card.active .cf-frame{border-color:rgba(255,101,8,.55);box-shadow:0 50px 100px -30px rgba(255,101,8,.5)}
.cf-frame:after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(520px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.14),transparent 55%)}
.cf-card.active:hover .cf-frame:after{opacity:1}
.cf-bar{position:relative;z-index:2;height:30px;display:flex;align-items:center;gap:6px;padding:0 14px;background:#121212;border-bottom:1px solid #222}
.cf-bar i{width:8px;height:8px;border-radius:50%;background:#3a3a3a}.cf-bar i:first-child{background:var(--orange)}
.cf-bar span{margin-left:12px;max-width:58%;padding:4px 14px;border-radius:99px;background:#1b1b1b;font-size:10.5px;color:#8f8f8f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-shot{position:absolute;inset:30px 0 0 0;background:var(--g)}
.cf-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;font-size:clamp(24px,4vw,46px);font-weight:800;letter-spacing:-1.5px;color:rgba(255,255,255,.92)}
.cf-shot img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;pointer-events:none;-webkit-user-drag:none;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.cf-card.active:hover .cf-shot img{transform:scale(1.05)}
.cf-info{position:relative;display:grid;margin:56px auto 0;max-width:720px;text-align:center}
.cf-detail{grid-area:1/1;opacity:0;visibility:hidden;translate:0 14px;transition:opacity .45s ease,translate .5s ease,visibility 0s .45s}
.cf-detail.active{opacity:1;visibility:visible;translate:0 0;transition:opacity .6s ease .2s,translate .7s cubic-bezier(.2,.7,.2,1) .2s}
.cf-cat{margin:0 0 12px;font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;color:var(--orange)}
.cf-detail h3{margin:0 0 12px;font-size:clamp(26px,3.2vw,38px);letter-spacing:-1.2px}
.cf-desc{max-width:600px;margin:0 auto 18px;font-size:13.5px;line-height:1.75;color:#b9b9b9}
.cf-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:22px}
.cf-tags span{padding:6px 14px;border:1px solid #333;border-radius:99px;font-size:11px;color:#cfcfcf}
.cf-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:30px}
.cf-arrow{width:42px;height:42px;border-radius:50%;border:1px solid #363636;background:transparent;color:#fff;font-size:16px;cursor:pointer;transition:all .25s}
.cf-arrow:hover{background:var(--orange);border-color:var(--orange);transform:scale(1.08)}
.cf-dots{display:flex;gap:9px}
.cf-dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:#3a3a3a;cursor:pointer;transition:width .35s,background .35s}
.cf-dots button.active{width:28px;background:var(--orange)}
.cf-progress{width:180px;height:2px;margin:22px auto 0;border-radius:2px;background:#222;overflow:hidden}
.cf-progress span{display:block;height:100%;background:linear-gradient(90deg,#ff4f08,#ffb34a);transform-origin:left;transform:scaleX(0)}
.cf-progress span.run{animation:tprog 6.5s linear forwards}
.cflow:hover .cf-progress span,.cflow:focus-within .cf-progress span{animation-play-state:paused}
@media(max-width:640px){.cflow-stage{height:300px;perspective:1000px}.cf-bar{height:24px}.cf-shot{inset:24px 0 0 0}.cf-bar span{font-size:9.5px}.cf-info{margin-top:44px}.cf-controls{gap:16px;margin-top:24px}}
@media(prefers-reduced-motion:reduce){.cf-ring,.cf-glow{animation:none}.cf-card{transition:none}}

/* ---------- TESTIMONIALS ---------- */
.testimonials{background:#050505;border-top:1px solid #1a1a1a;border-bottom:1px solid #1a1a1a;overflow:hidden}
.testimonials:before{content:"";position:absolute;right:-180px;top:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,101,8,.16),transparent 65%);pointer-events:none}
.t-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;position:relative}
.rating{display:flex;align-items:center;gap:14px}
.rating>b{font-size:44px;letter-spacing:-2px;color:#fff;line-height:1}
.stars{display:block;color:#ffb34a;letter-spacing:3px;font-size:15px}
.rating small{font-size:11px;color:#a9a9a9}
.t-slider{position:relative;overflow:hidden;border:1px solid #2a2a2a;border-radius:24px;background:linear-gradient(160deg,#161616,#0c0c0c)}
.t-track{display:flex;transition:transform .8s cubic-bezier(.65,0,.25,1)}
.t-slide{flex:0 0 100%;margin:0;padding:44px 40px 26px;position:relative}
.quote-mark{position:absolute;top:6px;left:28px;font-size:96px;line-height:1;color:rgba(255,101,8,.28);font-family:Georgia,serif}
.t-slide blockquote{margin:0 0 28px;position:relative;font-size:17px;line-height:1.75;letter-spacing:-.2px;color:#f0f0f0}
.t-slide figcaption{display:flex;align-items:center;gap:14px}
.t-slide figcaption b{display:block;font-size:14px}.t-slide figcaption small{font-size:11.5px;color:#a9a9a9}
.t-avatar{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#ddd;border:2px solid var(--orange);font-size:24px}
.t-controls{display:flex;justify-content:space-between;align-items:center;padding:6px 40px 24px}
.t-dots{display:flex;gap:8px}
.t-dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:#3a3a3a;cursor:pointer;transition:width .3s,background .3s}
.t-dots button.active{width:26px;background:var(--orange)}
.t-arrows{display:flex;gap:8px}
.t-arrows button{width:38px;height:38px;border-radius:50%;border:1px solid #363636;background:transparent;color:#fff;font-size:15px;cursor:pointer;transition:all .25s}
.t-arrows button:hover{background:var(--orange);border-color:var(--orange);transform:scale(1.08)}
.t-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:#1d1d1d}
.t-progress span{display:block;height:100%;background:linear-gradient(90deg,#ff4f08,#ffb34a);transform-origin:left;transform:scaleX(0)}
.t-progress span.run{animation:tprog 6.5s linear forwards}
.t-slider:hover .t-progress span,.t-slider:focus-within .t-progress span{animation-play-state:paused}
@keyframes tprog{to{transform:scaleX(1)}}

/* ---------- FAQ ---------- */
.faq:before{background:radial-gradient(ellipse at 100% 100%,rgba(255,86,0,.11),transparent 35%)}
.faq-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.faq-copy{position:sticky;top:120px}
.faq-list{display:grid;gap:12px}
.faq-item{border:1px solid #262626;border-radius:16px;background:#0e0e0e}
.faq-item:hover,.faq-item.open{border-color:rgba(255,101,8,.55)}
.faq-item.open{background:linear-gradient(160deg,#171009,#0e0e0e)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;font:inherit;font-size:14px;font-weight:600;color:#fff;background:transparent;border:0;padding:20px 22px;cursor:pointer}
.faq-q i{position:relative;flex:none;width:28px;height:28px;border-radius:50%;border:1px solid #3a3a3a;transition:background .3s,border-color .3s,transform .4s}
.faq-q i:before,.faq-q i:after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:#fff;transform:translate(-50%,-50%);transition:transform .4s}
.faq-q i:after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item.open .faq-q i{background:var(--orange);border-color:var(--orange);transform:rotate(180deg)}
.faq-item.open .faq-q i:after{transform:translate(-50%,-50%) rotate(0)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{margin:0;padding:0 22px 22px;font-size:13px;line-height:1.75;color:#bdbdbd;max-width:560px}

/* ---------- CONTACT (centered card) ---------- */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.contact{padding:50px 0 100px}
.contact-card{position:relative;isolation:isolate;overflow:hidden;padding:68px 60px 54px;border:1px solid #1f1f1f;border-radius:44px;background:radial-gradient(ellipse at 96% 88%,rgba(255,101,8,.17),transparent 45%),linear-gradient(180deg,#0f0f0f,#0b0b0b)}
.contact-head{text-align:center;margin-bottom:32px}
.contact-head h2{font-size:clamp(30px,4.2vw,52px);line-height:1.1;letter-spacing:-1.8px;margin:0 0 16px;font-weight:750}
.contact-head p{margin:0;font-size:clamp(14px,1.5vw,18px);line-height:1.6;color:#bdbdbd}
.contact-form{max-width:820px;margin:0 auto}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field.full{grid-column:1/-1}
.field input[type=text],.field input[type=email],.field select,.field textarea{width:100%;font:inherit;font-size:14px;color:#fff;background:linear-gradient(180deg,#121212,#0d0d0d);border:1px solid #242424;border-radius:14px;padding:0 18px;height:50px;transition:border-color .25s,box-shadow .25s,background .25s;appearance:none;-webkit-appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23ff6508' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"),linear-gradient(180deg,#121212,#0d0d0d);background-repeat:no-repeat;background-position:right 18px center,0 0;padding-right:44px;cursor:pointer}
.field select option{background:#111;color:#fff}
.field textarea{resize:vertical;height:auto;min-height:120px;padding:15px 18px;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:#6e6e6e}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#3a3a3a}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,101,8,.14)}
.field.invalid input,.field.invalid textarea{border-color:#ff5b3a;box-shadow:0 0 0 4px rgba(255,91,58,.12)}
.err{font-size:11.5px;color:#ff7d5f;padding-left:6px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.submit{display:flex;width:fit-content;margin:20px auto 0;cursor:pointer;font-family:inherit}
.btn-label{display:inline-flex;align-items:center;gap:12px}
.btn-spin{display:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:orbit-spin .7s linear infinite}
.contact-form.loading .btn-label{display:none}.contact-form.loading .btn-spin{display:block}
.contact-form.loading .submit{pointer-events:none;filter:brightness(.9)}
.form-note{margin:14px 0 0;font-size:12px;line-height:1.6;color:#7d7d7d;text-align:center}
.form-note a{color:#b9b9b9;border-bottom:1px solid #444;transition:color .25s,border-color .25s}
.form-note a:hover{color:var(--orange);border-color:var(--orange)}
.form-status{margin-top:12px;font-size:12.5px;text-align:center;color:#ff7d5f}
/* success state covers the whole card */
.contact-form{position:static}
.form-success{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:30px;text-align:center;background:linear-gradient(180deg,#0f0f0f,#0b0b0b);opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
.contact-form.sent .form-success{opacity:1;visibility:visible;transition:opacity .5s}
.form-success svg{width:84px;height:84px;margin-bottom:6px;fill:none;stroke:var(--orange);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.form-success circle{stroke-dasharray:145;stroke-dashoffset:145}
.form-success path{stroke-dasharray:40;stroke-dashoffset:40}
.contact-form.sent .form-success circle{animation:draw .9s .1s ease forwards}
.contact-form.sent .form-success path{animation:draw .5s .8s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.form-success h3{margin:0;font-size:26px;letter-spacing:-.7px}
.form-success p{margin:0 0 14px;font-size:14px;line-height:1.7;color:#b8b8b8;max-width:340px}
.form-success .again{cursor:pointer;font-family:inherit;min-height:40px;padding:0 24px;font-size:12px}

/* ---------- Responsive (new sections) ---------- */
@media(max-width:900px){
  .section{padding:70px 0}
  .orb-one{--p:12px;--gap:18px}.orb-two{--p:22px;--gap:14px}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .impact-panel{padding:44px 32px 38px}.impact-head{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:34px}.impact-grid{grid-template-columns:repeat(2,1fr)}.impact-item:nth-child(3){border-left:0;padding-left:0}.impact-item:nth-child(n+3){border-top:1px solid #262626;margin-top:30px}.showcase{grid-template-columns:1fr;gap:28px}.work-stage{order:-1;min-height:400px}.contact-card{padding:56px 32px 44px}
  .t-wrap,.faq-wrap{grid-template-columns:1fr;gap:36px}
  .faq-copy{position:static}
}
@media(max-width:640px){
  .section{padding:54px 0}
  .section-head{margin-bottom:34px}
  .section-sub{font-size:12px}
  .orb-one{--p:10px;--gap:12px}.orb-two{--p:18px;--gap:10px}
  .service-grid{grid-template-columns:1fr;gap:14px}
  .service-card{padding:24px 22px}
  .impact{padding:10px 0 54px}.impact-panel{padding:34px 20px 30px;border-radius:24px}.impact-item{padding:26px 16px 0}.impact-item p{font-size:11px}.impact-num{letter-spacing:-2px}
  .work-stage{min-height:300px;border-radius:22px}.stage-chip{left:14px;bottom:14px;padding:10px 14px}.stage-chip b{font-size:21px}.stage-chip span{font-size:10px}.stage-link{display:none}.stage-live{top:12px;right:12px}.mock{inset:15% 6% 0 6%}.m-bars{height:100px}.m-circle{width:70px;height:70px}.m-cards i{height:40px}
  .row-title{font-size:19px}.row-desc{padding:0 10px 0 42px}.work-row{padding:22px 0}
  .contact-card{padding:40px 16px 32px;border-radius:28px}.contact-head{margin-bottom:24px}.form-grid{grid-template-columns:1fr;gap:10px}.field input[type=text],.field input[type=email],.field select{height:48px}.field textarea{min-height:110px}
  .process-flow:before{transform:none;transition:none}
  .t-slide{padding:40px 22px 22px}.t-slide blockquote{font-size:15px}.t-controls{padding:4px 22px 22px}
  .faq-q{padding:17px 18px;font-size:13px}.faq-a p{padding:0 18px 18px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .form-success circle,.form-success path{stroke-dashoffset:0}
  *,*:before,*:after{animation:none!important;transition:none!important}
  html.js .reveal{opacity:1;translate:none}
  .impact-bar span{transform:none}
  .m-bars i{transform:none}
  .process-flow:before{transform:none}
  h1>span{-webkit-text-fill-color:currentColor;background:none;color:var(--orange)}
}

/* full-width process glow (was clipped to the container) */
.process{background:none;isolation:isolate}
.process:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 0% 55%,rgba(255,86,0,.17),transparent 32%),radial-gradient(ellipse at 100% 90%,rgba(255,86,0,.15),transparent 28%)}
@media(max-width:640px){.process{background:none}}

/* ---------- Services v3 (numbered cards + CTA tile) ---------- */
.service-card{padding:28px 28px 30px;border-radius:22px;min-height:292px;display:flex;flex-direction:column}
.service-card:after{content:"";position:absolute;right:-28px;top:53px;width:120px;height:120px;border-radius:50%;padding:1px;pointer-events:none;background:conic-gradient(from 0deg,rgba(255,101,8,.16) 0 55%,rgba(255,101,8,.95) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);transform:rotate(var(--rot,0deg))}
.service-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px}
.service-icon{width:48px;height:48px;margin:0;border-radius:14px}
.service-num{display:flex;align-items:center;font-size:10.5px;letter-spacing:1.4px;color:#8a8a8a;margin-top:18px;padding-right:24px}
.service-num i{position:absolute;right:-28px;top:53px;width:120px;height:120px;pointer-events:none;transform:rotate(var(--rot,0deg))}
.service-num i:before{content:"";position:absolute;left:50%;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px 2px rgba(255,101,8,.75)}
.service-card h3{font-size:19px;letter-spacing:-.5px;margin:0 0 12px}
.service-card p{font-size:12.5px;line-height:1.75;max-width:330px;margin:0 0 auto}
.card-link{color:#fff;font-weight:600;margin-top:26px;gap:10px}
.card-link .arr{width:13px;height:13px;color:var(--orange);transition:transform .3s}
.card-link:hover .arr{transform:translate(3px,-3px)}
.service-cta{background:linear-gradient(135deg,#ff6a0a,#e5530a 55%,#bf3c05);border:1px solid #ff9a52;box-shadow:0 24px 60px -28px rgba(255,101,8,.7)}
.service-cta:after{display:none}
.service-cta:hover{border-color:#ffc08a;box-shadow:0 30px 70px -26px rgba(255,101,8,.9)}
.cta-eyebrow{font-size:9.5px!important;letter-spacing:2.4px;font-weight:700;color:#fff!important;margin:6px 0 20px!important}
.service-cta h3{font-size:24px;letter-spacing:-.8px;margin-bottom:14px}
.service-cta p{color:#fff0e6;max-width:300px}
.cta-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:15px 26px;border-radius:99px;background:#fff;color:#ee5a08;font-size:12.5px;font-weight:700;transition:transform .3s,box-shadow .3s;position:relative;z-index:1}
.cta-btn .arr{width:12px;height:12px}
.cta-btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.25)}
.cta-star{position:absolute;right:-22px;bottom:-26px;width:130px;color:rgba(255,255,255,.14);animation:starSpin 18s linear infinite}
@keyframes starSpin{to{transform:rotate(360deg)}}
@media(max-width:640px){.service-card{min-height:0;padding:24px 22px}.service-num{margin-top:14px}.service-cta h3{font-size:21px}}

/* ---------- Unified arrow icon for every button (same hover as the Projects list) ---------- */
.btn-arrow{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;border:1px solid transparent;transition:background .35s,color .35s,border-color .35s,transform .35s}
span.btn-arrow>svg{width:11px;height:11px;margin:0;stroke:currentColor;stroke-width:1.8;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.button,.cta-btn,.stage-link,.card-link{gap:12px}
.button:has(.btn-arrow){padding-right:9px}
.button-small:has(.btn-arrow){padding-right:6px}
.button-small .btn-arrow{width:20px;height:20px}
.button-small .btn-arrow>svg{width:9px;height:9px}
.cta-btn{padding-right:12px}.stage-link{padding-right:10px}
/* filled-orange buttons: glass circle -> white */
.button .btn-arrow{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);color:#fff}
.button:hover .btn-arrow{background:#fff;border-color:#fff;color:#ee5a08}
/* white buttons: tinted circle -> orange */
.button-small .btn-arrow,.cta-btn .btn-arrow,.stage-link .btn-arrow{background:rgba(238,90,8,.1);border-color:rgba(238,90,8,.45);color:#ee5a08}
.button-small:hover .btn-arrow,.cta-btn:hover .btn-arrow,.stage-link:hover .btn-arrow{background:#ee5a08;border-color:#ee5a08;color:#fff}
/* text links on cards */
.card-link .btn-arrow{border-color:#333;color:var(--orange)}
.card-link:hover .btn-arrow,.service-card:hover .card-link .btn-arrow{background:var(--orange);border-color:var(--orange);color:#fff}
/* arrow turns 45deg on hover */
.button:hover .btn-arrow>svg,.cta-btn:hover .btn-arrow>svg,.stage-link:hover .btn-arrow>svg,.card-link:hover .btn-arrow>svg,.service-card:hover .card-link .btn-arrow>svg{transform:rotate(45deg)}
.button:hover,.cta-btn:hover,.stage-link:hover{transform:translateY(-3px)}

/* ---------- Process: serpentine timeline (all screens) ----------
   --s scales the whole timeline (1 = phone, 1.2 = desktop) */
.process-intro{display:none}
.process-flow{--s:1;display:block;position:relative;height:calc(750px * var(--s));margin:30px 0 0}
.process-flow:before{display:none}
.flow-curve{display:block;position:absolute;left:50%;top:0;width:calc(156px * var(--s));height:calc(750px * var(--s));margin-left:calc(-78px * var(--s));overflow:visible;pointer-events:none}
.flow-path{fill:none;stroke:var(--orange);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 4px rgba(255,101,8,.55));transition:stroke-dashoffset 3.4s cubic-bezier(.45,.05,.25,1) .2s}
.process-flow.in .flow-path{stroke-dashoffset:0}
.flow-dot{fill:var(--orange);opacity:0;filter:drop-shadow(0 0 5px rgba(255,101,8,.9));transition:opacity .5s ease var(--dd,0s)}
.process-flow.in .flow-dot{opacity:1}
.flow-spark{fill:#ffd9b0;opacity:0;filter:drop-shadow(0 0 6px #ff8a16) drop-shadow(0 0 12px #ff6508);animation:sparkIn .8s ease 3.6s forwards}
@keyframes sparkIn{to{opacity:1}}
.process-lead{display:block;position:absolute;z-index:1;left:calc(50% + 26px * var(--s));top:0;width:calc(50% - 26px * var(--s));max-width:260px;margin:0;font-size:calc(9.5px * var(--s));line-height:1.5;color:#cfcfcf}

.process-step{display:block;position:relative;height:calc(150px * var(--s));min-height:0;text-align:left}
.process-step .step-circle{position:absolute;left:50%;top:50%;width:calc(82px * var(--s));height:calc(82px * var(--s));margin:calc(-41px * var(--s)) 0 0 calc(-41px * var(--s));gap:calc(5px * var(--s))}
.process-step .step-circle:before{inset:calc(-8px * var(--s))}
.process-step .step-circle:after{width:6px;height:6px;top:calc(-8px * var(--s));left:calc(50% - 3px)}
.process-step .step-icon{font-size:calc(22px * var(--s))}
.process-step .step-circle b{font-size:calc(9px * var(--s))}
.process-step p{position:absolute;top:50%;translate:0 -50%;width:calc(50% - 80px * var(--s));max-width:290px;margin:0;font-size:calc(9.5px * var(--s));line-height:1.6;color:#cfcfcf}
.process-step:nth-of-type(odd) p{right:calc(50% + 78px * var(--s));text-align:right}
.process-step:nth-of-type(even) p{left:calc(50% + 78px * var(--s));text-align:left}
.flow-curve-h{display:none}
@media(min-width:641px){.process-flow{--s:1.2}.process-step p,.process-lead{font-size:12px}.process-step .step-circle b{font-size:11px}}
/* Desktop: the same winding timeline, laid out horizontally */
@media(min-width:901px){
  .process-flow{--s:1.1;width:calc(750px * var(--s));height:calc(156px * var(--s));margin:100px auto 110px}
  .flow-curve{display:none}
  .flow-curve-h{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
  .process-step{position:absolute;top:0;height:100%;width:calc(150px * var(--s))}
  .process-step:nth-of-type(1){left:0}
  .process-step:nth-of-type(2){left:calc(150px * var(--s))}
  .process-step:nth-of-type(3){left:calc(300px * var(--s))}
  .process-step:nth-of-type(4){left:calc(450px * var(--s))}
  .process-step:nth-of-type(5){left:calc(600px * var(--s))}
  .process-step p{width:230px;translate:-50% 0;text-align:center;font-size:12.5px;line-height:1.6}
  .process-step:nth-of-type(odd) p{left:50%;right:auto;top:calc(100% + 6px);bottom:auto;text-align:center}
  .process-step:nth-of-type(even) p{left:50%;right:auto;bottom:calc(100% + 6px);top:auto;text-align:center}
  .process-lead{left:0;top:calc(78px * var(--s) - 100px);width:118px;max-width:none;translate:none;text-align:left;font-size:12.5px}
}
@media(min-width:1101px){.process-flow{--s:1.3}}
@media(min-width:1280px){.process-lead{left:calc(-24px * var(--s));top:calc(78px * var(--s) - 66px);width:150px;translate:-50% 0;text-align:center}}
@media(max-width:360px){.process-step p,.process-lead{font-size:9px}}
@media(prefers-reduced-motion:reduce){
  .flow-path{stroke-dashoffset:0!important}.flow-dot{opacity:1!important}.flow-spark{display:none}
}
.err:empty{display:none}

/* ---------- Footer ---------- */
.site-footer{position:relative;isolation:isolate;overflow:hidden;margin-top:10px;padding:76px 0 0;border-top:1px solid #1a1a1a;background:#070707}
.site-footer:before{content:"";position:absolute;z-index:-1;left:42%;top:-140px;width:620px;height:340px;margin-left:-310px;background:radial-gradient(ellipse,rgba(255,101,8,.2),transparent 68%);pointer-events:none}
.footer-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr;gap:48px}
.footer-brand .brand{display:inline-flex;margin-bottom:22px}
.footer-brand p{max-width:380px;margin:0 0 22px;font-size:13.5px;line-height:1.8;color:#a9a9a9}
.footer-col{display:flex;flex-direction:column;align-items:flex-start}
.footer-col h3{margin:4px 0 20px;font-size:15px;font-weight:700;letter-spacing:-.2px;color:#fff}
.footer-col a,.footer-social,.footer-legal a{font-size:13.5px;color:#a9a9a9;transition:color .25s,transform .25s}
.footer-col a{display:inline-block;padding:7px 0}
.footer-col a:hover{color:var(--orange);transform:translateX(5px)}
.footer-social{display:inline-block;color:#d6d6d6;border-bottom:1px solid #3a3a3a;padding-bottom:2px}
.footer-social:hover,.footer-legal a:hover{color:var(--orange)}
.footer-social:hover{border-color:var(--orange)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:62px;padding:28px 0 32px;border-top:1px solid #1d1d1d}
.footer-bottom p{margin:0;font-size:12.5px;color:#8c8c8c}
.footer-legal{color:#666}
@media(max-width:900px){
  .site-footer{padding-top:60px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:38px 28px}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:560px){
  .footer-grid{gap:34px 20px}
  .footer-col:last-child{grid-column:1/-1}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px;margin-top:44px}
}

/* ---------- Accessibility / SEO helpers ---------- */
.skip-link{position:fixed;left:16px;top:-60px;opacity:0;z-index:200;padding:10px 18px;border-radius:99px;background:#fff;color:#ee5a08;font-size:12px;font-weight:700;transition:top .25s}
.skip-link:focus{top:12px;opacity:1}
.trusted-copy p{margin:12px 0 0;max-width:400px;font-size:12.5px;line-height:1.7;color:#a9a9a9}
@media(min-width:901px){.trusted-inner{padding-top:34px;padding-bottom:34px}}
@media(max-width:900px){.trusted-copy p{max-width:340px;margin:-8px auto 22px}}

/* ---------- Solar system corner accents (decorative) ---------- */
.has-solar{isolation:isolate}
.solar-wrap{position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;overflow:hidden;pointer-events:none;z-index:-1}
.solar{--sz:clamp(230px,26vw,400px);--k:1;position:absolute;z-index:-1;width:var(--sz);height:var(--sz);top:var(--st,50px);translate:0 calc(var(--py,0) * 1px);pointer-events:none;opacity:.95}
.solar.solar-b{top:auto;bottom:var(--sb,50px)}
.solar-r{right:calc(var(--sz) * -.36)}
.solar-l{left:calc(var(--sz) * -.36)}
.solar:before{content:"";position:absolute;inset:-20%;border-radius:50%;background:radial-gradient(circle,rgba(255,101,8,.2),transparent 62%)}
.solar .sun{position:absolute;left:50%;top:50%;width:13%;aspect-ratio:1;margin:-6.5% 0 0 -6.5%;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffd08a,#ff8a16 45%,#ff5a00 75%,#c93500);box-shadow:0 0 40px 8px rgba(255,101,8,.45),0 0 90px 24px rgba(255,101,8,.18);animation:sunPulse 5s ease-in-out infinite}
@keyframes sunPulse{50%{transform:scale(1.14)}}
.solar .ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px dashed rgba(255,255,255,.15);animation:orbit-spin calc(var(--t) * var(--k)) linear infinite}
.solar .r1{width:38%;height:38%;margin:-19% 0 0 -19%;--t:16s;--p:8px}
.solar .r2{width:68%;height:68%;margin:-34% 0 0 -34%;--t:26s;--p:14px;animation-direction:reverse}
.solar .r3{width:100%;height:100%;margin:-50% 0 0 -50%;--t:44s;--p:10px}
.solar .planet{position:absolute;left:50%;top:0;width:var(--p);height:var(--p);margin:calc(var(--p) / -2) 0 0 calc(var(--p) / -2);border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffb34a,#ff6508 68%,#d93d00);box-shadow:0 0 18px rgba(255,101,8,.55);animation:orbit-spin calc(var(--t) * var(--k)) linear infinite reverse}
.solar .r2 .planet{animation-direction:normal}
.solar .planet.moon{top:100%;--p:6px;opacity:.8}
html.js .solar:not(.on) *{animation-play-state:paused}
@media(max-width:640px){
  .solar{--sz:170px;opacity:.6}
  .solar:before{opacity:.7}
  .solar-r{right:calc(var(--sz) * -.46)}.solar-l{left:calc(var(--sz) * -.46)}
  .process .solar{left:auto;right:calc(var(--sz) * -.46);top:34px}
  .solar .r1{--p:7px}.solar .r2{--p:11px}.solar .r3{--p:8px}
}

/* ---------- Click-to-burst planets ---------- */
.planet,.orbit-planet,.sun{transition:opacity .35s ease,scale .55s cubic-bezier(.3,1.7,.5,1)}
.planet.popped,.orbit-planet.popped,.sun.popped{opacity:0!important;scale:.15}

/* ---------- Challenge: draggable ball + igniting globe ---------- */
.challenge{--c-title:#ff8a16;--c-main:#fff;--c-sub:#a6a6a6;--c-eyebrow:#8a8a8a;--c-hint:#f2f2f2;position:relative;isolation:isolate;overflow:hidden;background:#0d0d0d;padding:96px 0 150px}
.challenge:before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 52% 48%,#ffa53f 0%,#ff8216 46%,#f46c06 100%);clip-path:circle(0% at var(--ox,50%) var(--oy,50%));transition:clip-path 1.25s cubic-bezier(.55,0,.2,1)}
.challenge.lit{--c-title:#17110a;--c-sub:#2b1707;--c-eyebrow:#5a3411;--c-hint:#1b1109}
.challenge.lit:before{clip-path:circle(150% at var(--ox,50%) var(--oy,50%))}
.ch-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.62fr);align-items:center;gap:24px}
.ch-eyebrow{margin:0 0 26px;font-size:11px;letter-spacing:2.2px;font-weight:600;color:var(--c-eyebrow);transition:color .7s ease .2s}
.challenge h2{margin:0 0 26px;font-size:clamp(32px,3.7vw,54px);line-height:1.04;letter-spacing:-2.2px;font-weight:800}
.ch-a,.ch-b{display:block}
.ch-a{color:var(--c-title);transition:color .7s ease .2s}
.ch-b{color:var(--c-main)}
.ch-b i{font-style:normal;color:#ffd23a}
.ch-sub{margin:0 0 30px;max-width:440px;font-size:15px;line-height:1.7;color:var(--c-sub);transition:color .7s ease .2s}
.challenge .button{transition:background .7s ease .2s,border-color .7s ease .2s,transform .35s,box-shadow .35s}
.challenge.lit .button{background:#121212;border-color:#121212;box-shadow:0 14px 34px -12px rgba(0,0,0,.55)}
.challenge.lit .button .btn-arrow{background:#fff;border-color:#fff;color:#121212}
.ch-stage{position:relative;width:100%;max-width:440px;aspect-ratio:1;justify-self:center}
.ch-halo{position:absolute;left:50%;top:50%;width:158%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,226,140,.7),rgba(255,150,40,.28) 45%,transparent 68%);opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.challenge.lit .ch-halo{opacity:1}
.ch-globe{position:absolute;inset:0;width:100%;height:100%;display:block}
.ch-ball{position:absolute;right:-9%;bottom:15%;z-index:5;width:clamp(18px,2.2vw,26px);aspect-ratio:1;padding:0;border:0;border-radius:50%;cursor:grab;touch-action:none;background:radial-gradient(circle at 32% 26%,#fff 0,#b9bec7 22%,#4a4e57 58%,#17191d 100%);box-shadow:0 6px 14px rgba(0,0,0,.55),inset -2px -3px 6px rgba(0,0,0,.45);transform:translate(calc(var(--bx,0px) + var(--mx,0px)),calc(var(--by,0px) + var(--my,0px))) scale(var(--bs,1));transition:transform .8s cubic-bezier(.3,1.3,.5,1),opacity .5s ease;animation:ballBob 3.2s ease-in-out infinite}
.ch-ball:after{content:"";position:absolute;inset:-12px;border-radius:50%}
.ch-ball.dragging{cursor:grabbing;transition:opacity .5s ease;animation:none}
.ch-ball.drifting{transition:opacity .5s ease}
.ch-ball.absorbing{transition:transform 1s cubic-bezier(.5,0,.3,1),opacity .5s ease;animation:none}
.ch-ball.gone{opacity:0;pointer-events:none}
@keyframes ballBob{50%{translate:0 -4px}}
.ch-aside{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding-left:12px}
.ch-hint{margin:0;font-size:clamp(17px,1.7vw,22px);line-height:1.3;letter-spacing:-.5px;font-weight:600;color:var(--c-hint);max-width:240px;transition:color .7s ease .2s}
.ch-btn{display:inline-flex;align-items:center;gap:10px;font:inherit;font-size:14px;font-weight:600;padding:14px 24px;border-radius:99px;cursor:pointer;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.2);transition:background .35s,border-color .35s,color .7s ease .2s,transform .3s}
.ch-btn:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.ch-btn svg{width:18px;height:18px}
.ch-btn .i-reset{display:none}
.challenge.lit .ch-btn{color:#1b1109;border-color:rgba(0,0,0,.3);background:rgba(255,255,255,.18)}
.challenge.lit .ch-btn:hover{background:rgba(255,255,255,.4)}
.challenge.lit .ch-btn .i-sun{display:none}.challenge.lit .ch-btn .i-reset{display:block}
.ch-timer{position:absolute;right:max(24px,calc((100vw - 1120px) / 2));bottom:92px;z-index:3;display:flex;align-items:center;gap:10px;transition:opacity .5s}
.challenge.user-lit .ch-count{display:none}
.challenge.lit .ch-count{color:#1b1109;border-color:rgba(0,0,0,.25);background:rgba(255,255,255,.2)}
.challenge.lit .ch-count .bar{stroke:#1b1109}
.challenge.lit .ch-count .trk{stroke:rgba(0,0,0,.14)}
.ch-count,.ch-pause{position:relative;display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;font:inherit;font-size:9.5px;font-weight:700}
.ch-count svg{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);transform:rotate(-90deg)}
.ch-count circle{fill:none;stroke-width:2}
.ch-count .trk{stroke:rgba(255,255,255,.1)}
.ch-count .bar{stroke:var(--orange);stroke-linecap:round;stroke-dasharray:94.25;stroke-dashoffset:var(--off,0)}
.ch-pause svg{width:14px;height:14px}.ch-pause .i-play{display:none}
.ch-pause[aria-pressed="true"] .i-pause{display:none}.ch-pause[aria-pressed="true"] .i-play{display:block}
.challenge.lit .ch-pause{color:#1b1109;border-color:rgba(0,0,0,.25);background:rgba(255,255,255,.2)}
/* dark footer with rounded top, as in the reference */
.site-footer{position:relative;z-index:3;margin-top:-46px;border-radius:46px 46px 0 0}
@media(max-width:900px){
  .ch-grid{grid-template-columns:1fr;gap:38px}
  .ch-stage{max-width:360px}
  .ch-ball{right:2%;bottom:-2%}
  .ch-aside{padding-left:0}.ch-hint{max-width:none}
  .challenge{padding:70px 0 140px}
  .ch-timer{right:22px;bottom:84px}
}
@media(prefers-reduced-motion:reduce){.ch-ball{animation:none}}

/* ---------- Project slides: framed monitor mockups ---------- */
.cf-card{aspect-ratio:1.2;width:clamp(250px,40vw,470px)}
.cf-frame.cf-mock{display:grid;place-items:center;padding:4.5%;overflow:hidden;background:linear-gradient(160deg,#181818,#0c0c0c);border:1px solid #2c2c2c;border-radius:22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.cf-frame.cf-mock img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;-webkit-user-drag:none;filter:none;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
/* the active slide gets the orange frame + glow so it stands apart from its neighbours */
.cf-card.active .cf-frame.cf-mock{border:2px solid rgba(255,101,8,.9);box-shadow:0 0 0 5px rgba(255,101,8,.12),0 50px 100px -30px rgba(255,101,8,.55)}
.cf-card.active:hover .cf-frame.cf-mock img{transform:scale(1.03)}
@media(max-width:640px){.cf-card{width:min(84vw,340px)}.cflow-stage{height:300px}}

/* ---------- Hero orb: sized from the hero height so it matches the mockup's proportions ---------- */
.hero{--hh:92px}
.hero-art{--H:620px;--D:min(calc(var(--H) * 1.3),62vw);position:absolute;top:calc(var(--hh) * -1);bottom:0;right:calc(50% - 50vw);left:auto;width:100vw;height:auto;overflow:hidden;z-index:1;pointer-events:none}
.orb-one{width:var(--D);height:var(--D);right:calc(var(--D) * -.177);top:calc(36% - var(--D) / 2);--gap:24px;--t:34s;--p:15px}
.orb-two{width:calc(var(--D) * .786);height:calc(var(--D) * .786);right:calc(var(--D) * -.048);top:calc(36% - var(--D) * .383);--gap:18px;--t:21s;--p:28px}
.stat{pointer-events:auto}
.stat-clients{left:56%;right:auto;top:24%}
.stat-team{left:auto;right:2%;top:37%}
.stat-projects{left:56%;right:auto;bottom:auto;top:67%;min-width:160px}
@media(max-width:900px){.hero{--hh:78px}}
@media(max-width:640px){
  .hero-art{position:relative;top:auto;bottom:auto;right:auto;left:auto;width:calc(100% + 44px);margin:0 -22px;height:400px;flex:none;--D:min(202vw,900px)}
  .orb-one{left:calc(121% - var(--D) / 2);right:auto;top:calc(100% + 16px - var(--D) / 2);--gap:16px;--t:55s;--p:12px}
  .orb-two{left:calc(121.5% - var(--D) * .3775);right:auto;top:calc(100% + 16px - var(--D) * .3775);--gap:12px;--t:36s;--p:20px}
  .stat-clients{left:auto;right:3%;top:20%}
  .stat-team{left:27%;right:auto;top:45%}
  .stat-projects{left:17%;right:auto;top:77%;bottom:auto;min-width:155px}
}
/* nav sits over the orb at the top of the page: keep the active link readable */
.header-wrap:not(.scrolled) .main-nav a.active{color:#fff}
@media(max-width:900px){.header-wrap:not(.scrolled) .main-nav a.active{color:var(--orange)}}
@media(min-width:641px) and (max-width:900px){.trusted-copy p{margin:12px 0 0;max-width:300px}}

/* ---------- Rotating hero heading: "We build [Shopify stores] that get found." ---------- */
.h1-line{display:block;color:inherit;background:none;-webkit-text-fill-color:currentColor;animation:none}
.rotor{position:relative;display:block;height:1.2em;margin:.02em 0 .04em;overflow:hidden;background:none;-webkit-text-fill-color:currentColor;animation:none}
.rotor .rw{position:absolute;left:0;right:0;top:0;padding-bottom:.1em;white-space:nowrap;text-align:inherit;opacity:0;transform:translateY(70%);filter:blur(6px);
  background:linear-gradient(90deg,#ff6508,#ffb34a,#ff6508);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 6s linear infinite;
  transition:transform .75s cubic-bezier(.2,.8,.2,1),opacity .5s ease,filter .5s ease}
.rotor .rw.is-active{opacity:1;transform:none;filter:none}
.rotor .rw.is-out{opacity:0;transform:translateY(-70%);filter:blur(6px)}
@media(prefers-reduced-motion:reduce){.rotor .rw{transition:none;filter:none;-webkit-text-fill-color:currentColor;background:none;color:var(--orange)}}

/* =====================================================
   Service pages (website-design-development/)
   ===================================================== */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;padding:0;list-style:none;font-size:12px;color:#8d8d8d}
.crumbs li+li:before{content:"/";margin-right:8px;color:#444}
.crumbs a{transition:color .25s}.crumbs a:hover{color:var(--orange)}
.crumbs [aria-current]{color:#d6d6d6}
.svc-hero{position:relative;isolation:isolate;padding:54px 0 96px}
.svc-hero:after{content:"";position:absolute;z-index:-2;top:-120px;bottom:0;left:50%;width:100vw;margin-left:-50vw;background:radial-gradient(ellipse at 88% 8%,rgba(255,101,8,.24),transparent 52%),radial-gradient(ellipse at 0% 100%,rgba(255,101,8,.1),transparent 45%);-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent);pointer-events:none}
.svc-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.svc-hero h1{font-size:clamp(34px,4.1vw,56px);line-height:1.06;letter-spacing:-2px;margin:0 0 22px}
.svc-lead{margin:0 0 30px;max-width:560px;font-size:15.5px;line-height:1.8;color:#c4c4c4}
.svc-cta{display:flex;flex-wrap:wrap;gap:14px}
.button.ghost{background:transparent;border:1px solid #3a3a3a;box-shadow:none}
.button.ghost:hover{border-color:var(--orange);background:rgba(255,101,8,.08)}
.svc-chips{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0 0;padding:0;list-style:none}
.svc-chips li{display:flex;align-items:center;gap:9px;padding:8px 15px;border:1px solid #2c2c2c;border-radius:99px;background:rgba(255,255,255,.03);font-size:12px;color:#d6d6d6}
.svc-chips li:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 9px 2px rgba(255,101,8,.6)}
.svc-visual{position:relative;width:100%;max-width:500px;justify-self:center}
.svc-ring{position:absolute;left:50%;top:50%;width:128%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px dashed rgba(255,255,255,.13);animation:orbit-spin 70s linear infinite;pointer-events:none}
.svc-ring:before{content:"";position:absolute;left:50%;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffb34a,#ff6508 68%,#d93d00);box-shadow:0 0 25px rgba(255,101,8,.6)}
.svc-frame{position:relative;aspect-ratio:1.2;padding:4.5%;border:2px solid rgba(255,101,8,.85);border-radius:24px;background:linear-gradient(160deg,#181818,#0c0c0c);box-shadow:0 0 0 5px rgba(255,101,8,.12),0 50px 100px -30px rgba(255,101,8,.5)}
.svc-frame img{width:100%;height:100%;object-fit:contain;display:block}
.svc-pill{position:absolute;z-index:3;display:flex;flex-direction:column;gap:2px;padding:12px 18px;border-radius:16px;background:rgba(14,14,14,.74);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:floaty 6s ease-in-out infinite}
.svc-pill b{font-size:20px;letter-spacing:-.6px;color:var(--orange)}.svc-pill span{font-size:11px;color:#cfcfcf}
.svc-pill.p1{left:-6%;top:12%}.svc-pill.p2{right:-5%;bottom:10%;animation-delay:-3s}

.answer-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.answer h2{font-size:clamp(26px,3vw,38px);line-height:1.15;letter-spacing:-1.1px;margin:14px 0 20px;font-weight:750}
.answer-first{margin:0 0 16px;font-size:16px;line-height:1.8;color:#e4e4e4}
.answer-more{margin:0;font-size:14px;line-height:1.8;color:#a9a9a9}
.section-head .answer-first{font-size:14px;color:#c4c4c4}
.glance{padding:30px 30px 14px;border:1px solid #262626;border-radius:24px;background:linear-gradient(160deg,#161616,#0b0b0b)}
.glance h3{margin:0 0 6px;font-size:18px;letter-spacing:-.4px}
.glance dl{margin:0}
.glance dl>div{display:grid;grid-template-columns:130px 1fr;gap:18px;padding:15px 0;border-bottom:1px solid #212121}
.glance dl>div:last-child{border-bottom:0}
.glance dt{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:var(--orange);padding-top:2px}
.glance dd{margin:0;font-size:13.5px;line-height:1.6;color:#dcdcdc}

.included .service-card,.mk-item{min-height:0}
.included .service-card{padding-bottom:28px}
.included .service-top{margin-bottom:22px}
.compare-wrap{overflow-x:auto;border:1px solid #262626;border-radius:22px;background:linear-gradient(160deg,#141414,#0b0b0b)}
.compare{width:100%;min-width:760px;border-collapse:collapse;text-align:left}
.compare th,.compare td{padding:20px 22px;font-size:13.5px;line-height:1.65;vertical-align:top;border-bottom:1px solid #212121}
.compare thead th{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--orange);background:rgba(255,101,8,.06)}
.compare tbody th{font-size:15px;font-weight:700;color:#fff;white-space:nowrap}
.compare tbody td{color:#c4c4c4}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.compare tbody tr{transition:background .3s}.compare tbody tr:hover{background:rgba(255,101,8,.05)}

.mk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mk-item{padding:28px 26px 30px;border:1px solid #262626;border-radius:22px;background:linear-gradient(160deg,#151515,#0c0c0c)}
.mk-item:hover{transform:translateY(-6px);border-color:rgba(255,101,8,.6);box-shadow:0 24px 50px -24px rgba(255,101,8,.35)}
.mk-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:22px}
.mk-top .service-icon{margin:0}
.mk-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.mk-tags span{padding:4px 10px;border:1px solid #333;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#cfcfcf}
.mk-item h3{margin:0 0 10px;font-size:17px;letter-spacing:-.3px}
.mk-item p{margin:0;font-size:13px;line-height:1.75;color:#b3b3b3}

.svc-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.svc-step{position:relative;overflow:hidden;padding:26px 22px 28px;border:1px solid #262626;border-radius:22px;background:linear-gradient(160deg,#151515,#0c0c0c);transition:transform .35s,border-color .35s}
.svc-step:hover{transform:translateY(-6px);border-color:rgba(255,101,8,.6)}
.svc-step .when{display:block;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:var(--orange)}
.svc-step .num{display:block;margin:12px 0 14px;font-size:44px;line-height:1;letter-spacing:-2px;background:linear-gradient(180deg,#fff,#8a8a8a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.svc-step h3{margin:0 0 8px;font-size:16px;letter-spacing:-.3px}
.svc-step p{margin:0;font-size:12.5px;line-height:1.7;color:#b0b0b0}

.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.proof{overflow:hidden;border:1px solid #262626;border-radius:24px;background:linear-gradient(160deg,#151515,#0c0c0c)}
.proof:hover{border-color:rgba(255,101,8,.55);transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(255,101,8,.35)}
.proof-shot{padding:14px;background:radial-gradient(circle at 80% 0%,rgba(255,101,8,.22),transparent 60%),#0f0f0f}
.proof-shot img{width:100%;height:auto;aspect-ratio:1.26;object-fit:contain;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.proof:hover .proof-shot img{transform:scale(1.04)}
.proof-body{padding:22px 24px 26px}
.proof .tag{display:inline-block;margin-bottom:8px;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;color:var(--orange)}
.proof h3{margin:0 0 8px;font-size:20px;letter-spacing:-.5px}
.proof p{margin:0 0 18px;font-size:13px;line-height:1.7;color:#b3b3b3}
.proof-more{display:flex;justify-content:center;margin:36px 0 0}

@media(max-width:1000px){.svc-steps{grid-template-columns:repeat(3,1fr)}.mk-grid,.proof-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .svc-grid,.answer-grid{grid-template-columns:1fr;gap:44px}
  .svc-visual{max-width:440px}
  .svc-pill.p1{left:-2%}.svc-pill.p2{right:-2%}
}
@media(max-width:640px){
  .svc-hero{padding:34px 0 60px}
  .svc-steps,.mk-grid,.proof-grid{grid-template-columns:1fr}
  .svc-lead{font-size:14.5px}.svc-chips li{font-size:11.5px}
  .glance{padding:24px 20px 8px}.glance dl>div{grid-template-columns:1fr;gap:4px}
  .svc-pill b{font-size:16px}.svc-pill{padding:9px 13px}
}
.proof{display:flex;flex-direction:column}
.proof-body{flex:1;display:flex;flex-direction:column;align-items:flex-start}
.proof p{margin-bottom:auto!important;padding-bottom:18px}

.svc-frame svg{width:100%;height:100%;display:block}

.svc-frame svg .in{opacity:0;transform:translateY(12px);transform-box:fill-box;transform-origin:center;animation:illIn .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes illIn{to{opacity:1;transform:none}}
.svc-frame svg .grow{transform:scaleX(0);transform-box:fill-box;transform-origin:left center;animation:illGrow 1s ease forwards;animation-delay:var(--d,0s)}
@keyframes illGrow{to{transform:scaleX(1)}}
.svc-frame svg .pop{transform:scale(0);transform-box:fill-box;transform-origin:center;animation:illPop .6s cubic-bezier(.3,1.7,.5,1) forwards;animation-delay:var(--d,0s)}
@keyframes illPop{to{transform:scale(1)}}
.svc-frame svg .pulse{transform-box:fill-box;transform-origin:center;animation:illPulse 2.6s ease-in-out infinite}
@keyframes illPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.svc-frame svg .cursor{animation:illCursor 4.5s ease-in-out infinite}
@keyframes illCursor{0%{transform:translate(0,0)}40%,55%{transform:translate(-120px,-110px)}100%{transform:translate(0,0)}}
.glance p{font-size:14.5px;line-height:1.8;color:#bdbdbd;margin:0 0 14px}
.glance p:last-child{margin:0}
@media (prefers-reduced-motion:reduce){.svc-frame svg *{animation:none!important;opacity:1!important;transform:none!important}}


@media (max-width:900px){
  html,body{overflow-x:hidden;max-width:100%}
}
@media (max-width:640px){
  .svc-visual{max-width:100%}
  .svc-ring{display:none}
  .svc-frame{padding:4%}
  .svc-pill{padding:9px 12px}
  .svc-pill b{font-size:15px}
  .svc-pill.p1{left:0;top:-4%}
  .svc-pill.p2{right:0;bottom:-4%}
  .svc-cta .button{width:100%}
  .svc-chips li{font-size:11px}
}


/* ---------- WordPress menu support (wp_nav_menu output) ---------- */
.main-nav ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.main-nav li{margin:0;padding:0}
@media(max-width:640px){
  .main-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .main-nav a:last-child{border-bottom:1px solid #242424}
  .main-nav li:last-child a{border-bottom:0}
}