while the whole row stays the hit area. */
.c-row dd a::after{content:"";position:absolute;inset:0}
.c-row-link{transition:background var(--t)}
.c-row-link:hover{background:oklch(19.6% 0.006 70 / .5)}
.c-row-link:hover dt{color:var(--fg)}
.c-row-link:hover dd{text-decoration:underline;text-decoration-color:var(--accent);
text-decoration-thickness:1px;text-underline-offset:6px}
.c-copy{
display:flex;align-items:center;gap:12px;min-height:44px;margin:-8px 0;
font-family:var(--font-display);font-weight:600;
font-size:clamp(16px,1.35vw,21px);letter-spacing:-.015em;color:var(--fg);
}
.c-copy .c-copy-hint{
font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);
padding-bottom:2px;transition:color var(--t),border-color var(--t);
}
.c-copy:hover .c-copy-hint,
.c-copy.is-copied .c-copy-hint{color:var(--accent);border-bottom-color:var(--accent)}
/* ============================================================
FOOTER
============================================================ */
.foot{padding-block:clamp(40px,5vw,64px)}
.foot-top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;
padding-bottom:30px;border-bottom:1px solid var(--line)}
.foot-nav{display:flex;gap:clamp(14px,2vw,30px);flex-wrap:wrap}
.foot-nav a,.foot-docs a{
font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
color:var(--muted);transition:color var(--t);
}
.foot-nav a:hover,.foot-docs a:hover{color:var(--accent)}
.foot-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
padding-top:22px;align-items:center}
.foot-docs{display:flex;gap:18px;flex-wrap:wrap}
/* ============================================================
LIGHTBOX
============================================================ */
.lb{
width:min(1180px,94vw);max-width:94vw;max-height:94svh;
margin:auto;padding:0;border:0;background:transparent;color:var(--fg);
overflow:visible;
}
.lb::backdrop{background:oklch(10% 0.005 70 / .94)}
.lb-in{
position:relative;background:var(--bg);border:1px solid var(--line);
padding:clamp(14px,1.6vw,22px);display:flex;flex-direction:column;
gap:clamp(14px,1.6vw,20px);
}
.lb-media{position:relative;width:100%;aspect-ratio:16/9;background:oklch(0% 0 0);
border:1px solid var(--line)}
.lb-media video{position:absolute;inset:0;width:100%;height:100%;
object-fit:contain;background:oklch(0% 0 0);opacity:1}
.lb-media .surface-media{object-fit:contain}
.lb-close{
position:absolute;z-index:5;width:44px;height:44px;display:grid;place-items:center;
top:calc(clamp(14px,1.6vw,22px) + 12px);right:calc(clamp(14px,1.6vw,22px) + 12px);
border:1px solid oklch(95.5% 0.006 82 / .5);
background:oklch(15% 0.005 70 / .72);color:var(--fg);
transition:background var(--t),border-color var(--t),color var(--t);
}
.lb-close:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.lb-close svg{width:14px;height:14px}
.lb-meta{display:flex;flex-direction:column;gap:10px;padding-bottom:4px}
.lb-meta h3{font-size:clamp(20px,2vw,30px)}
.lb-meta p{color:var(--muted);font-size:clamp(14px,1vw,15.5px);max-width:64ch}
/* ============================================================
REVEAL
============================================================ */
.js [data-reveal]{opacity:0;transform:translateY(16px);
transition:opacity .8s var(--ease),transform .8s var(--ease);
transition-delay:var(--d,0ms)}
.js [data-reveal].is-in{opacity:1;transform:none}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width:1180px){
.nav-links{display:none}
.burger{display:grid}
.ps,.studio,.contact-grid,.band-in{grid-template-columns:minmax(0,1fr)}
.rail-item{--ih:clamp(200px,40vw,320px)}
.svc-row{grid-template-columns:auto minmax(0,1fr);gap:14px 20px}
.svc-out{grid-column:2;text-align:left;padding-top:0}
.studio-side{max-width:620px}
}
@media (max-width:900px){
.sec-head{grid-template-columns:minmax(0,1fr);align-items:start}
.sec-head .lede{max-width:56ch}
.rail-hint{display:none}
.band-list{grid-template-columns:minmax(0,1fr)}
.band-list li:nth-child(even){padding-left:0;border-left:0}
.numbers{grid-template-columns:repeat(2,minmax(0,1fr))}
.num:nth-child(odd){padding-left:0;border-left:0}
}
@media (max-width:600px){
:root{--sec-y:clamp(64px,13vw,96px);--film-w:clamp(250px,80vw,1180px)}
.hero h1{margin:16px 0 18px}
.hero-lede{font-size:15px}
.hero-act{gap:10px}
.hero-act .btn{width:100%;justify-content:center}
.hero-slate{gap:12px;font-size:10px}
.hero-slate .slate:last-child{display:none}
.nav-in{min-height:66px}
.brand b{font-size:13px}
.nav .btn{display:none}
.numbers{grid-template-columns:minmax(0,1fr)}
.num + .num{padding-left:0;border-left:0}
.rail-btn{width:44px;height:44px}
.svc-row{grid-template-columns:minmax(0,1fr);gap:10px}
.svc-i{padding-top:0}
.svc-out{grid-column:1}
.lb-media{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
.js [data-reveal]{opacity:1;transform:none}
.rf{animation:none;transform:none}
}
/* ============================================================
DIRECTOR'S EYE — Frames.
The plates are all portrait, so they run as one horizontal rail
exactly like Characters and World: one shared height, width taken
from each plate's own ratio. The two wider plates (0.7467) read
larger than the four narrow ones (0.5628) — that is the rhythm.
Sized above the other two rails so Frames still leads the screen.
============================================================ */
.vd-frames .rail-item{--ih:clamp(280px,29vw,440px)}
/* Service rows gain one entry point to their detail page. */
.svc-link{
display:inline-flex;align-items:center;gap:8px;margin-top:16px;min-height:34px;
font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
color:var(--fg);border-bottom:1px solid var(--line);padding-bottom:4px;align-self:flex-start;
transition:border-color var(--t),color var(--t);
}
.svc-link:hover{border-color:var(--accent);color:var(--fg)}
.svc-link svg{transition:transform var(--t)}
.svc-link:hover svg{transform:translateX(4px)}
/* ============================================================
INNER PAGES — service detail / case study.
Editorial label-left, content-right blocks. No cards.
============================================================ */
.phero{padding-block:clamp(112px,13vw,178px) clamp(34px,4.4vw,60px)}
.phero .kicker{margin-bottom:20px}
.phero .h1{font-size:clamp(32px,5vw,72px);font-weight:800;letter-spacing:-.04em;line-height:.98}
.phero .lede{margin-top:22px;max-width:52ch;color:var(--muted);
font-size:clamp(15px,1.15vw,18px)}
.phero-act{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:30px}
.blk{padding-block:clamp(38px,5vw,74px);border-top:1px solid var(--line)}
.blk-h{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
gap:clamp(18px,3.4vw,64px);align-items:start}
.blk-label{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.16em;
text-transform:uppercase;color:var(--accent)}
.blk-body h2{font-size:clamp(22px,2.5vw,40px);margin-bottom:18px}
.blk-body p{color:var(--muted);font-size:clamp(14.5px,1.05vw,16.5px);max-width:62ch}
.blk-body p + p{margin-top:14px}
.blk-body strong{color:var(--fg);font-weight:600}
.ticks{margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 30px}
.ticks li{position:relative;padding:12px 0 12px 24px;border-bottom:1px solid var(--line-soft);
font-size:clamp(14px,1vw,15.5px);color:var(--fg)}
.ticks li::before{content:"";position:absolute;left:0;top:20px;width:11px;height:1px;
background:var(--accent)}
.flow{margin-top:26px;border-top:1px solid var(--line)}
.flow li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2vw,30px);
padding:20px 0;border-bottom:1px solid var(--line-soft);align-items:start}
.flow .fn{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--accent);
padding-top:4px}
.flow b{display:block;font-family:var(--font-display);font-weight:700;
font-size:clamp(16px,1.35vw,21px);letter-spacing:-.02em}
.flow span{display:block;margin-top:7px;color:var(--muted);
font-size:clamp(13.5px,1vw,15px);max-width:60ch}
.rel-case{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;
border:1px solid var(--line);background:var(--surface);padding:clamp(20px,2.6vw,34px)}
.rel-case h3{font-size:clamp(17px,1.65vw,25px)}
.rel-case p{margin-top:9px;color:var(--muted);font-size:clamp(13.5px,1vw,15px);max-width:56ch}
/* Labelled placeholder — a real, deliberate slot, never a broken box. */
.ph-slot{
display:grid;place-items:center;text-align:center;gap:8px;
min-height:clamp(150px,20vw,240px);padding:26px;
border:1px dashed var(--line-strong);background:var(--surface);
font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted);line-height:1.8;
}
.ph-slot b{display:block;color:var(--fg);font-weight:500;letter-spacing:.14em}
.cta-end{border-top:1px solid var(--line);padding-block:clamp(54px,7vw,108px);text-align:center}
.cta-end h2{font-size:clamp(26px,3.4vw,52px)}
.cta-end p{margin:18px auto 30px;max-width:48ch;color:var(--muted);
font-size:clamp(14.5px,1.05vw,16.5px)}
.cta-end .phero-act{justify-content:center;margin-top:0}
/* ============================================================
ROOT CHOOSER + 404
============================================================ */
.gate{min-height:100svh;display:grid;place-items:center;padding:var(--gut)}
.gate-in{width:min(780px,100%)}
.gate .h1{font-size:clamp(30px,4.6vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1}
.gate-lede{margin-top:20px;color:var(--muted);font-size:clamp(14.5px,1.1vw,17px);max-width:46ch}
.gate-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);
margin-top:clamp(28px,4vw,46px)}
.gate--404 .gate-opts{grid-template-columns:repeat(3,minmax(0,1fr))}
.gate-opt{display:flex;flex-direction:column;gap:10px;min-height:132px;justify-content:center;
padding:clamp(22px,2.8vw,34px);border:1px solid var(--line-strong);background:var(--surface);
transition:background var(--t),border-color var(--t)}
.gate-opt:hover{background:var(--surface-2);border-color:var(--fg)}
.gate-opt b{font-family:var(--font-display);font-weight:800;
font-size:clamp(20px,2.4vw,32px);letter-spacing:-.025em}
.gate-opt span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.15em;
text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){
.blk-h{grid-template-columns:minmax(0,1fr)}
.rel-case{grid-template-columns:minmax(0,1fr);align-items:start}
}
@media (max-width:600px){
.ticks{grid-template-columns:minmax(0,1fr)}
.gate-opts,.gate--404 .gate-opts{grid-template-columns:minmax(0,1fr)}
.gate-opt{min-height:104px}
}
/* ============================================================
FLOATING CTA — the persistent commercial entry.
Deliberately secondary: an outline control, not a second solid
primary, so the page never shows two primary buttons at once.
It retracts at the first screen and whenever the closing CTA or
the footer is in view, so it never doubles up or covers them.
z-index 50 sits under the drawer (55) and nav (60).
============================================================ */
.float-cta{
position:fixed;z-index:50;
right:calc(var(--gut) * .6);
bottom:calc(var(--gut) * .6 + env(safe-area-inset-bottom, 0px));
display:inline-flex;align-items:center;gap:10px;
min-height:46px;padding:0 20px;
background:oklch(19.6% 0.006 70 / .94);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border:1px solid var(--line-strong);color:var(--fg);
font-family:var(--font-mono);font-size:11px;font-weight:500;
letter-spacing:.14em;text-transform:uppercase;
opacity:0;visibility:hidden;transform:translateY(10px);
transition:opacity var(--t),transform var(--t),visibility var(--t),
background var(--t),border-color var(--t);
}
.float-cta.is-on{opacity:1;visibility:visible;transform:none}
.float-cta:hover{background:var(--surface-2);border-color:var(--fg)}
.float-cta svg{width:13px;height:13px;flex:none;transition:transform var(--t)}
.float-cta:hover svg{transform:translateX(4px)}
@media (max-width:600px){
.float-cta{
right:14px;
bottom:calc(14px + env(safe-area-inset-bottom, 0px));
min-height:44px;padding:0 16px;font-size:10.5px;letter-spacing:.12em;gap:8px;
}
}
/* ============================================================
BACKGROUND ATMOSPHERE
Three restrained devices, all of them flat and static. None of
them sits above content, and none of them competes with a frame:
1. GRAIN a 220px tile of monochrome noise, alpha capped at
5%, laid into the background layer of every large
opaque surface. It only stops the dark base from
reading as flat colour.
2. GLOW one very soft warm pool per accent block, anchored
to a corner and clipped to its own section, so it
reads as light in the room rather than a colour
panel. Derived from --accent at 7.5% peak.
3. TONAL STEP unchanged: the existing --bg / --bg-2 / --bg-3
ladder (15.0 / 18.2 / 21.0) already separates the
section types; the glow only softens the join.
No grids, no particles, no motion, no saturated wash.
Retune the grain by editing slope='.09' inside --grain.
============================================================ */
:root{
--grain: url("data:image/svg+xml,");
/* warm pool, top-right — the house treatment for accent sections */
--glow-a: radial-gradient(58% 58% at 100% 0%,
oklch(78.0% 0.115 78 / .13) 0%,
oklch(78.0% 0.115 78 / .05) 46%,
transparent 100%);
/* mirrored and wider, top-left — used for the bookend blocks */
--glow-b: radial-gradient(62% 62% at 0% 0%,
oklch(78.0% 0.115 78 / .105) 0%,
oklch(78.0% 0.115 78 / .04) 46%,
transparent 100%);
}
body,
.hero,
.section--alt,
.band,
.drawer{
background-image:var(--grain);
background-repeat:repeat;
background-size:220px 220px;
}
/* the glow needs its own stacking context so z-index:-1 lands above the
section's own background but still under every child */
.hero,.section,.band,.phero,.cta-end,.gate{position:relative;z-index:0}
.section--alt::before,
.band::before,
.gate::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-image:var(--glow-a);
background-repeat:no-repeat;
background-position:100% 0%;
background-size:min(980px,86%) min(700px,64%);
}
.phero::before,
.cta-end::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-image:var(--glow-b);
background-repeat:no-repeat;
background-position:0% 0%;
background-size:min(1040px,90%) min(620px,70%);
}
/* The Hero carries a full-bleed frame, so its atmosphere comes from the
image itself — it only gains a low vignette, no colour pool. */
.hero-scrim{
background:
radial-gradient(125% 95% at 50% 40%, transparent 46%, oklch(15.0% 0.005 70 / .34) 100%),
linear-gradient(to top,
oklch(15.0% 0.005 70 / .96) 0%,
oklch(15.0% 0.005 70 / .86) 22%,
oklch(15.0% 0.005 70 / .46) 48%,
oklch(15.0% 0.005 70 / .12) 72%,
oklch(15.0% 0.005 70 / .58) 100%);
}
/* ============================================================
INNER-PAGE SECTION RHYTHM
Service and case pages stack five or six full-width blocks in a
row, so the two-tone ladder alone reads as one flat field. These
pages get a third tone that sits between --bg and --bg-2, plus a
soft lit top edge on every block. Adjacent blocks then differ by
~1.4-1.8 L, which is felt while scrolling but never reads as a
black panel next to a grey one.
The homepage ladder is untouched.
============================================================ */
:root{
--bg-1: oklch(17.4% 0.008 69); /* inner-page block, between --bg and --bg-2 */
--edge: linear-gradient(to bottom,
oklch(23.5% 0.006 70 / .20) 0%,
oklch(23.5% 0.006 70 / 0) 100%);
}
#main .phero,
#main .section,
#main .cta-end{
background-color:var(--bg);
background-image:var(--grain), var(--edge);
background-repeat:repeat, no-repeat;
background-size:220px 220px, 100% 150px;
}
#main .section{background-color:var(--bg-1)}
#main .section--alt{background-color:var(--bg-2)}
/* Auto-drifting rails cannot hold scroll-snap: the browser re-snaps
between frames and fights the drift. Manual drag and the arrows
keep working exactly as before. */
.rail.is-auto{scroll-snap-type:none}
@media (max-width:600px){
/* a large tile wastes nothing on a small screen; keep the pool tighter */
body,.hero,.section--alt,.band,.drawer{background-size:160px 160px}
#main .phero,#main .section,#main .cta-end{background-size:160px 160px, 100% 120px}
.section--alt::before,.band::before,.gate::before,
.phero::before,.cta-end::before{background-size:min(520px,100%) min(420px,70%)}
}