/* MGnetic Designs: one dark iron world, a double-complementary palette (north 7° / teal 187°, south 228° / amber 46°) */
/* Schibsted Grotesk (SIL OFL, fonts/OFL-schibsted-grotesk.txt), self-hosted: one variable file, weights 400 to 700 */
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/schibsted-grotesk-latin-var.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; }
html, body { background: #11110f; color: #ecebe6; }
:root {
  color-scheme: dark;
  --bg: #11110f; --bg2: #181815; --card: #1d1d1a; --fg: #ecebe6;
  --fg80: rgba(236,235,230,.8); --fg60: rgba(236,235,230,.64); --fg40: rgba(236,235,230,.52);   /* .52, not .44: 4.6:1 or better on every dark ground (WCAG AA for 12px labels) */
  --line: rgba(236,235,230,.12); --line2: rgba(236,235,230,.22);
  --north: #ff5a45; --south: #6f8cff; --teal: #3ccfe0; --amber: #ffcb47; --iron: #9c9a91;
  --font: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --out: cubic-bezier(.22,1,.36,1); --expo: cubic-bezier(.16,1,.3,1); --snap: cubic-bezier(.3,1.32,.42,1); --spring: cubic-bezier(.34,1.56,.64,1);
  --settle: cubic-bezier(.2,1.1,.3,1);
  --gx: max(24px, 6vw, env(safe-area-inset-left, 0px));
  --gr: max(24px, 6vw, env(safe-area-inset-right, 0px));
}
/* Real spring curves where the browser can draw them: a damped spring sampled into linear(), so things overshoot
   and settle like a filing clicking onto a pole. Older browsers keep the cubic-bezier above. */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.039, 0.142, 0.286, 0.453, 0.624, 0.786, 0.93, 1.047, 1.135, 1.194, 1.226, 1.233, 1.222, 1.197, 1.162, 1.123, 1.083, 1.045, 1.013, 0.986, 0.966, 0.953, 0.947, 0.946, 0.949, 0.955, 0.963, 0.973, 0.982, 0.991, 0.998, 1.004, 1.008, 1.011, 1.013, 1.013, 1.012, 1.01, 1.008, 1.006, 1.004, 1.002, 1, 0.999, 0.998, 0.997, 0.997, 1);
    --snap: linear(0, 0.033, 0.116, 0.23, 0.36, 0.492, 0.618, 0.731, 0.829, 0.91, 0.973, 1.02, 1.052, 1.072, 1.081, 1.083, 1.08, 1.072, 1.062, 1.051, 1.04, 1.03, 1.021, 1.013, 1.006, 1.001, 0.998, 0.995, 0.994, 0.993, 0.993, 0.993, 0.994, 0.995, 0.996, 0.997, 0.998, 0.998, 0.999, 1, 1, 1, 1, 1.001, 1.001, 1.001, 1.001, 1, 1);
    --settle: linear(0, 0.049, 0.163, 0.304, 0.448, 0.581, 0.695, 0.789, 0.861, 0.916, 0.955, 0.982, 0.999, 1.009, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1.001, 1, 1, 1, 1, 1, 1, 1);
  }
}
* { box-sizing: border-box; }
html { overflow-x: clip; -webkit-tap-highlight-color: transparent; }
button, a, label { -webkit-tap-highlight-color: transparent; }
.grabbing { -webkit-user-select: none; user-select: none; }
body { margin: 0; font: 400 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
::selection { background: rgba(60,207,224,.3); }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
img, canvas, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 95; background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 999px; }
.skip:focus { top: 16px; }
.pad { padding-left: var(--gx); padding-right: var(--gr); }
.label { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--fg40); }
.label::before { content: ""; display: inline-block; width: 14px; height: 6px; margin-right: 10px; vertical-align: 2px; border-radius: 3px; background: linear-gradient(90deg, var(--north) 0 40%, transparent 40% 60%, var(--south) 60%); }
.label.plain::before { display: none; }
.h1 { font-size: clamp(46px, 6.3vw, 116px); line-height: .92; letter-spacing: -.048em; }
.h2 { font-size: clamp(38px, 4.8vw, 76px); line-height: 1; letter-spacing: -.04em; }
.dim { color: var(--fg40); }
.lead { color: var(--fg60); font-size: clamp(16px, 1.25vw, 19px); max-width: 34rem; }
.grain { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .06; 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%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ------------------------------------------------ the mark */
.mk { display: block; overflow: visible; }
.mk .k { fill: none; stroke: currentColor; stroke-width: 5.4; stroke-linecap: round; stroke-linejoin: round; }
.mk .n, .mk .s { fill: none; stroke-width: 5.4; stroke-linecap: butt; }
.mk .n { stroke: var(--north); } .mk .s { stroke: var(--south); }
.mk .gap { fill: none; stroke: var(--bg); stroke-width: .9; }
.mk .fil { fill: none; stroke: var(--amber); stroke-width: 2.4; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }

/* ------------------------------------------------ nav */
.nav { position: fixed; z-index: 40; top: calc(14px + env(safe-area-inset-top, 0px)); left: 16px; right: 16px; margin: 0 auto; max-width: 1240px; height: 58px; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 8px 0 18px; border-radius: 999px;
  background: rgba(24,24,21,.74); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .3s; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 15px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.brand .mk { width: 30px; height: 22px; color: var(--fg); }
.nav .mk .gap { stroke: #181815; }
.nav__links { display: flex; gap: 2px; }
.nav__links a { position: relative; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-size: 14px; color: var(--fg80); transition: color .2s, background-color .2s; }
.nav__links a:hover { color: var(--fg); background: rgba(236,235,230,.06); }
.nav__links a[aria-current="page"] { color: var(--fg); }
.nav__links a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--amber); }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--amber); color: #11110f; font: 500 15px/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .2s, scale .15s; }
.btn:hover { background: #ffd970; }
.btn:active { scale: .97; }
.btn .disc { width: 26px; height: 26px; margin-right: -12px; border-radius: 50%; background: #11110f; color: var(--fg); display: grid; place-items: center; transition: rotate .3s var(--out); }
.btn:hover .disc { rotate: -45deg; }
.btn .disc svg { width: 12px; height: 12px; }
.btn--lg { height: 56px; padding: 0 30px; font-size: 16px; }
.btn--lg .disc { width: 32px; height: 32px; margin-right: -18px; }
.btn--ghost { background: rgba(236,235,230,.08); color: var(--fg); }
.btn--ghost:hover { background: rgba(236,235,230,.14); }
.tlink { font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--line2); transition: text-decoration-color .2s; }
.tlink:hover { text-decoration-color: var(--teal); }
.burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(236,235,230,.08); color: var(--fg); cursor: pointer; }
.burger i { display: block; width: 16px; height: 1.6px; margin: 4px auto; background: currentColor; transition: translate .3s var(--out), rotate .3s var(--out); }
.sheet { position: fixed; inset: 0; z-index: 35; background: rgba(17,17,15,.97); display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 var(--gx); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
/* open: the panel in .2s, links 30ms apart, all in by ~.4s (was ~.8s). Close: everything at once, no stagger. */
.sheet a { font-size: 42px; letter-spacing: -.03em; text-decoration: none; opacity: 0; translate: 0 12px; transition: opacity .16s, translate .16s; }
.sheet a[aria-current="page"] { color: var(--amber); }
.sheet.open { opacity: 1; visibility: visible; }
.sheet.open a { opacity: 1; translate: 0 0; transition: opacity .28s var(--out), translate .28s var(--out); transition-delay: calc(var(--i, 0) * 30ms); }
.sheet .btn { align-self: flex-start; margin-top: 24px; font-size: 16px; letter-spacing: 0; }
body.menu .burger i:first-child { translate: 0 2.8px; rotate: 45deg; } body.menu .burger i:last-child { translate: 0 -2.8px; rotate: -45deg; }
body.menu { overflow: hidden; }
@media (max-width: 899px) { .nav__links, .nav > .btn { display: none; } .burger { display: block; } .nav { background: rgba(20,20,18,.96); -webkit-backdrop-filter: none; backdrop-filter: none; } }   /* phones: no live blur under the bar (re-blurred every frame over the moving page) 

/* ------------------------------------------------ the cursor */
.cur { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; display: none; }
html.cur-on .cur { display: block; }
html.cur-on, html.cur-on * { cursor: none !important; }
html.cur-on :is(input, textarea), html.cur-on :is(input, textarea) * { cursor: text !important; }
.cur__dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 1.5px rgba(17,17,15,.55); transition: opacity .2s; }
.cur { transition: opacity .2s; } .cur[data-out] { opacity: 0; }
.cur__ring { position: absolute; left: 0; top: 0; width: 34px; height: 34px; translate: -50% -50%; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(236,235,230,.42);
  display: grid; place-items: center; font: 600 11px/1 var(--font); letter-spacing: .02em; color: #11110f; white-space: nowrap; overflow: hidden;
  transition: width .38s var(--spring), height .38s var(--spring), border-radius .3s var(--out), background-color .25s, box-shadow .25s, opacity .2s; }
