/* ==========================================================================
   ZONEX — "Press Run"
   Concept: the site is a sheet of paper going through a press. Dark press
   room (ink) → the printed sheet slides out (paper) → registration marks,
   crop marks and CMYK misregistration are the graphic language.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
    --ink: #0b0c10;
    --ink-2: #14161d;
    --ink-3: #20232d;
    --paper: #f2f0ea;
    --paper-2: #e7e4db;
    --paper-3: #d9d5c9;
    --blue: #1f58e8;          /* Zonex brand blue, sampled from the logo */
    --blue-hi: #7a9dff;       /* brand blue lifted for text on ink */
    --cyan: #00a0e3;
    --magenta: #e5007d;
    --yellow: #ffe600;

    --f-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-paper: cubic-bezier(.65, 0, .35, 1);
    --t-fast: .25s;
    --t-med: .6s;

    --gutter: clamp(16px, 4vw, 56px);
    --nav-h: 76px;
    --radius: 3px;

    --shadow-sheet:
        0 1px 0 rgba(255, 255, 255, .6) inset,
        0 1px 2px rgba(11, 12, 16, .08),
        0 8px 20px -6px rgba(11, 12, 16, .16),
        0 30px 60px -20px rgba(11, 12, 16, .25);
}

/* Section themes drive colour; every section declares one. */
[data-theme="dark"] { --bg: var(--ink); --fg: var(--paper); --muted: #9a9caa; --line: rgba(242, 240, 234, .14); --accent: var(--blue-hi); --focus: var(--yellow); }
[data-theme="light"] { --bg: var(--paper); --fg: var(--ink); --muted: #5d5f68; --line: rgba(11, 12, 16, .14); --accent: var(--blue); --focus: var(--blue); }
[data-theme="blue"] { --bg: var(--blue); --fg: var(--paper); --muted: rgba(242, 240, 234, .7); --line: rgba(242, 240, 234, .25); --accent: var(--yellow); --focus: var(--yellow); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--f-sans);
    font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
    line-height: 1.55;
    font-variation-settings: "wdth" 100;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Paper grain over everything — tactile, very subtle. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: .07;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
em { font-style: italic; }

section, footer, .marquee { background: var(--bg); color: var(--fg); position: relative; }

:focus-visible { outline: 3px solid var(--focus, var(--blue)); outline-offset: 3px; border-radius: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
    position: fixed; left: 16px; top: -60px; z-index: 200;
    background: var(--yellow); color: var(--ink); padding: 10px 16px; font-weight: 700;
}
.skip:focus { top: 16px; }

.wrap { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; }

/* ---------- Type ---------- */
.h-xl, .h-lg, .hero__title {
    font-weight: 780;
    font-variation-settings: "wdth" 112;
    letter-spacing: -.035em;
    line-height: .9;
    text-wrap: balance;
}
.h-xl { font-size: clamp(2.8rem, 7.4vw, 7.5rem); }
.h-lg { font-size: clamp(2.4rem, 5.6vw, 5.6rem); }
.h-xl em, .h-lg em, .hero__title em {
    font-weight: 300;
    font-variation-settings: "wdth" 78;
    color: var(--accent);
    letter-spacing: -.02em;
}

.label {
    display: inline-flex; align-items: center; gap: .8em;
    color: var(--muted);
    margin-bottom: clamp(20px, 3vw, 40px);
}
.label span {
    display: inline-grid; place-items: center;
    min-width: 2.6em; height: 2.6em; padding: 0 .4em;
    border: 1px solid currentColor; border-radius: 50%;
    color: var(--fg);
}

.eyebrow { display: inline-flex; align-items: center; gap: .7em; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--magenta); box-shadow: 10px 0 0 var(--cyan), 20px 0 0 var(--yellow); margin-right: 22px; }

/* ---------- Rolling labels (letters swap on hover) ---------- */
[data-roll] .roll { display: inline-flex; overflow: hidden; vertical-align: top; line-height: 1.2; }
[data-roll] .roll__c { display: inline-block; position: relative; white-space: pre; transition: transform .5s var(--ease-out); transition-delay: calc(var(--ci) * 18ms); }
[data-roll] .roll__c::after { content: attr(data-c); position: absolute; left: 0; top: 100%; }
:is(a, button):is(:hover, :focus-visible) [data-roll] .roll__c,
a[data-roll]:is(:hover, :focus-visible) .roll__c { transform: translateY(-100%); }

/* ---------- Buttons ---------- */
.btn {
    --btn-bg: var(--fg); --btn-fg: var(--bg); --fill: var(--blue);
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; gap: .7em;
    min-height: 52px; padding: 0 26px;
    border: 1px solid transparent; border-radius: 999px;
    background: var(--btn-bg); color: var(--btn-fg);
    font-weight: 600; font-size: 1rem; letter-spacing: -.005em;
    cursor: pointer;
    transition: color var(--t-fast), transform .2s var(--ease-out), border-color var(--t-fast);
}
.btn::before { /* ink fills from the pointer */
    content: ""; position: absolute; z-index: -1;
    left: var(--mx, 50%); top: var(--my, 50%);
    width: 260%; aspect-ratio: 1; border-radius: 50%;
    background: var(--fill);
    transform: translate(-50%, -50%) scale(0);
    transition: transform .55s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: translate(-50%, -50%) scale(1); }
.btn:hover, .btn:focus-visible { color: var(--paper); }
.btn:active { transform: scale(.97); }
.btn__arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .4s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--paper { --btn-bg: var(--paper); --btn-fg: var(--ink); }
.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--paper); }
.btn--blue { --btn-bg: var(--blue); --btn-fg: var(--paper); --fill: var(--ink); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --fill: var(--fg); border-color: var(--line); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--bg); border-color: var(--fg); }

.link-arrow {
    display: inline-flex; align-items: center; gap: .6em;
    font-weight: 600; color: var(--accent);
    border-bottom: 1px solid currentColor; padding-bottom: 4px;
}
.link-arrow::after { content: "→"; transition: transform .4s var(--ease-out); }
.link-arrow:hover::after { transform: translateX(5px); }

