/* Layout: full-bleed neural canvas behind a single left-weighted column; content sections stack on a 12-col grid. */
  :root{
    --bg:#05060a; --panel:rgba(255,255,255,.03); --ink:#eef2ff; --dim:#8f95ad; --line:rgba(238,242,255,.12);
    --ice:#9fe8ff; --hot:#ff4fd8; --volt:#c6ff3d;
    --display:"Space Grotesk",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
    color-scheme:dark;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:var(--bg);color:var(--ink);font-family:var(--display);overflow-x:hidden;line-height:1.5}
  a{color:inherit}
  :focus-visible{outline:2px solid var(--ice);outline-offset:3px}
  canvas#net{position:fixed;inset:0;width:100%;height:100%;z-index:0}
  .wrap{position:relative;z-index:1;padding-inline:max(16px,5vw)}
  .mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
  .grad{background:linear-gradient(90deg,#ffffff,var(--hot) 55%,var(--volt));-webkit-background-clip:text;background-clip:text;color:transparent}
  .spark{display:inline-block;color:var(--hot);animation:tw 2.4s ease-in-out infinite}
  @keyframes tw{50%{transform:scale(1.3) rotate(45deg);filter:drop-shadow(0 0 10px var(--hot))}}

  header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;justify-content:space-between;align-items:center;padding-block:20px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .logo{font-weight:700;letter-spacing:-.03em;font-size:18px;text-decoration:none;display:flex;align-items:center}
  .logo i{display:inline-block;width:.18em;height:1.1em;margin:0 .1em;background:linear-gradient(var(--ice),var(--hot),var(--volt));transform:skewX(-22deg)}
  .logo span{font-weight:300}
  header nav{display:flex;gap:24px;font-size:13px}
  header nav a{text-decoration:none;color:var(--dim);transition:color .3s}
  header nav a:hover,header nav a[aria-current]{color:var(--ink)}
  @media (max-width:640px){header nav a:not(.keep){display:none}}

  section{padding-block:12vh}
  h1,.big{font-size:clamp(48px,9.5vw,150px);font-weight:500;letter-spacing:-.055em;line-height:.9;text-wrap:balance;margin:18px 0 28px}
  h2{font-size:clamp(34px,5.5vw,80px);font-weight:400;letter-spacing:-.045em;line-height:.95;text-wrap:balance;margin:14px 0 5vh}
  .lede{font-size:clamp(17px,1.6vw,21px);color:var(--dim);max-width:52ch}
  .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
  .btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:99px;border:1px solid var(--line);text-decoration:none;font-size:15px;background:transparent;color:var(--ink);font-family:inherit;cursor:pointer;transition:background .4s,border-color .4s,color .4s}
  .btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .btn:hover{border-color:var(--ice)}
  .btn.primary:hover{background:var(--ice);border-color:var(--ice)}

  /* ticker */
  .ticker{border-block:1px solid var(--line);overflow:hidden;white-space:nowrap;padding-block:16px;margin-inline:min(-16px,-5vw)}
  .ticker div{display:inline-block;animation:mq 40s linear infinite;font-family:var(--mono);font-size:13px;color:var(--dim)}
  .ticker b{color:var(--ink);font-weight:400}
  @keyframes mq{to{transform:translateX(-50%)}}

  /* offerings */
  .offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .offer{background:var(--bg);padding:32px 28px;display:flex;flex-direction:column;gap:14px;position:relative;min-width:0;transition:background .5s}
  .offer:hover{background:#0b0d16}
  .offer svg{width:44px;height:44px}
  .offer h3{font-size:26px;font-weight:500;letter-spacing:-.03em}
  .offer p{color:var(--dim);font-size:15px}
  .offer ul{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
  .offer li::before{content:"✦ ";color:var(--hot)}

  /* process */
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:28px;counter-reset:s}
  .step{border-top:1px solid var(--ink);padding-top:18px;min-width:0}
  .step .mono{color:var(--ice)}
  .step h3{font-size:24px;font-weight:500;letter-spacing:-.02em;margin:8px 0}
  .step p{color:var(--dim);font-size:15px}

  /* calculator */
  .calc{display:grid;grid-template-columns:1.1fr 1fr;gap:4vw;align-items:center;border:1px solid var(--line);border-radius:20px;padding:clamp(24px,4vw,56px);background:var(--panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  @media (max-width:820px){.calc{grid-template-columns:1fr}}
  .field{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
  .field label{display:flex;justify-content:space-between;font-size:15px}
  .field output{font-family:var(--mono);color:var(--ice);font-variant-numeric:tabular-nums}
  input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--line);outline-offset:6px}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--ink);border:4px solid var(--bg);box-shadow:0 0 0 1px var(--ice),0 0 18px var(--hot);cursor:pointer}
  input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--ink);border:4px solid var(--bg);box-shadow:0 0 0 1px var(--ice);cursor:pointer}
  .result{text-align:left}
  .result .big{font-size:clamp(64px,9vw,128px);font-weight:300;letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums}
  .result .sub{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
  .result .sub b{display:block;font-size:28px;font-weight:400;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .note{font-size:12px;color:var(--dim);margin-top:18px}

  /* packages */
  .pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px}
  .pkg{border:1px solid var(--line);border-radius:18px;padding:30px 28px;display:flex;flex-direction:column;gap:12px;min-width:0}
  .pkg.feat{border-color:transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(140deg,var(--ice),var(--hot),var(--volt)) border-box;border:1px solid transparent}
  .pkg h3{font-size:30px;font-weight:500;letter-spacing:-.03em}
  .pkg p{color:var(--dim);font-size:15px}
  .pkg ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px;padding-block:14px;border-block:1px solid var(--line);margin-block:6px}
  .pkg li::before{content:"→ ";color:var(--ice)}
  .pkg .mono{margin-top:auto}

  /* faq */
  .faq{max-width:860px;border-top:1px solid var(--line)}
  details{border-bottom:1px solid var(--line)}
  summary{list-style:none;cursor:pointer;padding:22px 0;font-size:clamp(18px,2vw,24px);letter-spacing:-.02em;display:flex;justify-content:space-between;gap:20px}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";color:var(--ice);transition:transform .4s}
  details[open] summary::after{transform:rotate(45deg)}
  details p{color:var(--dim);padding-bottom:22px;max-width:65ch}

  .cta{text-align:center;display:flex;flex-direction:column;align-items:center}
  .cta h2{margin-bottom:24px}
  .contact{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
  .chip{font-family:var(--mono);font-size:14px;border:1px solid var(--line);border-radius:99px;padding:12px 18px;display:flex;gap:12px;align-items:center;user-select:all}
  .chip button{font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:none;border:0;color:var(--ice);cursor:pointer;user-select:none}
  footer{position:relative;z-index:1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-block:24px;border-top:1px solid var(--line)}
  .rise{animation:rise 1.2s cubic-bezier(.16,1,.3,1) both}
  .rise.d1{animation-delay:.1s}.rise.d2{animation-delay:.2s}
  @keyframes rise{from{transform:translateY(30px);opacity:.001}}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

  /* shared extras for service pages */
  .svcnav{display:flex;gap:8px;flex-wrap:wrap;padding-block:6px 0}
  .svcnav a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--dim);border:1px solid var(--line);border-radius:99px;padding:7px 12px;transition:color .3s,border-color .3s}
  .svcnav a:hover,.svcnav a[aria-current]{color:var(--ink);border-color:var(--ice)}
  .lab{border:1px solid var(--line);border-radius:20px;padding:clamp(22px,4vw,52px);background:var(--panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:grid;grid-template-columns:1fr 1.2fr;gap:4vw;align-items:start}
  @media (max-width:860px){.lab{grid-template-columns:1fr}}
  .lab > *{min-width:0}
  .lab h3{font-size:28px;font-weight:500;letter-spacing:-.03em;margin:10px 0}
  .lab p{color:var(--dim)}
  .opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
  .opt{font:inherit;font-size:14px;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:99px;padding:9px 15px;cursor:pointer;transition:background .3s,border-color .3s,color .3s}
  .opt:hover{border-color:var(--ice)}
  .opt[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .tin{width:100%;font:inherit;font-size:16px;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-top:16px}
  .think{font-family:var(--mono);font-size:12px;color:var(--ice);min-height:1.5em;margin-top:16px}
  .think::before{content:"✦ ";color:var(--hot)}
  .out{border:1px solid var(--line);border-radius:16px;min-height:320px;overflow:hidden;position:relative;background:rgba(5,6,10,.6)}
  .ai-badge{display:inline-flex;gap:8px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border:1px solid var(--hot);border-radius:99px;padding:6px 12px;margin-top:10px}

  /* brand marks */
  .logo i{animation:slashpulse 3s ease-in-out infinite;transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .logo:hover i{transform:skewX(-34deg) scaleY(1.25);filter:drop-shadow(0 0 10px #ff4fd8)}
  @keyframes slashpulse{50%{filter:brightness(1.5) drop-shadow(0 0 8px #ff4fd8)}}
  .hring{transform-origin:100px 100px;animation:hspin 18s linear infinite}
  @keyframes hspin{to{transform:rotate(1turn)}}
  .fbadge{vertical-align:middle;margin-right:10px}

  /* seo + info pages */
  h1.mono{font-size:11px;font-weight:400;letter-spacing:.14em;margin:0;line-height:1.4}
  .area .areah{font-size:clamp(28px,4vw,56px);max-width:22ch}
  .areas{margin-top:18px;line-height:1.8}
  .flinks{display:flex;gap:18px;flex-wrap:wrap}
  .flinks a,.flinks a:visited{color:#fff;text-decoration:none;transition:color .25s}.flinks a:hover{color:#ff4fd8}
  .page-h{font-size:clamp(44px,8vw,120px);font-weight:500;letter-spacing:-.05em;line-height:.92;text-wrap:balance;margin:16px 0 24px}
  .prose{max-width:62ch;display:flex;flex-direction:column;gap:18px;font-size:clamp(17px,1.5vw,20px);color:var(--dim)}
  .prose strong{color:var(--ink);font-weight:500}
  .quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px}
  .quote{border:1px solid var(--line);border-radius:16px;padding:26px;background:var(--panel);display:flex;flex-direction:column;gap:16px;margin:0;min-width:0}
  .quote p{font-size:16px;line-height:1.55}
  .quote footer{all:unset;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);line-height:1.6}
  .clients{display:flex;flex-wrap:wrap;gap:10px}
  .clients span{font-size:14px;border:1px solid var(--line);border-radius:99px;padding:8px 14px}
  .form{display:grid;gap:16px;max-width:640px}
  .form label{display:grid;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
  .form input,.form select,.form textarea{font:inherit;font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink);background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:14px 15px;width:100%}
  .form select option{color:#000}
  .form textarea{min-height:130px;resize:vertical}
  .form fieldset{border:0;display:flex;flex-wrap:wrap;gap:8px;padding:0}
  .form fieldset label{display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink);border:1px solid var(--line);border-radius:99px;padding:9px 14px;cursor:pointer}
  .form fieldset input{width:auto;accent-color:#ff4fd8}
  .form legend{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:10px;padding:0}
  .formmsg{border:1px solid var(--line);border-radius:14px;padding:20px;max-width:640px}
  .price{font-size:clamp(44px,5vw,68px);font-weight:300;letter-spacing:-.05em;line-height:1}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:start}
  @media (max-width:820px){.two{grid-template-columns:1fr}}
  .two > *{min-width:0}
  .contact-list{display:grid;gap:22px}
  .contact-list b{display:block;font-weight:400;font-size:clamp(20px,2vw,26px);margin-top:6px;letter-spacing:-.01em}

  .wrap > section:first-of-type{padding-bottom:5vh}

  /* related links + site map */
  .related .areah{max-width:none}
  .relgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px}
  .relcard{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:14px;padding:20px;text-decoration:none;color:var(--ink);background:var(--panel);transition:border-color .4s,transform .5s cubic-bezier(.16,1,.3,1);min-width:0}
  .relcard:hover{border-color:var(--hot);transform:translateY(-4px)}
  .relcard b{font-weight:500;font-size:20px;letter-spacing:-.02em}
  .relcard p{color:var(--dim);font-size:14px}
  .sitemap-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:36px}
  .sitemap-groups ul{list-style:none;display:grid;gap:12px;margin-top:14px}
  .sitemap-groups a{color:var(--ink);text-decoration:none;font-size:18px;letter-spacing:-.01em}
  .sitemap-groups a:hover{color:var(--hot)}

  /* client logo strip */
  .logos{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .logos-track{display:flex;width:max-content;animation:logosmove 70s linear infinite}
  .logos:hover .logos-track{animation-play-state:paused}
  .logos-set{display:flex;align-items:center;gap:76px;padding-right:76px}
  .logos img{height:46px;width:auto;flex:none;opacity:.72;transition:opacity .35s}
  .logos img:hover{opacity:1}
  @keyframes logosmove{to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){.logos-track{animation:none;width:auto;flex-wrap:wrap}.logos-set{flex-wrap:wrap;justify-content:center;row-gap:30px}.logos-set[aria-hidden]{display:none}.logos{-webkit-mask-image:none;mask-image:none}}
  @media (max-width:720px){.logos-set{gap:52px;padding-right:52px}.logos img{height:38px}}

  /* website gallery */
  .gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:22px}
  .gcard{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink);background:var(--panel);transition:border-color .4s,transform .6s cubic-bezier(.16,1,.3,1);min-width:0}
  .gcard:hover,.gcard:focus-visible{border-color:var(--hot);transform:translateY(-5px)}
  .gcard img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;background:#0b0d16;transition:transform .8s cubic-bezier(.16,1,.3,1)}
  .gcard:hover img{transform:scale(1.035)}
  .gcard{overflow:hidden}
  .gmeta{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:16px 18px}
  .gmeta b{display:block;font-weight:500;font-size:19px;letter-spacing:-.02em;margin-bottom:6px}
  .gmeta i{font-style:normal;font-size:22px;color:var(--ink);transition:transform .4s,color .4s}
  .gcard:hover .gmeta i{transform:translate(3px,-3px);color:var(--hot)}

  /* article + living identity demos */
  .article{max-width:1100px}
  .art-head{padding-top:6vh;display:block}
  .byline{margin:6px 0 4vh}
  .article-prose{max-width:68ch;display:flex;flex-direction:column;gap:18px;color:var(--dim);font-size:clamp(17px,1.5vw,20px);line-height:1.6}
  .article-prose h2,.art-h2{font-size:clamp(26px,3.2vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1.1;color:var(--ink);margin:3vh 0 0}
  .art-h2{margin:7vh 0 14px}
  .article-prose strong{color:var(--ink);font-weight:500}
  .article-prose a{color:var(--ink);text-decoration-color:var(--hot);text-underline-offset:4px}
  .article-prose ul,.article-prose ol{padding-left:1.2em;display:flex;flex-direction:column;gap:12px}
  .article-prose li::marker{color:var(--hot)}
  .lid-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px;margin-bottom:4vh}
  .lid-tile{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel);min-width:0}
  .lid-stage{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:#080a12;position:relative;overflow:hidden}
  .lid-info{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px}
  .lid-info h3{font-size:24px;font-weight:500;letter-spacing:-.025em}
  .lid-info p{color:var(--dim);font-size:15px}
  .lid-info .mono{color:var(--ice)}
  .lid-a{font-weight:700;font-size:clamp(26px,3.4vw,38px);letter-spacing:-.04em;display:flex;align-items:center;color:var(--ink)}
  .lid-a i{display:inline-block;width:.16em;height:1.15em;margin:0 .1em;background:linear-gradient(#fff,#ff4fd8,#c6ff3d);transform:skewX(-22deg);animation:lidpulse 3s ease-in-out infinite}
  .lid-a span{font-weight:300}
  @keyframes lidpulse{50%{filter:brightness(1.6) drop-shadow(0 0 10px #ff4fd8)}}
  .lid-badge{width:46%;max-width:190px}
  .lid-badge .ring{transform-origin:100px 100px;animation:lidspin 18s linear infinite}
  .lid-badge .dot{animation:lidblink 1.2s steps(1) infinite}
  @keyframes lidspin{to{transform:rotate(1turn)}}
  @keyframes lidblink{50%{opacity:.2}}
  .lid-c{font-size:clamp(54px,8vw,96px);font-weight:700;letter-spacing:-.06em;color:var(--ink);display:flex}
  .lid-c span{display:inline-block;transition:font-weight .3s,transform .5s cubic-bezier(.16,1,.3,1),color .4s}
  .lid-spark{width:30%;max-width:120px;animation:lidspin 12s linear infinite}
  .lid-d{font-size:clamp(34px,5vw,56px);font-weight:700;letter-spacing:-.05em;display:flex;align-items:center;gap:.06em;color:var(--ink)}
  .lid-d .br{font-weight:300;color:var(--ice)}
  .lid-d .bang{color:var(--hot);animation:lidblink 1.1s steps(1) infinite}
  @media (prefers-reduced-motion:reduce){.lid-a i,.lid-badge .ring,.lid-badge .dot,.lid-spark,.lid-d .bang{animation:none!important}}

  .gcard--static{cursor:default}
  .gcard--static:hover,.gcard--static:focus-visible{border-color:var(--line);transform:none}
  .gcard--static:hover img{transform:none}

  /* gallery 2.0: browser frames, tilt, ticker, filters */
  .wticker{overflow:hidden;border-block:1px solid var(--line);padding-block:10px;margin-inline:min(-16px,-5vw);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .wticker-track{display:flex;width:max-content;animation:wtick 90s linear infinite}
  .wticker-set{display:flex;align-items:center;white-space:nowrap}
  .wticker-set span{font-size:clamp(40px,6.4vw,92px);font-weight:700;letter-spacing:-.04em;line-height:1;color:transparent;-webkit-text-stroke:1.2px rgba(238,242,255,.55);padding-right:.5em}
  .wticker-set span::after{content:"\2726";color:var(--hot);-webkit-text-stroke:0;font-size:.45em;margin-left:.9em;vertical-align:middle}
  .wticker-set span:nth-child(3n+1){-webkit-text-stroke-color:rgba(255,79,216,.8)}
  .wticker-set span:nth-child(3n+2){-webkit-text-stroke-color:rgba(198,255,61,.7)}
  @keyframes wtick{to{transform:translateX(-50%)}}
  .wsec{padding-top:6vh;min-width:0;max-width:100%}
  .wsec>*{min-width:0;max-width:100%}
  .wfilters{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;margin-bottom:18px}
  .wfilters::-webkit-scrollbar{display:none}
  .wchip{flex:none;font:inherit;font-size:14px;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:99px;padding:10px 18px;cursor:pointer;display:flex;gap:10px;align-items:center;transition:background .35s,border-color .35s,color .35s,transform .35s}
  .wchip span{font-family:var(--mono);font-size:11px;color:var(--dim)}
  .wchip:hover{border-color:var(--hot);transform:translateY(-2px)}
  .wchip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .wchip[aria-pressed="true"] span{color:#555}
  .wcount{margin:6px 0 4vh}
  .wgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:46px 34px;align-items:start;perspective:1400px}
  @media (max-width:1000px){.wgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 22px}}
  @media (max-width:640px){.wgrid{grid-template-columns:minmax(0,1fr)}}
  .wcard{display:block;color:var(--ink);text-decoration:none;min-width:0;transform:translateY(var(--dy,0px));position:relative}
  .wcard.is-off{display:none}
  .wjs .wcard{opacity:0;transform:translateY(calc(var(--dy,0px) + 46px));transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--n,0) * 70ms)}
  .wjs .wcard.in{opacity:1;transform:translateY(var(--dy,0px))}
  .wframe{border:1px solid rgba(238,242,255,.16);border-radius:14px;overflow:hidden;background:#0b0d16;box-shadow:0 24px 60px -24px rgba(0,0,0,.8);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .5s;transform-style:preserve-3d;will-change:transform}
  a.wcard:hover .wframe,a.wcard:focus-visible .wframe{border-color:var(--hot);box-shadow:0 30px 80px -20px rgba(255,79,216,.35),0 24px 60px -24px rgba(0,0,0,.8)}
  .wbar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#12151f;border-bottom:1px solid rgba(238,242,255,.08)}
  .wbar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}
  .wbar i:nth-child(2){background:#febc2e}.wbar i:nth-child(3){background:#28c840}
  .wurl{margin-left:10px;flex:1;min-width:0;font-family:var(--mono);font-size:11px;color:var(--dim);background:rgba(255,255,255,.05);border-radius:99px;padding:4px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wshot{position:relative;aspect-ratio:16/10;overflow:hidden}
  .wshot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
  a.wcard:hover .wshot img{transform:scale(1.07) translateY(-2%)}
  .wglare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.22),transparent 55%)}
  a.wcard:hover .wglare{opacity:1}
  .wmeta{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:16px 4px 0}
  .wmeta b{display:block;font-weight:500;font-size:clamp(18px,1.6vw,23px);letter-spacing:-.025em;margin-bottom:6px}
  .wgo{width:38px;height:38px;flex:none;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;transition:background .4s,color .4s,transform .5s cubic-bezier(.16,1,.3,1),border-color .4s}
  a.wcard:hover .wgo{background:var(--ink);color:var(--bg);border-color:var(--ink);transform:rotate(45deg)}
  .wcard--static{cursor:default}
  .wcard--static .wframe{transform:none}
  @media (prefers-reduced-motion:reduce){.wticker-track{animation:none}.wjs .wcard{opacity:1;transform:translateY(var(--dy,0px));transition:none}.wframe,.wshot img{transition:none}}

  /* gallery 3.0: 3D fly-through */
  .fly{display:none;position:relative;margin-inline:calc(50% - 50vw)}
  .fly.on{display:block;height:calc(100vh * var(--len,20))}
  .fly-stage{position:sticky;top:0;height:100vh;overflow:hidden}
  #flyc{position:absolute;inset:0;width:100%;height:100%;display:block}
  .fly-hud{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(86px,12vh,120px) max(16px,5vw) clamp(22px,4vh,40px)}
  .fly-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .fly-info{display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:min(92vw,720px);text-shadow:0 2px 24px rgba(0,0,0,.85)}
  .fly-info h2{font-size:clamp(32px,5.4vw,76px);font-weight:500;letter-spacing:-.045em;line-height:.95;margin:0}
  .fly-info h2.swap{animation:flyswap .7s cubic-bezier(.16,1,.3,1)}
  @keyframes flyswap{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  .fly-info .btn{pointer-events:auto;margin-top:8px}
  .fly-info .btn[hidden]{display:none}
  .fly-bar{height:2px;background:var(--line);margin-top:20px;position:relative;overflow:hidden;width:100%}
  .fly-bar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#fff,var(--hot),var(--volt))}
  .fly-load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:opacity .6s}
  .fly-load.done{opacity:0}
  .wintro{padding-top:12vh}
  .wintro h2{font-size:clamp(30px,4.6vw,64px);font-weight:400;letter-spacing:-.04em;line-height:1;margin:12px 0 5vh}

  /* about page photos (black and white) */
  .meetsec{min-height:0;padding-block:2vh 8vh}
  .meet{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px;max-width:860px}
  .meet figure{margin:0;position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line);background:#0b0d16}
  .meet img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:center top;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
  .meet figure:hover img{transform:scale(1.04)}
  .meet figcaption{position:absolute;left:0;right:0;bottom:0;padding:70px 20px 18px;background:linear-gradient(transparent,rgba(5,6,10,.88));color:var(--dim);line-height:1.6}
  .meet figcaption b{display:block;color:var(--ink);font-weight:500;font-family:var(--display);font-size:20px;letter-spacing:-.02em;text-transform:none;margin-bottom:2px}
  @media (prefers-reduced-motion:reduce){.meet img{transition:none}}

  /* gallery grid: brand gradient overlay + fun motion */
  @property --rr{syntax:'<length>';inherits:true;initial-value:0px}
  .wshot img{transition:transform 1.4s cubic-bezier(.16,1,.3,1),filter .6s}
  .wtint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:color;opacity:.95;
    background:linear-gradient(115deg,#ffffff,#ff4fd8 22%,#5b2bff 42%,#c6ff3d 62%,#ff4fd8 82%,#ffffff);background-size:320% 320%;
    animation:wflow 10s linear infinite;animation-delay:calc(var(--n,0) * -1.1s);
    -webkit-mask-image:radial-gradient(circle at var(--gx,50%) var(--gy,50%),transparent 0,transparent var(--rr,0px),#000 calc(var(--rr,0px) + 150px));
    mask-image:radial-gradient(circle at var(--gx,50%) var(--gy,50%),transparent 0,transparent var(--rr,0px),#000 calc(var(--rr,0px) + 150px));
    transition:--rr .7s cubic-bezier(.16,1,.3,1),opacity .6s}
  @keyframes wflow{to{background-position:320% 320%}}
  a.wcard:hover .wtint{--rr:95px}
  a.wcard:hover .wshot img{filter:saturate(1.12) contrast(1.04)}
  .wsheen{position:absolute;inset:-20% -40%;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);transform:translateX(-130%) skewX(-12deg);animation:wsheen 7s ease-in-out infinite;animation-delay:calc(var(--n,0) * .9s + 1s)}
  @keyframes wsheen{0%,62%{transform:translateX(-130%) skewX(-12deg)}100%{transform:translateX(130%) skewX(-12deg)}}
  /* springy entrance + idle float */
  .wjs .wcard{transform:translateY(calc(var(--dy,0px) + 70px)) rotate(-2.5deg) scale(.95);transition:opacity .7s ease,transform 1s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--n,0) * 90ms)}
  .wjs .wcard.in{transform:translateY(var(--dy,0px)) rotate(0deg) scale(1)}
  .wframe{animation:wfloat 7s ease-in-out infinite;animation-delay:calc(var(--n,0) * -1.4s)}
  a.wcard:hover .wframe,a.wcard:focus-visible .wframe{animation-play-state:paused}
  @keyframes wfloat{50%{translate:0 -8px}}
  .wcard.pop .wframe{animation:wjelly .6s cubic-bezier(.34,1.56,.64,1)}
  @keyframes wjelly{0%{scale:1}30%{scale:1.05 .96}55%{scale:.98 1.03}100%{scale:1}}
  .wgo{transition:background .4s,color .4s,transform .6s cubic-bezier(.34,1.56,.64,1),border-color .4s,translate .25s}
  a.wcard:hover .wgo{transform:rotate(45deg) scale(1.12)}
  .wspark{position:absolute;pointer-events:none;z-index:3;font-style:normal;line-height:1;text-shadow:0 0 10px currentColor;transform:translate(-50%,-50%);animation:wspark .9s ease-out forwards}
  @keyframes wspark{0%{opacity:1;transform:translate(-50%,-50%) scale(.4) rotate(0)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.2) rotate(180deg)}}
  @media (prefers-reduced-motion:reduce){.wtint,.wsheen,.wframe,.wcard.pop .wframe{animation:none!important}.wsheen{display:none}.wjs .wcard,.wjs .wcard.in{transform:translateY(var(--dy,0px));transition:none}}

  /* About portraits: small, brand-ringed */
  .meet{display:flex;flex-wrap:wrap;gap:28px;max-width:none;align-items:flex-start}
  .meet figure{width:min(44%,210px);flex:none;overflow:visible;border:0;background:none;border-radius:18px;padding:3px;transform:rotate(-2.5deg);transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
  .meet figure:nth-child(2){transform:rotate(2.5deg) translateY(18px)}
  .meet figure::before{content:"";position:absolute;inset:0;border-radius:18px;background:conic-gradient(from var(--ang,0deg),#fff,#ff4fd8,#c6ff3d,#fff);animation:mring 6s linear infinite;z-index:0}
  @property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
  @keyframes mring{to{--ang:360deg}}
  .meet figure:hover{transform:rotate(0) scale(1.06)}
  .meet img{position:relative;z-index:1;border-radius:15px;aspect-ratio:3/4;transition:filter .5s}
  .meet figcaption{z-index:2;border-radius:0 0 15px 15px;padding:40px 12px 10px;font-size:9px;letter-spacing:.08em}
  .meet figcaption b{font-size:14px}
  @media (prefers-reduced-motion:reduce){.meet figure::before{animation:none}.meet figure,.meet figure:nth-child(2){transform:none}}

  /* About: studio photo */
  .officesec{min-height:0;padding-block:2vh 6vh}
  .office{margin:0;position:relative;max-width:760px;padding:3px;border-radius:20px;transform:rotate(-1deg);transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
  .office::before{content:"";position:absolute;inset:0;border-radius:20px;background:conic-gradient(from var(--ang,0deg),#fff,#ff4fd8,#c6ff3d,#fff);animation:mring 6s linear infinite}
  .office img{position:relative;display:block;width:100%;height:auto;border-radius:17px}
  .office figcaption{position:absolute;z-index:2;left:3px;right:3px;bottom:3px;padding:60px 20px 16px;border-radius:0 0 17px 17px;background:linear-gradient(transparent,rgba(5,6,10,.85));color:var(--dim);font-size:11px;letter-spacing:.08em}
  .office figcaption b{display:block;color:var(--ink);font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:-.02em;text-transform:none}
  .office:hover{transform:rotate(0) scale(1.02)}
  @media (prefers-reduced-motion:reduce){.office::before{animation:none}.office{transform:none}}
  .meet--side{margin-top:6px}
  .meet--side figure,.meet--side figure:nth-child(2){width:min(60%,220px);transform:rotate(2deg)}
  .meet--side figure:hover{transform:rotate(0) scale(1.06)}