*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#080A12;--surface:#10131f;--surface2:#151928;--text:#f4f5fb;
  --muted:#a4a9ba;--line:rgba(255,255,255,.11);--violet:#8057ff;
  --cyan:#35d7ff;--acid:#b7ff4a;--dark:#090b12;
}

/* ─── CURSOR ─── only transform/opacity, no mix-blend-mode, no canvas */
@media(pointer:fine){*{cursor:none}}
#cursor-dot{
  position:fixed;top:0;left:0;width:8px;height:8px;
  background:var(--cyan);border-radius:50%;
  pointer-events:none;z-index:9999;will-change:transform;
  transition:width .13s,height .13s,background .13s;
}
#cursor-ring{
  position:fixed;top:0;left:0;width:38px;height:38px;
  border:1.5px solid rgba(53,215,255,.5);border-radius:50%;
  pointer-events:none;z-index:9998;will-change:transform;
  transition:width .18s ease,height .18s ease,border-color .18s ease;
}
body.cursor-hover #cursor-dot{width:14px;height:14px;background:var(--violet)}
body.cursor-hover #cursor-ring{width:54px;height:54px;border-color:rgba(128,87,255,.6)}
body.cursor-click #cursor-dot{width:5px;height:5px;background:white}
body.cursor-click #cursor-ring{width:26px;height:26px}

/* ─── HEADER STUCK — class, not inline style */
.header-stuck{
  position:fixed!important;top:0;left:0;right:0;max-width:100%!important;
  background:rgba(8,10,18,.88);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.07);
  height:70px!important;padding:0 clamp(18px,3vw,48px)!important;
  z-index:100;transition:background .3s,height .3s;
}
.main-nav a.nav-active{color:white}

/* ─── BASE */
html{scroll-behavior:smooth}
body{font-family:Manrope,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden}
a{color:inherit;text-decoration:none}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.03;z-index:999;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}

