@font-face { font-family: 'Hiragino'; src: url('assets/fonts/hiragino-w3.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Hiragino'; src: url('assets/fonts/hiragino-w6.otf') format('opentype'); font-weight: 700; font-display: swap; }
:root { color-scheme: light; font-family: 'Hiragino', serif; background: #fff; color: #161616; --logo-width: min(21.4vw, 30svh, 342px); --coral: #ff5948; }
* { box-sizing: border-box; }
body { margin: 0; overscroll-behavior-y: none; }
[hidden] { display: none !important; }
.view.measuring { display: block !important; visibility: hidden; position: fixed; inset: 0; pointer-events: none; }
.cover { height: 100svh; position: relative; }
.identity { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; padding: 0 12px; }
.logo-slot { display: block; width: var(--logo-width); aspect-ratio: 1288 / 1256; flex-shrink: 0; }
h1 { font-size: clamp(23px, 3.4vw, 54px); line-height: 1.15; letter-spacing: -.055em; font-weight: 400; margin: 0; text-align: center; }
.brand { position: fixed; inset: 0; z-index: 10; pointer-events: none; visibility: hidden; }
body.ready .brand { visibility: visible; }
.logo-layer { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: top left; will-change: transform; backface-visibility: hidden; }
.logo-layer img { position: absolute; width: 272.360248%; height: auto; max-width: none; left: -86.645963%; top: -46.815287%; }
.studio-header { padding: 4.6svh 4.5vw 0; }
.small-logo { display: block; width: clamp(66px, 7.5vw, 144px); aspect-ratio: 1288 / 1256; }
.logo-slot, .small-logo { border: 0; padding: 0; background: transparent; cursor: pointer; appearance: none; -webkit-tap-highlight-color: transparent; }
.logo-slot:focus-visible, .small-logo:focus-visible { outline: 2px solid var(--coral); outline-offset: 8px; }
body.transitioning { overflow: hidden; }
.view.exiting h1, .view.exiting .editorial { opacity: 0; transition: opacity .25s ease; }
.editorial { max-width: 1280px; margin: 0 auto; padding: clamp(32px,5vh,64px) 7vw 8vh; text-align: left; }
.services { max-width: 1000px; margin: 0; }
.services h2 { margin: 0; font-size: clamp(27px,3.25vw,48px); font-weight: 700; letter-spacing: -.055em; line-height: 1.08; text-wrap: pretty; }
.services h2 + h2 { margin-top: 14px; }
.thoughts { display: flex; flex-direction: column; gap: 14px; margin: clamp(30px,4.5vh,46px) 0 0; max-width: 880px; }
.thoughts p { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: clamp(16px,1.45vw,21px); line-height: 1.08; letter-spacing: -.045em; text-wrap: pretty; }
/* The cursor and text share exactly the same moving pastel field. */
:root { --lume-gradient: radial-gradient(ellipse at 25% 25%,#ffc45f 0%,transparent 55%), radial-gradient(ellipse at 75% 65%,#f88446 0%,transparent 58%), linear-gradient(120deg,#ffb960,#ffa05a 45%,#ffd077 75%,#ee7942); }
.studio .editorial { opacity:var(--studio-ink,0); }
.sunset-text { color:#111; }
@supports ((background-clip:text) or (-webkit-background-clip:text)) {
 .sunset-text {
  display:inline-block; background-color:#111;
  background-image:radial-gradient(circle var(--text-glow-radius,145px) at var(--cursor-x,-500px) var(--cursor-y,-500px),rgb(255 175 60 / var(--heat,0)) 0%,rgb(255 151 68 / var(--heat,0)) 55%,rgb(240 119 55 / var(--heat,0)) 78%,transparent 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
 }
}
@keyframes lume-colour-flow {
 from { background-position:20% 30%; }
 to { background-position:80% 70%; }
}
@media (hover:hover) and (pointer:fine) {
 body.cloud-cursor, body.cloud-cursor * { cursor:none; }
}
@media (max-width: 650px) {
 :root { --logo-width: min(48vw, 33svh); }
 h1 { font-size: clamp(22px,6vw,32px); }
 .studio-header { padding: 28px 7vw 0; }
 .editorial { padding: 32px 6vw 48px; }
 .services h2 { font-size: clamp(25px,6.4vw,36px); }
 .services h2 + h2 { margin-top: 14px; }
 .thoughts { margin-top: 30px; gap: 14px; }
 .thoughts p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .sunset-text { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; } }










.studio { min-height: 100svh; }
.studio-header { position: absolute; top: 0; left: 0; }
.editorial { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: max(150px,18svh); padding-bottom: max(60px,10svh); text-align: center; }
.services, .thoughts { width: 100%; margin-left: auto; margin-right: auto; }
.cursor-halo { position: fixed; top: 0; left: 0; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0; background: radial-gradient(circle,#ffd347 0%,#ffaf32 16%,#ff763b 32%,rgb(255 86 68 / .65) 47%,rgb(255 102 73 / .2) 60%,transparent 72%); will-change: transform, opacity; }
.cursor-halo.released { z-index: 15; }
main { position: relative; z-index: 1; }
@media(max-width:650px){ .editorial { padding-top: 135px; padding-bottom: 64px; } }
.cover .identity { transition: transform 1.2s cubic-bezier(.22,1,.36,1), opacity .9s ease; }
.cover.zoom-away .identity { transform: scale(.9); opacity: 0; }
@media(prefers-reduced-motion:reduce){ .cover .identity { transition:none; } }

/* Diffuse gradient sphere with a short, merging organic tail. */
.cursor-halo { background:none; border:0; box-shadow:none; }
.cursor-blob, .cursor-tail {
 position:absolute; pointer-events:none; border-radius:inherit;
 background-image:var(--lume-gradient); background-size:240% 260%;
 animation:lume-colour-flow 18s ease-in-out infinite alternate;
 filter:blur(38px); opacity:.92;
}
.cursor-blob { inset:0; z-index:2; }
.cursor-tail {
 width:calc(144px * var(--tail-size)); height:calc(144px * var(--tail-size));
 left:calc(50% - 72px * var(--tail-size)); top:calc(50% - 72px * var(--tail-size));
 border-radius:48% 52% 58% 42%; will-change:transform; z-index:1;
}
@media (prefers-reduced-motion:reduce) { .cursor-tail { display:none; } }
/* Opening: fixed layout, only the two logo transforms and subtitle opacity change. */
.intro-pending .cover h1 { opacity: 0; }
.intro-pending .brand { visibility: hidden; }
.intro-pending body.intro-playing .brand { visibility: visible; }
.intro-pending .cursor-halo { visibility: hidden; }
.intro-pending .logo-slot { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
 .intro-pending .cover h1 { opacity: 1; }
}

@media(prefers-reduced-motion:reduce){ .studio .editorial { opacity:1; } }

/* Opaque at the midpoint, above every element including the fixed brand. */
.transition-veil { position:fixed; inset:0; z-index:30; pointer-events:none; opacity:0; background-image:var(--lume-gradient); background-size:160% 180%; }

.returning-home .brand { visibility:hidden !important; }

.touch-cloud { --text-glow-radius:113px; }