:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
/* Bricolage Grotesque, Figtree and JetBrains Mono: SIL Open Font License 1.1 (see /fonts/OFL-*.txt).
   Served from this site; latin and latin-ext subsets from Google Fonts. */
@font-face {font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-latin-ext.1d04719f13.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-latin.85f55a58a3.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/figtree-latin-ext.f153aa07c1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/figtree-latin.8330490a01.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-ext.9c38cb2d0d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin.2c32b9b3ee.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{
  color-scheme:dark;
  --bg-0:#0A0A09; --bg-1:#151410;
  --text-hi:#F5F2E9; --text-mid:#9A958A; --text-lo:#6C675C;
  --yellow:#FFD400; --yellow-300:#FFE566; --yellow-700:#B89600; --ink:#0A0A09;
  --tint:rgba(255,212,0,.08);
  --chrome:rgba(10,10,9,.82);
  --hairline:rgba(245,242,233,.15);
  --divider:rgba(245,242,233,.12);
  --stroke-10:rgba(245,242,233,.10);
  --paper-30:rgba(245,242,233,.3);
  --ink-70:rgba(10,10,9,.7);
  --ink-30:rgba(10,10,9,.3);
  --ink-60:rgba(10,10,9,.6);
  --ink-50:rgba(10,10,9,.5);
  --ink-0:rgba(10,10,9,0);
  --ink-68:rgba(10,10,9,.68);
  --glow-c:rgba(255,212,0,.35);
  --glow-0:rgba(255,212,0,0);
  --radius:8px; --control:44px;
  --gutter:48px; --rhythm:110px; --measure:480px; --nav:69px;
  --calm:cubic-bezier(.2,.7,.1,1);
  --t-enter:350ms; --t-hover:240ms;
  --display:"Bricolage Grotesque","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --body:"Figtree","Avenir Next","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;
}
@media (max-width:760px){:root{--gutter:20px;--rhythm:72px}}
@media (max-width:480px){:root{--gutter:16px}}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + env(safe-area-inset-top,0px) + 16px)}
html,body{overflow-x:clip}
body{background:var(--bg-0);color:var(--text-hi);font:400 17px/1.55 var(--body);margin:0;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
*,*::before,*::after{box-sizing:border-box}
h1,h2,h3,h4{margin:0;font-family:var(--display);text-wrap:balance}
p,figure,ul,dl{margin:0}
img,svg,canvas{max-width:100%}
a:focus-visible,button:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
::selection{background:var(--yellow);color:var(--ink)}
.band ::selection{background:var(--ink);color:var(--yellow)}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}
.skip{position:fixed;left:var(--gutter);top:calc(var(--nav) + env(safe-area-inset-top,0px) + 12px);z-index:60;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus-visible{width:auto;height:var(--control);overflow:visible;clip-path:none;display:inline-flex;align-items:center;padding:0 20px;background:var(--yellow);color:var(--ink);font:600 15px/1 var(--body);border-radius:var(--radius);text-decoration:none}

/* ---- frame ---- */
.page{padding-inline:var(--gutter);padding-top:var(--nav)}
.inner{max-width:1280px;margin-inline:auto}
.section{padding-block:var(--rhythm)}
.section--line > .inner{border-top:1px solid var(--divider);padding-top:var(--rhythm)}
.section--line{padding-top:0}

/* ---- type ---- */
.kicker{font:600 14px/1.4 var(--body);text-transform:uppercase;letter-spacing:.2em;color:var(--yellow)}
.note{font:400 11px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--text-mid);font-variant-numeric:tabular-nums}
.punch{color:var(--yellow)}
.link{color:var(--text-hi);text-decoration:none;transition:color var(--t-hover) var(--calm)}
.link:hover{color:var(--yellow)}
.link:active{color:var(--yellow-700)}
.wordmark{font:700 20px/1 var(--display);letter-spacing:-.01em;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ---- controls ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control);padding:0 19px;border:1px solid transparent;border-radius:var(--radius);font:600 15px/1 var(--body);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background var(--t-hover) var(--calm),color var(--t-hover) var(--calm),box-shadow var(--t-hover) var(--calm)}
.btn--hazard{background:var(--yellow);color:var(--ink)}
.btn--hazard:hover{background:var(--yellow-300)}
.btn--hazard:active{background:var(--yellow-700)}
.btn--ghost{background:transparent;color:var(--text-hi);box-shadow:inset 0 0 0 1px var(--paper-30)}
.btn--ghost:hover{color:var(--yellow);box-shadow:inset 0 0 0 1px var(--yellow)}
.btn--ghost:active{color:var(--yellow-700);box-shadow:inset 0 0 0 1px var(--yellow-700)}
.chip{display:inline-flex;align-items:center;height:28px;padding:0 11px;border:1px solid transparent;border-radius:var(--radius);box-shadow:inset 0 0 0 1px var(--hairline);font:400 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--text-hi);white-space:nowrap}
.chip .case{text-transform:none}

