:root{
  --navy:#071F2A;
  --navy-soft:#0E2A38;
  --teal:#0B7A6B;
  --emerald:#10B981;
  --light-teal:#5EEAD4;
  --mint:#E6F7F4;
  --ink:#1A2B2E;
  --muted:#5B6B6A;
  --border:#E2E8E7;
  --white:#FFFFFF;
  --void:#050e13;
  --glass-bg: rgba(14,42,56,0.46);
  --glass-bg-strong: rgba(5,17,23,0.96);
  --glass-border: rgba(148,214,201,0.16);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html.no-webgl body{background:var(--navy);}
body{
  margin:0;
  font-family:'Montserrat',system-ui,sans-serif;
  color:var(--white);
  background:var(--void);
  line-height:1.55;
  overflow-x:hidden;
}
/* The native cursor is hidden only once motion.js confirms a custom cursor
   is actually running (fine pointer + hover + motion not reduced) — see the
   has-custom-cursor class below. That way a visitor never ends up with no
   visible cursor at all if the script is blocked, errors, or the person has
   prefers-reduced-motion set. */
body.has-custom-cursor{cursor:none;}
@media (hover:none), (pointer:coarse){ body.has-custom-cursor{ cursor:auto; } }
a{color:var(--light-teal);text-decoration:none;}
a:hover{color:var(--emerald);}

/* Explicit, on-brand keyboard focus ring — visible on every interactive
   element regardless of the dark/glass backgrounds elsewhere on the page,
   rather than relying on each browser's own default outline. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--light-teal);
  outline-offset:3px;
  border-radius:4px;
}
img,svg{max-width:100%;}
.wrap{max-width:1180px;width:100%;margin:0 auto;padding:0 24px;position:relative;}
h1,h2,h3{font-weight:800;color:var(--white);margin:0;letter-spacing:-0.02em;}
h1{font-size:clamp(36px, 4.6vw, 74px);line-height:1.05;}
h2{font-size:clamp(28px, 4vw, 48px);line-height:1.08;}
p{margin:0;color:rgba(255,255,255,0.68);}
[hidden]{display:none !important;}

/* ================= WORLD (fixed 3D canvas + overlays) ================= */
#world-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block;}
.grain{
  position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{position:fixed;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse at center, transparent 45%, rgba(2,8,11,0.55) 100%);}
main, footer, header.site-nav{position:relative;z-index:2;}

/* ================= CUSTOM CURSOR ================= */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;transform:translate(-50%,-50%);}
.cursor-dot{width:6px;height:6px;background:var(--light-teal);}
.cursor-ring{width:34px;height:34px;border:1px solid rgba(94,234,212,0.5);transition:width .2s ease,height .2s ease,border-color .2s ease,background .2s ease;}
.cursor-ring.hover{width:56px;height:56px;background:rgba(94,234,212,0.08);border-color:var(--light-teal);}
@media (hover:none), (pointer:coarse){ .cursor-dot,.cursor-ring{display:none;} }

/* ================= GLASS PANEL PRIMITIVE ================= */
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--glass-border);
  border-radius:26px;
  box-shadow:0 40px 90px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
}
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--light-teal);margin:0 0 16px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--light-teal);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 30px;border-radius:10px;font-weight:700;font-size:15px;
  cursor:pointer;border:1px solid transparent;transition:transform .2s cubic-bezier(.2,.7,.2,1),background .15s ease,color .15s ease,box-shadow .2s ease,border-color .15s ease;
  will-change:transform;
}
.btn-primary{background:var(--emerald);color:var(--navy);}
.btn-primary:hover{background:var(--light-teal);box-shadow:0 14px 40px rgba(94,234,212,0.35);}
.btn-outline{border-color:rgba(255,255,255,0.28);color:var(--white);}
.btn-outline:hover{border-color:var(--light-teal);color:var(--light-teal);}