/* ---------- Logo (PNG used as a mask so it takes the current colour) ---------- */
.logo {
    display: block; height: 24px; aspect-ratio: 2469 / 751;
    background: currentColor;
    -webkit-mask: url("/img/opt/logo-mask.png") center / contain no-repeat;
            mask: url("/img/opt/logo-mask.png") center / contain no-repeat;
}

/* ---------- Navigation ---------- */
.nav {
    --nfg: var(--paper); --nbg: rgba(20, 22, 29, .55); --nline: rgba(242, 240, 234, .14);
    position: fixed; inset: 0 0 auto; z-index: 100;
    height: var(--nav-h);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
    padding: 0 var(--gutter);
    color: var(--nfg);
    transition: color .4s, transform .5s var(--ease-out);
}
.nav[data-on="light"] { --nfg: var(--ink); --nbg: rgba(242, 240, 234, .72); --nline: rgba(11, 12, 16, .12); }
.nav[data-on="light"] .nav__logo { color: var(--blue); }
.nav.is-hidden { transform: translateY(-110%); }
.menu-open .nav[data-on] { --nfg: var(--paper); --nbg: rgba(20, 22, 29, .55); --nline: rgba(242, 240, 234, .14); }
.menu-open .nav[data-on] .nav__logo { color: var(--paper); }
.nav__logo { justify-self: start; padding: 10px 0; }
.nav__pill ul {
    display: flex; gap: 4px; padding: 5px;
    background: var(--nbg); border: 1px solid var(--nline); border-radius: 999px;
    -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
    transition: background .4s, border-color .4s;
}
.nav__pill a {
    display: block; padding: 9px 18px; border-radius: 999px;
    font-size: .92rem; font-weight: 550;
    transition: background var(--t-fast), color var(--t-fast);
}
.nav__pill a[aria-current="page"] { background: var(--nfg); color: var(--ink); }
.nav[data-on="light"] .nav__pill a[aria-current="page"] { color: var(--paper); }
.nav__pill a:not([aria-current]):hover { background: var(--nline); }
.nav__cta { justify-self: end; min-height: 46px; padding: 0 20px; font-size: .92rem; }
.nav:not([data-on="light"]) .nav__cta { --btn-bg: var(--paper); --btn-fg: var(--ink); }
.nav__toggle { display: none; }

@media (max-width: 899px) {
    :root { --nav-h: 64px; }
    .nav { grid-template-columns: 1fr auto; }
    .nav__pill, .nav__cta { display: none; }
    .nav__toggle {
        display: grid; place-items: center; justify-self: end;
        width: 48px; height: 48px; border-radius: 50%;
        border: 1px solid var(--nline); background: var(--nbg);
        -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
        cursor: pointer;
    }
    .nav__burger { display: grid; gap: 6px; width: 20px; }
    .nav__burger i { display: block; height: 2px; background: currentColor; transition: transform .4s var(--ease-out); }
    .nav__toggle[aria-expanded="true"] .nav__burger i:first-child { transform: translateY(4px) rotate(45deg); }
    .nav__toggle[aria-expanded="true"] .nav__burger i:last-child { transform: translateY(-4px) rotate(-45deg); }
}

