/* Hallmark · shape: Service Index (wireframe B, chosen by the client) · genre: atmospheric · theme: Midnight (deal 2/3, seed creative-studio-yogyakarta-video-fc43·7b2e6069·2026-10-31·r0) · job: hire · draw: skipped, shape set by the approved wireframe · brand: Ilusyx Creative (spec 2026-10-31)
 * hero: Stage · nav: edge-aligned · footer: bento panels · imagery: the studio's own photographs, video stills and work in true colour · signature: the stacked project folders, each tabbed with its client
 * axes: dark/grotesk-sans/cool · posture: committed · contrast: pass · fold: pass · copy: live-site voice (English section heads, Indonesian body) · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a studio page could be any studio; the project folders carry real Ilusyx jobs tabbed by client, and the clients are the ones on the live site */
/* Hallmark · dismissed 23 · the accent fill is the 112px round play button on the showreel, about 1% of the viewport, carried over from the old site */
/* Hallmark · type: Mona Sans 800 at 125% width on heads and item titles, chosen by the client over the theme's 300 (option B on the type comparison page) */
/* Hallmark · client references: Artfolio (dark, rounded, glowing cards, photo wall, spinning badge, bento footer) and Robin (tabbed project cards, colourful tags, taped photos); rounded radii and soft glows replace the theme's square, unlit surfaces */
/* Hallmark · answered F15 · the hero keeps its 96px gap, the bento footer its 16px panel gap and the service list 64px; three layouts with different jobs
/* Hallmark · waive 83 · two rows of Ilusyx work stills in the photo wall plus the four project cards · the client asked for the Artfolio photo wall, and every picture is the studio's own portfolio */
/* Hallmark · dismissed 58 · the extra words are the eight service cards, each a name and one line; the client asked for the complete service list without pictures */
/* Hallmark · waive 80 · svg.svc__mark 168px at 50% opacity in the logo gradient, one line mark per service, aria-hidden · the client asked for faint abstract marks that carry each service's meaning */
/* Hallmark · waive 59 · div.trust sits 26px under the hero, a logo strip closing the first screen · the client trust row belongs to the hero fold, not a separate section */
/* Hallmark · waive 77 · div.trust is one line of six client logos · a quiet trust strip under the hero, thin on purpose */
/* Hallmark · dismissed 11 · the photo wall stills lift on hover at the client's request; the wall keeps drifting slowly so the lift reads as picking one up */
/* Hallmark · midnight duotone not used · the portfolio is client branding and video stills whose colour is the work itself, so photographs stay in true colour */
@import url("./tokens.css?v=eaad9ee1");
@import url("./base.css?v=96213352");

/* Mona Sans (SIL Open Font License), self-hosted variable font: weight 200 to 900, width 75% to 125% */
@font-face { font-family: "Mona Sans"; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; src: url("./assets/fonts/mona-sans-latin.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: "Mona Sans"; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; src: url("./assets/fonts/mona-sans-latin-ext.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; }

/* Type */
h1, h2 { font-weight: var(--display-weight); font-stretch: var(--display-stretch); line-height: 0.96; }
h1 { line-height: 0.92; }
h3 { font-weight: 500; font-stretch: 100%; letter-spacing: 0; }
.section { padding-block: var(--section-gap-s); }
.caption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.text-link { color: var(--color-ink-2); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; }
.text-link:hover { text-decoration-color: var(--color-accent); }
.text-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* Controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid transparent; border-radius: var(--radius-pill); background: none; color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--quiet { border-color: var(--color-rule-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.skip { position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-modal); padding: var(--space-sm) var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); }
.skip:focus-visible { top: var(--space-md); outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Nav */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-xl); min-height: 72px; }
.nav__brand { display: block; flex: none; }
.nav__brand img { width: auto; height: 32px; }
.nav__brand:focus-visible, .nav__links a:focus-visible, .nav__lang:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav__links { display: flex; justify-content: center; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.nav__links a, .nav__lang { color: var(--color-ink-2); text-decoration: none; }
.nav__links a:hover, .nav__lang:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.nav__end { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-md); }
.nav__lang { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-xs); font-size: var(--text-sm); font-weight: 500; }
.nav__talk { min-height: 44px; }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: center; min-height: calc(100svh - 73px); padding-block: var(--space-2xl) var(--space-3xl); }
.hero__text { display: grid; gap: var(--space-lg); container-type: inline-size; }
.hero h1 { max-width: 11ch; font-size: min(var(--text-display), 15cqi); }
.media { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-media); background: var(--color-paper-2); }
.media > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.media--wide { aspect-ratio: 16 / 9; }
.hero__visual { position: relative; }
.hero__visual::before { content: ""; position: absolute; inset: 10% 5% -6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--color-glow), transparent); filter: blur(40px); }
.hero__media { height: min(58svh, 560px); min-height: 400px; border-radius: var(--radius-card); }
.hero__visual .badge { position: absolute; left: calc(var(--space-2xl) * -1); bottom: calc(var(--space-2xl) * -1); }
.hero__media img { object-position: 55% 40%; }
.settle { animation: settle var(--dur-long) var(--ease-out) both; }
@keyframes settle { from { opacity: 0.6; } }