/* ================= KINETIC TEXT ================= */
.kw-line{overflow:hidden;display:inline-block;vertical-align:top;}
.kw{display:inline-block;transform:translateY(115%) rotateX(-70deg);opacity:0;transform-origin:bottom;}
.kw.in{transition:transform .8s cubic-bezier(.16,.9,.2,1), opacity .6s ease;transform:translateY(0) rotateX(0);opacity:1;}
@media (prefers-reduced-motion: reduce){ .kw{transform:none;opacity:1;} }

.hero [data-kinetic-fade]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.16,.9,.2,1), transform .7s cubic-bezier(.16,.9,.2,1);}
.hero [data-kinetic-fade].in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .hero [data-kinetic-fade]{opacity:1;transform:none;transition:none;} }

/* ================= NAV ================= */
header.site-nav{position:fixed;top:18px;left:0;right:0;z-index:60;display:flex;justify-content:center;padding:0 20px;pointer-events:none;}
.nav-pill{
  pointer-events:auto;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding:10px 14px 10px 20px;max-width:1180px;width:100%;
}
.brand{display:flex;align-items:center;gap:10px;color:var(--white);cursor:pointer;}
.brand .word{font-size:14.5px;font-weight:800;letter-spacing:0.02em;color:var(--white);}
nav.links{display:flex;align-items:center;gap:30px;}
nav.links a{color:rgba(255,255,255,0.82);font-size:13.5px;font-weight:600;cursor:pointer;position:relative;}
nav.links a::after{content:'';position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:var(--light-teal);transition:right .2s cubic-bezier(.2,.7,.2,1);}
nav.links a:hover::after,nav.links a.active::after{right:0;}
nav.links a:hover,nav.links a.active{color:var(--light-teal);}
nav.links a.mobile-contact-link{display:none;}
.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-cta .btn{padding:11px 22px;font-size:13.5px;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--white);margin:5px 0;border-radius:2px;}

/* ================= HERO ================= */
.hero{min-height:100vh;display:flex;align-items:center;padding:140px 0 80px;position:relative;}
.hero-inner{max-width:920px;}
.hero .lead{font-size:18px;color:rgba(255,255,255,0.72);margin:26px 0 38px;max-width:520px;}
.hero-actions{display:flex;gap:18px;flex-wrap:wrap;}
.scroll-cue{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;}
.scroll-cue span.track{display:block;width:22px;height:36px;border:1px solid rgba(255,255,255,0.28);border-radius:12px;position:relative;}
.scroll-cue span.track::before{content:'';position:absolute;top:6px;left:50%;width:3px;height:7px;background:var(--light-teal);border-radius:2px;transform:translateX(-50%);animation:cueScroll 1.8s ease-in-out infinite;}
.scroll-cue .label{font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.4);}
@keyframes cueScroll{0%{opacity:1;top:6px;}70%{opacity:0;top:16px;}100%{opacity:0;top:6px;}}
@media (prefers-reduced-motion: reduce){ .scroll-cue span.track::before{animation:none;} }

