/* Digital Intelligence — shared design system
   Extracted from the Claude Design handoff prototype, expanded for multi-page site. */
:root{
  color-scheme:dark; /* intentionally dark-only — declare it so UA controls/scrollbars render dark */
  --bg-0:#080a1c; --bg-1:#0c0e26; --bg-2:#111433; --bg-3:#171a3f;
  --line:rgba(140,160,230,.12); --line-2:rgba(140,160,230,.20);
  --cyan:#05acff; --cyan-soft:#54c7ff; --teal:#5fc8d7; --violet:#8160e6; --blue:#1a3df0;
  /* --dim raised from #5a608a (3.25:1, failed WCAG AA) to #7b82ab (5.25:1) for text legibility */
  --white:#ffffff; --text:#c7cdec; --muted:#838bb4; --dim:#7b82ab;
  --grad:linear-gradient(100deg,#05acff 0%,#3aa0ff 38%,#8160e6 100%);
  --grad-soft:linear-gradient(100deg,rgba(5,172,255,.16),rgba(129,96,230,.16));
  --r-sm:10px; --r:16px; --r-lg:24px;
  --maxw:1240px;
  --shadow:0 30px 80px -30px rgba(0,0,0,.7);
  --glow-cyan:0 0 0 1px rgba(5,172,255,.25),0 18px 50px -18px rgba(5,172,255,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg-0); color:var(--text);
  font-family:'Manrope',system-ui,sans-serif; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif; color:var(--white); line-height:1.04; letter-spacing:-.02em; font-weight:600}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw); margin-inline:auto;
  padding-inline:max(32px, env(safe-area-inset-left)) max(32px, env(safe-area-inset-right))}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-family:'Space Grotesk',sans-serif;
  font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan-soft)}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px 2px rgba(5,172,255,.8)}
.lead{color:var(--muted); font-size:18px; max-width:54ch}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:'Space Grotesk',sans-serif;
  font-weight:500; font-size:15px; padding:14px 22px; border-radius:999px; cursor:pointer;
  border:1px solid transparent; transition:transform .18s cubic-bezier(.3,1.4,.5,1), box-shadow .25s, background .25s, border-color .25s; white-space:nowrap}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--grad); color:#04122b; box-shadow:var(--glow-cyan); font-weight:600}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 0 0 1px rgba(5,172,255,.4),0 24px 60px -16px rgba(5,172,255,.6)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:rgba(255,255,255,.03); color:var(--white); border-color:var(--line-2)}
.btn-ghost:hover{background:rgba(255,255,255,.06); border-color:rgba(5,172,255,.45); transform:translateY(-2px)}
.btn-ghost:active{transform:translateY(0)}
.btn.is-soon{cursor:default}
.btn.is-soon:hover{transform:none; background:rgba(255,255,255,.03); border-color:var(--line-2)}
.btn:focus-visible{outline:2px solid var(--cyan-soft); outline-offset:3px}

/* a11y: skip link + visible focus */
.skip-link{position:fixed; inset-block-start:-120px; inset-inline-start:12px; z-index:200;
  background:var(--bg-2); color:var(--white); border:1px solid var(--line-2); border-radius:10px;
  padding:12px 18px; font-family:'Space Grotesk',sans-serif; font-size:15px; transition:inset-block-start .2s}
.skip-link:focus{inset-block-start:calc(env(safe-area-inset-top,0px) + 12px); outline:2px solid var(--cyan-soft); outline-offset:2px}
:where(a,button):focus-visible{outline:2px solid var(--cyan-soft); outline-offset:3px}
main:focus{outline:none}

/* nav */
header{position:fixed; top:0; left:0; right:0; z-index:50; padding-top:env(safe-area-inset-top,0px); transition:background .3s, border-color .3s, backdrop-filter .3s; border-bottom:1px solid transparent}
header.scrolled{background:rgba(8,10,28,.72); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); border-bottom-color:var(--line)}
.nav{display:flex; align-items:center; gap:34px; height:92px}
.brand{display:flex; align-items:center; gap:11px}
.brand img{height:50px; width:auto; display:block}
.nav-links{display:flex; align-items:center; gap:34px}
.nav-links a{font-size:15px; color:var(--text); font-weight:500; position:relative; transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--white)}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--grad); transition:width .25s}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
/* Desktop: CTA buttons on top, phone + email beneath them as small white
   icon+text links. On mobile this collapses to plain-white icon-only links. */