/* Services: the signature */
.svc__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--head-gap); }
.svc__head p { color: var(--color-ink-2); }
.svc__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--space-md); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.svc__item { position: relative; display: grid; grid-template-rows: auto auto 1fr; gap: var(--space-md); padding: var(--space-lg); overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-2); transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.svc__item::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--svc-tone); }
.svc__item::after { content: ""; position: absolute; right: -30%; top: -40%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--svc-tone), transparent); opacity: 0; transition: opacity var(--dur-long) var(--ease-out); pointer-events: none; }
.svc__item:hover { background: var(--color-paper-3); transform: translateY(-4px); }
.svc__item:hover::after { opacity: 0.35; }
.svc__item--0 { --svc-tone: var(--color-accent); }
.svc__item--1 { --svc-tone: var(--color-pink); }
.svc__item--2 { --svc-tone: var(--color-cyan); }
.svc__item--3 { --svc-tone: var(--color-ink); }
.svc__num { grid-row: 1; font-size: var(--text-sm); font-weight: 500; color: var(--svc-tone); }
.svc__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.svc__mark { position: absolute; right: calc(var(--space-md) * -1); top: calc(var(--space-md) * -1); width: 168px; height: 168px; fill: none; stroke: url(#mark-grad); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; opacity: 0.5; pointer-events: none; transition: transform var(--dur-long) var(--ease-out), opacity var(--dur-long) var(--ease-out); }
.svc__item:hover .svc__mark { opacity: 0.8; transform: rotate(-6deg) scale(1.04); }
.svc__name { grid-row: 2; align-self: start; min-height: 2.2em; margin-top: var(--space-3xl); max-width: none; font-size: var(--text-title); font-weight: 800; font-stretch: 125%; letter-spacing: -0.015em; line-height: 1.1; }
.svc__desc { grid-row: 3; align-self: start; position: relative; z-index: 1; font-size: var(--text-sm); color: var(--color-muted); }

/* Showreel band */
.reel { background: var(--color-paper-3); }
.reel__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); align-items: end; }
.reel__text { display: grid; gap: var(--space-md); padding-bottom: var(--space-md); }
.reel__text p { color: var(--color-ink-2); }
.reel__poster { position: absolute; inset: 0; display: block; color: var(--color-ink); }
.reel__poster img { width: 100%; height: 100%; object-fit: cover; }
.reel__poster:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.reel__play { position: absolute; inset: 0; display: grid; place-items: center; width: 112px; height: 112px; margin: auto; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-ink); transition: transform var(--dur-short) var(--ease-out); }
.reel__play::before, .reel__play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--color-accent); opacity: 0; pointer-events: none; }
.js .reel__play::before, .js .reel__play::after { animation: ripple 2.4s var(--ease-out) 3; }
.js .reel__play::after { animation-delay: 0.8s; }
@keyframes ripple { from { transform: scale(1); opacity: 0.7; } to { transform: scale(1.9); opacity: 0; } }
.reel__player iframe, .lightbox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Work */
.works__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--head-gap); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chip { min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); background: none; color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.chip:hover { background: var(--color-paper-2); }
.chip[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.works__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.work { position: relative; display: grid; gap: var(--space-xs); align-content: start; }
.work--lead { grid-column: span 2; grid-row: span 2; }
.work__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-media); background: var(--color-paper-2); }
.work__media img { width: 100%; height: 100%; object-fit: cover; }
.work__media::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; border-radius: inherit; transition: border-color var(--dur-short) var(--ease-out); pointer-events: none; }
.work:hover .work__media::after { border-color: var(--color-accent); }
.work__badge { position: absolute; left: var(--space-xs); bottom: var(--space-xs); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 500; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.work:hover .work__badge, .work:focus-within .work__badge { opacity: 1; }
.work__title { margin-top: var(--space-xs); font-size: var(--text-md); }
.work--lead .work__title { font-size: var(--text-title); }
.work__hit { color: var(--color-ink); text-decoration: none; }
.work__hit::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.work__hit:focus-visible { outline: none; }
.work:has(.work__hit:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.work__meta { font-size: var(--text-sm); color: var(--color-muted); }
.js .work--extra.is-folded { display: none; }
.works__more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-2xl); }

/* Clients */
.clients h2 { margin-bottom: var(--head-gap); }
.clients__grid { --cols: 7; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xl) var(--space-lg); margin: 0; padding: var(--space-2xl) var(--space-xl); border-radius: var(--radius-card); background: radial-gradient(70% 120% at 50% 0%, var(--color-glow), transparent 70%), var(--color-paper-2); list-style: none; align-items: center; justify-items: center; }
.clients__grid li { display: flex; justify-content: center; width: calc((100% - (var(--cols) - 1) * var(--space-lg)) / var(--cols)); }
.clients__grid img { max-width: 100%; height: auto; }

/* Testimonial (from the old ilusyxcreative.com) */
.testi { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: start; }
.testi__side { display: grid; gap: var(--space-lg); justify-items: start; }
.testi__logo { width: auto; height: 48px; opacity: 0.9; }
.testi__who { display: grid; gap: var(--space-3xs); }
.testi__card { position: relative; margin: 0; padding: var(--space-2xl); overflow: hidden; border-radius: var(--radius-card); background: radial-gradient(90% 120% at 100% 0%, var(--color-glow), transparent 60%), var(--color-paper-2); }
.testi__card::before { content: "\201C"; position: absolute; right: var(--space-xl); top: calc(var(--space-lg) * -1); font-size: 12rem; font-weight: 800; line-height: 1; color: var(--color-accent); opacity: 0.25; pointer-events: none; }
.testi__card blockquote { position: relative; display: grid; gap: var(--space-md); margin: 0; }
.testi__card blockquote p { max-width: 60ch; font-size: var(--text-lg); line-height: 1.55; color: var(--color-ink); }
.testi__card figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); }
.testi__name { font-weight: 800; font-stretch: 125%; font-size: var(--text-lg); letter-spacing: -0.015em; }
.testi__role { font-size: var(--text-sm); color: var(--color-ink-2); }
.testi__note { font-size: var(--text-xs); color: var(--color-muted); }