/* ================= SEE-THROUGH SCRUB REVEAL ================= */
.scrub-reveal{height:200vh;}
.scrub-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.scrub-window{position:absolute;inset:0;clip-path:url(#scrubClip);-webkit-clip-path:url(#scrubClip);display:flex;align-items:center;justify-content:center;will-change:clip-path;background:rgba(5,14,19,0.7);}
.scrub-window-inner{max-width:640px;text-align:center;padding:0 24px;transform:scale(0.92);opacity:0;transition:opacity .3s ease, transform .3s ease;}
.scrub-window-inner.reveal-in{opacity:1;transform:scale(1);}

/* ================= SECTION SCAFFOLDING ================= */
section{padding:130px 0;}
.section-head{max-width:640px;margin:0 auto 56px;}
.section-head.center{text-align:center;margin-left:auto;margin-right:auto;}

/* ================= SERVICES ================= */
.services-tabs{display:inline-flex;flex-wrap:wrap;gap:6px;padding:6px;border-radius:14px;margin:0 0 48px;}
.services-tab{appearance:none;border:none;background:transparent;color:rgba(255,255,255,0.6);font-size:13.5px;font-weight:700;padding:11px 22px;border-radius:9px;cursor:pointer;transition:all .15s ease;font-family:'Montserrat',sans-serif;white-space:nowrap;}
.services-tab:hover{color:var(--white);}
/* Belt-and-braces focus indicator: on this specific control the outline
   from the global :focus-visible rule above was found (via automated
   keyboard-nav testing) to sometimes compute to 0px width in Chromium
   despite matching, likely an engine quirk with appearance:none + a
   transparent background. A box-shadow ring uses a different rendering
   path and isn't affected, so it's added here as a guaranteed fallback. */
.services-tab:focus-visible{box-shadow:0 0 0 2px var(--void), 0 0 0 4px var(--light-teal);}
.services-tab.active{background:var(--emerald);color:var(--navy);}
.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.service-card{
  padding:36px;display:flex;flex-direction:column;gap:20px;
  opacity:0;transform:translateY(56px) rotateX(8deg) scale(0.96);
  transition:opacity .8s cubic-bezier(.16,.9,.2,1), transform .8s cubic-bezier(.16,.9,.2,1);
  transform-style:preserve-3d;
}
.service-card.in-view{opacity:1;transform:translateY(0) rotateX(0) scale(1);}
.service-card .row-number{font-size:13px;font-weight:800;color:var(--light-teal);letter-spacing:0.1em;opacity:0.7;}
.service-card .icon-wrap{width:64px;height:64px;border-radius:16px;background:rgba(94,234,212,0.1);display:flex;align-items:center;justify-content:center;}
.service-card h3{font-size:19px;}
.service-card p{font-size:14.5px;}
@media (prefers-reduced-motion: reduce){ .service-card{opacity:1;transform:none;transition:none;} }

/* ================= HOW WE WORK — horizontal pinned scroller ================= */
.process-pin{height:400vh;}
.process-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;}
.process-head{padding:0 24px;max-width:640px;margin:0 auto 40px;text-align:center;}
.process-track{display:flex;gap:28px;padding:0 24px;will-change:transform;}
.process-card{
  flex:0 0 min(420px, 82vw);padding:44px 38px;display:flex;flex-direction:column;gap:22px;min-height:360px;justify-content:flex-end;
}
.process-card .step-num{font-size:64px;font-weight:800;color:var(--light-teal);opacity:0.35;line-height:1;}
.process-card h3{font-size:22px;}
.process-card p{font-size:15px;}
.process-progress{max-width:420px;margin:36px auto 0;height:2px;background:rgba(255,255,255,0.1);border-radius:2px;overflow:hidden;}
.process-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--teal),var(--light-teal));}
@media (prefers-reduced-motion: reduce){
  .process-pin{height:auto;}
  .process-stage{position:static;height:auto;overflow:visible;padding:0 0 40px;}
  .process-track{flex-wrap:wrap;justify-content:center;}
  .process-progress{display:none;}
}

/* ================= WHY ================= */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.why-item{
  padding:38px;
  opacity:0;transform:translateY(48px);
  transition:opacity .8s cubic-bezier(.16,.9,.2,1), transform .8s cubic-bezier(.16,.9,.2,1);
}
.why-item.in-view{opacity:1;transform:translateY(0);}
.why-item .num{font-size:15px;font-weight:800;color:var(--emerald);letter-spacing:0.1em;margin-bottom:16px;}
.why-item h3{font-size:19px;margin-bottom:12px;}
.why-item p{font-size:14.5px;}
@media (prefers-reduced-motion: reduce){ .why-item{opacity:1;transform:none;transition:none;} }

