/* Global layer: the two canvases, buttons, the interaction hint, the paper-side design system and the shared
   section layout. The base reset and the loader are inlined in index.html for the first paint; every component
   styles its own markup. */

/* ---------- canvas ----------
   Layers, bottom to top: sections (2) < the WebGL canvas (3) < hero copy (4) and footer (4) < nav (6).
   The canvas sits over the pinned studio and turns transparent as the 2D view washes away, uncovering it.
   It never takes pointer events; the moss listens on the window instead. */
#gl {
  position: fixed; inset: 0; z-index: 3; width: 100vw; height: 100vh; height: 100dvh;
  display: block; outline: none; pointer-events: none;
}
/* the butterfly's own canvas: travels with it, above everything (the cursor too, so it can sit on it) */
.bf-layer { position: fixed; left: 0; top: 0; z-index: 31; width: 440px; height: 440px; pointer-events: none; visibility: hidden; will-change: transform; }
html.static .bf-layer { display: none; }

.btn {
  display: inline-flex; align-items: center; gap: 14px; height: 48px;
  padding: 0 7px 0 22px; border-radius: 999px; white-space: nowrap;
  font-size: 14.5px; font-weight: 500; letter-spacing: -.01em;
  transition: transform .5s var(--ease), background .3s, border-color .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn.primary { background: var(--lime); color: #0b1606; box-shadow: 0 10px 40px -12px rgba(169, 214, 58, .55); }
.btn.primary .ico { width: 34px; height: 34px; border-radius: 50%; background: #0b1606; color: var(--lime); display: grid; place-items: center; }
.btn.primary .ico svg { transition: transform .5s var(--ease); }
.btn.primary:hover .ico svg { transform: rotate(-45deg); }
.btn.ghost { padding: 0 22px; border: 1px solid rgba(236, 235, 228, .22); background: rgba(236, 235, 228, .04); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btn.ghost:hover { border-color: rgba(236, 235, 228, .45); }
.btn.small { height: 40px; font-size: 13.5px; padding: 0 5px 0 18px; }
.btn.small .ico { width: 30px; height: 30px; }

/* interaction hint: the hero dock and the footer window */
.hint { color: rgba(236, 235, 228, .5); text-align: right; line-height: 1.7; white-space: nowrap; }
.hint b { color: var(--bone); font-weight: 500; }

/* =====================================================================
   DESIGN SYSTEM, paper side
   Paper and white cards, one deep forest green for dark panels, brand lime as the only accent.
   Soft 28px cards, pill tags, dashed "unclaimed" tiles, glass widgets, film grain.
   ===================================================================== */
:root {
  --forest: #0a2016;
  --forest-2: #15322a;
  --lime-hi: #bde86f;
  --card: #ffffff;
  --sand: #e6e0d2;
  --frame: #f8f8f8; /* sky of the footer image */
  --r-card: 28px;
  --shadow-soft: 0 40px 80px -40px rgba(13, 27, 7, .3), 0 1px 2px rgba(13, 27, 7, .06);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
.section { position: relative; z-index: 2; background: var(--paper); color: var(--moss); padding: clamp(96px, 13vh, 150px) var(--pad); }
.wrap { position: relative; max-width: 1360px; margin: 0 auto; }
.tag { margin: 0; display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--moss); }
.tag-muted { color: rgba(13, 27, 7, .5); }
/* tiny section artworks: ink line + lime, each a miniature of its own section, each with one small loop */
.tag .art { width: 22px; height: 22px; flex: none; margin: -6px 0; overflow: visible; }
.art .ink { fill: none; stroke: var(--moss); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.art .dot-ink { fill: var(--moss); }
.art .leafy { fill: var(--lime); stroke: var(--moss); stroke-width: 1.3; stroke-linejoin: round; }
/* studio: lime hops around a staggered cluster of tiles */
.art-tiles rect { fill: transparent; stroke: var(--moss); stroke-width: 1.3; animation: tileHop 3.6s infinite; }
.art-tiles rect:nth-child(2) { animation-delay: 1.2s; }
.art-tiles rect:nth-child(3) { animation-delay: 2.4s; }
@keyframes tileHop { 0%, 30% { fill: var(--lime); } 34%, 100% { fill: transparent; } }
/* work: a scan line sweeps an aerial field */
.art-field .rows path { stroke: var(--moss); stroke-width: 1; opacity: .55; }
.art-field .plot { fill: var(--lime); }
.art-field .scan { fill: #fff; opacity: .85; animation: scan 3.2s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes scan { from { transform: translateX(-2px); } to { transform: translateX(24px); } }
/* process: a marker travels the route (SMIL, paused for reduced motion) */
.art-route .trail { fill: none; stroke: var(--moss); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: .1 3.2; }
/* contact: a sprout sways */
.art-sprout .leaf { transform-origin: 12px 14.5px; animation: sway 3.4s ease-in-out infinite; }
.art-sprout .leaf + .leaf { animation-delay: -1.7s; }
@keyframes sway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .art * { animation: none !important; } }
.sec-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--ink-line); }
.h2 { margin: 0; font-weight: 500; font-size: clamp(40px, 5.2vw, 92px); line-height: .98; letter-spacing: -.045em; }
.h2 em { font-style: normal; color: #3d6b16; }
.ln { display: block; overflow: hidden; padding-bottom: .24em; margin-bottom: -.24em; }
.s-reveal { display: inline-block; transform: translateY(130%); }
.s-fade { opacity: 0; transform: translateY(24px); }
.sec-lede { max-width: 44ch; margin: 26px 0 0; font-size: 17px; line-height: 1.55; color: var(--ink-soft); }
.link-arrow { display: inline-flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 15px; font-weight: 500; border-bottom: 1px solid currentColor; }
.link-arrow svg { transition: transform .45s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.btn.dark { background: var(--moss); color: var(--paper); }
.btn.dark .ico { width: 34px; height: 34px; border-radius: 50%; background: var(--lime); color: var(--moss); display: grid; place-items: center; }
.btn.dark .ico svg { transition: transform .5s var(--ease); }
.btn.dark:hover .ico svg { transform: rotate(-45deg); }
.pill {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px;
  background: #252a24; color: #f4f4ef; font-size: 12.5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 14px -6px rgba(0, 0, 0, .45);
}
.datechip {
  display: inline-flex; align-items: stretch; height: 30px; padding: 3px; border-radius: 999px; background: #252a24;
  font-size: 11px; letter-spacing: .06em; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45);
}
.datechip b { display: grid; place-items: center; padding: 0 10px; color: #f4f4ef; font-weight: 500; }
.datechip i { display: grid; place-items: center; min-width: 38px; border-radius: 999px; background: #fff; color: var(--moss); font-style: normal; font-weight: 500; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 10px;
  background: #fff; border: 1px solid rgba(13, 27, 7, .1); font-size: 14px; color: rgba(13, 27, 7, .58); font-variant-numeric: tabular-nums;
}
.chip b { color: var(--moss); font-weight: 500; }
.grain::after { content: ''; position: absolute; inset: 0; z-index: 5; background-image: var(--grain); mix-blend-mode: overlay; opacity: .55; pointer-events: none; }
.glass {
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .34); color: #fff;
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
}
/* the soft green blur used for "atmosphere" panels */
.blur-art {
  position: absolute; inset: -16%; z-index: 0;
  background:
    radial-gradient(38% 42% at 24% 14%, #9fdcf2 0%, rgba(159, 220, 242, 0) 70%),
    radial-gradient(46% 52% at 72% 38%, #4f8a30 0%, rgba(79, 138, 48, 0) 72%),
    radial-gradient(44% 48% at 34% 72%, #93bf4c 0%, rgba(147, 191, 76, 0) 72%),
    radial-gradient(36% 40% at 86% 86%, #d6cc5c 0%, rgba(214, 204, 92, 0) 72%),
    #6f9f4f;
  filter: blur(28px);
}
.binary {
  position: absolute; z-index: 1; margin: 0; font: inherit; font-size: 11px; line-height: 1.3; letter-spacing: .3em;
  color: rgba(255, 255, 255, .42); white-space: pre; pointer-events: none; font-variant-numeric: tabular-nums;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent); mask-image: linear-gradient(to bottom, #000 30%, transparent);
}

/* section intro: the title and its lede side by side */
.intro-row {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: end;
  padding: clamp(44px, 8vh, 90px) 0 clamp(36px, 6vh, 60px);
}
.intro-row .sec-lede { justify-self: end; margin: 0; }

/* static fallback (no WebGL) */
html.static .s-reveal, html.static .s-fade { opacity: 1 !important; transform: none !important; }

@media (max-width: 900px) {
  .intro-row { grid-template-columns: 1fr; align-items: start; }
  .intro-row .sec-lede { justify-self: start; }
}
@media (max-width: 760px) {
  .h2 { font-size: clamp(36px, 10.5vw, 56px); }
  .sec-lede { font-size: 15.5px; }
}
@media (max-height: 620px) and (min-width: 761px) {
  .hint { display: none; }
}

.brand, .brand svg { transition: color .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease), filter .5s;
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 400; font-size: 18px; letter-spacing: -.02em;
}
.brand svg { width: 36px; height: auto; color: var(--bone); filter: drop-shadow(0 0 10px rgba(138, 194, 31, .35));
}
.brand sup { font-size: 9px; font-weight: 500; opacity: .6; margin-left: 1px;
}

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 6; pointer-events: none;
  padding: var(--pad) var(--pad) 0; padding-top: max(var(--pad), env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: space-between; gap: 24px; opacity: 0; transform: translateY(-12px);
}
.nav a, .nav button { pointer-events: auto;
}
.links, .links a, .menu-btn { transition: color .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease), filter .5s;
}
.links {
  display: flex; gap: 2px; padding: 5px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.links a { padding: 8px 16px; border-radius: 999px; font-size: 14px; color: rgba(236, 235, 228, .72);
}
.links a:hover { background: rgba(236, 235, 228, .1); color: var(--bone);
}
.links a[aria-current] { color: var(--bone); background: rgba(236, 235, 228, .08);
}
.menu-btn { display: none; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.menu-btn i { display: grid; gap: 4px;
}
.menu-btn i::before, .menu-btn i::after { content: ''; display: block; width: 16px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease);
}
.menu-open .menu-btn i::before { transform: translateY(2.75px) rotate(45deg);
}
.menu-open .menu-btn i::after { transform: translateY(-2.75px) rotate(-45deg);
}
/* nav re-themes once the paper takes over, with a paper fade behind it so content can scroll under */
.nav::before {
  content: ''; position: absolute; inset: 0 0 -28px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--paper) 55%, rgba(243, 242, 236, 0));
  opacity: 0; transition: opacity .5s var(--ease);
}
html.on-paper:not(.menu-open) .nav::before { opacity: 1;
}
html.on-paper:not(.menu-open) .brand { color: var(--moss);
}
html.on-paper:not(.menu-open) .brand svg { color: var(--moss); filter: none;
}
html.on-paper:not(.menu-open) .links { background: rgba(13, 27, 7, .04); border-color: rgba(13, 27, 7, .1);
}
html.on-paper:not(.menu-open) .links a { color: rgba(13, 27, 7, .6);
}
html.on-paper:not(.menu-open) .links a:hover,
html.on-paper:not(.menu-open) .links a[aria-current] { color: var(--moss); background: rgba(13, 27, 7, .07);
}
html.on-paper:not(.menu-open) .menu-btn { color: var(--moss); background: rgba(13, 27, 7, .04); border-color: rgba(13, 27, 7, .12);
}
html.static .nav { opacity: 1 !important; transform: none !important;
}
@media (max-width: 1080px) {
.links a { padding: 8px 12px;
}
}
@media (max-width: 860px) {
.links, .nav-cta { display: none;
}
.menu-btn { display: inline-flex;
}
}

/* ---------- hero: a sticky stage inside a tall scroll track that drives the transition ---------- */
.hero-track { position: relative; height: 350vh;
}
.hero-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; z-index: 4; pointer-events: none;
}
.scrim { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1;
}
.scrim.top { top: 0; height: 190px; background: linear-gradient(to bottom, rgba(5, 10, 3, .7), rgba(5, 10, 3, 0));
}
.scrim.bottom { bottom: 0; height: 52%; background: linear-gradient(to top, rgba(5, 10, 3, .9) 0%, rgba(5, 10, 3, .55) 42%, rgba(5, 10, 3, 0));
}

/* ---------- UI layer ---------- */
.ui {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: grid; grid-template-rows: 1fr auto;
  padding: var(--pad);
  padding-bottom: max(var(--pad), env(safe-area-inset-bottom));
}
.ui a, .ui button { pointer-events: auto;
}

/* ---------- hero copy ---------- */
.foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
}
.hero { max-width: min(860px, 64vw);
}
h1 {
  margin: 0; font-weight: 500; font-size: clamp(44px, 6.1vw, 112px);
  line-height: .94; letter-spacing: -.045em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
/* the mask needs room for Aeonik's deep descenders (g, p, y) */
h1 .line { display: block; overflow: hidden; padding-bottom: .24em; margin-bottom: -.24em;
}
h1 .reveal { display: inline-block; transform: translateY(135%);
}
h1 em { font-style: normal; color: var(--lime);
}
.sub { display: flex; align-items: center; gap: 28px; margin-top: 26px; flex-wrap: wrap;
}
.lede { max-width: 38ch; margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted);
}
.ctas { display: flex; gap: 10px;
}
.fade-up { opacity: 0; transform: translateY(16px);
}

/* ---------- dock (scroll cue + hint) ---------- */
.dock { display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
/* scroll cue: three pixels lighting in sequence */
.cue { display: inline-flex; align-items: center; gap: 12px; color: rgba(236, 235, 228, .6);
}
.cue:hover { color: var(--bone);
}
.cue-px { display: grid; gap: 3px;
}
.cue-px i { width: 5px; height: 5px; background: rgba(236, 235, 228, .22); animation: cue 1.5s steps(1) infinite;
}
.cue-px i:nth-child(2) { animation-delay: .25s;
}
.cue-px i:nth-child(3) { animation-delay: .5s;
}
@keyframes cue {
0%, 32% { background: var(--lime);
}
33%, 100% { background: rgba(236, 235, 228, .22);
}
}

/* static fallback (no WebGL) */
html.static .hero-track { height: 100vh;
}
html.static .fade-up, html.static h1 .reveal { opacity: 1 !important; transform: none !important;
}
html.static .dock { display: none;
}
@media (max-width: 760px) {
.dock .cue { display: none;
}
.foot { flex-direction: column; align-items: stretch; gap: 0;
}
.hero { max-width: none;
}
h1 { font-size: clamp(40px, 11.8vw, 70px);
}
.sub { flex-direction: column; align-items: stretch; gap: 18px; margin-top: 18px;
}
.lede { font-size: 14px; max-width: 40ch;
}
.ctas .btn.primary { flex: 1; justify-content: space-between;
}
.dock { display: none;
}
.scrim.bottom { height: 60%;
}
}
@media (max-height: 620px) and (min-width: 761px) {
h1 { font-size: clamp(40px, 9vh, 80px);
}
}

/* ---------- 01 studio: copy + a live tile constellation ----------
   The studio lies underneath the 2D art from the very first frame: its wrapper starts at the top of the page
   and the section is sticky, so it stays perfectly still at the top of the screen for the whole hero track
   (the spacer gives it that room), then scrolls on naturally. The wash uncovers it in place. */
.studio-pin { position: relative; z-index: 2; margin-top: -350vh;
}
html:not(.on-paper):not(.static) .studio-pin { pointer-events: none;
} /* still covered: nothing in it is clickable */
.studio-spacer { height: 250vh; pointer-events: none;
}
.studio.section { position: sticky; top: 0; padding-top: clamp(112px, 15vh, 168px);
}
/* the constellation's tiles continue outside the card as a faint dashed grid (pattern set from JS) */
.studio-grid {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background-repeat: repeat;
  -webkit-mask-image: radial-gradient(62% 72% at var(--gx, 70%) var(--gy, 50%), #000 0%, rgba(0, 0, 0, .55) 42%, transparent 82%);
          mask-image: radial-gradient(62% 72% at var(--gx, 70%) var(--gy, 50%), #000 0%, rgba(0, 0, 0, .55) 42%, transparent 82%);
}
.echo {
  position: absolute; left: 0; top: 0; border-radius: 24%; border: 1.5px solid rgba(61, 107, 22, .45);
  background: rgba(189, 232, 111, .14); opacity: 0; transition: opacity 1.2s var(--ease);
}
.echo.is-on { opacity: 1;
}
/* the header rule stops at the copy column (same measure as the lede), leaving the tile grid open */
.studio .sec-head { position: relative; border-bottom: 0;
}
.studio .sec-head::after { content: ''; position: absolute; left: 0; bottom: 0; width: min(44ch, 100%); height: 1px; font-size: 17px; background: var(--ink-line);
}
.studio-main {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center;
  padding: clamp(48px, 9vh, 100px) 0 clamp(56px, 10vh, 110px);
}
.studio-actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; flex-wrap: wrap;
}
.constellation {
  position: relative; justify-self: end; width: min(100%, 600px); aspect-ratio: 1; border-radius: 36px; overflow: hidden;
  background: radial-gradient(110% 90% at 50% 50%, #12301f 0%, var(--forest) 62%); box-shadow: var(--shadow-soft);
}
.ghosts { position: absolute; inset: 0; -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%); mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
}
.tile { position: absolute; border-radius: 24%; transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s;
}
.tile.ghost { border: 1.5px dashed rgba(220, 240, 200, .17); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 8px);
}
.tile.solid { display: grid; place-items: center; background: var(--forest-2); border: 1.5px solid rgba(189, 232, 111, .7); color: var(--lime-hi);
}
.tile.solid svg { width: 38%; height: 38%; opacity: .5; transition: opacity .5s, transform .6s var(--ease);
}
.tile.img { background: var(--forest-2) var(--img) var(--pos, center) / var(--size, cover) no-repeat; border: 1.5px solid rgba(189, 232, 111, .7);
}
.tile.core { display: grid; place-items: center; background: var(--lime-hi); box-shadow: 0 0 70px -12px rgba(189, 232, 111, .55);
}
.tile.core svg { width: 60%; color: var(--forest);
}
.tile.is-on { transform: scale(1.05); border-color: var(--lime-hi); box-shadow: 0 0 0 5px rgba(189, 232, 111, .16), 0 18px 40px -12px rgba(0, 0, 0, .6);
}
.tile.is-on svg { opacity: 1; transform: scale(1.1);
}
.cl { position: absolute; left: 0; top: 0; z-index: 2; display: flex; align-items: flex-start; pointer-events: none; will-change: transform;
}
.cl svg { width: 22px; height: 22px; flex: none; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .4));
}
.cl span { margin: 18px 0 0 -2px; padding: 9px 16px; border-radius: 999px; background: #fff; color: var(--moss); font-size: 15px; font-weight: 500; white-space: nowrap; box-shadow: 0 12px 26px -8px rgba(0, 0, 0, .5);
}
.cl.flip { flex-direction: row-reverse;
}
.cl.flip svg { transform: scaleX(-1);
}
.cl.flip span { margin: 18px -2px 0 0;
}
.principles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink-line);
}
.principles li { display: grid; gap: 12px; align-content: start; padding: 28px 28px 8px 0;
}
.principles li + li { padding-left: 28px; border-left: 1px solid var(--ink-line);
}
.principles svg { width: 30px; height: 30px; color: #3d6b16;
}
.principles h3 { margin: 6px 0 0; font-size: 22px; font-weight: 500; letter-spacing: -.02em;
}
.principles p { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.55; color: var(--ink-soft);
}