/* PPTPremium */
.ppt { background: var(--color-paper-2); }
.ppt__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.ppt__media { aspect-ratio: 16 / 10; }
.ppt__text { display: grid; gap: var(--space-lg); justify-items: start; }
.ppt__text p { color: var(--color-ink-2); }

/* Contact close */
.contact__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xl); align-items: start; margin-bottom: var(--head-gap); }
.contact__head .badge { width: 220px; margin-right: var(--space-2xl); }
.contact__head .badge text { font-size: 13px; }
.contact__lead { display: grid; gap: var(--space-lg); justify-items: start; }
.contact__head h2 { max-width: 14ch; }
.contact__head p { color: var(--color-ink-2); max-width: 52ch; }
.contact__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: stretch; }
.contact__map { position: relative; min-height: 240px; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-2); }
.contact__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.contact__rows { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.contact__rows li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.contact__place p { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.contact__label { font-size: var(--text-sm); color: var(--color-muted); font-weight: 500; }
.contact__rows a { font-size: var(--text-title); font-weight: 800; font-stretch: 125%; letter-spacing: -0.015em; line-height: 1.3; color: var(--color-ink); text-decoration: none; overflow-wrap: anywhere; }
.contact__rows a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.contact__rows a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* Footer: bento */
.foot { padding-block: var(--space-2xl) var(--space-xl); }
.foot__bento { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-md); }
.foot__panel { position: relative; color: var(--color-ink); display: grid; gap: var(--space-lg); align-content: start; padding: var(--space-xl); overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-2); }
.foot__panel--main { min-height: 360px; }
.foot__mark { width: min(100%, 300px); height: auto; }
.foot__panel p { color: var(--color-ink-2); max-width: 46ch; }
.foot__ghost { position: absolute; right: -40px; bottom: -48px; width: 300px; height: auto; opacity: 0.06; pointer-events: none; }
.foot__h { font-size: var(--text-sm); font-weight: 500; font-stretch: 100%; letter-spacing: 0; line-height: 1.4; color: var(--color-muted); }
.foot__list { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.foot__list a { color: var(--color-ink); text-decoration: none; font-size: var(--text-md); white-space: nowrap; }
.foot__list a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.foot__address { max-width: 36ch; font-style: normal; font-size: var(--text-sm); line-height: 1.6; }
.foot__address a { color: var(--color-ink-2); text-decoration: none; }
.foot__address a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.foot__address a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.foot__pills { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; position: relative; z-index: 1; }
.foot__pills a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.foot__pills a:hover { background: var(--color-paper-3); color: var(--color-ink); }
.foot__list a:focus-visible, .foot__pills a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.foot__legal { margin-top: auto; font-size: var(--text-xs); color: var(--color-muted); }

/* Lightbox */
.lightbox { width: min(92vw, 1280px); max-width: none; padding: 0; border: 0; border-radius: var(--radius-media); background: var(--color-paper); color: var(--color-ink); }
.lightbox::backdrop { background: color-mix(in oklab, var(--color-paper) 88%, transparent); }
.lightbox__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: inherit; }
.lightbox__stage img { width: 100%; height: 100%; object-fit: contain; }
.lightbox__close { position: absolute; right: 0; bottom: calc(100% + var(--space-xs)); min-height: 44px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font-weight: 500; cursor: pointer; }
.lightbox[open] { overflow: visible; }
.lightbox__close:hover { background: var(--color-paper-2); }
.lightbox__close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

