/* wedgestudio.dev v18. Organised like Finder. The sidebar lists the
   companies, a company opens its column of projects, a project opens the
   case study beside it. The field of cells lies over the column and the
   article and clears to reveal them. Flat surfaces only, every cell of
   the field is one solid colour. */

:root {
  --bg: #000;
  --panel: #0a0a0b;
  --panel-2: #0e0e10;
  --tx: rgba(255, 255, 255, .94);
  --tx-mid: rgba(255, 255, 255, .74);
  --tx-mut: rgba(255, 255, 255, .6);   /* about 7:1 on the panels */
  --line: rgba(255, 255, 255, .085);
  --line-2: rgba(255, 255, 255, .16);
  --hover: rgba(255, 255, 255, .05);
  --sel: rgba(255, 255, 255, .09);
  --accent: #fff;
  /* Inter for everything since 2026-10-11 (David, "maybe just use inter?"),
     its optical size axis gives large headlines the Display cut on its own */
  --disp: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* the motion vocabulary, every transition and keyframe reads from here.
     Out is for anything arriving or answering a touch, in out is for things
     that move from one place to another. Press is the quick dip under a
     finger, the release uses fast or base. Blend matches BLEND in site.js. */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease: var(--ease-out);
  --dur-press: 90ms;
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 560ms;
  --dur-blend: 900ms;
  --stagger: 50ms;
  --rise: 10px;
  --gut: 20px;
  --side: 280px;
  --colw: 396px;   /* the column, the same open or not, 33 cells */
  --col: 780px;
  --strip: 168px;
  color-scheme: dark;
  /* every surface, edge and overlay as a token, so the light theme below
     only has to give each one its light twin. These are the dark values. */
  --grid-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M20 0V20H0' fill='none' stroke='%23ffffff' stroke-opacity='.045'/%3E%3C/svg%3E");
  --card: #111114;       /* a box on the panel */
  --card-lo: #0f0f12;    /* a quieter box */
  --card-hi: #131317;    /* the lead box and the closing band */
  --card-hov: #141418;   /* a box under the pointer */
  --card-up: #141418;    /* a chosen row, a day you can pick */
  --card-on: #17171b;    /* the open case study card */
  --row: #121215;        /* the column's case study cards */
  --row-hov: #151518;
  --cv-mix: 14%;         /* how much of the accent tints a card's cover */
  --fq-bg: #0e0e11;      /* the featured quote */
  --sheet: #0d0d10;      /* the sign in card over the field */
  --sheet-shadow: none;
  --fq-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  --well: #0d0d10;       /* chips and cases sunk into a box */
  --well-2: #0c0c0f;     /* the address field in a live frame */
  --lv-bar: #141418;
  --tip: #16161b;
  --fl-on: #17171c;
  --path-on: #16161a;
  --msg: #17171b;
  --input: #111113;
  --input-f: #141416;
  --chip-ic: #1c1c22;
  --step-i: #1d1d22;
  --mark-bg: #1b1b21;
  --track: #1a1a1f;
  --prog: #202026;
  --dot: #2a2a30;
  --thumb: #1a1a1e;
  --edge: rgba(255, 255, 255, .14);
  --line-in: rgba(255, 255, 255, .16);   /* inputs, chips and days, the edge is the control */
  --line-h30: rgba(255, 255, 255, .3);
  --line-h32: rgba(255, 255, 255, .32);
  --line-h34: rgba(255, 255, 255, .34);
  --line-h36: rgba(255, 255, 255, .36);
  --line-f: rgba(255, 255, 255, .5);
  --x-hov: rgba(255, 255, 255, .1);
  --off: rgba(255, 255, 255, .3);
  --veil: rgba(8, 8, 10, .86);   /* small labels laid over images */
  --veil-tx: #fff;
  --veil-88: rgba(8, 8, 10, .88);
  --bar: rgba(10, 10, 11, .96);
  --dim: #000;           /* the veil over the mosaic until hover */
  --ok: #5fd38d;
  --live: #5fd38d;
  --warn: #f2b76c;
  --pill: #e7e4e1;
  --pill-tx: #111;
  --pill-hov: #fff3f0;
  --on-accent: #000;     /* text and icons on an accent fill */
  --tag: #000;
  --tag-tx: #fff;
  --dash: rgba(255, 255, 255, .22);
  --dash-hov: rgba(255, 255, 255, .4);
  --dash-on: #fff;
  --hold: rgba(255, 255, 255, .45);
  --hold-hov: rgba(255, 255, 255, .85);
  --lg-filter: grayscale(1) brightness(1.6);
  --logo-dk: block;      /* the official logos, light on dark, and anything shown only in dark */
  --logo-lt: none;       /* their dark twins, and anything shown only in light */
}

/* ---------- the light theme ----------
   The visitor's system choice, or the one they picked with the theme
   button (site.js keeps it in localStorage and the inline script in the
   head sets data-theme before the first paint). Both blocks hold the same
   values, keep them in step. The company accents are deepened so they
   read as text on the light panels and carry white on their fills. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e9e7e1;
  --panel: #f7f6f2;
  --panel-2: #f1f0eb;
  --tx: #17171a;
  --tx-mid: #45454c;
  --tx-mut: #64636a;     /* 5.1:1 on the column, 5.9:1 on a box */
  --line: rgba(23, 22, 18, .1);
  --line-2: rgba(23, 22, 18, .17);
  --hover: rgba(23, 22, 18, .045);
  --sel: rgba(23, 22, 18, .075);
  --accent: #17171a;
  --grid-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M20 0V20H0' fill='none' stroke='%2317160f' stroke-opacity='.06'/%3E%3C/svg%3E");
  --card: #fff;
  --card-lo: #fbfaf8;
  --card-hi: #fff;
  --card-hov: #fcfbf9;
  --card-up: #fff;
  --card-on: #fff;
  --row: #fff;
  --row-hov: #fff;
  --cv-mix: 9%;
  --fq-bg: #fff;
  --sheet: #fff;
  --sheet-shadow: 0 24px 64px rgba(40, 32, 20, .16), 0 2px 8px rgba(40, 32, 20, .06);
  --fq-shadow: 0 24px 64px rgba(40, 32, 20, .1), 0 2px 8px rgba(40, 32, 20, .04);
  --well: #f3f2ee;
  --well-2: #f3f2ee;
  --lv-bar: #edece7;
  --tip: #fff;
  --fl-on: #fff;
  --path-on: #fff;
  --msg: #f3f2ee;
  --input: #fff;
  --input-f: #fff;
  --chip-ic: #f0efea;
  --step-i: #f0efea;
  --mark-bg: #f0efea;
  --track: #e6e4de;
  --prog: #e3e1db;
  --dot: #d3d1cb;
  --thumb: #ebe9e4;
  --edge: rgba(23, 22, 18, .12);
  --line-in: rgba(23, 22, 18, .5);       /* 3:1 or better against the box and the panel */
  --line-h30: rgba(23, 22, 18, .3);
  --line-h32: rgba(23, 22, 18, .32);
  --line-h34: rgba(23, 22, 18, .34);
  --line-h36: rgba(23, 22, 18, .62);
  --line-f: rgba(23, 22, 18, .72);
  --x-hov: rgba(23, 22, 18, .08);
  --off: rgba(23, 22, 18, .3);
  --veil: rgba(255, 255, 255, .94);
  --veil-tx: #17171a;
  --veil-88: rgba(255, 255, 255, .94);
  --bar: rgba(247, 246, 242, .96);
  --dim: #f7f6f2;
  --ok: #1d7a46;
  --live: #23a05a;
  --warn: #9a5208;
  --pill: #17171a;
  --pill-tx: #fff;
  --pill-hov: #34343a;
  --on-accent: #fff;
  --tag: #17171a;
  --tag-tx: #fff;
  --dash: rgba(23, 22, 18, .16);
  --dash-hov: rgba(23, 22, 18, .3);
  --dash-on: #17171a;
  --hold: rgba(23, 22, 18, .5);
  --hold-hov: rgba(23, 22, 18, .85);
  --lg-filter: grayscale(1);
  --logo-dk: none;
  --logo-lt: block;
}
:root[data-theme="light"] body { --fld: var(--fld-l); }
/* the same values for a visitor whose system is light and who has not picked a theme */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #e9e7e1;
    --panel: #f7f6f2;
    --panel-2: #f1f0eb;
    --tx: #17171a;
    --tx-mid: #45454c;
    --tx-mut: #64636a;     /* 5.1:1 on the column, 5.9:1 on a box */
    --line: rgba(23, 22, 18, .1);
    --line-2: rgba(23, 22, 18, .17);
    --hover: rgba(23, 22, 18, .045);
    --sel: rgba(23, 22, 18, .075);
    --accent: #17171a;
    --grid-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M20 0V20H0' fill='none' stroke='%2317160f' stroke-opacity='.06'/%3E%3C/svg%3E");
    --card: #fff;
    --card-lo: #fbfaf8;
    --card-hi: #fff;
    --card-hov: #fcfbf9;
    --card-up: #fff;
    --card-on: #fff;
    --row: #fff;
    --row-hov: #fff;
    --cv-mix: 9%;
    --fq-bg: #fff;
    --sheet: #fff;
    --sheet-shadow: 0 24px 64px rgba(40, 32, 20, .16), 0 2px 8px rgba(40, 32, 20, .06);
    --fq-shadow: 0 24px 64px rgba(40, 32, 20, .1), 0 2px 8px rgba(40, 32, 20, .04);
    --well: #f3f2ee;
    --well-2: #f3f2ee;
    --lv-bar: #edece7;
    --tip: #fff;
    --fl-on: #fff;
    --path-on: #fff;
    --msg: #f3f2ee;
    --input: #fff;
    --input-f: #fff;
    --chip-ic: #f0efea;
    --step-i: #f0efea;
    --mark-bg: #f0efea;
    --track: #e6e4de;
    --prog: #e3e1db;
    --dot: #d3d1cb;
    --thumb: #ebe9e4;
    --edge: rgba(23, 22, 18, .12);
    --line-in: rgba(23, 22, 18, .5);       /* 3:1 or better against the box and the panel */
    --line-h30: rgba(23, 22, 18, .3);
    --line-h32: rgba(23, 22, 18, .32);
    --line-h34: rgba(23, 22, 18, .34);
    --line-h36: rgba(23, 22, 18, .62);
    --line-f: rgba(23, 22, 18, .72);
    --x-hov: rgba(23, 22, 18, .08);
    --off: rgba(23, 22, 18, .3);
    --veil: rgba(255, 255, 255, .94);
    --veil-tx: #17171a;
    --veil-88: rgba(255, 255, 255, .94);
    --bar: rgba(247, 246, 242, .96);
    --dim: #f7f6f2;
    --ok: #1d7a46;
    --live: #23a05a;
    --warn: #9a5208;
    --pill: #17171a;
    --pill-tx: #fff;
    --pill-hov: #34343a;
    --on-accent: #fff;
    --tag: #17171a;
    --tag-tx: #fff;
    --dash: rgba(23, 22, 18, .16);
    --dash-hov: rgba(23, 22, 18, .3);
    --dash-on: #17171a;
    --hold: rgba(23, 22, 18, .5);
    --hold-hov: rgba(23, 22, 18, .85);
    --lg-filter: grayscale(1);
    --logo-dk: none;
    --logo-lt: block;
  }
  :root:not([data-theme="dark"]) body { --fld: var(--fld-l); }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg) var(--grid-tile);
  color: var(--tx-mid);
  font: 400 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; transition: color 250ms var(--ease-pw); }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
.skip { position: fixed; left: 12px; top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 60; display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: 768px; border: 1px solid var(--btn-1-edge); background: var(--btn-1); color: var(--btn-1-tx) !important; font: 400 14px/21px var(--sans); letter-spacing: -.01em; transform: translateY(calc(-100% - 24px - env(safe-area-inset-top, 0px))); transition: transform 250ms var(--ease-pw), background-color 250ms var(--ease-pw); }
.skip:hover { background: var(--btn-1-h); }
.skip:focus { transform: none; }
.chev { width: 14px; height: 14px; flex: none; }

/* ---------- sidebar, Finder's first column ---------- */
.side {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 26px 14px 22px; min-height: 0; overflow-y: auto;
  border-right: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--tx); font: 600 16.5px/1 var(--disp); letter-spacing: -.01em; }
.mark { width: 16px; height: 16px; fill: currentColor; flex: none; }
.tm-mark .mark { width: 24px; height: 24px; }
/* ---------- Sidebar nav refinement, 2026-10-08 ----------
   Each row is a 16px glyph, the label and a quiet tail on the right edge.
   Studio pages carry a line icon, companies their own mark (a lettered tile
   when the mark is a wordmark or missing, navMark in build.mjs). Glyphs sit
   muted and brighten with the label on hover and when open. A count shows
   only for a company with more than one case study and gives way to the
   chevron on hover. The open row is a pill with the close mark, the same
   10px radius as the sign in row and the theme button. Every glyph and the
   close mark share one right ink edge, 12px in from the row. */
/* the glyphs, a line icon or a mark drawn as a mask in the text colour */
/* touch has no hover, so the chevron stays and the count sits beside it */
/* the close mark arrives as the row opens, no fill so hover keeps working */
@keyframes mark-in { from { opacity: 0; transform: scale(.7); } }
/* ---------- end of the sidebar nav refinement ---------- */
@media (max-height: 980px) { .side { padding-top: 22px; padding-bottom: 16px; } }
.ghost {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 36px; border-radius: 768px;
  border: 1px solid var(--btn-2-edge); background: var(--btn-2); color: var(--btn-2-tx) !important; font: 400 14px/21px var(--sans); letter-spacing: -.01em; white-space: nowrap;
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  transition: background-color 250ms var(--ease-pw), color 250ms var(--ease-pw);
}
.ghost:hover { background: var(--btn-2-h); }
.mail { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 0 6px; }
.mail { padding: 0 4px; gap: 4px; }
.mail a { color: var(--pd-mid); font-size: 14px; line-height: 21px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail a:hover { color: var(--pd-tx); }
/* the copy button, a quiet round icon button. Copied is a calm warm tint and
   a check in the text colour, never a status green */
.copy { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--pd-dim); cursor: pointer; transition: color 250ms var(--ease-pw), background-color 250ms var(--ease-pw); }
.copy::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
.copy:hover { color: var(--pd-tx); background: var(--ic-h); }
.copy svg { width: 16px; height: 16px; transition: opacity 150ms var(--ease-pw); }
.copy::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; background: currentColor; -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat; opacity: 0; transition: opacity 150ms var(--ease-pw); pointer-events: none; }
.copy.done { color: var(--pd-tx); background: var(--done); }
.copy.done svg { opacity: 0; }
.copy.done::after { opacity: 1; }
/* the word slides out of the button and fades, then clears once hidden */
.copied { position: absolute; right: 42px; white-space: nowrap; font-size: 14px; line-height: 21px; color: var(--pd-tx); pointer-events: none; opacity: 0; transform: translateX(6px); transition: opacity 250ms var(--ease-pw), transform 250ms var(--ease-pw); }
.copy.done .copied { opacity: 1; transform: none; }
/* the address steps back while the word stands in its place, so they never overlap */
.mail > a { transition: color 250ms var(--ease-pw), opacity 250ms var(--ease-pw); }
.mail:has(.copy.done) > a { opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .copy.done::after { animation: tap-pop var(--dur-base) var(--ease-out); } }
@keyframes tap-pop { from { transform: scale(.72); } }

.pill {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 36px; border-radius: 768px;
  border: 1px solid var(--btn-1-edge); background: var(--btn-1); color: var(--btn-1-tx) !important; font: 400 14px/21px var(--sans); letter-spacing: -.01em; white-space: nowrap;
  transition: background-color 250ms var(--ease-pw), color 250ms var(--ease-pw);
}
.pill:hover { background: var(--btn-1-h); }
/* one press for every button shaped thing, a quick dip and an unhurried release */
:is(.signin, .ch-opt, .art-full, .art-x, .pw-eye, .over-x):active { transform: scale(.97); transition-duration: var(--dur-press); }
.art-head h1 { margin: 0; color: var(--tx); font: 600 32px/1.12 var(--disp); letter-spacing: -.022em; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; text-wrap: balance; }
.lede { margin: 14px 0 0; color: var(--tx); font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.meta { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 26px 0 0; padding: 0; }
.meta dt { color: var(--tx-mut); font-size: 13px; }
.meta dd { margin: 0; color: var(--tx); font-size: 14px; }
.meta a { color: var(--accent); }
.meta a:hover { text-decoration: underline; text-underline-offset: 3px; }

.art-body { margin-top: 32px; padding-top: 30px; border-top: 1px solid var(--line); }
.art-body p { margin: 0 0 16px; text-wrap: pretty; }
.art-body h2 { margin: 52px 0 12px; color: var(--tx); font: 600 21px/1.25 var(--disp); letter-spacing: -.015em; }
.art-body > h2:first-child { margin-top: 0; }
.art-body h3 { margin: 0 0 10px; color: var(--tx); font: 500 14px/1.3 var(--sans); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); margin: 30px 0 36px; padding: 0; max-width: none !important; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats div { padding: 18px 18px 18px 0; }
.stats div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.stats dt { color: var(--tx); font: 600 clamp(24px, 2.2vw, 30px)/1.1 var(--disp); letter-spacing: -.02em; }
.stats dd { margin: 6px 0 0; color: var(--tx-mut); font-size: 13.5px; line-height: 1.4; text-wrap: balance; }

.scope { margin: 26px 0 30px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.scope ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }
.scope li { break-inside: avoid; position: relative; padding: 3px 0 3px 18px; font-size: 14px; line-height: 1.45; }
.scope li::before { content: ''; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }

.fig { margin: 30px 0 36px; max-width: none !important; }
.shot { width: 100%; border-radius: 10px; }
video.shot { display: block; height: auto; }
.fig figcaption { margin-top: 10px; color: var(--tx-mut); font-size: 13.5px; }
.g-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; align-items: start; }
.gallery.g3 .g-row { grid-template-columns: 1fr 1fr 1fr; }
.phones-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 560px; }
.phones.one .phones-row { grid-template-columns: minmax(0, 272px); }
.phone .shot { border-radius: 18px; }

.compare .cmp-frame { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); touch-action: pan-y; aspect-ratio: var(--ar); }
.compare .shot { border: 0; border-radius: 0; }
.cmp-after { height: 100%; object-fit: cover; object-position: top left; }
.cmp-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cmp-before .shot { height: 100%; object-fit: cover; object-position: top left; }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; pointer-events: none; }
.cmp-handle::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%;
}
.cmp-tag { position: absolute; top: 12px; padding: 5px 10px; border-radius: 99px; background: var(--tag); color: var(--tag-tx); font-size: 13px; pointer-events: none; }
.cmp-tag.l { left: 12px; } .cmp-tag.r { right: 12px; }
.cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare.tall .cmp-frame { max-width: 320px; border-radius: 20px; }
.cmp-handle::after { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.cmp-frame:hover .cmp-handle::after { transform: scale(1.06); }
.cmp-frame:active .cmp-handle::after { transform: scale(.94); transition-duration: var(--dur-press); }
.compare:focus-within .cmp-handle::after { box-shadow: 0 0 0 3px var(--accent); }

.quote { margin: 36px 0 40px; padding: 0 0 0 20px; border-left: 2px solid var(--accent); max-width: 660px; }
.quote p { margin: 0 !important; color: var(--tx); font: 500 20px/1.45 var(--disp); letter-spacing: -.01em; text-wrap: pretty; }
.quote footer { margin-top: 12px; color: var(--tx-mut); font-size: 13.5px; }
.quote footer b { color: var(--tx-mid); font-weight: 500; }

.out a, .art-body p a { color: var(--accent); }
.out a:hover { text-decoration: underline; text-underline-offset: 3px; }
.note { color: var(--tx-mut); font-size: 13.5px; border-left: 2px solid var(--accent); padding-left: 12px; }

.faq { margin-top: 48px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 14px 28px 14px 0; color: var(--tx); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 2px; top: 12px; color: var(--tx-mut); font-size: 18px; transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.faq summary:hover::after { color: var(--tx); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details.closing summary::after { transform: none; }
/* site.js eases the height open and shut, this only clips while it runs */
.faq details.anim { overflow: hidden; }
.faq details p { margin: 0 0 16px; }
@media (prefers-reduced-motion: no-preference) { .faq details[open]:not([data-wired]) p { animation: fade-in var(--dur-base) var(--ease-out); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-rise { from { opacity: 0; transform: translateY(4px); } }

/* ---------- start a project ---------- */
.start { margin-top: 4px; display: grid; gap: 26px; max-width: 660px; }
.start fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.start legend { display: block; margin-bottom: 10px; color: var(--tx); font-size: 14.5px; padding: 0; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; height: 38px; padding: 0 15px; border-radius: 99px; border: 1px solid var(--line-in); color: var(--tx-mid); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.chip:active span { transform: scale(.96); transition-duration: var(--dur-press); }
@media (prefers-reduced-motion: no-preference) { .chip input:checked + span { animation: sel-pop var(--dur-base) var(--ease-out); } }
@keyframes sel-pop { from { transform: scale(.94); } }
.chip:hover span { border-color: var(--line-h32); color: var(--tx); }
.chip input:checked + span { background: var(--pill); border-color: var(--pill); color: var(--pill-tx); }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.f-field { display: block; }
.f-field input, .f-field textarea {
  width: 100%; font: inherit; color: var(--tx); background: var(--input); border: 1px solid var(--line-in); border-radius: 10px;
  padding: 11px 13px; outline: none; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.f-field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.f-field input:focus, .f-field textarea:focus { border-color: var(--line-f); background: var(--input-f); }
.f-field textarea::placeholder { color: var(--tx-mut); }
.bad input, .bad textarea { border-color: var(--warn); }
.f-err { display: block; color: var(--warn); font-size: 13px; margin-top: 6px; }
.f-err:empty { display: none; }
.sent[hidden] { display: none; }
.sent h2 { margin-top: 0 !important; }
/* the confirmation, its lines rise in a step apart, the mark pops and its tick draws */
@media (prefers-reduced-motion: no-preference) {
  .f-err { animation: fade-rise var(--dur-base) var(--ease-out); }
  .sent > * { animation: rise-in var(--dur-slow) var(--ease-out) backwards; }
  .sent > :nth-child(2) { animation-delay: calc(var(--stagger) * 2); }
  .sent > :nth-child(3) { animation-delay: calc(var(--stagger) * 3); }
  .sent > :nth-child(4) { animation-delay: calc(var(--stagger) * 4); }
  .sent > :nth-child(n+5) { animation-delay: calc(var(--stagger) * 5); }
}
@keyframes tick-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }

/* ---------- the real thing, live in the article ---------- */
.live { max-width: none !important; }
.live > .lv-view { border: 1px solid var(--line-2); }
.live.interactive iframe { pointer-events: auto; }
.lv-try { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 7px 12px; border-radius: 99px; background: var(--veil); color: var(--veil-tx); font-size: 13px; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); }
.live.used .lv-try { opacity: 0; }
.lv-view { position: relative; overflow: hidden; border-radius: 12px; contain: strict; }
.lv-view iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; opacity: 0; transition: opacity var(--dur-slow) var(--ease-io); background: #fff; pointer-events: none; }
.lv-view iframe.on { opacity: 1; }
.lv-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: opacity var(--dur-slow) var(--ease-out); }
/* the poster fades up once decoded, then the live page crossfades over it */
.lv-poster.wait { opacity: 0; }
.phone-live { max-width: 340px !important; }
body.full .art-body > .phone-live { max-width: 340px !important; }
.live.interactive .lv-try { left: auto; right: 12px; }
.phone-live .lv-view { border-radius: 22px; }

/* ---------- studio visuals ---------- */
.ic { width: 22px; height: 22px; }
.steps { list-style: none; margin: 26px 0 38px; padding: 0; position: relative; display: grid; gap: 0; max-width: none !important; }
.steps::before { content: ''; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: var(--line-2); }
.steps::after { content: ''; position: absolute; left: 21px; top: 22px; width: 2px; height: calc(100% - 44px); background: var(--accent); transform-origin: top; transform: scaleY(var(--grow, 1)); }
.steps li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 0 0 26px; }
.steps li:last-child { padding-bottom: 0; }
.split { margin: 22px 0 34px; max-width: none !important; }
.mo { position: relative; display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 10; }
/* the dim is a black veil at 18 percent, the same as brightness .82, so the hover only fades opacity */
.mo::after { content: ''; position: absolute; inset: 0; background: var(--dim); opacity: .18; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); }
.mo:hover::after { opacity: 0; }
.mo:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.mo img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform var(--dur-slow) var(--ease-out); }
.mo:hover img { transform: scale(1.03); }
.mo span { position: absolute; z-index: 1; left: 10px; bottom: 10px; display: grid; padding: 7px 10px; border-radius: 9px; background: var(--veil-88); color: var(--tx); font-size: 13px; font-weight: 500; line-height: 1.3; }
.mo span i { font-style: normal; color: var(--tx-mut); font-weight: 400; }
.proof { display: grid; grid-template-columns: repeat(var(--k, 4), 1fr); gap: 0; margin: 24px 0 36px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; max-width: none !important; }
.pf { display: grid; gap: 4px; padding: 18px; background: var(--card-lo); border-right: 1px solid var(--line); transition: background var(--dur-fast) var(--ease-out); }
.pf:last-child { border-right: 0; }
.pf:hover { background: var(--card-hov); }
.pf em { font-style: normal; color: var(--tx); font: 600 28px/1.05 var(--disp); letter-spacing: -.02em; }
.pf span { color: var(--tx-mid); font-size: 14px; line-height: 1.4; }
.pf small { color: var(--accent); font-size: 13px; margin-top: 4px; }
/* entrances, only with motion allowed and only once seen */
/* A keyframe with backwards fill, not a transition on the children, so the
   children keep their own hover transitions and no delay leaks into them. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal:not(.in) > * { opacity: 0; transform: translateY(14px); }
  html.js .reveal.in > * { animation: rise-in-far var(--dur-slow) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * var(--stagger) * 1.4); }
  html.js .steps.reveal { --grow: 0; }
  html.js .steps.reveal::after { transition: transform 1.1s var(--ease-io) .15s; }
  html.js .steps.reveal.in { --grow: 1; }
  html.js .split.reveal > *, html.js .split.reveal.in > * { opacity: 1; transform: none; animation: none; }
}
@keyframes rise-in-far { from { opacity: 0; transform: translateY(14px); } }
/* a block already on screen when its page opens is simply there (site.js enhance) */
html.js .reveal.now > *, html.js .reveal.now::after { animation: none !important; transition: none !important; }
@media (max-width: 1180px) { .proof { grid-template-columns: repeat(min(var(--k, 4), 3), 1fr); } .proof .pf { border-bottom: 1px solid var(--line); } }
@media (max-width: 640px) { .proof { grid-template-columns: 1fr 1fr; } .mo:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; } }

/* the smart bits on the studio pages */
.lg { position: relative; overflow: hidden; }
.sp-step { position: relative; z-index: 1; display: grid; justify-items: start; gap: 4px; padding: 0 0 6px; border: 0; background: none; color: var(--tx-mut); text-align: left; cursor: pointer; font: inherit; }
.sp-step small { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.sp-step b { color: var(--tx-mid); font: 600 17px/1.25 var(--disp); transition: color var(--dur-base) var(--ease-out); }
.sp-step small { transition: color var(--dur-base) var(--ease-out); }
.sp-step.on b, .sp-step:hover b { color: var(--tx); }
.sp-step.on small { color: var(--accent); }
/* the panels share one grid cell, so the box keeps the tallest panel's
   height and nothing below it jumps as the stepper plays. The old panel
   fades out quickly in place, the new one rises in just behind it. */
.sp-panel { grid-area: 1 / 1; position: relative; display: grid; grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px 32px; align-items: start; padding: 24px 28px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); opacity: 0; transform: translateY(6px); visibility: hidden; transition: opacity var(--dur-fast) var(--ease-io), transform var(--dur-base) var(--ease-out), visibility 0s var(--dur-base); pointer-events: none; }
.sp-panel.on { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity var(--dur-base) var(--ease-out) 60ms, transform var(--dur-slow) var(--ease-out) 40ms, visibility 0s; }
.sp-panel p { margin: 0 !important; color: var(--tx-mid); font-size: 16px; line-height: 1.65; }
@media (max-width: 1080px) { .sp-panel { grid-template-columns: auto 1fr; } }
/* a drifting row of client words under the start flow, quiet and fully
   legible, the label sits outside the faded edges */
/* about 36px a second, slow enough to read a quote as it passes */
@keyframes marq { to { transform: translateX(calc(-50% - 5px)); } }

/* the testimonial wall, columns drift at their own pace, edges fade */
/* a pause for keyboard users, site.js adds it just before the wall and the
   row of quotes. Hidden until focused, then it sits over their top corner. */
@keyframes wall-down { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 7px)); } }
@keyframes wall-up { from { transform: translateY(calc(-50% - 7px)); } to { transform: translateY(0); } }
/* the featured quote, front and centre over the drifting wall */
@keyframes fq-fill { to { transform: none; } }
.ch-opt { height: 44px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--card); color: var(--tx); font: 500 14px/1 var(--sans); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.ch-opt:hover { border-color: var(--line-h34); }
.ch-opt.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.xp-item.hl .xp-head b { color: var(--accent); }
.team { display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin: 18px 0 30px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); max-width: none !important; }
.team > div { flex: 1; display: grid; gap: 2px; }
.team b { color: var(--tx); font: 600 17px/1.3 var(--disp); }
.team span { color: var(--tx-mid); font-size: 14.5px; }
@media (max-width: 760px) { .team { flex-wrap: wrap; } }

/* services explorer, a list of needs and one panel that changes, nothing
   on the page moves when you hover */
.ex-row { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) 16px; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border-radius: 14px; border: 1px solid transparent; background: none; color: var(--tx-mid); text-align: left; cursor: pointer; font: inherit; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.ex-row::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--accent); transform: scaleY(0); transition: transform var(--dur-base) var(--ease-out); }
.ex-row:active { background: var(--sel); transition-duration: var(--dur-press); }
.ex-row:hover { background: var(--hover); }
.ex-row.on { background: var(--card-up); border-color: var(--line-2); }
.ex-row.on::before { transform: none; }
.ex-panel { grid-area: 1 / 1; display: grid; align-content: start; gap: 12px; padding: 26px 28px 28px; border-radius: 20px; background: var(--card); border: 1px solid var(--line-2); opacity: 0; transform: translateY(6px); visibility: hidden; transition: opacity var(--dur-fast) var(--ease-io), transform var(--dur-base) var(--ease-out), visibility 0s var(--dur-base); }
.ex-panel.on { opacity: 1; transform: none; visibility: visible; transition: opacity var(--dur-base) var(--ease-out) 60ms, transform var(--dur-slow) var(--ease-out) 40ms, visibility 0s; }
.ex-panel h3 { margin: 6px 0 0 !important; color: var(--tx); font: 600 clamp(24px, 2.2vw, 30px)/1.15 var(--disp) !important; letter-spacing: -.02em; }
.ex-panel p { margin: 0 !important; color: var(--tx-mid); font-size: 16px; line-height: 1.6; max-width: 560px; }
.ex-panel ul { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.ex-panel li { position: relative; padding-left: 18px; color: var(--tx); font-size: 14.5px; line-height: 1.45; }
.ex-panel li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }
@media (max-width: 640px) { .ex-panel ul { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ex-panel, .ex-panel.on { transition: none; } }

/* services, one row opens at a time on hover, focus or tap */
.xp-item { border-bottom: 1px solid var(--line); }
.xp-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 18px; width: 100%; padding: 22px 4px; border: 0; background: none; color: var(--tx-mid); text-align: left; cursor: pointer; font: inherit; }
.xp-head .ic { width: 26px; height: 26px; justify-self: center; color: var(--tx-mut); transition: color var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.xp-head b { display: block; color: var(--tx-mid); font: 600 clamp(22px, 2.3vw, 32px)/1.15 var(--disp); letter-spacing: -.02em; transition: color var(--dur-fast) var(--ease-out); }
.xp-head small { display: block; margin-top: 6px; color: var(--tx-mut); font-size: 14.5px; }
.xp-item.open .xp-head b, .xp-head:hover b { color: var(--tx); }
.xp-item.open .xp-head .ic { color: var(--accent); transform: scale(1.12); }
@media (max-width: 760px) { .xp-head { grid-template-columns: 36px minmax(0, 1fr) auto; } }

/* ---------- start a project, one flow ----------
   The page is the flow. On desktop the article fills the area top to
   bottom, the question sits centred in the space that is left and the
   action bar and the quotes sit under it, so nothing scrolls on a laptop.
   Steps share one grid cell, so the stage is as tall as its tallest step
   and the action bar never jumps. Every move is transform and opacity on
   one easing. */
body[data-page="start"] { --pw: 1000px; --fl-ease: var(--ease-out); --fl-in: 520ms; --fl-out: 260ms; }
body[data-page="start"] .art-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 14px; padding-right: 60px; }
body[data-page="start"] .art-head h1 { font-size: 21px !important; letter-spacing: -.012em !important; line-height: 1.25; }
body[data-page="start"] .art-head .lede { margin: 0 !important; font-size: 14.5px !important; color: var(--tx-mut); }
body[data-page="start"] .art-body { border-top: 0; padding-top: 0; margin-top: 20px; }
@media (min-width: 901px) {
  body[data-page="start"] .art { position: relative; min-height: 100%; display: flex; flex-direction: column; padding-bottom: 24px; }
  body[data-page="start"] .art-body { flex: 1; display: flex; flex-direction: column; }
}