/* static fallback (no WebGL) */
html.static .studio-pin { margin-top: 0;
}
html.static .studio-spacer { display: none;
}
html.static .studio.section { position: relative;
}
@media (max-width: 900px) {
.studio-main { grid-template-columns: 1fr; align-items: start;
}
.constellation { justify-self: stretch; width: 100%;
}
.principles { grid-template-columns: 1fr;
}
.principles li, .principles li + li { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--ink-line);
}
}
@media (max-width: 760px) {
.constellation { border-radius: 28px;
}
.cl svg { width: 17px; height: 17px;
}
.cl span { margin-top: 13px; padding: 6px 11px; font-size: 12px;
}
.cl.flip span { margin-top: 13px;
}
}

/* ---------- 02 work: a telemetry feature card + two soft cards ---------- */
.work-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px;
}
.feature {
  position: relative; isolation: isolate; min-height: 700px; border-radius: var(--r-card); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 28px 92px; color: #fff;
}
.feature-bg { position: absolute; inset: 0; z-index: -1;
}
.feature-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 14, 4, .62), transparent 38%);
}
.aerial { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.hud-card {
  position: relative; width: min(100%, 580px); padding: 10px; border-radius: 30px; background: rgba(255, 255, 255, .95); color: var(--moss);
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .7); transition: transform .9s var(--ease);
}
.feature:hover .hud-card { transform: translateY(-6px);
}
.hud-top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 14px 18px;
  background-image: linear-gradient(rgba(13, 27, 7, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(13, 27, 7, .045) 1px, transparent 1px);
  background-size: 22px 22px; border-radius: 22px 22px 0 0;
}
.hud-top h3 { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -.02em;
}
.hud-id { display: block; margin-top: 5px; font-size: 15px; letter-spacing: .03em; color: rgba(13, 27, 7, .55); font-variant-numeric: tabular-nums;
}
.hud-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px;
}
.hud-view { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #3b4a17;
}
.hud-alt {
  position: absolute; left: 12px; top: 12px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 6px;
  background: rgba(20, 24, 12, .55); color: #fff; font-size: 11px; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.glass-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.hud-view.is-glass { background: transparent;
}
.feature-meta { position: absolute; left: 28px; right: 28px; bottom: 26px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
}
.feature-meta p { margin: 8px 0 0; max-width: 40ch; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .82);
}
.feature-meta .pill { background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.link-arrow.light { color: #fff; white-space: nowrap;
}
.work-side { display: grid; gap: 24px;
}
.soft-card {
  position: relative; display: grid; gap: 12px; align-content: start; padding: 22px; border-radius: var(--r-card); background: var(--card);
  box-shadow: var(--shadow-soft); transition: transform .8s var(--ease);
}
.soft-card:hover { transform: translateY(-6px);
}
.sc-top { display: flex; justify-content: space-between; align-items: center;
}
.soft-card h3 { margin: 10px 0 0; font-size: 30px; font-weight: 500; letter-spacing: -.03em;
}
.soft-card p { margin: 0; max-width: 42ch; font-size: 15.5px; line-height: 1.5; color: rgba(13, 27, 7, .46);
}
.sc-media { position: relative; isolation: isolate; height: 220px; margin-top: 6px; border-radius: 22px; overflow: hidden; background: var(--img, none) var(--pos, center) / cover no-repeat;
}
.sc-media::before { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(0, 0, 0, .42), transparent 55%);
}
.loc { position: absolute; left: 16px; bottom: 14px; z-index: 3; display: grid; grid-template-columns: auto 1fr; column-gap: 6px; color: #fff; font-size: 15px; line-height: 1.32;
}
.loc svg { width: 16px; height: 16px; margin-top: 2px;
}
@media (max-width: 1080px) {
.work-grid { grid-template-columns: 1fr;
}
.work-side { grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 760px) {
.work-side { grid-template-columns: 1fr;
}
.feature { min-height: 0; padding: 14px 14px 22px; justify-content: flex-start;
}
.hud-card { border-radius: 24px;
}
.hud-top { flex-direction: column;
}
.hud-chips { justify-content: flex-start;
}
.feature-meta { position: relative; left: auto; right: auto; bottom: auto; flex-direction: column; align-items: flex-start; width: 100%; margin-top: 18px; padding: 0 6px;
}
}

/* ---------- manifesto: a split, offset collage that assembles as it scrolls ---------- */
.manifesto { position: relative; z-index: 2; background: var(--paper); color: var(--moss); padding: 0 var(--pad) clamp(90px, 13vh, 150px); --p: 0;
}
.mf-stage { position: relative; max-width: 1360px; height: clamp(520px, 82vh, 880px); margin: 0 auto; overflow: hidden;
}
.mf-a, .mf-b, .mf-c1, .mf-c2 { position: absolute;
}
.mf-a { left: 0; top: 0; width: 50%; height: 100%; background: url(./hills-sky-DHP7lwkn.png) calc(30% + (1 - var(--p)) * 6%) 62% / cover no-repeat;
}
.mf-b { left: 50%; top: 0; width: 50%; height: 100%; background: linear-gradient(90deg, #f2ebe0 0%, #d9d6c8 38%, #9daf9c 74%, #5d7868 100%);
}
.mf-c1 { left: 25%; top: 26%; width: 25%; height: 48%; background: linear-gradient(90deg, #f2ebe0 0%, #b8bfb2 60%, #6f8a7c 100%); transform: translateX(calc((1 - var(--p)) * -70px));
}
.mf-c2 { left: 50%; top: 26%; width: 25%; height: 48%; background: url(./hills-sky-DHP7lwkn.png) 64% 70% / 230% auto no-repeat; transform: translateX(calc((1 - var(--p)) * 70px));
}
.mf-w { position: absolute; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: calc(1.4em + (1 - var(--p)) * 3em); margin: 0; color: #fff; font-size: 14px; letter-spacing: .02em; opacity: var(--p); text-shadow: 0 1px 10px rgba(0, 0, 0, .18);
}
.mf-w1 { top: 21%;
}
.mf-w2 { top: 77%;
}
.mf-caption { max-width: 1360px; margin: clamp(36px, 6vh, 60px) auto 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 40px; align-items: end;
}
.mf-caption h3 { margin: 0; font-size: clamp(28px, 3vw, 46px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em;
}
.mf-caption p { justify-self: end; margin: 0; max-width: 36ch; font-size: 15px; line-height: 1.55; color: var(--ink-soft);
}
@media (max-width: 900px) {
.mf-caption { grid-template-columns: 1fr; align-items: start;
}
.mf-caption p { justify-self: start;
}
}
@media (max-width: 760px) {
.mf-stage { height: 128vw;
}
.mf-w { font-size: 12px;
}
}

/* ---------- 03 process: a generated field map ---------- */
.map { position: relative; isolation: isolate; height: clamp(540px, 74vh, 780px); border-radius: var(--r-card); overflow: hidden; background: #9fb597; box-shadow: var(--shadow-soft);
}
.map-pan { position: absolute; inset: -14%; transition: transform 1.3s var(--ease);
}
.map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.map-lines { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .26) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .26) 1px, transparent 1px); background-size: 76px 76px;
}
.map-route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
}
.pin {
  position: absolute; left: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 4px 11px 4px 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .88); color: var(--moss); font-size: 12.5px; white-space: nowrap; transform: translate(-50%, -50%);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .4s, box-shadow .4s, padding .4s;
}
/* the number is centred by the grid; the asterisk is pinned to the exact centre so it never sizes the cell */
.pin i { position: relative; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: var(--moss); font-style: normal; font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; transition: width .5s var(--ease), height .5s var(--ease);
}
.pin i svg { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; opacity: 0; transform: scale(.3) rotate(-45deg); transition: opacity .4s, transform .6s var(--ease);
}
.pin.is-active { padding: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.pin.is-active i { width: 66px; height: 66px; background: var(--lime-hi); box-shadow: 0 0 0 10px rgba(189, 232, 111, .28), 0 14px 30px -10px rgba(0, 0, 0, .45); animation: pinPulse 2.4s ease-in-out infinite;
}
.pin.is-active i svg { opacity: 1; transform: none;
}
.pin.is-active i span { opacity: 0;
}
.pin.is-active b { display: none;
}
.pin b { font-weight: 500;
}
@keyframes pinPulse {
50% { box-shadow: 0 0 0 18px rgba(189, 232, 111, .12), 0 14px 30px -10px rgba(0, 0, 0, .45);
}
}
.map-ui { position: absolute; z-index: 3; display: flex; gap: 8px;
}
.map-tools { left: 16px; top: 16px;
}
.map-zoom { right: 16px; top: 16px;
}
.tool, .tool-group { background: rgba(252, 252, 246, .92); border-radius: 12px; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .35);
}
.tool { width: 42px; height: 42px; display: grid; place-items: center; color: var(--moss); font-size: 20px; line-height: 1;
}
.tool-group { display: flex; gap: 2px; padding: 4px;
}
.tool-group button { width: 38px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: rgba(13, 27, 7, .55); transition: background .3s, color .3s;
}
.tool-group button[aria-pressed="true"] { background: #dfe6d0; color: var(--moss);
}
.tool svg, .tool-group svg { width: 17px; height: 17px;
}
.map-legend { position: absolute; z-index: 3; right: 16px; bottom: 84px; display: grid; gap: 7px; margin: 0; padding: 11px 14px; list-style: none; border-radius: 10px; background: rgba(252, 252, 240, .92); font-size: 11.5px; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .3);
}
.map-legend i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--c);
}
.map-card {
  position: absolute; z-index: 3; left: 16px; bottom: 16px; width: min(480px, calc(100% - 32px)); display: grid; grid-template-columns: 150px 1fr; gap: 16px;
  padding: 12px; border-radius: 20px; background: rgba(252, 252, 246, .96); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5);
}
.mc-img { position: relative; min-height: 150px; border-radius: 12px; overflow: hidden; background: var(--img, none) var(--pos, center) / cover no-repeat;
}
.mc-body { padding: 4px 4px 4px 0; transition: opacity .35s, transform .35s var(--ease);
}
.mc-body.is-out { opacity: 0; transform: translateY(8px);
}
.mc-body h3 { margin: 2px 0 8px; font-size: 22px; font-weight: 500; letter-spacing: -.02em;
}
.mc-body p { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(13, 27, 7, .66);
}
.mc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
}
.mc-tags span { padding: 3px 8px; border-radius: 5px; background: #e8ecdc; font-size: 11.5px;
}
.map-next {
  position: absolute; z-index: 3; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 7px 0 20px;
  border-radius: 14px; background: rgba(252, 252, 246, .96); font-size: 16px; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .4);
}
.map-next i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #e3e8d5;
}
@media (max-width: 760px) {
.map { height: 660px;
}
.map-legend { display: none;
}
.pin { padding: 4px;
}
.pin b { display: none;
}
.map-card { grid-template-columns: 92px 1fr; bottom: 84px;
}
.mc-img { min-height: 92px;
}
.map-next { left: 16px; justify-content: space-between;
}
}

