/* Regal Press Canada v2. Design system: press-sheet. CMYK inks on warm paper, press-black rooms. */
:root {
  --ink: oklch(0.17 0.006 250);
  --ink-2: oklch(0.24 0.008 250);
  --ink-3: oklch(0.33 0.01 250);
  --paper: oklch(0.985 0.003 240);
  --paper-2: oklch(0.955 0.006 240);
  --slate: #7a868e;
  --slate-dk: oklch(0.44 0.018 235);
  --cyan: #00aeef;
  --cyan-ink: oklch(0.5 0.12 238);
  --cyan-pale: oklch(0.88 0.06 228);
  --magenta: var(--slate);
  --yellow: var(--cyan-pale);
  --on-ink: oklch(0.96 0.004 240);
  --on-ink-2: oklch(0.78 0.01 240);
  --line: oklch(0.87 0.008 240);
  --line-ink: oklch(0.36 0.01 250);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-med: 320ms;
  --t-slow: 760ms;

  --f-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-body: "Hanken Grotesk", system-ui, sans-serif;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --max: 78rem;
  --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2.5rem; --s-5: clamp(3.5rem, 8vw, 7rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.62 var(--f-body); -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--cyan-ink); outline-offset: 3px; border-radius: 2px; }
.on-ink :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--cyan); }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 200ms var(--ease-in-out) both vt-out; }
::view-transition-new(root) { animation: 360ms var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

.skip { position: absolute; left: 1rem; top: -4rem; background: var(--cyan); color: var(--ink); padding: .6rem 1rem; z-index: 100; font-weight: 600; transition: top var(--t-fast); }
.skip:focus { top: 1rem; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* Type */
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: .94; letter-spacing: .005em; text-transform: uppercase; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(3.3rem, 7.6vw, 7.2rem); font-weight: 900; }
h2 { font-size: clamp(2.5rem, 6.4vw, 5.2rem); }
h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1; }
p { margin: 0 0 1em; max-width: 66ch; }
.lede { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.5; max-width: 52ch; }
.kicker { font: 600 .8rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--slate-dk); display: inline-flex; align-items: center; gap: .7rem; }
.kicker::before { content: ""; width: 2.2rem; height: 2px; background: currentColor; }
.on-ink .kicker { color: var(--on-ink-2); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); color: var(--on-ink); transition: box-shadow var(--t-med); }
.site-header.scrolled { box-shadow: 0 8px 28px -12px oklch(0.1 0.01 255 / .55); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 7rem; transition: min-height var(--t-med) var(--ease-out); }
.site-header.scrolled .wrap { min-height: 4.8rem; }
.brand img { height: 5.6rem; width: auto; transition: height var(--t-med) var(--ease-out); }
.site-header.scrolled .brand img { height: 3.6rem; }
.nav { display: flex; gap: .25rem; align-items: center; background: var(--slate-dk); padding: .3rem; border-radius: 999px; }
.nav a { position: relative; text-decoration: none; padding: .62rem 1.05rem; border-radius: 999px; font-weight: 600; font-size: .95rem; letter-spacing: .02em; text-transform: uppercase; transition: background var(--t-fast), color var(--t-fast); min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover { background: oklch(1 0 0 / .1); }
.nav a[aria-current="page"] { background: var(--paper); color: var(--ink); }
.nav-toggle { display: none; min-width: 44px; min-height: 44px; background: none; border: 1px solid var(--line-ink); border-radius: .6rem; align-items: center; justify-content: center; gap: .5rem; padding: 0 .9rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.nav-toggle span { display: block; width: 1.1rem; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }

@media (max-width: 52rem) {
  .nav-toggle { display: inline-flex; }
  .nav { position: absolute; inset: 100% 0 auto 0; flex-direction: column; align-items: stretch; border-radius: 0; background: var(--ink-2); padding: .75rem var(--gutter) 1.25rem; gap: .15rem; transform: translateY(-.5rem); opacity: 0; visibility: hidden; transition: opacity var(--t-med), transform var(--t-med) var(--ease-out), visibility 0s var(--t-med); }
  .nav.open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .nav a { padding: .9rem 1rem; border-radius: .6rem; font-size: 1.05rem; }
}

/* Buttons */
.btn { white-space: nowrap; --bg: var(--ink); --fg: var(--on-ink); display: inline-flex; align-items: center; gap: .7rem; min-height: 52px; padding: .85rem 1.6rem; background: var(--bg); color: var(--fg); border: 2px solid var(--bg); border-radius: 999px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .88rem; text-decoration: none; position: relative; isolation: isolate; overflow: hidden; transition: color var(--t-med), transform var(--t-med) var(--ease-out); will-change: transform; }
.btn::before { content: ""; position: absolute; inset: 0; background: var(--cyan); transform: translateY(101%); transition: transform var(--t-med) var(--ease-out); z-index: -1; }
.btn:hover { color: var(--ink); }
.btn:hover::before { transform: none; }
.btn:active { transform: scale(.97); }
.btn.ghost { --bg: transparent; --fg: var(--ink); border-color: var(--ink); }
.btn.ghost::before { background: var(--ink); }
.btn.ghost:hover { color: var(--on-ink); }
.on-ink .btn { --bg: var(--paper); --fg: var(--ink); }
.on-ink .btn.ghost { --bg: transparent; --fg: var(--on-ink); border-color: var(--on-ink-2); }
.on-ink .btn.ghost::before { background: var(--paper); }
.on-ink .btn.ghost:hover { color: var(--ink); }
.btn svg { width: 1.1em; height: 1.1em; transition: transform var(--t-med) var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.in { opacity: 1; transform: none; }
.line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.line > span { display: block; transform: translateY(105%); transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms + 150ms); }
.ready .line > span { transform: none; }

/* HERO */
.hero { position: relative; background: var(--paper); overflow: clip; padding: clamp(2rem, 5vw, 4rem) 0 0; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: var(--s-3); align-items: center; min-height: min(82svh, 46rem); }
.hero-copy { position: relative; z-index: 2; padding-bottom: 3.5rem; }
.hero h1 { --mx: 0; --my: 0; font-size: clamp(3.3rem, 8.4vw, 8rem); text-shadow: calc(var(--mx) * 1px) calc(var(--my) * 1px) 0 oklch(0.70 0.145 230 / .55), calc(var(--mx) * -1px) calc(var(--my) * .6px) 0 oklch(0.62 0.02 235 / .5); margin: 1.1rem 0 1.4rem; }
.hero .lede { margin-bottom: 2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.stage { position: relative; aspect-ratio: 1; width: min(100%, 38rem); margin-inline: auto; }
.stage svg { width: 100%; height: 100%; overflow: visible; }
.plate { mix-blend-mode: multiply; transition: transform 1100ms var(--ease-out); transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--r, 0deg)); transform-origin: 300px 300px; transform-box: view-box; }
.plate.drag { transition: transform 180ms linear; }
.stage .xhair { opacity: 0; transition: opacity 600ms var(--ease-out) 800ms; }
.stage.locked .xhair { opacity: 1; }
.stage-status { position: absolute; left: 0; bottom: -.4rem; font: 600 .78rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--slate-dk); display: flex; align-items: center; gap: .55rem; }
.stage-status i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--magenta); transition: background var(--t-med); }
.stage.locked .stage-status i { background: oklch(0.7 0.17 150); }
.crop { position: absolute; width: 2.2rem; height: 2.2rem; color: var(--ink); opacity: .55; }
.crop.tl { top: 1rem; left: var(--gutter); } .crop.tr { top: 1rem; right: var(--gutter); transform: scaleX(-1); }
.colorbar { display: flex; height: 1.6rem; margin-top: 1rem; }
.colorbar i { flex: 1; transform-origin: left; transform: scaleX(0); transition: transform 700ms var(--ease-out); transition-delay: calc(var(--i) * 45ms + 700ms); }
.ready .colorbar i { transform: none; }
@media (max-width: 52rem) {
  .hero .wrap { grid-template-columns: 1fr; min-height: 0; }
  .stage { width: min(78%, 22rem); order: -1; margin-top: 0; }
  .hero-copy { padding-bottom: 2.5rem; }
}