.nav-right{display:flex; align-items:center; gap:16px; margin-left:auto}   /* contact + CTA grouped on the right */
.nav-cta{display:flex; align-items:center}
.nav-cta-row{display:flex; align-items:center; gap:14px}
.nav-contact{display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; align-self:stretch}   /* mail over phone, top/bottom aligned to the CTA borders */
.nc-link{display:inline-flex; align-items:center; gap:6px; font-size:12px; line-height:1; color:var(--white); font-weight:500; white-space:nowrap; opacity:.9; transition:opacity .2s}
.nc-link:hover{opacity:1}
.nc-link svg{width:14px; height:14px; flex:0 0 auto}
.nav-toggle{display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line-2); border-radius:10px; padding:0; color:var(--white); cursor:pointer}
.nav-toggle:focus-visible{outline:2px solid var(--cyan-soft); outline-offset:2px}

/* mobile drawer (built by site.js) */
.mobile-nav{position:fixed; inset:0; z-index:60; visibility:hidden; pointer-events:none}
.mobile-nav .m-backdrop{position:absolute; inset:0; background:rgba(4,6,18,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .3s}
.mobile-nav .m-panel{position:absolute; inset-block:0; inset-inline-end:0; width:min(86vw,360px); height:100%;
  background:var(--bg-1); border-inline-start:1px solid var(--line); box-shadow:var(--shadow);
  padding:calc(env(safe-area-inset-top,0px) + 20px) max(24px,env(safe-area-inset-right))
          calc(env(safe-area-inset-bottom,0px) + 24px) 24px;
  display:flex; flex-direction:column; transform:translateX(100%);
  transition:transform .32s cubic-bezier(.2,.8,.3,1)}
.mobile-nav.open{visibility:visible; pointer-events:auto}
.mobile-nav.open .m-backdrop{opacity:1}
.mobile-nav.open .m-panel{transform:none}
.mobile-nav .m-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.mobile-nav .m-head img{height:40px; width:auto}
.mobile-nav .m-close{width:44px; height:44px; flex:0 0 auto; border:1px solid var(--line-2); border-radius:12px;
  background:none; color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer}
.mobile-nav .m-close:focus-visible{outline:2px solid var(--cyan-soft); outline-offset:2px}
.mobile-nav a.m-link{display:flex; align-items:center; min-height:52px;
  font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:500; color:var(--text);
  border-block-end:1px solid var(--line); transition:color .2s, padding-inline-start .2s}
.mobile-nav a.m-link:hover,.mobile-nav a.m-link.active{color:var(--white)}
.mobile-nav a.m-link.active{padding-inline-start:6px; border-inline-start:2px solid var(--cyan)}
.mobile-nav a.m-link:focus-visible{outline:2px solid var(--cyan-soft); outline-offset:-2px}
.mobile-nav .m-cta{margin-block-start:24px; display:flex; flex-direction:column; gap:12px}
.mobile-nav .m-cta .btn{width:100%; justify-content:center; min-height:48px}
.mobile-nav .m-contact{margin-block-start:22px; padding-block-start:18px; border-block-start:1px solid var(--line); display:flex; flex-direction:column; gap:14px}
.mobile-nav .m-contact a{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text); transition:color .2s}
.mobile-nav .m-contact a:hover{color:var(--white)}
.mobile-nav .m-contact svg{width:17px; height:17px; color:var(--cyan-soft); flex:0 0 auto}
body.nav-open{overflow:hidden}