/* ---------- 04 contact: brief form + an automation preview ---------- */
.contact { background: var(--sand);
}
.contact-card { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); min-height: 660px; border-radius: 20px; overflow: hidden; background: #fbf9f4; box-shadow: var(--shadow-soft);
}
.cc-left { display: flex; flex-direction: column; gap: 20px; padding: clamp(26px, 4vw, 56px);
}
.cc-left .h2 { font-size: clamp(36px, 3.9vw, 64px);
}
.cc-left .sec-lede { margin: 0; font-size: 16px;
}
.brief { display: grid; gap: 16px; margin-top: auto; padding-top: 12px;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.brief label { display: block;
}
.brief label:not(.opt) > span, .brief legend { display: block; margin-bottom: 8px; padding: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(13, 27, 7, .55);
}
.brief input[type="text"], .brief input[type="email"], .brief textarea {
  width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(13, 27, 7, .14); background: #fff;
  font: inherit; font-size: 15px; color: var(--moss); outline: none; transition: border-color .3s, box-shadow .3s;
}
.brief textarea { height: auto; min-height: 84px; padding: 12px 14px; resize: vertical;
}
.brief input:focus, .brief textarea:focus { border-color: #6f9e24; box-shadow: 0 0 0 4px rgba(169, 214, 58, .25);
}
.brief [aria-invalid="true"] { border-color: #b4552e;
}
.brief fieldset { margin: 0; padding: 0; border: 0; min-width: 0;
}
.opts { display: flex; flex-wrap: wrap; gap: 8px;
}
.opt { position: relative;
}
.opt input { position: absolute; opacity: 0; pointer-events: none;
}
.opt span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(13, 27, 7, .16); background: #fff; font-size: 14px; cursor: pointer; transition: background .3s, color .3s, border-color .3s;
}
.opt input:checked + span { background: var(--moss); border-color: var(--moss); color: var(--paper);
}
.opt input:focus-visible + span { box-shadow: 0 0 0 3px rgba(169, 214, 58, .55);
}
.brief-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px;
}
.form-note { font-size: 13px; color: rgba(13, 27, 7, .55);
}
.form-note.is-error { color: #a1421d;
}
.cc-right { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; padding: 32px;
}
.cc-right .blur-art { inset: -18%;
}
.b1 { right: 7%; top: 0;
}
.b2 { left: 16%; bottom: 0; -webkit-mask-image: linear-gradient(to top, #000 30%, transparent); mask-image: linear-gradient(to top, #000 30%, transparent);
}
.agent { position: relative; z-index: 2; width: min(100%, 450px); padding: 16px 18px 14px; border-radius: 16px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35);
}
.ag-head { display: flex; align-items: center; gap: 10px; font-size: 15px;
}
.ag-head svg { width: 18px; height: 18px;
}
.ag-head time { margin-left: auto; font-variant-numeric: tabular-nums;
}
.ag-steps { display: grid; gap: 11px; margin: 16px 0; padding: 0; list-style: none;
}
.ag-steps li { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 10px; font-size: 14px; opacity: .42; transition: opacity .45s;
}
.ag-steps li.is-run, .ag-steps li.is-done { opacity: 1;
}
.ag-steps li i { position: relative; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .75);
}
.ag-steps li.is-run i { border-top-color: transparent; animation: spin .8s linear infinite;
}
.ag-steps li.is-done i { background: #fff; border-color: #fff;
}
.ag-steps li.is-done i::after { content: ''; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #3d6b16; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg);
}
.ag-steps em { font-style: normal; font-size: 12.5px; opacity: .78; font-variant-numeric: tabular-nums;
}
.ag-bar { display: flex; align-items: center; gap: 12px; font-size: 12px; font-variant-numeric: tabular-nums;
}
.ag-play { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #3d6b16;
}
.ag-play svg { width: 9px; height: 9px; margin-left: 1px;
}
.ag-track { position: relative; flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .35);
}
.ag-track i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--prog, 0%); border-radius: 2px; background: #fff;
}
.ag-track i::after { content: ''; position: absolute; right: -3px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: #fff;
}
@keyframes spin {
to { transform: rotate(360deg);
}
}
@media (max-width: 900px) {
.contact-card { grid-template-columns: 1fr;
}
.cc-right { min-height: 480px;
}
}
@media (max-width: 760px) {
.field-row { grid-template-columns: 1fr;
}
.cc-right { min-height: 420px; padding: 18px;
}
}