/* Sections */
section { position: relative; }
.pad { padding-block: var(--s-5); }
.on-ink { background: var(--ink); color: var(--on-ink); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--s-4); align-items: end; margin-bottom: var(--s-4); }
.sec-head p { margin: 0; color: inherit; opacity: .8; }
@media (max-width: 52rem) { .sec-head { grid-template-columns: 1fr; gap: 1.2rem; } }

/* Marquee */
.marquee { background: var(--ink); color: var(--on-ink); overflow: hidden; padding: 1.1rem 0; border-block: 1px solid var(--line-ink); }
.marquee-track { display: flex; width: max-content; animation: slide 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee ul { display: flex; list-style: none; margin: 0; padding: 0; }
.marquee li { font: 800 clamp(1.6rem, 3.4vw, 2.6rem)/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; padding-right: 2.2rem; display: flex; align-items: center; gap: 2.2rem; white-space: nowrap; }
.marquee li::after { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--c, var(--cyan)); }
.marquee li:nth-child(4n+1) { --c: var(--cyan); } .marquee li:nth-child(4n+2) { --c: var(--magenta); } .marquee li:nth-child(4n+3) { --c: var(--yellow); } .marquee li:nth-child(4n) { --c: var(--slate); }
@keyframes slide { to { transform: translateX(-50%); } }