/* ---- marks ---- */
.mark-svg{display:block;flex:none}
.mark-svg path{fill:none;stroke:var(--yellow);stroke-linecap:round;stroke-linejoin:round}

/* ---- nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:calc(var(--nav) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--gutter) 0;background:var(--chrome);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--divider)}
.nav__in{max-width:1280px;margin-inline:auto;height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.lockup{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--text-hi);min-width:0;flex:0 1 auto;padding-block:5px;margin-block:-5px}
.nav__links{display:flex;align-items:center;gap:28px;flex:none}
.nav__links a:not(.btn){font:500 14px/20px var(--body);color:var(--text-mid);text-decoration:none;padding-block:12px;margin-block:-12px;transition:color var(--t-hover) var(--calm)}
.nav__links a:not(.btn):hover{color:var(--text-hi)}
@media (max-width:640px){.nav__links{gap:16px}.nav__links a:not(.btn){display:none}}
@media (max-width:359px){.nav__in{gap:12px}.wordmark{font-size:18px}.nav .btn{padding:0 13px}}

/* ---- hero ---- */
.hero{padding-block:96px 110px}
.hero > .inner{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:center}
.hero__title{max-width:620px;display:flex;flex-direction:column;align-items:flex-start;gap:24px;min-width:0}
.rule{width:56px;height:3px;background:var(--yellow);transform-origin:left center;transform:scaleX(1)}
.hero h1{font-size:clamp(44px,6.4vw,92px);line-height:.98;font-weight:800;letter-spacing:0}
.lead{font-size:19px;line-height:1.55;color:var(--text-mid);max-width:var(--measure)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px}
.mark{justify-self:end;width:min(620px,43vw);max-width:100%;min-width:0}
.mark__box{position:relative;aspect-ratio:1;width:100%;max-width:100%;--glow:.12}
.mark__box::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,var(--glow-c) 0%,var(--glow-0) 70%);opacity:var(--glow);pointer-events:none}
.mark__static,.mark__live{position:absolute;inset:0;width:100%;height:100%;display:block}
.mark__static path{vector-effect:non-scaling-stroke}
.mark.is-live .mark__static{display:none}
.mark:not(.is-live) .mark__live{visibility:hidden}
.mark__live{touch-action:pan-y}
.plate{margin-top:12px;display:flex;justify-content:flex-end;font:400 11px/1.5 var(--mono);color:var(--text-mid);text-transform:uppercase;letter-spacing:.06em}
.plate__toggle{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--text-mid);background:none;border:0;padding:14px 0;margin-block:-14px;cursor:pointer;transition:color var(--t-hover) var(--calm)}
.plate__toggle:hover{color:var(--text-hi)}
.plate__toggle.is-wait{visibility:hidden}
/* the sting's pre-state (JS sets .sting on the root element before the first frame, then drives the beats per frame) */
.sting .rule{transform:scaleX(0)}
.sting .nav .wordmark{letter-spacing:.06em}
.sting .mark__box{--glow:0}
@media (min-width:960px){.hero__title{grid-column:1;grid-row:1}.mark{grid-column:2;grid-row:1}}
@media (max-width:1199px){.mark{width:40vw}}
@media (max-width:959px){
  .hero{padding-block:48px 72px}
  .hero > .inner{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .mark{width:min(100%,480px);justify-self:start}
  .hero__title{max-width:none}
  .hero h1{font-size:clamp(44px,11vw,92px)}
  .lead{font-size:17px}
  .hero__ctas{flex-direction:column;align-items:stretch;align-self:stretch}
}
@media (max-width:389px){.hero .kicker .nowrap{white-space:normal}}

/* ---- contents strip (phones) ---- */
.contents{display:none}
.contents a{color:var(--text-mid)}
.contents .grp{display:inline-flex;align-items:center;column-gap:20px;white-space:nowrap}
@media (max-width:640px){
  .contents{display:flex;flex-wrap:wrap;align-items:center;column-gap:20px;row-gap:4px;min-height:44px;border-block:1px solid var(--divider);padding-block:8px}
  .contents a{font:400 11px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.2em;color:var(--text-mid);text-decoration:none;padding-block:14px;transition:color var(--t-hover) var(--calm)}
  .contents a:hover{color:var(--text-hi)}
  .contents .sep{color:var(--text-lo);font:400 11px/1.5 var(--mono)}
}

/* ---- section heads ---- */
.head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px 48px;margin-bottom:48px}
.head__title{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}
.head h2{font-size:48px;line-height:52px;font-weight:700}
.head .line{font-size:17px;line-height:1.55;color:var(--text-mid);max-width:var(--measure)}
@media (max-width:760px){
  .head{grid-template-columns:minmax(0,1fr);gap:16px}
  .head .note{justify-self:start}
  .head h2{font-size:clamp(36px,9vw,48px);line-height:1.08}
}

