/* additions: hero backdrop, the six "what we do" cards, module tiles, per-page curtains */
.hero .panel { position: relative; }
.hero .bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .55; }
.hero .panel > *:not(.bg) { position: relative; }
.curtain[data-c="work"] { background: var(--ink); color: var(--bg); } .curtain[data-c="plans"] { background: var(--yellow); color: var(--ink); } .curtain[data-c="studio"] { background: var(--blue); } .curtain[data-c="contact"] { background: var(--bg); color: var(--blue); } .curtain[data-c="modules"] { background: #0B1230; color: var(--yellow); } .curtain[data-c="home"] { background: var(--blue); }

/* what we do: six cards, each with a small drawing that moves */
.dos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 30px 10px 0; }
.do { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 18px 18px 20px; display: grid; gap: 12px; min-height: 100%; transition: transform .3s var(--ease), box-shadow .3s; }
.do:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -40px rgb(11 11 12 / .5); }
.do .pic { height: 150px; border-radius: 6px; background: var(--bg); display: grid; place-items: center; overflow: hidden; position: relative; }
.do svg { width: 86%; height: 82%; overflow: visible; }
.do svg * { vector-effect: non-scaling-stroke; }
.do svg .s { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.do svg .b { fill: var(--blue); } .do svg .y { fill: var(--yellow); } .do svg .g { fill: var(--rule); }
.do svg text { font: 500 11px 'Geist Mono', monospace; fill: var(--grey); }
.do h3 { font: 500 1.15rem/1.15 var(--f); letter-spacing: -.02em; }
.do p { font-size: 14px; color: var(--grey); }
.do .lab { color: var(--blue); }
.js:not(.still) .do svg .s[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
@media (max-width: 960px) { .dos { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .dos { grid-template-columns: 1fr; } }

/* module tiles */
.mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 30px 10px 0; }
.mod { background: #fff; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.mod.wide { grid-column: span 2; } .mod.tall { grid-row: span 2; }
.mod .cv { position: relative; aspect-ratio: 4 / 3; background: #0B0B0C; touch-action: none; }
.mod.wide .cv { aspect-ratio: 2 / 1; } .mod.tall .cv { aspect-ratio: auto; min-height: 100%; }
.mod canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mod .hint { position: absolute; left: 12px; bottom: 10px; font: 400 11px var(--m); color: rgb(244 242 237 / .8); background: rgb(11 11 12 / .45); padding: 4px 8px; border-radius: 999px; pointer-events: none; }
.mod .hint.dark { color: var(--ink); background: rgb(244 242 237 / .7); }
.mod .ctl { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; }
.mod .ctl button { height: 26px; padding: 0 10px; border-radius: 999px; background: rgb(244 242 237 / .85); color: var(--ink); font: 500 10px var(--m); letter-spacing: .06em; text-transform: uppercase; } .mod .ctl button.on, .mod .ctl button:hover { background: var(--yellow); }
.mod .ctl button i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; margin-right: 4px; border: 1px solid rgb(11 11 12 / .3); }
.mod .body { padding: 14px 16px 16px; display: grid; gap: 8px; align-content: start; }
.mod .body h3 { font: 500 1.05rem/1.2 var(--f); letter-spacing: -.02em; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.mod .body h3 small { font: 400 11px var(--m); color: var(--grey); }
.mod .body p { font-size: 13.5px; color: var(--grey); }
.mod .meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font: 400 11px/1.5 var(--m); color: var(--grey); } .mod .meta b { font-weight: 400; color: var(--ink); }
.mod .body a { font: 500 11px var(--m); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.mod .body a::after { content: ' ↗'; }
.js:not(.still) .mod { opacity: 0; transform: translateY(16px) scale(.98); }
@media (max-width: 960px) { .mods { grid-template-columns: repeat(2, 1fr); } .mod.wide { grid-column: span 2; } } @media (max-width: 600px) { .mods { grid-template-columns: 1fr; } .mod.wide, .mod.tall { grid-column: auto; grid-row: auto; } .mod.tall .cv { aspect-ratio: 4 / 3; } }
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 30px 10px 0; }
.strip .mod .cv { aspect-ratio: 1; }
@media (max-width: 960px) { .strip { grid-template-columns: repeat(2, 1fr); } }

/* black hole hero: a 220vh runway with one sticky stage; the hole sits above centre, copy anchors bottom-left */
.holehero { position: relative; height: 220vh; background: #030304; margin-top: 38px; color: #ECE8E1; }
.holehero .hstage { position: sticky; top: 38px; height: calc(100svh - 38px); overflow: hidden; }
.holehero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.holefallback { position: absolute; inset: 0; background: radial-gradient(40% 40% at 50% 38%, #1E3FAE55, transparent 70%), #030304; opacity: 0; transition: opacity .6s; }
.holehero.nogl .holefallback { opacity: 1; } .holehero.nogl canvas { display: none; }
.holehero .hui { position: absolute; inset: 0; padding: 20px 20px 28px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.holehero .hui a { pointer-events: auto; }
.holehero .htop { display: flex; justify-content: space-between; gap: 16px; } .holehero .lab { color: rgb(236 232 225 / .7); }
.holehero .hh1 { position: absolute; left: 20px; bottom: 78px; font-size: clamp(3rem, 8.4vw, 8.6rem); line-height: .9; letter-spacing: -.05em; transform-origin: 30% 0; will-change: transform; font-weight: 500; }
.holehero .hh1 em { font-style: normal; color: var(--yellow); }
.holehero .hlede { position: absolute; right: 20px; bottom: 78px; width: min(380px, 40vw); display: grid; gap: 16px; justify-items: start; font-size: 15px; } .holehero .hlede p { color: rgb(236 232 225 / .78); }
.holehero .hhint { position: absolute; left: 20px; bottom: 24px; }
@media (max-width: 860px) { .holehero .hh1 { font-size: clamp(2.8rem, 15vw, 5rem); bottom: 190px; } .holehero .hlede { left: 20px; right: 20px; width: auto; bottom: 62px; } .holehero .hhint { display: none; } .holehero .htop span:last-child { display: none; } }
@media (prefers-reduced-motion: reduce) { .holehero { height: 100svh; } }
.js:not(.still) .holehero .hh1 { visibility: hidden; }

/* premium showpieces: floating motion cards, Hōsen featured */
.float-stage { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(10, minmax(64px, 7.2vw)); gap: 34px 22px; margin: 90px 20px 0; perspective: 1200px; }
.fcard { position: relative; display: block; border-radius: 10px; overflow: hidden; background: #111; box-shadow: 0 40px 70px -40px rgb(11 11 12 / .55); transform-style: preserve-3d; will-change: transform; animation: bob 7s ease-in-out infinite; animation-delay: calc(var(--i) * -.9s); }
.fcard.feat { grid-area: 1 / 1 / 6 / 7; animation-duration: 9s; }
.fcard:nth-child(2) { grid-area: 1 / 7 / 3 / 10; } .fcard:nth-child(3) { grid-area: 1 / 10 / 3 / 13; }
.fcard:nth-child(4) { grid-area: 3 / 7 / 6 / 10; } .fcard:nth-child(5) { grid-area: 3 / 10 / 6 / 13; }
.fcard:nth-child(6) { grid-area: 6 / 1 / 8 / 4; } .fcard:nth-child(7) { grid-area: 6 / 4 / 8 / 7; } .fcard:nth-child(8) { grid-area: 6 / 7 / 8 / 10; } .fcard:nth-child(9) { grid-area: 6 / 10 / 8 / 13; }
.fcard:nth-child(10) { grid-area: 8 / 1 / 11 / 6; } .fcard:nth-child(11) { grid-area: 8 / 6 / 11 / 13; }
.fcard .shot { position: absolute; inset: 0; background-size: cover; background-position: top center; transition: transform .8s var(--ease); pointer-events: none; }
.fcard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgb(0 0 0 / .65)); pointer-events: none; }
.fcard:hover .shot { transform: scale(1.05); }
.fcard .cap { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; display: grid; gap: 2px; color: #fff; pointer-events: none; }
.fcard .cap b { font: 500 1.05rem/1.1 var(--f); letter-spacing: -.02em; } .fcard.feat .cap b { font-size: clamp(1.6rem, 3vw, 2.6rem); }
.fcard .cap i { font: 400 11px var(--m); font-style: normal; opacity: .8; } .fcard .cap em { font: 500 10px var(--m); font-style: normal; text-transform: uppercase; letter-spacing: .1em; color: var(--yellow); }
.fcard .badge { position: absolute; z-index: 2; top: 14px; left: 14px; font: 500 10px/1 var(--m); letter-spacing: .1em; text-transform: uppercase; background: var(--yellow); color: var(--ink); padding: 7px 9px; border-radius: 999px; }
@media (max-width: 860px) { .float-stage { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: 34vw; gap: 14px; margin: 24px 10px 0; } .fcard, .fcard[class] { grid-area: auto !important; } .fcard.feat { grid-column: 1 / -1 !important; grid-row: span 2 !important; } }
@media (prefers-reduced-motion: reduce) { .fcard { animation: none; } }
/* deterrents: no drag, no select, no long-press save on the showpieces */
[data-guard], [data-guard] * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }

/* headline: condensed capitals lit from the disk, gold fading to bronze */
.holehero .hh1 { font-family: 'Instrument Sans', var(--f); font-weight: 600; font-stretch: 75%; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(3.4rem, 10vw, 10.5rem); line-height: .84; background: linear-gradient(180deg, #FFF4DC 0%, #F2C27A 45%, #8C5A2E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.holehero .hh1 em { color: transparent; }

/* header groups on the live pages: two or three links per column, spaced */
header .hn { display: flex; gap: 18px; align-items: center; padding: 0 10px; }
header .hn a.xs { color: var(--grey); }
@media (max-width: 760px) { header .hn { gap: 12px; padding: 0; } header .hn a.xs { display: none; } }

/* ===== v2.16 motion set ===== */

/* 1 · premium takeover: one sticky screen per demo, every motion is maths on --p (0 → 1 across the item) */
.tk { margin-top: 90px; }
.tk-item { height: 260vh; position: relative; }
.tk-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--bg);
  opacity: min(1, calc(var(--p) / .06)); }
.tk-bg { position: absolute; inset: 0; background-size: cover; background-position: center top;
  transform: scale(calc(1.18 - .18 * var(--p))); will-change: transform; }
.tk-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgb(3 3 4 / 0) 30%, rgb(3 3 4 / .45));
  opacity: calc(1 - var(--p)); }
.tk-content { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  opacity: calc(1 - max(0, (var(--p) - .8) / .2)); }
.tk-glow { position: absolute; width: min(70vw, 70vh); fill: #F4F2ED; filter: blur(46px);
  transform: scale(calc(max(0, (var(--p) - .3) / .7) * 3.1)) rotate(calc(var(--p) * 40deg)); will-change: transform; }
.tk-text { position: relative; text-align: center; color: var(--ink);
  transform: scale(calc(max(0, (var(--p) - .3) / .7) * 2.6)); will-change: transform; }
.tk-text h3 { font: 600 clamp(2rem, 4.4vw, 4rem)/.9 'Instrument Sans', var(--f); font-stretch: 75%; text-transform: uppercase; letter-spacing: -.02em; }
.tk-k, .tk-d { font: 500 9px/1.4 var(--m); letter-spacing: .06em; text-transform: lowercase; }
.tk-k { color: var(--blue); margin-bottom: 6px; } .tk-d { color: var(--grey); margin-top: 6px; }
.tk-link { position: absolute; left: 20px; bottom: 22px; z-index: 2; height: 40px; padding: 0 18px; display: inline-flex; align-items: center; gap: 10px;
  border-radius: 999px; background: var(--yellow); color: var(--ink); font: 500 12px var(--m); letter-spacing: .08em; text-transform: uppercase;
  opacity: calc(1 - max(0, min(1, (var(--p) - .6) / .25))); }
.tk-wash { position: absolute; inset: 0; background: var(--bg); pointer-events: none; opacity: max(0, calc((var(--p) - .94) / .06)); }
@media (prefers-reduced-motion: reduce) {
  .tk-item { height: auto; } .tk-sticky { position: relative; height: 80vh; opacity: 1; }
  .tk-bg { transform: none; } .tk-glow { transform: scale(1.4); } .tk-text { transform: scale(1.2); } .tk-content, .tk-link { opacity: 1; } .tk-wash, .tk-shade { display: none; }
}

/* 2 · letter cascade on section headings: letters drop in, two of them flash cobalt and sun, they hop under the cursor */
.js:not(.still) .cas { visibility: hidden; }
.cas .w { white-space: nowrap; display: inline-block; }
.cas .l { display: inline-block; opacity: 0; }
.cas.play .l { animation: casIn .72s cubic-bezier(.4, 0, .2, 1) both; animation-delay: calc(var(--i) * 22ms); }
.cas.play .l[data-m] { animation-name: casMagic; }
.cas .l.hop { animation: casHop .5s cubic-bezier(.3, 1.4, .5, 1) both !important; opacity: 1; }
@keyframes casIn { from { opacity: 0; transform: translateY(-.14em); } to { opacity: 1; transform: none; } }
@keyframes casMagic { 0% { opacity: 0; transform: translateY(-.14em); color: var(--mc); } 60% { opacity: 1; transform: none; color: var(--mc); } 100% { opacity: 1; transform: none; } }
@keyframes casHop { 40% { transform: translateY(calc(-.16em / var(--mass, 1))); color: var(--blue); } 100% { transform: none; opacity: 1; } }
.still .cas .l, .cas.done .l { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cas .l { opacity: 1 !important; animation: none !important; } }

/* 3 · footer spark grid: cells light up under the cursor in cobalt and sun, then fade */
footer.foot { position: relative; padding-top: 170px; overflow: hidden; }
footer.foot > :not(canvas) { position: relative; z-index: 1; }
footer.foot .sparks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* 4 · page change: a diagonal soft-edged wipe instead of the sliding curtain */
.curtain { transform: none !important; --w: -25;
  -webkit-mask-image: linear-gradient(to bottom right, #000 calc(var(--w) * 1%), transparent calc(var(--w) * 1% + 22%));
  mask-image: linear-gradient(to bottom right, #000 calc(var(--w) * 1%), transparent calc(var(--w) * 1% + 22%)); }
.curtain[data-dir="out"] { -webkit-mask-image: linear-gradient(to top left, #000 calc(var(--w) * 1%), transparent calc(var(--w) * 1% + 22%));
  mask-image: linear-gradient(to top left, #000 calc(var(--w) * 1%), transparent calc(var(--w) * 1% + 22%)); }

/* ===== v2.16: the header, paper and headings of the new home page, carried to every page ===== */
:root { --bg: #FBFAF7; }
header.jnav { position: fixed; z-index: 30; inset: 0 0 auto 0; height: 68px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(16px, 3vw, 40px);
  background: rgb(251 250 247 / .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #E4E0D6; }
header.jnav a { font: 400 15px/1 'Geist', var(--f); }
header.jnav a::after, header.jnav a.on::after, header.jnav a:hover::after { display: none; }
header.jnav .jbrand { font: 700 17px/1 'Times New Roman', Times, 'Liberation Serif', serif; color: var(--ink); justify-self: start; }
header.jnav .jbrand::before { content: none; }
header.jnav .jlinks { display: flex; gap: 28px; }
header.jnav .jlinks a { color: rgb(11 11 12 / .56); transition: color .2s; }
header.jnav .jlinks a:hover, header.jnav .jlinks a.on { color: var(--ink); }
header.jnav .jacts { display: flex; gap: 8px; justify-self: end; }
header.jnav .jbtn { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; font: 500 15px/1 'Geist', var(--f); transition: background-color .2s; }
header.jnav .jbtn.soft { background: #ECE9E1; } header.jnav .jbtn.soft:hover { background: #E3DFD4; }
header.jnav .jbtn.ink { background: var(--ink); color: #fff; } header.jnav .jbtn.ink:hover { background: #2A2A2F; }
#tl main { padding-top: 30px; }
#tl .ask { display: none; }
footer .jbrand { font: 700 1em/1 'Times New Roman', Times, 'Liberation Serif', serif; color: var(--ink); }
#tl :is(h1, h2, h3, .big) { font-family: 'Instrument Sans', var(--f); }
@media (max-width: 900px) { header.jnav { grid-template-columns: 1fr auto; } header.jnav .jlinks { display: none; } header.jnav .jbtn.soft { display: none; } }

/* v2.16.2: the home page's type on every page, and no grid lines behind the content */
.lines { display: none !important; }
#tl :is(h1, h2, h3, .big, .st, .facts b, .idx .t, .card h3, .card .price, .slider output, .step .num, .mq .row, .nextpage a, .end h2, .hero h1),
.curtain { font-family: 'Instrument Sans', 'Geist', system-ui, sans-serif; font-weight: 500; }
#tl :is(h1, h2, .big, .st, .end h2, .hero h1) { letter-spacing: -.035em; }
body { font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; }
/* descriptive copy reads in Geist like the home page; mono stays only for the small one-line labels */
#tl p.lab { font: 400 15px/1.55 'Geist', system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: rgb(11 11 12 / .6); }
#tl .panel p.lab, #tl .blue p.lab { color: inherit; opacity: .78; }
/* all running text follows the home page: Geist everywhere except the headings */
#tl { --m: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; }
#tl :is(.lab, .mono, small, .tag, .n, .d, .num + *, figcaption) { letter-spacing: 0; }
#tl p:not(.lab) { font-family: 'Geist', system-ui, sans-serif; }