/* Process (sticky press run) */
.process { height: 420vh; }
.process .pin { position: sticky; top: 4.5rem; min-height: calc(100svh - 4.5rem); display: grid; align-items: center; padding-block: 2rem; }
.process h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); }
.process .pin { top: 4.8rem; }
.process .grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
.proof { position: relative; aspect-ratio: 606 / 418; width: 100%; max-width: 36rem; background: var(--paper); padding: .9rem; box-shadow: 0 30px 60px -30px oklch(0.05 0.01 255 / .8); }
.proof .sheet { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--paper-2); }
.proof img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proof .gray { filter: grayscale(1) contrast(1.1); }
.proof .color { clip-path: inset(0 calc((1 - var(--wipe, 0)) * 100%) 0 0); }
.proof .edge { position: absolute; top: 0; bottom: 0; left: calc(var(--wipe, 0) * 100%); width: 2px; background: var(--cyan); box-shadow: 0 0 0 1px oklch(1 0 0 / .4); opacity: calc(min(var(--wipe, 0) * 20, 1) * min((1 - var(--wipe, 0)) * 20, 1)); }
.units { display: flex; gap: .5rem; margin-top: 1rem; }
.units span { flex: 1; text-align: center; padding: .55rem 0; border-radius: .3rem; font: 700 .85rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--paper-2); opacity: .6; transition: opacity var(--t-med), transform var(--t-med) var(--ease-out); }
.units span.on { opacity: 1; transform: translateY(-3px); }
.units span.on { background: var(--cyan); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 1.1rem; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 3.4rem 1fr; gap: 1.1rem; opacity: .72; transition: opacity var(--t-med), transform var(--t-med) var(--ease-out); }
.steps li::before { content: counter(s, decimal-leading-zero); font: 800 2.4rem/1 var(--f-display); color: var(--slate); transition: color var(--t-med); }
.steps li.on { opacity: 1; transform: translateX(.4rem); }
.steps li.on::before { color: var(--cyan); }
.steps h3 { margin-bottom: .3rem; font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.steps p { margin: 0; color: var(--on-ink-2); font-size: .98rem; line-height: 1.5; }
@media (max-width: 52rem) {
  .process { height: auto; }
  .process .pin { position: static; min-height: 0; }
  .process .grid { grid-template-columns: 1fr; }
  .steps li { opacity: 1; }
  .proof .color { clip-path: none; }
  .proof .edge, .units { display: none; }
}

/* Capabilities tabs */
.tabs { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.tablist { display: grid; gap: .2rem; position: relative; }
.tab { text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 1.1rem 0; font: 800 clamp(2.2rem, 5vw, 4rem)/1 var(--f-display); text-transform: uppercase; color: oklch(0.17 0.006 250 / .52); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; transition: color var(--t-med), padding var(--t-med) var(--ease-out); min-height: 44px; }
.tab small { font: 600 .8rem/1 var(--f-body); letter-spacing: .14em; color: inherit; }
.tab:hover { color: oklch(0.17 0.006 250 / .8); }
.tab[aria-selected="true"] { color: var(--ink); padding-left: 1rem; }
.tab-bar { position: absolute; left: 0; width: 4px; height: 3.2rem; background: var(--magenta); transition: transform var(--t-med) var(--ease-out), background var(--t-med); transform: translateY(var(--ty, 0)); top: 0; }
.panels { position: relative; min-height: 28rem; }
.panel { position: absolute; inset: 0 0 auto 0; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity var(--t-med), transform var(--t-med) var(--ease-out), visibility 0s var(--t-med); }
.panel.on { position: relative; opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.panel-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.panel h3 { margin-bottom: .8rem; }
.facts { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .6rem; }
.facts li { display: flex; gap: .7rem; align-items: baseline; }
.facts li::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--c, var(--cyan)); flex: none; transform: translateY(-1px); }
.photo { background: var(--paper); padding: .6rem; box-shadow: 0 24px 40px -24px oklch(0.2 0.02 255 / .5); }
.photo img { width: 100%; aspect-ratio: 606 / 418; object-fit: cover; }
.photo figcaption { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-dk); padding: .55rem .2rem .1rem; }
.dots-art { background: var(--ink); aspect-ratio: 606 / 418; display: grid; place-items: center; }
.dots-art svg { width: 100%; height: 100%; }
.vdata { background: var(--ink); color: var(--on-ink); aspect-ratio: 606 / 418; padding: 1.6rem; display: grid; align-content: center; gap: .9rem; position: relative; overflow: hidden; }
.vdata .addr { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-2); }
.vdata .hello { font: 800 clamp(2rem, 4.4vw, 3.4rem)/1 var(--f-display); text-transform: uppercase; min-height: 1em; }
.vdata .hello b { color: var(--yellow); font-weight: 800; display: inline-block; transition: opacity 260ms, transform 260ms var(--ease-out); }
.vdata .hello b.swap { opacity: 0; transform: translateY(.3em); }
.vdata .offer { color: var(--on-ink-2); max-width: 28ch; margin: 0; }
.vdata .tag { position: absolute; right: 1rem; top: 1rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: var(--cyan); padding: .3rem .6rem; border-radius: 999px; }
@media (max-width: 52rem) { .tabs { grid-template-columns: 1fr; } .panel-body { grid-template-columns: 1fr; } .panels { min-height: 0; } .panel { position: absolute; } .panel.on { position: relative; } }