/* ─── HEADER */
.site-header{
  height:88px;max-width:1240px;margin:auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;
  position:relative;z-index:50;
  animation:headerIn .7s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes headerIn{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
.brand{display:flex;align-items:center;gap:11px;font:700 21px/1 Space Grotesk,sans-serif;
  letter-spacing:-.6px;transition:opacity .2s}
.brand:hover{opacity:.8}
.brand>span>span{color:var(--cyan)}
.brand-mark{width:33px;color:var(--violet);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.brand:hover .brand-mark{transform:rotate(30deg) scale(1.1)}
.main-nav{display:flex;align-items:center;gap:34px;font-size:14px;font-weight:600;color:#d6d9e4}
.main-nav a{transition:color .18s;position:relative}
.main-nav a::after{content:"";position:absolute;bottom:-3px;left:0;width:0;height:1.5px;
  background:linear-gradient(90deg,var(--violet),var(--cyan));transition:width .22s}
.main-nav a:hover{color:white}
.main-nav a:hover::after{width:100%}
.nav-cta{padding:11px 18px;border:1px solid var(--line);border-radius:999px;transition:.22s!important}
.nav-cta:hover{background:rgba(128,87,255,.14);border-color:rgba(128,87,255,.5)}
.nav-cta::after{display:none!important}
.menu-toggle{display:none;background:none;border:0;width:36px;height:36px;position:relative}
.menu-toggle span{position:absolute;left:7px;width:22px;height:2px;background:white;transition:.22s}
.menu-toggle span:first-child{top:13px}.menu-toggle span:last-child{top:21px}

/* ─── SECTIONS */
.section{max-width:1240px;margin:auto;padding:118px 24px}

/* ─── HERO */
.hero{min-height:calc(100vh - 88px);display:grid;grid-template-columns:1.04fr .96fr;
  align-items:center;gap:70px;padding-top:64px;padding-bottom:90px}
.eyebrow{display:flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:2px;
  font-size:11px;font-weight:800;color:#c5c9d7;margin-bottom:25px}
.eyebrow span{width:27px;height:2px;background:linear-gradient(90deg,var(--violet),var(--cyan));
  animation:eyebrowLine 1s ease both;transform-origin:left}
@keyframes eyebrowLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* use scaleX not width — compositor only */

.hero h1,.section-heading h2,.process-intro h2,.about-card h2,.contact-card h2{
  font-family:Space Grotesk,sans-serif;letter-spacing:-3px;line-height:.98}
.hero h1{font-size:clamp(58px,7vw,96px);max-width:800px;position:relative}
.hero h1 em,.contact-card h2 em{font-style:normal;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.64)}
/* glitch: only text-shadow (compositor), not layout */
.hero h1:hover{animation:glitch .4s steps(2,end)}
@keyframes glitch{
  0%,100%{text-shadow:none}
  25%{text-shadow:-3px 0 var(--cyan),3px 0 var(--violet)}
  50%{text-shadow:3px 0 var(--cyan),-3px 0 var(--violet)}
  75%{text-shadow:-2px 0 var(--cyan)}
}
.hero-copy>p{max-width:620px;color:var(--muted);font-size:18px;line-height:1.75;margin:31px 0 35px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ─── BUTTONS — overflow:hidden shimmer via pseudo, no box-shadow change on hover */
.button{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
  padding:15px 23px;font-weight:800;font-size:14px;transition:transform .22s,opacity .22s;
  position:relative;overflow:hidden;will-change:transform}
.button::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.1);
  transform:scaleX(0);transform-origin:left;transition:transform .28s ease;pointer-events:none}
.button:hover::before{transform:scaleX(1)}
.button-primary{background:linear-gradient(135deg,var(--violet),#5d37e9);
  box-shadow:0 10px 28px rgba(128,87,255,.22)}
.button-primary:hover{transform:translateY(-3px)}  /* no box-shadow change = no paint */
.button-ghost{border:1px solid var(--line);color:#e4e7ef}
.button-ghost:hover{background:rgba(255,255,255,.06);transform:translateY(-2px)}

.hero-proof{display:flex;gap:38px;margin-top:55px}
.hero-proof div{display:flex;flex-direction:column;gap:6px;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1);will-change:transform}
.hero-proof div:hover{transform:translateY(-4px)}
.hero-proof strong{font:700 13px Space Grotesk;color:var(--cyan)}
.hero-proof span{font-size:12px;color:#808698}

/* ─── HERO VISUAL */
.hero-visual{height:610px;position:relative;display:grid;place-items:center;will-change:transform}

/* grid-card: no backdrop-filter (GPU stall), no animating box-shadow */
.grid-card{
  position:relative;width:82%;height:78%;padding:28px;
  border:1px solid rgba(255,255,255,.14);border-radius:28px;
  background:linear-gradient(145deg,rgba(24,28,45,.97),rgba(12,15,27,.95));
  box-shadow:0 30px 80px rgba(0,0,0,.55);overflow:hidden;
  transform:rotate(3deg);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
  will-change:transform;
}
.grid-card:hover{transform:rotate(1deg) scale(1.02)}
/* spotlight: opacity-animated ::after, not background change */
.grid-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--gx,80%) var(--gy,20%),rgba(128,87,255,.18) 0%,transparent 52%);
  opacity:0;transition:opacity .3s;
}
.grid-card:hover::after{opacity:1}
.grid-card:before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent);
  pointer-events:none}