/* ================= ABOUT ================= */
.about-grid{display:grid;grid-template-columns:0.6fr 1.4fr;gap:40px;align-items:center;}
.about-media{padding:44px;display:flex;flex-direction:column;align-items:center;gap:20px;}
.avatar{
  width:168px;height:168px;border-radius:50%;
  background:linear-gradient(150deg, var(--teal), var(--emerald) 55%, var(--light-teal));
  display:flex;align-items:center;justify-content:center;
  font-size:52px;font-weight:800;color:var(--navy);
  box-shadow:0 0 0 1px rgba(255,255,255,0.12), 0 30px 60px rgba(0,0,0,0.4);
}
.linkedin-badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,0.75);cursor:pointer;}
.linkedin-badge:hover{color:var(--light-teal);}
.about-content{padding:48px;}
.about-content .about-name{color:var(--light-teal);font-weight:700;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:16px;}
.about-content p:not(.about-name){font-size:15.5px;max-width:620px;}

/* ================= TOOLS — marquee ================= */
.tools .section-head{margin-bottom:40px;}
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;gap:14px;width:max-content;animation:marquee 32s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.tool-chip{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:999px;color:rgba(255,255,255,0.85);font-size:14px;font-weight:600;white-space:nowrap;}
.tool-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--light-teal);flex-shrink:0;}
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }

/* ================= FAQ ================= */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.faq-item{padding:8px 28px;}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:16px;font-weight:700;color:var(--white);padding:18px 0;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';flex-shrink:0;font-size:22px;font-weight:400;color:var(--light-teal);transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.faq-item[open] summary::after{transform:rotate(135deg);}
.faq-body{overflow:hidden;height:0;}
.faq-body p{margin-top:0;padding-bottom:22px;font-size:14.5px;max-width:680px;}

/* ================= CTA BAND ================= */
.cta-band-wrap{padding:0 24px;}
.cta-band{padding:64px 56px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:linear-gradient(135deg, rgba(16,185,129,0.18), rgba(94,234,212,0.06));}
.cta-band h2{font-size:clamp(24px,3vw,32px);}
.cta-band p{margin-top:10px;font-size:15px;max-width:420px;}

/* ================= CONTACT ================= */
.contact-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:32px;align-items:start;}
.contact-info{padding:48px;}
.contact-info h1{font-size:clamp(32px,4vw,44px);}
.contact-info .lead{margin-top:18px;max-width:420px;}
.info-rows{margin-top:36px;display:flex;flex-direction:column;gap:4px;}
.info-row{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid rgba(255,255,255,0.1);}
.info-row .icon{width:36px;height:36px;border-radius:9px;background:rgba(94,234,212,0.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.info-row .label{font-size:11.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--light-teal);margin-bottom:6px;}
.info-row .value{font-size:15px;color:rgba(255,255,255,0.85);}
a.info-row{text-decoration:none;cursor:pointer;transition:border-color 0.15s ease;}
a.info-row:hover{border-top-color:rgba(94,234,212,0.45);}
a.info-row:hover .value{color:var(--light-teal);text-decoration:underline;}

.form-card{padding:40px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:12.5px;font-weight:700;color:rgba(255,255,255,0.85);margin-bottom:8px;letter-spacing:0.02em;}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1px solid rgba(255,255,255,0.14);border-radius:10px;
  font-family:'Montserrat',sans-serif;font-size:14px;color:var(--white);background:rgba(255,255,255,0.04);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field select option{color:var(--ink);}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,0.45);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--light-teal);box-shadow:0 0 0 3px rgba(94,234,212,0.12);}
.field textarea{resize:vertical;min-height:110px;}
.form-note{font-size:12px;color:rgba(255,255,255,0.5);margin-top:14px;}
.form-consent{font-size:12.5px;color:rgba(255,255,255,0.6);margin-bottom:16px;line-height:1.5;}
.form-consent a{text-decoration:underline;}
.form-success{display:none;background:rgba(94,234,212,0.1);border:1px solid rgba(94,234,212,0.35);border-radius:12px;padding:16px 18px;font-size:14px;color:var(--light-teal);font-weight:600;margin-bottom:20px;}
.form-success.show{display:block;}