/* progress, six segments that fill in turn, and the answers so far */
.fl-prog { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.fl-prog i { display: block; height: 4px; border-radius: 99px; background: var(--prog); overflow: hidden; }
.fl-prog b { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-slow) var(--fl-ease); }
.fl-prog i.on b { transform: none; }
@keyframes fl-chip { from { opacity: 0; transform: translateY(6px) scale(.94); } }
@container flow (max-width: 559.98px) {
}
@container flow (min-width: 560px) { }

/* the stage, one question at a time */
.fl-step { min-width: 0; align-self: center; }
html.js .fl-step { grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(var(--x, 36px), 0, 0);
  transition: opacity var(--fl-out) var(--fl-ease), transform var(--fl-in) var(--fl-ease), visibility 0s linear var(--fl-in); }
html.js .fl-step.on { opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity var(--fl-in) var(--fl-ease) 90ms, transform var(--fl-in) var(--fl-ease) 60ms, visibility 0s; }
html:not(.js) .fl-step { margin-bottom: 48px; }
/* without the script every step shows at once and the button sends, the parts that need the script stay out */
html:not(.js) :is(.fl-back, .fl-top, .fl-hint, [data-step="time"], [data-step="review"], .fl-key) { display: none !important; }
/* on narrow screens a step leaves the flow while it is hidden, so short steps leave no gap */
@container flow (max-width: 559.98px) { html.js .fl-step:not(.on) { position: absolute; inset: 0 0 auto 0; } .fl-step { align-self: start; } }
body[data-page="start"] .fl-q { margin: 0 !important; color: var(--tx); font: 600 clamp(27px, 4.2cqi, 54px)/1.08 var(--disp) !important; letter-spacing: -.028em; text-wrap: balance; outline: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .fl-step.on :is(.fl-card, .fl-fields > *, .fl-notes, .fl-sched > *, .fl-review > div) { animation: fl-rise var(--fl-in) var(--fl-ease) backwards; animation-delay: calc(130ms + var(--i, 0) * 45ms); }
  html.js .fl-step.on :is(.fl-fields > :nth-child(2), .fl-sched > :nth-child(2), .fl-review > div:nth-child(2)) { --i: 1; }
  html.js .fl-step.on :is(.fl-notes, .fl-review > div:nth-child(3)) { --i: 2; }
}
@keyframes fl-rise { from { opacity: 0; transform: translateY(12px); } }

/* option tiles, an icon and a label, the number key in the corner turns into a tick */
.fl-card { position: relative; display: grid; grid-template-rows: auto auto; justify-items: center; align-content: center; gap: 16px; min-height: clamp(132px, 17cqi, 172px); padding: 22px 14px 20px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--card); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--fl-ease); }
.fl-card:hover { border-color: var(--line-h30); background: var(--card-hov); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .fl-card:hover { transform: translateY(-2px); } }
.fl-card:active { transform: scale(.975); transition-duration: var(--dur-press); }
.fl-card input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fl-tx { color: var(--tx); font: 500 16px/1.25 var(--disp); letter-spacing: -.005em; text-wrap: balance; }
.fl-card:has(input:checked) { border-color: var(--accent); background: var(--fl-on); }
.fl-card:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
@keyframes fl-pop { 0% { transform: scale(.86); } 60% { transform: scale(1.05); } }
/* on a big screen the tiles grow with it */
@container stage (min-width: 1000px) {
  .fl-card { min-height: 198px; gap: 20px; border-radius: 20px; }
  .fl-tx { font-size: 17.5px; }
}
/* under 600px across, tiles turn into rows, two columns while they fit, one below that */
@container stage (max-width: 599.98px) {
  .fl-card { grid-template-columns: 40px minmax(0, 1fr) 24px; grid-template-rows: none; justify-items: start; align-items: center; gap: 12px; min-height: 64px; padding: 11px 12px 11px 12px; border-radius: 14px; text-align: left; }
}
@container stage (max-width: 439.98px) {
}

/* text steps */
@container stage (min-width: 520px) { }
.fl-err { max-width: 640px; margin: 16px auto 0 !important; text-align: center; font-size: 14px !important; }

/* the call picker, a small calendar and the times for the chosen day */
@container stage (min-width: 640px) { }
.fl-day { position: relative; display: grid; place-items: center; height: 46px; border-radius: 12px; color: var(--off); font: 500 15px/1 var(--sans); font-variant-numeric: tabular-nums; }
label.fl-day { color: var(--tx); background: var(--card-up); border: 1px solid var(--line-in); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--fl-ease); }
label.fl-day:hover { border-color: var(--line-h36); }
label.fl-day:active { transform: scale(.94); transition-duration: var(--dur-press); }
.fl-day input, .fl-slot input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
label.fl-day:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
label.fl-day:has(input:focus-visible), .fl-slot:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.fl-day.today::after { content: ''; position: absolute; bottom: 6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.fl-slot { position: relative; display: grid; align-content: center; gap: 2px; min-height: 52px; padding: 8px 13px; border-radius: 12px; border: 1px solid var(--line-in); background: var(--card); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--fl-ease); }
.fl-slot:hover { border-color: var(--line-h36); }
.fl-slot:active { transform: scale(.97); transition-duration: var(--dur-press); }
.fl-slot b { color: var(--tx); font: 500 15.5px/1.2 var(--sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fl-slot small { color: var(--tx-mut); font-size: 13px; line-height: 1.25; white-space: nowrap; }
.fl-slot:has(input:checked) { background: var(--accent); border-color: var(--accent); }
.fl-slot:has(input:checked) :is(b, small) { color: var(--on-accent); }
.fl-none { grid-column: 1 / -1; margin: 0 !important; color: var(--tx-mid); font-size: 14.5px; }

/* review, the answers themselves, each with its own edit */
@container stage (min-width: 600px) { }

/* the action bar, it sticks to the bottom whenever the step runs past the screen */
@container flow (max-width: 899.98px) { }
@container flow (max-width: 639.98px) { }
@container flow (max-width: 479.98px) { }

/* the confirmation */
body[data-page="start"] .art-body > .fl-done { width: 100%; max-width: 600px !important; margin: auto; padding: 12px 0 28px; }
.fl-done > :is(.fl-done-ic, h2, .fl-done-p, .fl-done-note) { text-align: center; }
.fl-done[hidden] { display: none; }
body[data-page="start"] .fl-done h2 { margin: 0 0 10px !important; color: var(--tx); font: 600 clamp(28px, 3vw, 40px)/1.1 var(--disp) !important; letter-spacing: -.026em; outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .fl-done:not([hidden]) > * { animation: fl-rise var(--dur-slow) var(--fl-ease) backwards; }
  .fl-done:not([hidden]) > :nth-child(2) { animation-delay: 120ms; }
  .fl-done:not([hidden]) > :nth-child(3) { animation-delay: 170ms; }
  .fl-done:not([hidden]) > :nth-child(4) { animation-delay: 220ms; }
  .fl-done:not([hidden]) > :nth-child(5), .fl-done:not([hidden]) > :nth-child(6) { animation-delay: 270ms; }
  .fl-done:not([hidden]) > :nth-child(n+7) { animation-delay: 320ms; }
}
@keyframes fl-mark { from { opacity: 0; transform: scale(.55); } }
@keyframes fl-tick { from { opacity: 0; transform: scale(.4) rotate(-14deg); } }
@media (prefers-reduced-motion: reduce) { html.js .fl-step, html.js .fl-step.on, .fl-prog b { transition: none !important; } }
/* laptops with short screens, the same flow a little tighter so it still fits without scrolling */
@media (min-width: 901px) and (max-height: 860px) {
  body[data-level="studio"][data-page="start"] .art { padding-top: 28px; }
  body[data-page="start"] .art-body { margin-top: 16px; }
}

/* ---------- start, two ways in ---------- */
.start-wrap { max-width: 660px; }
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 30px; }
.path {
  display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center;
  padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); color: var(--tx-mid);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.path svg { grid-row: 1 / 3; width: 26px; height: 26px; color: var(--tx-mut); }
.path b { color: var(--tx); font: 500 16px/1.25 var(--disp); }
.path span { font-size: 13.5px; line-height: 1.4; }
.path:hover { border-color: var(--line-h30); }
.path[aria-selected="true"] { border-color: var(--accent); background: var(--path-on); box-shadow: 0 0 0 1px var(--accent); }
.path[aria-selected="true"] svg { color: var(--accent); }
.pane[hidden] { display: none !important; }
.tz { margin: 0 !important; color: var(--tx-mut); font-size: 13.5px; }
.chip.day span { flex-direction: column; justify-content: center; height: 58px; padding: 0 6px; border-radius: 12px; gap: 2px; font-size: 13.5px; text-align: center; width: 100%; }
.chip.day span b { font-weight: 500; color: inherit; font-size: 13px; opacity: .8; }
.chip.day { display: flex; }
.chip.time span { justify-content: center; flex-direction: column; height: 50px; border-radius: 12px; width: 100%; gap: 1px; }
.chip.time small { font-size: 13px; opacity: .75; }
.chip.time { display: flex; }
.f-hint { color: var(--tx-mut); font-size: 13.5px; grid-column: 1 / -1; padding: 10px 0; }
@media (max-width: 600px) {
  .paths { grid-template-columns: 1fr; }
}

/* steps, the sticky bar and the confirmation */
.step { display: inline-flex; align-items: center; gap: 10px; color: var(--tx); font: 500 15px/1.3 var(--disp); }
.step i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--step-i); border: 1px solid var(--line-2); color: var(--tx); font: 500 13px/1 var(--sans); font-style: normal; }
.f-group.ok .step i { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.start legend { margin-bottom: 12px; }
.f-group { display: grid; gap: 14px; }
.path em { position: absolute; top: 12px; right: 12px; font-style: normal; font-size: 12.5px; color: var(--accent); }
.path { position: relative; }
.sent { text-align: left; padding: 8px 0 0; }
.sent h2 { margin: 0 0 10px !important; font-size: 24px !important; }
.sent p { color: var(--tx-mid); }
/* the sign in row and the theme button share the last line of the sidebar */
.theme-btn { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 768px; border: 1px solid var(--btn-2-edge); background: var(--btn-2); color: var(--btn-2-tx); cursor: pointer; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); transition: background-color 250ms var(--ease-pw), color 250ms var(--ease-pw); }
.theme-btn:hover { background: var(--btn-2-h); }
/* Powder's secondary does not dip under a press, the fill holds at its hover value */
.theme-btn:active { background: var(--btn-2-h); }
.theme-btn svg { width: 16px; height: 16px; }
.theme-btn .th-sun { display: var(--logo-dk); }
.theme-btn .th-moon { display: var(--logo-lt); }
html:not(.js) .theme-btn { display: none; }
/* an official logo and its dark twin, one shows per theme */
img.lg-d { display: var(--logo-dk) !important; }
img.lg-l { display: var(--logo-lt) !important; }
/* a theme switch lands at once, nothing eases from one palette to the other */
html.theming, html.theming *, html.theming *::before, html.theming *::after { transition: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lg { display: grid; place-items: center; height: 76px; padding: 0 18px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); transition: border-color var(--dur-fast) var(--ease-out); }
.lg:hover { border-color: var(--line-2); }
.lg img { max-height: 30px; max-width: 100%; width: auto; object-fit: contain; filter: var(--lg-filter); opacity: .85; transition: filter var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.lg:hover img { filter: none; opacity: 1; }

/* ---------- phones and small tablets, one level per screen ----------
   The frame, the field and the sheets are laid out in the "phone layout"
   block further down (2026-10-08 responsive pass). These are the content
   rules that still apply inside the sheet. */
@media (max-width: 900px) {
  .art-wrap { position: static; width: auto !important; overflow: visible; visibility: visible !important; border: 0; }
  .art { padding: 22px 16px 48px; }
  .art-head h1 { font-size: 27px; }
  .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats div:nth-child(3) { padding-left: 0; border-left: 0; }
  .stats div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .stats dt { font-size: 25px; }
  .scope ul { columns: 1; }
  .gallery.g3 .g-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .g-row, .gallery.g3 .g-row { grid-template-columns: 1fr; }
}

/* ---------- reduced motion, everything lands in its settled state at once ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* studio pages in boxes, cards for each section, a boxed fact strip, the
   opening statement as a lead card, the guarantee and questions boxed, a
   closing call to action band */
body[data-level="studio"] .art-head .meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; width: 100%; max-width: none; margin-top: 24px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); overflow: hidden; }
body[data-level="studio"] .art-head .meta > div { padding: 14px 18px; border-left: 1px solid var(--line); }
body[data-level="studio"] .art-head .meta > div:first-child { border-left: 0; }
body[data-level="studio"] .art-head .meta dd { overflow-wrap: anywhere; }
body[data-level="studio"] .split { margin: 0 0 14px; padding: 24px 28px 26px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
body[data-level="studio"] .faq { margin-top: 40px; padding: 8px 26px 10px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
body[data-level="studio"] .faq > h2 { margin: 18px 0 8px !important; }
body[data-level="studio"] .faq details:first-of-type { border-top: 0; }
body[data-level="studio"] .faq details:last-child { border-bottom: 0; }
@media (max-width: 700px) { body[data-level="studio"] .art-head .meta { grid-template-columns: 1fr 1fr; } body[data-level="studio"] .art-head .meta > div:nth-child(odd) { border-left: 0; } body[data-level="studio"] .art-head .meta > div:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* layout and content fixes */

/* body text at about 68 characters a line, figures stay wide */
body[data-level="project"] .art-body > p, body[data-level="project"] .art-head > .lede { max-width: 68ch; }

/* the end of a case study, the next one and a quiet way to start */
.art-next { display: grid; gap: 14px; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); max-width: 660px; }
body.full .art-next { grid-column: 2; grid-row: 4; max-width: 1080px; }
@media (max-width: 1180px) and (min-width: 901px) { body.full .art-next { grid-column: 1; } }
@media (max-width: 600px) { .art-next { margin-top: 48px; } }

/* stats, four across when each gets 140px, two across below that, never
   three and one. A number never breaks. */
.stats { grid-template-columns: repeat(auto-fit, minmax(max((100% - 54px) / 4, min((100% - 18px) / 2, (614px - 100%) * 1000)), 1fr)); column-gap: 18px; overflow: hidden; }
.stats div, .stats div + div, .stats div:nth-child(n) { position: relative; padding: 18px 0; border-left: 0; border-top: 0; }
.stats div::after { content: ''; position: absolute; left: -9px; right: -9px; top: -1px; height: 1px; background: var(--line); }
.stats div::before { content: ''; position: absolute; left: -9px; top: 18px; bottom: 18px; width: 1px; background: var(--line); }
.stats dt { white-space: nowrap; }

/* galleries of three, one large and two small */
.gallery.g3 .g-row { grid-template-columns: 2fr 1fr; align-items: stretch; }
.gallery.g3 .g-cell:first-child { grid-row: span 2; }
.gallery.g3 .g-cell:first-child :is(.zoom, .shot) { height: 100%; }
.gallery.g3 .g-cell:first-child .shot { object-fit: cover; object-position: top left; }
@media (max-width: 600px) { .gallery.g3 .g-row { grid-template-columns: 1fr; } .gallery.g3 .g-cell:first-child { grid-row: auto; } }

/* a before and after framed differently, each labelled */
.sides .sd-row { display: grid; gap: 12px; }
.sides.tall .sd-row { grid-template-columns: 1fr 1fr; max-width: 560px; margin-inline: auto; }
.sd-cell { position: relative; }
.sides.tall .shot { border-radius: 18px; }

/* two versions of one screen, a two option switch */
.toggle .tg-r { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.tg-seg { display: inline-flex; gap: 2px; margin-bottom: 12px; padding: 3px; border-radius: 99px; border: 1px solid var(--line-in); background: var(--card); }
.tg-seg label { position: relative; display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: 99px; color: var(--tx-mid); font: 500 14px/1 var(--sans); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.tg-seg label::before { content: ''; position: absolute; inset: -3px 0; }
.tg-seg label:hover { color: var(--tx); }
.tg-r:nth-of-type(1):checked ~ .tg-seg label:nth-child(1), .tg-r:nth-of-type(2):checked ~ .tg-seg label:nth-child(2) { background: var(--pill); color: var(--pill-tx); }
.tg-r:nth-of-type(1):focus-visible ~ .tg-seg label:nth-child(1), .tg-r:nth-of-type(2):focus-visible ~ .tg-seg label:nth-child(2) { outline: 2px solid var(--focus); outline-offset: 2px; }
.tg-frame { position: relative; aspect-ratio: var(--ar); overflow: hidden; border-radius: 10px; border: 1px solid var(--line); }
.tg-frame > * { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity var(--dur-base) var(--ease-out), visibility 0s; }
.tg-frame .shot { height: 100%; object-fit: cover; object-position: top left; border: 0; border-radius: 0; }
.tg-frame .zoom { border-radius: 0; }
.tg-frame > :nth-child(2) { opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), visibility 0s var(--dur-base); }
.tg-r:nth-of-type(2):checked ~ .tg-frame > :nth-child(2) { opacity: 1; visibility: visible; transition: opacity var(--dur-base) var(--ease-out), visibility 0s; }
.tg-r:nth-of-type(2):checked ~ .tg-frame > :nth-child(1) { visibility: hidden; transition: visibility 0s var(--dur-base); }

/* live frames, phones centred without the address and Open, which overflow the bar */
.art-body > .phone-live, .art-body > .fig.compare.tall { margin-left: auto; margin-right: auto; }
.art-body > .fig.compare.tall { max-width: 320px !important; }
.compare.tall .cmp-frame { max-width: none; }
.phones-row { margin-inline: auto; }
:is(.phone-live, .compare.tall, .phones, .sides.tall) figcaption { text-align: center; }

/* click to zoom, every figure and gallery image */
.zoom { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; cursor: zoom-in; }
.phone .zoom, .sides.tall .zoom { border-radius: 18px; }
.lbx { position: fixed; inset: 0; z-index: 60; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 64px 24px 24px; border: 0; color: var(--tx); }
.lbx[open] { display: grid; place-items: center; }
.lbx::backdrop { background: transparent; }
.lbx figure { display: grid; justify-items: center; gap: 14px; margin: 0; max-width: 100%; }
.lbx img { width: auto; height: auto; max-width: min(100%, 1600px); max-height: calc(100vh - 150px); border-radius: 10px; border: 1px solid var(--line); cursor: zoom-out; }
.lbx figcaption { max-width: 68ch; color: var(--tx-mid); font-size: 14px; text-align: center; }
.lbx-x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel); color: var(--tx); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.lbx-x:hover { border-color: var(--line-h34); }
.lbx-x:active { transform: scale(.97); transition-duration: var(--dur-press); }
.lbx-x svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .lbx[open] { animation: fade-in var(--dur-base) var(--ease-out); }
  .lbx[open] img { animation: lbx-in var(--dur-slow) var(--ease-out); }
  .lbx.closing { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
}
@keyframes lbx-in { from { opacity: 0; transform: scale(.97); } }
@media (max-width: 600px) { .lbx { padding: 64px 12px 16px; } }

/* pause toggles, one label each, the icon shows what a press does */
.sp-hold { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--tx-mut); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.sp-hold:hover { color: var(--tx); background: var(--hover); }
:is(.mo-hold, .fq-hold, .sp-hold) svg { width: 12px; height: 12px; }
:is(.mo-hold, .fq-hold, .sp-hold) .pl, :is(.mo-hold, .fq-hold, .sp-hold)[aria-pressed="true"] .ps { display: none; }
:is(.mo-hold, .fq-hold, .sp-hold)[aria-pressed="true"] .pl { display: inline; }
/* the row of quotes, top right beside its label */
/* the featured quote, a quiet mark at the end of the progress bars */
/* the process steps, under the panel */
.sp-ctl { display: flex; justify-content: flex-end; margin-top: 8px; }

/* headings that follow an h1 are h2 now, styled as the h3 they were */
.art-body .scope > h2.scope-h { margin: 0 0 10px; color: var(--tx); font: 500 14px/1.3 var(--sans); letter-spacing: normal; }

/* without the script every panel shows, stacked, and the controls that need it stay out */
html:not(.js) :is(.sp-panel, .ex-panel) { grid-area: auto; opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
html:not(.js) :is([data-full], .lv-pause, .copy, .rz, .pw-eye, .sp-track, .ex-list, .chooser, .fq-dots) { display: none !important; }

/* fine pointers, every target at least 24px tall */
a.brand, .mail a { display: inline-flex; align-items: center; min-height: 24px; }
.mail a { display: block; line-height: 24px; }
/* standalone text links grow their hit area without moving a line, inline padding leaves the line box alone */
:is(.meta dd, .out, .si-foot, .col-foot, .ab-facts) a { padding-block: 3px; margin-block: -3px; } /* the margin undoes the padding where a link is laid out as a block */

/* touch, every target at least 44px */
@media (pointer: coarse) {
  .back, a.brand { min-height: 44px; }
  .skip { display: inline-flex; align-items: center; min-height: 44px; }
  .mail a { display: block; line-height: 44px; }
  .sp-hold { width: 44px; height: 44px; }
}

/* the team card, the button drops under the words when the card is narrow */
@media (max-width: 1180px) { .team { flex-wrap: wrap; } .team > div { min-width: min(100%, 200px); } .team .ghost { max-width: 100%; } }

/* narrow phones, services chips wrap their own text, wall cards and the featured card fit */

/* ---------- Start a project, the choice and the calendar, 2026-10-08 ----------
   /start/ opens on two equal ways in, Book a call and Tell us about the
   project, neither one marked as the pick. Book a call shows David's
   Calendly in a card the size of the calendar, so nothing moves when it
   loads. The flow under Tell us about the project is unchanged, its call
   path ends on the same calendar. */
body[data-page="start"] .art-body > .st { max-width: none !important; }
.st { display: flex; flex-direction: column; min-width: 0; }
.st > section { min-width: 0; }
@media (min-width: 901px) { body[data-page="start"] .st { flex: 1; } .st > section { flex: 1; display: flex; flex-direction: column; } }
.st { position: relative; }
html.js .st[data-at="pick"] > .st-brief,
html.js .st[data-at="call"] > :is(.st-pick, .st-brief),
html.js .st[data-at="brief"] > .st-pick { display: none !important; }
/* the call panel is laid out but out of sight while it is not open, so the picker fetches and draws its times in the background */
html.js .st:not([data-at="call"]) > .st-call { position: absolute; top: 0; left: 0; right: 0; height: 0; padding: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
html:not(.js) .st > section + section { margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--line); }
html:not(.js) :is(.st-back, .st-alt, .bk-mount) { display: none !important; }

/* the choice */
.st-pick { container: pick / inline-size; justify-content: center; padding: 4px 0 28px; }
@container pick (max-width: 599.98px) {
}

/* Book a call, refined 2026-10-08 per David ("more minimal", "use the space"). The page title steps
   aside, one header row (back, Book a call, what the call is), the picker in one card centred in the
   panel, and the other way in as a quiet line at its foot. The card is the picker's surface (--wb-bg),
   so Calendly's frame is painted the same colour */
body[data-page="start"] .art:has(.st[data-at="call"]) > .art-head { display: none; }
body[data-page="start"] .art:has(.st[data-at="call"]) > .art-body { margin-top: 0; }
.st-call { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 0 8px; }
@media (min-width: 901px) { .st-call { justify-content: center; padding: 8px 0 16px; } }
/* the call view uses more of the panel, the field keeps a narrower band beside it */
@media (min-width: 901px) { body[data-page="start"]:has(.st[data-at="call"]) .art-wrap { width: min(1180px, calc(100% - clamp(180px, 22%, 420px))); } }
/* confirming in Calendly's own form takes the whole panel, so the form sits beside its details with Schedule in view */
@media (min-width: 901px) { body[data-page="start"]:has(.st[data-at="call"] [data-step="confirm"]) .art-wrap { width: 100%; } body[data-page="start"]:has(.st[data-at="call"] [data-step="confirm"]) .st-call { max-width: 1240px; } }

/* the picker's slot. It sits on the page background and takes the height of what it draws */
.bk { min-width: 0; }
.bk-mount { min-width: 0; background: transparent; }
body[data-page="start"] .art-body .bk-fail { margin: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); color: var(--tx-mid); font-size: 14.5px; }
.bk-fail[hidden] { display: none; }
body[data-page="start"] .art-body .bk-fail a { color: var(--tx); text-decoration: underline; text-underline-offset: 3px; }
body[data-page="start"] .art-body .bk-nojs { margin: 0; }



/* ---------- Studio pages, 2026-10-08 ----------
   One system for About, Services, Process and Clients, grown from the
   Services redesign David liked ("bring everything else up to the level
   of" Services). Replaces the About page and Services page blocks of the
   same day. A small eyebrow and the page's line as the h1, bright then
   quiet. Numbered sections, a label with a hairline and a short statement.
   Rows on the bare panel divided by hairlines instead of boxes, an icon in
   the studio's periwinkle, a name, one line, a few points, and the case
   study that proves it as a small real still with its name. The closing
   box with Start a project and Book a call stays as it is. Markup from
   aboutHero, studioRows and studioSec in build.mjs. Scoped to the four
   pages so Start a project and sign in do not move. Static, no entrances. */
body:is([data-page="about"], [data-page="services"], [data-page="how-we-work"], [data-page="testimonials"]) { --pw: 960px; --sr-ac: var(--pd-mid); }
body:is([data-page="about"], [data-page="services"], [data-page="how-we-work"], [data-page="testimonials"]) .art { container: sx / inline-size; padding-top: clamp(40px, 5vw, 64px); }
body:is([data-page="about"], [data-page="services"], [data-page="how-we-work"], [data-page="testimonials"]) .art-head > *, body:is([data-page="about"], [data-page="services"], [data-page="how-we-work"], [data-page="testimonials"]) .art-body > * { max-width: none !important; }

/* the head */
.ab-eye { display: flex; align-items: center; gap: 10px; margin: 0 0 clamp(20px, 3cqi, 28px); color: var(--tx-mut); font: 500 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.ab-eye .mark { width: 16px; height: 16px; color: var(--tx); }
body:is([data-page="about"], [data-page="services"], [data-page="how-we-work"], [data-page="testimonials"]) .ab-hero h1 { display: block; max-width: 17em; padding-right: 0; color: var(--tx); font: 600 clamp(30px, 5.6cqi, 50px)/1.06 var(--disp); letter-spacing: -.034em; text-wrap: balance; }
body:is([data-page="about"], [data-page="services"], [data-page="how-we-work"], [data-page="testimonials"]) .art-body { margin-top: clamp(48px, 8cqi, 72px); padding-top: 0; border-top: 0; counter-reset: sx; }

/* Process, the comparison, the split and the questions on hairlines too */
body:is([data-page="about"], [data-page="services"], [data-page="how-we-work"], [data-page="testimonials"]) .art-body .split { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }

/* the close of the page */

/* ---------- responsive pass, 2026-10-08, desktop and touch refinements ----------
   Small fixes from the size audit (docs/responsive-audit-2026-10-08.md).
   Mid widths give the case study more room, the crumb steps aside where
   the article is narrow, the sidebar labels reach 12px, and touch screens
   get 44px targets and no resize handles (they are a mouse affordance). */
@media (min-width: 901px) and (max-width: 1180px) {
  :root { --colw: 300px; --strip: 56px; }
}
@media (min-width: 901px) and (max-width: 1080px) {
  :root { --side: 224px; --colw: 264px; --strip: 0px; }
}
@media (hover: none) and (pointer: coarse) {
  /* the quote dots span the card so 44px targets can shrink to fit on the narrowest phones */
}

/* ==========================================================================
   Redesign, 2026-10-11. Per David ("this is going in the right direction,
   apply it to the rest of the site"), from the approved homepage mockup.
   The same dark frame and sidebar, no pixel field and no company column,
   the page takes the room. Proof first, real photos and real UI, flat
   surfaces, generous spacing. This block is the layout, the content blocks
   above it are unchanged.
   ========================================================================== */
:root { --peri: #aab4f2; --sec: 128px; }
:root[data-theme="light"] { --peri: #4b50c4; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --peri: #4b50c4; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- the frame ---------- */
.side {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 22px 14px 16px; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  border-right: 1px solid var(--line); background: var(--panel);
}
.side-x { display: none; }
.side .brand[aria-current] { color: var(--tx); }
.region { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--panel); }
.art-wrap { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.art-wrap:focus { outline: none; }
.mbar, .tabbar, .mb-scrim { display: none; }

/* ---------- shared pieces ---------- */
.eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; color: var(--tx-mut); font: 500 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.eyebrow a { color: var(--tx-mut); }
.eyebrow a:hover { color: var(--tx); }
.arr { display: inline-block; font-style: normal; transition: transform var(--dur-base) var(--ease-out); }
:is(.tlink, .card, .case, .nx-card):hover .arr { transform: translateX(3px); }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ctas :is(.pill, .ghost) { justify-content: center; white-space: nowrap; }
.pill .pi { width: 16px; height: 16px; margin-right: 8px; flex: none; }

/* the closing ask, one box at the end of a page */
.close { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; max-width: none !important; margin: 0; padding: clamp(28px, 3.4vw, 48px); border-radius: 16px; background: var(--card-hi); border: 1px solid var(--line); }
.close h2 { margin: 0 !important; color: var(--tx); font: 600 clamp(24px, 2.4vw, 32px)/1.15 var(--disp) !important; letter-spacing: -.02em; max-width: 24ch; text-wrap: balance; }

/* a still or a film in a quiet browser frame */

/* ---------- articles ---------- */
.art { max-width: 1080px; margin: 0 auto; padding: 56px clamp(28px, 5vw, 72px) 96px; }
.art-head > *, .art-body > * { max-width: 700px; }
.art-head h1 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -.028em; }
.art-head .eyebrow { margin-bottom: 18px; }
.art-head .eyebrow span[aria-hidden] { color: var(--line-2); }
.lede { margin-top: 18px; font-size: clamp(17px, 1.4vw, 19.5px); line-height: 1.55; color: var(--tx-mid); max-width: 62ch; }
.art-head .meta { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); max-width: none; }
.art-body { margin-top: 48px; padding-top: 0; border-top: 0; }

/* a case study, the text keeps its measure, figures take the width */
.cs .art-body > p { font-size: 16.5px; line-height: 1.72; }
.cs .art-body h2 { margin-top: 80px; font-size: clamp(22px, 2vw, 27px); line-height: 1.2; letter-spacing: -.02em; }
.cs .art-body > :is(.fig, .stats, .live, .gallery, .compare, .toggle, .sides, .phones) { max-width: none !important; }
.cs .fig { margin: 36px 0 44px; }
.cs .quote { margin: 48px 0; }
.art-next { max-width: none; margin-top: 96px; padding-top: 0; border-top: 0; gap: 20px; }

/* a company with several case studies */
.co-name { margin: 0; line-height: 0; }
.co-logo { display: block; }
.co-logo img { height: 40px; width: auto; max-width: 280px; object-fit: contain; object-position: left center; }
.co-page .lede { margin-top: 24px; }
.cases { list-style: none; margin: 56px 0 var(--sec); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.case { display: flex; flex-direction: column; height: 100%; border-radius: 14px; overflow: hidden; background: var(--card); border: 1px solid var(--line); transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.case:hover { border-color: var(--line-2); background: var(--card-hov); }
.case img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-bottom: 1px solid var(--line); background: var(--thumb); }
.case-tx { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.case-tx small { color: var(--tx-mut); font: 500 11.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.case-tx b { color: var(--tx); font: 600 20px/1.2 var(--disp); letter-spacing: -.015em; }
.case-tx > span { color: var(--tx-mid); font-size: 14px; line-height: 1.55; }
.case .kpis { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; color: var(--tx-mut); font-size: 13px; }
.case .kpis em { font-style: normal; color: var(--tx); font-weight: 500; }
.case .more { margin-top: auto; padding-top: 10px; font-style: normal; color: var(--tx); font-size: 14px; font-weight: 500; }

/* studio pages, the same system as before in the wider pane */
.art.studio { max-width: 1000px; }
.studio .art-head h1 { font-size: clamp(34px, 3.6vw, 52px); }

/* ---------- home ---------- */


/* ---------- phones and small tablets ----------
   The frame becomes the page. The brand and Menu on top, the page
   scrolling under it, Book a call and Start a project at the bottom. */
@media (max-width: 900px) {
  :root { --gut: 0px; --sec: 88px; }
  html, body { height: auto; }
  html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { background: var(--panel); }
  .region { overflow: visible; }
  .art-wrap { height: auto; overflow: visible; padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .side { display: none; }
  .mbar {
    position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
    height: calc(52px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) calc(6px + env(safe-area-inset-right, 0px)) 0 calc(16px + env(safe-area-inset-left, 0px));
    background: var(--panel); border-bottom: 1px solid var(--line);
  }
  .mbar .brand { min-height: 44px; }
  .mb-menu { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--tx); font: 500 14.5px/1 var(--sans); cursor: pointer; }
  .mb-menu:active { background: var(--sel); }
  html:not(.js) .mb-menu { display: none; }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 10px calc(16px + env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
    background: var(--panel); border-top: 1px solid var(--line); transition: transform var(--dur-base) var(--ease-out);
  }
  .tabbar :is(.pill, .ghost) { justify-content: center; height: 46px; }
  .tabbar.away { transform: translateY(110%); }
  body:is([data-page="start"], [data-level="signin"]) .tabbar { display: none; }
  body:is([data-page="start"], [data-level="signin"]) .art-wrap { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* Menu, the sidebar as a sheet over a flat scrim */
  html.menu-open .side {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; width: 100%; max-width: 680px; margin: 0 auto;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 24px); overflow-y: auto;
    padding: 16px calc(12px + env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px));
    border: 0; border-top: 1px solid var(--line-2); border-radius: 18px 18px 0 0;
  }
  html.menu-open .side-x { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-2); border-radius: 12px; background: none; color: var(--tx); cursor: pointer; }
  .side-x svg { width: 12px; height: 12px; }
  html.menu-open .mb-scrim { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .55); }
  :root[data-theme="light"].menu-open .mb-scrim { background: rgba(23, 22, 18, .3); }
  html.menu-open, html.menu-open body { overflow: hidden; }

  .art { padding: 28px 16px 48px; }
  .art-head h1 { font-size: 30px; }
  .lede { font-size: 16.5px; }
  .art-body { margin-top: 36px; }
  .cs .art-body h2 { margin-top: 64px; }
  .art-next { margin-top: 72px; }
  .close { grid-template-columns: 1fr; padding: 28px 20px; }
  .close .ctas { display: grid; grid-template-columns: 1fr 1fr; }
  .cases { grid-template-columns: 1fr; margin-top: 40px; }
}
@media (max-width: 380px) { .ctas :is(.pill, .ghost) { padding: 0 12px; } .pill .pi { margin-right: 6px; } }
@media (prefers-reduced-motion: reduce) { .tabbar { transition: none; } }
/* every wall quote names its company, quietly under the words */
.marq figcaption { margin-top: 10px; color: var(--tx-mut); font-size: 12.5px; letter-spacing: .02em; }
.art-body > .close { margin-top: 72px; }
@media (max-width: 900px) { .art-body > .close { margin-top: 56px; } }


/* ---------- no browser chrome, 2026-10-11 ----------
   Per David, "remove the top bar of everything". Screens sit in plain
   rounded frames like a product shot. An autoplaying film keeps a small
   pause in its corner, the address is a link in the caption. */
:is(.lv-pause, .ps-pause) svg { width: 12px; height: 12px; }
:is(.lv-pause, .ps-pause) .pl, .live.paused .lv-pause .ps { display: none; }
.live.paused .lv-pause .pl { display: inline; }
:is(.lv-pause, .ps-pause):active { transform: scale(.94); transition-duration: var(--dur-press); }
.live figcaption .lv-open { color: var(--tx-mid); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; white-space: nowrap; }
.live figcaption .lv-open:hover { color: var(--tx); text-decoration-color: currentColor; }
html:not(.js) :is(.lv-pause, .ps-pause) { display: none; }

/* the home hero's product shot, the website with the Wedge app over its corner */

/* the Wedge app screens, a quiet switch above the frame */

@media (pointer: coarse) { :is(.lv-pause, .ps-pause) { width: 44px; height: 44px; } .seg button { height: 40px; } }


/* ---------- home, calmed 2026-10-11 ----------
   Per David, "Right now, it looks a bit cluttered". One idea per section,
   one content width, three text sizes (the headline, section headings,
   body) and two greys (--tx for headings, --tx-mid for everything else),
   much more space between sections, captions only where an image needs
   one. */
.home { --hm-w: 1000px; max-width: calc(var(--hm-w) + 2 * clamp(28px, 5vw, 72px)); display: grid; gap: 176px; padding-top: 72px; padding-bottom: 96px; }
.home h1, .home h2 { margin: 0; color: var(--tx); font-family: var(--disp); font-weight: 600; text-wrap: balance; }
.home h1 { font-size: clamp(36px, 4vw, 58px); line-height: 1.04; letter-spacing: -.03em; max-width: 22ch; }
.home h2 { font-size: clamp(26px, 2.5vw, 34px); line-height: 1.12; letter-spacing: -.02em; max-width: 24ch; }
.home p, .home li, .home figcaption { color: var(--tx-mid); font-size: 16px; line-height: 1.6; }
.home .lede { margin: 20px 0 0; max-width: 46ch; font-size: 18px; }
.home .ctas { margin-top: 32px; }

/* the app */
.seg { display: inline-flex; gap: 2px; margin: 0 0 16px; padding: 3px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--card); }
.seg button { height: 34px; padding: 0 16px; border: 0; border-radius: 99px; background: none; color: var(--tx-mid); font: 500 14px/1 var(--sans); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.seg button:hover { color: var(--tx); }
.seg button[aria-selected="true"] { background: var(--sel); color: var(--tx); box-shadow: inset 0 0 0 1px var(--line-2); }

/* more work, an image and a name */
.cards { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 40px 24px; }
.cards li { grid-column: span 2; }
.cards li:nth-child(-n+2) { grid-column: span 3; }
.card { display: grid; gap: 14px; }
.card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; border: 1px solid var(--line-2); transition: border-color var(--dur-fast) var(--ease-out); }
.card:hover img { border-color: var(--line-h34); }
.card b { color: var(--tx); font-size: 16px; font-weight: 500; }
.card b span { color: var(--tx-mid); font-weight: 400; margin-left: 6px; }

/* the sidebar's own Book a call steps back while the hero's pair is on screen, so two never show at once */

@media (min-width: 901px) and (max-width: 1180px) {
  .home { gap: 144px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards li, .cards li:nth-child(-n+2) { grid-column: auto; }
}
@media (max-width: 900px) {
  .home { gap: 112px; padding-top: 28px; padding-bottom: 40px; }
  .home h1 { font-size: 32px; line-height: 1.06; }
  .home .lede { margin-top: 14px; font-size: 16.5px; }
  .home .ctas { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-top: 22px; }
  .seg { display: flex; width: 100%; }
  .seg button { flex: 1; padding: 0 8px; height: 40px; }
  .cards { grid-template-columns: 1fr 1fr; gap: 28px 14px; }
  .cards li, .cards li:nth-child(-n+2) { grid-column: auto; }
  .cards li:first-child { grid-column: 1 / -1; }
  .card b { font-size: 15px; }
}


/* Inter, 2026-10-11. Headlines 600 with tight tracking, quotes 500, text
   400, labels and buttons 500, numbers that line up in tabular figures. */
body { font-optical-sizing: auto; }
:is(.stats dt, .facts b, .hm-facts b, .kpis em, .case .kpis em, .pf em, .sp-labels em, .sp-num, .ct) { font-variant-numeric: tabular-nums; }
.home h1 { letter-spacing: -.026em; line-height: 1.06; }
.home h2, .close h2 { letter-spacing: -.022em; }
.art-head h1 { letter-spacing: -.025em; }

/* ==========================================================================
   Shell overhaul, 2026-10-11. Per David, "no more sidebar. let's do middle
   top nav but make it a pill that like very smoothly morphs". The page is a
   plain document that scrolls, one centred column with generous gutters, a
   fixed pill at the top and a footer that holds what the sidebar held.
   Flat surfaces, a 1px edge, no blur, no gradient, no shadow.
   ========================================================================== */
:root {
  --wrap: 1120px; --gutter: clamp(20px, 5vw, 72px);
}
html, body { height: auto; }
body { background: var(--panel); -webkit-font-smoothing: antialiased; }
.region { position: static; overflow: visible; background: none; min-height: 60vh; }
.art-wrap { height: auto; overflow: visible; padding-bottom: 0; }
.art { max-width: calc(var(--wrap) + 2 * var(--gutter)); padding: 136px var(--gutter) 120px; }
.home { max-width: calc(var(--wrap) + 2 * var(--gutter)); padding-top: 136px; padding-bottom: 136px; }
.art.studio { max-width: calc(1000px + 2 * var(--gutter)); }
[id] { scroll-margin-top: 96px; }

/* ---------- the footer ---------- */
.ft { border-top: 1px solid var(--line); }
.ft-in { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 72px var(--gutter) 48px; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.ft .brand { font: 600 15px/1 var(--sans); letter-spacing: -.012em; gap: 9px; }
.ft .mail { justify-content: flex-start; gap: 6px; margin: 0; padding: 0; }
.ft h2 { margin: 0 0 14px; color: var(--tx-mut); font: 500 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ft li a { display: inline-flex; align-items: center; min-height: 32px; color: var(--tx-mid); font-size: 14px; transition: color var(--duration-quick, 150ms) ease-out; }
.ft li a:hover { color: var(--tx); }
.ft-theme { display: inline-flex; width: auto; gap: 8px; height: 36px; min-height: 0; margin-top: 14px; padding: 0 16px 0 14px; border-radius: 768px; font: 400 14px/21px var(--sans); letter-spacing: -.01em; }
.ft-base { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 22px var(--gutter) 40px; color: var(--tx-mut); font-size: 13px; }

/* ---------- pitch pages, the page fills the screen under the pill ---------- */
body[data-level="pitch"] .art-wrap { padding-top: 64px; }
@media (min-width: 1101px) and (min-height: 660px) { body[data-level="pitch"] .art-wrap { height: 100dvh; } }

@media (max-width: 900px) {
  .art { padding: 104px 16px 72px; }
  .home { padding-top: 96px; padding-bottom: 88px; }
  .art-wrap { padding-bottom: 0; }
  .ft-in { grid-template-columns: 1fr 1fr; gap: 36px 20px; padding: 56px 20px 32px; }
  .ft-a { grid-column: 1 / -1; }
  .ft li a { min-height: 40px; }
  .ft-base { padding: 20px 20px calc(32px + env(safe-area-inset-bottom, 0px)); }
}


/* ==========================================================================
   Home, the Powder layout, 2026-10-11. Per David, "can you replicate this
   with Wedge content and just make it Wedge" (the Powder Framer template).
   Black page, warm white type in Inter, grey second halves of headings,
   small dot chips, flat dark cards. The dusk scenery (site/media/scenery/)
   and its sky fades are the one licensed exception to the no gradient rule,
   nothing else here uses a gradient, glow or glass. Motion lives in
   site/motion.js, this block only lays things out.
   ========================================================================== */
:root {
  --pd-w: 1080px;
  --pd-tx: #fff3f0; --pd-mid: rgba(255, 255, 255, .8); --pd-dim: rgba(255, 255, 255, .62); --pd-faint: rgba(255, 255, 255, .38);
  --pd-card: #111111; --pd-card-2: #141414; --pd-card-hi: #1c1c1c; --pd-well: #000; --pd-chip: #191919;
  --pd-edge: rgba(255, 255, 255, .08); --pd-edge-2: rgba(255, 255, 255, .14); --pd-arr: #161616;
  --pd-f0: #151515; --pd-f1: #1c1c1c; --pd-f2: #232323; --pd-f3: #3b3b3b; --pd-f4: #0a0a0a; --pd-st: rgba(255, 255, 255, .42);
  --pd-sec: clamp(120px, 15vw, 220px);
}
:root[data-theme="light"] {
  --pd-tx: #17140f; --pd-mid: rgba(0, 0, 0, .74); --pd-dim: rgba(0, 0, 0, .52); --pd-faint: rgba(0, 0, 0, .4);
  --pd-card: #ffffff; --pd-card-2: #fbfaf7; --pd-card-hi: #f1efe9; --pd-well: #ecebe5; --pd-chip: #ffffff;
  --pd-edge: rgba(0, 0, 0, .08); --pd-edge-2: rgba(0, 0, 0, .14); --pd-arr: #ffffff;
  --pd-f0: #e9e7e1; --pd-f1: #f1efea; --pd-f2: #faf9f6; --pd-f3: #d6d3cb; --pd-f4: #dcd9d1; --pd-st: rgba(0, 0, 0, .45);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --pd-tx: #17140f; --pd-mid: rgba(0, 0, 0, .74); --pd-dim: rgba(0, 0, 0, .52); --pd-faint: rgba(0, 0, 0, .4);
  --pd-card: #ffffff; --pd-card-2: #fbfaf7; --pd-card-hi: #f1efe9; --pd-well: #ecebe5; --pd-chip: #ffffff;
  --pd-edge: rgba(0, 0, 0, .08); --pd-edge-2: rgba(0, 0, 0, .14); --pd-arr: #ffffff;
  --pd-f0: #e9e7e1; --pd-f1: #f1efea; --pd-f2: #faf9f6; --pd-f3: #d6d3cb; --pd-f4: #dcd9d1; --pd-st: rgba(0, 0, 0, .45);
} }
body { background: var(--bg); }
.pd-home { color: var(--pd-tx); font-family: var(--sans); letter-spacing: -.01em; padding-bottom: 0; }
.pd-home h1, .pd-home h2, .pd-home h3 { font-family: var(--disp); text-wrap: balance; }
.pd-home p { text-wrap: pretty; }

/* the chip, a dot and a word on a small dark pill */
.pd-chip { display: inline-flex; align-items: center; gap: 10px; height: 30px; margin: 0; padding: 0 14px 0 13px; border-radius: 99px; background: var(--pd-chip); box-shadow: inset 0 0 0 1px var(--pd-edge); color: var(--pd-mid); font: 400 14px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; }
.pd-chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--pd-tx); flex: none; }
a.pd-chip { transition: color 150ms ease-out, box-shadow 150ms ease-out; }
a.pd-chip:hover { color: var(--pd-tx); box-shadow: inset 0 0 0 1px var(--pd-edge-2); }

/* a section, its head is a chip and a two tone heading with a short line on the right */
.pd-sec { max-width: calc(var(--pd-w) + 2 * var(--gutter)); margin: 0 auto; padding: var(--pd-sec) var(--gutter) 0; }
.pd-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 350px); align-items: end; gap: 24px 48px; margin-bottom: 64px; }
.pd-head h2 { margin: 24px 0 0; max-width: 16em; color: var(--pd-tx); font-size: clamp(30px, 3vw, 40px); font-weight: 500; line-height: 1.35; letter-spacing: -.04em; }
.pd-dim { color: var(--pd-dim); }
.pd-side { margin: 0; padding-bottom: 6px; max-width: 32ch; color: var(--pd-mid); font-size: 16px; line-height: 1.5; }
.pd-more { justify-self: end; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--pd-mid); font-size: 16px; transition: color 150ms ease-out; }
.pd-more span { transition: transform 250ms var(--ease-out); }
.pd-more:hover { color: var(--pd-tx); }
.pd-more:hover span { transform: translateX(3px); }
/* round arrow buttons, Powder's prev and next */
.pd-arr { display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; padding: 0; border: 0; border-radius: 50%; background: var(--pd-arr); box-shadow: inset 0 0 0 1px var(--pd-edge); color: var(--pd-mid); cursor: pointer; transition: color 150ms ease-out, box-shadow 150ms ease-out, scale 150ms ease-out; }
.pd-arr svg { width: 18px; height: 18px; }
.pd-arr:hover { color: var(--pd-tx); box-shadow: inset 0 0 0 1px var(--pd-edge-2); }
.pd-arr:active { scale: .96; }
.pd-arr:disabled { opacity: .4; cursor: default; }