.cur__lab { opacity: 0; transition: opacity .2s; display: flex; align-items: center; gap: 6px; }
.cur__lab svg { width: 14px; height: 14px; }
.cur[data-z="link"] .cur__ring { box-shadow: inset 0 0 0 1.5px var(--amber); }
.cur[data-z="link"] .cur__dot { opacity: 0; scale: .2; }
.cur[data-z="pole"] .cur__ring { width: 40px; height: 40px; background: var(--north); box-shadow: none; }
.cur[data-z="pole"][data-sign="s"] .cur__ring { background: var(--south); }
.cur[data-z="pole"] .cur__lab, .cur[data-z="drag"] .cur__lab { opacity: 1; }
.cur[data-z="pole"] .cur__dot { opacity: 0; }
.cur[data-z="pole"][data-near] .cur__ring { width: 84px; height: 32px; }
.cur:is([data-z="view"], [data-z="arrow"], [data-z="drag"]) .cur__ring { width: 76px; height: 76px; background: var(--amber); box-shadow: none; }
.cur[data-z="arrow"] .cur__ring { width: 64px; height: 64px; background: var(--teal); }
.cur[data-z="drag"] .cur__ring { background: var(--teal); }
.cur:is([data-z="view"], [data-z="arrow"]) .cur__lab { opacity: 1; }
.cur:is([data-z="view"], [data-z="arrow"], [data-z="drag"]) .cur__dot { opacity: 0; }
.cur[data-z="tilt"] .cur__ring { width: 52px; height: 52px; box-shadow: inset 0 0 0 1.5px var(--teal); }
.cur[data-z="scatter"] .cur__ring { width: 120px; height: 120px; box-shadow: inset 0 0 0 1px rgba(255,203,71,.5); background: rgba(255,203,71,.05); }
/* plain parts of the page: the yellow dot alone (before, dot and ring both hid here and the pointer vanished) */
.cur[data-z="off"] .cur__ring { opacity: 0; }
/* form fields: the ring wraps the field as soon as the pointer is near it; over the field itself the text caret shows */
.cur[data-z="field"] .cur__ring { box-shadow: inset 0 0 0 1.5px var(--teal); }
.cur[data-z="field"][data-in] .cur__dot { opacity: 0; }