/* ================= SUBPAGE STATIC BACKGROUND ================= */
/* Contact/Privacy/Terms/404 are plain static pages (no WebGL scene, no
   three.js/GSAP dependency) so they load fast and stay lightweight. This
   fixed gradient stands in for the animated canvas on the homepage, using
   the same brand tokens so the page still feels like part of one site. */
.static-page-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 900px 600px at 15% -10%, rgba(11,122,107,0.32), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 100%, rgba(94,234,212,0.10), transparent 55%),
    var(--void);
}

/* ================= BREADCRUMB ================= */
.breadcrumb{
  display:flex;align-items:center;gap:8px;font-size:12.5px;
  color:rgba(255,255,255,0.5);margin-bottom:20px;
}
.breadcrumb a{color:rgba(255,255,255,0.7);}
.breadcrumb a:hover{color:var(--light-teal);}
.breadcrumb .sep{opacity:0.5;}

/* ================= 404 PAGE ================= */
.error-section{min-height:80vh;display:flex;align-items:center;}
.error-content{max-width:560px;padding:48px;text-align:left;}
.error-code{font-size:13px;font-weight:800;letter-spacing:0.14em;color:var(--light-teal);margin-bottom:18px;}
.error-content h1{font-size:clamp(28px,3.6vw,38px);margin-bottom:16px;}
.error-content p{font-size:15.5px;margin-bottom:28px;}

/* ================= LEGAL PAGES ================= */
.legal-content{max-width:760px;padding:48px;}
.legal-content h1{font-size:clamp(30px,4vw,40px);}
.legal-content .updated{color:rgba(255,255,255,0.5);font-size:13px;margin-top:14px;}
.legal-content .lead{margin-top:22px;font-size:16px;}
.legal-content h2{font-size:20px;margin:36px 0 12px;}
.legal-content p{font-size:15px;margin-bottom:14px;}
.legal-content ul,.legal-content ol{font-size:15px;margin:0 0 14px;padding-left:22px;}
.legal-content li{margin-bottom:8px;}

/* ================= FOOTER ================= */
footer{padding:70px 0 32px;}
.footer-panel{padding:48px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,0.1);}
.footer-brand p{color:rgba(255,255,255,0.55);font-size:14px;margin-top:14px;max-width:280px;}
footer h4{color:var(--white);font-size:12.5px;letter-spacing:0.08em;text-transform:uppercase;margin:0 0 16px;}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
footer ul a{color:rgba(255,255,255,0.62);font-size:14px;}
footer ul a:hover{color:var(--light-teal);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:22px;font-size:12px;color:rgba(255,255,255,0.52);flex-wrap:wrap;gap:12px;}
.footer-legal-disclosure{font-size:11.5px;color:rgba(255,255,255,0.52);margin-top:14px;line-height:1.6;}

/* ================= RESPONSIVE ================= */
@media (max-width: 900px){
  section{padding:88px 0;}
  .process-pin{height:260vh;}
  .service-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;text-align:center;}
  .about-media{padding-bottom:0;}
  .contact-grid{grid-template-columns:1fr;gap:24px;}
  .form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:28px;}
  .cta-band{flex-direction:column;align-items:flex-start;padding:44px 32px;}
  nav.links{
    display:none;position:fixed;top:78px;left:16px;right:16px;
    flex-direction:column;padding:20px 24px;gap:20px;border-radius:22px;
    background:var(--glass-bg-strong);backdrop-filter:blur(20px);border:1px solid var(--glass-border);
  }
  nav.links.open{display:flex;}
  nav.links a.mobile-contact-link{display:block;}
  .nav-toggle{display:block;}
  .nav-cta .btn{display:none;}
}
@media (max-width: 640px){
  .glass{border-radius:20px;}
  .hero{padding-top:120px;}
  .service-card,.why-item,.about-media,.about-content,.contact-info,.form-card,.legal-content,.footer-panel{padding:28px;}
  .process-card{padding:32px 26px;}
}