.menu {
    position: fixed; inset: 0; z-index: 99;
    background: var(--ink); color: var(--paper);
    padding: calc(var(--nav-h) + 24px) var(--gutter) 32px;
    overflow-y: auto;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .6s var(--ease-paper);
}
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu__label { color: #9a9caa; margin-bottom: 24px; }
.menu__links a {
    display: flex; align-items: baseline; gap: 14px;
    padding: 10px 0; border-bottom: 1px solid rgba(242, 240, 234, .12);
    font-size: clamp(2.4rem, 11vw, 4rem); font-weight: 760; font-variation-settings: "wdth" 115; letter-spacing: -.04em; line-height: 1;
    opacity: 0; transform: translateY(24px);
    transition: opacity .5s, transform .6s var(--ease-out);
    transition-delay: calc(.12s + var(--i) * 60ms);
}
.menu__links a .mono { color: var(--blue-hi); }
.menu__links a[aria-current="page"] { color: var(--blue-hi); }
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu__contact { display: grid; gap: 12px; margin-top: 32px; }
.menu__contact a { display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid rgba(242, 240, 234, .12); font-weight: 600; font-size: 1.15rem; }
.menu__contact .mono { color: #9a9caa; }

/* ==========================================================================
   HERO — the press room
   ========================================================================== */
.hero { height: 200svh; background: var(--ink); }
.hero__stage {
    position: sticky; top: 0;
    height: 100svh; min-height: 560px;
    overflow: hidden;
    background:
        radial-gradient(55% 60% at 72% 42%, rgba(31, 88, 232, .32), transparent 70%),
        radial-gradient(40% 40% at 15% 90%, rgba(229, 0, 125, .10), transparent 70%),
        var(--ink);
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s; }
.has-webgl .hero__canvas { opacity: 1; }
.hero__stage::after { /* scrim keeps the headline readable over paper */
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(70% 60% at 10% 85%, rgba(11, 12, 16, .82), transparent 70%),
        linear-gradient(to top, rgba(11, 12, 16, .7), transparent 45%);
}
.hud { z-index: 2; }
.hero__content, .hero__foot { z-index: 3; }
.has-webgl .hero__fallback { opacity: 0; visibility: hidden; transition: opacity .8s, visibility 0s .8s; }

/* CSS fallback / first paint: printed sheets in 3D space */
.hero__fallback { position: absolute; inset: 0; perspective: 1400px; pointer-events: none; }
.psheet {
    --w: clamp(130px, 17vw, 270px);
    position: absolute; width: var(--w); aspect-ratio: 210 / 297;
    background: linear-gradient(160deg, #fbfaf6, #e9e6dd);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .05);
    transform: translate3d(calc(var(--px, 0) * var(--d) * 1px), calc(var(--py, 0) * var(--d) * 1px), 0) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
    transition: transform 1.2s var(--ease-out);
    overflow: hidden;
}
.psheet__word {
    position: absolute; left: 10%; bottom: 14%;
    font-weight: 850; font-variation-settings: "wdth" 125; letter-spacing: -.04em;
    font-size: calc(var(--w) * .16); color: var(--ink); line-height: 1;
    writing-mode: vertical-rl; transform: rotate(180deg);
}
.psheet__bar { position: absolute; right: 8%; top: 8%; width: 10%; height: 40%; background: linear-gradient(var(--cyan) 0 25%, var(--magenta) 0 50%, var(--yellow) 0 75%, var(--ink) 0); }
.psheet__marks { position: absolute; inset: 6%; border: 1px solid rgba(11, 12, 16, .25); }
.psheet--0 { --d: 18; --rx: 12deg; --ry: -28deg; --rz: -8deg; left: 54%; top: 14%; }
.psheet--1 { --d: 30; --rx: -8deg; --ry: -18deg; --rz: 6deg; left: 70%; top: 30%; }
.psheet--2 { --d: 12; --rx: 20deg; --ry: 24deg; --rz: -14deg; left: 44%; top: 46%; --w: clamp(110px, 13vw, 210px); }
.psheet--3 { --d: 40; --rx: -16deg; --ry: 30deg; --rz: 12deg; left: 82%; top: 6%; --w: clamp(100px, 11vw, 180px); }
.psheet--4 { --d: 24; --rx: 6deg; --ry: -34deg; --rz: 18deg; left: 62%; top: 60%; --w: clamp(120px, 14vw, 220px); }
.psheet--4 .psheet__bar { background: var(--blue); }
@media (max-width: 899px) {
    .psheet--0 { left: 40%; top: 12%; } .psheet--1 { left: 64%; top: 22%; } .psheet--2 { left: 6%; top: 12%; }
    .psheet--3 { left: 78%; top: 4%; } .psheet--4 { left: 58%; top: 36%; }
}

/* Registration HUD */
.hud { position: absolute; inset: calc(var(--nav-h) + 4px) var(--gutter) 22px; pointer-events: none; color: rgba(242, 240, 234, .55); }
.hud__crop { position: absolute; width: 22px; height: 22px; border: 0 solid currentColor; }
.hud__crop--tl { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.hud__crop--tr { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.hud__crop--bl { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.hud__crop--br { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
.hud__reg { position: absolute; left: 50%; top: -2px; width: 26px; transform: translateX(-50%); fill: none; stroke: currentColor; stroke-width: 1; }
.hud__bar { position: absolute; right: 0; top: 50%; display: grid; gap: 3px; transform: translateY(-50%); }
.hud__bar span { width: 10px; height: 18px; }
.hud__bar span:nth-child(1) { background: var(--cyan); } .hud__bar span:nth-child(2) { background: var(--magenta); }
.hud__bar span:nth-child(3) { background: var(--yellow); } .hud__bar span:nth-child(4) { background: var(--paper); }
.hud__bar span:nth-child(5) { background: var(--blue); } .hud__bar span:nth-child(6) { background: rgba(242, 240, 234, .3); }
.hud__meta { position: absolute; top: 34px; font-size: .68rem; }
.hud__meta--l { left: 34px; } .hud__meta--r { right: 34px; text-align: right; }
@media (max-height: 820px) { .hud__meta--l { display: none; } }

.hero__content {
    position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(96px, 16vh, 160px);
    max-width: 1100px;
    will-change: transform, opacity;
}
.hero__title { font-size: clamp(3.4rem, min(12.4vw, 19svh), 13.5rem); margin: 18px 0 clamp(18px, 2.4vw, 30px); line-height: .84; }
.hero__title .line, .page-hero__title .line { display: block; overflow: hidden; padding: .14em 0 .06em; margin-top: -.14em; } /* headroom for Š Č Ć Ž */
.hero__title .line > span { display: inline-block; }
.hero__lead { max-width: 34ch; color: rgba(242, 240, 234, .78); font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.hero__foot {
    position: absolute; left: var(--gutter); right: var(--gutter); bottom: 34px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    padding-left: 34px; padding-right: 34px;
}
.hero__phones { display: flex; gap: 24px; }
.hero__phones a { font-weight: 600; font-size: .95rem; }
.hero__phones a .mono { color: var(--muted); margin-right: .4em; }
.hero__phones a:hover { color: var(--blue-hi); }
.hero__scroll { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.hero__scroll span { width: 1px; height: 34px; background: linear-gradient(var(--paper), transparent); animation: drip 2s var(--ease-paper) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.status { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); }
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.status.is-open .status__dot { background: #2fd27a; box-shadow: 0 0 0 0 rgba(47, 210, 122, .6); animation: ping 2s infinite; }
.status.is-open { color: var(--fg); }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(47, 210, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 210, 122, 0); } }

@media (max-width: 899px) {
    .hero { height: 150svh; }
    .hud__meta, .hud__reg, .hud__bar { display: none; }
    .hero__content { bottom: 150px; }
    .hero__foot { bottom: 92px; padding: 0; }
    .hero__phones, .hero__scroll { display: none; }
}

/* ==========================================================================
   01 · ABOUT — the printed sheet slides over the press
   ========================================================================== */
.sheet-edge {
    z-index: 2;
    margin-top: -70svh;
    box-shadow: 0 -40px 80px -20px rgba(0, 0, 0, .55), 0 -1px 0 rgba(255, 255, 255, .7);
    transform-origin: 50% 0;
}
.sheet-edge::before { /* trim marks along the top edge of the sheet */
    content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 18px; height: 14px;
    border-left: 1px solid var(--line); border-right: 1px solid var(--line);
    background: linear-gradient(var(--line), var(--line)) center 0 / 1px 100% no-repeat;
}
.about { padding: clamp(110px, 16vw, 200px) 0 clamp(80px, 10vw, 140px); }
@media (max-width: 899px) { .sheet-edge { margin-top: -35svh; } }
.about__statement {
    font-size: clamp(1.9rem, 4.4vw, 4.4rem);
    font-weight: 560; font-variation-settings: "wdth" 96; letter-spacing: -.03em; line-height: 1.04;
    max-width: 22ch; text-wrap: pretty;
}
.about__statement .w { display: inline-block; transition: opacity .2s; }
.about__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 6vw, 100px); margin-top: clamp(60px, 9vw, 130px); align-items: end; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.stats__item { padding: 20px 20px 0 0; border-right: 1px solid var(--line); }
.stats__item:last-child { border-right: 0; }
.stats__item + .stats__item { padding-left: 20px; }
.stats dt { color: var(--muted); }
.stats dd {
    font-size: clamp(4rem, 9vw, 9rem); font-weight: 800; font-variation-settings: "wdth" 125;
    letter-spacing: -.05em; line-height: 1; margin-top: 10px;
    font-variant-numeric: tabular-nums;
}
.stats__item:nth-child(1) dd { color: var(--blue); }
.about__copy p { color: var(--muted); max-width: 46ch; margin-bottom: 24px; }
@media (max-width: 899px) {
    .about__grid { grid-template-columns: 1fr; }
    .stats__item + .stats__item { padding-left: 12px; }
    .stats__item { padding-right: 12px; }
    .stats dt { font-size: .62rem; }
}

/* ==========================================================================
   02 · SERVICES — sheets in the paper feed
   ========================================================================== */
.services { padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 140px); }
.services__pin { display: grid; grid-template-columns: minmax(280px, 30vw) 1fr; gap: clamp(24px, 4vw, 64px); padding-left: var(--gutter); }
.services__head { align-self: start; position: sticky; top: calc(var(--nav-h) + 40px); padding-bottom: 40px; }
.services__head .h-xl { font-size: clamp(2.8rem, 5.6vw, 6rem); }
.services__hint { margin-top: 28px; color: var(--muted); }
.feed { margin-top: 14px; height: 4px; background: var(--paper-3); overflow: hidden; max-width: 260px; }
.feed span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--yellow), var(--ink)); }

.services__track {
    display: flex; gap: clamp(18px, 2.2vw, 32px);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
    padding: 30px var(--gutter) 40px 10px;
}
.sheet-card { flex: 0 0 clamp(270px, 26vw, 400px); scroll-snap-align: start; }
.sheet-card article {
    position: relative; height: 100%;
    display: flex; flex-direction: column; gap: 14px;
    padding: 18px 18px 26px;
    background: #faf9f5;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sheet);
    transform: rotate(calc((var(--i) - 3) * .5deg));
    transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out);
}
.sheet-card article::before, .sheet-card article::after { /* crop marks outside the sheet */
    content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid var(--muted); opacity: .6;
}
.sheet-card article::before { left: -10px; top: -10px; border-left-width: 1px; border-top-width: 1px; }
.sheet-card article::after { right: -10px; bottom: -10px; border-right-width: 1px; border-bottom-width: 1px; }
.sheet-card:hover article { transform: translateY(-8px) rotate(0); box-shadow: var(--shadow-sheet), 0 50px 80px -30px rgba(31, 88, 232, .35); }
.sheet-card__top { display: flex; justify-content: space-between; color: var(--muted); font-size: .68rem; }
.sheet-card__img { aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--paper-2); }
.sheet-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), filter .6s var(--ease-out); }
.sheet-card:hover .sheet-card__img img { transform: scale(1.05); filter: drop-shadow(4px 0 0 rgba(0, 160, 227, .7)) drop-shadow(-4px 0 0 rgba(229, 0, 125, .7)); }
.sheet-card__title { font-size: clamp(1.6rem, 2.1vw, 2.15rem); font-weight: 760; font-variation-settings: "wdth" 108; letter-spacing: -.03em; line-height: 1; margin-top: 6px; }
.sheet-card__lead { color: var(--muted); font-size: .98rem; }
.sheet-card__list { margin-top: auto; border-top: 1px solid var(--line); }
.sheet-card__list li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: .95rem; font-weight: 500; }
.sheet-card__list li::before { content: "+"; font-family: var(--f-mono); color: var(--blue); }