/* ------------------------------------------------ scroll-linked pieces (site.js writes --p, 0 to 1, as each one crosses the screen) */
/* No blur here: a changing filter repaints the whole block on every scroll frame (big cards cost 10-20 ms each on a phone). */
[data-rise] { opacity: calc(.001 + var(--p, 1) * 1); translate: 0 calc((1 - var(--p, 1)) * 48px); will-change: translate, opacity; }
.split .w { display: inline-block; vertical-align: top; white-space: nowrap; }
.split .w > span { display: inline-block; }
/* Headings snap together letter by letter: each letter starts out as a loose filing, turned and pushed off its place,
   and the scroll pulls it in. site.js writes --q per word through a spring, so the letters overshoot and settle. */
.split .c { display: inline-block; --k: calc(1 - var(--q, 1));
  translate: calc(var(--k) * var(--dx, 0em)) calc(var(--k) * var(--dy, 0em)); rotate: calc(var(--k) * var(--r, 0deg));
  opacity: clamp(0, calc(var(--q, 1) * 1.5 - .1), 1); }
.reveal .sp { opacity: .16; }
.reveal .hl { color: var(--teal); }
[data-drift] { translate: calc(var(--d, 0) * 1px) 0; will-change: translate; }

/* ------------------------------------------------ page heads (inner pages) */
.phead { position: relative; min-height: 86svh; display: grid; align-content: end; padding-top: 140px; padding-bottom: 10vh; overflow: hidden; overflow: clip; }   /* clip, not hidden: a hidden box is a scroller to scroll-linked animations and would freeze the heading */
.phead canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.phead > :not(canvas) { position: relative; z-index: 1; }
.phead .label { margin-bottom: 28px; }
.phead .h1 { font-size: clamp(48px, 8vw, 148px); max-width: 14ch; }
.phead .lead { margin-top: 28px; }
.scrollcue { margin-top: 44px; display: inline-flex; align-items: center; gap: 12px; font-size: 13px; color: var(--fg40); }
.scrollcue i { width: 1px; height: 40px; background: linear-gradient(var(--amber), transparent); animation: cue 1.8s var(--out) infinite; transform-origin: top; }
@keyframes cue { 0% { scale: 1 0; } 60% { scale: 1 1; opacity: 1; } 100% { scale: 1 1; opacity: 0; } }