/* Services accordion */
.acc { display: grid; gap: 0; border-top: 1px solid var(--line-ink); }
.acc-item { border-bottom: 1px solid var(--line-ink); }
.acc-btn { width: 100%; background: none; border: 0; display: grid; grid-template-columns: 3.5rem 1fr auto; gap: 1rem; align-items: center; text-align: left; padding: 1.6rem 0; min-height: 44px; }
.acc-btn .n { font: 800 1.4rem/1 var(--f-display); color: var(--slate); }
.acc-btn .t { font: 800 clamp(2rem, 5vw, 4rem)/1 var(--f-display); text-transform: uppercase; transition: color var(--t-med), transform var(--t-med) var(--ease-out); }
.acc-btn:hover .t { color: var(--cyan); transform: translateX(.5rem); }
.acc-btn .pm { width: 2.4rem; height: 2.4rem; border: 2px solid currentColor; border-radius: 50%; position: relative; transition: transform var(--t-med) var(--ease-out), background var(--t-med), color var(--t-med); }
.acc-btn .pm::before, .acc-btn .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1rem; height: 2px; background: currentColor; transform: translate(-50%, -50%); }
.acc-btn .pm::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--t-med) var(--ease-out); }
.acc-btn[aria-expanded="true"] .pm { background: var(--cyan); color: var(--ink); border-color: var(--cyan); }
.acc-btn[aria-expanded="true"] .pm::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--ease-out); }
.acc-btn[aria-expanded="true"] + .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-in { padding: 0 0 2.2rem 4.5rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.2rem; color: var(--on-ink-2); }
.acc-in p { margin-bottom: .9rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.chips li { padding: .5rem .95rem; border: 1px solid var(--line-ink); border-radius: 999px; font-size: .92rem; color: var(--on-ink); transition: background var(--t-fast), color var(--t-fast), transform var(--t-med) var(--ease-out), border-color var(--t-fast); }
.chips li:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); transform: translateY(-2px); }
@media (max-width: 52rem) { .acc-btn { grid-template-columns: 2.2rem 1fr auto; } .acc-in { padding-left: 0; grid-template-columns: 1fr; } }