/* ---------- 1, the hero ---------- */
.pd-hero { position: relative; overflow: clip; padding-top: 160px; isolation: isolate; color: #fff3f0; }
.pd-l, .pd-li { position: absolute; inset: 0; }
.pd-l img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.pd-copy { position: relative; z-index: 2; display: grid; justify-items: center; max-width: calc(860px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
/* the hero chip, Powder's chip glass, a warm New badge inset at the left,
   the label, the arrow in its circle at the right. On hover the fill rises,
   the edge brightens and the arrow nudges, and the pointer glow (data-glow
   pill) runs along the edge */
.pd-new { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 5px; border-radius: 99px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: rgba(255, 255, 255, .85); font: 400 14px/20px var(--sans); letter-spacing: -.005em; white-space: nowrap; transition: background-color 250ms cubic-bezier(.22, 1, .36, 1), box-shadow 250ms cubic-bezier(.22, 1, .36, 1), color 250ms cubic-bezier(.22, 1, .36, 1); }
.pd-new-b { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 99px; background: rgba(255, 243, 240, .12); box-shadow: inset 0 0 0 1px rgba(255, 243, 240, .14); color: #fff3f0; font: 500 11.5px/1 var(--sans); letter-spacing: .02em; }
.pd-new-l { padding-right: 4px; }
.pd-new-short { display: none; }
/* the chip stays 34px to the eye, its hit area is 44px tall for touch */
.pd-new { position: relative; }
.pd-new::after { content: ''; position: absolute; inset: -5px -4px; border-radius: 99px; }
.pd-new i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.pd-new i svg { width: 13px; height: 13px; transition: transform 250ms cubic-bezier(.22, 1, .36, 1); }
.pd-new:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .16); color: #fff3f0; }
.pd-new:hover i svg { transform: translateX(2px); }
@media (max-width: 440px) { .pd-new-full { display: none; } .pd-new-short { display: inline; } }
@media (prefers-reduced-motion: reduce) { .pd-new, .pd-new i svg { transition: none; } }
.pd-hero h1 { margin: 26px 0 0; max-width: 17em; color: #fff3f0; font-size: 36px; font-weight: 500; line-height: 1.3; letter-spacing: -.04em; }
.pd-lede { margin: 16px 0 0; max-width: 420px; color: rgba(255, 255, 255, .8); font-size: 14px; line-height: 21px; }
.pd-hero .ctas { justify-content: center; gap: 4px; margin-top: 40px; }
/* the hero scene, composed as in Powder (measured headless from 390 to 2560
   wide). Every layer stands on the window's foot. The sky runs from the top
   of the hero down to it, the far hills, near hills and shrub band sit on it
   at their own image proportions, always the full width of the screen (on
   wide screens they simply grow, wider than the screen on phones as Powder
   does). Past 1600 a layer grows with the screen but sinks by part of its
   extra height (the hills 70 percent, the shrubs 45, which keeps their dip
   at the window's foot), so the crests and the shrubs' overlap with the
   window stay where Powder has them and the extra goes below the fold. The
   last 40 percent of the band fades into the page. Nothing follows the
   pointer (David, as in Powder), the hills only lag the scroll vertically,
   so no side overscan is needed. The window is Powder's size, its lower part
   left for the shrubs so they never cover the app */
.pd-hero { --sw: 100vw; --sw0: min(100vw, 1600px); --gx: calc(var(--sw) - var(--sw0)); --sw-f: var(--sw); --sw-n: var(--sw); --sw-s: var(--sw); --sh: calc(var(--sw0) / 5.049); --aw: 960px; --ah: calc((var(--aw) - 16px) * .5766 + 16px + .48 * var(--sh)); --fx: 0px; padding-bottom: var(--fx); }
.pd-scene { position: absolute; top: 0; bottom: var(--fx); left: 0; right: 0; z-index: -1; pointer-events: none; }
.pd-sky { background: radial-gradient(200% 83% at 50% 0, #1b2228 0%, #353f44 42%, #d39794 100%); }
.pd-stage { position: relative; z-index: 1; height: var(--ah); margin-top: 80px; }
.pd-far, .pd-near, .pd-front { top: auto; bottom: 0; left: 50%; height: auto; pointer-events: none; }
.pd-far { z-index: 0; bottom: calc(var(--gx) / -2.711 * .7); width: var(--sw-f); margin-left: calc(var(--sw-f) / -2); aspect-ratio: 2464 / 909; }
.pd-near { z-index: 0; bottom: calc(var(--gx) / -2.906 * .7); width: var(--sw-n); margin-left: calc(var(--sw-n) / -2); aspect-ratio: 2464 / 848; }
.pd-front { position: absolute; z-index: 3; bottom: calc(var(--gx) / -5.049 * .45); width: var(--sw-s); margin-left: calc(var(--sw-s) / -2); aspect-ratio: 2464 / 488; }
.pd-app { position: absolute; top: 0; left: 50%; z-index: 1; display: block; width: var(--aw); height: var(--ah); margin-left: calc(var(--aw) / -2); border-radius: 24px 24px 0 0; overflow: hidden; transform-origin: 50% 0; }
/* Powder's window, a dark glass pane cut flat at the scene's foot, a 1px
   edge, no shadow, and a warm highlight along its top that fades out at
   both ends. Our app capture sits inside it */
.pd-hero .pd-app { padding: 8px 8px 0; background: rgba(23, 23, 23, .85); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.pd-hero .pd-app::before { content: ''; position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: 1px; background: #fff3f0; opacity: .75; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 50%, transparent 100%); pointer-events: none; }
.pd-hero .pd-app img { opacity: 1; border-radius: 16px 16px 0 0; }
.pd-app img { display: block; width: 100%; height: auto; }
/* the foot of the scene into the page, Powder's eased fade to black */
.pd-stage::after { content: ''; position: absolute; left: 50%; bottom: calc(-1 * var(--fx)); z-index: 4; width: var(--sw-s); height: calc(.4 * var(--sh) + var(--fx)); margin-left: calc(var(--sw-s) / -2); pointer-events: none;
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .97) 8%, rgba(0, 0, 0, .9) 18%, rgba(0, 0, 0, .78) 30%, rgba(0, 0, 0, .6) 43%, rgba(0, 0, 0, .4) 57%, rgba(0, 0, 0, .21) 71%, rgba(0, 0, 0, .08) 85%, rgba(0, 0, 0, 0) 100%); }
/* light theme, the shrubs sink into a dusk rose that then opens into the
   cream page over a long eased run below the window, no black, no grey */
:root[data-theme="light"] .pd-hero { --fx: 150px; }
:root[data-theme="light"] .pd-stage::after { background: linear-gradient(to top, var(--bg) 0%, var(--bg) 9%, #e4ddd7 20%, #dbcac2 31%, #cbaea5 42%, #b58f87 53%, rgba(156, 114, 107, .96) 62%, rgba(130, 92, 86, .8) 71%, rgba(104, 72, 68, .52) 80%, rgba(80, 56, 54, .22) 90%, rgba(80, 56, 54, 0) 100%); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .pd-hero { --fx: 150px; }
  :root:not([data-theme="dark"]) .pd-stage::after { background: linear-gradient(to top, var(--bg) 0%, var(--bg) 9%, #e4ddd7 20%, #dbcac2 31%, #cbaea5 42%, #b58f87 53%, rgba(156, 114, 107, .96) 62%, rgba(130, 92, 86, .8) 71%, rgba(104, 72, 68, .52) 80%, rgba(80, 56, 54, .22) 90%, rgba(80, 56, 54, 0) 100%); }
}
/* each layer continues 90px in its own foot colour below the image, so a
   layer shifted by the scroll never opens a gap under it */
.pd-far .pd-li::after, .pd-near .pd-li::after, .pd-front .pd-li::after { content: ''; position: absolute; left: 0; right: 0; top: calc(100% - 2px); height: 92px; background: #010101; }
@media (min-width: 901px) { .pd-stage { margin-top: clamp(40px, 6vh, 80px); } }
/* Powder's window is 3 by 4 of its width (960 by 720) on desktop and tablet */
@media (min-width: 810px) { .pd-hero { --ah: max(calc((var(--aw) - 16px) * .5766 + 16px + .48 * var(--sh)), calc(var(--aw) * .75)); } }
/* tablet, Powder's 720 window */
@media (max-width: 1279px) { .pd-hero { --aw: min(720px, 100vw - 48px); } }
@media (max-width: 900px) { .pd-stage { margin-top: 40px; } }
/* phones, the layers wider than the screen as in Powder, the hills' crests in view */
@media (max-width: 809px) {
  .pd-hero { --sw: 100vw; --sw-f: calc(100vw + 480px); --sw-n: calc(100vw + 304px); --sw-s: calc(100vw + 240px); }
}
@media (max-width: 600px) { .pd-stage { margin-top: 36px; } }
/* tablets keep the headline in three balanced lines too, phones wrap as before */
@media (min-width: 601px) and (max-width: 900px) { .pd-hero h1 { max-width: 13.6em; text-wrap: balance; } }
@media (max-width: 600px) { .pd-hero .pd-copy h1 { font-size: 36px; line-height: 46.8px; } }

/* ---------- 2, intro ---------- */
.pd-intro { max-width: calc(var(--pd-w) + 2 * var(--gutter)); margin: 0 auto; padding: 160px var(--gutter) 0; }
.pd-intro-in { max-width: 540px; margin: 0 auto; }
.pd-intro-in .pd-chip { margin-bottom: 30px; }
.pd-intro p:not(.pd-chip) { margin: 0 0 36px; color: var(--pd-faint); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.5; letter-spacing: -.025em; }
.pd-intro .pd-intro-a { color: var(--pd-tx) !important; }
.pd-logos { list-style: none; margin: 96px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); align-items: center; gap: 32px 24px; }
.pd-logos a { display: grid; place-items: center; min-height: 56px; opacity: .34; filter: grayscale(1); transition: opacity 250ms ease-out; }
.pd-logos a:hover { opacity: .85; }
.pd-logos img { max-width: 130px; max-height: 30px; width: auto; height: auto; }

/* ---------- 3, core features ---------- */
.pd-tabs { position: relative; }
.pd-tablist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 32px; }
.pd-tablist button { position: relative; height: 48px; padding: 0 8px; border: 0; background: none; color: var(--pd-dim); font: 400 16px/1 var(--sans); letter-spacing: -.01em; cursor: pointer; transition: color 150ms ease-out; }
.pd-tablist button::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: 2px; height: 1px; background: var(--pd-tx); opacity: 0; transform: scaleX(.4); transition: opacity 250ms ease-out, transform 250ms var(--ease-out); }
.pd-tablist button:hover { color: var(--pd-mid); }
.pd-tablist button[aria-selected="true"] { color: var(--pd-tx); }
.pd-tablist button[aria-selected="true"]::after { opacity: 1; transform: none; }
.pd-tframe { position: relative; aspect-ratio: 1080 / 640; border-radius: 24px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--pd-edge); background: linear-gradient(180deg, #23292f, #4d434a 60%, #26241f); }
.pd-tscene, .pd-tscene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.pd-tshot { position: absolute; left: 50%; top: 50%; width: 82%; translate: -50% -50%; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 30px 70px rgba(0, 0, 0, .45); background: #0e0e10; }
.pd-tshot > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
.pd-tcap { max-width: 640px; min-height: 48px; margin: 28px auto 0; padding: 0 64px; color: var(--pd-dim); font-size: 16px; line-height: 1.5; text-align: center; }
.pd-tcap b { color: var(--pd-tx); font-weight: 400; }
.pd-tcap a { color: var(--pd-mid); text-decoration: underline; text-decoration-color: var(--pd-edge-2); text-underline-offset: 3px; white-space: nowrap; }
.pd-tcap a:hover { color: var(--pd-tx); text-decoration-color: currentColor; }
.pd-tabs > .pd-arr { position: absolute; bottom: 0; }
.pd-prev { left: 0; } .pd-next { right: 0; }
html.js .pd-tp:not(.on) { display: none; }
html.js .pd-tp.on { animation: pd-in 400ms var(--ease-out); }
html:not(.js) .pd-tabs > .pd-arr, html:not(.js) .pd-tablist { display: none; }
html:not(.js) .pd-tp + .pd-tp { margin-top: 56px; }
@keyframes pd-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 4, why Wedge, a row of cards ---------- */
.pd-rail { position: relative; }
.pd-home { overflow-x: clip; }
/* the rail runs on to the right edge of the window, like Powder's */
.pd-rail-track { list-style: none; margin: 0 calc(50% - 50vw); padding: 0 calc(50vw - 50%); display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overflow-y: hidden; overscroll-behavior-x: contain; }
.pd-rail-track::-webkit-scrollbar { display: none; }
.pd-wcard { flex: 0 0 min(400px, 80vw); scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; padding: 8px; border-radius: 16px; background: var(--pd-card); border: 1px solid var(--pd-edge); }
.pd-wart { aspect-ratio: 384 / 390; border-radius: 10px; background: var(--pd-well); overflow: hidden; display: grid; place-items: center; }
.pd-iso { width: 92%; height: auto; }
.pd-iso path { stroke: var(--pd-st); stroke-width: 1.1; stroke-linejoin: round; }
.pd-iso .f0 { fill: var(--pd-f0); } .pd-iso .f1 { fill: var(--pd-f1); } .pd-iso .f2 { fill: var(--pd-f2); } .pd-iso .f3 { fill: var(--pd-f3); } .pd-iso .f4 { fill: var(--pd-f4); }
.pd-iso .ln { fill: none; stroke-width: 1; opacity: .7; }
.pd-iso .gd { fill: none; stroke-width: 1; opacity: .25; }
.pd-iso .ck { fill: none; stroke: var(--pd-tx); stroke-width: 3; stroke-linecap: round; }
.pd-wtx { padding: 32px 28px 30px; }
.pd-wtx h3 { margin: 0; color: var(--pd-tx); font-size: 16px; font-weight: 400; letter-spacing: -.01em; }
.pd-wtx p { margin: 10px 0 0; max-width: 30ch; color: var(--pd-dim); font-size: 14px; line-height: 1.5; }
.pd-rail-ctl { display: flex; align-items: center; gap: 48px; margin-top: 24px; }
.pd-rail-bar { position: relative; flex: 1; height: 1px; }
.pd-rail-bar .rl { position: absolute; inset: 0; }
.pd-rail-bar i { position: absolute; left: 0; top: 0; height: 1px; width: 20%; background: var(--pd-mid); transform: translateX(calc(var(--rp, 0) * 400%)); transition: transform 150ms ease-out; }
html:not(.js) .pd-rail-ctl { display: none; }

/* ---------- 5, what you get, three rows ---------- */
.pd-rows { display: grid; gap: 48px; }
.pd-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 560px; padding: 8px; border-radius: 20px; background: var(--pd-card-2); border: 1px solid var(--pd-edge); }
.pd-row.rev .pd-row-tx { order: 2; }
.pd-row-tx { display: flex; flex-direction: column; padding: 48px 40px 40px; }
.pd-dotl { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: var(--pd-mid); font-size: 14px; }
.pd-dotl i { width: 6px; height: 6px; border-radius: 50%; background: var(--pd-tx); }
.pd-row h3 { margin: 52px 0 0; max-width: 15em; color: var(--pd-tx); font-size: clamp(24px, 2.2vw, 28px); font-weight: 400; line-height: 1.35; letter-spacing: -.025em; }
.pd-row-tx > p:not(.pd-dotl):not(.pd-note) { margin: 24px 0 0; max-width: 40ch; color: var(--pd-mid); font-size: 14px; line-height: 1.55; }
.pd-note { display: inline-flex; align-items: center; gap: 12px; margin: auto 0 0; padding-top: 40px; color: var(--pd-mid); font-size: 14px; }
.pd-note svg { width: 18px; height: 18px; color: var(--pd-dim); }
/* the screen bleeds off the panel's far corner, large enough to read */
.pd-row-media { position: relative; margin: 0; display: grid; align-items: start; justify-items: start; padding: 48px 0 0 48px; border-radius: 14px; background: var(--pd-well); overflow: hidden; }
.pd-row-media img { width: 128%; max-width: none; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.pd-row-media figcaption { position: absolute; left: 16px; bottom: 14px; padding: 5px 10px; border-radius: 99px; background: rgba(0, 0, 0, .7); color: rgba(255, 255, 255, .7); font-size: 12px; }

/* ---------- 6, recent launches ---------- */
.pd-logw { position: relative; }
.pd-log-rl { position: absolute; top: 0; left: 0; right: 0; }
.pd-log { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pd-log a { position: relative; display: grid; align-content: start; gap: 10px; height: 100%; padding: 52px 28px 8px 0; color: var(--pd-dim); font-size: 14px; line-height: 1.5; }
.pd-log-dot { position: absolute; top: -3px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--pd-mid); transition: transform 250ms var(--ease-out); }
.pd-log b { color: var(--pd-tx); font-weight: 400; }
.pd-log span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pd-log time { margin-top: 30px; }
.pd-log a:hover b { text-decoration: underline; text-decoration-color: var(--pd-edge-2); text-underline-offset: 3px; }
.pd-log a:hover .pd-log-dot { transform: scale(1.6); }

/* ---------- 7, numbers ---------- */
.pd-nums { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; align-items: start; }
.pd-ncard { position: relative; margin: 0; aspect-ratio: 522 / 650; border-radius: 16px; overflow: hidden; isolation: isolate; color: #fff3f0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); background: linear-gradient(180deg, #22282d 0%, #3b3d42 35%, #7a6267 72%, #5d5546 100%); }
.pd-ncard:nth-of-type(2) { margin-top: 56px; }
.pd-nscene, .pd-nscene img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.pd-big { margin: 0; padding: 56px 44px 0; color: #fff3f0; font-size: clamp(84px, 10vw, 144px); font-weight: 400; line-height: 1; letter-spacing: -.1em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-big small { margin-left: .14em; color: rgba(255, 255, 255, .68); font-size: 1em; font-weight: 200; letter-spacing: -.06em; }
.pd-big small.w { margin-left: .16em; font-size: .46em; letter-spacing: -.04em; }
.pd-ncard figcaption { margin: 22px 48px 0; max-width: 28ch; color: rgba(255, 255, 255, .72); font-size: 16px; line-height: 1.5; }
.pd-nchip { position: absolute; left: 44px; bottom: 40px; background: #2b2729; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .86); }
.pd-nchip i { background: #fff3f0; }
.pd-cloud { position: absolute; z-index: 2; pointer-events: none; }
.pd-cloud img { display: block; width: 100%; height: auto; }
.pd-cloud-1 { left: -16%; top: 34%; width: 38%; }
.pd-cloud-2 { right: -7%; top: -5%; width: 22%; } /* above the card's corner, clear of the number */
.pd-stats { list-style: none; margin: 96px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.pd-stats .ic { width: 22px; height: 22px; color: var(--pd-mid); }
.pd-stats b { display: block; margin-top: 44px; color: var(--pd-tx); font-size: 36px; font-weight: 400; line-height: 1.2; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pd-stats b small { margin-left: .1em; color: var(--pd-dim); font-size: 1em; font-weight: 300; }
.pd-stats span { display: block; margin-top: 8px; max-width: 24ch; color: var(--pd-dim); font-size: 14px; line-height: 1.5; }

/* ---------- 8, image cards ---------- */
.pd-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pd-card { display: flex; flex-direction: column; height: 100%; padding: 8px; border-radius: 16px; background: var(--pd-card); border: 1px solid var(--pd-edge); transition: border-color 250ms ease-out; }
.pd-card:hover { border-color: var(--pd-edge-2); }
.pd-card-img { position: relative; display: block; aspect-ratio: 338 / 254; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, #252b32, #5f4d55 62%, #2a2723); }
.pd-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.pd-card:hover .pd-card-img img { transform: scale(1.015); }
.pd-card-tx { display: grid; gap: 22px; padding: 30px 28px 32px; }
.pd-card-tx b { color: var(--pd-tx); font-size: 20px; font-weight: 400; line-height: 1.55; letter-spacing: -.02em; }
.pd-card-tx small { color: var(--pd-dim); font-size: 14px; }
.pd-card-tx small i { margin: 0 8px; font-style: normal; }

/* ---------- 9, how pricing works ---------- */
.pd-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.pd-plan { display: flex; flex-direction: column; padding: 36px; background: var(--pd-card); border: 1px solid var(--pd-edge); }
.pd-plan:first-child { border-radius: 16px 0 0 16px; }
.pd-plan:last-child { border-radius: 0 16px 16px 0; }
.pd-plan.hi { position: relative; z-index: 1; margin: -16px 0; padding-top: 52px; padding-bottom: 52px; border-radius: 16px; background: var(--pd-card-hi); border: 1px solid var(--pd-edge-2); }
.pd-plan-k { position: relative; margin: 0; padding-bottom: 18px; color: var(--pd-dim); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.pd-plan h3 { margin: 30px 0 0; color: var(--pd-tx); font-size: clamp(26px, 2.4vw, 32px); font-weight: 400; line-height: 1.3; letter-spacing: -.03em; }
.pd-plan-d { margin: 14px 0 0; min-height: 3em; color: var(--pd-mid); font-size: 14px; line-height: 1.5; }
.pd-plan .pill, .pd-plan .ghost { align-self: flex-start; margin: 26px 0 30px; }
.pd-plan ul { list-style: none; margin: 0; padding: 0; }
.pd-plan li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; color: var(--pd-mid); font-size: 14px; }
.pd-plan li svg { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--pd-f3); color: var(--pd-tx); }

/* ---------- 10, testimonials ---------- */

/* ---------- 11, FAQ ---------- */
/* ---------- questions, 2026-10-13 ----------
   David, "too much like random space. refine it". One grid, the heading and
   a quiet contact line on the left, sticky and level with the first
   question, the questions on the right as compact rows on hairlines, each
   answer opening on the question's own left edge (site.js faqItem) */
.pd-faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(40px, 6vw, 96px); align-items: start; }
.pd-faq-side { position: sticky; top: 112px; display: grid; align-content: start; }
.pd-faq-side .pd-head { display: block; margin: 0; }
.pd-faq-side .pd-head h2 { margin-bottom: 0; }
.pd-faq-ask { margin: 24px 0 0; color: var(--pd-mid); font-size: 15px; line-height: 1.55; }
.pd-faq-ask a { color: var(--pd-tx); white-space: nowrap; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 4px; transition: text-decoration-color 150ms ease-out; }
.pd-faq-ask a:hover { text-decoration-color: currentColor; }
.pd-faq-list { display: block; border-top: 1px solid var(--pd-edge); }
.pd-qa { border: 0; border-bottom: 1px solid var(--pd-edge); border-radius: 0; background: none; }
.pd-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; padding: 14px 0; color: var(--pd-tx); font-size: 16.5px; line-height: 1.4; letter-spacing: -.012em; cursor: pointer; list-style: none; }
.pd-qa summary::-webkit-details-marker { display: none; }
.pd-qa summary i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; color: var(--pd-dim); transition: color 150ms ease-out; }
.pd-qa summary:hover i { color: var(--pd-tx); }
.pd-qa summary svg { width: 16px; height: 16px; transition: transform 250ms var(--ease-out); }
.pd-qa[open]:not(.closing) summary svg { transform: scaleY(-1); }
.pd-qa p { margin: -2px 0 0; padding: 0 44px 24px 0; max-width: 62ch; color: var(--pd-mid); font-size: 15px; line-height: 1.6; }
.pd-qa summary:focus-visible { outline: 2px solid var(--pd-tx); outline-offset: 4px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .pd-qa summary svg { transition: none; } }

/* ---------- 12, closing, the app window sinking into the dunes ---------- */
.pd-close { position: relative; overflow: clip; margin-top: var(--pd-sec); padding-top: 120px; color: #fff3f0; background: linear-gradient(180deg, var(--bg) 0%, #0c0f13 22%, #121820 60%, #1a2230 100%); }
/* the closing's geometry, 2026-10-12, per David ("I don't like how my email's covered there", "The Wedge app isn't aligned correctly").
   --dh is the drawn height of the dune image, which covers the full width from the foot, so its highest
   ridge always sits .62 of it above the foot of the section, whatever the width. The words end clear
   above that ridge. The window keeps to the content column, its top on the headline's cap line and its
   right edge on the nav's, and runs behind the front dune to a flat cut a quarter of the way up the
   image, below every ridge it crosses and above the image's own soft foot */
.pd-close-in { --dh: max(220px, 34.7vw); --h2: clamp(30px, 3vw, 40px); --sink: calc(var(--dh) * .37 + 32px); position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 48px; align-items: stretch; max-width: calc(var(--pd-w) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) calc(var(--dh) * .62 + 32px); }
.pd-close-tx h2 { margin: 0; color: #fff3f0; font-size: var(--h2); text-wrap: balance; font-weight: 500; line-height: 1.3; letter-spacing: -.04em; }
.pd-close-tx p { margin: 22px 0 0; max-width: 30ch; color: rgba(255, 255, 255, .78); font-size: 16px; line-height: 1.5; }
.pd-close-tx .ctas { margin-top: 44px; }
.pd-marks { list-style: none; margin: 64px 0 0; padding: 0; display: grid; justify-items: start; gap: 16px; }
.pd-marks li { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; color: rgba(255, 255, 255, .8); font-size: 15px; }

.pd-marks span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #262c35; }
.pd-marks .ic { width: 22px; height: 22px; color: rgba(255, 255, 255, .78); }
.pd-close-app { min-width: 0; margin: calc(var(--h2) * .36) 0 calc(-1 * var(--sink)); }
.pd-close-lag { height: 100%; border-radius: 22px 22px 0 0; overflow: hidden; background: #0f0f11; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.pd-close-lag img { display: block; width: 100%; height: auto; }
.pd-dunes { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: max(220px, 34.7vw); max-height: 560px; pointer-events: none; }
.pd-dunes .pd-l img { object-position: 50% 100%; }

/* ---------- the footer, Powder's columns ---------- */
.ft { border-top: 0; background: var(--bg); }
.ft-in { max-width: calc(var(--pd-w) + 2 * var(--gutter)); grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 180px)); gap: 40px; padding: 88px var(--gutter) 72px; }
.ft .brand .wm { width: 22px; height: 22px; flex: none; }
.ft .mail { margin-top: 22px; color: var(--pd-mid); font-size: 14px; }
.ft h2 { margin: 0 0 22px; color: var(--pd-tx); font: 400 14px/1.3 var(--sans); letter-spacing: -.01em; text-transform: none; }
.ft ul { gap: 4px; }
.ft li a { color: var(--pd-mid); }
.ft-base { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: calc(var(--pd-w) + 2 * var(--gutter)); padding: 0 var(--gutter) 48px; }
.ft-base p { margin: 0; padding-top: 28px; color: var(--pd-dim); font-size: 12px; }
.ft-base .ft-theme { margin-top: 28px; }
.ft-base { position: relative; }
.ft-rl { position: absolute; top: 0; left: var(--gutter); right: var(--gutter); }

/* ---------- phones and tablets ---------- */
@media (max-width: 1100px) {
  .pd-row { min-height: 0; }
  .pd-log { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .pd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pd-hero { padding-top: 96px; }
  .pd-hero h1 { margin-top: 20px; font-size: 40px; line-height: 52px; }
  .pd-lede { margin-top: 16px; }
  .pd-hero .ctas { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 420px; margin-top: 26px; }
  .pd-hero .ctas .pill, .pd-hero .ctas .ghost { justify-content: center; padding: 0 16px; }
  .pd-head { grid-template-columns: 1fr; margin-bottom: 40px; }
  .pd-head h2 { margin-top: 18px; font-size: 28px; }
  .pd-more { justify-self: start; }
  .pd-intro { padding-top: 112px; }
  .pd-intro p:not(.pd-chip) { font-size: 20px; margin-bottom: 26px; }
  .pd-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 56px; gap: 20px 12px; }
  .pd-logos img { max-width: 92px; max-height: 24px; }
  .pd-tablist { display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)) 20px; padding: 0 var(--gutter); }
  .pd-tablist::-webkit-scrollbar { display: none; }
  .pd-tablist button { flex: none; padding: 0 14px; }
  .pd-tframe { aspect-ratio: 4 / 3.4; border-radius: 16px; }
  .pd-tshot { width: 90%; border-radius: 10px; }
  .pd-tcap { padding: 0; margin-top: 20px; font-size: 15px; }
  .pd-tabs > .pd-arr { display: none; }
  .pd-rail-ctl { gap: 20px; }
  .pd-row, .pd-row.rev { grid-template-columns: 1fr; }
  .pd-row.rev .pd-row-tx { order: 0; }
  .pd-row-tx { padding: 28px 20px 24px; }
  .pd-row h3 { margin-top: 28px; }
  .pd-note { padding-top: 24px; }
  .pd-row-media { padding: 16px; }
  .pd-log { grid-template-columns: 1fr; border-left: 1px solid var(--pd-edge-2); row-gap: 8px; }
  .pd-log-rl { display: none; }
  .pd-log a { padding: 0 0 24px 24px; }
  .pd-log-dot { top: 8px; left: -3px; }
  .pd-log time { margin-top: 4px; }
  .pd-nums { grid-template-columns: 1fr; gap: 20px; }
  .pd-ncard { aspect-ratio: 4 / 4.6; }
  .pd-ncard:nth-of-type(2) { margin-top: 0; }
  .pd-big { padding: 40px 28px 0; font-size: 92px; }
  .pd-ncard figcaption { margin: 16px 28px 0; }
  .pd-nchip { left: 28px; bottom: 28px; }
  .pd-cloud-1 { left: -30%; width: 70%; top: 30%; }
  .pd-cloud-2 { right: -10%; width: 46%; top: 54%; }
  .pd-stats { margin-top: 56px; gap: 36px 20px; }
  .pd-stats b { margin-top: 20px; font-size: 30px; }
  .pd-cards { grid-template-columns: 1fr; gap: 12px; }
  .pd-plans { grid-template-columns: 1fr; gap: 12px; }
  .pd-plan, .pd-plan:first-child, .pd-plan:last-child, .pd-plan.hi { margin: 0; padding: 28px 24px; border-radius: 16px; }
  .ft-rl { left: 20px; right: 20px; }
  .pd-faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .pd-faq-side { position: static; }
  .pd-faq-ask { margin-top: 16px; }
  .pd-qa summary { min-height: 64px; font-size: 16px; }
  .pd-qa p { padding-right: 32px; }
  .pd-marks { margin-top: 44px; }
  .pd-marks span { width: 44px; height: 44px; }
  .pd-close-lag { border-radius: 16px 16px 0 0; }
  .ft-in { grid-template-columns: 1fr 1fr; padding: 64px 20px 40px; }
  .ft-base { padding: 0 20px calc(32px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .pd-tp.on { animation: none; }
}

/* the pointer light, Powder's spotlight. motion.js writes --gx and --gy, a
   masked ring lights the edge of whatever card is near the pointer. A
   pointer effect the brief asks for, no other gradient on these surfaces */
[data-glow] { position: relative; }
[data-glow]::before { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none; background: radial-gradient(var(--gs, 735px) circle at var(--gx, -999px) var(--gy, -999px), var(--gc, rgba(255, 255, 255, .25)), transparent 70%); opacity: var(--go, 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
:root[data-theme="light"] [data-glow]::before { background: radial-gradient(var(--gs, 735px) circle at var(--gx, -999px) var(--gy, -999px), rgba(0, 0, 0, .22), transparent 70%); }
.pd-card { position: relative; }

/* ==========================================================================
   Every other page in the Powder language, 2026-10-11. The same dusk band
   behind each head, chips for eyebrows, light Inter headlines with a grey
   second half, flat dark cards with the pointer light, the closing ask as a
   small dusk scene. Content and markup otherwise as before.
   ========================================================================== */
.region { overflow-x: clip; }
/* the head sits on the dusk band in both themes, so it reads light */
.art-head { position: relative; isolation: isolate; --tx: #fff3f0; --tx-mid: rgba(255, 255, 255, .8); --tx-mut: rgba(255, 255, 255, .62); --line: rgba(255, 255, 255, .14); --line-2: rgba(255, 255, 255, .22); --sel: rgba(255, 255, 255, .1); --pd-chip: rgba(255, 255, 255, .07); --pd-edge: rgba(255, 255, 255, .16); --pd-mid: rgba(255, 255, 255, .86); --pd-tx: #fff3f0; color: var(--tx-mid); }
.art { padding-top: 168px; }
body:is([data-page="about"], [data-page="services"], [data-page="how-we-work"], [data-page="testimonials"]) .art { padding-top: 168px; }

/* eyebrows become Powder's chips */
.eyebrow, .ab-eye { display: inline-flex; align-items: center; gap: 10px; height: 30px; margin: 0 0 26px; padding: 0 14px 0 13px; border-radius: 99px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .86); font: 400 14px/1 var(--sans); letter-spacing: -.01em; text-transform: none; white-space: nowrap; }
.eyebrow::before, .ab-eye::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff3f0; flex: none; }
.ab-eye .mark { display: none; }
.eyebrow a { color: inherit; }
.eyebrow a:hover { color: #fff; }
.eyebrow span[aria-hidden] { color: rgba(255, 255, 255, .4); }

/* headlines, light and tight like Powder's */
.art-head h1, body:is([data-page="about"], [data-page="services"], [data-page="how-we-work"], [data-page="testimonials"]) .ab-hero h1 { color: var(--tx); font: 400 clamp(34px, 4.4vw, 56px)/1.12 var(--disp); letter-spacing: -.04em; text-wrap: balance; }
.art-head .lede { max-width: 46ch; margin-top: 22px; color: var(--tx-mid); font-size: 17px; line-height: 1.55; }
.art-head .tag { color: var(--tx-mid); border-color: var(--line-2); font-weight: 400; letter-spacing: 0; }
.co-name .co-logo img { filter: brightness(0) invert(.94); }
/* the facts under a head as small chips of their own */
.art-head .meta { gap: 10px; margin-top: 30px; }
.art-head .meta div { display: grid; gap: 4px; padding: 12px 16px; border-radius: 12px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.art-head .meta dt { color: rgba(255, 255, 255, .55); font-size: 12px; }
.art-head .meta dd { color: #fff3f0; font-size: 14px; }
.art-head .meta a { color: #fff3f0; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; }
/* a company's case studies sit in the head as Powder's tab pills */
.cs-tabs { position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 30px; padding: 0; border: 0; }
.cs-tabs a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 99px; color: rgba(255, 255, 255, .7); font-size: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: color 150ms ease-out, background 150ms ease-out; }
.cs-tabs a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.cs-tabs a[aria-current] { color: #111; background: #e7e4e1; box-shadow: none; }
.cs-tabs a { white-space: nowrap; }
/* phones, the tabs scroll sideways on one line instead of wrapping, 44px targets */
@media (max-width: 900px) {
  .cs-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .cs-tabs::-webkit-scrollbar { display: none; }
  .cs-tabs a { flex: none; height: 44px; }
}

/* the body, calm Powder type */
.art-body { margin-top: 128px; padding-top: 0; border-top: 0; color: var(--pd-mid); }
.co-page .cases { margin-top: 128px; }
.art-body p { font-size: 16px; line-height: 1.65; }
.art-body h2 { margin: 72px 0 16px; color: var(--pd-tx); font: 400 clamp(24px, 2.4vw, 30px)/1.3 var(--disp); letter-spacing: -.03em; }
.fig .shot, .fig .lv-view, .fig .cmp-frame, .fig .tg-frame, .fig .g-cell .shot { border-radius: 16px; }
.fig figcaption { color: var(--pd-dim); font-size: 14px; }
/* stats as Powder's numbers row */
.art-body .stats { border: 0; margin: 48px 0 56px; row-gap: 28px; }
.art-body .stats div::after, .art-body .stats div::before { display: none; }
.art-body .stats div { padding: 0; }
.art-body .stats dt { color: var(--pd-tx); font: 400 clamp(32px, 3.2vw, 40px)/1.15 var(--disp); letter-spacing: -.04em; }
.art-body .stats dd { margin-top: 8px; color: var(--pd-dim); font-size: 14px; }
/* quotes, large and quiet */
.quote { padding: 32px 36px; border: 1px solid var(--pd-edge); border-radius: 16px; background: var(--pd-card); max-width: 760px; }
.quote p { color: var(--pd-tx); font: 400 clamp(19px, 1.8vw, 23px)/1.55 var(--disp); letter-spacing: -.02em; }

/* studio sections. The label is a chip, the statement a two tone heading, rows are cards */
body:is([data-page="about"], [data-page="services"], [data-page="how-we-work"], [data-page="testimonials"]) .art-body { margin-top: 128px; }
/* questions as Powder's cards */
.faq { display: block; }
.faq > h2 { margin-bottom: 16px; }
.faq .pd-qa summary::after { display: none; } /* the rows are the shared question rows (questions, 2026-10-13) */

/* a company's case studies, Powder's image cards */
.cases { gap: 10px !important; }
.case { padding: 8px !important; border: 1px solid var(--pd-edge); border-radius: 16px !important; background: var(--pd-card) !important; }
.case:hover { border-color: var(--pd-edge-2); }
.case img { border-radius: 10px; }
.case-tx { padding: 24px 22px 22px !important; }
.case-tx b { color: var(--pd-tx); font-weight: 400 !important; font-size: 22px !important; letter-spacing: -.02em; }
.case-tx small { color: var(--pd-dim); letter-spacing: 0 !important; text-transform: none !important; font-size: 13px !important; }
.art-next { border-top: 0; max-width: none; }

/* the closing ask, a small dusk scene with the dunes along its foot */
.close { position: relative; isolation: isolate; overflow: hidden; min-height: 360px; align-items: start; padding: clamp(36px, 4vw, 56px) clamp(28px, 4vw, 56px) 160px; border: 0; border-radius: 20px; background: #1a1f26; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); --tx: #fff3f0; --tx-mid: rgba(255, 255, 255, .8); --tx-mut: rgba(255, 255, 255, .62); --line: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); }
.close h2 { color: #fff3f0 !important; font-weight: 500 !important; letter-spacing: -.04em !important; }

/* the load entrance stays on desktop. On phones and coarse pointers the
   hero words and buttons paint at once, no hide and no rise */
@media (hover: none), (pointer: coarse) {
  html.mo-on .pd-copy > [data-reveal] { opacity: 1 !important; translate: none !important; transition: none !important; }
}
@media (max-width: 900px) {
  .art { padding-top: 120px; }
  body:is([data-page="about"], [data-page="services"], [data-page="how-we-work"], [data-page="testimonials"]) .art { padding-top: 120px; }
  .art-body, body:is([data-page="about"], [data-page="services"], [data-page="how-we-work"], [data-page="testimonials"]) .art-body, .co-page .cases { margin-top: 104px; }
  .art-head .meta div { padding: 10px 12px; }
  body:is([data-page="about"], [data-page="services"], [data-page="how-we-work"], [data-page="testimonials"]) .art-body { margin-top: 80px; }
  .close { padding-bottom: 150px; }

}
.art-head > .pd-band { max-width: none !important; }
/* what follows the head paints above the band's fade */
.art-body, .cases, .art-next, .art > .close { position: relative; z-index: 1; }


/* ---------- the nav bar, Powder's, 2026-10-11 ----------
   Fixed and see through at any scroll, as Powder's is. Light words over the
   dusk scene, the page's own colours once past it (on-page, site.js). */
.nb { position: fixed; top: 0; left: 0; right: 0; z-index: 50; --nb-tx: #fff3f0; --nb-mid: rgba(255, 255, 255, .8); --nb-cta: rgba(255, 255, 255, .1); --nb-cta-h: rgba(255, 255, 255, .16); --nb-cta-edge: rgba(255, 255, 255, .16); }
.nb.on-page { --nb-tx: var(--tx); --nb-mid: var(--tx-mid); --nb-cta: var(--sel); --nb-cta-h: var(--hover); --nb-cta-edge: var(--line-2); }
.nb-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; height: 60px; max-width: calc(var(--pd-w) + 2 * var(--gutter)); margin: 0 auto; padding: 12px var(--gutter) 0; }
.nb-mark { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; color: var(--nb-tx); font: 600 15px/1 var(--sans); letter-spacing: -.012em; transition: color 150ms ease-out; }
.nb-mark .wm { width: 22px; height: 22px; flex: none; } /* the Opening mark beside the live name, the kit's nav proportion (motion/demo.html) */
.nb-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.nb-item { display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 20px; color: var(--nb-mid); font: 400 14px/1 var(--sans); letter-spacing: -.02em; transition: color 150ms ease-out; }
.nb-item:is(:hover, :focus-visible, [aria-current], [aria-expanded="true"]) { color: var(--nb-tx); }
.nb-chev { width: 12px; height: 12px; transition: transform 250ms var(--ease-out); }
.nb-workl[aria-expanded="true"] .nb-chev { transform: scaleY(-1); }
.nb-cta { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 18px; border-radius: 99px; background: var(--nb-cta); box-shadow: inset 0 0 0 1px var(--nb-cta-edge); color: var(--nb-tx) !important; font: 400 14px/1 var(--sans); letter-spacing: -.02em; transition: background 150ms ease-out, color 150ms ease-out; }
.nb-cta:hover { background: var(--nb-cta-h); }
.nb-cta-bar { justify-self: end; }
.nb :is(.nb-cta, .nb-mark, .nb-menu-btn):active { scale: .96; }
.nb :focus-visible { outline: 2px solid var(--nb-tx); outline-offset: 2px; border-radius: 99px; }
.nb-menu-btn { display: none; justify-self: end; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--nb-tx); cursor: pointer; }
.nb-mi { position: relative; display: block; width: 20px; height: 10px; }
.nb-mi i { position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform 250ms var(--ease-out); }
.nb-mi i:first-child { top: 0; } .nb-mi i:last-child { bottom: 0; }
.nb-menu-btn[aria-expanded="true"] .nb-mi i:first-child { transform: translateY(4.25px) rotate(45deg); }
.nb-menu-btn[aria-expanded="true"] .nb-mi i:last-child { transform: translateY(-4.25px) rotate(-45deg); }

html:not(.js) .nb-menu-btn { display: none !important; }
@media (min-width: 861px) and (max-width: 1060px) { .nb-mark span { display: none; } .nb-item { padding: 0 12px; } }
@media (max-width: 860px) {
  .nb-bar { grid-template-columns: 1fr auto; height: 68px; padding: 16px 20px 0; }
  .nb-nav, .nb-cta-bar { display: none; }
  .nb-menu-btn { display: grid; }
}

/* ---------- David's review, 2026-10-11 ----------
   The Wedge app windows are translucent like Powder's, per David ("make the
   UI that's shown of the Wedge app here a bit transparent"). The one place
   glass is allowed, these windows only. The frame is a light tint over a
   blurred view of the scene with a soft light edge, the screen sits in it
   nearly opaque so every word stays readable (David, "I barely can see
   the UI"). */
.pd-app, .pd-close-lag { background: rgba(40, 36, 42, .32); -webkit-backdrop-filter: blur(26px) saturate(1.2); backdrop-filter: blur(26px) saturate(1.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px rgba(255, 255, 255, .16), 0 24px 60px rgba(0, 0, 0, .22); }
.pd-app, .pd-close-lag { padding: 8px; }
.pd-app img, .pd-close-lag img { opacity: .95; border-radius: 16px; }
/* the closing, below 1100px the window drops under the words at the full column width, tall enough to show the approvals */
@media (max-width: 1100px) {
  .pd-close-in { grid-template-columns: 1fr; gap: 0; }
  .pd-close-app { width: 100%; max-width: 760px; margin-top: 56px; }
  .pd-close-lag { height: calc(clamp(420px, 60vw, 480px) + var(--dh) * .32); }
}
/* the dune scene melts into the page above the footer, no hard edge */
.pd-close::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 56px; background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; }

/* hairlines as their own elements, so motion.js can draw them in (data-draw).
   Without the script they simply show */
.rl { display: block; height: 1px; background: var(--pd-edge-2); transform-origin: 0 50%; }
.pd-plan-k .rl { position: absolute; left: 0; right: 0; bottom: 0; background: var(--pd-edge); }
.pd-plan li .rl { position: absolute; left: 0; right: 0; top: 0; background: var(--pd-edge); }

/* cards marked data-draw-border keep a real 1px border, so they look final
   with or without motion.js. The motion layer hides it only under its own
   classes (html.mo-on, then .mo-bd once traced). The pointer light's ring
   sits over the border, not inside it */
[data-draw-border][data-glow]::before { inset: -1px; }

/* ---------- the final motion contract, 2026-10-11 ----------
   Powder's effects only (site/motion.js, tools/dev/motion-demo/NOTES.md).
   The footer wordmark rises 64px. Powder clips it in a box, but an element
   clipped out of sight never reaches the reveal's 15 percent, so the box
   itself rises here, unclipped. The intro's
   reading focus works by opacity, so while it runs every paragraph takes
   the bright colour, without the script the quiet grey stays. */
.ft-wm { display: inline-block; vertical-align: top; }
html.mo-on .pd-intro-tx > p { color: var(--pd-tx) !important; }

/* the headline in three balanced lines, the stage closer on short laptop
   screens, so the window and the hills beside it reach the first screen */
@media (min-width: 901px) {
  .pd-hero { padding-top: clamp(104px, 15vh, 160px); }
  .pd-hero h1 { max-width: 13.6em; font-size: clamp(40px, 3.89vw, 56px); line-height: 1.3; text-wrap: balance; }
  .pd-hero .ctas { margin-top: clamp(28px, 3.8vh, 40px); }
}
/* the footer email sits above the wordmark while the wordmark rises past it */
.ft .mail { position: relative; z-index: 1; }

/* the shade behind the nav, 2026-10-12, per David ("I also don't like how
   abruptly and aggressively this fades"). It follows the scroll, nothing
   snaps. site.js sets --nb-p from 0 at the top to 1 at 140px, eased, every
   frame the page moves (Lenis and page swaps included). It is never solid,
   .8 behind the bar easing out by 180px, and it takes the colour of
   what is under it, the sky's own top tone over a dusk scene and the page
   colour past it, crossfading between the two. No blur. */
@property --nb-c { syntax: '<color>'; inherits: true; initial-value: #1b2228; }
.nb { --nb-c: #1b2228; --nb-p: 0; --nb-top: env(safe-area-inset-top, 0px); transition: --nb-c 400ms cubic-bezier(.22, 1, .36, 1); }
.nb.on-page { --nb-c: var(--bg); }
/* over the home sky and the page head bands site.js sets the colour itself every frame, so no lag */
.nb.nb-ramp { transition: none; }
.nb::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--nb-top) + 180px); z-index: -1; pointer-events: none; opacity: var(--nb-p);
  background: linear-gradient(color-mix(in srgb, var(--nb-c) 80.0%, transparent) calc(var(--nb-top) + 0px), color-mix(in srgb, var(--nb-c) 80.0%, transparent) calc(var(--nb-top) + 44px), color-mix(in srgb, var(--nb-c) 78.2%, transparent) calc(var(--nb-top) + 56px), color-mix(in srgb, var(--nb-c) 73.4%, transparent) calc(var(--nb-top) + 68px), color-mix(in srgb, var(--nb-c) 66.2%, transparent) calc(var(--nb-top) + 80px), color-mix(in srgb, var(--nb-c) 57.1%, transparent) calc(var(--nb-top) + 92px), color-mix(in srgb, var(--nb-c) 47.0%, transparent) calc(var(--nb-top) + 104px), color-mix(in srgb, var(--nb-c) 36.5%, transparent) calc(var(--nb-top) + 116px), color-mix(in srgb, var(--nb-c) 26.1%, transparent) calc(var(--nb-top) + 128px), color-mix(in srgb, var(--nb-c) 16.7%, transparent) calc(var(--nb-top) + 140px), color-mix(in srgb, var(--nb-c) 8.8%, transparent) calc(var(--nb-top) + 152px), color-mix(in srgb, var(--nb-c) 3.1%, transparent) calc(var(--nb-top) + 164px), color-mix(in srgb, var(--nb-c) 0.8%, transparent) calc(var(--nb-top) + 172px), color-mix(in srgb, var(--nb-c) 0.0%, transparent) calc(var(--nb-top) + 180px)); }
/* without the script the shade follows the scroll where the browser can, and simply stays on where it cannot */
html:not(.js) .nb::before { opacity: 1; }
@supports (animation-timeline: scroll()) { html:not(.js) .nb::before { opacity: 0; animation: nb-shade linear both; animation-timeline: scroll(root); animation-range: 0 140px; } }
@keyframes nb-shade { to { opacity: 1; } }
.nb-cta-bar { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
@media (prefers-reduced-motion: reduce) { .nb { transition: none; } }

/* ---------- the page head scene, 2026-10-12 ----------
   Per David ("I want to see more of the mountains"). Every page head opens
   on a short version of home's hero, the same dusk sky, far hills, near
   hills and shrub band (Powder's own), standing on one foot just below the
   copy and dissolving into the page. The layers keep their own proportions
   at the full width of the screen (wider than the screen on phones, as home
   does), so the crests read as hills, never as a stretched crop. Past 1600
   wide a layer grows but sinks by most of its extra height, as on home. The
   far hills rise behind the headline, the dark near hills carry the lede,
   the shrubs' crowns sit just under the last line, so the copy always has a
   calm dark ground. The head grows by the shrub band's height, no more.
   Widths in px are the layers at their reference width (up to 1600):
   far 909/2464, near 848/2464 and shrubs 488/2464 of their width tall */
.art-head:has(> .pd-band) { --sw-f: 100vw; --sw-n: 100vw; --sw-s: 100vw; --wf0: min(var(--sw-f), 1600px); --wn0: min(var(--sw-n), 1600px); --ws0: min(var(--sw-s), 1600px);
  --b-ext: 124px; --b-lap: 20px; --b-up: 0px; --fade: 160px; --b-room: max(0px, calc(var(--ws0) * .1981 - var(--b-lap) - var(--b-ext) + var(--b-up)));
  padding-bottom: var(--b-room); }
/* a soft local shade behind the copy only, so the lede and the facts keep their contrast where the bright far dunes rise behind them */
.art-head:has(> .pd-band)::after { content: ''; position: absolute; z-index: -1; top: -48px; bottom: calc(var(--b-room) - 24px); left: -6%; right: -6%; pointer-events: none; background: radial-gradient(closest-side, rgb(16 13 15 / .42), rgb(16 13 15 / .24) 60%, rgb(16 13 15 / 0)); }
.art-head:has(> .pd-band) { --tx-mid: rgba(255, 255, 255, .9); }
.art-head:has(> .pd-band) .ab-lede { color: var(--tx-mid); }
.pd-band { position: absolute; z-index: -1; top: -220px; bottom: calc(-1 * var(--b-ext)); left: calc(50% - 50vw); width: 100vw; overflow: hidden; pointer-events: none; background: #1b2228; }
.pd-band .pd-l { top: auto; left: 50%; height: auto; }
.pd-band .pd-l img { object-position: 50% 100%; }
.pd-bfar { bottom: calc(var(--b-up) + var(--wf0) * .3689 * -.113 - (var(--sw-f) - var(--wf0)) * .3689 * .9); width: var(--sw-f); margin-left: calc(var(--sw-f) / -2); aspect-ratio: 2464 / 909; }
.pd-bnear { bottom: calc(var(--b-up) + var(--wn0) * .3442 * -.2 - (var(--sw-n) - var(--wn0)) * .3442 * .85); width: var(--sw-n); margin-left: calc(var(--sw-n) / -2); aspect-ratio: 2464 / 848; }
.pd-bfront { bottom: calc(var(--b-up) + (var(--sw-s) - var(--ws0)) * .1981 * -.45); width: var(--sw-s); margin-left: calc(var(--sw-s) / -2); aspect-ratio: 2464 / 488; }
/* the sky, home's dusk, rides on the far hills so its rose always glows
   just behind their crests whatever the head's height, slate above */
.pd-bfar::before { content: ''; position: absolute; left: 0; right: 0; bottom: calc(100% - 160px); height: 900px; background: linear-gradient(to top, #b88482 0%, #8f6e70 17.8%, #5c5057 29%, #363b42 40%, #242b31 51%, #1b2228 62%); }
/* each layer continues in its own foot colour below the image, so the scroll lag never opens a gap */
.pd-band .pd-li::after { content: ''; position: absolute; left: 0; right: 0; top: calc(100% - 2px); height: 120px; background: #010101; }
/* the foot into the page, home's eased fade, to black in the dark theme */
.pd-band::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: var(--fade); pointer-events: none;
  background: linear-gradient(to top, var(--bg) 0%, rgb(0 0 0 / .97) 8%, rgb(0 0 0 / .9) 18%, rgb(0 0 0 / .78) 30%, rgb(0 0 0 / .6) 43%, rgb(0 0 0 / .4) 57%, rgb(0 0 0 / .21) 71%, rgb(0 0 0 / .08) 85%, rgb(0 0 0 / 0) 100%); }
/* light theme, the shrubs sink into a dusk rose that opens into the cream page, home's ramp, no grey */
:root[data-theme="light"] .art-head:has(> .pd-band) { --fade: 240px; --b-up: 90px; }
:root[data-theme="light"] .pd-band::after { background: linear-gradient(to top, var(--bg) 0%, var(--bg) 9%, #e4ddd7 20%, #dbcac2 31%, #cbaea5 42%, #b58f87 53%, rgb(156 114 107 / .96) 62%, rgb(130 92 86 / .8) 71%, rgb(104 72 68 / .52) 80%, rgb(80 56 54 / .22) 90%, rgb(80 56 54 / 0) 100%); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .art-head:has(> .pd-band) { --fade: 240px; --b-up: 90px; }
  :root:not([data-theme="dark"]) .pd-band::after { background: linear-gradient(to top, var(--bg) 0%, var(--bg) 9%, #e4ddd7 20%, #dbcac2 31%, #cbaea5 42%, #b58f87 53%, rgb(156 114 107 / .96) 62%, rgb(130 92 86 / .8) 71%, rgb(104 72 68 / .52) 80%, rgb(80 56 54 / .22) 90%, rgb(80 56 54 / 0) 100%); }
}
/* what follows a head paints over the scene's foot */
.art-head ~ :is(.pd-body, .co-studies, .cs-cover) { position: relative; z-index: 1; }
@media (max-width: 900px) { .pd-band { top: -160px; } .art-head:has(> .pd-band) { --b-ext: 96px; } }
/* phones, the layers wider than the screen as on home, so the crests stay in view */
@media (max-width: 809px) {
  .art-head:has(> .pd-band) { --sw-f: calc(100vw + 560px); --sw-n: calc(100vw + 400px); --sw-s: calc(100vw + 330px); --b-ext: 64px; --b-lap: 8px; --fade: 120px; }
  :root[data-theme="light"] .art-head:has(> .pd-band) { --fade: 170px; --b-up: 60px; }
}
@media (max-width: 809px) and (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .art-head:has(> .pd-band) { --fade: 170px; --b-up: 60px; } }
/* the closing scene keeps its own alpha fade */
.pd-close { -webkit-mask-image: var(--pd-mask); mask-image: var(--pd-mask); }
/* the closing scene, its own dusk from top to foot, dissolving at both edges */
.pd-close { --fade: 200px; padding-top: calc(var(--fade) + 16px); background: linear-gradient(180deg, #0c0f13 0%, #121820 45%, #1a2230 100%);
  --pd-mask: linear-gradient(180deg, transparent 0, rgb(0 0 0 / .03) calc(var(--fade) * .1), rgb(0 0 0 / .1) calc(var(--fade) * .2), rgb(0 0 0 / .2) calc(var(--fade) * .3), rgb(0 0 0 / .33) calc(var(--fade) * .4), rgb(0 0 0 / .5) calc(var(--fade) * .5), rgb(0 0 0 / .67) calc(var(--fade) * .6), rgb(0 0 0 / .8) calc(var(--fade) * .7), rgb(0 0 0 / .9) calc(var(--fade) * .8), rgb(0 0 0 / .97) calc(var(--fade) * .9), #000 var(--fade), #000 calc(100% - 120px), rgb(0 0 0 / .8) calc(100% - 84px), rgb(0 0 0 / .5) calc(100% - 60px), rgb(0 0 0 / .2) calc(100% - 36px), transparent 100%); }
.pd-close::after { content: none; }
@media (max-width: 900px) { .pd-close { --fade: 140px; } }

/* ---------- design review, 2026-10-11 ----------
   1. One content column. Every page sits on home's 1080px column, so its
   left edge lines up with the nav mark and the footer */
.art, .art.studio, .art.cs, .art.co-page { max-width: calc(var(--pd-w) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
@media (max-width: 900px) { .art, .art.studio, .art.cs, .art.co-page { padding-inline: var(--gutter); } }
@media (max-width: 900px) {
  .nb-bar { padding-left: var(--gutter); padding-right: var(--gutter); }
  .ft-in { padding-left: var(--gutter); padding-right: var(--gutter); }
  .ft-base { padding-left: var(--gutter); padding-right: var(--gutter); }
  .ft-rl { left: var(--gutter); right: var(--gutter); }
}
/* 3. One closing everywhere. Inside a page the closing breaks out of the
   column to the full width, and the page ends on it with no gap before
   the footer */
.art .pd-close { margin-inline: calc(50% - 50vw); max-width: none !important; }
.art:has(.pd-close) { padding-bottom: 0; }
.art-next:has(.pd-close) { margin-bottom: 0; padding-bottom: 0; }
.pd-marks a { color: rgba(255, 255, 255, .86); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 3px; }
.pd-marks a:hover { color: #fff; text-decoration-color: currentColor; }
.pd-close-tx .ctas { display: flex; flex-wrap: wrap; gap: 10px; }
/* the closing is a dusk scene in both themes, so its words stay light,
   and the body type rules of a page do not reach into it */
.pd-close { --pd-tx: #fff3f0; --pd-mid: rgba(255, 255, 255, .8); --pd-dim: rgba(255, 255, 255, .62); --tx: #fff3f0; --tx-mid: rgba(255, 255, 255, .8); --tx-mut: rgba(255, 255, 255, .62); }
.art .pd-close-tx h2 { margin: 0; color: #fff3f0; font: 500 var(--h2)/1.3 var(--disp); text-wrap: balance; letter-spacing: -.04em; }
.art .pd-close-tx p { margin: 22px 0 0; max-width: 30ch; color: rgba(255, 255, 255, .78); font-size: 16px; line-height: 1.5; }

/* ---------- design review, studio pages on home's components, 2026-10-11 ----------
   About, Services, Process and Clients are built from home's pieces
   (pdSec in build.mjs), every section head is home's, and no two
   neighbouring sections share a layout */
.pd-body { color: var(--pd-tx); letter-spacing: -.01em; }
.pd-body h2, .pd-body h3 { font-family: var(--disp); text-wrap: balance; }
.pd-body p { text-wrap: pretty; }
.pd-ssec { padding-top: var(--pd-sec); }
.pd-body > .pd-ssec:first-child { padding-top: clamp(96px, 10vw, 152px); }
.pd-after { margin: 32px 0 0; }
.pd-after .pd-more { justify-self: start; }
/* the head, one sentence as the h1, the rest as the lede, the facts as tiles */
.ab-hero .ab-lede { margin: 24px 0 0; max-width: 46ch; color: rgba(255, 255, 255, .72); font-size: 17px; line-height: 1.55; }
.ab-tiles { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ab-tiles li { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 24px; border-radius: 16px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.ab-tiles b { color: #fff3f0; font-size: 20px; font-weight: 400; line-height: 1.3; letter-spacing: -.02em; overflow-wrap: anywhere; }
.ab-tiles b a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 4px; }
.ab-tiles b a:hover { text-decoration-color: currentColor; }
.ab-tiles small { color: rgba(255, 255, 255, .62); font-size: 13px; }
/* a quiet two column list on hairlines */
.pd-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.pd-list li { position: relative; display: flex; align-items: center; gap: 16px; padding: 24px 0; color: var(--pd-mid); font-size: 17px; line-height: 1.45; }
.pd-list .rl { position: absolute; left: 0; right: 0; top: 0; background: var(--pd-edge); }
.pd-list .ic { flex: none; width: 20px; height: 20px; color: var(--pd-dim); }
/* chips */
.pd-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pd-chips .pd-chip { height: 40px; padding: 0 18px 0 16px; font-size: 15px; }
/* image cards with real screens, light screens sit in the card's well */
.pd-card-shot { background: var(--pd-well); }
.pd-card-shot img { object-position: 50% 0; }
/* feature rows, ticks and the case study link */
.pd-ticks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.pd-ticks li { display: flex; align-items: center; gap: 12px; color: var(--pd-mid); font-size: 14px; }
.pd-ticks svg { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--pd-f3); color: var(--pd-tx); }
.pd-note .pd-more { min-height: 44px; font-size: 14px; color: var(--pd-mid); }
.pd-row-media > a { display: contents; }
.pd-plan > .pd-more { justify-self: start; align-self: flex-start; margin: 18px 0 22px; font-size: 14px; }
/* the steps on home's launch timeline, the when first, the points below */
.pd-steps > li > div { position: relative; display: grid; align-content: start; gap: 10px; height: 100%; padding: 52px 28px 8px 0; color: var(--pd-dim); font-size: 14px; line-height: 1.5; }
.pd-steps small { color: var(--pd-mid); font-size: 13px; }
.pd-steps b { color: var(--pd-tx); font-size: 20px; font-weight: 400; letter-spacing: -.02em; }
.pd-steps ul { list-style: none; margin: 14px 0 0; padding: 14px 0 0; display: grid; gap: 8px; border-top: 1px solid var(--pd-edge); }
.pd-steps ul li { color: var(--pd-dim); font-size: 13.5px; }
/* a two column compare table */
.pd-cmp { padding: 8px 36px; border-radius: 16px; background: var(--pd-card); border: 1px solid var(--pd-edge); }
.pd-cmp table { width: 100%; border-collapse: collapse; }
.pd-cmp th { padding: 28px 0 20px; color: var(--pd-tx); font-size: 20px; font-weight: 400; letter-spacing: -.02em; text-align: left; }
.pd-cmp td { width: 50%; padding: 18px 24px 18px 0; border-top: 1px solid var(--pd-edge); color: var(--pd-mid); font-size: 16px; }
.pd-cmp td:last-child { color: var(--pd-tx); }
.pd-cmp td { position: relative; padding-left: 36px !important; }
.pd-cmp td svg, .pd-x { position: absolute; left: 0; top: 17px; display: grid; place-items: center; width: 22px; height: 22px; }
.pd-cmp td svg { padding: 3px; border-radius: 50%; background: var(--pd-f3); color: var(--pd-tx); }
.pd-x { color: var(--pd-dim); font-size: 18px; line-height: 1; }
/* four plain columns */
.pd-grid4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.pd-grid4 li { display: grid; gap: 6px; align-content: start; }
.pd-grid4 .ic { width: 20px; height: 20px; margin-bottom: 10px; color: var(--pd-dim); }
.pd-grid4 b { color: var(--pd-tx); font-size: 16px; font-weight: 400; }
.pd-grid4 span { color: var(--pd-dim); font-size: 14px; line-height: 1.5; }
/* the launch log line is never cut mid sentence (design review, home 3) */
.pd-log span { display: block; -webkit-line-clamp: none; overflow: visible; }
@media (max-width: 900px) {
  .pd-body > .pd-ssec:first-child { padding-top: 88px; }
  .pd-steps > li > div { padding: 0 0 24px 24px; }
  .ab-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-tiles li { padding: 18px; }
  .ab-tiles b { font-size: 17px; }
  .ab-tiles li:has(a) { grid-column: 1 / -1; }
  .pd-list { grid-template-columns: 1fr; }
  .pd-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .pd-cmp { padding: 4px 20px; }
  .pd-cmp th { font-size: 17px; }
  .pd-cmp td { padding-right: 12px; font-size: 14.5px; }
  .pd-cmp td { padding-left: 30px !important; }
}

/* ---------- design review, the case study reading layout, 2026-10-11 ----------
   Powder's article. A centred head with the client's logo and the facts on
   one line, the cover in home's frame over the band's foot, text in a
   640px column on the page's centre line, media at the full 1080px, every
   screen in home's 8px inset card, See also as home's image cards. No
   company colour reaches the page, the logo carries it */
.cs-head { display: grid; justify-items: center; text-align: center; padding-bottom: 40px; }
.cs-head h1 { max-width: 15em; margin-inline: auto; }
.cs-head .lede { max-width: 52ch; margin-inline: auto; font-size: 17px; }
.cs-logo { display: inline-grid; place-items: center; min-height: 44px; margin: 0 0 28px; }
.cs-logo img { width: auto; height: 32px; max-width: 200px; object-fit: contain; }
.cs-facts { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 12px; margin: 28px 0 0; max-width: 820px; color: rgba(255, 255, 255, .86); font-size: 14px; line-height: 1.5; }
.cs-facts small { color: rgba(255, 255, 255, .55); font-size: 14px; }
.cs-facts i { color: rgba(255, 255, 255, .35); font-style: normal; }
.cs-facts a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; }
.cs-facts a:hover { text-decoration-color: currentColor; }
.cs-head .cs-tabs { justify-content: center; margin: 36px 0 0; }
.cs-cover { position: relative; z-index: 1; margin: 0 0 24px; }
.cs-cover img { display: block; width: 100%; height: auto; border-radius: 10px; }
/* home's frame, an 8px inset card around every screen */
.fr { padding: 8px; border-radius: 16px; background: var(--pd-card); border: 1px solid var(--pd-edge); }
.fr > :is(.shot, .lv-view, .cmp-frame, .tg-frame, video, img), .fig .fr .shot, .fig .fr .lv-view, .fig .fr .cmp-frame, .fig .fr .tg-frame { display: block; border-radius: 10px; }
.fig .g-cell.fr .shot, .fig .sd-cell.fr .shot { border-radius: 10px; }
.fig figcaption { margin-top: 14px; text-align: center; }
/* the reading column */
.cs .art-body { margin-top: 0; padding-top: 72px; border-top: 0; }
.cs .art-body > :is(p, h2, h3, ul, ol, .scope, .quote, .note, .out) { max-width: 640px; margin-inline: auto; }
.cs .art-body > p { font-size: 17px; line-height: 1.7; color: var(--pd-mid); }
.cs .art-body > h2 { margin-top: 120px; margin-bottom: 20px; color: var(--pd-tx); font: 500 32px/1.25 var(--disp); letter-spacing: -.03em; }
.cs .art-body > .fig { max-width: none !important; margin-block: 56px 64px; }
.cs .art-body p a, .cs .out a { color: var(--pd-tx); text-decoration: underline; text-decoration-color: var(--pd-edge-2); text-underline-offset: 3px; }
.cs .art-body p a:hover, .cs .out a:hover { text-decoration-color: currentColor; }
.cs .out a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
/* the numbers, home's row on a hairline */
.cs .art-body .stats { margin: 64px 0; padding-top: 32px; border-top: 1px solid var(--pd-edge); }
/* What we did, a home card with ticks */
.cs .scope { margin-block: 56px; padding: 32px 36px 24px; border-radius: 16px; background: var(--pd-card); border: 1px solid var(--pd-edge); }
.cs .art-body .scope > h2.scope-h { margin: 0 0 16px; color: var(--pd-tx); font: 500 16px/1.3 var(--sans); }
.cs .scope ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; columns: auto; }
.cs .scope li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--pd-edge); color: var(--pd-mid); font-size: 14px; line-height: 1.45; }
.cs .scope li::before { content: none; }
.cs .scope li svg { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--pd-f3); color: var(--pd-tx); }
/* quotes, a pull quote between two hairlines with the company under it */
.cs .quote { margin-block: 72px; padding: 32px 0; border: 0; border-block: 1px solid var(--pd-edge); border-radius: 0; background: none; text-align: left; }
.cs .quote blockquote { margin: 0; }
.cs .quote p { margin: 0 !important; color: var(--pd-tx); font: 400 28px/1.4 var(--disp); letter-spacing: -.025em; }
.cs .quote figcaption { margin-top: 16px; color: var(--pd-dim); font-size: 14px; }
/* See also, a proper gap before the closing */
.cs .art-next { display: block; margin-top: var(--pd-sec); max-width: none; }
.cs-also { padding-bottom: 96px; }
.cs-cover figcaption { margin-top: 14px; color: var(--pd-dim); font-size: 14px; text-align: center; }
@media (max-width: 900px) {
  .cs-logo img { height: 26px; }
  .cs-facts { flex-direction: column; align-items: center; gap: 4px; font-size: 13px; }
  .cs-facts i { display: none; }
  .cs-facts small { font-size: 13px; }
  .cs .art-body { padding-top: 48px; }
  .cs .art-body > h2 { margin-top: 80px; font-size: 26px; }
  .cs .art-body > p { font-size: 16px; }
  .cs .scope { padding: 24px 20px 16px; }
  .cs .scope ul { grid-template-columns: 1fr; }
  .cs .quote p { font-size: 22px; }
  .fr { padding: 6px; border-radius: 14px; }
}
/* phone sized live frames and tall sliders keep their own width inside the full width media rule */
.cs .art-body > .fig.phone-live { max-width: 340px !important; margin-inline: auto; }
.cs .art-body > .fig.compare.tall { max-width: 320px !important; margin-inline: auto; }
.phone-live .fr { border-radius: 28px; }
.phone-live .fr .lv-view { border-radius: 22px; }

/* ---------- design review, one button and 44px targets, 2026-10-11 ----------
   Every primary and secondary button is home's, 48px, 15px, the warm off
   white fill in the dark theme and never pure white. On phones every link
   and control a thumb is meant to hit is at least 44px tall */
.ghost { cursor: pointer; }
.pd-more { min-height: 44px; }
@media (max-width: 900px) {
  .ft li a, .ft-col a, .eyebrow a, .cs-tabs a { display: inline-flex; align-items: center; min-height: 44px; }
  .ft li a, .ft-col a { min-width: 44px; }
  /* links inside a line keep the line and grow their hit area */
  :is(.lv-open, .pd-tcap a, .mail > a, .pd-marks a, .ab-tiles a, .cs-facts a, .fig figcaption a, .st-or a, .sb-or a, .sb-alt a, .ft .mail a, .si-forgot, .art-head .meta a, .co-head a) { padding-block: 14px; }
  .ft .brand, .nb-mark { min-height: 44px; }
  .theme-btn::before { content: ""; position: absolute; inset: -4px; border-radius: 768px; }
  .pd-nchip::after { content: ''; position: absolute; inset: -7px 0; }
  .nb-menu-btn { width: 44px; height: 44px; }
}
/* wide before and afters that are not sliders sit side by side, two framed screens */
@media (min-width: 701px) { .sides:not(.tall) .sd-row { grid-template-columns: 1fr 1fr; gap: 10px; } }
/* the before and after labels sit low in the corners, clear of the screenshots' own menus, as Powder's small chips */
.cmp-tag { top: auto; bottom: 12px; height: 30px; display: inline-flex; align-items: center; padding: 0 12px; font-size: 13px; background: color-mix(in srgb, var(--pd-chip) 80%, transparent); color: var(--pd-tx); box-shadow: inset 0 0 0 1px var(--pd-edge); }
/* the Clients wall fades at both edges with reduced motion too, so it never ends on a cut line */
/* the 404, a centred head that fills the screen, then three recent studies */
.nf-head { min-height: 70vh; align-content: center; }
.nf-head .ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 36px 0 0; }
/* home numbers, the number and its unit on one line, the icon 12px above (design review, home 1) */
.pd-stats b { display: flex; align-items: baseline; gap: 2px; margin-top: 12px; white-space: nowrap; }
.pd-stats b span { display: inline; margin: 0; max-width: none; color: inherit; font-size: inherit; line-height: inherit; }
.pd-stats b small { margin-left: 0; font-size: .6em; }
@media (max-width: 900px) { .pd-stats b { margin-top: 12px; } }
/* the home closing carries the pricing promise now that pricing lives on Process */
.pd-close-tx .pd-promise { margin-top: 14px; color: #fff3f0; font-size: 16px; font-weight: 500; }

/* ---------- the feature tabs as Powder's segmented control, 2026-10-11 ----------
   A 56px track in an 8px shell, four equal 40px pills, the active pill's
   fill crossfades over 600ms (it does not slide), inactive labels dimmer.
   motion.js advances every 8s (data-autoadvance) and writes --p on the
   active tab for its 216px progress line. Panels crossfade on the same curve
   inside the same shell */
:root { --seg-bg: rgba(0, 0, 0, .85); --seg-tx: rgba(255, 255, 255, .62); --seg-hov: rgba(255, 255, 255, .86); --seg-on: #fff3f0; }
:root[data-theme="light"] { --seg-bg: #fff; --seg-tx: rgba(0, 0, 0, .55); --seg-hov: rgba(0, 0, 0, .8); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --seg-bg: #fff; --seg-tx: rgba(0, 0, 0, .55); --seg-hov: rgba(0, 0, 0, .8); } }
.pd-seg { margin: 0 auto 24px; padding: 8px; border-radius: 72px; background: var(--seg-bg); box-shadow: inset 0 0 0 1px var(--pd-edge); }
.pd-tablist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.pd-tablist button { position: relative; isolation: isolate; height: 40px; padding: 0 24px; border: 0; border-radius: 609px; background: none; color: var(--seg-tx); font: 400 16px/24px var(--sans); letter-spacing: -.01em; cursor: pointer; transition: color 600ms cubic-bezier(.22, 1, .36, 1); }
.pd-tablist button::after { content: ''; position: absolute; inset: 0; z-index: -1; left: 0; right: 0; bottom: 0; height: auto; border-radius: inherit; background: rgba(23, 23, 23, .85); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .08); opacity: 0; transform: none; transition: opacity 600ms cubic-bezier(.22, 1, .36, 1); }
.pd-tablist button:hover { color: var(--seg-hov); }
.pd-tablist button[aria-selected="true"] { color: #fff3f0; }
.pd-tablist button[aria-selected="true"]::after { opacity: 1; }
.pd-tablist button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* the 216px progress line along the active pill's top edge */
.pd-seg-bar { position: absolute; top: -1px; left: 24px; right: 24px; height: 2px; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 50.5%, transparent); mask-image: linear-gradient(90deg, transparent, #000 50.5%, transparent); }
.pd-seg-bar::before { content: ''; position: absolute; left: 0; top: 0; height: 2px; width: calc(var(--p, 0) * 100%); border-radius: 999px; background: rgba(255, 255, 255, .65); }
.pd-tablist button[aria-selected="false"] .pd-seg-bar { display: none; }
/* the panel in the same shell, every panel stacked and crossfading */
.pd-tpanels { display: grid; padding: 8px; border-radius: 32px; background: var(--seg-bg); box-shadow: inset 0 0 0 1px var(--pd-edge); }
html.js .pd-tp { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 600ms cubic-bezier(.22, 1, .36, 1), visibility 0s 600ms; }
html.js .pd-tp:not(.on) { display: block; }
html.js .pd-tp.on { opacity: 1; visibility: visible; animation: none; transition: opacity 600ms cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.pd-tpanels .pd-tcap { margin-bottom: 20px; }
.pd-tabs > .pd-arr { bottom: 8px; }
.pd-prev { left: 8px; } .pd-next { right: 8px; }
@media (max-width: 900px) {
  .pd-seg { margin: 0 calc(-1 * var(--gutter)) 16px; padding: 6px var(--gutter); border-radius: 0; background: none; box-shadow: none; }
  .pd-tablist { display: flex; gap: 6px; padding: 6px; border-radius: 72px; background: var(--seg-bg); box-shadow: inset 0 0 0 1px var(--pd-edge); width: max-content; }
  .pd-tablist button { flex: none; padding: 0 18px; height: 44px; }
  .pd-tpanels { padding: 6px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) { .pd-tablist button, .pd-tablist button::after, html.js .pd-tp, html.js .pd-tp.on { transition: none; } }
/* phones, the tabs fill the head's width so they scroll inside it instead of running off the page */
@media (max-width: 900px) { .cs-head .cs-tabs { justify-self: stretch; justify-content: flex-start; min-width: 0; max-width: none; } }
/* ---------- glass app UI, 2026-10-11 ----------
   The Wedge app drawn natively (src/app-ui.mjs, appUI(screen)) as Powder's
   glass, per David ("make all the UI of the app and stuff, glassy as well").
   Translucent fills and 1px light edges throughout, so whatever sits behind
   the window glows through. Powder's window type sizes (14/21 body, 28 greeting
   class headings), its hover (fill .1 to .25 over 250ms). It sizes itself to
   its box, a container query narrows it on tablets and phones */
.gx { --gx-tx: #fff3f0; --gx-mid: rgba(255, 255, 255, .8); --gx-dim: rgba(255, 255, 255, .6); --gx-faint: rgba(255, 255, 255, .42); --gx-fill: rgba(255, 255, 255, .045); --gx-fill-2: rgba(255, 255, 255, .1); --gx-edge: rgba(255, 255, 255, .1); --gx-line: rgba(255, 255, 255, .08); --gx-ease: cubic-bezier(.22, 1, .36, 1);
  container: gx / inline-size; display: flex; width: 100%; height: 100%; overflow: hidden; color: var(--gx-mid); font: 400 13px/1.5 var(--sans); letter-spacing: -.005em; text-align: left; -webkit-font-smoothing: antialiased; }
.gx b { font-weight: 500; color: var(--gx-tx); }
.gx p { margin: 0; }
.gx-ic { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gx-mark { width: 16px; height: 16px; flex: none; }
/* sidebar */
.gx-side { flex: none; display: flex; flex-direction: column; gap: 2px; width: 196px; padding: 20px 12px; border-right: 1px solid var(--gx-line); background: rgba(255, 255, 255, .02); }
.gx-brand { display: flex; align-items: center; gap: 8px; margin: 0 0 16px 8px; color: var(--gx-tx); font-size: 16px; font-weight: 500; }
.gx-brand i { padding: 2px 6px; border-radius: 5px; background: rgba(255, 243, 240, .92); color: #000; font: 600 9.5px/1.3 var(--sans); font-style: normal; letter-spacing: .1em; }
.gx-search { display: flex; align-items: center; gap: 8px; height: 34px; margin-bottom: 12px; padding: 0 8px 0 10px; border-radius: 10px; background: var(--gx-fill); box-shadow: inset 0 0 0 1px var(--gx-edge); color: var(--gx-faint); }
.gx-search kbd { margin-left: auto; padding: 1px 5px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--gx-edge); font: 400 10px/1.4 var(--sans); }
.gx-nav { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: 8px; color: var(--gx-dim); transition: background-color 250ms var(--gx-ease), color 250ms var(--gx-ease); }
.gx-nav:hover { background: rgba(255, 255, 255, .05); color: var(--gx-mid); }
.gx-nav.is-on { background: var(--gx-fill-2); box-shadow: inset 0 0 0 1px var(--gx-edge); color: var(--gx-tx); }
.gx-count { display: grid; place-items: center; min-width: 17px; height: 17px; margin-left: auto; padding: 0 5px; border-radius: 9px; background: rgba(242, 183, 108, .14); box-shadow: inset 0 0 0 1px rgba(242, 183, 108, .28); color: #f2c58a !important; font-size: 10px !important; font-weight: 500; }
.gx-group { margin: 14px 0 6px 10px !important; color: var(--gx-faint); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* main */
.gx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gx-top { flex: none; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 24px; border-bottom: 1px solid var(--gx-line); }
.gx-crumb { color: var(--gx-faint); white-space: nowrap; }
.gx-crumb i { margin: 0 4px; font-style: normal; }
.gx-crumb b { font-size: 15px; }
.gx-tag { flex: none; padding: 2px 8px; border-radius: 99px; background: rgba(126, 196, 227, .1); box-shadow: inset 0 0 0 1px rgba(126, 196, 227, .3); color: #a9d8ec; font: 500 9.5px/1.6 var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.gx-tag.is-amber { background: rgba(242, 183, 108, .1); box-shadow: inset 0 0 0 1px rgba(242, 183, 108, .32); color: #f2c58a; }
.gx-tag.is-green { background: rgba(126, 234, 155, .08); box-shadow: inset 0 0 0 1px rgba(126, 234, 155, .3); color: #a3e7b4; }
.gx-demo { padding: 2px 10px; border-radius: 99px; background: var(--gx-fill); box-shadow: inset 0 0 0 1px var(--gx-edge); color: var(--gx-dim); font-size: 11px; white-space: nowrap; }
.gx-who { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.gx-av { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--gx-fill-2); box-shadow: inset 0 0 0 1px var(--gx-edge); color: var(--gx-tx); font-size: 9.5px; font-weight: 600; }
.gx-av-w { background: #fff3f0; color: #111; }
.gx-av-w .gx-mark { width: 16px; height: 16px; }
.gx-bell { position: relative; display: grid; place-items: center; width: 26px; color: var(--gx-dim); }
.gx-bell::after { content: ''; position: absolute; top: 2px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #ff3b54; }
.gx-body { flex: 1; min-height: 0; padding: 20px 24px; overflow: hidden; }
/* shared pieces */
.gx-card { display: block; margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: var(--gx-fill); box-shadow: inset 0 0 0 1px var(--gx-edge); transition: background-color 250ms var(--gx-ease); }
.gx-card:hover { background: rgba(255, 255, 255, .075); }
.gx-card span, .gx-card p { color: var(--gx-dim); }
.gx-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gx-row time { flex: none; color: var(--gx-faint); font-size: 11px; }
.gx-h { margin: 18px 0 0 !important; color: var(--gx-faint); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.gx-col > .gx-h:first-child { margin-top: 0 !important; }
.gx-bar { position: relative; display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.gx-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--gx-tx); }
/* overview */
.gx-stats { display: grid; grid-template-columns: 1.3fr 1fr 1fr; border-radius: 14px; background: var(--gx-fill); box-shadow: inset 0 0 0 1px var(--gx-edge); }
.gx-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; }
.gx-stat + .gx-stat { border-left: 1px solid var(--gx-line); }
.gx-stat b { font-size: 22px; line-height: 1.3; letter-spacing: -.02em; }
.gx-stat b.is-amber { color: #f2c58a; }
.gx-stat span { color: var(--gx-dim); font-size: 12px; white-space: nowrap; }
.gx-stat .gx-bar { margin-top: 10px; }
.gx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.gx-col { min-width: 0; }
.gx-input { display: flex; align-items: center; justify-content: space-between; height: 40px; margin-top: 10px; padding: 0 6px 0 16px; border-radius: 99px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: var(--gx-faint); }
.gx-round { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gx-fill-2); color: var(--gx-tx); }
.gx-round .gx-ic { width: 13px; height: 13px; }
.gx-rev { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gx-rev > div { min-width: 0; }
.gx-rev b, .gx-news b { display: block; font-size: 13.5px; }
.gx-rev span:not(.gx-tag), .gx-news > span { display: block; margin-top: 2px; font-size: 12px; }
.gx-rev.is-done b { color: var(--gx-mid); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .45); }
.gx-phases { padding: 2px 14px; }
.gx-phase { display: grid; grid-template-columns: 76px 1fr 38px; align-items: center; gap: 12px; height: 36px; }
.gx-phase + .gx-phase { border-top: 1px solid var(--gx-line); }
.gx-phase b { font-size: 12.5px; }
.gx-phase span { color: var(--gx-faint); font-size: 11.5px; text-align: right; }
.gx-phase.is-idle b { color: var(--gx-faint); font-weight: 400; }
/* approvals */
.gx-list .gx-card:first-child { margin-top: 0; }
.gx-appr { padding: 16px 18px; }
.gx-appr b { font-size: 14px; }
.gx-appr p { margin: 8px 0 12px; color: var(--gx-mid); font-size: 14px; line-height: 21px; }
.gx-acts { display: flex; gap: 8px; }
.gx-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 99px; background: var(--gx-fill-2); box-shadow: inset 0 0 0 1px var(--gx-edge); color: var(--gx-tx) !important; font-size: 12.5px; font-weight: 500; transition: background-color 250ms var(--gx-ease); }
.gx-btn:hover { background: rgba(255, 255, 255, .25); }
.gx-btn.is-solid { background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px #fff3f0; color: #000 !important; }
.gx-btn.is-solid:hover { background: #fff3f0; }
.gx-note { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.gx-note .gx-ic { width: 14px; height: 14px; color: #a3e7b4; }
/* messages */
.gx-thread { display: flex; flex-direction: column; gap: 10px; }
.gx-day { margin: 4px 0 0 !important; color: var(--gx-faint); font-size: 10px; letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.gx-msg { display: flex; align-items: flex-end; gap: 10px; max-width: 80%; }
.gx-msg > div { display: flex; flex-direction: column; gap: 3px; }
.gx-msg p { padding: 9px 14px; border-radius: 14px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--gx-edge); color: var(--gx-tx); font-size: 13px; line-height: 1.5; }
.gx-msg time { color: var(--gx-faint); font-size: 10.5px; }
.gx-msg.is-client { flex-direction: row-reverse; align-self: flex-end; }
.gx-msg.is-client > div { align-items: flex-end; }
.gx-msg.is-client p { background: rgba(255, 243, 240, .9); box-shadow: none; color: #111; }
/* narrower placements, the sidebar slims then goes, the columns stack */
@container gx (max-width: 820px) {
  .gx-side { width: 164px; padding: 16px 10px; }
  .gx-body { padding: 16px 18px; }
  .gx-top { padding: 0 18px; }
  .gx-stat { padding: 12px 14px; }
  .gx-stat b { font-size: 19px; }
  .gx-stat span { font-size: 11px; }
  .gx-demo { display: none; }
}
@container gx (max-width: 640px) {
  .gx-side { display: none; }
  .gx-cols { grid-template-columns: 1fr; gap: 0; margin-top: 16px; }
  .gx-cols .gx-col + .gx-col { margin-top: 18px; }
}
@container gx (max-width: 420px) {
  .gx { font-size: 12px; }
  .gx-top { gap: 8px; height: 48px; padding: 0 14px; }
  .gx-crumb { overflow: hidden; text-overflow: ellipsis; }
  .gx-crumb b { font-size: 13.5px; }
  .gx-crumb > span, .gx-crumb i { display: none; }
  .gx-who .gx-av:not(.gx-av-w) { display: none; }
  .gx-body { padding: 14px; }
  .gx-stats { grid-template-columns: 1fr 1fr 1fr; }
  .gx-stat { padding: 10px; }
  .gx-stat b { font-size: 16px; }
  .gx-stat span { font-size: 10px; white-space: normal; line-height: 1.35; }
  .gx-rev b, .gx-news b { font-size: 12.5px; }
  .gx-rev span:not(.gx-tag), .gx-news > span { font-size: 11px; }
  .gx-msg { max-width: 92%; }
}
/* in the hero window the pane is the glass, the UI fills it edge to edge */
.pd-hero .pd-app.has-gx { padding: 0; background: rgba(23, 23, 23, .78); }
@media (min-width: 601px) and (max-width: 809px) { .pd-hero { --ah: calc(var(--aw) * .75); } }
@media (max-width: 600px) { .pd-hero { --ah: calc(var(--aw) * 1.15 + .48 * var(--sh)); } }

/* ---------- What you get, Powder's stacked cards with the glass app UI, 2026-10-11 ----------
   Each card sits in a shell that sticks 120px from the top, the next card
   slides over it, the covered card stays at full strength under it (the
   shrink and fade went in the calm pass, 2026-10-12). Text on one side, a dune scene full bleed on the other with
   the Wedge app drawn natively (appUI) floating on it as dark glass */
.pd-stack { gap: 48px; }
.pd-gshell { position: sticky; top: 120px; padding: 8px; border-radius: 24px; background: #000; box-shadow: inset 0 0 0 1px var(--pd-edge); }
.pd-get .pd-gcard { min-height: 628px; padding: 8px; border-radius: 16px; background: rgba(15, 15, 15, .85); border: 1px solid rgba(255, 255, 255, .1); transform-origin: 50% 0; }
.pd-gcard .pd-row-tx { --pd-tx: #fff3f0; --pd-mid: rgba(255, 255, 255, .8); --pd-dim: rgba(255, 255, 255, .62); }
.pd-gscene { position: relative; margin: 0; min-height: 100%; overflow: clip; border-radius: 4px 8px 8px 4px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.pd-gcard.rev .pd-gscene { border-radius: 8px 4px 4px 8px; }
.pd-gbg, .pd-gbg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
/* the far hills' own flat ridge fades into the sky, as in the page heads */
:is(.pd-gbg, .pd-tscene) img + img { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 49%, rgb(0 0 0 / .3) 53%, rgb(0 0 0 / .75) 58%, #000 64%); mask-image: linear-gradient(180deg, transparent 0, transparent 49%, rgb(0 0 0 / .3) 53%, rgb(0 0 0 / .75) 58%, #000 64%); }
.pd-gwin { position: absolute; left: 11%; right: 11%; top: 13%; bottom: -1px; overflow: hidden; border-radius: 28px 28px 0 0; background: rgba(23, 23, 23, .78); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.pd-gscene figcaption { position: absolute; left: 16px; top: 14px; z-index: 1; padding: 5px 10px; border-radius: 99px; background: rgba(0, 0, 0, .7); color: rgba(255, 255, 255, .7); font-size: 12px; }
/* the closing window is the same glass with the app drawn in it */
.pd-close-lag.has-gx { padding: 0; background: rgba(23, 23, 23, .78); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 60px rgba(0, 0, 0, .35); }
@media (max-width: 1100px) and (min-width: 901px) { .pd-get .pd-gcard { min-height: 480px; } }
@media (max-width: 900px) {
  .pd-gshell { position: relative; top: auto; padding: 6px; border-radius: 20px; }
  .pd-get .pd-gcard { min-height: 0; }
  .pd-gscene { order: -1; aspect-ratio: 318 / 337; border-radius: 8px 8px 4px 4px; }
  .pd-gcard.rev .pd-gscene { border-radius: 8px 8px 4px 4px; }
  .pd-gwin { left: 8%; right: 8%; top: 16%; border-radius: 18px 18px 0 0; }
}
/* the tab's screen at full clarity, Powder's window on the dusk scene, an
   8px inset frame with a soft light edge, top corners rounded, sinking into
   the panel's foot. Nothing dims, blurs or fades it at rest (David 2026-10-11) */
.pd-tshot { left: 9%; right: 9%; top: 9%; bottom: auto; width: auto; translate: none; padding: 8px 8px 0; border-radius: 20px 20px 0 0; background: rgba(23, 23, 23, .78); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .2); }
.pd-tshot > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; border-radius: 12px 12px 0 0; opacity: 1; filter: none; scale: 1; translate: none; }
.pd-tablist button[aria-selected="false"]::before { opacity: 0; }
@media (max-width: 900px) { .pd-tframe { aspect-ratio: 16 / 11; } .pd-tshot { left: 6%; right: 6%; top: 8%; padding: 6px 6px 0; border-radius: 14px 14px 0 0; } .pd-tshot > img { border-radius: 9px 9px 0 0; } }
/* Powder's measured interactions on home, 2026-10-11. The border glow reads
   motion.js's preset (--gs radius, --gc colour, --go proximity), the numbers
   row holds still with the words on it (its tilt went in the calm pass), only
   the clouds on top drift with the pointer, each scene bleeds past its card */
.pd-nscene > div { position: absolute; inset: -12%; }
.pd-nscene > div img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) [data-glow]::before { background: radial-gradient(var(--gs, 735px) circle at var(--gx, -999px) var(--gy, -999px), rgba(0, 0, 0, .22), transparent 70%); } }
/* ==========================================================================
   Client sign in, 2026-10-11. Per David, "place a well-designed button for
   the clients to click to manage the project or sign in" and "a login page
   for the client to manage their product", frontend only for now.
   1. The way in, Client login. A quiet ghost pill left of Book a call that
      starts one step below it (no fill, Book a call sits at .1), fills on
      hover, and a row of its own in the phone menu. Never on pitch pages.
   2. /sign-in/, the card alone on the full screen dusk scene. Powder's
      glass window (rgba(23,23,23,.85), blur 24, 1px .1 ring, radius 24) in
      an 8px shell, Powder's L Primary and secondary buttons and its chip.
      The scene, its fade and the window's top hairline are the licensed
      Powder material, nothing else here is a gradient.
   ========================================================================== */
.nb-end { justify-self: end; display: flex; align-items: center; gap: 8px; }
.nb-client { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 16px 0 13px; border-radius: 99px; background: transparent; box-shadow: inset 0 0 0 1px var(--nb-cta-edge); color: var(--nb-mid); font: 400 14px/1 var(--sans); letter-spacing: -.02em; white-space: nowrap; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); transition: background-color 250ms cubic-bezier(.22, 1, .36, 1), color 250ms cubic-bezier(.22, 1, .36, 1); }
.nb-client:is(:hover, [aria-current]) { background: var(--nb-cta); color: var(--nb-tx); }
.nb-client:active { scale: .96; }
.nb-ci { width: 16px; height: 16px; flex: none; }
/* where the bar is tight the pill keeps its icon and the words stay for screen readers */
@media (min-width: 861px) and (max-width: 1140px) {
  .nb-client { width: 36px; padding: 0; }
  .nb-client span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 860px) { .nb-end { display: none; } }

/* the page, the scene fills the screen behind the card */
.art.signin-page { position: relative; isolation: isolate; max-width: none; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; margin: 0; padding: 112px 24px 96px; }
.sg-scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #010101;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 120px), rgb(0 0 0 / .8) calc(100% - 84px), rgb(0 0 0 / .45) calc(100% - 48px), rgb(0 0 0 / .15) calc(100% - 20px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 120px), rgb(0 0 0 / .8) calc(100% - 84px), rgb(0 0 0 / .45) calc(100% - 48px), rgb(0 0 0 / .15) calc(100% - 20px), transparent); }
.sg-sky { position: absolute; inset: 0; background: radial-gradient(200% 83% at 50% 0, #1b2228 0%, #353f44 42%, #d39794 100%); }
.sg-l { position: absolute; left: 50%; bottom: 0; width: max(100vw, 1000px); translate: -50% 0; }
.sg-l img { display: block; width: 100%; height: auto; }
.sg-far { bottom: 0; }
.sg-near { bottom: -5%; }
.sg-shrubs { bottom: -2%; }

/* the colours, Powder's dark glass, and a light frosted card for the light theme over the same dusk */
.sg-shell {
  --sg-tx: #fff3f0; --sg-mid: rgba(255, 255, 255, .8); --sg-dim: rgba(255, 255, 255, .62); --sg-line: rgba(255, 255, 255, .1); --sg-ink: #171717;
  --sg-field: rgba(255, 255, 255, .04); --sg-edge: rgba(255, 255, 255, .12); --sg-edge-h: rgba(255, 255, 255, .24); --sg-focus: rgba(255, 243, 240, .75); --sg-ring: rgba(255, 243, 240, .14); --sg-af: #222;
  --sg-pri: rgba(255, 255, 255, .8); --sg-pri-h: #fff3f0; --sg-pri-edge: #fff3f0; --sg-pri-tx: #000;
  --sg-sec: rgba(255, 255, 255, .1); --sg-sec-h: rgba(255, 255, 255, .25); --sg-sec-edge: rgba(255, 255, 255, .1);
  --sg-err: #ffb4a6; --sg-err-edge: rgba(255, 150, 130, .7); --sg-err-ring: rgba(255, 140, 120, .18); --sg-err-bg: rgba(255, 120, 100, .1); --sg-note: rgba(255, 255, 255, .06);
  --sg-card: rgba(23, 23, 23, .85); --sg-shell: rgba(0, 0, 0, .3); --sg-shell-edge: rgba(255, 255, 255, .06); --sg-hl: .6;
}
:root[data-theme="light"] .sg-shell {
  --sg-tx: #17140f; --sg-mid: rgba(0, 0, 0, .76); --sg-dim: rgba(0, 0, 0, .58); --sg-line: rgba(0, 0, 0, .1); --sg-ink: #faf9f6;
  --sg-field: #fff; --sg-edge: rgba(0, 0, 0, .14); --sg-edge-h: rgba(0, 0, 0, .28); --sg-focus: #17140f; --sg-ring: rgba(23, 20, 15, .12); --sg-af: #fff;
  --sg-pri: #17140f; --sg-pri-h: #000; --sg-pri-edge: #17140f; --sg-pri-tx: #fff3f0;
  --sg-sec: rgba(0, 0, 0, .04); --sg-sec-h: rgba(0, 0, 0, .09); --sg-sec-edge: rgba(0, 0, 0, .12);
  --sg-err: #b42318; --sg-err-edge: #d4452f; --sg-err-ring: rgba(212, 69, 47, .14); --sg-err-bg: rgba(212, 69, 47, .07); --sg-note: rgba(0, 0, 0, .04);
  --sg-card: rgba(250, 249, 246, .92); --sg-shell: rgba(255, 255, 255, .16); --sg-shell-edge: rgba(255, 255, 255, .28); --sg-hl: 1;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .sg-shell {
  --sg-tx: #17140f; --sg-mid: rgba(0, 0, 0, .76); --sg-dim: rgba(0, 0, 0, .58); --sg-line: rgba(0, 0, 0, .1); --sg-ink: #faf9f6;
  --sg-field: #fff; --sg-edge: rgba(0, 0, 0, .14); --sg-edge-h: rgba(0, 0, 0, .28); --sg-focus: #17140f; --sg-ring: rgba(23, 20, 15, .12); --sg-af: #fff;
  --sg-pri: #17140f; --sg-pri-h: #000; --sg-pri-edge: #17140f; --sg-pri-tx: #fff3f0;
  --sg-sec: rgba(0, 0, 0, .04); --sg-sec-h: rgba(0, 0, 0, .09); --sg-sec-edge: rgba(0, 0, 0, .12);
  --sg-err: #b42318; --sg-err-edge: #d4452f; --sg-err-ring: rgba(212, 69, 47, .14); --sg-err-bg: rgba(212, 69, 47, .07); --sg-note: rgba(0, 0, 0, .04);
  --sg-card: rgba(250, 249, 246, .92); --sg-shell: rgba(255, 255, 255, .16); --sg-shell-edge: rgba(255, 255, 255, .28); --sg-hl: 1;
} }

/* the shell and the glass card, the blur sits on the shell so the card reads as frosted glass over the scene */
.sg-shell { position: relative; z-index: 1; width: min(100%, 456px); padding: 8px; border-radius: 32px; background: var(--sg-shell); box-shadow: inset 0 0 0 1px var(--sg-shell-edge); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.sg-card { position: relative; display: grid; padding: 40px 36px 28px; border-radius: 24px; background: var(--sg-card); box-shadow: inset 0 0 0 1px var(--sg-line); color: var(--sg-mid); font-family: var(--sans); letter-spacing: -.01em; }
.sg-card::before { content: ''; position: absolute; top: 0; left: 32px; right: 32px; height: 1px; background: #fff3f0; opacity: var(--sg-hl); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 50%, transparent 100%); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .sg-shell { animation: sg-in 700ms cubic-bezier(.22, 1, .36, 1) backwards; } }
@keyframes sg-in { from { opacity: 0; translate: 0 16px; } }

/* the head, the mark, Wedge and a Client chip, then the heading and its line */
.sg-brand { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--sg-tx); font: 600 16px/1 var(--sans); letter-spacing: -.012em; }
.sg-brand .mark { width: 24px; height: 24px; fill: currentColor; }
.sg-tag { display: inline-flex; align-items: center; height: 22px; margin-left: 2px; padding: 0 9px; border-radius: 99px; background: var(--sg-sec); box-shadow: inset 0 0 0 1px var(--sg-sec-edge); color: var(--sg-mid); font: 500 12px/1 var(--sans); letter-spacing: 0; }
.sg-card h1 { margin: 28px 0 0; color: var(--sg-tx); font: 500 28px/1.35 var(--disp, var(--sans)); letter-spacing: -.03em; text-align: center; text-wrap: balance; }
.sg-sub { margin: 8px auto 0; max-width: 32ch; color: var(--sg-dim); font-size: 15px; line-height: 1.5; text-align: center; text-wrap: balance; }

/* the fields, a label, a 48px input and its error underneath */
.sg-field { display: grid; gap: 8px; margin-top: 16px; }
.sg-sub + .sg-nojs + .sg-field { margin-top: 32px; }
.sg-field label { justify-self: start; color: var(--sg-mid); font: 500 14px/1.4 var(--sans); }
.sg-field input { width: 100%; height: 48px; margin: 0; padding: 0 16px; border: 1px solid var(--sg-edge); border-radius: 12px; background: var(--sg-field); color: var(--sg-tx); font: 400 16px/1 var(--sans); letter-spacing: -.01em; caret-color: var(--sg-tx); outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--sg-af-sh, 0 0 #0000), var(--sg-ring-sh, 0 0 #0000); -webkit-appearance: none; appearance: none; transition: border-color 200ms ease-out, box-shadow 200ms ease-out; }
.sg-field input::placeholder { color: var(--sg-dim); opacity: .7; }
.sg-field input:hover { border-color: var(--sg-edge-h); }
.sg-field input:focus { border-color: var(--sg-focus); --sg-ring-sh: 0 0 0 4px var(--sg-ring); }
.sg-field.bad input { border-color: var(--sg-err-edge); }
.sg-field.bad input:focus { --sg-ring-sh: 0 0 0 4px var(--sg-err-ring); }
.sg-field input:-webkit-autofill { -webkit-text-fill-color: var(--sg-tx); --sg-af-sh: inset 0 0 0 100px var(--sg-af); transition: border-color 200ms ease-out, box-shadow 200ms ease-out, background-color 9999s; }
.sg-err { display: flex; align-items: flex-start; gap: 7px; margin: 0; color: var(--sg-err); font-size: 13.5px; line-height: 1.45; }
.sg-err:empty { display: none; }
.sg-err::before { content: '!'; flex: none; display: grid; place-items: center; width: 15px; height: 15px; margin-top: 2px; border-radius: 50%; background: var(--sg-err); color: var(--sg-ink); font: 700 10px/1 var(--sans); }
.sg-pw { position: relative; }
.sg-pw input { padding-right: 52px; }
.sg-eye { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--sg-dim); cursor: pointer; transition: color 200ms ease-out; }
.sg-eye:hover, .sg-eye[aria-pressed="true"] { color: var(--sg-tx); }
.sg-eye svg { width: 20px; height: 20px; }
.sg-slash { stroke-dasharray: 23; stroke-dashoffset: 23; transition: stroke-dashoffset 250ms cubic-bezier(.22, 1, .36, 1); }
.sg-eye[aria-pressed="true"] .sg-slash { stroke-dashoffset: 0; }
.sg-forgot { margin: 10px 0 0; text-align: right; font-size: 14px; line-height: 1; }
.sg-card :is(.sg-forgot, .sg-foot, .sg-note, .sg-nojs) a { color: var(--sg-mid); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color 200ms ease-out, text-decoration-color 200ms ease-out; }
.sg-card :is(.sg-forgot, .sg-foot) a:hover { color: var(--sg-tx); text-decoration-color: currentColor; }
.sg-forgot a { display: inline-flex; align-items: center; min-height: 32px; }

/* the buttons, Powder's L Primary and L Secondary at full width */
.sg-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; margin: 0; padding: 0 24px; border-radius: 768px; font: 500 15px/1 var(--sans); letter-spacing: -.01em; cursor: pointer; transition: background-color 250ms cubic-bezier(.22, 1, .36, 1), color 250ms cubic-bezier(.22, 1, .36, 1), opacity 200ms ease-out; }
.sg-pri { margin-top: 16px; border: 1px solid var(--sg-pri-edge); background: var(--sg-pri); color: var(--sg-pri-tx); }
.sg-sec { border: 1px solid var(--sg-sec-edge); background: var(--sg-sec); color: var(--sg-tx); }
.sg-pri:hover { background: var(--sg-pri-h); }
.sg-sec:hover { background: var(--sg-sec-h); }
.sg-btn:active:not([aria-disabled="true"], :disabled) { scale: .98; }
.sg-card :is(.sg-btn, .sg-eye, a):focus-visible { outline: 2px solid var(--sg-focus); outline-offset: 3px; }
.sg-card .sg-eye:focus-visible { outline-offset: -4px; }
.sg-card a:focus-visible { border-radius: 4px; }
/* waiting and disabled. The pressed button spins, the other steps back, neither answers a hover */
.sg-btn:is([aria-disabled="true"], :disabled) { cursor: not-allowed; }
.sg-btn:is([aria-disabled="true"], :disabled):not(.busy) { opacity: .42; }
.sg-pri:is([aria-disabled="true"], :disabled) { background: var(--sg-pri); }
.sg-sec:is([aria-disabled="true"], :disabled) { background: var(--sg-sec); }
.sg-btn.busy { cursor: progress; }
.sg-spin { display: none; width: 16px; height: 16px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.sg-btn.busy .sg-spin { display: block; }
@media (prefers-reduced-motion: no-preference) { .sg-btn.busy .sg-spin { animation: sg-spin 700ms linear infinite; } }
@keyframes sg-spin { to { rotate: 360deg; } }
.sg-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin: 18px 0; color: var(--sg-dim); font-size: 13px; line-height: 1; }
.sg-or::before, .sg-or::after { content: ''; height: 1px; background: var(--sg-line); }

/* the notice, info in a quiet well, the error tone for the real sign in failing later */
.sg-note { position: relative; margin: 18px 0 0; padding: 13px 16px 13px 44px; border-radius: 14px; background: var(--sg-note); box-shadow: inset 0 0 0 1px var(--sg-line); color: var(--sg-mid); font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.sg-note::before { content: 'i'; position: absolute; top: 15px; left: 16px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; color: var(--sg-tx); font: 600 11px/1 var(--sans); }
.sg-card .sg-note a { color: var(--sg-tx); text-decoration-color: currentColor; }
.sg-note[data-tone="error"] { background: var(--sg-err-bg); box-shadow: inset 0 0 0 1px var(--sg-err-edge); color: var(--sg-tx); }
.sg-note[data-tone="error"]::before { content: '!'; box-shadow: none; background: var(--sg-err); color: var(--sg-ink); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .sg-note { animation: sg-rise 300ms cubic-bezier(.22, 1, .36, 1) backwards; }
  .sg-err:not(:empty) { animation: sg-rise 200ms ease-out backwards; }
}
@keyframes sg-rise { from { opacity: 0; translate: 0 6px; } }

/* the foot, a hairline and two quiet lines */
.sg-foot { display: grid; gap: 4px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--sg-line); text-align: center; }
.sg-foot p { margin: 0; color: var(--sg-dim); font-size: 14px; line-height: 1.6; }

/* without the script the card says so and keeps its way to help */
.sg-nojs { display: none; }
html:not(.js) .sg-nojs { display: block; margin: 24px 0 0; color: var(--sg-mid); font-size: 15px; line-height: 1.5; text-align: center; }
html:not(.js) .sg-nojs a { color: var(--sg-tx); text-decoration-color: currentColor; }
html:not(.js) .sg-card :is(.sg-field, .sg-forgot, .sg-btn, .sg-or, .sg-live) { display: none; }

/* phones, the card runs edge to edge inside 16px gutters with the scene around it, every target 44px */
@media (max-width: 600px) {
  .art.signin-page { padding: 84px 16px 64px; }
  .sg-card { padding: 28px 20px 16px; }
  .sg-card h1 { margin-top: 20px; font-size: 24px; }
  .sg-sub { font-size: 14.5px; }
  .sg-sub + .sg-nojs + .sg-field { margin-top: 24px; }
  .sg-foot { margin-top: 20px; padding-top: 12px; }
}
@media (max-width: 600px), (pointer: coarse) {
  .sg-forgot a { min-height: 44px; }
  .sg-foot a { display: inline-flex; align-items: center; min-height: 44px; }
  .sg-foot { gap: 0; }
}

/* ---------- why hover, 2026-10-11 ----------
   Each Why drawing answers a hover with its own small motion (the parts are
   grouped in isoArt in build.mjs). State moves (lifts, slides, growth, the
   brighter strokes) follow --h, 0 at rest and 1 on hover, and ease back on
   leave. One shot moves (redraws, a lit cell, a glint, the floor lines'
   pulse) play once per hover. Only group transforms, opacity and a glint's
   dash move, so the scroll draw-in on the paths is never touched (the card
   itself no longer tilts, calm pass). Touch screens play each card once after its draw-in, then it
   rests. Reduced motion gets none of it. */
@property --h { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --r { syntax: '<number>'; inherits: false; initial-value: 1; }
.pd-iso .hl, .pd-iso .gw { stroke: none; }
.pd-iso .hl { fill: var(--pd-f3); }
.pd-iso .gw { fill: var(--pd-tx); opacity: 0; }
.pd-iso .hv-fl { opacity: 0; }
.pd-iso .gl { fill: none; stroke: var(--pd-tx); stroke-width: 1.5; stroke-linecap: round; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pd-iso { --hv-e: cubic-bezier(.22, 1, .36, 1); --hb: 0ms; --hf: both; --x-h: none; --x-rd: none; --x-fl: none; --x-hop: none; --x-in: none; --x-gl: none; --x-pl: none; }
  .pd-iso :is(.hv-m, .hv-sk, .hv-rx, .hv-ra) { transform-box: view-box; }
  .pd-iso .hv-m { --tx: 0px; --ty: 0px; --rz: 0deg; transform: translate(calc(var(--h) * var(--tx)), calc(var(--h) * var(--ty))) rotate(calc(var(--h) * var(--rz))); }
  .pd-iso .hv-sk { transform: skewY(atan(calc(var(--h) * var(--k)))) scaleY(calc(1 + var(--h) * var(--g))); }
  .pd-iso .hv-rx { transform: scaleX(var(--r)) skewY(atan(calc((var(--r) - 1) * .57735))); }
  .pd-iso .hv-ra { transform: rotate(var(--a)) scaleX(var(--r)) rotate(calc(var(--a) * -1)); }
  .pd-iso .ln { opacity: calc(.7 + var(--h) * .25); }
  .pd-iso .gd { opacity: calc(.25 + var(--h) * .12); animation: var(--x-pl) 900ms ease-out var(--hb) both; }
  .pd-iso .gw { opacity: calc(var(--h) * .22); }
  /* leaving eases back together and a little quicker than the way in */
  .pd-iso :is(.hv, .hv-s) { --h: 0; transition: --h 500ms var(--hv-e); animation: var(--x-h) 1800ms linear calc(var(--hb) + var(--hd, 0ms)) both; }
  .pd-iso :is(.hv-rx, .hv-ra) { animation: var(--x-rd) 520ms var(--hv-e) calc(var(--hb) + var(--hd, 0ms)) var(--hf); }
  .pd-iso .hv-in { animation: var(--x-in) 560ms var(--hv-e) calc(var(--hb) + var(--hd, 0ms)) var(--hf); }
  .pd-iso .hv-fl { animation: var(--x-fl) 760ms var(--hv-e) calc(var(--hb) + var(--hd, 0ms)) both; }
  .pd-iso .hv-hop { animation: var(--x-hop) 640ms var(--hv-e) var(--hb) both; }
  .pd-iso .gl { animation: var(--x-gl) 820ms cubic-bezier(.42, 0, .58, 1) calc(var(--hb) + var(--hd, 0ms)) both; }
  @media (hover: hover) and (pointer: fine) {
    .pd-wcard:is(:hover, :focus-within) .pd-iso { --x-rd: hv-rd; --x-in: hv-in; --x-fl: hv-fl; --x-hop: hv-hop; --x-gl: hv-gl; --x-pl: hv-pl; }
    .pd-wcard:is(:hover, :focus-within) .pd-iso :is(.hv, .hv-s) { --h: 1; transition: --h 650ms var(--hv-e) var(--hd, 0ms); }
  }
  /* touch, once after the 2s draw-in, there and back */
  @media (hover: none), (pointer: coarse) {
    .pd-iso.mo-in { --hb: 2100ms; --hf: forwards; --x-h: hv-once; --x-rd: hv-rd; --x-in: hv-in; --x-fl: hv-fl; --x-hop: hv-hop; --x-gl: hv-gl; --x-pl: hv-pl; }
  }
}
@keyframes hv-once { 0% { --h: 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } 35% { --h: 1; } 65% { --h: 1; animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 100% { --h: 0; } }
@keyframes hv-rd { from { --r: 0; } to { --r: 1; } }
@keyframes hv-in { from { opacity: .1; transform: translateY(5px); } }
@keyframes hv-fl { 30% { opacity: .9; } 100% { opacity: 0; } }
@keyframes hv-hop { 40% { transform: translateY(-7px); } }
@keyframes hv-gl { 0% { opacity: 0; stroke-dasharray: 18px 999px; stroke-dashoffset: 18px; } 15%, 80% { opacity: .85; } 100% { opacity: 0; stroke-dasharray: 18px 999px; stroke-dashoffset: calc(var(--L) * -1px); } }
@keyframes hv-pl { 35% { opacity: .55; } }

/* ==================== load in, 2026-10-12 ====================
   David, "everything just appears ... it just doesn't look proper". The head
   marks the page mo-pre before the first paint, which holds the load in
   pieces at opacity 0. motion.js swaps it for mo-go once Inter and the hero
   images are decoded (at most 600ms after it runs), and the head does the
   same 2.5s in if motion.js never arrives, so nothing can stay hidden.
   Without JS and under reduced motion none of this applies.

   Home, about 1.4s, calm like Powder. The sky fades up, the far and near
   hills rise 72 and 48px, the nav settles, the copy follows from motion.js
   (chip, the headline line by line, the lede, the buttons, 80ms apart), the
   glass window rises and sharpens, the shrubs settle 36px last. Other pages,
   the dusk band fades up and the title, lede and first content rise.
   Images below the fold fade in once decoded on a quiet placeholder. */
@media (prefers-reduced-motion: no-preference) {
  html { --ld-e: cubic-bezier(.16, 1, .3, 1); }
  html.mo-pre :is(.pd-scene, .pd-far, .pd-near, .pd-front, .pd-app, .nb, .pd-band, [data-hero-copy] > *, [data-reveal], [data-words], [data-draw], [data-count]) { opacity: 0; }
  html.mo-go .pd-scene, html.mo-go .pd-band { animation: ld-fade .8s var(--ld-e) backwards; }
  html.mo-go .pd-far { --ld-y: 72px; animation: ld-rise .8s var(--ld-e) backwards; }
  html.mo-go .pd-near { --ld-y: 48px; animation: ld-rise .8s var(--ld-e) 80ms backwards; }
  html.mo-go .nb { animation: ld-nav .8s var(--ld-e) 120ms backwards; }
  html.mo-go .pd-app { animation: ld-app .9s var(--ld-e) 600ms backwards; }
  html.mo-go .pd-front { --ld-y: 36px; animation: ld-rise .7s var(--ld-e) 740ms backwards; }
  /* a page swapped in by site/nav-router.js (html.mo-swap) gets the short entrance only, the scene or band fades and its reveals rise, the home hills, window and shrubs are simply there */
  html.mo-swap :is(.pd-far, .pd-near, .pd-app, .pd-front) { animation: none; }
  /* the safety path, motion.js never ran, so the copy and every reveal arrive here instead */
  html.mo-go:not(.mo-on) :is([data-hero-copy] > *, [data-reveal]) { --ld-y: 24px; animation: ld-rise .8s var(--ld-e) 180ms backwards; }
  html.mo-go:not(.mo-on) [data-hero-copy] > :nth-child(2) { animation-delay: 260ms; }
  html.mo-go:not(.mo-on) [data-hero-copy] > :nth-child(3) { animation-delay: 420ms; }
  html.mo-go:not(.mo-on) [data-hero-copy] > :nth-child(4) { animation-delay: 500ms; }
  /* images and posters that load after the page, a fade once decoded, never a pop or a shimmer */
  html.mo-on .mo-img { transition: opacity .6s cubic-bezier(.22, 1, .36, 1); }
  html.mo-on .mo-img:not(.mo-ok) { opacity: 0; }
  html.mo-on .mo-ph { background-color: color-mix(in srgb, currentColor 6%, transparent); transition: background-color .6s ease; }
}
/* a fallback sized to Inter, so the swap when Inter arrives barely moves a line (no layout shift).
   Arial scaled per weight to Inter's width at its common sizes, measured in Chromium, ascent and descent are Inter's */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 100 450; size-adjust: 106%; ascent-override: 91.4%; descent-override: 22.8%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 451 550; size-adjust: 100%; ascent-override: 96.9%; descent-override: 24.2%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 551 900; size-adjust: 94%; ascent-override: 103.1%; descent-override: 25.8%; line-gap-override: 0%; }
:root { --disp: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; --sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; }
@keyframes ld-fade { from { opacity: 0; } }
@keyframes ld-rise { from { opacity: 0; transform: translateY(var(--ld-y, 24px)); } }
@keyframes ld-nav { from { opacity: 0; transform: translateY(-36px); } }
@keyframes ld-app { from { opacity: 0; transform: translateY(40px); filter: blur(8px); } }

/* ---------- site chrome, rebuilt in home's language, 2026-10-11 ----------
   One button system (Powder's L Primary and L Secondary, as home's hero),
   one focus ring, the footer's copy and theme buttons, selection, the
   scrollbars, the skip link and print. Dark values first, then their light
   twins, then every dusk surface takes the dark values back in both themes,
   so a button or a ring on a scene reads the same whatever the theme. */
:root {
  --ease-pw: cubic-bezier(.22, 1, .36, 1);
  --focus: #fff3f0;
  --btn-1: rgba(255, 255, 255, .8); --btn-1-h: #fff3f0; --btn-1-edge: #fff3f0; --btn-1-tx: #000;
  --btn-2: rgba(255, 255, 255, .1); --btn-2-h: rgba(255, 255, 255, .25); --btn-2-edge: rgba(255, 255, 255, .1); --btn-2-tx: #fff3f0;
  --ic-h: rgba(255, 255, 255, .1); --done: rgba(255, 243, 240, .12);
  --hl: rgba(255, 243, 240, .22); --hl-tx: #fff3f0;
  --scroll-thumb: rgba(255, 255, 255, .22); --scroll-track: #000;
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.25 8.4l3.1 3.1 6.4-7' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-theme="light"] {
  --focus: #17140f;
  --btn-1: #17140f; --btn-1-h: #34302a; --btn-1-edge: #17140f; --btn-1-tx: #fff3f0;
  --btn-2: rgba(0, 0, 0, .05); --btn-2-h: rgba(0, 0, 0, .1); --btn-2-edge: rgba(0, 0, 0, .1); --btn-2-tx: #17140f;
  --ic-h: rgba(0, 0, 0, .06); --done: rgba(23, 20, 15, .08);
  --hl: rgba(23, 20, 15, .14); --hl-tx: #17140f;
  --scroll-thumb: rgba(0, 0, 0, .25); --scroll-track: var(--bg);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --focus: #17140f;
  --btn-1: #17140f; --btn-1-h: #34302a; --btn-1-edge: #17140f; --btn-1-tx: #fff3f0;
  --btn-2: rgba(0, 0, 0, .05); --btn-2-h: rgba(0, 0, 0, .1); --btn-2-edge: rgba(0, 0, 0, .1); --btn-2-tx: #17140f;
  --ic-h: rgba(0, 0, 0, .06); --done: rgba(23, 20, 15, .08);
  --hl: rgba(23, 20, 15, .14); --hl-tx: #17140f;
  --scroll-thumb: rgba(0, 0, 0, .25); --scroll-track: var(--bg);
} }
/* the dusk surfaces, page heads, home's hero, the closing, the nav panels,
   the case stage and the skip link that sits over them */
:is(.pd-hero, .pd-band, .art-head, .pd-close, .nb-panel, .sb-head, .stage, .pd-ncard, .lv-pause, .skip) {
  --focus: #fff3f0;
  --btn-1: rgba(255, 255, 255, .8); --btn-1-h: #fff3f0; --btn-1-edge: #fff3f0; --btn-1-tx: #000;
  --btn-2: rgba(255, 255, 255, .1); --btn-2-h: rgba(255, 255, 255, .25); --btn-2-edge: rgba(255, 255, 255, .1); --btn-2-tx: #fff3f0;
  --ic-h: rgba(255, 255, 255, .1); --done: rgba(255, 243, 240, .12);
  --hl: rgba(255, 243, 240, .22); --hl-tx: #fff3f0;
}
@media (prefers-reduced-motion: reduce) { .skip { transition: none; } }
/* the M size, home's compact buttons, 36 tall, for the brief's sent screen */
.bf-btns :is(.pill, .ghost), .bf-when .pill { height: 36px; padding: 0 24px; }

/* text selection in the warm palette, never the browser's blue */
::selection { background: var(--hl); color: var(--hl-tx); }

/* scrollbars, thin and in the palette, none on the phone menu sheet */
html { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }

/* installed to a home screen the page draws under a black translucent status
   bar, so the bar steps below it and the shade behind it reaches the top.
   env() is 0 everywhere else, nothing moves on a desktop */
.nb { padding-top: env(safe-area-inset-top, 0px); }

/* ---------- print, dark type on white paper ----------
   No nav, no scenes, no closing band and no motion. Every reveal shows,
   headings read in the ink colour, and an outside link prints its address */
@media print {
  @page { margin: 16mm 14mm; }
  html, body { height: auto !important; background: #fff !important; color: #17140f !important; }
  html { scrollbar-width: auto; }
  :root, :root *, .art-head, .pd-close, .pd-hero, .stage {
    --tx: #17140f; --tx-mid: #3b3630; --tx-mut: #5c564d; --pd-tx: #17140f; --pd-mid: #3b3630; --pd-dim: #5c564d; --pd-faint: #77706a;
    --pd-card: #fff; --pd-card-2: #fff; --pd-card-hi: #fff; --pd-chip: #fff; --pd-edge: rgba(0, 0, 0, .14); --pd-edge-2: rgba(0, 0, 0, .2);
    --line: rgba(0, 0, 0, .14); --line-2: rgba(0, 0, 0, .2); --lg-filter: grayscale(1) brightness(0); --logo-dk: none; --logo-lt: block;
  }
  body * { text-shadow: none !important; box-shadow: none !important; }
  h1, h2, h3, h4, h5, h6, h1 *, h2 *, h3 *, h4 * { color: #17140f !important; -webkit-text-fill-color: #17140f !important; break-after: avoid; }
  p, li, dd, dt, figcaption, blockquote, small, span { color: #3b3630; }
  .nb, .skip, .pd-scene, .pd-band, .pd-l, .pd-front, .pd-dunes, .pd-close, .ft, .lv-try, .cmp-handle, .cmp-range, video::-webkit-media-controls { display: none !important; }
  [data-glow]::before, [data-glow]::after, .pd-hero .pd-stage, .pd-seg, .pd-tscene { display: none !important; }
  .pd-tframe { padding: 0 !important; }
  main [class*="scene"] { display: none !important; }
  .pd-rail-track { flex-wrap: wrap !important; margin-right: 0 !important; padding-right: 0 !important; overflow: visible !important; }
  /* every shell, card and glass panel prints as ink on paper, images stay */
  main :not(img, video, picture, canvas, svg, svg *) { background-color: transparent !important; background-image: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  main * { color: #17140f !important; -webkit-text-fill-color: currentColor !important; }
  main :is(p, li, figcaption, small, dd, td) { color: #3b3630 !important; }
  .pd-new-b { color: #17140f !important; }
  .art-head, .pd-hero, .stage, .art-wrap, .art, main { background: none !important; -webkit-mask-image: none !important; mask-image: none !important; color: #17140f !important; }
  .art-head, .pd-hero { padding-top: 0 !important; min-height: 0 !important; }
  [data-reveal], [data-words], [data-words] *, [data-draw], [data-count], [data-hero-copy] > *, .mo-img, [data-scroll-zoom], [data-scroll-rise], [data-stack] > * {
    opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important; filter: none !important; clip-path: none !important; animation: none !important; transition: none !important;
  }
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
  .fr, .fig, .shot, [class*="pd-card"] { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  img, svg, video, .fig, figure, .fr { break-inside: avoid; }
  .pill, .ghost { background: none !important; border: 1px solid #17140f !important; color: #17140f !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  main a[href^="http"]:not(.pill):not(.ghost):not(:has(img))::after, article a[href^="http"]:not(.pill):not(.ghost):not(:has(img))::after { content: " (" attr(href) ")"; font-size: .85em; color: #5c564d; word-break: break-all; }
}

/* ---------- the nav dropdowns, 2026-10-13 ----------
   Per David, "like the shosoft nav bar but in wedge studio style" (spec in
   wedge-redesign-audit/nav/SPEC.md). Work and Services open one dark glass
   card under the bar, aligned to the bar's content, groups of items with an
   icon, a title and one quiet line, a featured column and a strip along the
   foot. Hover opens after a short rest, the card morphs its height between
   the two, 200ms in and 150ms out. Phones get the same structure as a sheet. */
.nb { --nd-e: cubic-bezier(.22, 1, .36, 1); --nd-tx: #fff3f0; --nd-mid: rgba(255, 255, 255, .8); --nd-mut: rgba(255, 255, 255, .6); --nd-line: rgba(255, 255, 255, .08); --nd-hov: rgba(255, 255, 255, .06); }
/* the open trigger, a quiet pill in the bar's own tint, never a ring */
.nb-trig { position: relative; isolation: isolate; }
.nb-trig::before { content: ''; position: absolute; inset: 4px 8px; z-index: -1; border-radius: 99px; background: var(--nb-cta); opacity: 0; transition: opacity 150ms var(--nd-e); }
.nb-trig[aria-expanded="true"]::before { opacity: 1; transition-duration: 200ms; }
.nb-chev { opacity: .7; transition: transform 200ms var(--nd-e); }
.nb-trig[aria-expanded="true"] .nb-chev { transform: rotate(180deg); }
.nb-nav .nb-item:focus-visible { outline-offset: -4px; }

/* the card */
.nb-dd { position: absolute; top: calc(64px + env(safe-area-inset-top, 0px)); left: 50%; width: min(var(--pd-w), calc(100% - 2 * var(--gutter))); height: var(--nd-h, auto); translate: -50% 0; border-radius: 16px; background: rgba(17, 17, 17, .88); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 60px rgba(0, 0, 0, .4); color: var(--nd-mid);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 150ms var(--nd-e), transform 150ms var(--nd-e), visibility 0s linear 150ms, height 200ms var(--nd-e); }
/* the gap between the bar and the card still counts as inside, so the pointer can cross it */
.nb-dd::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; }
.nb[data-open="work"] .nb-dd, .nb[data-open="services"] .nb-dd, .nb[data-open="product"] .nb-dd { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms var(--nd-e), transform 200ms var(--nd-e), visibility 0s, height 200ms var(--nd-e); }
.nb-dd.nd-snap { transition: none !important; }
.nd-in { position: relative; height: 100%; overflow: hidden; border-radius: inherit; }
.nd-pn { position: absolute; top: 0; left: 0; right: 0; opacity: 0; visibility: hidden; transition: opacity 150ms var(--nd-e), transform 150ms var(--nd-e), visibility 0s linear 150ms; }
.nd-pn.on { opacity: 1; visibility: visible; transition: opacity 200ms var(--nd-e) 40ms, transform 200ms var(--nd-e) 40ms, visibility 0s; }
.nd-grid { display: grid; gap: 0 16px; padding: 20px 16px 16px; align-items: stretch; }
/* the featured column takes a little more than a list column, so it reads as a feature, and every gap is the panel's own 16px edge */
.nd-work .nd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr); }
.nd-svc .nd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.25fr); }
.nd-h { margin: 0 0 6px; padding: 0 12px; color: var(--nd-mut); font: 400 12.5px/18px var(--sans); letter-spacing: -.005em; }
.nd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nd-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--nd-tx); transition: background-color 150ms var(--nd-e); }
.nd-item:is(:hover, .is-pv, :focus-visible) { background: var(--nd-hov); transition-duration: 200ms; }
.nd-tx { display: grid; gap: 2px; min-width: 0; }
.nd-t { color: var(--nd-tx); font: 500 14px/20px var(--sans); letter-spacing: -.012em; }
.nd-l { color: var(--nd-mut); font: 400 13px/18px var(--sans); letter-spacing: -.005em; }
.nd-item[aria-current] .nd-t { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 4px; }
/* the icons, a line icon or the client's mark drawn as a mask in the text colour */
.nd-ic, .nb .nm { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--nd-mut); transition: color 150ms var(--nd-e); }
.nb .nm { display: block; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.nb .nm-t { display: grid; place-items: center; background: none; -webkit-mask: none; mask: none; border: 1.4px solid currentColor; border-radius: 5px; font: 600 10px/1 var(--sans); font-style: normal; }
.nd-item:is(:hover, .is-pv, :focus-visible) :is(.nd-ic, .nm) { color: var(--nd-tx); }
/* Work's featured column, the hovered study's still */
/* from the first row's top (under the 24px group heading) to the last row's foot, the grid's full height */
.nd-pv { display: flex; flex-direction: column; padding-top: 24px; }
.nd-frame { position: relative; flex: 1; min-height: 160px; overflow: hidden; border-radius: 12px; background: #1a1a1a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.nd-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transition: opacity 200ms var(--nd-e); }
.nd-frame img.on { opacity: 1; }
/* the caption, the study's name and kind on a quiet flat plate at the image's foot */
.nd-cap { position: absolute; left: 10px; bottom: 10px; z-index: 1; display: inline-flex; align-items: baseline; gap: 8px; max-width: calc(100% - 20px); margin: 0; padding: 7px 11px; border-radius: 8px; background: rgba(12, 12, 12, .78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-cap b { color: var(--nd-tx); font: 500 13px/16px var(--sans); letter-spacing: -.01em; }
.nd-cap span { color: var(--nd-mut); font: 400 12.5px/16px var(--sans); letter-spacing: -.005em; overflow: hidden; text-overflow: ellipsis; }
.nd-links { display: inline-flex; gap: 4px; }
.nd-frame::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); pointer-events: none; }
/* Services' featured column, the Process card */
.nd-card { display: grid; align-content: start; gap: 8px; margin-top: 24px; padding: 16px; border-radius: 12px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--nd-line); color: var(--nd-tx); transition: background-color 150ms var(--nd-e); }
.nd-card:hover { background: var(--nd-hov); transition-duration: 200ms; }
.nd-card .nd-h { margin: 0; padding: 0; }
.nd-ct { font: 500 16px/1.35 var(--sans); letter-spacing: -.015em; text-wrap: balance; }
.nd-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--nd-mid); font: 400 13.5px/1 var(--sans); }
/* the strip along the foot, one line and one link */
.nd-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 4px 16px 4px 28px; border-top: 1px solid var(--nd-line); background: rgba(255, 255, 255, .02); }
.nd-foot p { margin: 0; color: var(--nd-mut); font-size: 13px; line-height: 18px; }
.nd-more { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 99px; color: var(--nd-tx); font: 500 13.5px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; transition: background-color 150ms var(--nd-e); }
.nd-more:hover { background: var(--nd-hov); transition-duration: 200ms; }
.nd-ar { width: 12px; height: 12px; flex: none; transition: transform 150ms var(--nd-e); }
:is(.nd-more, .nd-card):hover .nd-ar { transform: translateX(2px); }
.nb .nb-dd :focus-visible, .nb .nb-menu :focus-visible { outline: 2px solid var(--nd-tx); outline-offset: -2px; border-radius: 10px; }
.nb .nb-dd .nd-more:focus-visible, .nb .nb-menu :is(.pill, .ghost, .nm-client):focus-visible { border-radius: 99px; outline-offset: 2px; }
/* the page behind an open Work or Services card, 2026-10-13. Per David
   ("when user opens this it should blur behind"), a soft blur and a light
   flat dim, on the card's own timing. The bar and the card sit above it,
   crisp. A press on it closes the card (site.js, outside the bar and card) */
.nb-scrim { position: fixed; inset: 0; z-index: 49; background: rgba(0, 0, 0, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity 150ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 150ms; }
.nb:is([data-open="work"], [data-open="services"], [data-open="product"]) + .nb-scrim { opacity: 1; visibility: visible; transition: opacity 200ms cubic-bezier(.22, 1, .36, 1), visibility 0s; }
@media (max-width: 860px) { .nb-scrim { display: none; } }
@media (prefers-reduced-motion: reduce) { .nb-scrim, .nb[data-open] + .nb-scrim { transition: none !important; } }

/* a narrower desktop keeps the three columns and lets the preview go */
@media (max-width: 1180px) {
  .nd-work .nd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nd-svc .nd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nd-pv { display: none; }
}
@media (min-width: 861px) and (max-width: 1060px) { .nb-trig::before { inset: 4px 2px; } .nd-grid { gap: 0 8px; padding-inline: 8px; } .nd-foot { padding-left: 20px; } }

/* ---------- the phone sheet ---------- */
.nb-menu { display: none; }
@media (max-width: 860px) {
  .nb-dd { display: none; }
  .nb-menu { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding-top: calc(68px + env(safe-area-inset-top, 0px)); background: rgba(12, 12, 12, .94); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); color: var(--nd-mid);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 150ms var(--nd-e), transform 150ms var(--nd-e), visibility 0s linear 150ms; }
  .nb[data-open="menu"] .nb-menu { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms var(--nd-e), transform 200ms var(--nd-e), visibility 0s; }
  .nb[data-open="menu"] .nb-bar { position: relative; z-index: 2; --nb-tx: #fff3f0; --nb-mid: rgba(255, 255, 255, .8); }
  html:has(.nb[data-open="menu"]) { overflow: hidden; }
  .nm-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 24px; scrollbar-width: none; }
  .nm-scroll::-webkit-scrollbar { display: none; }
  .nm-head, .nm-row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 60px; margin: 0; padding: 0 4px; border: 0; border-bottom: 1px solid var(--nd-line); background: none; color: var(--nd-tx); font: 500 18px/1.2 var(--sans); letter-spacing: -.018em; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .nm-row[aria-current], .nm-head[data-current] { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 5px; }
  .nm-head[data-current] .nm-chev { text-decoration: none; }
  .nm-chev { width: 14px; height: 14px; opacity: .6; transition: transform 200ms var(--nd-e); }
  .nm-head[aria-expanded="true"] .nm-chev { transform: rotate(180deg); }
  .nm-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 150ms var(--nd-e); }
  .nm-g.open .nm-body { grid-template-rows: 1fr; transition-duration: 200ms; }
  .nm-in { min-height: 0; overflow: hidden; opacity: 0; transition: opacity 150ms var(--nd-e); }
  .nm-g.open .nm-in { opacity: 1; transition-duration: 200ms; }
  .nm-g.open { border-bottom: 1px solid var(--nd-line); }
  .nm-g.open .nm-head { border-bottom-color: transparent; }
  .nm-in .nd-h { margin: 14px 0 2px; padding: 0 4px; }
  .nm-list { list-style: none; margin: 0; padding: 0; display: grid; }
  .nm-last { margin: 6px 0 14px; padding-top: 6px; border-top: 1px solid var(--nd-line); }
  .nm-item { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 6px 4px; border-radius: 10px; color: var(--nd-tx); -webkit-tap-highlight-color: transparent; }
  .nm-item:active { background: var(--nd-hov); }
  .nm-item[aria-current] .nd-t { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 4px; }
  .nm-plain { min-height: 48px; }
  .nm-plain .nd-t { color: var(--nd-mid); font-size: 15px; }
  .nm-tile { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .06); }
  .nm-tile :is(.nd-ic, .nm) { margin: 0; color: var(--nd-tx); }
  .nm-item .nd-t { font-size: 15.5px; line-height: 21px; }
  .nm-item .nd-l { font-size: 13.5px; }
  .nm-foot { display: grid; gap: 4px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--nd-line); }
  .nm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .nm-btns :is(.pill, .ghost) { height: 48px; padding: 0 12px; font-size: 15px; }
  .nb-menu .nm-client { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; justify-self: center; padding: 0 14px; color: var(--nd-mid); font-size: 14px; }
  .nb-menu .nm-client:is(:hover, [aria-current]) { color: var(--nd-tx); }
}
@media (prefers-reduced-motion: reduce) {
  .nb-dd, .nb[data-open] .nb-dd, .nd-pn, .nd-pn.on, .nd-frame img, .nb-trig::before, .nb-chev, .nb-mi i, .nb-menu, .nb[data-open] .nb-menu, .nm-body, .nm-in, .nm-chev, .nd-ar { transition: none !important; }
}
/* past the scene the card sits over the light page in the light theme, so it holds a touch more ink */
.nb.on-page .nb-dd { background: rgba(17, 17, 17, .94); }

/* ==================== the mark, Opening, 2026-10-13 ====================
   Per David, "ok let's do opening. apply through everything". The identity
   kit's motion (Work/Wedge/brand/logo-2026-10/final-opening/motion/
   wedge-motion.css), class wm on the inline svg from src/brand.mjs.
   Static it is the open mark. The nav and footer marks widen the cut from
   12 to 16 degrees on hover, and on a full page load the nav mark plays the
   opening once with the load in, held closed, then open in 600ms. Mono
   only, the mark is the text colour. Under reduced motion nothing turns. */
.wm { --wm-ease: cubic-bezier(.65, 0, .2, 1); display: block; overflow: visible; color: inherit; }
.wm-u, .wm-l { transform-box: view-box; transform-origin: 10px 90px; }
.wm-u { transform: rotate(-51deg); }
.wm-l { transform: rotate(-39deg); }
.wm-c { opacity: 0; }
/* geometry B, 2026-10-13. The rest path (.wm-s, cut tips r 3, hinge r 1.2)
   shows whenever the mark is still, the turning layer (.wm-g) only while it
   moves, and hands back once the cut has settled */
.wm-g { opacity: 0; }
@keyframes wm-on { from, to { opacity: 1; } }
@keyframes wm-off { from, to { opacity: 0; } }
@keyframes wm-u { from { transform: rotate(-45deg); } to { transform: rotate(-51deg); } }
@keyframes wm-l { from { transform: rotate(-45deg); } to { transform: rotate(-39deg); } }
@keyframes wm-c { 0% { opacity: 1; } 1%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .wm-hover .wm-u, .wm-hover .wm-l { transition: transform 280ms cubic-bezier(.16, 1, .3, 1); }
  .wm-hover:hover .wm-u, a:is(:hover, :focus-visible) > .wm-hover .wm-u { transform: rotate(-53deg); }
  .wm-hover:hover .wm-l, a:is(:hover, :focus-visible) > .wm-hover .wm-l { transform: rotate(-37deg); }
  .wm-hover .wm-g, .wm-hover .wm-s { transition: opacity 0s linear 280ms; }
  .wm-hover:hover .wm-g, a:is(:hover, :focus-visible) > .wm-hover .wm-g { opacity: 1; transition-delay: 0s; }
  .wm-hover:hover .wm-s, a:is(:hover, :focus-visible) > .wm-hover .wm-s { opacity: 0; transition-delay: 0s; }
  /* the reveal rides the nav's load in (ld-nav, 120ms in), fill backwards only so the hover still works after it */
  html.mo-go:not(.mo-swap) .nb-mark .wm-u { animation: wm-u 600ms var(--wm-ease) 360ms backwards; }
  html.mo-go:not(.mo-swap) .nb-mark .wm-l { animation: wm-l 600ms var(--wm-ease) 360ms backwards; }
  html.mo-go:not(.mo-swap) .nb-mark .wm-c { animation: wm-c 600ms linear 360ms backwards; }
  html.mo-go:not(.mo-swap) .nb-mark .wm-g { animation: wm-on 600ms linear 360ms backwards; }
  html.mo-go:not(.mo-swap) .nb-mark .wm-s { animation: wm-off 600ms linear 360ms backwards; }
}

/* ---------- native feature demos, 2026-10-13 ----------
   The home feature tabs draw each product in HTML in its own look, in place
   of a screenshot (src/feat-ui.mjs, David 2026-10-13). Each demo is laid out
   at a fixed design size (960 by 600, 440 by 540 on phones) and scaled to its
   window with a container unit, so it never reflows and text stays sharp.
   The markup is the settled final state. site/site.js adds .is-play when a
   tab opens, which hides what is still to come, then shows each [data-t]
   element and steps the states (.s-*) in turn. Only transform and opacity
   move. Reduced motion never plays, so it rests on the final state. */
@font-face { font-family: 'FX DM Sans'; src: url('/media/feat/dm-sans.woff2') format('woff2'); font-weight: 100 1000; font-style: normal; font-display: swap; }
.pd-tshot.has-fx { display: block; }
.fx-vp { position: relative; aspect-ratio: 960 / 600; overflow: hidden; border-radius: 12px 12px 0 0; background: #fff; container-type: inline-size; isolation: isolate; }
.fx { position: absolute; left: 0; top: 0; width: 960px; height: 600px; transform-origin: 0 0; scale: tan(atan2(100cqw, 960px)); display: flex; flex-direction: column; overflow: hidden; background: #fff; color: #111; font: 400 13px/1.45 var(--sans); letter-spacing: -.005em; text-align: left; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; cursor: pointer; }
html.js .pd-tp:not(.on):not(.fx-seen) .fx { content-visibility: hidden; }
.fx p { margin: 0; }
.fx b { font-weight: 600; }
.fx svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fx-ic { width: 14px; height: 14px; }
.fx-reset, .fx-reset * { transition: none !important; }
.fx [data-t] { transition: opacity 420ms ease-out, transform 560ms cubic-bezier(.22, 1, .36, 1); }
.fx.is-play [data-t]:not(.in) { opacity: 0; transform: translateY(8px); }
/* the browser bar every demo sits under */
.fx-bar { position: relative; z-index: 3; display: flex; align-items: center; flex: none; height: 34px; padding: 0 14px; background: #f3f3f1; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.fx-dots { display: flex; gap: 6px; }
.fx-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d9d9d6; }
.fx-url { position: absolute; left: 50%; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px; height: 22px; min-width: 220px; justify-content: center; padding: 0 14px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); color: #6b6b68; font-size: 11.5px; }
.fx-lock { width: 10px; height: 10px; stroke-width: 2; }
.fx-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
/* the cursor, placed every frame by site.js with translate, its tip at 3px 2.5px. The press scales about the tip, so the tip never leaves the target */
.fx-cur { position: absolute; left: 0; top: 0; z-index: 20; width: 20px; height: 24px; opacity: 0; translate: 700px 640px; transform-origin: 3px 2.5px; transition: opacity 300ms ease-out, scale 120ms ease-out; pointer-events: none; will-change: translate; }
.fx-cur svg { width: 100%; height: 100%; fill: #111; stroke: #fff; stroke-width: 1.4; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.fx.is-play .fx-cur.on { opacity: 1; }
.fx-cur.down { scale: .9; }
/* a button pressed by the cursor dips and comes back */
.fx :is(.ss-create, .ss-btn, .vk-cb).press { animation: fx-press 280ms cubic-bezier(.3, .7, .4, 1); }
@keyframes fx-press { 35% { scale: .95; } }

/* Websites, ShoSoft's site in its own tokens (clay-redesign src/system/tokens.css) */
.ss { background: #fff; color: #231433; font-family: 'Inter', var(--sans); font-optical-sizing: auto; }
.ss-page { transform: translateY(var(--sy, 0px)); transition: transform 1300ms cubic-bezier(.65, 0, .35, 1); }
.ss-nav { display: flex; align-items: center; gap: 28px; height: 56px; padding: 0 56px; }
.ss-logo { width: auto; height: 21px; }
.ss-links { display: flex; gap: 22px; color: #5e5268; font-size: 12.5px; }
.ss-links span { display: inline-flex; align-items: center; gap: 3px; }
.ss-links .fx-ic { width: 11px; height: 11px; opacity: .7; }
.ss-acts { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 12.5px; }
.ss-login { margin-right: 6px; color: #5e5268; }
.ss-burger { display: none; }
.ss-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 7px; font-weight: 500; white-space: nowrap; transition: background-color 150ms ease-out, box-shadow 150ms ease-out; }
.ss-gold { background: #ffc107; color: #240b31; }
.ss-gold:hover, .ss-gold.hov { background: #ffdf1b; }
.ss-ghost { background: #fff; color: #231433; box-shadow: inset 0 0 0 1px rgba(36, 11, 49, .14); }
.ss-ghost:hover { background: #f6f1fa; }
.ss-lg { height: 38px; padding: 0 18px; font-size: 14px; }
.ss-hero { display: flex; flex-direction: column; align-items: center; padding: 30px 80px 0; text-align: center; }
.ss-tag { padding: 3px 11px; border-radius: 99px; background: #ece3f4; color: #3c1b52; font-size: 11.5px; font-weight: 500; }
.ss-h1 { max-width: 560px; margin-top: 16px !important; color: #231433; font-size: 46px; font-weight: 600; line-height: 1.04; letter-spacing: -.036em; }
.fx :is(.ss-h1, .ss-h2) { text-wrap: balance; }
.ss-w { display: inline-block; }
.ss-acc { position: relative; display: inline-block; isolation: isolate; }
.ss-mark { position: absolute; z-index: -1; left: -4px; right: -6px; bottom: 2px; height: 42%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath fill='%23ffc107' d='M9 7C62 3 150 2 229 4c6 0 9 3 9 8l-1 16c0 6-4 9-10 9C150 36 70 38 12 39c-6 0-10-3-10-9L3 14c0-4 2-7 6-7z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transform-origin: 0 50%; }
.fx.is-play .ss-mark:not(.in) { opacity: 1; transform: scaleX(0); }
.fx .ss-mark[data-t] { transition: transform 700ms cubic-bezier(.65, 0, .35, 1); }
.ss-sub { max-width: 500px; margin-top: 14px !important; color: #5e5268; font-size: 14.5px; line-height: 1.5; }
.ss-ctas { display: flex; gap: 10px; margin-top: 22px; }
.ss-note { margin-top: 12px !important; color: #6f6477; font-size: 11.5px; }
.ss-stage { position: relative; height: 352px; margin: 30px 28px 0; border-radius: 14px; overflow: hidden; background: #1a1020; }
.ss-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss-app { position: absolute; left: 44px; right: 44px; top: 34px; bottom: -14px; display: flex; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 20px 50px rgba(0, 0, 0, .4); color: #101114; }
.ss-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 46px; flex: none; padding-top: 12px; background: #291633; }
.ss-rmark { width: 26px; height: 26px; margin-bottom: 8px; object-fit: cover; object-position: 0 50%; }
.ss-ri { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: rgba(255, 255, 255, .62); }
.ss-ri.on { background: rgba(255, 255, 255, .14); color: #fff; }
.ss-main { position: relative; flex: 1; min-width: 0; padding: 14px 16px 0; background: linear-gradient(180deg, #eef2f8, #f6f7f9 30%); }
.ss-top { display: flex; align-items: center; justify-content: space-between; }
.ss-top b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.ss-create { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 7px; background: #ffc107; color: #240b31; font-size: 11.5px; font-weight: 600; transition: background-color 150ms ease-out; }
.ss-create:hover, .ss-create.hov { background: #ffdf1b; }
.ss-cal { display: flex; gap: 10px; margin-top: 12px; height: 100%; }
.ss-list { width: 168px; flex: none; padding: 10px; border-radius: 10px 10px 0 0; background: #fff; }
.ss-lh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px !important; font-size: 12.5px; }
.ss-ev { display: grid; gap: 3px; margin-bottom: 7px; padding: 8px 9px 8px 12px; border-radius: 8px; background: #f1f2f4; box-shadow: inset 3px 0 0 var(--ec); font-size: 10.5px; }
.ss-ev.is-blue, .ss-bar.is-blue { --ec: #8f9cf5; --eb: #c9cffb; }
.ss-ev.is-teal, .ss-bar.is-teal { --ec: #34d0b6; --eb: #bfeee5; }
.ss-ev b { font-size: 11px; }
.ss-ev > span:last-child { display: inline-flex; align-items: center; gap: 4px; color: #5c6370; }
.ss-ev .fx-ic { width: 11px; height: 11px; }
.ss-ok { justify-self: start; padding: 0 6px; border-radius: 99px; background: #f0fdf4; box-shadow: inset 0 0 0 1px #b9efcb; color: #00a63e; font-size: 9.5px; font-weight: 500; }
.ss-grid { flex: 1; min-width: 0; border-radius: 10px 10px 0 0; background: #fff; overflow: hidden; }
.ss-tools { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; font-size: 11px; }
.ss-tools b { font-size: 13px; }
.ss-tools .fx-ic { width: 12px; height: 12px; color: #454a54; }
.ss-tb { padding: 3px 9px; border-radius: 6px; box-shadow: inset 0 0 0 1px #e3e5e8; }
.ss-sel { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 3px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px #e3e5e8; }
.ss-sel i { color: #737b8c; font-style: normal; }
.ss-dow { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid #e3e5e8; color: #5c6370; font-size: 10px; text-align: center; line-height: 22px; }
.ss-days { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 58px; border-top: 1px solid #e3e5e8; }
.ss-days i { font-style: normal; }
.ss-days > span:not(.ss-bar) { border-right: 1px solid #e3e5e8; border-bottom: 1px solid #e3e5e8; font-size: 10px; text-align: right; padding: 3px 6px; }
.ss-days > span.past { background: #f1f2f4; color: #737b8c; }
.ss-days > span.today { background: #fffbe6; font-weight: 700; }
.ss-bar { position: absolute; left: calc((var(--c) - 1) / 7 * 100% + 4px); width: calc(var(--w) / 7 * 100% - 8px); top: calc((var(--r) - 1) * 58px + 22px); height: 20px; padding: 0 8px; border-radius: 6px; background: var(--eb); box-shadow: inset 3px 0 0 var(--ec); color: #101114; font-size: 10px; font-weight: 500; line-height: 20px; white-space: nowrap; overflow: hidden; transition: opacity 400ms ease-out, transform 500ms cubic-bezier(.22, 1, .36, 1); }
.ss-ev[data-k] { transition: opacity 400ms ease-out, transform 500ms cubic-bezier(.22, 1, .36, 1); }
.fx.is-play:not(.s-saved) :is([data-k="newbar"], [data-k="newcard"]) { opacity: 0; transform: translateY(-6px); }
.ss-dlg { position: absolute; z-index: 4; left: 50%; top: 52px; width: 300px; margin-left: -150px; display: grid; gap: 5px; padding: 16px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 17, 20, .06), 0 18px 40px rgba(16, 17, 20, .22); font-size: 11px; opacity: 0; transform: translateY(8px) scale(.98); transition: opacity 220ms ease-out, transform 280ms cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.fx.s-dlg .ss-dlg { opacity: 1; transform: none; }
.ss-dlg > b { margin-bottom: 4px; font-size: 14px; }
.ss-dlg label { color: #5c6370; }
.ss-in { display: flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px #c7cad1; font-size: 12px; }
.ss-caret { width: 1px; height: 14px; margin-left: 1px; background: #101114; opacity: 0; }
.fx.s-dlg .ss-caret { animation: fx-blink 1s steps(1) infinite; }
.ss-dlg-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.ss-dlg .ss-btn { height: 28px; font-size: 11.5px; }
.ss-four { padding: 54px 28px 40px; text-align: center; }
.ss-h2 { max-width: 520px; margin: 0 auto !important; color: #231433; font-size: 30px; font-weight: 600; line-height: 1.12; letter-spacing: -.028em; }
.ss-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; text-align: left; }
.ss-card { padding: 22px; border-radius: 14px; background: #f6f1fa; }
.ss-card b { display: block; margin-top: 14px; font-size: 17px; letter-spacing: -.015em; }
.ss-card p { margin-top: 6px; color: #5e5268; font-size: 12.5px; line-height: 1.55; }
.ss-art { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #3c1b52; color: #ffc107; }
.ss-art .fx-ic { width: 19px; height: 19px; stroke-width: 2; }
@keyframes fx-blink { 50% { opacity: 1; } }

/* Web apps, Vecka's Home in its own tokens (workspace app/src/styles/system.css) */
.vk { display: flex; gap: 0; padding: 8px 8px 0 0; background: #f5f5f3; color: #111112; font-family: 'Inter', var(--sans); font-size: 12.5px; }
.vk-rail { display: flex; flex-direction: column; gap: 1px; width: 182px; flex: none; padding: 4px 10px; color: #3a3a3d; }
.vk-rail p { white-space: nowrap; overflow: hidden; display: flex; align-items: center; gap: 9px; height: 27px; padding: 0 8px; border-radius: 8px; }
.vk-rail .fx-ic { width: 14px; height: 14px; color: #5e5f66; }
.vk-ws { margin-bottom: 4px !important; font-weight: 600; }
.vk-ws .fx-ic { width: 11px; height: 11px; }
.vk-wm { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: #111112; color: #fff; font-size: 10px; font-weight: 700; }
.vk-search kbd { margin-left: auto; color: #93938e; font: inherit; font-size: 11px; }
.vk-search { color: #5e5f66; }
.vk-nav span { flex: 1; }
.vk-nav i { color: #5e5f66; font-style: normal; font-size: 11px; }
.vk-nav.on { background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 18, .06), 0 1px 2px rgba(17, 17, 18, .06); color: #111112; font-weight: 550; }
.vk-grp { height: 22px !important; margin-top: 10px !important; color: #93938e; font-size: 11px; }
.vk-pj { flex: none !important; width: 14px; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--c) 18%, #fff); box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--c) 30%, #fff); }
.vk-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; border-radius: 12px 12px 0 0; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 18, .06), 0 2px 8px rgba(17, 17, 18, .05); overflow: hidden; }
.vk-top { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 16px; color: #3a3a3d; font-size: 12px; font-weight: 550; }
.vk-top span { display: inline-flex; align-items: center; gap: 7px; }
.vk-help { color: #5e5f66; font-weight: 450; }
.vk [data-t] { transform: none !important; }
.vk-hello { padding: 10px 0 18px; text-align: center; }
.vk-hello .vk-hi { color: #111112; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.vk-hello p + p { margin-top: 4px; color: #5e5f66; font-size: 12px; }
.vk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 24px; }
.vk-box { height: 250px; padding: 12px 14px 0; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 18, .07), 0 1px 3px rgba(17, 17, 18, .05), 0 6px 16px rgba(17, 17, 18, .04); overflow: hidden; }
.vk-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px !important; font-size: 13.5px; font-weight: 600; }
.vk-h .fx-ic { color: #5e5f66; }
.vk-go { width: 13px; height: 13px; margin-left: auto; color: #93938e; }
.vk-run { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 2px 8px; border-radius: 99px; background: #f5f5f3; color: #3a3a3d; font-size: 11px; font-weight: 500; }
.vk-run + .vk-go { margin-left: 8px; }
.vk-run i { width: 6px; height: 6px; border-radius: 50%; background: #1a7742; }
.fx.is-play .vk-run i { animation: fx-pulse 1.6s ease-in-out 3; }
@keyframes fx-pulse { 50% { opacity: .3; } }
.vk-ev { display: grid; grid-template-columns: 52px 1fr; align-items: center; height: 25px; margin-bottom: 3px; font-size: 12px; transition: opacity 400ms ease-out, transform 500ms cubic-bezier(.22, 1, .36, 1); }
.vk-ev time { color: #5e5f66; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.vk-ev > span { display: flex; align-items: center; gap: 7px; height: 100%; padding: 0 9px; border-radius: 6px; background: color-mix(in srgb, var(--e) 9%, #fff); box-shadow: inset 2px 0 0 var(--e); }
.vk-ev b { font-weight: 500; }
.vk-ev i { color: #5e5f66; font-style: normal; font-size: 11px; }
.vk-ev.is-blue { --e: #2563eb; } .vk-ev.is-violet { --e: #6741c8; } .vk-ev.is-orange { --e: #a8500f; } .vk-ev.is-teal { --e: #0f6d70; } .vk-ev.is-green { --e: #1a7742; }
.vk-sub { margin: 6px 0 4px !important; color: #93938e; font-size: 11px; }
.fx.is-play:not(.s-appr) [data-k="newev"] { opacity: 0; transform: scale(.97); }
.vk-stats { display: flex; gap: 12px; white-space: nowrap; margin-bottom: 8px !important; color: #5e5f66; font-size: 11.5px; }
.vk-stats span { white-space: nowrap; }
.vk-stats b { color: #111112; font-weight: 600; font-variant-numeric: tabular-nums; }
.vk-needs { padding: 6px 4px 4px; border-radius: 10px; background: #edf2fd; box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .14); }
.vk-nh { padding: 0 8px 3px; color: #2563eb; font-size: 11.5px; font-weight: 600; }
.vk-row { position: relative; display: flex; align-items: center; gap: 8px; height: 27px; padding: 0 8px; border-radius: 7px; font-size: 12px; }
.vk-row:hover { background: rgba(255, 255, 255, .7); }
.vk-g { width: 14px; height: 14px; color: #5e5f66; }
.vk-day { display: grid; place-items: center; width: 14px; height: 14px; border-top: 2px solid #b53333; color: #3a3a3d; font-size: 9px; font-weight: 600; line-height: 1; }
.vk-rt { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.vk-acts { display: flex; gap: 12px; flex: none; font-size: 11.5px; color: #5e5f66; transition: opacity 200ms ease-out; }
.vk-yes { color: #111112; font-weight: 600 !important; }
.vk-done { position: absolute; right: 8px; display: inline-flex; align-items: center; gap: 5px; color: #1a7742; font-size: 11.5px; font-weight: 500; opacity: 0; transform: translateX(6px); transition: opacity 260ms ease-out, transform 360ms cubic-bezier(.22, 1, .36, 1); }
.vk-done .fx-ic { width: 12px; height: 12px; stroke-width: 2.2; }
[data-k="approve"] .vk-acts { opacity: 0; }
[data-k="approve"] .vk-done { opacity: 1; transform: none; }
.fx.is-play:not(.s-appr) [data-k="approve"] .vk-acts { opacity: 1; }
.fx.is-play:not(.s-appr) [data-k="approve"] .vk-done { opacity: 0; transform: translateX(6px); }
.vk-yes.press { opacity: .55; }
.vk-task { display: flex; align-items: center; gap: 10px; height: 31px; font-size: 12.5px; }
.vk-cb { display: grid; place-items: center; width: 15px; height: 15px; flex: none; border-radius: 4px; box-shadow: inset 0 0 0 1.5px #cfcfca; color: #fff; transition: background-color 200ms ease-out, box-shadow 200ms ease-out; }
.vk-cb .fx-ic { width: 11px; height: 11px; stroke-width: 2.6; opacity: 0; transform: scale(.6); transition: opacity 200ms ease-out, transform 260ms cubic-bezier(.34, 1.56, .64, 1); }
.vk-tl { position: relative; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; }
.vk-tl::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #93938e; transform: scaleX(0); transform-origin: 0 50%; transition: transform 360ms cubic-bezier(.65, 0, .35, 1); }
.vk-tp { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; width: 82px; color: #5e5f66; font-size: 11.5px; }
.vk-tp i { width: 6px; height: 6px; border-radius: 50%; }
.vk-due { width: 50px; color: #5e5f66; font-size: 11.5px; text-align: right; }
.vk-due.late { color: #b53333; }
[data-k="task"] .vk-cb { background: #111112; box-shadow: none; }
[data-k="task"] .vk-cb .fx-ic { opacity: 1; transform: none; }
[data-k="task"] .vk-tl { color: #93938e; }
[data-k="task"] .vk-tl::after { transform: none; }
.fx.is-play:not(.s-task) [data-k="task"] .vk-cb { background: transparent; box-shadow: inset 0 0 0 1.5px #cfcfca; }
.fx.is-play:not(.s-task) [data-k="task"] .vk-cb .fx-ic { opacity: 0; transform: scale(.6); }
.fx.is-play:not(.s-task) [data-k="task"] .vk-tl { color: inherit; }
.fx.is-play:not(.s-task) [data-k="task"] .vk-tl::after { transform: scaleX(0); }
.vk-task:hover .vk-cb { box-shadow: inset 0 0 0 1.5px #93938e; }
.vk-m { display: grid; grid-template-columns: 8px 96px 1fr auto; align-items: center; gap: 8px; height: 30px; font-size: 12px; }
.vk-m i { width: 5px; height: 5px; border-radius: 50%; background: #111112; }
.vk-m span { min-width: 0; overflow: hidden; white-space: nowrap; color: #5e5f66; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.vk-m time { color: #5e5f66; font-size: 11px; }

/* Internal tools, the growth team's overview, anonymised, Inter and a system mono */
.tl { display: grid; grid-template-columns: 172px 1fr; grid-template-rows: 46px 1fr; background: #fff; color: #111; font-family: 'Inter', var(--sans); }
.tl-top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid #ececec; }
.tl-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.tl-brand em { padding: 1px 7px; border-radius: 5px; box-shadow: inset 0 0 0 1px #e2e2e2; color: #777; font: 500 9px/1.6 ui-monospace, 'SF Mono', Menlo, monospace; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.tl-logo { display: grid; grid-template-columns: 7px 7px; gap: 2px; }
.tl-logo i { width: 7px; height: 7px; border-radius: 1.5px; background: #111; }
.tl-av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #111; color: #fff; font-size: 11px; }
.tl-side { padding: 10px 10px; border-right: 1px solid #ececec; background: #fafafa; overflow: hidden; }
.tl-search { display: flex; align-items: center; gap: 7px; height: 28px; margin-bottom: 4px !important; padding: 0 9px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #e6e6e6; color: #888; font-size: 11.5px; }
.tl-search kbd { margin-left: auto; font: inherit; font-size: 10px; }
.tl-grp { margin: 10px 0 2px !important; padding: 0 8px; color: #888; font: 500 9.5px/1.4 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.tl-nav { display: flex; align-items: center; gap: 9px; height: 25px; padding: 0 8px; border-radius: 7px; color: #444; font-size: 12px; }
.tl-nav .fx-ic { width: 13px; height: 13px; color: #777; }
.tl-nav.on { background: #ececec; color: #111; font-weight: 500; }
.tl-main { padding: 20px 22px 0; background: #f7f7f7; overflow: hidden; }
.tl-h1 { font-size: 26px; font-weight: 600; letter-spacing: -.025em; }
.tl-mono { color: #777; font: 400 10px/1.4 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; }
.tl-card { border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #e8e8e8; }
.tl-att { margin-top: 14px; padding: 10px 14px; }
.tl-ch { display: flex; align-items: center; gap: 8px; }
.tl-ch b { font-size: 13px; }
.tl-ch .tl-mono { text-transform: none; letter-spacing: 0; }
.tl-flag { display: flex; align-items: center; gap: 7px; width: max-content; margin-top: 8px !important; padding: 2px 6px; margin-left: -6px; border-radius: 6px; font-size: 12px; transition: background-color 200ms ease-out; }
.tl-flag i { width: 6px; height: 6px; border-radius: 50%; background: #d97706; }
.fx.is-play .tl-flag i { animation: fx-pulse 1.4s ease-in-out 2; }
.tl-flag b { font-weight: 500; }
.tl-flag:hover, .tl-flag.hov { background: #f3f3f3; }
.tl-flag:hover b, .tl-flag.hov b { text-decoration: underline; text-underline-offset: 3px; }
.tl-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.tl-stat { padding: 11px 13px; }
.tl-stat > b { display: block; margin-top: 6px; font-size: 26px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tl-stat > span { color: #777; font-size: 10.5px; }
.tl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.tl-next, .tl-listen { padding: 11px 0 0; height: 300px; overflow: hidden; }
.tl-next .tl-ch, .tl-listen .tl-ch { padding: 0 14px 8px; }
.tl-pill { margin-left: auto; padding: 2px 9px; border-radius: 7px; box-shadow: inset 0 0 0 1px #e2e2e2; font-size: 10.5px; font-weight: 500; }
.tl-row { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-top: 1px solid #f0f0f0; transition: opacity 420ms ease-out, transform 560ms cubic-bezier(.22, 1, .36, 1), background-color 200ms ease-out; }
.tl-row:hover, .tl-row.hov { background: #fafafa; }
.tl-row > i { width: 6px; height: 6px; flex: none; border-radius: 50%; }
.tl-row > span { display: grid; flex: 1; min-width: 0; }
.tl-row b { font-size: 12px; font-weight: 500; }
.tl-row span span { color: #777; font-size: 10.5px; }
.tl-st { padding: 1px 8px; border-radius: 99px; background: #f1f1f1; color: #555; font-size: 10px; font-style: normal; font-weight: 500; }
.tl-st.is-amber { background: #fdf3e1; color: #9a5b00; }
.tl-st.is-blue { background: #e9effd; color: #2b5bd7; }
.tl-trio { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; }
.tl-trio span { display: grid; padding: 7px 14px; }
.tl-trio span + span { border-left: 1px solid #f0f0f0; }
.tl-trio b { font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tl-trio i { color: #777; font: 400 9.5px/1.4 ui-monospace, 'SF Mono', Menlo, monospace; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.tl-mn { padding: 9px 14px 2px; }
.tl-mention { display: flex; gap: 9px; padding: 7px 14px; }
.tl-ma { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; color: #fff; font-size: 9.5px; font-weight: 600; }
.tl-mention b { font-size: 12px; font-weight: 600; }
.tl-mention .tl-mono { margin-left: 6px; text-transform: none; letter-spacing: 0; }
.tl-mention p { color: #444; font-size: 11px; line-height: 1.45; }

/* AI integrations, ShoSoft onboarding in the app's tokens (demo v4 app/globals.css), DM Sans */
.ob { color: #101114; font-family: 'FX DM Sans', 'DM Sans', var(--sans); letter-spacing: -.01em; background: #f7f7fa; }
.ob-wash { position: absolute; inset: 0; background: radial-gradient(40% 50% at 12% 30%, rgba(178, 222, 245, .55), transparent 70%), radial-gradient(40% 45% at 92% 25%, rgba(244, 205, 214, .55), transparent 70%), radial-gradient(45% 45% at 20% 100%, rgba(255, 236, 160, .5), transparent 70%), radial-gradient(40% 40% at 85% 95%, rgba(214, 238, 200, .5), transparent 70%); }
.ob-top { position: relative; display: flex; align-items: center; height: 54px; padding: 0 22px; background: rgba(255, 255, 255, .78); box-shadow: 0 1px 0 rgba(16, 17, 20, .06); }
.ob-logo { width: auto; height: 20px; }
.ob-steps { position: absolute; left: 50%; translate: -50% 0; display: flex; align-items: flex-start; gap: 0; margin: 0; padding: 0; list-style: none; }
.ob-steps li:not(.ob-line) { display: grid; justify-items: center; gap: 3px; width: 112px; text-align: center; }
.ob-steps li > span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #c7cad1; color: #5c6370; font-size: 9.5px; font-weight: 700; }
.ob-steps li.done > span, .ob-steps li.on > span { background: #5b1c7d; box-shadow: none; color: #fff; }
.ob-steps li.on > span { box-shadow: 0 0 0 3px #ead5f6; }
.ob-steps .fx-tick { width: 10px; height: 10px; color: #fff; }
.ob-steps em { color: #5c6370; font-size: 9.5px; font-style: normal; line-height: 1.25; }
.ob-steps li.on em { color: #101114; font-weight: 700; }
.ob-line { width: 44px; height: 1.5px; margin-top: 10px; background: #c7cad1; }
.ob-line:first-of-type { background: #5b1c7d; }
.ob-stage { position: relative; height: calc(100% - 54px); }
.ob-card { border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(16, 17, 20, .04), 0 8px 24px rgba(16, 17, 20, .06); }
.fx-tick { width: 11px; height: 11px; stroke-width: 2.2; color: #00a63e; }
.fx-bang { width: 11px; height: 11px; stroke-width: 1.6; color: #dc6803; }
.fx-spark { width: 18px; height: 18px; fill: currentColor; stroke: none !important; color: #982fd0; }
.ob-up { position: absolute; left: 50%; top: 30px; width: 400px; margin-left: -200px; padding: 22px 22px 18px; opacity: 0; visibility: hidden; transition: opacity 360ms ease-out, transform 420ms cubic-bezier(.22, 1, .36, 1), visibility 0s 420ms; transform: translateY(-6px); }
.fx.is-play:not(.s-disc) .ob-up { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ob-h { display: block; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.ob-p { margin-top: 4px !important; color: #5c6370; font-size: 11.5px; line-height: 1.5; }
.ob-field { display: flex; align-items: center; gap: 8px; height: 36px; margin-top: 16px; padding: 0 12px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px #ffc107; color: #737b8c; font-size: 12px; }
.ob-or { display: flex; align-items: center; gap: 10px; margin: 12px 0 !important; color: #737b8c; font-size: 11px; }
.ob-or i { flex: 1; height: 1px; background: #e3e5e8; }
.ob-lbl { margin-bottom: 6px !important; color: #5c6370; font-size: 10.5px; }
.ob-drop { position: relative; display: grid; justify-items: center; gap: 5px; padding: 18px 12px; border-radius: 12px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px #c7cad1; color: #5c6370; font-size: 11px; text-align: center; }
.ob-drop::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #f5eafa; box-shadow: inset 0 0 0 1.5px #c182e3; opacity: 0; transition: opacity 200ms ease-out; }
.fx.s-over .ob-drop::after { opacity: 1; }
.ob-drop > * { position: relative; z-index: 1; }
.ob-drop b { color: #101114; }
.ob-cloud { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px #c7cad1; color: #5c6370; }
.ob-cloud .fx-ic { width: 14px; height: 14px; }
.ob-hint { color: #737b8c; font-size: 10px; }
.ob-file { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px #e3e5e8; font-size: 11.5px; transition: opacity 300ms ease-out, transform 400ms cubic-bezier(.22, 1, .36, 1); }
.ob-file > span:nth-child(2) { display: grid; flex: 1; }
.ob-file i { color: #737b8c; font-size: 10px; font-style: normal; }
.fx.is-play:not(.s-file) .ob-file { opacity: 0; transform: translateY(-4px); }
.ob-pdf { display: grid; place-items: center; width: 26px; height: 30px; flex: none; border-radius: 4px; background: #fdecec; color: #c0362c; font-size: 8px; font-weight: 700; letter-spacing: .02em; }
.ob-acts { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin-top: 14px; }
.ob-btn { display: grid; place-items: center; height: 34px; padding: 0 18px; border-radius: 10px; font-size: 12.5px; font-weight: 700; transition: background-color 250ms ease-out, color 250ms ease-out, scale 140ms ease-out; }
.ob-ghost { background: #fff; box-shadow: inset 0 0 0 1px #c7cad1; }
.ob-next { background: #ffc107; color: #240b31; }
.fx.is-play:not(.s-file) .ob-next { background: #e3e5e8; color: #8f96a3; }
.ob-next.press { scale: .97; }
.ob-disc { position: absolute; left: 50%; top: 22px; width: 540px; margin-left: -270px; transition: opacity 420ms ease-out, transform 520ms cubic-bezier(.22, 1, .36, 1); }
.fx.is-play:not(.s-disc) .ob-disc { opacity: 0; transform: translateY(10px); }
.ob-head { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 14px !important; font-size: 18px; letter-spacing: -.02em; }
.fx.s-busy .fx-spark { animation: fx-twinkle 1.9s ease-in-out infinite; }
@keyframes fx-twinkle { 50% { transform: scale(1.25) rotate(15deg); } }
.ob-board { padding: 16px 18px 16px; }
.ob-src { display: flex; align-items: center; gap: 10px; }
.ob-mark { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; background: url('/media/logos/official/shosoft.png') 0 50% / auto 100% no-repeat; }
.ob-ring { position: absolute; inset: 0; border-radius: 50%; background: #d6acec; opacity: 0; z-index: -1; }
.fx.s-busy .ob-ring { animation: fx-ring 2s ease-out infinite; }
@keyframes fx-ring { 0% { transform: scale(.85); opacity: .55; } 100% { transform: scale(1.85); opacity: 0; } }
.ob-sn { display: grid; flex: 1; min-width: 0; }
.ob-sn b { font-size: 12.5px; font-weight: 700; }
.ob-sn i { color: #737b8c; font-size: 10.5px; font-style: normal; }
.ob-count { min-width: 64px; text-align: right; color: #737b8c; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.ob-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.ob-slot { position: relative; display: flex; flex-direction: column; justify-content: center; height: 54px; padding: 0 13px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #e3e5e8, 0 1px 2px rgba(16, 17, 20, .04); transition: box-shadow 200ms ease-out, background-color 200ms ease-out; }
.ob-slot.gap { background: rgba(255, 250, 235, .5); box-shadow: none; outline: 1px dashed rgba(220, 104, 3, .45); outline-offset: -1px; }
.ob-slot:not(.gap):hover { background: #fbf7fd; box-shadow: inset 0 0 0 1px #d6acec, 0 1px 2px rgba(16, 17, 20, .04); }
.ob-slot.gap:hover { background: #fffaeb; }
.ob-slot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(193, 130, 227, .16); opacity: 0; pointer-events: none; }
.ob-slot.in::before { animation: fx-wash 1100ms ease-out; }
@keyframes fx-wash { 0%, 40% { opacity: 1; } 100% { opacity: 0; } }
.ob-v { display: grid; gap: 2px; transition: opacity 520ms cubic-bezier(.33, 1, .68, 1); }
.ob-sh { display: flex; align-items: center; gap: 5px; color: #5b1c7d; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ob-slot.gap .ob-sh, .ob-slot.gap .ob-sv { color: #dc6803; }
.ob-sv { overflow: hidden; color: #101114; font-size: 11.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.ob-slot.gap .ob-sv { font-weight: 400; }
.ob-skel { position: absolute; inset: 0; display: grid; align-content: center; gap: 5px; padding: 0 13px; border-radius: inherit; background: #fff; opacity: 0; transition: opacity 300ms ease-out 150ms; pointer-events: none; }
.ob-skel i { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #e3e5e8 0%, #f5eafa 45%, #e3e5e8 90%) 0 0 / 220% 100%; }
.ob-skel i:nth-child(1) { width: 33%; } .ob-skel i:nth-child(2) { width: 80%; } .ob-skel i:nth-child(3) { width: 50%; }
.fx.is-play .ob-slot:not(.in) { box-shadow: none; outline: 1px dashed #c7cad1; outline-offset: -1px; background: rgba(255, 255, 255, .4); }
.fx.is-play .ob-slot:not(.in) .ob-skel { opacity: 1; transition-delay: 0s; }
.fx.is-play .ob-slot:not(.in) .ob-v { opacity: 0; }
.fx.s-busy .ob-skel i { animation: fx-shimmer 1.6s linear infinite; }
@keyframes fx-shimmer { from { background-position: 180% 0; } to { background-position: -40% 0; } }
.ob-prog { height: 5px; margin-top: 14px; border-radius: 99px; background: #e3e5e8; overflow: hidden; }
.ob-prog i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ac59d9, #ffc107); transform: scaleX(var(--p, 1)); transform-origin: 0 50%; transition: transform 620ms cubic-bezier(.33, 1, .68, 1); }
.ob-drag { position: absolute; left: 0; top: 0; z-index: 19; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 17, 20, .06), 0 12px 28px rgba(16, 17, 20, .18); font-size: 11.5px; font-weight: 500; opacity: 0; transform: translate(var(--dx, 760px), var(--dy, 560px)) rotate(-3deg); transition: opacity 250ms ease-out; pointer-events: none; will-change: transform; }
.ob-drag .ob-pdf { width: 22px; height: 26px; }
.fx.s-drag .ob-drag { opacity: 1; }

/* phones, a narrower design size and each product's own phone layout */
@media (max-width: 600px) {
  .pd-tframe:has(.fx) { aspect-ratio: 1 / 1.1; }
  .fx-vp { aspect-ratio: 440 / 540; border-radius: 9px 9px 0 0; }
  .fx { width: 440px; height: 540px; scale: tan(atan2(100cqw, 440px)); font-size: 13px; }
  .fx-url { min-width: 170px; }
  .ss-nav { gap: 0; height: 50px; padding: 0 20px; }
  .ss-links, .ss-acts .ss-login, .ss-acts .ss-ghost { display: none; }
  .ss-acts .ss-btn { height: 28px; font-size: 11.5px; }
  .ss-burger { display: grid; margin-left: 12px; } .ss-burger .fx-ic { width: 18px; height: 18px; }
  .ss-hero { padding: 22px 24px 0; }
  .ss-h1 { font-size: 34px; }
  .ss-sub { font-size: 13.5px; }
  .ss-ctas { flex-direction: column; width: 100%; gap: 8px; }
  .ss-ctas .ss-btn { justify-content: center; }
  .ss-stage { height: 300px; margin: 26px 12px 0; }
  .ss-app { left: 16px; right: -60px; top: 22px; }
  .ss-list, .ss-sel { display: none; }
  .ss-days { grid-auto-rows: 52px; }
  .ss-bar { top: calc((var(--r) - 1) * 52px + 20px); }
  .ss-dlg { width: 260px; margin-left: -130px; top: 44px; }
  .ss-four { padding: 44px 20px 32px; }
  .ss-h2 { font-size: 25px; }
  .ss-cards { grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
  .vk { padding: 6px 6px 0; }
  .vk-rail { display: none; }
  .vk-grid { grid-template-columns: 1fr; gap: 10px; padding: 0 14px; }
  .vk-box { height: auto; padding-bottom: 6px; }
  .vk-hello { padding: 4px 0 14px; }
  .vk-hello .vk-hi { font-size: 22px; }
  .vk-agent { order: -1; }
  .vk-next .vk-c > :nth-child(n + 4):not([data-k]) { display: none; }
  .vk-tasks, .vk-mail { display: none; }
  .vk-needs .vk-row:nth-child(n + 5):not([data-k]) { display: none; }
  .tl { grid-template-columns: 1fr; }
  .tl-side { display: none; }
  .tl-main { padding: 16px 14px 0; }
  .tl-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tl-cols { grid-template-columns: 1fr; }
  .tl-next { display: none; }
  .tl-listen { height: auto; }
  .tl-listen .tl-mono:not(.tl-mn) { display: none; }
  .ob-top { padding: 0 14px; height: 48px; }
  .ob-steps { display: none; }
  .ob-stage { height: calc(100% - 48px); }
  .ob-up { width: 380px; margin-left: -190px; top: 18px; }
  .ob-disc { width: 412px; margin-left: -206px; top: 14px; }
  .ob-head { font-size: 15.5px; margin-bottom: 10px !important; }
  .ob-board { padding: 12px 12px; }
  .ob-slot { height: 50px; padding: 0 10px; }
  .ob-sv { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .fx *, .fx { transition: none !important; animation: none !important; } }

/* ---------- the inline Sightpane mark, 2026-10-13 ----------
   David, "where sightpane is mentioned try adding logo", then "spacing is
   not great. refine". The Through mark set like a glyph before the name,
   a touch under cap height so the solid block does not outweigh the
   letters, dropped a hair below the baseline as round letters overshoot,
   in the text's own colour, a normal word space before it and a tight
   0.18 to 0.2em after it, never parted from the name across a line break.
   Tuned per size at 2x. src/brand.mjs spInline(size) */
.spi { white-space: nowrap; }
.spi-m { display: inline-block; width: .7em; height: .7em; margin-right: .2em; vertical-align: -.03em; fill: currentColor; }
.spi-heading .spi-m { width: .68em; height: .68em; margin: 0 .22em 0 .02em; vertical-align: -.02em; }
.spi-pill .spi-m { width: .72em; height: .72em; margin: 0 .28em 0 .04em; vertical-align: -.07em; } /* a full word space each side in a pill (David 2026-10-13, "no spacing between everything"), the text's own space plus .04em before, .28em after */
/* the Sightpane mark in the sightpane.com nav and footer, the same size as the studio's */
.nb-mark .sp-nm { width: 22px; height: 22px; flex: none; }
.ft .brand .sp-nm { width: 22px; height: 22px; flex: none; }

/* ---------- sightpane.com's Product card, 2026-10-13 ----------
   The featured column shows the app's own window for the hovered feature,
   scaled from its design size (.sx, site/pages/app.css), one at a time */
.nd-sp .nd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr); }
.nd-live .nd-mini { position: absolute; inset: 0; display: flex; border-radius: inherit; background: rgba(23, 23, 23, .9); opacity: 0; transition: opacity 200ms var(--nd-e); }
.nd-live .nd-mini[data-on] { opacity: 1; }
@media (max-width: 1180px) { .nd-sp .nd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .nd-live .nd-mini { transition: none; } }
.nd-gs { display: grid; align-content: start; }
.nd-gs .nd-g + .nd-g { margin-top: 14px; }
.nd-sp .nd-ic { width: 18px; height: 18px; }

/* the home pill, 2026-10-13. Even breathing room, the New chip, the words and the arrow 12px apart, the same as the pill's inner edge plus its chip */
.pd-new { gap: 12px; }
.pd-new-l { padding: 0 2px; }