@media (max-width: 75rem) {
  .nav__links { display: none; }
  .svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clients__grid { --cols: 5; }
}
@media (max-width: 60rem) {
  .contact__body, .testi, .hero, .svc__head, .reel__grid, .ppt__grid, .contact__head, .foot__bento { grid-template-columns: minmax(0, 1fr); }
  .hero__visual .badge { left: auto; right: var(--space-md); bottom: calc(var(--space-xl) * -1); width: 112px; }
  .contact__head { gap: var(--space-xl); }
  .contact__head .badge { width: 160px; margin-right: 0; justify-self: end; }
  .hero { min-height: 0; gap: var(--space-xl); padding-block: var(--space-xl) var(--space-2xl); }
  .hero__media { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .reel__grid { gap: var(--space-xl); }
  .works__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
  .contact__rows li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}
@media (max-width: 40rem) {
  .contact__map { min-height: 260px; }
  .testi__card { padding: var(--space-lg); }
  .testi__card blockquote p { font-size: var(--text-md); }
  .svc__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .svc__item { grid-template-columns: 2.25rem minmax(0, 1fr); grid-template-rows: auto; align-content: start; min-height: 0; gap: var(--space-2xs) var(--space-sm); padding: var(--space-md); }
  .svc__num { grid-row: 1 / span 2; grid-column: 1; padding-top: var(--space-2xs); }
  .svc__name { grid-row: 1; grid-column: 2; align-self: start; min-height: 0; margin-top: 0; padding-right: var(--space-2xl); font-size: var(--text-lg); }
  .svc__desc { grid-row: 2; grid-column: 2; padding-right: var(--space-2xl); }
  .svc__mark { top: calc(var(--space-sm) * -1); right: calc(var(--space-sm) * -1); width: 80px; height: 80px; margin-top: 0; opacity: 0.4; }
  .nav__bar { gap: var(--space-sm); min-height: 64px; }
  .nav__brand img { height: 26px; }
  .nav__talk { padding: 0 var(--space-sm); font-size: var(--text-sm); }
  .work__title { font-size: var(--text-sm); }
  .work__meta { font-size: var(--text-xs); }
  .foot__panel { padding: var(--space-lg); }
  .clients__grid { --cols: 3; gap: var(--space-lg) var(--space-md); }
  .clients__grid img { width: auto; max-height: 40px; }
  .reel__play { width: 76px; height: 76px; }
}
@media (max-width: 30rem) {
  .nav__talk { display: none; }
}
@media (max-width: 26rem) {
  .nav__end { gap: var(--space-2xs); }
  .nav__brand img { height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .settle { animation: none; }
  .svc__item, .svc__item::after, .svc__mark { transition: none; }
  .svc__item:hover .svc__mark { transform: none; }
  .svc__item:hover { transform: none; }
  .reel__poster:hover .reel__play { transform: none; }
  .reel__play::before, .reel__play::after { animation: none; }
}

/* Motion carried over from the old ilusyxcreative.com: the marquee, the rolling button label, magnetic buttons, the top-down image wipe, parallax and the scroll-progress ring */

/* Marquee band */
.marquee { position: relative; overflow: hidden; margin-top: var(--space-lg); padding-block: var(--space-xl); border-block: var(--rule-hair) solid var(--color-rule); }
.marquee__track { display: flex; width: max-content; }
.js .marquee__track { animation: marquee 48s linear infinite; }
.marquee:not(.is-running) .marquee__track, .marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__item { display: inline-flex; align-items: center; gap: var(--space-xl); padding-right: var(--space-xl); }
.marquee__word { font-size: clamp(2.5rem, 6vw, 5.5rem); font-weight: 800; font-stretch: 125%; line-height: 1; letter-spacing: var(--tracking-display); white-space: nowrap; }
.marquee__item:nth-child(even) .marquee__word { color: var(--color-ink-2); -webkit-text-fill-color: var(--color-paper); -webkit-text-stroke: 2px var(--color-ink-2); paint-order: stroke fill; }
.marquee__item img { width: auto; height: clamp(32px, 4vw, 56px); opacity: 0.85; }

/* Rolling button label */
.roll { position: relative; display: inline-block; overflow: hidden; line-height: 1.25; vertical-align: middle; }
.roll > span { display: block; transition: transform var(--dur-short) var(--ease-out); }
.roll::after { content: attr(data-text); position: absolute; left: 0; top: 100%; width: 100%; transition: transform var(--dur-short) var(--ease-out); }
.btn:hover .roll > span, .btn:hover .roll::after, .btn:focus-visible .roll > span, .btn:focus-visible .roll::after { transform: translateY(-100%); }

/* Magnetic buttons */
[data-magnetic] { transition: transform var(--dur-long) var(--ease-out), background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
[data-magnetic].is-pulled { transition-duration: var(--dur-micro), var(--dur-short), var(--dur-short); }

/* Top-down image wipe */
.js [data-wipe] { clip-path: inset(0 0 100% 0); transition: clip-path 0.9s var(--ease-in-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-wipe].is-in { clip-path: inset(0); }

/* Parallax drift on the large photographs */
@supports (animation-timeline: view()) {
  .hero__media img, .ppt__media img { animation: drift linear both; animation-timeline: view(); scale: 1.12; }
  @keyframes drift { from { transform: translateY(-5%); } to { transform: translateY(5%); } }
}

/* Scroll-progress ring */
.to-top { position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: var(--z-sticky); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--color-paper-2); color: var(--color-ink); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.js .to-top:not(.is-shown) { opacity: 0; transform: translateY(12px); pointer-events: none; }
.to-top:hover { background: var(--color-paper-3); }
.to-top:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.to-top svg { width: 48px; height: 48px; transform: rotate(-90deg); }
.to-top__track { fill: none; stroke: var(--color-rule-2); stroke-width: 2; }
.to-top__bar { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); }
.to-top__arrow { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; transform: rotate(90deg); transform-origin: 24px 24px; }
html:not(.js) .to-top { display: none; }

@media (prefers-reduced-motion: reduce) {
  .js .marquee__track { animation: none; }
  .roll > span, .roll::after { transition: none; }
  .btn:hover .roll > span, .btn:hover .roll::after, .btn:focus-visible .roll > span, .btn:focus-visible .roll::after { transform: none; }
  [data-magnetic] { transform: none !important; }
  .js [data-wipe] { clip-path: none; transition: none; }
  .hero__media img, .ppt__media img { animation: none; scale: 1; transform: none; }
  .to-top { transition: none; }
}

/* Mobile and tablet menu */
.menu { display: none; position: relative; }
@media (max-width: 75rem) { .menu { display: block; } }
.menu__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; list-style: none; cursor: pointer; }
.menu__btn::-webkit-details-marker { display: none; }
.menu__btn:hover { background: var(--color-paper-2); }
.menu__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.menu[open] .menu__btn { background: var(--color-paper-3); border-color: var(--color-muted); }
.menu__sheet { position: absolute; right: 0; top: calc(100% + var(--space-sm)); width: min(86vw, 340px); padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: var(--shadow-card); }
.menu__sheet ul { display: grid; margin: 0; padding: 0; list-style: none; }
.menu__sheet a { display: flex; align-items: center; min-height: 52px; padding: 0 var(--space-sm); border-radius: var(--radius-media); color: var(--color-ink); font-size: var(--text-title); font-weight: 800; font-stretch: 125%; letter-spacing: -0.015em; text-decoration: none; }
.menu__sheet a:hover { background: var(--color-paper-3); }
.menu__sheet a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

/* Colourful service tags (Robin) */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.tag { padding: var(--space-2xs) var(--space-sm); border-radius: 10px; color: var(--color-accent-ink); font-size: var(--text-sm); font-weight: 500; transform: rotate(-1.5deg); }
.tag:nth-child(even) { transform: rotate(1.5deg); }
.tag--0 { background: var(--color-accent); }
.tag--1 { background: var(--color-pink); }
.tag--2 { background: var(--color-cyan); }
.tag--3 { background: var(--color-ink); }

/* Spinning badge (Artfolio) */
.badge { position: relative; display: grid; place-items: center; width: 152px; aspect-ratio: 1; border-radius: 50%; background: var(--color-paper-2); box-shadow: 0 0 0 1px var(--color-rule-2), 0 20px 60px -20px var(--color-glow); }
.badge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.js .badge svg { animation: spin 28s linear infinite; }
.badge:hover svg { animation-play-state: paused; }
.badge text { fill: var(--color-ink-2); font-family: var(--font-body); font-size: 15px; font-weight: 500; }
.badge img { width: 34%; height: auto; }
@keyframes spin { to { transform: rotate(1turn); } }

/* Portfolio: project folders (Robin). On a wide screen each folder sticks a little lower than the last,
   so the next one slides over it and the earlier tabs stay in view like a stack of files. */
.works__title { margin-bottom: var(--head-gap); }
.feats { display: grid; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.feat__tab { display: inline-flex; gap: var(--space-sm); align-items: center; margin: 0 0 -1px; padding: var(--space-xs) var(--space-lg); border-radius: var(--radius-media) var(--radius-media) 0 0; background: var(--feat-bg); color: var(--feat-ink); font-size: var(--text-sm); font-weight: 500; }
.feat__kind { opacity: 0.8; }
.feat__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; padding: var(--space-2xl); border-radius: 0 var(--radius-card) var(--radius-card) var(--radius-card); background: var(--feat-bg); color: var(--feat-ink); box-shadow: var(--shadow-card); }
.feat__text { display: grid; gap: var(--space-md); justify-items: start; }
.feat__title { font-size: var(--text-3xl); font-weight: 800; font-stretch: 125%; letter-spacing: var(--tracking-display); line-height: 0.96; }
.feat__text p { max-width: 40ch; opacity: 0.85; }
.feat__text .feat__project { font-size: var(--text-lg); font-weight: 500; opacity: 1; }
.feat__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-xs); padding: 0 var(--space-lg); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font-weight: 500; text-decoration: none; }
.feat__link:hover .roll > span, .feat__link:hover .roll::after, .feat__link:focus-visible .roll > span, .feat__link:focus-visible .roll::after { transform: translateY(-100%); }
.feat__link:focus-visible { outline: 2px solid var(--feat-ink); outline-offset: 3px; }
.feat__media { position: relative; margin: 0; }
.feat__facts { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.feat__facts li { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-sm); border: var(--rule-hair) solid color-mix(in oklab, currentColor 35%, transparent); border-radius: var(--radius-pill); background: color-mix(in oklab, currentColor 8%, transparent); font-size: var(--text-sm); font-weight: 500; line-height: 1; white-space: nowrap; }
.feat__strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); margin-top: var(--space-xs); }
.feat__strip img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--radius-media) / 2); }
.feat__hit > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-media); }
.tape { position: absolute; z-index: 1; width: 92px; height: 28px; background: color-mix(in oklab, var(--color-ink) 45%, transparent); }
.tape--a { left: -18px; top: -10px; transform: rotate(-10deg); }
.tape--b { right: -18px; top: -10px; transform: rotate(9deg); }
/* Award seal: a round sticker on the picture, gold for gold, platinum for platinum */
.seal { position: absolute; z-index: 2; right: calc(var(--space-md) * -1); top: calc(var(--space-lg) * -1); display: grid; place-content: center; gap: var(--space-3xs); width: 112px; aspect-ratio: 1; margin: 0; border-radius: 50%; color: var(--color-accent-ink); text-align: center; transform: rotate(10deg); box-shadow: var(--shadow-card); }
.seal::before { content: ""; position: absolute; inset: 6px; border: 1px dashed color-mix(in oklab, var(--color-accent-ink) 40%, transparent); border-radius: 50%; }
.seal--gold { background: radial-gradient(circle at 30% 25%, var(--color-gold), var(--color-gold-2)); }
.seal--platinum { background: radial-gradient(circle at 30% 25%, var(--color-platinum), var(--color-platinum-2)); }
.seal__rank { max-width: 8ch; font-size: var(--text-md); font-weight: 800; font-stretch: 125%; line-height: 1.05; letter-spacing: -0.01em; }
.seal__event { font-size: var(--text-xs); font-weight: 500; }
.feat__media:has(.seal) .tape--b { display: none; }
.feat--plum { --feat-bg: var(--color-paper-3); --feat-ink: var(--color-ink); }
.feat--lilac { --feat-bg: var(--color-accent); --feat-ink: var(--color-accent-ink); }
.feat--pink { --feat-bg: var(--color-pink); --feat-ink: var(--color-accent-ink); }
.feat--cyan { --feat-bg: var(--color-cyan); --feat-ink: var(--color-accent-ink); }
.feat--ink { --feat-bg: var(--color-ink); --feat-ink: var(--color-accent-ink); }
.feat--violet { --feat-bg: var(--color-violet); --feat-ink: var(--color-ink); }
@media (min-width: 60rem) and (min-height: 640px) {
  .folders { --title-h: calc(var(--text-section) * 0.96 + var(--space-md) + var(--head-gap)); --stick: calc(73px + var(--title-h)); }
  .works__title { position: sticky; top: 73px; z-index: 10; margin: 0; padding-block: var(--space-md) var(--head-gap); background: var(--band-bg, var(--color-paper)); }
  .feats { gap: 38svh; padding-bottom: var(--section-gap-s); }
  .feats + .wall, .folders + .wall { margin-top: 0; }
  .feat { position: sticky; top: var(--stick); }
  .feat__tab { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3xs); width: calc(100% / 6 - 4px); margin-left: calc(var(--n) * 100% / 6); padding: var(--space-xs) var(--space-md); line-height: 1.25; }
  .feat__tab .num { font-size: var(--text-sm); opacity: 0.8; }
  .feat__tab .feat__kind { opacity: 1; font-weight: 500; }
  .feat .feat__body { height: calc(100svh - var(--stick) - 52px - var(--space-md)); box-shadow: none; border-radius: var(--radius-card); }
  .feat__hit > img { max-height: calc(100svh - var(--stick) - 320px); }
  .feat:first-child .feat__body { border-top-left-radius: 0; }
  .feat:last-child .feat__body { border-top-right-radius: 0; }
  .feat--winner .feat__tab { box-shadow: inset 0 3px 0 var(--color-gold); }
}