/* hero */
.hero{position:relative; padding-top:calc(92px + env(safe-area-inset-top,0px)); min-height:100svh; display:flex; align-items:center; overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg::before{content:""; position:absolute; width:760px; height:760px; right:-120px; top:-160px;
  background:radial-gradient(circle, rgba(5,172,255,.20), transparent 62%); filter:blur(20px)}
.hero-bg::after{content:""; position:absolute; width:680px; height:680px; right:120px; bottom:-220px;
  background:radial-gradient(circle, rgba(129,96,230,.18), transparent 62%); filter:blur(20px)}
.grid-overlay{position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 70% 42%, black, transparent 72%);
  mask-image:radial-gradient(circle at 70% 42%, black, transparent 72%)}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; width:100%; padding-top:40px; padding-bottom:40px}
.hero-copy{max-width:600px}
.hero h1{font-size:clamp(44px,5.6vw,80px); font-weight:700; margin:22px 0 0}
.hero h1 .line2{display:block}
.hero .lead{margin:26px 0 36px; font-size:clamp(17px,1.5vw,20px)}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.hero-meta{display:flex; gap:30px; margin-top:46px; flex-wrap:wrap}
.hero-meta .m{display:flex; flex-direction:column; gap:3px}
.hero-meta .m b{font-family:'Space Grotesk',sans-serif; font-size:15px; color:var(--white); font-weight:600; letter-spacing:.01em}
.hero-meta .m span{font-size:14px; color:var(--muted)}
.hero-meta .div{width:1px; background:var(--line-2)}

.canvas-stage{position:relative; aspect-ratio:1/1.04; width:100%; max-width:560px; justify-self:center}
.canvas-stage canvas{position:absolute; inset:0; width:100%; height:100%}
.canvas-stage .ring{position:absolute; inset:8% 12%; border-radius:50%;
  background:radial-gradient(circle, rgba(5,172,255,.10), transparent 60%)}
.scroll-hint{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--dim); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-family:'Space Grotesk',sans-serif}
.scroll-hint .bar{width:1px;height:34px;background:linear-gradient(var(--cyan),transparent); animation:fall 2s ease-in-out infinite}
@keyframes fall{0%{transform:scaleY(.3);transform-origin:top;opacity:.3}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.3);transform-origin:bottom;opacity:.3}}

/* page hero (inner pages) */
.page-hero{position:relative; padding:calc(160px + env(safe-area-inset-top,0px)) 0 70px; overflow:hidden}
.page-hero .hero-bg{z-index:0}
.page-hero .wrap{position:relative; z-index:2}
.page-hero h1{font-size:clamp(40px,5vw,68px); font-weight:700; margin:20px 0 0}
.page-hero .lead{margin-top:22px}
.page-hero .grid-overlay{-webkit-mask-image:radial-gradient(circle at 60% 30%, black, transparent 75%); mask-image:radial-gradient(circle at 60% 30%, black, transparent 75%)}

/* marquee */
.strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.012); padding:26px 0; overflow:hidden}
.strip-inner{display:flex; align-items:center; gap:60px; white-space:nowrap; animation:scrollx 28s linear infinite; width:max-content}
.strip:hover .strip-inner{animation-play-state:paused}
.strip-inner span{font-family:'Space Grotesk',sans-serif; font-size:17px; color:var(--muted); display:flex; align-items:center; gap:18px; font-weight:500}
.strip-inner span::after{content:""; width:5px;height:5px;border-radius:50%;background:var(--cyan); opacity:.6}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* sections */
section.block{padding:118px 0; position:relative}
/* Desktop-only section rhythm: tighten the oversized 118px stacks to 64px (→128px
   between sections). Mobile/tablet (≤860px) keeps the existing spacing untouched. */
@media (min-width:861px){ section.block{padding:64px 0} }
.sec-head{max-width:720px; margin-bottom:64px}
.sec-head h2{font-size:clamp(32px,4vw,52px); margin:18px 0 0; font-weight:700}
.sec-head .lead{margin-top:20px}

/* services */
.svc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.svc{position:relative; padding:34px; border-radius:var(--r-lg); border:none;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  overflow:hidden; transition:transform .3s cubic-bezier(.2,.8,.3,1), border-color .3s, box-shadow .3s}
.svc::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; opacity:0;
  background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; transition:opacity .3s}
.svc::after{content:""; position:absolute; width:240px;height:240px; right:-80px; top:-80px;
  background:radial-gradient(circle,rgba(5,172,255,.18),transparent 65%); opacity:0; transition:opacity .35s}
