/* ClickBurst portfolio theme layer — brand fonts, colours, header/footer and motion.
   Loaded after portfolio.css. Layout and content of the portfolio are unchanged. */
:root{
  --cb-paper:#F4F1EA;--cb-ink:#111111;--cb-lime:#D8FF3E;--cb-blue:#2457FF;--cb-white:#FFFDF8;
  --cb-display:"Space Grotesk",system-ui,sans-serif;--cb-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cb-ease:cubic-bezier(.16,1,.3,1);
  --accent-red:#D8FF3E;--accent-red-hover:#c6ef24;--accent-red-glow:rgba(216,255,62,.32);--accent-red-soft:rgba(216,255,62,.10);
  --border-focus:rgba(216,255,62,.5);
  --bg-main:#111111;--bg-card:#171717;--bg-card-hover:#1d1d1d;--bg-surface:#1b1b1b;
  --font-sans:var(--cb-sans);
}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{font-family:var(--cb-sans)}
::selection{background:var(--cb-lime);color:var(--cb-ink)}
:focus-visible{outline:2px solid var(--cb-lime);outline-offset:3px}

/* Headings in the site's display face */
.hero-title,.section-title,.service-title,.speedramp-title,.process-step-title,.feature-heading,.stat-value,.counter-number,.modal-title,.brand-logo,.process-step-num{font-family:var(--cb-display)}
.hero-title{letter-spacing:-.055em;line-height:1.02;font-weight:700}
.section-title,.speedramp-title{letter-spacing:-.05em;font-weight:700}
.service-title{letter-spacing:-.035em}
.section-tag{font-family:var(--cb-sans);font-size:.72rem;letter-spacing:.14em;color:var(--cb-lime);background:rgba(216,255,62,.08);border-color:rgba(216,255,62,.28)}
.cb-dot{width:7px;height:7px;border-radius:50%;background:var(--cb-lime);display:inline-block;box-shadow:0 0 0 0 rgba(216,255,62,.6);animation:cbPulse 2.4s var(--cb-ease) infinite}
@keyframes cbPulse{0%{box-shadow:0 0 0 0 rgba(216,255,62,.55)}70%{box-shadow:0 0 0 9px rgba(216,255,62,0)}100%{box-shadow:0 0 0 0 rgba(216,255,62,0)}}

