:root{
    --cycle:#6b4be8; --cycle-rgb:107,75,232; --cyc-op:0;
    --bg:#efe7fc; --ink:#1a1430; --soft:#6f6690; --accent:#6b4be8;
    --ink-rgb:26,20,48; --accent-rgb:107,75,232; --mol-rgb:107,75,232;
    --line:rgba(26,20,48,.13);
    --gutter:clamp(20px,5vw,76px);
    --display:'Space Grotesk',sans-serif;
    --body:'Inter',sans-serif;
    --mono:'IBM Plex Mono',monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{overflow-x:hidden}

  body{background:var(--bg);color:var(--ink);font-family:var(--body);
       font-size:clamp(15px,1.03vw,16px);line-height:1.55;
       -webkit-font-smoothing:antialiased;overflow-x:hidden}

  .wash{position:fixed;inset:0;z-index:0;pointer-events:none;
        background:
          radial-gradient(82% 60% at 50% -8%, rgba(var(--accent-rgb),.46), transparent 62%),
          radial-gradient(66% 54% at 104% 104%, rgba(var(--mol-rgb),.40), transparent 66%),
          radial-gradient(56% 46% at -6% 62%, rgba(var(--accent-rgb),.30), transparent 68%)}
  .cyclewash{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--cyc-op,0);
        background:
          radial-gradient(92% 68% at 50% 14%, rgba(var(--cycle-rgb),.52), transparent 68%),
          linear-gradient(180deg, rgba(var(--cycle-rgb),.26), transparent 62%)}
  #field{position:fixed;inset:0;z-index:1;pointer-events:none;width:100%;height:100%}
  .veil{position:fixed;inset:0;z-index:2;pointer-events:none;
        background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 18%,transparent 82%,rgba(255,255,255,.18))}
  .page{position:relative;z-index:3}

  /* ---------- nav ---------- */
  nav{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;
      justify-content:space-between;padding:14px var(--gutter);
      background:rgba(255,255,255,.32);backdrop-filter:saturate(170%) blur(16px);
      -webkit-backdrop-filter:saturate(170%) blur(16px);
      border-bottom:1px solid transparent;transition:border-color .4s ease}
  nav.stuck{border-bottom-color:var(--line)}
  .mark{display:block;color:var(--ink);text-decoration:none;line-height:0}
  .mark svg{width:clamp(58px,6vw,80px);height:auto;display:block;
           color:var(--brand,var(--ink));transition:color .4s ease}
  .nav-right{display:flex;gap:2px;align-items:center}
  .nav-right a{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
               color:var(--soft);text-decoration:none;padding:7px 10px;border-radius:100px;
               transition:color .3s ease,background .3s ease}
  .nav-right a:hover{color:var(--ink);background:rgba(var(--ink-rgb),.07)}
  .nav-right a.here{color:#fff;background:var(--accent)}

  .readout{position:fixed;left:var(--gutter);bottom:20px;z-index:30;
           font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
           color:var(--soft);display:flex;align-items:center;gap:9px;mix-blend-mode:multiply}
  .readout .bar{width:60px;height:2px;background:rgba(var(--ink-rgb),.16);position:relative;overflow:hidden}
  .readout .bar i{position:absolute;inset:0 auto 0 0;width:0%;background:var(--accent)}

  /* ---------- rhythm ---------- */
  .sect{position:relative;padding:0 var(--gutter) clamp(120px,17vh,210px);scroll-margin-top:70px}
  .title-space{height:clamp(150px,30vh,300px);margin-top:clamp(120px,20vh,240px)}
  .meta{display:flex;gap:14px;align-items:baseline;font-family:var(--mono);font-size:11px;
        letter-spacing:.12em;text-transform:uppercase;color:var(--soft);
        padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:40px}
  .meta b{color:var(--accent);font-weight:500}
  .lede{font-family:var(--display);font-weight:500;font-size:clamp(21px,2.8vw,38px);
        line-height:1.2;letter-spacing:-.038em;max-width:22ch;margin-bottom:60px}
  .lede u{text-decoration:none;color:var(--accent)}
  .contact .lede u{color:var(--cycle)}

  /* ---------- hero ---------- */
  .hero{min-height:100svh;display:flex;flex-direction:column;padding:0 var(--gutter) clamp(44px,7vh,80px)}
  .hero-stage{flex:1;min-height:40vh;margin-top:clamp(84px,13vh,140px)}
  .hero h1{font-family:var(--display);font-weight:700;font-size:clamp(31px,5vw,70px);
           line-height:1;letter-spacing:-.05em;max-width:17ch}
  .hero h1 em{font-style:normal;color:var(--cycle)}
  .hero .sub{margin-top:20px;max-width:40ch;color:var(--soft);font-size:clamp(15px,1.35vw,17px)}
  .hero .strip{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);
               display:flex;flex-wrap:wrap;gap:24px;font-family:var(--mono);font-size:11px;
               letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}

  /* ---------- shared bento ---------- */
  .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;grid-auto-flow:dense}
  .cell{position:relative;overflow:hidden;border-radius:20px;
        background:rgba(255,255,255,.34);border:1px solid rgba(var(--ink-rgb),.10);
        transition:background .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
  .cell:hover{background:rgba(255,255,255,.70);transform:translateY(-4px)}
  .s2{grid-column:span 2} .s3{grid-column:span 3} .s4{grid-column:span 4}

  .svc{padding:clamp(24px,2.6vw,36px);min-height:230px;display:flex;flex-direction:column}
  .svc .n{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--accent);margin-bottom:auto}
  .svc h3{font-family:var(--display);font-weight:500;font-size:clamp(21px,2.4vw,33px);
          letter-spacing:-.035em;margin-top:26px}
  .svc p{color:var(--soft);font-size:14.5px;margin-top:9px;max-width:36ch}
  .svc .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
  .svc .tags span{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
                  color:var(--soft);border:1px solid var(--line);padding:4px 8px;border-radius:100px}
  .ghost{position:absolute;right:-4px;bottom:-28px;font-family:var(--display);font-weight:700;
         font-size:112px;line-height:1;letter-spacing:-.06em;color:rgba(var(--accent-rgb),.11);
         pointer-events:none}

  /* ---------- method ---------- */
  .track{position:relative;padding-top:34px}
  .track::before{content:'';position:absolute;top:4px;left:0;right:0;height:1px;
                 background:linear-gradient(90deg,var(--accent),rgba(var(--accent-rgb),.15))}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,34px)}
  .step{position:relative}
  .step::before{content:'';position:absolute;top:-34px;left:0;width:9px;height:9px;border-radius:50%;
                background:var(--accent);transform:translateY(-4px)}
  .step .n{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
           color:var(--accent);margin-bottom:14px}
  .step h4{font-family:var(--display);font-weight:500;font-size:clamp(18px,2vw,26px);
           letter-spacing:-.032em;margin-bottom:9px}
  .step p{color:var(--soft);font-size:14px}
  .statement-line{margin-top:80px;font-family:var(--display);font-weight:500;
                  font-size:clamp(23px,3.8vw,50px);line-height:1.16;letter-spacing:-.04em;max-width:19ch}
  .statement-line .w{opacity:.15;transition:opacity .3s ease}
  .statement-line .w.lit{opacity:1}
  .statement-line .w.key{color:var(--accent)}

  /* ---------- industries ---------- */
  .ind{padding:clamp(20px,2.2vw,30px);min-height:158px;display:flex;flex-direction:column;justify-content:flex-end}
  .ind .n{position:absolute;top:16px;left:clamp(20px,2.2vw,30px);font-family:var(--mono);
          font-size:10px;letter-spacing:.1em;color:var(--accent)}
  .ind h4{font-family:var(--display);font-weight:500;font-size:clamp(17px,1.9vw,24px);
          letter-spacing:-.03em;margin-bottom:6px}
  .ind p{color:var(--soft);font-size:13.5px;max-width:30ch}

  /* ---------- clients ---------- */
  .wall{display:flex;flex-wrap:wrap;align-items:center;
        gap:clamp(24px,3.2vw,52px) clamp(28px,3.8vw,64px)}
  .lg{display:block;height:var(--h);width:var(--w);background-color:var(--accent);
      -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
      -webkit-mask-position:center;mask-position:center;
      -webkit-mask-size:contain;mask-size:contain;
      opacity:.68;transition:opacity .35s ease,background-color .4s ease,transform .35s ease}
  .lg:hover{opacity:1;background-color:var(--ink);transform:translateY(-4px)}

  /* ---------- numbers ---------- */
  .num{padding:clamp(24px,2.8vw,40px);min-height:170px;display:flex;flex-direction:column;justify-content:flex-end}
  .num .k{font-family:var(--display);font-weight:700;font-size:clamp(32px,4.6vw,64px);
          letter-spacing:-.055em;color:var(--accent);line-height:.95;display:flex;align-items:baseline}
  .num .v{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
          color:var(--soft);margin-top:14px}

  /* ---------- about ---------- */
  .about{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,80px);align-items:center}
  .about p{color:var(--soft);font-size:clamp(15px,1.3vw,17px);margin-bottom:18px;max-width:52ch}
  .about p strong{color:var(--ink);font-weight:500}
  .venn{position:relative;width:100%;max-width:460px;aspect-ratio:1/.95;margin-inline:auto}
  .circ{position:absolute;width:62%;aspect-ratio:1;border-radius:50%;
        border:1px solid rgba(var(--accent-rgb),.55);
        background:rgba(var(--accent-rgb),.13);mix-blend-mode:multiply}
  .c1{top:0;left:19%} .c2{bottom:0;left:0} .c3{bottom:0;right:0}
  .vlabel{position:absolute;font-family:var(--display);font-weight:500;
          font-size:clamp(13px,1.35vw,17px);letter-spacing:-.02em;color:var(--ink);text-align:center;width:44%}
  .l1{top:7%;left:28%} .l2{bottom:9%;left:1%} .l3{bottom:9%;right:1%}
  .vcore{position:absolute;top:47%;left:50%;transform:translate(-50%,-50%);
         font-family:var(--display);font-weight:700;font-size:clamp(17px,2vw,26px);
         letter-spacing:-.05em;color:var(--accent)}
  .creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
  .creds span{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
              color:var(--soft);border:1px solid var(--line);padding:6px 11px;border-radius:100px}

  /* ---------- contact ---------- */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
  #globe{width:100%;max-width:560px;aspect-ratio:1;display:block;margin-inline:auto}
  .contact a.big{font-family:var(--display);font-weight:700;font-size:clamp(24px,4.4vw,58px);
                 letter-spacing:-.05em;color:var(--cycle);text-decoration:none;word-break:break-word;
                 transition:color .35s ease;display:inline-block}
  .contact a.big:hover{color:var(--ink)}
  .contact .lines{margin-top:34px;display:flex;flex-wrap:wrap;gap:26px;font-family:var(--mono);
                  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
  .endmark{height:clamp(120px,22vh,230px);margin-top:clamp(50px,8vh,110px)}

  footer{padding:22px var(--gutter);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;
         justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
         text-transform:uppercase;color:var(--soft)}

  .rise{opacity:0;transform:translateY(24px);filter:blur(7px);
        transition:opacity .95s cubic-bezier(.2,.8,.2,1),transform .95s cubic-bezier(.2,.8,.2,1),filter .95s ease}
  .rise.in{opacity:1;transform:none;filter:none}

  a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

  @media (max-width:1000px){
    .bento{grid-template-columns:repeat(4,1fr)}
    .s3,.s4{grid-column:span 2}
    .steps{grid-template-columns:repeat(2,1fr);row-gap:40px}
    .about,.contact-grid{grid-template-columns:1fr}
  }
  @media (max-width:900px){
    .lg{height:calc(var(--h)*.78);width:calc(var(--w)*.78)}
  }
  @media (max-width:760px){
    .lg{height:calc(var(--h)*.6);width:calc(var(--w)*.6)}
    .bento{grid-template-columns:repeat(2,1fr);gap:10px}
    .s2,.s3,.s4{grid-column:span 1}
    .steps{grid-template-columns:1fr}
    .track::before,.step::before{display:none}
    .step{padding-left:16px;border-left:2px solid var(--accent)}
    .readout{display:none}
    .nav-right a:not(.keep){display:none}
    .title-space{height:clamp(120px,22vh,200px)}
    .svc{min-height:auto}
  }
  @media (prefers-reduced-motion:reduce){
    .rise{opacity:1;transform:none;filter:none;transition:none}
    *{transition-duration:.01ms !important}
  }


/* ---------- boot sequence ---------- */
.page{opacity:1;transition:opacity 1.15s cubic-bezier(.2,.8,.2,1)}
body.booting .page{opacity:0}
.hero h1{transition:opacity 1.1s cubic-bezier(.2,.8,.2,1) .18s,transform 1.1s cubic-bezier(.2,.8,.2,1) .18s}
.hero .sub{transition:opacity 1.1s cubic-bezier(.2,.8,.2,1) .36s,transform 1.1s cubic-bezier(.2,.8,.2,1) .36s}
.hero .strip{transition:opacity 1.1s cubic-bezier(.2,.8,.2,1) .54s,transform 1.1s cubic-bezier(.2,.8,.2,1) .54s}
nav,.readout{transition:opacity 1s ease .30s}
body.booting .hero h1,body.booting .hero .sub,body.booting .hero .strip{opacity:0;transform:translateY(20px)}
body.booting nav,body.booting .readout{opacity:0}
body.booting .cyclewash{opacity:0}

@media (prefers-reduced-motion:reduce){
  .page,.hero h1,.hero .sub,.hero .strip,nav,.readout{transition:none}
  body.booting .page,body.booting .hero h1,body.booting .hero .sub,
  body.booting .hero .strip,body.booting nav,body.booting .readout{opacity:1;transform:none}
}