/* Print reveal: image scans in line by line and the CMYK plates come into register */
[data-print] { position: relative; }
.js [data-print].is-pending img { clip-path: inset(0 0 100% 0); filter: drop-shadow(14px 0 0 rgba(0, 160, 227, .8)) drop-shadow(-14px 0 0 rgba(229, 0, 125, .8)); }
.js [data-print] img { transition: clip-path 1.3s var(--ease-paper), filter 1.6s var(--ease-out) .5s, transform 1.2s var(--ease-out); }
[data-print]::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: var(--blue); box-shadow: 0 0 18px 2px rgba(31, 88, 232, .7);
    opacity: 0; transform: translateY(0);
}
.js [data-print].is-printing::after { animation: scan 1.3s var(--ease-paper) forwards; }
@keyframes scan { 0% { opacity: 1; transform: translateY(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--h, 300px)); } }

/* Desktop: the head stays left, the track is driven horizontally by scroll */
.is-hscroll .services__pin { height: 100svh; align-items: center; overflow: hidden; }
.is-hscroll .services__head { /* the printer housing the sheets feed under */
    position: relative; top: 0; z-index: 2; align-self: stretch;
    display: flex; flex-direction: column; justify-content: center;
    margin-left: calc(var(--gutter) * -1); padding: 0 24px 0 var(--gutter);
    background: var(--paper);
    box-shadow: 40px 0 50px -30px rgba(11, 12, 16, .25);
}
.is-hscroll .services__head::after { /* paper slot */
    content: ""; position: absolute; right: 0; top: 18%; bottom: 18%; width: 2px;
    background: linear-gradient(transparent, var(--ink) 20%, var(--ink) 80%, transparent);
    opacity: .25;
}
.is-hscroll .sheet-card { height: min(80svh, 680px); }
.is-hscroll .sheet-card__img { aspect-ratio: auto; flex: 1 1 auto; min-height: 120px; }
.is-hscroll .services__track { overflow: visible; scroll-snap-type: none; padding-top: 0; padding-bottom: 0; will-change: transform; }
.services.is-hscroll { padding-block: 0; }