.svc:hover{transform:translateY(-6px); border-color:transparent; box-shadow:var(--shadow)}
.svc:hover::before{opacity:1}
.svc:hover::after{opacity:1}
.svc .ico{width:54px;height:54px;border-radius:14px; display:flex;align-items:center;justify-content:center;
  background:var(--grad-soft); border:1px solid var(--line-2); margin-bottom:24px; color:var(--cyan-soft); position:relative; z-index:1}
.svc .ico svg{width:25px;height:25px}
/* Cutting-edge 3D icon treatment — borderless, melts into the background */
.svc .ico.ico3d{width:84px; height:84px; border:0; border-radius:0; background:none; box-shadow:none;
  overflow:visible; perspective:620px; margin-bottom:22px;
  transition:transform .45s cubic-bezier(.2,.7,.2,1)}
/* Soft, irregular halo built from offset radial gradients + blur so it has no edge */
.svc .ico.ico3d::before{content:""; position:absolute; inset:-30% -28%; z-index:0; pointer-events:none;
  background:
    radial-gradient(52% 46% at 42% 36%, rgba(5,172,255,.40), rgba(5,172,255,0) 68%),
    radial-gradient(46% 56% at 63% 60%, rgba(129,96,230,.30), rgba(129,96,230,0) 70%),
    radial-gradient(70% 44% at 35% 67%, rgba(26,61,240,.28), rgba(26,61,240,0) 74%);
  filter:blur(12px); opacity:.85;
  transition:opacity .45s, transform .45s cubic-bezier(.2,.7,.2,1)}
.svc .ico.ico3d svg{position:relative; z-index:1; width:54px; height:54px; transform-style:preserve-3d;
  filter:drop-shadow(0 10px 14px rgba(2,4,18,.55)); transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.svc:hover .ico.ico3d::before{opacity:1; transform:scale(1.12)}
.svc:hover .ico.ico3d svg{transform:translateY(-4px) rotateX(10deg) rotateZ(-3deg) scale(1.07)}
@media (prefers-reduced-motion:reduce){.svc:hover .ico.ico3d svg{transform:none}}
.svc h3{font-size:23px; margin-bottom:11px; position:relative; z-index:1; font-weight:600}
.svc p{font-size:15.5px; color:var(--muted); position:relative; z-index:1; margin-bottom:18px}
.svc .tags{display:flex; flex-wrap:wrap; gap:8px; position:relative; z-index:1}
.svc .tags i{font-style:normal; font-size:14px; color:var(--text); padding:5px 11px; border-radius:999px; white-space:nowrap;
  border:1px solid var(--line-2); background:rgba(255,255,255,.03)}

/* approach */
.approach{position:relative}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:step}
.step{position:relative; padding:36px 30px; border-radius:var(--r-lg); border:none;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.step .num{font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:600; letter-spacing:.1em;
  color:var(--cyan); display:flex; align-items:center; gap:10px; margin-bottom:22px}
.step .num::before{counter-increment:step; content:"0" counter(step); font-size:48px; line-height:1; color:transparent;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-stroke:1px rgba(5,172,255,.4); font-weight:700}
.step h3{font-size:22px; margin-bottom:12px}
.step p{font-size:15px; color:var(--muted)}
.step .conn{position:absolute; top:54px; right:-12px; color:var(--dim); width:24px;height:24px}
.steps .step:last-child .conn{display:none}

/* work */
.work-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.work{position:relative; border-radius:var(--r-lg); border:1px solid var(--line); overflow:hidden;
  background:var(--bg-1); min-height:340px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:34px; transition:transform .3s, border-color .3s}
.work:hover{transform:translateY(-6px); border-color:var(--line-2)}
.work .viz{position:absolute; inset:0; opacity:.9}
.work .viz::before{content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 78% 22%, rgba(5,172,255,.22), transparent 55%),
            radial-gradient(circle at 30% 18%, rgba(129,96,230,.18), transparent 55%)}