/* Photo wall (Artfolio) */
.wall { display: grid; gap: var(--space-md); padding-block: var(--space-2xl) 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, var(--color-ink) 12%, var(--color-ink) 88%, transparent); mask-image: linear-gradient(90deg, transparent, var(--color-ink) 12%, var(--color-ink) 88%, transparent); }
.wall__track { display: flex; gap: var(--space-md); width: max-content; }
.wall__track img { width: clamp(180px, 18vw, 280px); aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-media); }
.wall__row--1 .wall__track { margin-left: -140px; }
.js .wall__row--0 .wall__track { animation: marquee 90s linear infinite; }
.js .wall__row--1 .wall__track { animation: marquee 110s linear infinite reverse; }
.js .wall__row--2 .wall__track { animation: marquee 100s linear infinite; }
.wall:not(.is-running) .wall__track { animation-play-state: paused; }
.wall__track img { transition: transform var(--dur-long) var(--ease-out), box-shadow var(--dur-long) var(--ease-out), filter var(--dur-long) var(--ease-out); }
.wall__track img:hover { transform: translateY(-6px) scale(1.04); box-shadow: 0 18px 40px -16px var(--color-glow); filter: brightness(1.08); }
.works--all { padding-top: var(--space-3xl); }
.works__sub { font-size: var(--text-title); font-weight: 800; font-stretch: 125%; letter-spacing: -0.015em; }