.card-top{display:flex;gap:7px}
.card-top span{width:8px;height:8px;border-radius:50%;background:#4a4f61;transition:background .18s}
.card-top span:hover{background:var(--cyan)}
.mini-label{position:absolute;right:28px;top:27px;font-size:10px;letter-spacing:2px;color:#9298aa}
.visual-title{
  position:absolute;left:34px;bottom:108px;
  font:700 clamp(48px,5vw,72px)/.93 Space Grotesk;letter-spacing:-4px;
  animation:titleFloat 6s ease-in-out infinite;will-change:transform;
}
@keyframes titleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.visual-line{position:absolute;left:34px;right:34px;bottom:78px;height:1px;
  background:linear-gradient(90deg,var(--cyan),transparent);
  transform:scaleX(0);transform-origin:left;animation:lineExpand 1.8s ease both 0.9s}
@keyframes lineExpand{to{transform:scaleX(1)}}
.visual-meta{position:absolute;left:34px;right:34px;bottom:35px;display:flex;
  justify-content:space-between;font-size:10px;color:#9ba1b3;text-transform:uppercase;letter-spacing:1.4px}
.visual-meta span{transition:color .18s}.visual-meta span:hover{color:var(--cyan)}

/* ─── ORBS — no filter:blur (expensive on animated elements), use soft gradient instead */
.orb{position:absolute;border-radius:50%}
.orb-one{width:290px;height:290px;
  background:radial-gradient(circle at 35% 35%,rgba(154,124,255,.7),rgba(128,87,255,.4) 45%,transparent 72%);
  top:15px;right:8px;
  animation:orbOne 8s ease-in-out infinite;will-change:transform;}
.orb-two{width:200px;height:200px;
  background:radial-gradient(circle at 35% 35%,rgba(124,240,255,.6),rgba(53,215,255,.35) 42%,transparent 72%);
  bottom:24px;left:5px;
  animation:orbTwo 10s ease-in-out infinite;will-change:transform;}
@keyframes orbOne{0%,100%{transform:translate(0,0)}33%{transform:translate(-16px,18px)}66%{transform:translate(12px,-10px)}}
@keyframes orbTwo{0%,100%{transform:translate(0,0)}40%{transform:translate(14px,-20px)}70%{transform:translate(-9px,13px)}}

/* ─── FLOAT CARDS — no backdrop-filter */
.float-card{
  position:absolute;padding:13px 18px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(15,18,30,.88);
  border-radius:14px;font:600 12px Space Grotesk;
  box-shadow:0 14px 40px rgba(0,0,0,.3);
  will-change:transform;
}
.float-a{right:2px;top:110px;animation:floatA 7s ease-in-out infinite}
.float-b{left:2px;bottom:104px;animation:floatB 9s ease-in-out infinite}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* ─── MARQUEE */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:20px 0;background:#0c0f19;position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,#0c0f19,transparent)}
.marquee::after{right:0;background:linear-gradient(-90deg,#0c0f19,transparent)}
.marquee-track{display:flex;width:max-content;gap:26px;align-items:center;
  animation:marqueeScroll 22s linear infinite;font:700 13px Space Grotesk;letter-spacing:2px;color:#daddE8;
  will-change:transform}
.marquee-track i{color:var(--violet);font-style:normal;transition:color .2s,transform .2s}
.marquee-track i:hover{color:var(--cyan);transform:rotate(180deg)}
@keyframes marqueeScroll{to{transform:translateX(-50%)}}

/* ─── SERVICES */
.section-heading{display:flex;justify-content:space-between;gap:50px;align-items:flex-end;margin-bottom:60px}
.section-heading .eyebrow{min-width:190px}
.section-heading h2,.process-intro h2,.about-card h2{font-size:clamp(43px,5vw,68px);max-width:810px}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service-card{
  min-height:420px;padding:30px;border:1px solid var(--line);
  background:linear-gradient(155deg,var(--surface2),var(--surface));
  border-radius:22px;position:relative;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),border-color .25s;
  will-change:transform;
}
/* glow via opacity-animated pseudo — no paint */
.service-card::after{
  content:"";position:absolute;inset:0;border-radius:22px;
  background:linear-gradient(135deg,rgba(128,87,255,.09),rgba(53,215,255,.05));
  opacity:0;transition:opacity .28s;pointer-events:none;
}
.service-card:hover{transform:translateY(-9px) rotate(-.4deg);border-color:rgba(128,87,255,.5)}
.service-card:hover::after{opacity:1}
.service-number{font:700 11px Space Grotesk;color:#70778b;letter-spacing:1.5px}
.service-icon{
  position:absolute;right:27px;top:25px;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:rgba(128,87,255,.12);color:#a88dff;font-size:21px;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .25s,color .25s;
  will-change:transform;
}
.service-card:hover .service-icon{transform:scale(1.16) rotate(11deg);background:rgba(128,87,255,.22);color:var(--cyan)}
.service-card h3{font:700 31px Space Grotesk;margin:94px 0 18px;letter-spacing:-1px}
.service-card p{color:var(--muted);line-height:1.65;font-size:15px}
.service-card ul{list-style:none;position:absolute;left:30px;bottom:28px;right:30px;
  border-top:1px solid var(--line);padding-top:18px}
.service-card li{font-size:12px;color:#c1c5d2;margin-top:7px;
  transition:color .18s,transform .18s;will-change:transform}
.service-card li:hover{color:var(--cyan);transform:translateX(4px)}
.service-card li:before{content:"—";color:var(--cyan);margin-right:9px}

/* ─── PROCESS */
.process{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px;align-items:start}
.process-intro{position:sticky;top:100px}
.process-intro>p{color:var(--muted);font-size:16px;line-height:1.7;margin-top:24px;max-width:520px}
.process-list{border-top:1px solid var(--line)}
.process-item{
  display:grid;grid-template-columns:90px 1fr;border-bottom:1px solid var(--line);padding:34px 0;
  transition:transform .28s ease,border-color .22s; /* translateX not padding — no reflow */
  will-change:transform;
}
.process-item:hover{transform:translateX(12px);border-bottom-color:rgba(53,215,255,.35)}
.process-item>span{font:700 12px Space Grotesk;color:var(--cyan);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1);will-change:transform}
.process-item:hover>span{transform:scale(1.22)}
.process-item h3{font:700 28px Space Grotesk;margin-bottom:8px;transition:color .2s}
.process-item:hover h3{color:var(--cyan)}
.process-item p{color:var(--muted);font-size:14px}

/* ─── WORK */
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px 20px}
.project-large{grid-column:span 2}
.project-visual{height:430px;border-radius:20px;overflow:hidden;position:relative;padding:45px;
  transition:transform .38s cubic-bezier(.25,.46,.45,.94);will-change:transform}
.project-large .project-visual{height:610px}
.project:hover .project-visual{transform:scale(.984)}
/* shimmer: only transform animated — compositor */
.project-visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.08) 50%,transparent 62%);
  transform:translateX(-100%);transition:transform .5s ease;pointer-events:none;
}
.project:hover .project-visual::after{transform:translateX(100%)}