.work .viz::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 30%, var(--bg-1) 96%)}
.work .net{position:absolute; inset:0; background-image:
  radial-gradient(rgba(255,255,255,.18) 1.2px, transparent 1.4px); background-size:30px 30px; opacity:.25;
  -webkit-mask-image:radial-gradient(circle at 70% 26%, black, transparent 60%); mask-image:radial-gradient(circle at 70% 26%, black, transparent 60%)}
.work-tag{position:relative; z-index:2; display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-size:12.5px; font-family:'Space Grotesk',sans-serif; letter-spacing:.04em; color:var(--cyan-soft);
  border:1px solid var(--line-2); padding:6px 12px; border-radius:999px; background:rgba(8,10,28,.5); margin-bottom:auto}
.work h3{position:relative; z-index:2; font-size:25px; margin:0 0 10px; max-width:18ch}
.work p{position:relative; z-index:2; font-size:15px; color:var(--muted); max-width:42ch; margin-bottom:18px}
.work .chips{position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:8px}
.work .chips i{font-style:normal; font-size:14px; color:var(--text); padding:5px 10px; border-radius:7px; white-space:nowrap;
  border:1px solid var(--line-2); background:rgba(255,255,255,.04)}

/* capability band */
.cap{display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center;
  border:1px solid var(--line); border-radius:var(--r-lg); padding:54px; background:linear-gradient(120deg,rgba(5,172,255,.05),rgba(129,96,230,.05))}
.cap-list{display:flex; flex-direction:column; gap:18px}
.cap-list .row{display:flex; gap:16px; align-items:flex-start}
.cap-list .row .ck{flex:0 0 auto; width:30px;height:30px;border-radius:9px; display:flex;align-items:center;justify-content:center;
  background:var(--grad-soft); border:1px solid var(--line-2); color:var(--cyan-soft)}
.cap-list .row .ck svg{width:16px;height:16px}
.cap-list .row b{color:var(--white); font-weight:600; display:block; font-size:16px; margin-bottom:2px; font-family:'Space Grotesk',sans-serif}
.cap-list .row span{font-size:14.5px; color:var(--muted)}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
.contact-info{display:flex; flex-direction:column; gap:18px; margin-top:8px}
.contact-info .row{display:flex; gap:16px; align-items:flex-start}
.contact-info .row .ck{flex:0 0 auto; width:44px;height:44px;border-radius:12px; display:flex;align-items:center;justify-content:center;
  background:var(--grad-soft); border:1px solid var(--line-2); color:var(--cyan-soft)}
.contact-info .row .ck svg{width:19px;height:19px}
.contact-info .row b{color:var(--white); font-weight:600; display:block; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  font-family:'Space Grotesk',sans-serif; margin-bottom:3px; color:var(--dim)}
.contact-info .row a,.contact-info .row span{font-size:17px; color:var(--text); font-family:'Space Grotesk',sans-serif}
.contact-info .row a{display:inline-flex; align-items:center; min-height:44px}
.contact-info .row a:hover{color:var(--cyan-soft)}
.contact-info .row a:focus-visible{outline:2px solid var(--cyan-soft); outline-offset:3px; border-radius:4px}
.form-card{border:1px solid var(--line); border-radius:var(--r-lg); padding:40px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))}
.field{margin-bottom:20px}
.field label{display:block; font-family:'Space Grotesk',sans-serif; font-size:13px; letter-spacing:.04em;
  color:var(--text); margin-bottom:9px; font-weight:500}
.field input,.field textarea{width:100%; background:rgba(255,255,255,.03); border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:13px 15px; color:var(--white); font-family:'Manrope',sans-serif; font-size:16px;
  transition:border-color .2s, box-shadow .2s}