@media (max-width: 60rem) {
  .feat__body { grid-template-columns: minmax(0, 1fr); padding: var(--space-lg); gap: var(--space-lg); }
  .badge { width: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .badge svg, .js .wall__track { animation: none; }
  .wall__track img { transition: none; }
  .wall__track img:hover { transform: none; }
  .feat__link .roll > span, .feat__link .roll::after { transition: none; transform: none !important; }
}

/* Heading to content: one gap for every section head (64px, 40px on phones and tablets) */
:root { --head-gap: var(--space-2xl); }
@media (max-width: 59.99rem) { :root { --head-gap: var(--space-xl); } }

/* Section rhythm: one gap between every block, the same token everywhere (120px, 80px on tablets, 56px on phones) */
.section { padding-block: 0; }
main > * + *, .works > .wall, .works > .works--all, .foot { margin-top: var(--section-gap-s); }
.hero { min-height: calc(100svh - 73px - var(--section-gap-s)); padding-block: var(--space-lg) var(--space-3xl); }
.marquee { margin-top: var(--section-gap-s); }
.wall { padding-block: 0; }
.works--all { padding-top: 0; }
.ppt { padding-block: var(--section-gap-s); }
.foot { padding-top: 0; }
@media (min-width: 60rem) and (min-height: 640px) {
  .works > .wall { margin-top: 0; }
}

/* Phones and tablets: each folder is one rounded card. It sticks just under the header of the one before,
   so the headers read as a list (Project 01 BULOG, Project 02 ...) under the sticky title. */
@media (max-width: 59.99rem) {
  .works__title { position: sticky; top: 64px; z-index: 10; margin: 0; padding-block: var(--space-sm) var(--head-gap); background: var(--band-bg, var(--color-paper)); }
  .feats { gap: var(--space-md); padding-bottom: var(--space-xl); }
  .feat { position: sticky; top: calc(64px + var(--title-h, 96px) + var(--n) * 48px); border-radius: var(--radius-card); box-shadow: 0 -12px 24px -16px var(--color-paper); }
  .feat__tab { display: flex; gap: var(--space-sm); width: 100%; height: 48px; margin: 0; padding: 0 var(--space-md); border-radius: var(--radius-card) var(--radius-card) 0 0; font-size: var(--text-sm); }
  .feat .feat__body { gap: var(--space-md); padding: var(--space-xs) var(--space-md) var(--space-md); border-radius: 0 0 var(--radius-card) var(--radius-card); box-shadow: none; }
  .feat--winner .feat__tab { box-shadow: inset 0 3px 0 var(--color-gold); }
  .feat__title { font-size: var(--text-title); }
  .feat__text { gap: var(--space-xs); }
  .feat__text p { font-size: var(--text-sm); }
  .feat__text .feat__project { font-size: var(--text-md); }
  .feat__link { min-height: 40px; margin-top: var(--space-2xs); }
  .feat__hit > img { aspect-ratio: 2 / 1; }
  .tape { width: 56px; height: 18px; }
  .tape--a { left: -8px; top: -8px; }
  .tape--b { right: -8px; top: -8px; }
  .feat__strip { display: none; }
    .feat__facts li { min-height: 24px; font-size: var(--text-xs); }
  .seal { width: 84px; right: calc(var(--space-xs) * -1); top: calc(var(--space-md) * -1); }
  .seal__rank { font-size: var(--text-sm); }
}
@media (max-width: 59.99rem) and (max-height: 699px) {
  .works__title, .feat { position: static; }
}

/* Bands: each section is a sheet laid over the one before, alternating surface, with a large rounded top edge */
:root { --band-r: 56px; }
@media (max-width: 59.99rem) { :root { --band-r: 32px; } }
.band { position: relative; background: var(--band-bg); border-radius: var(--band-r) var(--band-r) 0 0; padding-block: var(--section-gap-s) calc(var(--section-gap-s) + var(--band-r)); }
main > .band { margin-top: calc(var(--band-r) * -1); }
main > .marquee + .band { margin-top: var(--section-gap-s); }
main > .band:last-child { padding-bottom: var(--section-gap-s); }
.band > * + * { margin-top: var(--section-gap-s); }
.band--base { --band-bg: var(--color-paper); box-shadow: var(--shadow-band); }
.band--raised { --band-bg: var(--color-paper-2); }
.band--plum { --band-bg: var(--color-paper-3); }
.band.ppt { padding-block: var(--section-gap-s) calc(var(--section-gap-s) + var(--band-r)); }
/* surfaces that sat on paper-2 step down to paper inside a raised band */
.band--raised .svc__item { background: var(--color-paper); color: var(--color-ink); }
.band--raised .svc__item:hover { background: var(--color-paper-3); }
.band--raised .clients__grid { background: radial-gradient(70% 120% at 50% 0%, var(--color-glow), transparent 70%), var(--color-paper); }
.band--raised .testi__card { background: radial-gradient(90% 120% at 100% 0%, var(--color-glow), transparent 60%), var(--color-paper); }
.foot { margin-top: var(--section-gap-s); }

/* Type rhythm: one measure for running text, balanced heads, no stubs */
.svc__head p, .ppt__text p, .contact__lead p, .foot__panel p, .feat__text p { max-width: 52ch; }
h1, h2, h3, .feat__title, .svc__name, .contact__rows a { text-wrap: balance; }
p, li, blockquote p { text-wrap: pretty; }

/* Trust strip: a few client marks right under the hero */
.trust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-2xl); padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
main > .trust { margin-top: 0; }
.trust p { flex: none; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.trust__logos { display: flex; flex: 1; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg) var(--space-xl); margin: 0; padding: 0; list-style: none; }
.trust__logos img { display: block; max-width: 100%; height: auto; }
.hero { min-height: calc(100svh - 73px - 104px); }
@media (max-width: 59.99rem) {
  .hero { min-height: 0; }
  .trust { flex-direction: column; align-items: stretch; gap: var(--space-md); }
  .trust p { text-align: center; }
  .trust__logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; justify-items: center; gap: var(--space-lg) var(--space-md); }
  .trust__logos img { width: auto; max-width: 100%; max-height: 32px; }
}