/* ---------- footer: a white card over the living 2D art ----------
   The scene is a window; while it is on screen the WebGL canvas moves inside it and renders the 2D moss view.
   Layers, back to front: the art (drifts slowest), the window's inner shade, the hint and button, the card. */
.site-foot { position: relative; z-index: 4; padding: 0 var(--pad) max(var(--pad), env(safe-area-inset-bottom));
}
.foot-scene {
  position: relative; isolation: isolate; max-width: 1360px; height: clamp(560px, 58vw, 820px); margin: 0 auto; border-radius: 32px; overflow: hidden;
}
.foot-scene::before {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(13, 27, 7, .06), inset 0 40px 70px -40px rgba(3, 8, 2, .55), inset 0 -60px 90px -50px rgba(3, 8, 2, .5);
}
#gl.in-foot { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
}
.foot-card {
  position: absolute; left: 50%; top: clamp(20px, 5vw, 64px); z-index: 2; width: min(calc(100% - 40px), 1080px); padding: 28px 28px 20px; border-radius: 24px;
  background: #fff; color: var(--moss); box-shadow: 0 30px 60px -40px rgba(13, 27, 7, .35);
  transform: translate(calc(-50% + var(--fx, 0px)), var(--fy, 0px)); will-change: transform; /* --fx / --fy: parallax, set by the scene script */
}
.foot-hint { position: absolute; left: clamp(20px, 3vw, 36px); bottom: clamp(22px, 3vw, 34px); z-index: 2; text-align: left; pointer-events: none;
}
.foot-top { position: absolute; right: clamp(16px, 3vw, 30px); bottom: clamp(16px, 3vw, 26px); z-index: 2; height: 44px; gap: 10px; font-size: 13.5px;
}
.foot-top svg { width: 14px; height: 14px; transition: transform .5s var(--ease);
}
.foot-top:hover svg { transform: translateY(-3px);
}
@media (max-width: 760px), (pointer: coarse) {
.foot-hint { display: none;
}
} /* touch has no hover to comb with */
.fc-top { display: flex; justify-content: space-between; gap: 40px; padding-bottom: 26px; border-bottom: 1px solid rgba(13, 27, 7, .1);
}
.fc-brand .brand { color: var(--moss);
}
.fc-brand .brand svg { color: var(--moss); filter: none;
}
.fc-brand p { margin: 12px 0 0; font-size: 14px; color: rgba(13, 27, 7, .55);
}
.fc-cols { display: grid; grid-template-columns: repeat(3, auto); gap: 56px;
}
.fc-cols h4 { margin: 0 0 10px; font-size: 14px; font-weight: 600;
}
.fc-cols a { display: block; padding: 4px 0; font-size: 14px; color: rgba(13, 27, 7, .6); transition: color .3s;
}
.fc-cols a:hover { color: var(--moss);
}
.fc-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 18px; font-size: 13px; color: rgba(13, 27, 7, .55);
}
.socials { display: flex; gap: 10px;
}
.socials a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(13, 27, 7, .12); color: var(--moss); transition: background .3s, color .3s;
}
.socials a:hover { background: var(--moss); color: var(--paper);
}
.socials svg { width: 17px; height: 17px;
}