.field input::placeholder,.field textarea::placeholder{color:var(--dim)}
.field input:focus,.field textarea:focus{outline:none; border-color:rgba(5,172,255,.5); box-shadow:0 0 0 3px rgba(5,172,255,.12)}
.field textarea{resize:vertical; min-height:130px}
.form-card .btn-primary{width:100%; justify-content:center; margin-top:6px}
.form-card .btn-primary[disabled]{opacity:.7; cursor:progress}
.hp{position:absolute!important; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.form-note{font-size:14px; color:var(--dim); margin-top:14px; text-align:center}

/* CTA */
.cta{position:relative; border-radius:28px; overflow:hidden; padding:78px 56px; text-align:center;
  border:1px solid var(--line-2); background:linear-gradient(120deg,rgba(5,172,255,.10),rgba(129,96,230,.10))}
.cta::before{content:""; position:absolute; inset:0; opacity:.4; background-image:
  linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%, black, transparent 70%); mask-image:radial-gradient(circle at 50% 40%, black, transparent 70%)}
.cta h2{position:relative; font-size:clamp(32px,4.5vw,54px); font-weight:700; margin-bottom:18px}
.cta p{position:relative; color:var(--muted); font-size:18px; max-width:46ch; margin:0 auto 34px}
.cta .hero-cta{position:relative; justify-content:center}

/* footer */
footer{border-top:1px solid var(--line); padding:64px 0 40px; margin-top:30px}
.foot{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.35fr; gap:40px 36px}
.foot .brand img{height:44px}
.foot p{font-size:14.5px; color:var(--muted); max-width:34ch; margin-top:18px}
.foot .foot-h{font-family:'Space Grotesk',sans-serif; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:10px; font-weight:600}
.foot ul{list-style:none; display:flex; flex-direction:column}
.foot ul a{display:inline-flex; align-items:center; min-height:44px; min-width:44px; width:fit-content; max-width:100%; font-size:14.5px; color:var(--text); overflow-wrap:anywhere; transition:color .2s}
.foot ul a:hover{color:var(--cyan-soft)}
.foot ul a:focus-visible{outline:2px solid var(--cyan-soft); outline-offset:2px; border-radius:4px}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; margin-top:40px; padding-top:26px; border-top:1px solid var(--line); flex-wrap:wrap; gap:16px}
.foot-bottom span{font-size:14px; color:var(--dim)}
.socials{display:flex; gap:10px}
.socials a{width:44px;height:44px;border-radius:11px; display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2); color:var(--muted); transition:color .2s, border-color .2s, transform .2s}
.socials a:hover{color:var(--cyan-soft); border-color:rgba(5,172,255,.4); transform:translateY(-2px)}
.socials a:focus-visible{outline:2px solid var(--cyan-soft); outline-offset:2px}
.socials a svg{width:18px;height:18px}

.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1; transform:none}

/* container queries — card grids adapt to their own width, not just the viewport */
.cq-grid{container-type:inline-size; container-name:cards}
@container cards (max-width:720px){
  .svc-grid,.work-grid{grid-template-columns:1fr}
}

@media (max-width:1080px){
  /* footer: brand spans full width, the 4 link columns share the row below */
  .foot{grid-template-columns:repeat(4,minmax(0,1fr))}
  .foot > div:first-child{grid-column:1 / -1}
  /* header: show contact as icons (text only on full desktop) so the long
     email never crowds the nav on smaller laptops/tablets */
  .nc-text{display:none}
}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr; gap:10px; padding-top:90px}
  .canvas-stage{grid-row:1; max-width:340px; margin-bottom:6px}
  .hero-copy{max-width:none}
  .nav{height:84px; gap:0}
  .hero{padding-top:calc(84px + env(safe-area-inset-top,0px))}
  .nav-links{display:none}
  .nav-cta{display:none}              /* the CTA lives in the hamburger drawer on mobile */
  /* phone + email stay visible as plain-white icon-only links (side by side on mobile) */
  .nav-contact{flex-direction:row; align-self:center; justify-content:flex-start; gap:2px}
  .nc-text{display:none}
  .nc-link{color:var(--white); opacity:1; padding:9px}
  .nc-link svg{width:20px; height:20px}
  .nav-toggle{display:flex; margin-left:4px}
  .steps,.cap,.contact-grid{grid-template-columns:1fr}
  .cap{padding:36px}
  /* footer: brand spans the full top row, link columns sit 2-up below */
  .foot{grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 28px}
  .scroll-hint{display:none}
  .page-hero{padding:calc(130px + env(safe-area-inset-top,0px)) 0 50px}
}
@media (max-width:560px){
  .wrap{padding-inline:max(20px,env(safe-area-inset-left)) max(20px,env(safe-area-inset-right))}
  section.block{padding:80px 0}
  .hero-meta{gap:18px}
}