/* Split / generic */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
@media (max-width: 52rem) { .split { grid-template-columns: 1fr; } }
.timeline { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 6rem 1fr; gap: 1.4rem; padding: 1.2rem 0; border-top: 1px solid var(--line); }
.timeline b { font: 800 2.4rem/1 var(--f-display); color: var(--cyan-ink); }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.pillars > div { padding: 1.6rem 1.6rem 1.6rem 0; }
.pillars > div + div { padding-left: 1.6rem; border-left: 1px solid var(--line); }
.pillars h3 { margin-bottom: .6rem; }
@media (max-width: 52rem) { .pillars { grid-template-columns: 1fr; } .pillars > div + div { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; } }
.green { background: oklch(0.955 0.018 225); }

.cta-band { background: var(--cyan); color: var(--ink); overflow: hidden; }
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 2rem; align-items: center; padding-block: clamp(3rem, 7vw, 6rem); }
.cta-band h2 { font-size: clamp(2.6rem, 7vw, 6rem); }
.cta-band .btn { white-space: nowrap; --bg: var(--ink); --fg: var(--on-ink); }
.cta-band .btn::before { background: var(--paper); }
.cta-band .btn:hover { color: var(--ink); }
.cta-band .btn.ghost { --bg: transparent; --fg: var(--ink); border-color: var(--ink); }
.cta-band .btn.ghost::before { background: var(--ink); }
.cta-band .btn.ghost:hover { color: var(--on-ink); }
.cta-actions { display: grid; gap: .8rem; justify-items: start; }
@media (max-width: 52rem) { .cta-band .wrap { grid-template-columns: 1fr; } }

/* Page hero (inner) */
.page-hero { background: var(--ink); color: var(--on-ink); padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem); position: relative; overflow: clip; }
.page-hero h1 { font-size: clamp(3.2rem, 9vw, 7.4rem); margin: 1rem 0 1.2rem; }
.page-hero .lede { color: var(--on-ink-2); }
.page-hero .dots { position: absolute; right: -4rem; top: -4rem; width: min(42vw, 30rem); aspect-ratio: 1; opacity: .9; pointer-events: none; }
.page-hero .dots circle { mix-blend-mode: screen; }
.print-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.print-grid > div { background: var(--paper); padding: 1.6rem; display: grid; align-content: space-between; min-height: 10.5rem; transition: background var(--t-med), color var(--t-med); }
.print-grid > div:hover { background: var(--ink); color: var(--on-ink); }
.print-grid > div:nth-child(1) { grid-column: span 5; } .print-grid > div:nth-child(2) { grid-column: span 4; } .print-grid > div:nth-child(3) { grid-column: span 3; }
.print-grid > div:nth-child(4) { grid-column: span 3; } .print-grid > div:nth-child(5) { grid-column: span 4; } .print-grid > div:nth-child(6) { grid-column: span 5; }
.print-grid > div:nth-child(7) { grid-column: span 7; } .print-grid > div:nth-child(8) { grid-column: span 5; }
.print-grid h3 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
.print-grid span { font: 600 .78rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--slate-dk); }
.print-grid > div:hover span { color: var(--on-ink-2); }
@media (max-width: 52rem) { .print-grid > div { grid-column: span 12 !important; min-height: 0; } }