/* A service with work to show: the whole card links to the filtered portfolio */
.svc__link { color: inherit; text-decoration: none; }
.svc__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.svc__link:focus-visible { outline: none; }
.svc__item:has(.svc__link:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* Testimonial pull quote: the client's own words, set large */
.testi__pull { position: relative; margin-bottom: var(--space-lg); max-width: 22ch; font-size: var(--text-3xl); font-weight: 800; font-stretch: 125%; letter-spacing: -0.02em; line-height: 1.05; color: var(--color-ink); text-wrap: balance; }
.testi__card blockquote p { font-size: var(--text-lg); color: var(--color-ink-2); }

/* Folder picture opens the work */
.feat__hit { display: block; border-radius: var(--radius-media); }
.feat__hit { transition: box-shadow var(--dur-short) var(--ease-out); }
.feat__hit:hover { box-shadow: 0 0 0 2px currentColor; }

/* Floating WhatsApp on phones, shown once the hero action has scrolled away */
.wa-fab { display: none; }
@media (max-width: 59.99rem) {
  .wa-fab { position: fixed; right: var(--space-md); bottom: var(--space-md); z-index: var(--z-sticky); display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 500; text-decoration: none; box-shadow: var(--shadow-card); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
  .js .wa-fab:not(.is-shown) { opacity: 0; transform: translateY(12px); pointer-events: none; }
  .wa-fab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
  .to-top { display: none; }
}
@media (max-width: 40rem) {
  .contact__head .badge { display: none; }
  .testi__pull { font-size: var(--text-2xl); }
}
@media (prefers-reduced-motion: reduce) {
  .feat__hit, .wa-fab { transition: none; }
}

/* Phones: the testimonial quote mark sits clear of the pull quote, and the full quote reads at body size */
@media (max-width: 40rem) {
  .testi__card::before { right: var(--space-sm); top: calc(var(--space-sm) * -1); font-size: 7rem; opacity: 0.18; }
  .testi__pull { padding-right: var(--space-xl); }
  .testi__card blockquote p { font-size: var(--text-md); }
}

/* Photo wall: room above and below the rows so a lifted photo is not cut off; the outer gaps stay the same */
.wall { padding-block: var(--space-md); }
.works > .wall { margin-top: calc(var(--section-gap-s) - var(--space-md)); }
.works > .works--all { margin-top: calc(var(--section-gap-s) - var(--space-md)); }
@media (min-width: 60rem) and (min-height: 640px) {
  .works > .wall { margin-top: calc(var(--space-md) * -1); }
}

/* Button hover: a fill sweeps in behind the label while the label rolls up.
   Primary sweeps the logo gradient and glows; outlined buttons fill with a lilac tint and their edge lights up. */
.btn, .feat__link { position: relative; isolation: isolate; overflow: hidden; }
.btn::before, .feat__link::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-long) var(--ease-out); }
.btn:hover::before, .btn:focus-visible::before, .feat__link:hover::before, .feat__link:focus-visible::before { transform: scaleX(1); }
.btn--primary { transition: box-shadow var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.btn--primary::before { background: var(--color-pink); }
.btn--primary:hover { box-shadow: 0 10px 32px -10px var(--color-glow), 0 0 0 1px color-mix(in oklab, var(--color-pink) 60%, transparent); }
.btn--quiet { transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.btn--quiet::before { background: color-mix(in oklab, var(--color-accent) 18%, var(--color-paper-2)); }
.btn--quiet:hover { box-shadow: 0 0 24px -8px var(--color-glow); }
.btn--quiet:hover, .btn--quiet:focus-visible { border-color: var(--color-accent); }
/* Folder button: dark pill at rest; on hover a white fill sweeps in and the label turns dark, so it stays distinct on every folder colour */
.feat__link { transition: color var(--dur-short) var(--ease-out), box-shadow var(--dur-long) var(--ease-out); }
.feat__link::before { background: var(--color-ink); }
.feat__link:hover, .feat__link:focus-visible { color: var(--color-paper); }
.feat__link:hover { box-shadow: var(--shadow-card), 0 0 0 1px var(--color-paper); }
.feat--ink .feat__link::before { background: var(--color-paper-3); }
.feat--ink .feat__link:hover, .feat--ink .feat__link:focus-visible { color: var(--color-ink); }
@media (prefers-reduced-motion: reduce) {
  .btn::before, .feat__link::before { transition: none; }
}

/* Precision: every band's first heading sits the same distance below the band's top edge */
.band.works { padding-top: calc(var(--section-gap-s) - var(--space-md)); }
@media (max-width: 59.99rem) {
  .band.works { padding-top: calc(var(--section-gap-s) - var(--space-sm)); }
  .testi { gap: var(--head-gap); }
}

/* Folder tabs bring their folder back */
.feat__tab { cursor: pointer; transition: filter var(--dur-short) var(--ease-out); }
.feat__tab:hover { filter: brightness(1.12); }
.feat__tab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .feat__tab { transition: none; } }

/* The sticky portfolio title masks the full width, so folders sliding under it never show beside the text */
.works__title { max-width: none; }

/* 404 page */
.lost { display: grid; gap: var(--space-lg); justify-items: start; align-content: center; min-height: calc(100svh - 73px); padding-block: var(--section-gap-s); }
.lost__code { font-size: clamp(6rem, 18vw, 14rem); font-weight: 800; font-stretch: 125%; line-height: 0.85; letter-spacing: -0.04em; color: var(--color-accent); }
.lost h1 { font-size: var(--text-section); }
.lost__en { color: var(--color-muted); }
.lost > * + * { margin-top: 0; }
.lost h1 + .lead { margin-top: calc(var(--space-sm) * -1); }

/* PPTPremium band: the sub-brand's spinning badge on the corner of the stage photo, as on the PPTPremium hero */
.ppt__visual { position: relative; }
.ppt__visual .badge { position: absolute; right: calc(var(--space-xl) * -1); bottom: calc(var(--space-xl) * -1); width: 136px; }
@media (max-width: 59.99rem) {
  .ppt__visual .badge { right: var(--space-md); bottom: calc(var(--space-xl) * -1); width: 104px; }
  .ppt__visual { margin-bottom: var(--space-xl); }
}