/* ---- work ---- */
.cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cell + .cell{border-left:1px solid var(--divider)}
.cell{position:relative;overflow:hidden;background:var(--bg-0);padding:32px;display:flex;flex-direction:column;gap:16px;min-width:0;transition:background var(--t-hover) var(--calm)}
.cell:hover{background:var(--bg-1)}
.cell > :not(.numeral){position:relative}
.numeral{position:absolute;top:-24px;right:16px;font:800 clamp(150px,12.5vw,180px)/1 var(--display);color:transparent;-webkit-text-stroke:1px var(--stroke-10);pointer-events:none;user-select:none;letter-spacing:-.02em}
.cell h3{font-size:30px;line-height:1.1;font-weight:700}
.cell .q{font-size:17px;line-height:1.4;font-weight:500;color:var(--text-hi)}
.cell .desc{font-size:15px;line-height:1.5;color:var(--text-mid)}
.cell .q,.cell .desc{max-width:var(--measure)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.spec{display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:12px;row-gap:8px;font:400 11px/1.5 var(--mono);border-top:1px solid var(--divider);padding-top:12px;letter-spacing:.04em}
.spec > div{display:contents}
.spec dt{text-transform:uppercase;color:var(--text-mid);font-weight:600}
.spec dd{margin:0;color:var(--text-mid);min-width:0;overflow-wrap:anywhere}
.links{margin-top:auto;padding-top:8px;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px;line-height:1.6;font-weight:500}
.links .link{padding-block:10px;margin-block:-10px}
@media (max-width:860px){.cells{grid-template-columns:minmax(0,1fr)}.cell + .cell{border-left:0;border-top:1px solid var(--divider)}}
@media (max-width:760px){.cell{padding:24px 20px}.numeral{font-size:120px;top:-16px}.cell h3{font-size:26px}}


/* ---- about ---- */
.about{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}
.studio{grid-template-columns:112px minmax(0,1fr);row-gap:14px;font-size:13px;padding-top:20px;margin-top:4px}
.studio dd{color:var(--text-hi)}
.about__text{display:flex;flex-direction:column;gap:16px;min-width:0}
.about__text p{max-width:var(--measure);color:var(--text-hi)}
.tint{margin-top:16px;max-width:var(--measure);background:var(--tint);border-top:3px solid var(--yellow);border-radius:0 0 8px 8px;padding:24px;font:700 22px/1.3 var(--display);color:var(--text-hi);text-wrap:balance}
@media (max-width:899px){
  .about{grid-template-columns:minmax(0,1fr);gap:40px}
}

/* ---- contact band (the one K2 surface) ---- */
.band{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);padding-block:56px;background:var(--yellow);color:var(--ink);text-align:center}
.band__in{max-width:1120px;margin-inline:auto}
.band .kicker{color:var(--ink-70)}
.band h2{font-size:clamp(36px,3.7vw,52px);line-height:1.02;font-weight:800;margin-top:16px;color:var(--ink)}
.copyrow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 16px;margin-top:28px}
.addr{font:400 20px/1.4 var(--mono);color:var(--ink);text-decoration:none;user-select:all;overflow-wrap:anywhere;padding-block:8px;margin-block:-8px;border-bottom:1px solid var(--ink-30);transition:border-color var(--t-hover) var(--calm);min-width:0}
.addr:hover{border-color:var(--ink)}
.copy{height:44px;padding:0 19px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ink);font:600 15px/1 var(--body);box-shadow:inset 0 0 0 1px var(--ink-50);cursor:pointer;transition:background var(--t-hover) var(--calm),color var(--t-hover) var(--calm),box-shadow var(--t-hover) var(--calm);min-width:92px}
.copy:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.copy:active{background:var(--ink);color:var(--text-hi)}
.band a:focus-visible,.band button:focus-visible{outline-color:var(--ink)}
.band .small{margin-top:16px;font-size:14px;line-height:1.4;color:var(--ink-70)}
@media (max-width:760px){.band{padding-block:48px}.band h2{font-size:36px}.addr{font-size:17px;padding-block:11px;margin-block:-11px}}
@media (max-width:480px){.copy{flex-basis:100%}.band h2{font-size:min(32px,8.3vw)}}

/* ---- footer ---- */
.foot > .inner{border-top:1px solid var(--divider);padding-block:48px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.foot .wordmark{font-size:27px}
.foot .lockup{gap:10px;padding-block:8px;margin-block:-8px}
.foot__links{display:flex;flex-wrap:wrap;gap:16px 24px}
.foot__links a{font:500 14px/20px var(--body);color:var(--text-mid);text-decoration:none;padding-block:12px;margin-block:-12px;transition:color var(--t-hover) var(--calm)}
.foot__links a:hover{color:var(--text-hi)}
.credit{flex-basis:100%;font:400 11px/1.5 var(--mono);color:var(--text-mid);letter-spacing:.04em}

/* ---- entrances (transform only; resting state is the final one) ---- */
.rise--pre{transform:translateY(16px)}
.rise--in{transform:none;transition:transform var(--t-enter) var(--calm)}
.cell.rise--in{transition:transform var(--t-enter) var(--calm),background var(--t-hover) var(--calm)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise--pre{transform:none}
  *,*::before,*::after{transition:none!important}
}