/* smooth same-document & cross-document navigation where supported */
@view-transition{navigation:auto}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .strip-inner,.bar,.dot,.scroll-hint .bar{animation:none}
  .reveal{opacity:1!important; transform:none!important; transition:none!important}
  .mobile-nav .m-panel,.mobile-nav .m-backdrop{transition:none}
  *,*::before,*::after{scroll-behavior:auto}
}

/* ============================================================
   INSIGHTS — listing grid, preview cards, homepage teaser
   ============================================================ */
/* Borderless, open list — each preview is a row with a large index number,
   a slight gradient wash underneath, and a fading gradient rule between items. */
.insight-grid{display:flex; flex-direction:column}
.insight-card{position:relative; display:flex; align-items:center; gap:30px; min-width:0;
  padding:34px 14px; border:0; border-radius:var(--r-lg); background:none;
  transition:transform .35s cubic-bezier(.2,.8,.3,1)}
/* slight gradient wash sitting under each preview (fades in on hover) */
.insight-card::before{content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; opacity:0;
  background:linear-gradient(100deg, rgba(5,172,255,.07), rgba(129,96,230,.06) 70%, transparent);
  transition:opacity .35s}
/* fading gradient rule under each article */
.insight-card::after{content:""; position:absolute; left:8px; right:8px; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line-2) 14%, rgba(5,172,255,.32) 50%, var(--line-2) 86%, transparent);
  opacity:.7}
.insight-card:hover{transform:translateX(6px)}
.insight-card:hover::before{opacity:1}

/* large wireframe/outline index number, arranged beside each article */
.ic-num{flex:0 0 auto; position:relative; z-index:1; align-self:flex-start;
  font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.04em;
  font-size:clamp(48px,5.2vw,78px); line-height:.86; min-width:1.7em;
  color:transparent; -webkit-text-stroke:1.4px rgba(84,199,255,.5); text-stroke:1.4px rgba(84,199,255,.5);
  transition:-webkit-text-stroke-color .3s; user-select:none}
.insight-card:hover .ic-num{-webkit-text-stroke-color:rgba(84,199,255,.85)}
.insight-grid .insight-card.is-pillar .ic-num{font-size:clamp(58px,6.4vw,96px)}

.ic-body{display:flex; flex-direction:column; flex:1; min-width:0; padding:0; gap:11px; position:relative; z-index:1}
.ic-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-family:'Space Grotesk',sans-serif;
  font-size:12px; letter-spacing:.04em; color:var(--dim)}
.ic-cat{display:inline-flex; align-items:center; gap:7px; text-transform:uppercase; letter-spacing:.14em;
  font-size:11.5px; font-weight:600; color:var(--cyan-soft)}
.ic-cat::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px 1px rgba(5,172,255,.8)}
.ic-dot{width:3px; height:3px; border-radius:50%; background:var(--dim)}
.insight-card h2,.insight-card h3{font-size:23px; line-height:1.16; font-weight:600; margin:0; color:var(--white)}
.insight-grid .insight-card.is-pillar h2{font-size:clamp(25px,2.8vw,34px)}
.insight-card .ic-excerpt{font-size:15px; color:var(--muted); margin:0; line-height:1.6; max-width:62ch}
.ic-more{display:inline-flex; align-items:center; gap:8px; padding-top:4px;
  font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:600; color:var(--cyan-soft)}
.ic-more svg{width:16px; height:16px; transition:transform .25s}
.insight-card:hover .ic-more svg{transform:translateX(4px)}
.insight-card h2 a,.insight-card h3 a{color:inherit}

/* ============================================================
   ARTICLE — reading layout for individual insight pages
   ============================================================ */