/* Mobile: the sheets stack on top of each other as you scroll */
@media (max-width: 899px) {
    .services__pin { grid-template-columns: 1fr; padding: 0 var(--gutter); }
    .services__head { position: relative; top: 0; padding-bottom: 0; }
    .services__track { flex-direction: column; overflow: visible; padding: 10px 0 0; gap: 24px; }
    .sheet-card { flex: none; position: sticky; top: calc(var(--nav-h) + 12px + var(--i) * 10px); }
    .sheet-card article { transform: rotate(calc((var(--i) - 3) * .4deg)); }
    .sheet-card__img { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee { overflow: hidden; padding: clamp(20px, 3vw, 40px) 0; }
.marquee__row { display: flex; width: max-content; will-change: transform; animation: marquee 40s linear infinite; }
.has-gsap .marquee__row { animation: none; }
.marquee__row span {
    display: flex; align-items: center; gap: .5em; padding-right: .5em; white-space: nowrap;
    font-size: clamp(3rem, 9vw, 9rem); font-weight: 820; font-variation-settings: "wdth" 125; letter-spacing: -.04em; line-height: 1;
    text-transform: uppercase;
}
.marquee__row i { /* registration mark as separator */
    display: inline-block; width: .5em; height: .5em; border: .06em solid currentColor; border-radius: 50%;
    background: linear-gradient(currentColor, currentColor) center / .06em 140% no-repeat, linear-gradient(currentColor, currentColor) center / 140% .06em no-repeat;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   03 · PRODUCTS — typographic index with a floating proof
   ========================================================================== */
.products { padding: clamp(80px, 12vw, 180px) 0; }
.split-head { display: grid; grid-template-columns: 1fr 1.6fr; gap: 0 var(--gutter); align-items: end; margin-bottom: clamp(40px, 6vw, 90px); }
.split-head .label { grid-column: 1 / -1; }
.split-head__copy { color: var(--muted); max-width: 38ch; justify-self: end; }
@media (max-width: 899px) { .split-head { grid-template-columns: 1fr; } .split-head__copy { justify-self: start; margin-top: 20px; } }

.index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(20px, 3vw, 48px); }
.index__group-name { display: flex; justify-content: space-between; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--fg); }
.index__item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--line);
    font-size: clamp(1.35rem, 2.2vw, 2.2rem); font-weight: 620; letter-spacing: -.025em; line-height: 1.05;
    font-variation-settings: "wdth" 95;
    transition: font-variation-settings .5s var(--ease-out), color .3s, padding .5s var(--ease-out), opacity .3s;
}
.index__item::after { content: "↗"; font-size: .6em; opacity: 0; transform: translate(-8px, 8px); transition: opacity .3s, transform .4s var(--ease-out); }
.index__item:hover, .index__item:focus-visible { color: var(--blue); font-variation-settings: "wdth" 125; padding-left: 10px; }
.index__item:hover::after, .index__item:focus-visible::after { opacity: 1; transform: none; }
@media (hover: hover) { .index:has(.index__item:hover) .index__item:not(:hover) { opacity: .35; } }
.index__thumb { display: none; }
@media (max-width: 899px) {
    .index { grid-template-columns: 1fr; gap: 36px; }
    .index__thumb { display: block; width: 52px; height: 52px; flex: none; order: -1; overflow: hidden; border-radius: 2px; background: var(--paper-2); }
    .index__thumb img { width: 100%; height: 100%; object-fit: cover; }
    .index__name { flex: 1; }
    .index__item::after { opacity: .5; transform: none; }
}
.proof {
    position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none;
    width: clamp(200px, 18vw, 280px); aspect-ratio: 3 / 4;
    background: var(--paper); padding: 8px; box-shadow: var(--shadow-sheet);
    opacity: 0; transform: translate3d(0, -50%, 0) scale(.6); transform-origin: 0 50%;
}
.proof img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none), (pointer: coarse) { .proof { display: none; } }

/* ==========================================================================
   04 · PROCESS — a tri-fold leaflet that unfolds
   ========================================================================== */