.visual-one{background:linear-gradient(130deg,#f17526,#ff9d36);color:#101010}
.mock-logo{font:800 92px Space Grotesk;border:8px solid currentColor;width:135px;height:135px;
  border-radius:50%;display:grid;place-items:center;
  transition:transform .38s cubic-bezier(.34,1.56,.64,1);will-change:transform}
.project:hover .mock-logo{transform:rotate(-5deg) scale(1.06)}
.mock-copy{position:absolute;bottom:45px;right:50px;text-align:right;
  font:800 clamp(48px,7vw,86px)/.88 Space Grotesk;letter-spacing:-5px;
  transition:transform .38s ease;will-change:transform}
.project:hover .mock-copy{transform:translateX(-8px)}
.mock-copy.small{font-size:58px;letter-spacing:-3px}
.visual-two{background:#07120f;color:#e7f6ec}
.fish-mark{font:800 102px Space Grotesk;color:#2bdca4;
  transition:transform .38s cubic-bezier(.34,1.56,.64,1);will-change:transform}
.project:hover .fish-mark{transform:scale(1.07) skewX(-3deg)}
.visual-three{background:linear-gradient(135deg,#e3e6e8,#b5bcc1);color:#15191d}
/* removed letter-spacing animation — causes text reflow */
.building-mark{font:800 72px Space Grotesk;letter-spacing:-5px;
  transition:transform .38s ease;will-change:transform}
.project:hover .building-mark{transform:scale(1.06)}
.construct-lines{position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 48%,rgba(0,0,0,.1) 49%,rgba(0,0,0,.1) 50%,transparent 51%)}
.project-info{display:flex;justify-content:space-between;margin-top:18px}
.project-info h3{font:700 20px Space Grotesk;margin-bottom:6px;transition:color .18s}
.project:hover .project-info h3{color:var(--cyan)}
.project-info p,.project-info>span{font-size:12px;color:#81889b}

/* ─── ABOUT — spotlight via opacity-animated ::before, not background animation */
.about-card{
  border:1px solid var(--line);border-radius:26px;padding:62px;
  display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:end;
  background:var(--surface);
  transition:border-color .3s;position:relative;overflow:hidden;
}
.about-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--mx,80%) var(--my,0%),rgba(128,87,255,.14),transparent 38%);
  opacity:0;transition:opacity .3s;
}
.about-card:hover{border-color:rgba(128,87,255,.32)}
.about-card:hover::before{opacity:1}
.about-card>p{color:var(--muted);line-height:1.8;font-size:17px}

/* ─── CONTACT */
.contact{padding-top:40px}
.contact-card{
  min-height:570px;border-radius:30px;padding:70px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  overflow:hidden;position:relative;
  background:linear-gradient(135deg,#7250ee,#3a21aa);
  will-change:transform;
}
.contact-card>*:not(.contact-orbit){position:relative;z-index:2}
.eyebrow.light{color:white}
.eyebrow.light span{background:white}
.contact-card h2{font-size:clamp(58px,8vw,104px);margin-bottom:25px}
.contact-card p{max-width:600px;line-height:1.7;color:rgba(255,255,255,.78);margin-bottom:28px}
.button-light{background:white;color:#231360;transition:transform .22s,box-shadow .22s}
.button-light:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.28)}
/* orbits: transform only, no paint */
.contact-orbit{position:absolute;border:1px solid rgba(255,255,255,.16);border-radius:50%;will-change:transform}
.orbit-one{width:540px;height:540px;right:-160px;top:-100px;animation:orbitSpin 20s linear infinite}
.orbit-two{width:360px;height:360px;right:-35px;top:40px;animation:orbitSpin 13s linear infinite reverse}
@keyframes orbitSpin{to{transform:rotate(360deg)}}

/* ─── FOOTER */
footer{max-width:1240px;margin:auto;padding:40px 24px 55px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px}
.footer-links{display:flex;gap:24px;font-size:12px;color:#9ca2b2}
.footer-links a{transition:color .18s;position:relative}
.footer-links a::after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:1px;
  background:var(--cyan);transition:width .2s}
.footer-links a:hover{color:var(--cyan)}
.footer-links a:hover::after{width:100%}
footer>p{text-align:right;font-size:11px;color:#6e7485}
.footer-brand .brand-mark{transition:transform .38s cubic-bezier(.34,1.56,.64,1);will-change:transform}
.footer-brand:hover .brand-mark{transform:rotate(60deg)}

/* ─── SCROLL REVEALS */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
.reveal-left{opacity:0;transform:translateX(-28px);transition:opacity .65s ease,transform .65s ease}
.reveal-left.visible{opacity:1;transform:none}
.reveal-scale{opacity:0;transform:scale(.95);transition:opacity .65s ease,transform .65s ease}
.reveal-scale.visible{opacity:1;transform:none}
.delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}.delay-3{transition-delay:.3s}

/* ─── PAGE LOADER */
#page-loader{
  position:fixed;inset:0;z-index:10000;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  animation:loaderOut .35s ease .75s both;pointer-events:none;
}
@keyframes loaderOut{to{opacity:0;visibility:hidden}}
.loader-bar{width:160px;height:2px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}
.loader-bar::after{content:"";display:block;height:100%;
  background:linear-gradient(90deg,var(--violet),var(--cyan));border-radius:999px;
  animation:loadFill .7s ease both;transform:scaleX(0);transform-origin:left}
@keyframes loadFill{to{transform:scaleX(1)}}

/* ─── RESPONSIVE */
@media(max-width:900px){
  .main-nav{position:absolute;left:20px;right:20px;top:78px;display:none;flex-direction:column;
    align-items:stretch;background:#111522;border:1px solid var(--line);padding:20px;border-radius:16px}
  .main-nav.open{display:flex}.menu-toggle{display:block}
  .menu-toggle.active span:first-child{transform:translateY(4px) rotate(45deg)}
  .menu-toggle.active span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .hero{grid-template-columns:1fr;padding-top:55px}.hero-visual{height:520px}
  .service-grid{grid-template-columns:1fr}.service-card{min-height:350px}
  .section-heading{display:block}.section-heading .eyebrow{min-width:0}
  .process{grid-template-columns:1fr;gap:55px}.process-intro{position:static}
  .about-card{grid-template-columns:1fr;gap:35px;padding:40px}
}
@media(max-width:620px){
  .section{padding:82px 18px}.site-header{height:74px;padding:0 18px}
  .hero{padding-top:48px}.hero h1{font-size:52px;letter-spacing:-2.7px}
  .hero-copy>p{font-size:16px}.hero-proof{gap:17px;justify-content:space-between}
  .hero-proof span{font-size:10px}.hero-visual{height:430px}
  .grid-card{width:92%;height:82%}.float-card{font-size:10px}.float-a{right:-5px}.float-b{left:-4px}
  .section-heading h2,.process-intro h2,.about-card h2{font-size:42px;letter-spacing:-2px}
  .work-grid{grid-template-columns:1fr}.project-large{grid-column:span 1}
  .project-large .project-visual,.project-visual{height:430px}
  .mock-copy{font-size:46px;right:28px;bottom:35px;letter-spacing:-3px}.mock-copy.small{font-size:45px}
  .contact{padding-left:12px;padding-right:12px}.contact-card{padding:42px 26px;min-height:520px}
  .contact-card h2{font-size:58px;letter-spacing:-3px}
  footer{grid-template-columns:1fr;justify-items:start}footer>p{text-align:left}
  #cursor-dot,#cursor-ring{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}