.article-hero{position:relative; padding:calc(150px + env(safe-area-inset-top,0px)) 0 36px; overflow:hidden}
.article-hero .hero-bg{z-index:0}
.article-hero .grid-overlay{-webkit-mask-image:radial-gradient(circle at 60% 20%, black, transparent 78%); mask-image:radial-gradient(circle at 60% 20%, black, transparent 78%)}
.article-hero .wrap{position:relative; z-index:2}
.article-col{max-width:760px; margin-inline:auto}

.breadcrumb{font-family:'Space Grotesk',sans-serif; font-size:13px; color:var(--dim); margin-bottom:22px;
  display:flex; flex-wrap:wrap; align-items:center; gap:7px}
.breadcrumb a{color:var(--muted); transition:color .2s}
.breadcrumb a:hover{color:var(--cyan-soft)}
.breadcrumb a:focus-visible{outline:2px solid var(--cyan-soft); outline-offset:3px; border-radius:4px}
.breadcrumb span[aria-current]{color:var(--text)}

.article-hero h1{font-size:clamp(30px,4.4vw,48px); font-weight:700; margin:14px 0 0; line-height:1.06}
.article-meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:20px;
  font-family:'Space Grotesk',sans-serif; font-size:13.5px; color:var(--dim)}
.article-meta .ic-cat{font-size:11.5px}
.article-meta time{color:var(--muted)}

.article-body{padding:8px 0 0}
.article-body .article-col{font-size:17px}
.article-body p{color:var(--text); line-height:1.75; margin:0 0 20px}
.article-body h2{font-size:clamp(23px,2.8vw,30px); font-weight:600; margin:44px 0 14px; line-height:1.12}
.article-body h3{font-size:20px; font-weight:600; margin:30px 0 10px; color:var(--white)}
.article-body a:not(.btn){color:var(--cyan-soft); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(5,172,255,.4); transition:text-decoration-color .2s}
.article-body a:not(.btn):hover{text-decoration-color:var(--cyan-soft)}

.key-takeaway{position:relative; margin:6px 0 30px; padding:22px 26px; border-radius:var(--r);
  background:var(--grad-soft); border:1px solid var(--line-2); border-left:3px solid var(--cyan);
  font-size:16.5px; line-height:1.65; color:var(--text)}
.key-takeaway strong{color:var(--white); font-family:'Space Grotesk',sans-serif}

/* related cluster + sources inside an article */
.article-body .related{margin:48px 0 0; padding:30px 30px 34px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.article-body .related h2{font-size:21px; margin:0 0 16px}
.article-body .related ul{list-style:none; display:flex; flex-direction:column; gap:2px}
.article-body .related li{margin:0}
.article-body .related a{display:inline-flex; align-items:center; gap:10px; min-height:44px;
  font-family:'Space Grotesk',sans-serif; font-size:15.5px; color:var(--text); text-decoration:none}
.article-body .related a::before{content:"›"; color:var(--cyan-soft); font-size:18px}
.article-body .related a:hover{color:var(--cyan-soft)}
.article-body .related .tag-pillar{font-size:12px; color:var(--dim); font-family:'Manrope',sans-serif}

.article-body .sources{margin:40px 0 0; padding-top:24px; border-top:1px solid var(--line)}
.article-body .sources h2{font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin:0 0 8px}
.article-body .sources p{font-size:13.5px; color:var(--dim); line-height:1.6; margin:0}

/* in-article CTA reuses .cta; constrain + space it */
.article-cta{margin:52px 0 0}
.article-cta .cta{padding:54px 44px}
.article-cta .cta h2{font-size:clamp(26px,3.4vw,38px)}
.article-cta .cta p{font-size:17px}

footer.article-foot{margin-top:80px}

@media (max-width:860px){
  .insight-card{gap:22px; padding:28px 6px}
  .article-hero{padding-top:calc(120px + env(safe-area-inset-top,0px))}
  .article-cta .cta{padding:40px 26px}
}
@media (max-width:560px){
  /* stack the big number above the article on the narrowest screens */
  .insight-card{flex-direction:column; align-items:flex-start; gap:6px; padding:26px 4px}
  .ic-num,.insight-grid .insight-card.is-pillar .ic-num{font-size:46px; min-width:0}
  .insight-card:hover{transform:none}
}