/* Bleed visualizer */
.bleed { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
.bleed-controls { display: grid; gap: 1.6rem; }
.field label { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: .6rem; }
.field output { font-variant-numeric: tabular-nums; color: var(--cyan-ink); }
input[type=range] { width: 100%; min-height: 44px; accent-color: var(--magenta); }
.legend { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; font-size: .92rem; }
.legend span { display: inline-flex; align-items: center; gap: .5rem; }
.legend i { width: 1.1rem; height: .7rem; display: inline-block; }
.bleed-svg { background: var(--paper-2); padding: 1.5rem; display: grid; place-items: center; }
.bleed-svg svg { width: min(100%, 26rem); overflow: visible; }
@media (max-width: 52rem) { .bleed { grid-template-columns: 1fr; } }

/* Contact */
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.contact-grid > div { background: var(--paper); padding: clamp(1.6rem, 3vw, 2.6rem); }
.contact-grid dt { font: 600 .78rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--slate-dk); margin-bottom: .9rem; }
.contact-grid dd { margin: 0; font: 800 clamp(1.7rem, 3.4vw, 2.8rem)/1.05 var(--f-display); text-transform: uppercase; overflow-wrap: anywhere; }
.copy { margin-top: 1rem; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem; border: 1px solid var(--ink); border-radius: 999px; background: none; font-size: .85rem; font-weight: 600; transition: background var(--t-fast), color var(--t-fast); }
.copy:hover { background: var(--ink); color: var(--on-ink); }
.toast { position: fixed; left: 50%; bottom: 1.6rem; opacity: 0; visibility: hidden; transform: translate(-50%, 200%); background: var(--ink); color: var(--on-ink); padding: .8rem 1.3rem; border-radius: 999px; font-weight: 600; transition: transform var(--t-med) var(--ease-out), opacity var(--t-med), visibility 0s var(--t-med); z-index: 90; }
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition-delay: 0s; }
@media (max-width: 52rem) { .contact-grid { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { background: var(--ink); color: var(--on-ink); padding: clamp(3rem, 6vw, 5rem) 0 2rem; }
.foot { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, .6fr)); gap: 2.4rem; }
.foot h4 { margin: 0 0 .9rem; font: 600 .78rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--on-ink-2); }
.foot a:not(.btn) { text-decoration: none; display: inline-block; padding: .25rem 0; }
.foot a:not(.btn):hover { color: var(--cyan); }
.foot address { font-style: normal; color: var(--on-ink); }
.foot .flogo { height: 6.5rem; width: auto; margin-bottom: 1.4rem; }
.foot .big { font: 900 clamp(2.4rem, 5vw, 4rem)/.95 var(--f-display); text-transform: uppercase; margin-bottom: 1rem; }
.legal { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--line-ink); color: var(--on-ink-2); font-size: .85rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 52rem) { .foot { grid-template-columns: 1fr; } }

/* Reduced motion: everything lands in its final state, nothing travels. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .reveal, .line > span, .colorbar i { opacity: 1; transform: none; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  .process { height: auto; } .process .pin { position: static; }
  .proof .color { clip-path: none; } .proof .edge { display: none; }
  .steps li { opacity: 1; }
}