/* Bright and punchy preview: blue, orange and white blocks, oversized type, big buttons, scroll reveals. */
:root{--hot:#f27a00;--sun:#ff951a}
/* nav */
nav a:last-child{background:var(--sun);color:#fff!important;border:0;border-radius:999px;padding:12px 26px;font-weight:800;box-shadow:0 6px 18px rgba(255,149,26,.45);transition:transform .2s,box-shadow .2s}
nav a:last-child:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,149,26,.55);text-decoration:none}
.desktop-nav a{color:#fff}
/* hero */
.hero{position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;right:-8%;top:50%;width:62vw;height:62vw;max-width:880px;max-height:880px;transform:translateY(-46%);border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffb04d 0,var(--sun) 45%,var(--hot) 100%);opacity:.95;z-index:0}
.hero>*{position:relative;z-index:1}
.hero h1,.hero .hero-slogan{font-size:clamp(72px,9.4vw,150px);text-shadow:0 4px 0 rgba(0,70,110,.18)}
.hero-bottom p{color:#fff;font-size:19px}
.btn-big{display:inline-flex;align-items:center;gap:14px;background:var(--sun);color:var(--ink);font-weight:800;font-size:18px;padding:20px 34px;border-radius:999px;box-shadow:0 10px 28px rgba(0,60,95,.35);transition:transform .2s,box-shadow .2s,background .2s}
.btn-big:hover{transform:translateY(-3px) scale(1.02);background:#ffa23a;box-shadow:0 16px 34px rgba(0,60,95,.4)}
.circle-link{color:#fff}.circle-link b{border-color:#fff}
.motion-toggle{color:#fff;border-color:rgba(255,255,255,.55)}
.image-caption{color:#fff}
.kinetic-logo{filter:drop-shadow(0 18px 30px rgba(0,50,80,.35))}
/* marquee */
.marquee{background:#fff;overflow:hidden;padding:20px 0;transform:rotate(-1.2deg);margin:-14px -2% 0;position:relative;z-index:3;box-shadow:0 10px 30px rgba(0,60,95,.25)}
.marquee-track{display:flex;gap:34px;width:max-content;animation:slide 32s linear infinite;align-items:center}
.marquee span{font:700 34px/1 'Brand Condensed','Arial Narrow',Arial,sans-serif;letter-spacing:.04em;color:var(--blue)}
.marquee b{color:var(--sun);font-size:22px}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}
/* intro: full orange block */
.intro{background:linear-gradient(135deg,var(--sun),var(--hot));border-top:0;padding-top:130px;padding-bottom:120px;margin-top:-30px}
.intro .section-label{color:#fff!important}.intro .section-label .red{color:#fff}
.intro h2{color:#fff;font-size:clamp(52px,7vw,112px);line-height:.98}
.intro h2 i{color:transparent;-webkit-text-stroke:2.5px #fff}
.intro h2 .heading-dot{color:#fff}
.intro-copy p{color:#fff;font-size:19px;font-weight:500}
/* services */
.services{background:var(--blue);padding-top:110px;padding-bottom:110px}
.services .section-label{color:#fff}
.services h2{color:#fff;font-size:clamp(52px,6.6vw,104px)}
.services h2 i,.services .heading-dot{color:var(--sun)}
.section-heading>p{color:#fff;font-size:19px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc-card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:22px;padding:34px 32px 30px;min-height:330px;overflow:hidden;box-shadow:0 14px 34px rgba(0,60,95,.22);transition:transform .25s,box-shadow .25s,background .25s}
.svc-card:before{content:"";position:absolute;right:-60px;top:-60px;width:170px;height:170px;border-radius:50%;background:var(--sun);opacity:.14;transition:transform .35s,opacity .25s}
.svc-card:hover{transform:translateY(-8px);background:var(--sun);box-shadow:0 24px 46px rgba(0,60,95,.35)}
.svc-card:hover:before{transform:scale(2.6);background:#fff;opacity:.16}
.svc-num{font:700 64px/1 'Brand Condensed','Arial Narrow',Arial,sans-serif;color:var(--sun);transition:color .25s}
.svc-card h3{font-size:38px;margin:16px 0 12px;color:var(--blue)!important;transition:color .25s}
.svc-card h3 .heading-accent{color:var(--sun)!important;transition:color .25s}
.svc-card p{flex:1;color:#35505e;margin:0 0 18px;padding-right:50px;transition:color .25s}
.svc-tags{font-size:11px;letter-spacing:.1em;font-weight:700;color:var(--blue);padding-right:60px;transition:color .25s}
.svc-go{position:absolute;right:26px;bottom:22px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;font-size:20px;transition:background .25s,color .25s,transform .25s}
.svc-card:hover .svc-num,.svc-card:hover p,.svc-card:hover .svc-tags,.svc-card:hover h3,.svc-card:hover h3 .heading-accent{color:#fff!important}
.svc-card:hover .svc-go{background:#fff;color:var(--hot);transform:rotate(45deg)}
.svc-cta{text-align:center;margin-top:56px}
/* contact */
.contact{background:linear-gradient(180deg,var(--blue),#0287ba)}
.contact h2 i{color:var(--sun)}
.project-form{border-radius:22px;box-shadow:0 24px 60px rgba(0,50,80,.35)}
.form-actions button{background:var(--sun)!important;color:var(--ink)!important;border:0!important;border-radius:999px!important;font-weight:800;padding:16px 30px!important;box-shadow:0 8px 20px rgba(255,149,26,.45)}
.form-actions button:hover{background:var(--hot)!important}
/* scroll reveal */
.js-rv [data-rv]{opacity:0;transform:translateY(36px) scale(.98);transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.js-rv [data-rv].in{opacity:1;transform:none}
@media(max-width:1050px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.svc-grid{grid-template-columns:1fr}.hero:before{width:120vw;height:120vw;right:-40%;top:62%}.hero h1,.hero .hero-slogan{font-size:18vw}.btn-big{font-size:16px;padding:17px 26px}.marquee span{font-size:26px}.intro{padding-top:90px;padding-bottom:80px}.svc-card{min-height:0}}
/* v2: darker blue disc with an orange rim so the logo's orange rings stand out */
.hero:before{background:radial-gradient(circle at 35% 30%,#1aa9e3 0,#0288c4 50%,#046a9c 100%);box-shadow:0 0 0 14px var(--sun),0 0 0 30px rgba(255,255,255,.18),0 30px 70px rgba(0,50,80,.35);opacity:1;width:56vw;height:56vw;right:-4%}
.hero h1,.hero .hero-slogan{font-size:clamp(68px,8.2vw,134px)}
.hero h1 i,.hero .hero-slogan i{color:var(--sun)}
@media(max-width:760px){.hero:before{width:110vw;height:110vw;right:-30%;top:64%;box-shadow:0 0 0 10px var(--sun)}}

/* round 13: card 07 two columns wide with the orange "Not sure where to start?" card 08 beside it; ordinary cards at 2 and 1 columns */
.svc-card.svc-07{grid-column:1/span 2}
.svc-card.svc-07 p{max-width:620px}
@media(max-width:1050px){.svc-card.svc-07{grid-column:auto}}
.svc-card.svc-08{background:var(--sun)}
.svc-card.svc-08:before{background:#fff;opacity:.16}
.svc-card.svc-08:hover{background:var(--hot)}
.svc-card.svc-08 .svc-num,.svc-card.svc-08 h3,.svc-card.svc-08 p{color:#fff!important}
.svc-card.svc-08 .svc-go{background:#fff;color:var(--hot)}