.process { padding: 0 0 clamp(100px, 14vw, 200px); }
.trifold { display: grid; grid-template-columns: repeat(3, 1fr); perspective: 2200px; }
.trifold__panel {
    position: relative; min-height: clamp(340px, 34vw, 460px);
    display: flex; flex-direction: column; gap: 14px;
    padding: clamp(24px, 3vw, 44px);
    background: #faf9f5;
    box-shadow: var(--shadow-sheet);
    transform-style: preserve-3d;
    backface-visibility: hidden;
}
.trifold__panel--0 { transform-origin: right center; }
.trifold__panel--2 { transform-origin: left center; }
.trifold__panel--1 { background: linear-gradient(90deg, rgba(0, 0, 0, .05), transparent 8%, transparent 92%, rgba(0, 0, 0, .05)), #faf9f5; z-index: 1; }
.trifold__num {
    font-size: clamp(6rem, 11vw, 11rem); font-weight: 850; font-variation-settings: "wdth" 125; line-height: .8; letter-spacing: -.06em;
    color: transparent; -webkit-text-stroke: 1.5px var(--ink);
    margin-bottom: auto;
}
.trifold__panel--1 .trifold__num { color: var(--blue); -webkit-text-stroke: 0; }
.trifold h3 { font-size: clamp(1.5rem, 2.2vw, 2.1rem); font-weight: 740; font-variation-settings: "wdth" 110; letter-spacing: -.03em; line-height: 1; }
.trifold p { color: var(--muted); max-width: 32ch; }
@media (max-width: 899px) {
    .trifold { grid-template-columns: 1fr; gap: 0; }
    .trifold__panel { min-height: 0; transform-origin: center top !important; }
    .trifold__num { font-size: 5rem; margin-bottom: 20px; }
    .trifold__panel + .trifold__panel { border-top: 1px dashed var(--line); }
}

/* ==========================================================================
   05 · STRIP — real photos from the shop
   ========================================================================== */
.strip { padding: clamp(90px, 12vw, 170px) 0 clamp(80px, 10vw, 140px); overflow: hidden; }
.strip__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; margin-bottom: clamp(40px, 5vw, 70px); }
.strip__head .label { grid-column: 1 / -1; margin-bottom: 0; }
.strip__rail {
    display: flex; gap: clamp(16px, 2vw, 28px);
    overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    padding: 30px var(--gutter) 40px;
    cursor: grab;
}
.strip__rail::-webkit-scrollbar { display: none; }
.strip__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.strip__rail.is-dragging * { pointer-events: none; }
.strip__item { flex: 0 0 clamp(240px, 24vw, 360px); scroll-snap-align: center; }
.strip__item figure {
    background: var(--paper); padding: 10px 10px 14px;
    transform: rotate(var(--r));
    transition: transform .8s var(--ease-out);
    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .7);
}
.strip__item:hover figure { transform: rotate(0) translateY(-10px); }
.strip__item img { aspect-ratio: 5 / 6; width: 100%; object-fit: cover; }
.strip__item figcaption { color: #5d5f68; padding-top: 10px; font-size: .64rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 899px) { .strip__head { grid-template-columns: 1fr; } .strip__head .btn { justify-self: start; } }

/* ==========================================================================
   06 · CONTACT — tickets and a work order
   ========================================================================== */
.contact { padding: clamp(90px, 12vw, 170px) 0; background: radial-gradient(50% 40% at 85% 0%, rgba(31, 88, 232, .22), transparent 70%), var(--ink); }
.contact__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px; margin-bottom: clamp(40px, 6vw, 80px); }
.contact__head .label { grid-column: 1 / -1; margin-bottom: 0; }
.contact__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
.locations { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.ticket {
    position: relative; color: var(--ink);
    background: var(--paper); padding: 22px clamp(20px, 2.4vw, 30px) 34px;
    border-radius: var(--radius);
    --muted: #5d5f68; --line: rgba(11, 12, 16, .14); --focus: var(--blue);
}
.ticket__perf { /* perforated tear line */
    position: absolute; left: 0; right: 0; bottom: -7px; height: 14px;
    background: radial-gradient(circle at 7px 7px, var(--ink) 4.5px, transparent 5px) 0 0 / 14px 14px repeat-x;
}
.ticket__head { display: flex; justify-content: space-between; color: var(--muted); padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.ticket__name { font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 800; font-variation-settings: "wdth" 120; letter-spacing: -.045em; line-height: 1; margin-top: 18px; }
.ticket__street { font-size: 1.2rem; font-weight: 500; margin: 4px 0 16px; }
.ticket__lines li { display: grid; grid-template-columns: 64px 1fr; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.ticket__lines .mono { color: var(--muted); }
.ticket__lines a { font-weight: 620; color: var(--blue); overflow-wrap: anywhere; min-height: 28px; display: inline-flex; align-items: center; }
.ticket__lines a:hover { text-decoration: underline; }
.ticket__hours { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; color: var(--muted); }
.ticket__hours div { display: flex; gap: 6px; }
.ticket__hours dd { color: var(--ink); }

.order {
    position: relative; color: var(--ink);
    background: #faf9f5; border-radius: var(--radius);
    padding: clamp(22px, 3vw, 40px);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
    background-image: repeating-linear-gradient(transparent 0 31px, rgba(31, 88, 232, .07) 31px 32px);
    --muted: #5d5f68; --line: rgba(11, 12, 16, .2); --focus: var(--blue);
}
.order__head { display: flex; justify-content: space-between; color: var(--muted); }
.order__no { color: var(--magenta); }
.order__title { font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 780; font-variation-settings: "wdth" 112; letter-spacing: -.04em; line-height: 1; margin: 14px 0 24px; }
.field { display: grid; gap: 6px; margin-bottom: 18px; border: 0; padding: 0; min-width: 0; }
.field label, .field legend { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 0; }
.field input, .field select, .field textarea {
    width: 100%; min-height: 48px; padding: 10px 2px;
    background: transparent; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0;
    font-size: 1.08rem; font-weight: 500;
    transition: border-color .3s, background .3s;
}
.field textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.field select { appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230b0c10' stroke-width='2'/%3E%3C/svg%3E") right 2px center / 18px no-repeat; padding-right: 26px; cursor: pointer; }
.field :is(input, select, textarea):focus { outline: none; border-color: var(--blue); background: rgba(31, 88, 232, .05); }
.field :is(input, select, textarea):focus-visible { box-shadow: 0 3px 0 0 var(--blue); }
.field [aria-invalid="true"] { border-color: var(--magenta); background: rgba(229, 0, 125, .05); }
.field__error { min-height: 1.2em; font-size: .85rem; color: #b8005f; font-weight: 600; }
.field-row { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; }
.field--choice { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.field--choice legend { width: 100%; margin-bottom: 6px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: 999px; font-weight: 600; transition: background .25s, color .25s; }
.chip input:checked + span { background: var(--ink); color: var(--paper); }
.chip input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.order__submit { width: 100%; justify-content: center; margin-top: 6px; }
.order__note { font-size: .85rem; color: var(--muted); margin-top: 14px; }
.order__status { margin-top: 12px; font-weight: 600; }
.order__status:empty { display: none; }
.order__status.is-ok { color: #13703f; }
.order__status.is-error { color: #b8005f; }
.order.is-sent .order__submit { --btn-bg: #13703f; }

@media (max-width: 899px) {
    .contact__grid { grid-template-columns: 1fr; }
    .contact__head { grid-template-columns: 1fr; }
    .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { padding: clamp(70px, 9vw, 120px) 0 calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); overflow: hidden; }
.footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 0 var(--gutter); max-width: 1480px; margin: 0 auto; }
.footer__label { color: var(--muted); margin-bottom: 14px; }
.footer__col li { padding: 3px 0; }
.footer__col a:hover { color: var(--blue-hi); }
.footer address { line-height: 1.8; }
.hours div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.hours dt { color: var(--muted); }
.footer__social { display: inline-block; margin-top: 18px; font-weight: 600; }
.footer__mark {
    display: flex; justify-content: space-between;
    padding: 0 calc(var(--gutter) * .6); margin: clamp(40px, 6vw, 90px) 0 clamp(20px, 3vw, 40px);
    font-size: 25.5vw; font-weight: 900; font-variation-settings: "wdth" 125; letter-spacing: -.06em; line-height: .78;
    color: var(--paper);
    user-select: none;
}
.footer__mark span { display: inline-block; transition: transform .7s var(--ease-out), text-shadow .5s var(--ease-out), color .5s; }
.footer__mark span:hover { transform: translateY(-4%); color: var(--blue); text-shadow: .04em 0 0 var(--cyan), -.04em 0 0 var(--magenta), 0 .03em 0 var(--yellow); }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 20px var(--gutter) 0; border-top: 1px solid var(--line); color: var(--muted); max-width: 1480px; margin: 0 auto; }
.footer__base a { text-transform: none; color: var(--fg); }
.footer__base a:hover { color: var(--blue-hi); }
@media (max-width: 899px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Mobile dock — call / inquire always within thumb reach
   ========================================================================== */
.dock { display: none; }
@media (max-width: 899px) {
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    .dock {
        position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 95;
        display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 6px; padding: 6px;
        background: rgba(20, 22, 29, .82); border: 1px solid rgba(242, 240, 234, .14); border-radius: 999px;
        -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
        transition: transform .5s var(--ease-out);
    }
    .dock.is-hidden { transform: translateY(140%); }
    .dock__btn {
        display: flex; align-items: center; justify-content: center; gap: 6px;
        min-height: 48px; border-radius: 999px; color: var(--paper);
        font-weight: 600; font-size: .9rem;
    }
    .dock__btn svg { width: 16px; height: 16px; fill: currentColor; }
    .dock__btn:active { background: rgba(242, 240, 234, .12); }
    .dock__btn--cta { background: var(--paper); color: var(--ink); }
}

/* ==========================================================================
   Cursor — a registration mark that follows a fine pointer
   ========================================================================== */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .cursor {
        display: block; position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none;
        width: 34px; height: 34px; margin: -17px 0 0 -17px;
        mix-blend-mode: difference; color: #fff;
        opacity: 0; transition: opacity .3s;
    }
    .cursor.is-on { opacity: 1; }
    .cursor span {
        position: absolute; inset: 0; border: 1px solid currentColor; border-radius: 50%;
        background: linear-gradient(currentColor, currentColor) center / 1px 60% no-repeat, linear-gradient(currentColor, currentColor) center / 60% 1px no-repeat;
        transition: transform .4s var(--ease-out), background-size .4s var(--ease-out);
    }
    .cursor.is-link span { transform: scale(1.7); background-size: 1px 0, 0 1px; }
}

/* ==========================================================================
   Intro — four plates, one pass each (first visit, max ~1.3s)
   ========================================================================== */
.intro { display: none; }
.is-intro .intro {
    position: fixed; inset: 0; z-index: 300;
    display: grid; place-items: center;
    background: var(--ink); color: var(--paper);
    animation: intro-out .7s var(--ease-paper) 2.6s forwards; /* failsafe if JS never runs */
}
.intro__plates { display: grid; gap: 6px; width: min(320px, 60vw); }
.intro__plates span { height: 10px; background: var(--c); transform: scaleX(0); transform-origin: left; }
.intro__plates span:nth-child(4) { background: var(--paper); }
.intro__count { position: absolute; left: var(--gutter); bottom: 28px; display: flex; align-items: baseline; gap: 12px; }
.intro__count span { font-family: var(--f-sans); font-size: clamp(3rem, 8vw, 6rem); font-weight: 300; font-variation-settings: "wdth" 70; letter-spacing: -.04em; line-height: 1; }
.intro__count small { color: #9a9caa; }
@keyframes intro-out { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }

/* ==========================================================================
   Inner pages
   ========================================================================== */
.page-hero { padding: calc(var(--nav-h) + clamp(60px, 10vw, 140px)) 0 clamp(60px, 8vw, 110px); overflow: hidden; }
.page-hero__title { font-size: clamp(3.6rem, 13vw, 14rem); font-weight: 820; font-variation-settings: "wdth" 120; letter-spacing: -.05em; line-height: .82; }
.page-hero__title em { font-weight: 300; font-variation-settings: "wdth" 72; color: var(--accent); }
.page-hero__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: clamp(30px, 5vw, 60px); align-items: end; }
.page-hero__lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem); max-width: 36ch; color: var(--muted); }
.page-hero__jump { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.page-hero__jump a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: .9rem; font-weight: 550; transition: background .25s, color .25s, border-color .25s; }
.page-hero__jump a:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
@media (max-width: 899px) { .page-hero__row { grid-template-columns: 1fr; } .page-hero__jump { justify-content: flex-start; } }

/* Services detail (editorial rows) */
.svc { padding-bottom: clamp(60px, 8vw, 120px); }
.svc__row {
    display: grid; grid-template-columns: 90px 1.1fr 1fr; gap: clamp(20px, 3vw, 56px);
    padding: clamp(36px, 5vw, 72px) 0; border-top: 1px solid var(--line);
    scroll-margin-top: calc(var(--nav-h) + 10px);
}
.svc__num { font-family: var(--f-mono); color: var(--muted); position: sticky; top: calc(var(--nav-h) + 30px); align-self: start; }
.svc__text { align-self: start; position: sticky; top: calc(var(--nav-h) + 30px); }
.svc__title { font-size: clamp(2.4rem, 5vw, 5rem); font-weight: 800; font-variation-settings: "wdth" 115; letter-spacing: -.045em; line-height: .92; }
.svc__tag { display: inline-block; margin: 18px 0 14px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.svc__lead { font-size: 1.15rem; color: var(--muted); max-width: 40ch; }
.svc__list { margin-top: 26px; border-top: 1px solid var(--fg); counter-reset: s; }
.svc__list li { counter-increment: s; display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 560; font-size: 1.08rem; }
.svc__list li::before { content: counter(s, decimal-leading-zero); font-family: var(--f-mono); font-size: .75rem; color: var(--accent); padding-top: .3em; }
.svc__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow-sheet); }
.svc__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) {
    .svc__row { grid-template-columns: 1fr; }
    .svc__num, .svc__text { position: static; }
    .svc__img { aspect-ratio: 4 / 3; order: -1; }
}

/* Paper datasheet */
.paper { padding: clamp(80px, 11vw, 160px) 0; }
.paper__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(30px, 5vw, 90px); align-items: start; }
.paper__stack { position: sticky; top: calc(var(--nav-h) + 40px); height: clamp(260px, 30vw, 400px); perspective: 900px; }
.paper__sheet {
    position: absolute; left: 10%; right: 10%; bottom: calc(var(--i) * 14%);
    height: max(2px, calc(var(--gsm, 100) / 300 * 22px));
    background: linear-gradient(90deg, #faf9f5, #ebe8de);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .3), 0 10px 20px -8px rgba(0, 0, 0, .6);
    transform: rotateX(62deg) rotateZ(-10deg);
    transition: transform .6s var(--ease-out), background .3s, box-shadow .6s;
}
.paper__sheet.is-active { transform: rotateX(62deg) rotateZ(-10deg) translateZ(40px) translateX(12px); background: var(--blue); box-shadow: 0 30px 40px -12px rgba(31, 88, 232, .6); }
.paper__note { position: absolute; left: 0; bottom: -40px; color: var(--muted); }
.datasheet { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.datasheet caption { text-align: left; color: var(--muted); padding-bottom: 14px; }
.datasheet th, .datasheet td { text-align: left; padding: 16px 12px 16px 0; border-bottom: 1px solid var(--line); }
.datasheet thead th { font-family: var(--f-mono); font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--fg); }
.datasheet td:not(:first-child), .datasheet th:not(:first-child) { text-align: right; padding-right: 0; padding-left: 12px; }
.datasheet tbody th { font-weight: 600; font-size: 1.08rem; }
.datasheet tbody td { font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 700; font-variation-settings: "wdth" 110; letter-spacing: -.02em; }
.datasheet tbody tr { transition: background .25s; cursor: default; }
.datasheet tbody tr:hover, .datasheet tbody tr.is-active { background: rgba(31, 88, 232, .1); }
[data-theme="dark"] .datasheet tbody tr:hover, [data-theme="dark"] .datasheet tbody tr.is-active { background: rgba(122, 157, 255, .12); }
@media (max-width: 899px) { .paper__grid { grid-template-columns: 1fr; } .paper__stack { display: none; } }

/* Product catalogue */
.catalog { padding: clamp(80px, 11vw, 160px) 0; }
.catalog__group + .catalog__group { margin-top: clamp(50px, 7vw, 100px); }
.catalog__group-name { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--fg); margin-bottom: 26px; }
.catalog__group-name h3 { font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 760; font-variation-settings: "wdth" 112; letter-spacing: -.035em; }
.catalog__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: clamp(14px, 2vw, 26px); }
.catalog__item figure { background: #faf9f5; padding: 8px 8px 12px; box-shadow: var(--shadow-sheet); transition: transform .6s var(--ease-out); }
.catalog__item:nth-child(odd) figure { transform: rotate(-.6deg); }
.catalog__item:nth-child(even) figure { transform: rotate(.5deg); }
.catalog__item:hover figure { transform: translateY(-6px) rotate(0); }
.catalog__item img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; background: var(--paper-2); }
.catalog__item figcaption { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; font-weight: 640; font-size: 1.02rem; color: var(--ink); }
.catalog__item figcaption .mono { color: #5d5f68; font-size: .62rem; }
.catalog__note { margin-top: 30px; color: var(--muted); font-size: .9rem; }

/* Gallery page */
.gallery { padding: 0 0 clamp(80px, 10vw, 140px); }
.masonry { columns: 4 260px; column-gap: clamp(14px, 1.6vw, 22px); }
.masonry li { break-inside: avoid; margin-bottom: clamp(14px, 1.6vw, 22px); }
.masonry button {
    display: block; width: 100%; padding: 8px 8px 10px; border: 0; cursor: zoom-in;
    background: var(--paper); text-align: left;
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8);
    transition: transform .6s var(--ease-out);
}
.masonry button:hover { transform: translateY(-6px) rotate(-.6deg); }
.masonry img { width: 100%; background: var(--paper-2); }
.masonry .mono { display: block; padding-top: 8px; color: #5d5f68; font-size: .62rem; }

.lightbox {
    width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
    background: rgba(11, 12, 16, .94); color: var(--paper);
}
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: 14px var(--gutter); }
.lightbox__fig { display: grid; place-items: center; min-height: 0; padding: 0 var(--gutter); }
.lightbox__fig img { max-height: 100%; max-width: 100%; object-fit: contain; background: var(--paper); padding: 10px; }
.lightbox__cap { padding: 14px var(--gutter) 24px; color: #c8c9d0; }
.lightbox__btn {
    min-width: 48px; min-height: 48px; padding: 0 16px; border-radius: 999px;
    border: 1px solid rgba(242, 240, 234, .25); background: transparent; color: var(--paper); cursor: pointer;
    font-weight: 600;
}
.lightbox__btn:hover { background: var(--paper); color: var(--ink); }
.lightbox__nav { display: flex; gap: 8px; }

.cta-band { padding: clamp(80px, 10vw, 140px) 0; text-align: left; }
.cta-band .wrap { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; }
@media (max-width: 899px) { .cta-band .wrap { grid-template-columns: 1fr; } }

/* ==========================================================================
   Page transitions (cross-document View Transitions, progressive)
   ========================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .5s var(--ease-paper) both; }
::view-transition-new(root) { animation: vt-in .7s var(--ease-out) both; }
@keyframes vt-out { to { transform: translateY(-6%); opacity: 0; } }
@keyframes vt-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ==========================================================================
   Reduced motion: keep the art direction, drop the movement
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .is-intro .intro { display: none; }
    .marquee__row { animation: none; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
.page-hero__title .line > span { display: inline-block; }