/* static fallback (no WebGL) */
html.static .foot-scene { background: radial-gradient(120% 90% at 50% 80%, #2c5414, #0f2309);
}
@media (max-width: 900px) {
.fc-top { flex-direction: column;
}
.fc-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
}
@media (max-width: 760px) {
.fc-cols { grid-template-columns: 1fr 1fr;
}
.fc-bottom { flex-direction: column; align-items: flex-start;
}
.foot-scene { height: 860px;
}
}

/* ---------- mobile menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: center; gap: 36px;
  padding: 96px var(--pad) var(--pad); background: rgba(7, 13, 4, .86);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s;
}
.menu nav { display: grid; gap: 6px;
}
.menu nav a { font-size: 44px; font-weight: 500; letter-spacing: -.04em;
}
.menu nav a:nth-child(2n) { color: var(--lime);
}
.menu-open .menu { opacity: 1; visibility: visible;
}
.menu .btn { align-self: flex-start;
}

/* ---------- custom cursor ---------- */
/* pure white + difference: the disc inverts whatever is under it (moss turns pink-violet, steel goes dark, lime goes blue) */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: #fff; mix-blend-mode: difference; display: grid; place-items: center;
  opacity: 0; transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), opacity .3s;
}
.cursor span { position: absolute; font-size: 9.5px; font-weight: 600; letter-spacing: .16em; color: #000; opacity: 0; transition: opacity .25s;
}
.cursor.is-logo { width: 84px; height: 84px; margin: -42px 0 0 -42px;
}
.cursor.is-logo span { opacity: 1;
}
.cursor.is-ui { width: 64px; height: 64px; margin: -32px 0 0 -32px;
}
@media (pointer: coarse) {
.cursor { display: none;
}
}
html.static .cursor { display: none;
}