/* Hero highlight: lime → blue sheen */
.hero-title .highlight{background:linear-gradient(100deg,var(--cb-lime) 0%,#ecff9c 35%,#7c9bff 62%,var(--cb-lime) 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:cbSheen 6s ease-in-out infinite}
@keyframes cbSheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.highlight-ramp{background:linear-gradient(135deg,var(--cb-lime) 0%,#9db4ff 50%,var(--cb-lime) 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text}

/* Buttons: lime primary with ink text, like the site's accent */
.btn{font-family:var(--cb-sans);font-weight:700;border-radius:12px;transition:transform .35s var(--cb-ease),background-color .25s,box-shadow .35s var(--cb-ease),color .25s}
.btn-primary{background-color:var(--cb-lime);color:var(--cb-ink);box-shadow:0 6px 24px -6px rgba(216,255,62,.45)}
.btn-primary:hover{background-color:var(--cb-white);color:var(--cb-ink);box-shadow:0 10px 30px -6px rgba(216,255,62,.55)}
.btn-secondary:hover{border-color:rgba(216,255,62,.5)}
.filter-pill.active,.timeline-clip,.card-play-center{color:var(--cb-ink)}
.filter-pill{transition:background-color .25s,color .25s,border-color .25s,transform .3s var(--cb-ease)}
.filter-pill:hover{transform:translateY(-1px)}
.service-badge,.card-category-badge{font-family:var(--cb-sans)}

/* ---------- Header: the clickburst.in capsule ---------- */
.site-navbar{top:16px;padding:0 16px}
.site-navbar .navbar-inner{max-width:1280px;width:100%;height:64px;gap:18px;padding:8px 8px 8px 12px;border-radius:18px;background:rgba(244,241,234,.9);border:1px solid rgba(17,17,17,.13);box-shadow:0 10px 40px -12px rgba(0,0,0,.45);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);pointer-events:auto}
.site-navbar.scrolled .navbar-inner{background:rgba(244,241,234,.96);border-color:rgba(17,17,17,.16);box-shadow:0 16px 44px -14px rgba(0,0,0,.6);transform:none}
.brand-logo{color:var(--cb-ink);gap:10px;font:700 16px/1 var(--cb-display);letter-spacing:-.03em}
.brand-logo .brand-text{white-space:nowrap}.brand-logo .brand-text small{display:block;font:600 8px/1 var(--cb-sans);letter-spacing:.12em;text-transform:uppercase;color:#6E6E6E;margin-top:4px}
.brand-icon-box{width:38px;height:38px;padding:0;background:var(--cb-lime);border-radius:12px;box-shadow:none;overflow:hidden;flex:0 0 38px;transition:transform .5s var(--cb-ease)}
.brand-icon-box img{width:100%;height:100%;display:block}
.brand-logo:hover .brand-icon-box{transform:rotate(-6deg) scale(1.06)}
.site-navbar .nav-links{gap:4px}
.site-navbar .nav-link{color:#4e4e4e;font:600 13.5px/1 var(--cb-display);letter-spacing:.01em;padding:11px 12px;border-radius:10px;transition:background-color .2s,color .2s}
.site-navbar .nav-link:hover{background:rgba(17,17,17,.06);color:var(--cb-ink)}
.site-navbar .nav-link.active{color:var(--cb-ink);background:var(--cb-lime)}
.site-navbar .nav-link::after{display:none}
.site-navbar .nav-cta{background:var(--cb-ink);color:var(--cb-white);box-shadow:none;padding:13px 16px;font-size:12px;border-radius:12px;white-space:nowrap}
.site-navbar .nav-cta:hover{background:var(--cb-blue);color:#fff;transform:none}
.hamburger-btn{width:42px;height:42px;border-radius:11px;background:transparent;border:1px solid #D4D0C7;padding:12px}
.hamburger-btn span{background-color:var(--cb-ink)}
.mobile-nav-drawer{background:var(--cb-paper);color:var(--cb-ink);border-left:1px solid #D4D0C7}
.mobile-nav-drawer .mobile-nav-link{color:var(--cb-ink);font-family:var(--cb-display);font-weight:600}
.mobile-nav-drawer .mobile-nav-close{color:var(--cb-ink);background:transparent;border:1px solid #D4D0C7}
.mobile-nav-drawer .btn-primary{background:var(--cb-ink);color:var(--cb-white);box-shadow:none}
@media (min-width:981px){.site-navbar .nav-links{display:flex}.site-navbar .hamburger-btn{display:none}.site-navbar .nav-actions .btn{display:inline-flex}}
@media (max-width:980px){.site-navbar .nav-links{display:none}.site-navbar .hamburger-btn{display:flex;margin-left:8px}}
@media (min-width:761px) and (max-width:980px){.site-navbar .nav-actions .btn{display:inline-flex}}
@media (max-width:760px){
  .site-navbar .navbar-inner{height:60px;padding-left:10px}
  .site-navbar .nav-cta{display:none}
}

/* Scroll progress (site-style thin bar) */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--cb-lime),var(--cb-blue));z-index:200;pointer-events:none}

/* Cursor accents in brand lime */
.cursor-dot{background:var(--cb-lime)!important;box-shadow:0 0 12px rgba(216,255,62,.7)!important}
.cursor-ring{border-color:rgba(216,255,62,.55)!important}

/* ---------- Motion: reveals (only once JS has set html.cb-motion) ---------- */
html.cb-motion [data-reveal]{opacity:0;transform:translate3d(0,26px,0);transition:opacity .8s var(--cb-ease),transform .9s var(--cb-ease);transition-delay:var(--d,0s);will-change:opacity,transform}
html.cb-motion [data-reveal="fade"]{transform:none}
html.cb-motion [data-reveal="scale"]{transform:scale(.965)}
html.cb-motion [data-reveal].is-in{opacity:1;transform:none}

/* Project cards: lift + zoom on hover (translate is separate from the filter's transform) */
.portfolio-card{transition:opacity .35s var(--cb-ease),transform .35s var(--cb-ease),translate .5s var(--cb-ease),box-shadow .5s var(--cb-ease),border-color .4s}
.portfolio-card .portfolio-card-video{transition:transform 1.1s var(--cb-ease),filter .6s}
@media (hover:hover){
  .portfolio-card:hover{translate:0 -8px;box-shadow:0 26px 60px -24px rgba(0,0,0,.85),0 0 0 1px rgba(216,255,62,.45),0 0 40px -10px rgba(216,255,62,.28)}
  .portfolio-card:hover .portfolio-card-video{transform:scale(1.06)}
  .thumb-showcase-item,.carousel-mini-card,.stat-card,.speedramp-feature-card,.process-card{transition:translate .5s var(--cb-ease),box-shadow .5s var(--cb-ease),border-color .4s}
  .thumb-showcase-item:hover,.carousel-mini-card:hover{translate:0 -4px}
  .stat-card:hover,.speedramp-feature-card:hover{translate:0 -4px;border-color:rgba(216,255,62,.35)}
}
.card-play-center{transition:transform .45s var(--cb-ease),box-shadow .45s}
.portfolio-card:hover .card-play-center{transform:translate(-50%,-50%) scale(1.08)}

/* Section seams: a soft lime/blue hairline that draws in */
.section-wrapper{position:relative}
.section-wrapper::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(216,255,62,.55),rgba(36,87,255,.55),transparent);transform:scaleX(0);transform-origin:50% 50%;transition:transform 1.4s var(--cb-ease);z-index:2;pointer-events:none}
.section-wrapper.seam-in::before{transform:scaleX(1)}
html:not(.cb-motion) .section-wrapper::before{transform:scaleX(1)}

/* ---------- Footer: the clickburst.in footer ---------- */
.cb-footer{background:var(--cb-ink);border-top:1px solid #262626;padding:64px 0 28px}
.cb-footer .footer-top{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:40px;text-align:left;padding-bottom:48px;border-bottom:1px solid #262626}
.cb-footer .footer-icon{width:56px;height:56px;flex-basis:56px;border-radius:14px}
.cb-footer-name{font:700 28px/1 var(--cb-display);letter-spacing:-.05em;color:var(--cb-white);margin-top:18px}
.cb-footer-name span{display:block;font:600 9px/1.4 var(--cb-sans);letter-spacing:.12em;text-transform:uppercase;color:#8a8a8a;margin-top:10px}
.cb-footer-contact{display:flex;flex-direction:column;gap:6px;margin-top:26px}
.cb-footer-kicker{font:600 9px var(--cb-sans);letter-spacing:.14em;color:var(--cb-lime)}
.cb-footer-phone{font:700 clamp(26px,3vw,36px)/1.05 var(--cb-display);letter-spacing:-.04em;color:var(--cb-white);text-decoration:none}
.cb-footer-phone:hover{color:var(--cb-lime)}
.cb-footer-email{color:#bdbdbd;text-decoration:none;font-size:.95rem}
.cb-footer-email:hover{color:var(--cb-white)}
.cb-footer-cols{display:flex;gap:56px}
.cb-footer .footer-links{flex-direction:column;gap:12px}
.cb-footer .footer-links a{color:#bdbdbd;font-size:.92rem;text-decoration:none}
.cb-footer .footer-links a:hover{color:var(--cb-lime)}
.cb-footer-head{font:600 9px var(--cb-sans);letter-spacing:.14em;text-transform:uppercase;color:#7a7a7a;margin-bottom:4px}
.cb-footer .footer-bottom{flex-direction:row;justify-content:space-between;gap:16px;text-align:left;padding-top:24px;color:#777;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
.cb-footer-bottom-right{display:flex;gap:20px;align-items:center}
.cb-top-link{color:#bdbdbd;text-decoration:none}.cb-top-link:hover{color:var(--cb-lime)}
@media (max-width:760px){
  .cb-footer .footer-top{flex-direction:column;gap:36px}
  .cb-footer-cols{gap:40px}
  .cb-footer .footer-bottom,.cb-footer-bottom-right{flex-direction:column;align-items:flex-start;gap:10px}
}

/* Reduced motion: no movement, content shown at once */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.cb-motion [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .hero-title .highlight,.cb-dot,.highlight-ramp{animation:none!important}
  .portfolio-card:hover{translate:none}
  .portfolio-card:hover .portfolio-card-video{transform:none}
  .section-wrapper::before{transition:none;transform:scaleX(1)}
}


/* ==========================================================================
   Premium pass (round 2): the portfolio uses exactly the clickburst.in tokens —
   ink #111111, paper #F4F1EA, white #FFFDF8, muted #6E6E6E, line #D4D0C7,
   lime #D8FF3E, blue #2457FF — one calm ink stage, warm greys, lime as the accent.
   ========================================================================== */
:root{
  --cb-muted:#6E6E6E;--cb-line:#D4D0C7;
  --bg-main:#111111;--bg-card:#161616;--bg-card-hover:#1B1B1B;--bg-surface:#1A1A1A;--bg-glass:rgba(22,22,22,.8);
  --text-primary:#FFFDF8;--text-secondary:#B3AFA6;--text-muted:#85817A;
  --border-subtle:rgba(244,241,234,.08);--border-light:rgba(244,241,234,.14);
  --accent-red-glow:rgba(216,255,62,.18);
}
html,body{background:#111111}
body{color:var(--text-primary);text-rendering:optimizeLegibility}

/* Sections: solid ink, alternating with a hair deeper ink, divided by fine paper-tone hairlines */
.hero-section,.work-section,.process-section{background:#111111!important}
.services-section,.speedramp-section,.stats-section{background:#0E0E0E!important}
.hero-section,.services-section,.work-section,.speedramp-section,.process-section,.stats-section{border-top:1px solid rgba(244,241,234,.07)!important;border-bottom:0!important}
.hero-section{border-top:0!important}
/* glows: one soft lime light behind the hero, one soft blue behind the numbers, nothing muddy */
.services-ambient-glow,.work-ambient-glow,.speedramp-ambient-glow,.process-ambient-glow{display:none!important}
.hero-ambient-glow{background:radial-gradient(circle,rgba(216,255,62,.09) 0%,rgba(216,255,62,0) 62%)!important}
.stats-ambient-glow{background:radial-gradient(ellipse,rgba(36,87,255,.12) 0%,rgba(36,87,255,0) 65%)!important}
.section-bg-canvas{opacity:.5}
@media (max-width:760px){.section-bg-canvas{opacity:.35}}

/* Type: solid brand colour instead of rainbow gradients (reads premium, matches "Burst" in the site's lime) */
.hero-title{color:var(--cb-white)}
.hero-title .highlight,.highlight-ramp{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--cb-lime)!important;animation:none!important}
.hero-subtitle,.section-subtitle,.service-desc,.speedramp-desc,.process-step-desc,.card-desc,.feature-desc,.stat-label{color:var(--text-secondary)}
.section-title,.speedramp-title{color:var(--cb-white);text-wrap:balance}
.hero-subtitle,.section-subtitle{text-wrap:pretty}

/* Surfaces: one card system — ink-raised, paper hairline, 20px radius, soft depth */
.service-card,.portfolio-card,.stat-card,.speedramp-feature-card,.process-card,.process-video-card,.hero-clean-video-frame,.speedramp-video-container,.thumb-showcase-item,.carousel-mini-card{
  background-color:#161616;border-color:rgba(244,241,234,.09)!important;
  box-shadow:0 1px 0 rgba(255,253,248,.04) inset,0 24px 48px -32px rgba(0,0,0,.9)}
video{background:#161616}
.portfolio-card video,.hero-player-video,.speedramp-video-el,.process-video-el,.yt-video-embed{object-fit:cover}

/* Buttons: crisp lime, no neon haze */
.btn-primary{box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 24px -14px rgba(216,255,62,.55)}
.btn-primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 16px 30px -16px rgba(216,255,62,.6)}
.btn-secondary{border-color:rgba(244,241,234,.18);color:var(--cb-white)}
.btn-secondary:hover{background:rgba(244,241,234,.06)}

/* Hover: a quiet lift with a lime hairline (no glow blob) */
@media (hover:hover){
  .portfolio-card:hover{box-shadow:0 30px 60px -30px rgba(0,0,0,.95),0 0 0 1px rgba(216,255,62,.5)!important}
  .service-card:hover,.stat-card:hover,.speedramp-feature-card:hover,.process-card:hover{border-color:rgba(216,255,62,.32)!important}
}

/* Smoothness: GPU-friendly transitions on the brand easing */
.portfolio-card,.service-card,.stat-card,.process-card,.speedramp-feature-card{transition-timing-function:cubic-bezier(.16,1,.3,1)}
.portfolio-card-video,.hero-player-video{transform:translateZ(0);backface-visibility:hidden}
@media (hover:none){.cursor-dot,.cursor-ring{display:none!important}}

/* Footer: both direct lines */
.cb-footer-phones{display:flex;flex-direction:column;gap:4px}
.cb-footer-phone{display:inline-block}

/* Speed-ramp feature icons: calm lime chip (the pulsing neon glow repainted every frame) */
.feature-icon-badge{background:rgba(216,255,62,.08)!important;border:1px solid rgba(216,255,62,.32)!important;color:var(--cb-lime)!important;box-shadow:none!important;animation:none!important;filter:none!important}
.speedramp-feature-card:hover{background:rgba(244,241,234,.03)!important}
.highlight-ramp{filter:none!important}
.stat-icon-wrapper{box-shadow:none!important}

/* Alignment: services cards centred on phones (the stack rail took 32px on the right only) */
@media (max-width:760px){.services-list{padding-right:0!important}.stack-rail-indicator{display:none!important}}
/* stack rail on phones hidden above */

/* Section tag hugs its text (the speed-ramp tag stretched across the column) */
.speedramp-details-col > .section-tag{align-self:flex-start;width:auto;display:inline-flex;max-width:max-content}
/* tag hugs its text */

/* Footer phone lines match the main footer exactly (16px / 600 / +.045em, #E6E6E6) */
.cb-footer-phone{font:600 16px/1.3 var(--cb-sans)!important;letter-spacing:.045em!important;color:#E6E6E6!important;min-height:32px;display:inline-flex;align-items:center}
.cb-footer-phone:hover{color:var(--cb-lime)!important}
/* phone lines match the main footer */