/* ------------------------------------------------ layout preview (a light page drawn in blocks) */
.pv { --pbg: #e6e5e0; --pink: #1f1e1a; --pm: #8d8b84; --ps: #2456d6; --pn: #c7372c; --pic: #b9b7af;
  position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--pbg); container-type: inline-size; }
/* Blocks are placed with translate in container units (the preview is 16:10, so 1% of its height is .625cqw), not left/top:
   moving them then never re-lays-out the page or counts as a layout shift. Width and height stay inside the preview's own containment. */
.pv > i { position: absolute; display: block; left: 0; top: 0; translate: calc(var(--x, 0) * 1cqw) calc(var(--y, 0) * .625cqw); width: var(--w); height: var(--h); border-radius: var(--r, 999px); background: var(--c, var(--pink)); opacity: var(--o, 1);
  transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--sc, 1));
  transition: translate .72s var(--snap), width .72s var(--snap), height .72s var(--snap), border-radius .5s, background-color .4s, opacity .35s, transform .3s ease-out; transition-delay: var(--d, 0ms); }
.pv.still > i { transition: none; }
.pv > i.off { --o: 0; --sc: .3; }
.pv .b-nav { --r: 0; --c: var(--pbg); box-shadow: 0 1px 0 rgba(31,30,26,.1); z-index: 4; }
.pv .b-nav::before { content: ""; position: absolute; left: 4%; top: 30%; width: 2.8cqw; aspect-ratio: 1; border-radius: 24%; background: var(--pink); }
.pv .b-nav::after { content: ""; position: absolute; right: 4%; top: 28%; height: 44%; width: 9%; border-radius: 99px; background: var(--ps); }
.pv .b-h { z-index: 3; --r: 6px; } .pv .b-l { z-index: 3; --c: var(--pm); } .pv .b-p { z-index: 3; --c: var(--ps); }
.pv .b-s { z-index: 3; --c: transparent; box-shadow: inset 0 0 0 1.5px rgba(31,30,26,.4); }
.pv .b-f { z-index: 3; --r: 0; --c: rgba(31,30,26,.28); } .pv .b-u { z-index: 3; --c: var(--pn); }
.pv .b-box { z-index: 2; --r: 8px; --c: var(--pbg); }
.pv .b-pic { z-index: 1; --r: 8px; overflow: hidden; --c: var(--pic); }
.pv .b-pic::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10cqw; height: 6.5cqw; translate: -50% -42%; background: #9a988f; clip-path: polygon(0 100%, 34% 30%, 52% 62%, 70% 42%, 100% 100%); }
.pv .b-pic::after { content: ""; position: absolute; left: calc(50% - 3.6cqw); top: calc(50% - 4.2cqw); width: 2.2cqw; aspect-ratio: 1; border-radius: 50%; background: #9a988f; }
.pv[data-l="film"] .b-pic { --c: #34332d; } .pv[data-l="film"] .b-pic::before, .pv[data-l="film"] .b-pic::after { opacity: .5; }
.pv[data-l="film"] .b-box { --c: #1f1e1a; } .pv[data-l="film"] .b-h { --c: #ecebe6; } .pv[data-l="film"] .b-l { --c: #9c9a91; }
.pv[data-l="film"] .b-s { --c: #ecebe6; box-shadow: none; }
.pv[data-l="film"] .b-s::before { content: ""; position: absolute; inset: 30% 30% 30% 38%; background: #1f1e1a; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pv[data-l="product"] .b-pic { --c: transparent; overflow: visible; }
.pv[data-l="product"] .b-pic::before { width: 64%; height: 70%; translate: -50% -50%; clip-path: none; border-radius: 40% 40% 12px 12px / 60% 60% 12px 12px; background: #b0aea6; }
.pv[data-l="product"] .b-pic::after { left: 25%; top: 80%; width: 50%; height: 4%; aspect-ratio: auto; border-radius: 50%; background: rgba(31,30,26,.14); }
.pv[data-l="centred"] .b-pic { --c: #f3f2ee; box-shadow: inset 0 0 0 1px rgba(31,30,26,.12); -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent); }
.pv[data-l="centred"] .b-pic::before { left: 0; top: 0; translate: none; width: 24%; height: 100%; clip-path: none; background: rgba(31,30,26,.06); }
.pv[data-l="centred"] .b-pic::after { left: 30%; top: 14%; width: 46%; height: 8%; aspect-ratio: auto; border-radius: 99px; background: rgba(31,30,26,.14); box-shadow: 0 3cqw 0 rgba(31,30,26,.1), 4cqw 6cqw 0 rgba(36,86,214,.3); }
.pv[data-l="centred"] .b-box { --r: 99px; --c: #f3f2ee; box-shadow: inset 0 0 0 1px rgba(31,30,26,.12); }
.pv[data-l="photo"] .b-pic { --r: 0; }
.win { border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -30px rgba(0,0,0,.6); overflow: hidden; }
.win__bar { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--fg60); }
.win__bar .d { display: flex; gap: 6px; } .win__bar .d i { width: 10px; height: 10px; border-radius: 50%; background: rgba(236,235,230,.16); }
.win__bar .d i:first-child { background: var(--north); } .win__bar .d i:nth-child(2) { background: var(--amber); } .win__bar .d i:nth-child(3) { background: var(--south); }
.win__name { color: var(--fg); font-weight: 500; }
.win__body { padding: 18px; }

/* ------------------------------------------------ mini pieces of the studio's tools */
.mini { width: min(340px, 100%); background: #e6e5e0; color: #1f1e1a; border-radius: 16px; padding: 20px; display: grid; gap: 12px; font-size: 13px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.mini__t { font-size: 15px; font-weight: 600; }
.mini__f { display: grid; gap: 6px; color: #42413b; }
.mini__f span:last-child { height: 34px; border-radius: 8px; background: #f5f4f1; box-shadow: inset 0 0 0 1px rgba(31,30,26,.18); }
.mini__lab { color: #42413b; margin-top: 2px; }
.mini__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mini__chips span { padding: 6px 11px; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(31,30,26,.25); }
.mini__chips span.on { background: #0e7a89; color: #fff; box-shadow: none; }
.mini__row { display: flex; align-items: center; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid rgba(31,30,26,.1); }
.mini__row:last-of-type { border-bottom: 0; }
.mini__row i { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px rgba(31,30,26,.3); display: grid; place-items: center; }
.mini__row i.ok { background: #2f6b3a; box-shadow: none; }
.mini__row i.ok::after { content: ""; width: 8px; height: 4px; border: solid #fff; border-width: 0 0 1.6px 1.6px; rotate: -45deg; translate: 0 -1px; }
.mini__row em { margin-left: auto; font-style: normal; color: #66645d; white-space: nowrap; padding-left: 8px; }
.mini__ph { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini__ph span { aspect-ratio: 4 / 3; border-radius: 8px; border: 1.5px dashed rgba(31,30,26,.3); display: grid; place-items: center; color: #66645d; }
.mini--pv { padding: 0; gap: 0; overflow: hidden; }
.mini--pv .bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid rgba(31,30,26,.1); color: #42413b; }
.mini--pv .lock { padding: 4px 10px; border-radius: 99px; background: #f5f4f1; color: #1f1e1a; }
.mini--pv .pv { border-radius: 0; }
.mini--pv .cm { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-top: 1px solid rgba(31,30,26,.1); }
.mini--pv .cm i { width: 22px; height: 22px; border-radius: 50%; background: #c7372c; flex: none; }

/* ------------------------------------------------ cta band (every inner page ends with it) */
.ctaband { padding-top: 18vh; padding-bottom: 14vh; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 32px; }
.ctaband .h2 { font-size: clamp(44px, 6.4vw, 104px); line-height: .94; max-width: 12ch; }

/* ------------------------------------------------ footer: the name formed by filings */
.foot { position: relative; padding-top: 8vh; padding-bottom: 28px; overflow: hidden; }
.foot__stage { position: relative; height: clamp(220px, 34vw, 520px); margin-left: calc(-1 * var(--gx)); margin-right: calc(-1 * var(--gr)); touch-action: pan-y; }
.foot__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.foot__hint { position: absolute; right: var(--gr); bottom: 12px; font-size: 12px; color: var(--fg40); }
.foot__row { margin-top: 5vh; display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 32px; font-size: 14px; color: var(--fg60); border-top: 1px solid var(--line); padding-top: 32px; }
.foot__row h4 { margin: 0 0 12px; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--fg40); }
.foot__row ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot__row a { text-decoration: none; color: var(--fg80); } .foot__row a:hover { color: var(--teal); }
/* maker's seal: the mark inside a ring of type, turning slowly while the footer is on screen */
.sig { display: inline-flex; align-items: center; gap: 12px; color: var(--fg60); }
.seal { position: relative; width: 76px; height: 76px; flex: none; }
/* the ring turns as a whole layer on the GPU (rotating text inside an SVG re-lays it out every frame: 300 ms of
   layout per scroll on a phone, measured) */
.seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform;
  animation: seal 28s linear infinite; animation-play-state: var(--seal-run, paused); }
.seal__ring text { font: 600 8.6px/1 var(--font); letter-spacing: .1em; fill: var(--fg60); }
.seal__disc { fill: none; stroke: var(--line); stroke-width: 1; }
.seal__mk { position: absolute; left: 31%; top: 37%; width: 38%; height: 26%; }
.seal__mk .mk { width: 100%; height: 100%; }
.seal .mk .gap { stroke: var(--bg); }
@keyframes seal { to { transform: rotate(360deg); } }
.foot__legal { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--fg40); }
@media (max-width: 899px) { .foot__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .foot__row > :first-child { grid-column: 1 / -1; } .foot__hint { display: none; } }

/* ------------------------------------------------ the same motions, linked to the scroll by the browser (site.js sets
   data-sda where this works). Ranges match the script: "cover 6vh" = the element's top at 94% of the screen height. */
@supports (animation-timeline: view()) {
  [data-rise][data-sda] { opacity: 1; translate: none; animation: sda-rise linear both; animation-timeline: view(); animation-range: cover 6vh cover 38vh; }
  @keyframes sda-rise { from { opacity: .001; translate: 0 48px; } to { opacity: 1; translate: 0 0; } }
  /* service names sliding sideways as the list passes */
  [data-drift][data-sda] { translate: none; animation: sda-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes sda-drift { from { translate: calc(var(--dr, 0) * .5px) 0; } to { translate: calc(var(--dr, 0) * -.5px) 0; } }
  /* the home hero: the mark lifts and the words step back over the first screen of scrolling */
  .hero[data-sda] { view-timeline-name: --hero; }
  .hero[data-sda] .hero__mark { translate: 0 0; scale: 1; opacity: 1; animation: sda-mark linear both; animation-timeline: --hero; animation-range: cover 100vh cover 200vh; }
  .hero[data-sda] .hero__copy { translate: 0 0; opacity: 1; animation: sda-copy linear both; animation-timeline: --hero; animation-range: cover 100vh cover 200vh; }
  @keyframes sda-mark { to { translate: 0 -14vh; scale: .88; opacity: .3; } }
  @keyframes sda-copy { 77% { opacity: 0; } to { translate: 0 -8vh; opacity: 0; } }
  @media (max-width: 899px) {
    .hero[data-sda] .hero__mark { translate: 50% 0; animation-name: sda-mark-m; }
    @keyframes sda-mark-m { from { translate: 50% 0; } to { translate: 50% -10vh; scale: .88; opacity: .3; } }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  [data-rise] { opacity: 1; translate: none; filter: none; }
  .split .c { translate: none; rotate: none; opacity: 1; }
  .wipe { display: none; }
  .seal__ring { animation: none; }
}

/* ------------------------------------------------ between pages: two poles close over the page, then pull apart on the next */
.wipe { position: fixed; inset: 0; z-index: 120; pointer-events: none; display: grid; grid-template-columns: 1fr 1fr; }
.wipe > i:first-child { margin-right: -1px; }   /* 1px overlap: no hairline seam at odd widths */
.wipe > i { position: relative; background: var(--bg2); translate: calc(-100% - 14px) 0; transition: translate .55s var(--expo); }
.wipe > i + i { translate: calc(100% + 14px) 0; }
.wipe > i::after { content: ""; position: absolute; top: 0; bottom: 0; width: 6px; right: 0; background: var(--north); box-shadow: 0 0 44px 4px rgba(255,90,69,.16); }
.wipe > i + i::after { right: auto; left: 0; background: var(--south); box-shadow: 0 0 44px 4px rgba(111,140,255,.16); }
.wipe .mk { position: absolute; left: 50%; top: 50%; width: 92px; translate: -50% -50%; opacity: 0; scale: .6; transition: opacity .2s, scale .5s var(--spring); z-index: 2; }
.wipe.shut { pointer-events: auto; }
.wipe.shut > i { translate: 0 0; transition: translate .34s var(--out); }
.wipe.shut .mk { opacity: 1; scale: 1; transition-delay: .2s; }
.wipe.shut.clack > i::after { animation: seam .3s var(--out); } .wipe.shut.clack .mk { animation: thunk .3s var(--out); }
@keyframes seam { 30% { box-shadow: 0 0 70px 12px rgba(255,203,71,.32); } } @keyframes thunk { 35% { scale: 1.12; } }