/* ============================================================
   Quincy Portal — application styles
   Built on the Quincy Productions design tokens (var(--*)).
   Editorial monochrome: ink on warm paper, hairlines, square
   corners, Mazius display + Apfel sans.
   ============================================================ */

html, body { margin: 0; }
body { background: var(--bg-canvas); color: var(--text-primary); font: var(--type-body); }
* { box-sizing: border-box; }
img { display: block; max-width: 100%; }

.boot {
  min-height: 100vh; display: grid; place-items: center;
  font: var(--type-eyebrow); text-transform: uppercase;
  letter-spacing: var(--tracking-widest); color: var(--text-muted);
}

/* tiny helpers --------------------------------------------------------- */
.ey { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--text-secondary); }
.muted { color: var(--text-muted); }
.serif { font-family: var(--font-display); letter-spacing: var(--tracking-tight); }
.nowrap { white-space: nowrap; }
.row { display: flex; align-items: center; }
.spread { display: flex; align-items: center; justify-content: space-between; }
.gap2 { gap: var(--space-2); } .gap3 { gap: var(--space-3); } .gap4 { gap: var(--space-4); } .gap5 { gap: var(--space-5); }
.hairline { border: 0; border-top: 1px solid var(--border-hairline); margin: 0; }
.grow { flex: 1; }
button { font-family: var(--font-sans); }

/* ---------------------------------------------------------------------
   App shell + top bar
   --------------------------------------------------------------------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--space-6);
  padding: 0 var(--space-7); height: 64px;
  background: color-mix(in srgb, var(--paper-050) 88%, transparent);
  backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid var(--border-hairline);
}
.topbar.is-ink { background: color-mix(in srgb, var(--ink-900) 90%, transparent); border-bottom-color: rgba(246,244,239,.14); }
.topbar.is-ink .ey, .topbar.is-ink .topnav a { color: var(--text-on-inverse-muted); }
.topbar__brand { display: flex; align-items: center; gap: var(--space-4); cursor: pointer; }
.topbar__brand img { height: 18px; }
.topbar__divider { width: 1px; height: 22px; background: var(--border-hairline); }
.topnav { display: flex; align-items: center; gap: var(--space-6); }
.topnav a {
  font: var(--type-label); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-secondary); text-decoration: none; cursor: pointer; padding: 4px 0;
  border-bottom: 1.5px solid transparent; transition: color var(--dur-fast), border-color var(--dur-fast);
}
.topnav a:hover { color: var(--text-primary); }
.topnav a.is-active { color: var(--text-primary); border-bottom-color: var(--ink-900); }

.avatar {
  width: 32px; height: 32px; border-radius: var(--radius-pill); display: grid; place-items: center;
  background: var(--ink-900); color: var(--paper-050); font: var(--type-label); font-size: 12px;
  letter-spacing: .02em; flex: none;
}

/* search ---------------------------------------------------------------- */
.search { position: relative; display: flex; align-items: center; }
.search input {
  font: var(--type-body); font-size: 14px; background: var(--paper-000);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-sm);
  padding: 8px 12px 8px 34px; width: 230px; color: var(--text-primary);
  transition: border-color var(--dur-fast), width var(--dur-base) var(--ease-standard);
}
.search input:focus { outline: none; border-color: var(--ink-900); width: 280px; }
.search svg { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--text-muted); pointer-events: none; }

/* ---------------------------------------------------------------------
   Icon buttons / chips
   --------------------------------------------------------------------- */
.icbtn {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  background: transparent; border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm); color: var(--text-primary); cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.icbtn--lg { width: 42px; height: 42px; }
.icbtn:hover { background: var(--paper-100); border-color: var(--greige-300); }
.icbtn:active { transform: translateY(1px); }
.icbtn svg { width: 17px; height: 17px; }
.icbtn.is-on { background: var(--ink-900); color: var(--paper-050); border-color: var(--ink-900); }
.icbtn--ghost { border-color: transparent; }
.icbtn--ondark { color: var(--paper-050); border-color: rgba(246,244,239,.28); background: rgba(20,20,21,.35); backdrop-filter: blur(6px); }
.icbtn--ondark:hover { background: rgba(20,20,21,.6); border-color: rgba(246,244,239,.5); }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: var(--type-label); font-size: 12.5px; text-transform: uppercase; letter-spacing: var(--tracking-wide);
  padding: 7px 13px; border: 1px solid var(--border-hairline); background: var(--paper-000);
  border-radius: var(--radius-pill); color: var(--text-secondary); cursor: pointer; white-space: nowrap;
  transition: all var(--dur-fast);
}
.chip:hover { border-color: var(--greige-300); color: var(--text-primary); }
.chip.is-active { background: var(--ink-900); border-color: var(--ink-900); color: var(--paper-050); }
.chip .cnt { font-variant-numeric: tabular-nums; opacity: .6; }
.chip.is-active .cnt { opacity: .8; }

.segment { display: inline-flex; border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); overflow: hidden; background: var(--paper-000); }
.segment button {
  font: var(--type-label); font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking-wide);
  padding: 7px 14px; background: transparent; border: 0; border-left: 1px solid var(--border-hairline);
  color: var(--text-secondary); cursor: pointer; transition: all var(--dur-fast);
}
.segment button:first-child { border-left: 0; }
.segment button.is-active { background: var(--ink-900); color: var(--paper-050); }
.segment button:not(.is-active):hover { background: var(--paper-100); color: var(--text-primary); }

/* status dot */
.sdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* ---------------------------------------------------------------------
   Page scaffolding
   --------------------------------------------------------------------- */
.page { width: 100%; max-width: 1480px; margin: 0 auto; padding: var(--space-7) var(--space-7) var(--space-10); }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-6); flex-wrap: wrap; }
.pagehead h1 { font: var(--type-h1); letter-spacing: var(--tracking-tight); }
.toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* stat strip */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border-hairline); background: var(--paper-000); margin-bottom: var(--space-7); }
.stat { padding: var(--space-5) var(--space-5); border-left: 1px solid var(--border-hairline); }
.stat:first-child { border-left: 0; }
.stat .v { font: var(--type-h2); font-size: 34px; letter-spacing: var(--tracking-tight); display: flex; align-items: baseline; gap: 8px; }
.stat .v small { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; color: var(--text-muted); }
.stat .l { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--text-secondary); margin-top: 8px; }

/* ---------------------------------------------------------------------
   Dashboard project cards
   --------------------------------------------------------------------- */
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-hairline); border: 1px solid var(--border-hairline); }
.proj { background: var(--paper-050); cursor: pointer; display: flex; flex-direction: column; transition: background var(--dur-base); }
.proj:hover { background: var(--paper-100); }
.proj__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink-800); }
.proj__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-reveal, 720ms) var(--ease-entrance); }
.proj:hover .proj__media img { transform: scale(1.045); }
.proj__badges { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.proj__body { padding: var(--space-5); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.proj__addr { font: var(--type-h3); font-size: 22px; letter-spacing: var(--tracking-tight); line-height: 1.12; text-wrap: pretty; }
.proj__meta { display: flex; flex-direction: column; gap: 3px; }
.proj__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-3); border-top: 1px solid var(--border-hairline); }

/* progress meter */
.meter { height: 3px; background: var(--paper-200); position: relative; overflow: hidden; flex: 1; }
.meter > i { position: absolute; inset: 0 auto 0 0; background: var(--ink-900); display: block; }
.meter--ondark { background: rgba(246,244,239,.18); }
.meter--ondark > i { background: var(--paper-050); }

/* list view */
.plist { border: 1px solid var(--border-hairline); background: var(--paper-000); }
.prow { display: grid; grid-template-columns: 72px 1.6fr 1fr 1fr 1.1fr 96px; align-items: center; gap: var(--space-4); padding: 12px var(--space-5); border-top: 1px solid var(--border-hairline); cursor: pointer; transition: background var(--dur-fast); }
.prow:first-child { border-top: 0; }
.prow:hover { background: var(--paper-100); }
.prow__thumb { width: 72px; height: 48px; object-fit: cover; background: var(--ink-800); }
.prow.head { cursor: default; background: var(--paper-100); }
.prow.head:hover { background: var(--paper-100); }
.prow.head > div { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--text-secondary); }

/* ---------------------------------------------------------------------
   Photo grid + tiles (shared by review & client)
   --------------------------------------------------------------------- */
.grid { display: grid; gap: var(--gap, 14px); grid-template-columns: repeat(var(--cols, 4), 1fr); }
.tile {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink-800);
  cursor: pointer; outline: 0; --ring: transparent;
  box-shadow: inset 0 0 0 2px var(--ring);
  transition: box-shadow var(--dur-fast);
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-reveal, 720ms) var(--ease-entrance), opacity var(--dur-base); }
.tile:hover img { transform: scale(1.04); }
.tile__ph { position: absolute; inset: 0; display: grid; place-items: center; opacity: .25; }
.tile__ph img { width: 40px; height: auto; }
.tile__cap { position: absolute; left: 10px; bottom: 9px; right: 10px; z-index: 2; font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: #fff; opacity: 0; transform: translateY(4px); transition: all var(--dur-base); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.tile:hover .tile__cap { opacity: .92; transform: none; }
.tile__scrim { position: absolute; inset: 0; z-index: 1; background: var(--scrim-bottom, linear-gradient(to top, rgba(10,10,10,.55), transparent 45%)); opacity: 0; transition: opacity var(--dur-base); pointer-events: none; }
.tile:hover .tile__scrim, .tile.has-state .tile__scrim { opacity: 1; }
.tile__tools { position: absolute; top: 9px; right: 9px; z-index: 3; display: flex; gap: 6px; opacity: 0; transform: translateY(-4px); transition: all var(--dur-base); }
.tile:hover .tile__tools, .tile.is-selected .tile__tools { opacity: 1; transform: none; }
.tile__num { position: absolute; top: 9px; left: 11px; z-index: 3; font: var(--type-mono); font-size: 11px; color: #fff; opacity: .55; text-shadow: 0 1px 4px rgba(0,0,0,.6); }

/* selection + review states */
.tile.is-selected { --ring: var(--ink-900); }
.tile.st-approved { --ring: var(--signal-positive); }
.tile.st-flagged  { --ring: var(--signal-critical); }
.tile.is-dim img { opacity: .4; filter: grayscale(.3); }
.statetag { position: absolute; left: 9px; bottom: 9px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: var(--radius-xs); font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: #fff; background: rgba(20,20,21,.6); backdrop-filter: blur(6px); }
.statetag.st-approved { background: color-mix(in srgb, var(--signal-positive) 82%, #000); }
.statetag.st-flagged { background: color-mix(in srgb, var(--signal-critical) 82%, #000); }

/* corner select checkbox */
.selbox { position: absolute; top: 9px; left: 9px; z-index: 4; width: 22px; height: 22px; border-radius: var(--radius-xs); border: 1.5px solid rgba(255,255,255,.85); background: rgba(20,20,21,.32); backdrop-filter: blur(4px); display: grid; place-items: center; opacity: 0; transition: opacity var(--dur-fast); }
.tile:hover .selbox, .tile.is-selected .selbox { opacity: 1; }
.tile.is-selected .selbox { background: var(--ink-900); border-color: var(--ink-900); }
.selbox svg { width: 13px; height: 13px; color: #fff; opacity: 0; }
.tile.is-selected .selbox svg { opacity: 1; }

/* favourite heart pulse (client) */
.tile__heart.is-on svg { fill: #fff; }

/* rating stars on tile */
.tstars { position: absolute; right: 9px; bottom: 9px; z-index: 3; display: flex; gap: 2px; opacity: 0; transition: opacity var(--dur-base); }
.tile:hover .tstars, .tile.has-rating .tstars { opacity: 1; }
.tstars svg { width: 13px; height: 13px; color: #fff; }
.tstars .on svg { fill: #fff; }
.tstars .off svg { opacity: .45; }

/* comment count pin on tile */
.cbubble { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--radius-pill); background: rgba(20,20,21,.6); backdrop-filter: blur(6px); color: #fff; font: var(--type-mono); font-size: 11px; }
.cbubble svg { width: 12px; height: 12px; }

/* label dot */
.ldot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.5); }

/* ---------------------------------------------------------------------
   Review workspace layout
   --------------------------------------------------------------------- */
.work { display: grid; grid-template-columns: 288px 1fr; flex: 1; min-height: 0; }
.rail { border-right: 1px solid var(--border-hairline); padding: var(--space-6); background: var(--paper-000); position: sticky; top: 64px; align-self: start; max-height: calc(100vh - 64px); overflow: auto; }
.rail h2 { font: var(--type-h3); font-size: 24px; letter-spacing: var(--tracking-tight); line-height: 1.1; text-wrap: pretty; }
.rail__sec { padding: var(--space-5) 0; border-top: 1px solid var(--border-hairline); }
.rail__sec:first-of-type { border-top: 0; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; }
.kv .k { color: var(--text-muted); font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.kv .vv { text-align: right; }
.filterlist { display: flex; flex-direction: column; gap: 2px; }
.frow { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; margin: 0 -10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; transition: background var(--dur-fast); }
.frow:hover { background: var(--paper-100); }
.frow.is-active { background: var(--ink-900); color: var(--paper-050); }
.frow .cnt { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 13px; }
.frow.is-active .cnt { color: var(--text-on-inverse-muted); }

.workmain { min-width: 0; display: flex; flex-direction: column; }
.worktools { position: sticky; top: 64px; z-index: 20; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); background: color-mix(in srgb, var(--paper-050) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-hairline); flex-wrap: wrap; }
.worktools .prog { font: var(--type-label); font-size: 13px; color: var(--text-secondary); }
.worktools .prog b { color: var(--text-primary); font-weight: 400; }
.workgrid { padding: var(--space-6); }

/* selection action bar */
.actionbar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(0); z-index: 60; display: flex; align-items: center; gap: var(--space-4); padding: 10px 12px 10px 20px; background: var(--ink-900); color: var(--paper-050); border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); }
.actionbar .n { font: var(--type-h3); font-size: 18px; font-family: var(--font-display); }
.actionbar .lbl { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-on-inverse-muted); }
.actionbar .vline { width: 1px; height: 22px; background: rgba(246,244,239,.2); }
.barbtn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid rgba(246,244,239,.24); background: transparent; color: var(--paper-050); font: var(--type-label); font-size: 12.5px; text-transform: uppercase; letter-spacing: var(--tracking-wide); cursor: pointer; transition: background var(--dur-fast); }
.barbtn:hover { background: rgba(246,244,239,.12); }
.barbtn svg { width: 15px; height: 15px; }
.barbtn--solid { background: var(--paper-050); color: var(--ink-900); border-color: var(--paper-050); }
.barbtn--solid:hover { background: var(--greige-100); }

/* ---------------------------------------------------------------------
   Image viewer (lightbox)
   --------------------------------------------------------------------- */
.viewer { position: fixed; inset: 0; z-index: 80; background: var(--ink-900); display: grid; grid-template-columns: 1fr var(--panel, 380px); grid-template-rows: 1fr auto; }
.viewer.no-panel { grid-template-columns: 1fr; }
.viewer__stage { grid-row: 1 / 2; position: relative; display: grid; place-items: center; overflow: hidden; min-width: 0; }
.viewer__img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; }
.viewer__imgwrap { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 28px 28px 84px; }
.viewer__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; }
.viewer__nav.prev { left: 18px; } .viewer__nav.next { right: 18px; }
.viewer__close { position: absolute; top: 16px; left: 16px; z-index: 5; }
.viewer__meta { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 4; text-align: center; color: var(--paper-050); }
.viewer__meta .a { font-family: var(--font-display); font-size: 18px; }
.viewer__meta .b { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--text-on-inverse-muted); margin-top: 3px; }

/* drawing markup layer */
.canvasframe { position: relative; display: inline-block; line-height: 0; max-width: 100%; max-height: 100%; }
.canvasframe .viewer__img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 230px); object-fit: contain; }
.canvasframe.is-plan { width: min(70%, 620px); aspect-ratio: 3 / 2; background: var(--paper-100); }
.markup-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pin { position: absolute; z-index: 4; width: 24px; height: 24px; border-radius: 50% 50% 50% 2px; background: var(--paper-050); color: var(--ink-900); display: grid; place-items: center; font: var(--type-mono); font-size: 12px; transform: translate(-50%, -100%); box-shadow: var(--shadow-md); }

/* markup toolbar */
.drawbar { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; background: var(--ink-800); border: 1px solid rgba(246,244,239,.18); border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); color: var(--paper-050); max-width: calc(100vw - 32px); flex-wrap: wrap; }
.drawbar__lbl { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--text-on-inverse-muted); }
.drawbar__grp { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; }
.swatch { width: 19px; height: 19px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); cursor: pointer; padding: 0; }
.swatch.on { box-shadow: 0 0 0 2px var(--ink-800), 0 0 0 4px var(--paper-050); }
.wbtn { width: 28px; height: 28px; display: grid; place-items: center; background: transparent; border: 1px solid rgba(246,244,239,.22); border-radius: var(--radius-sm); cursor: pointer; }
.wbtn span { background: var(--paper-050); border-radius: 50%; display: block; }
.wbtn.on { background: rgba(246,244,239,.16); }

/* ---------------------------------------------------------------------
   Workspace additions — bar, autoHDR, video, copy, dropzone
   --------------------------------------------------------------------- */
.board { display: flex; flex-direction: column; min-width: 0; }
.wsbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); background: var(--paper-050); border-bottom: 1px solid var(--border-hairline); flex-wrap: wrap; }
.boardnote { display: flex; align-items: center; gap: 12px; padding: 12px var(--space-6); background: var(--paper-100); border-bottom: 1px solid var(--border-hairline); font-size: 13.5px; color: var(--text-secondary); }
.boardnote svg { flex: none; color: var(--text-muted); }

.hdr { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border-hairline); background: var(--paper-000); }
.hdr svg { flex: none; }

/* video tiles */
.vtile { cursor: pointer; display: flex; flex-direction: column; gap: 0; background: var(--paper-000); border: 1px solid var(--border-hairline); transition: background var(--dur-base); }
.vtile:hover { background: var(--paper-100); }
.vtile__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-800); }
.vtile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-reveal, 720ms) var(--ease-entrance); }
.vtile:hover .vtile__media img { transform: scale(1.04); }
.vtile__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(20,20,21,.5); backdrop-filter: blur(6px); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.vtile__play--lg { position: static; transform: none; width: 72px; height: 72px; }
.vtile__dur { position: absolute; right: 10px; bottom: 10px; z-index: 3; font: var(--type-mono); font-size: 11px; color: #fff; background: rgba(20,20,21,.6); padding: 3px 8px; border-radius: var(--radius-xs); backdrop-filter: blur(4px); }
.vtile__src { position: absolute; left: 10px; top: 10px; z-index: 3; font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: 10px; color: #fff; background: rgba(20,20,21,.55); padding: 4px 8px; border-radius: var(--radius-xs); backdrop-filter: blur(4px); }
.vtile__body { padding: 14px 16px; }
.vtile--client { border-color: var(--border-hairline); }
.videoframe { position: relative; aspect-ratio: 16 / 9; background: var(--ink-800); display: grid; place-items: center; overflow: hidden; margin-bottom: 6px; }
.videoframe img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.videoframe .vtile__play--lg { position: absolute; background: rgba(20,20,21,.55); }

/* copywriting */
.copywrap { max-width: 760px; }
.copyedit { display: flex; flex-direction: column; gap: 8px; }
.copyedit label { margin-top: 12px; }
.copyinput { width: 100%; border: 1px solid var(--border-hairline); background: var(--paper-000); padding: 12px 14px; font: var(--type-body); font-size: 15px; color: var(--text-primary); border-radius: var(--radius-sm); resize: vertical; }
.copyinput:focus { outline: none; border-color: var(--ink-900); }
.copyinput.serif { font-family: var(--font-display); font-size: 24px; letter-spacing: var(--tracking-tight); }
.copyread { max-width: 680px; }
.copyread h2 { font: var(--type-h2); letter-spacing: var(--tracking-tight); text-wrap: pretty; margin-bottom: 18px; }
.copyread p { font-size: 16.5px; line-height: 1.7; color: var(--text-secondary); }
.copyread ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.copyread li { font-size: 15px; padding-left: 20px; position: relative; color: var(--text-secondary); }
.copyread li::before { content: "—"; position: absolute; left: 0; color: var(--text-muted); }
.copyread--client { max-width: 720px; margin: 0 auto; padding: var(--space-6) 0; }

/* document (PDF) card */
.doccard { display: flex; align-items: center; gap: var(--space-4); padding: 16px 18px; border: 1px solid var(--border-hairline); background: var(--paper-000); }
.doccard__icon { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--border-hairline); color: var(--text-secondary); }
.doccard__b { flex: 1; min-width: 0; }
.docpreview { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border-hairline); max-width: 680px; }
.docpreview h2 { font: var(--type-h2); letter-spacing: var(--tracking-tight); text-wrap: pretty; margin-bottom: 16px; }
.docpreview p { font-size: 16px; line-height: 1.7; color: var(--text-secondary); }
.docpreview ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.docpreview li { font-size: 15px; padding-left: 20px; position: relative; color: var(--text-secondary); }
.docpreview li::before { content: "—"; position: absolute; left: 0; color: var(--text-muted); }
.client--ink .doccard { background: rgba(246,244,239,.04); border-color: rgba(246,244,239,.16); }
.client--ink .doccard__icon { color: var(--text-on-inverse-muted); border-color: rgba(246,244,239,.16); }
.client--ink .doccard__b > div:first-child { color: var(--paper-050); }
.client--ink .copyread--client h2 { color: var(--paper-050); }
.client--ink .copyread--client p, .client--ink .copyread--client li { color: var(--text-on-inverse-muted); }

/* dropzone */
.dropzone { border: 1.5px dashed var(--greige-300); background: var(--paper-100); padding: 36px 20px; text-align: center; color: var(--text-secondary); border-radius: var(--radius-sm); }
.dropzone svg { color: var(--text-muted); }

/* premium watermark + paywall */
.wmark { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 18%; pointer-events: none; overflow: hidden; transform: rotate(-24deg) scale(1.4); }
.wmark span { font: var(--type-eyebrow); font-size: 13px; letter-spacing: .42em; color: rgba(255,255,255,.34); text-align: center; white-space: nowrap; }
.wmark--lg span { font-size: 22px; color: rgba(255,255,255,.28); }
.lockbadge { position: absolute; left: 10px; bottom: 10px; z-index: 4; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--radius-pill); background: rgba(20,20,21,.66); backdrop-filter: blur(6px); color: #fff; font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: 10.5px; }
.lockbadge svg { width: 12px; height: 12px; }
.tile.is-locked { cursor: pointer; }
.lockcard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-hairline); background: var(--paper-100); }
.lockcard svg { flex: none; color: var(--text-secondary); }

/* ---------------------------------------------------------------------
   Kanban board (dashboard view)
   --------------------------------------------------------------------- */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(244px, 1fr); gap: 1px; background: var(--border-hairline); border: 1px solid var(--border-hairline); overflow-x: auto; }
.kcol { background: var(--paper-050); display: flex; flex-direction: column; min-width: 0; transition: background var(--dur-fast); }
.kcol.is-over { background: var(--paper-100); }
.kcol__head { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--space-4); border-bottom: 1px solid var(--border-hairline); background: var(--paper-050); }
.kcol.is-over .kcol__head { background: var(--paper-100); }
.kcol__head .ey { line-height: 1.25; }
.kcol__head .cnt { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-muted); }
.kcol__body { display: flex; flex-direction: column; gap: 10px; padding: 12px; min-height: 120px; }
.kcol__empty { text-align: center; color: var(--greige-300); padding: 18px 0; font-size: 20px; }
.kcard { background: var(--paper-000); border: 1px solid var(--border-hairline); cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); }
.kcard:hover { background: var(--paper-100); border-color: var(--greige-300); }
.kcard[draggable="true"] { cursor: grab; }
.kcard[draggable="true"]:active { cursor: grabbing; }
.kcard.is-dragging { opacity: .4; }
.kcard__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-800); }
.kcard__media img { width: 100%; height: 100%; object-fit: cover; }
.kcard__b { padding: 11px 12px 12px; }
.kcard__addr { font-size: 16px; letter-spacing: var(--tracking-tight); line-height: 1.12; text-wrap: pretty; }
.kcard__meta { font-size: 12.5px; color: var(--text-secondary); margin-top: 5px; }
.kcard__foot { display: flex; align-items: center; gap: 10px; margin-top: 11px; }

/* ---------------------------------------------------------------------
   Tonomo webhook ingestion
   --------------------------------------------------------------------- */
.tonomo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal-info); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal-info) 22%, transparent); display: inline-block; flex: none; }
.tag-sm { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: 10.5px; color: var(--text-secondary); border: 1px solid var(--border-hairline); padding: 4px 8px; border-radius: var(--radius-xs); }

.tmodal .mono, .mono { font-family: var(--font-mono); }
.tincoming { display: flex; align-items: center; gap: 16px; padding: 22px 18px; border: 1px solid var(--border-hairline); background: var(--paper-000); }
.tincoming__pulse { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-900); color: var(--paper-050); flex: none; animation: tpulse 1.1s var(--ease-standard) infinite; }
@keyframes tpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ink-900) 28%, transparent); } 70% { box-shadow: 0 0 0 14px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.tbanner { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--signal-caution) 12%, var(--paper-050)); border: 1px solid color-mix(in srgb, var(--signal-caution) 40%, var(--border-hairline)); font-size: 13.5px; color: var(--text-secondary); }
.tbanner svg { color: var(--signal-caution); flex: none; }

.tmap { display: flex; gap: 16px; align-items: center; }
.tmap__cover { width: 96px; height: 72px; flex: none; overflow: hidden; background: var(--ink-800); }
.tmap__cover img { width: 100%; height: 100%; object-fit: cover; }
.tmap__head h4 { font: var(--type-h3); font-size: 22px; letter-spacing: var(--tracking-tight); line-height: 1.1; margin: 4px 0 2px; }

.tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-hairline); border: 1px solid var(--border-hairline); }
.trow { background: var(--paper-050); padding: 11px 13px; }
.trow .ey { color: var(--text-muted); margin-bottom: 4px; }
.trow__v { font-size: 14px; }
.trow__sub { color: var(--text-muted); }
.tnotes p { font-size: 13.5px; line-height: 1.55; margin: 0 0 4px; color: var(--text-secondary); }
.tservices .cnt { font-variant-numeric: tabular-nums; }

.traw-toggle { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; cursor: pointer; font: var(--type-label); font-size: 12.5px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-secondary); padding: 4px 0; }
.traw-toggle:hover { color: var(--text-primary); }
.traw { max-height: 240px; overflow: auto; background: var(--ink-900); color: var(--greige-100); font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; padding: 14px 16px; margin: 0; white-space: pre; border-radius: var(--radius-sm); }

/* dropbox raw folder cue (modal) + sync */
.trawfolder { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--signal-info) 38%, var(--border-hairline)); background: color-mix(in srgb, var(--signal-info) 8%, var(--paper-050)); }
.trawfolder svg { color: var(--signal-info); flex: none; }
.trawfolder__path { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropcard { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--border-hairline); background: var(--paper-000); cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast); }
.dropcard:hover { background: var(--paper-100); }
.dropcard.is-on { border-color: var(--signal-info); box-shadow: inset 0 0 0 1px var(--signal-info); }
.dropcard svg:first-child { color: var(--signal-info); flex: none; }
.empty--raw p { font-size: 14.5px; line-height: 1.55; }

/* viewer side panel */
.vpanel { grid-row: 1 / 3; background: var(--paper-050); border-left: 1px solid rgba(246,244,239,.14); display: flex; flex-direction: column; min-height: 0; }
.vpanel__head { padding: var(--space-6) var(--space-6) var(--space-5); border-bottom: 1px solid var(--border-hairline); }
.vpanel__addr { font: var(--type-h3); font-size: 20px; letter-spacing: var(--tracking-tight); line-height: 1.15; }
.vpanel__scroll { overflow: auto; flex: 1; padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.vpanel__sec .eylab { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--text-secondary); margin-bottom: var(--space-3); }
.decide { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.dbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border-hairline); background: var(--paper-000); cursor: pointer; font: var(--type-label); font-size: 12.5px; text-transform: uppercase; letter-spacing: var(--tracking-wide); border-radius: var(--radius-sm); transition: all var(--dur-fast); }
.dbtn svg { width: 16px; height: 16px; }
.dbtn:hover { background: var(--paper-100); }
.dbtn.on-approve.is-on { background: var(--signal-positive); border-color: var(--signal-positive); color: #fff; }
.dbtn.on-flag.is-on { background: var(--signal-critical); border-color: var(--signal-critical); color: #fff; }

.starpick { display: flex; gap: 4px; }
.starpick button { background: none; border: 0; cursor: pointer; padding: 2px; color: var(--text-muted); }
.starpick button svg { width: 22px; height: 22px; }
.starpick button.on { color: var(--ink-900); } .starpick button.on svg { fill: var(--ink-900); }

.labels { display: flex; gap: var(--space-3); }
.labelpick { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-hairline); cursor: pointer; position: relative; }
.labelpick.is-on { box-shadow: 0 0 0 2px var(--paper-050), 0 0 0 4px var(--ink-900); }

/* comments thread */
.thread { display: flex; flex-direction: column; gap: var(--space-4); }
.cmt { display: flex; gap: var(--space-3); }
.cmt__pin { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ink-900); color: var(--paper-050); display: grid; place-items: center; font: var(--type-mono); font-size: 11px; margin-top: 2px; }
.cmt__pin.unpinned { background: var(--paper-200); color: var(--text-muted); }
.cmt__b { flex: 1; }
.cmt__who { font: var(--type-label); font-size: 13px; }
.cmt__who span { color: var(--text-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-left: 6px; }
.cmt__txt { font-size: 14.5px; line-height: 1.5; margin-top: 3px; color: var(--text-secondary); }
.cmt__role { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.composer { border-top: 1px solid var(--border-hairline); padding: var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: 10px; background: var(--paper-000); }
.composer textarea { width: 100%; resize: none; border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); padding: 10px 12px; font: var(--type-body); font-size: 14px; min-height: 60px; background: var(--paper-000); }
.composer textarea:focus { outline: none; border-color: var(--ink-900); }
.composer .hint { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); display: flex; align-items: center; gap: 8px; }

/* filmstrip */
.strip { grid-column: 1 / 2; grid-row: 2 / 3; display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto; background: rgba(10,10,10,.6); border-top: 1px solid rgba(246,244,239,.1); }
.strip.full { grid-column: 1 / -1; }
.strip__t { flex: none; width: 84px; height: 56px; object-fit: cover; opacity: .5; cursor: pointer; outline: 2px solid transparent; transition: opacity var(--dur-fast), outline-color var(--dur-fast); background: var(--ink-700); }
.strip__t:hover { opacity: .85; }
.strip__t.is-active { opacity: 1; outline-color: var(--paper-050); }

/* compare mode */
.compare { position: fixed; inset: 0; z-index: 85; background: var(--ink-900); display: flex; flex-direction: column; }
.compare__pair { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-height: 0; }
.compare__cell { position: relative; display: grid; place-items: center; overflow: hidden; padding: 28px; }
.compare__cell img { max-width: 100%; max-height: 100%; object-fit: contain; }
.compare__tag { position: absolute; top: 16px; left: 16px; color: var(--paper-050); font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-widest); }
.compare__pickbtn { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); }

/* ---------------------------------------------------------------------
   Client gallery
   --------------------------------------------------------------------- */
.chero { position: relative; min-height: 78vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink-900); }
.chero__bg { position: absolute; inset: 0; }
.chero__bg img { width: 100%; height: 100%; object-fit: cover; }
.chero__scrim { position: absolute; inset: 0; background: var(--scrim-full, linear-gradient(to top, rgba(10,10,10,.78), rgba(10,10,10,.12) 55%, rgba(10,10,10,.32))); }
.chero__inner { position: relative; z-index: 2; width: 100%; max-width: 1480px; margin: 0 auto; padding: var(--space-9) var(--space-7) var(--space-8); color: var(--paper-050); }
.chero__eyebrow { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--text-on-inverse-muted); margin-bottom: var(--space-4); }
.chero__title { font: var(--type-display); font-size: clamp(40px, 6vw, 84px); line-height: .98; letter-spacing: var(--tracking-tightest); max-width: 14ch; text-wrap: balance; }
.chero__sub { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); font: var(--type-body-lg); }
.chero__actions { display: flex; gap: var(--space-3); margin-top: var(--space-7); flex-wrap: wrap; }
.chero__credit { position: absolute; top: var(--space-7); right: var(--space-7); z-index: 2; }
.chero__credit img { height: 30px; }

.cbar { position: sticky; top: 64px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-4) var(--space-7); background: color-mix(in srgb, var(--paper-050) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-hairline); flex-wrap: wrap; }
.ctabs { display: flex; gap: var(--space-5); }
.ctab { font: var(--type-label); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-secondary); cursor: pointer; padding: 6px 0; border-bottom: 1.5px solid transparent; display: flex; align-items: center; gap: 8px; }
.ctab:hover { color: var(--text-primary); }
.ctab.is-active { color: var(--text-primary); border-bottom-color: var(--ink-900); }
.ctab .cnt { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.ctab--premium { gap: 7px; }
.ctab--premium svg { opacity: .8; }

/* premium section */
.premium-wrap { display: flex; flex-direction: column; gap: var(--space-5); }
.premium-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); padding: var(--space-5) var(--space-6); border: 1px solid var(--border-hairline); background: var(--paper-000); flex-wrap: wrap; }
.premium-intro__h { font-size: clamp(24px, 3vw, 34px); letter-spacing: var(--tracking-tight); line-height: 1.08; text-wrap: pretty; }
.premium-intro__p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin-top: 10px; max-width: 56ch; }
.premium-intro__stat { text-align: right; flex: none; }
.premium-intro__stat .v { font-size: 40px; line-height: 1; letter-spacing: var(--tracking-tight); }
.premium-intro__stat .ey { color: var(--text-secondary); margin-top: 6px; }
.premium-sec { display: flex; align-items: center; gap: 8px; margin-top: var(--space-3); }
.premium-sec .cnt { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.client--ink .premium-intro { background: rgba(246,244,239,.04); border-color: rgba(246,244,239,.16); }
.client--ink .premium-intro__h { color: var(--paper-050); }
.client--ink .premium-intro__p, .client--ink .premium-intro__stat .ey, .client--ink .premium-sec .cnt { color: var(--text-on-inverse-muted); }
.client--ink .premium-intro__stat .v { color: var(--paper-050); }

.cgallery { max-width: 1480px; margin: 0 auto; padding: var(--space-7); }
.cfoot { background: var(--ink-900); color: var(--text-on-inverse-muted); padding: var(--space-8) var(--space-7) var(--space-6); margin-top: var(--space-9); }
.cfoot__top { max-width: 1480px; margin: 0 auto; display: flex; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; align-items: flex-end; }
.cfoot img { height: 22px; }
.cfoot a { color: var(--text-on-inverse-muted); text-decoration: none; }
.cfoot a:hover { color: var(--paper-050); }

/* ---------------------------------------------------------------------
   Modals + toasts
   --------------------------------------------------------------------- */
.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(10,10,10,.5); backdrop-filter: blur(3px); display: grid; place-items: center; padding: var(--space-6); animation: fade var(--dur-base) var(--ease-standard); }
.modal { background: var(--paper-050); width: 100%; max-width: 460px; border: 1px solid var(--border-hairline); box-shadow: var(--shadow-lg); animation: pop var(--dur-slow) var(--ease-entrance); }
.modal--wide { max-width: 560px; }
.modal__head { padding: var(--space-6) var(--space-6) var(--space-4); }
.modal__head h3 { font: var(--type-h2); font-size: 30px; letter-spacing: var(--tracking-tight); text-wrap: pretty; }
.modal__body { padding: 0 var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.modal__foot { padding: var(--space-5) var(--space-6); border-top: 1px solid var(--border-hairline); display: flex; justify-content: flex-end; gap: var(--space-3); }
.optrow { display: flex; flex-direction: column; gap: var(--space-2); }
.optcards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.optcard { border: 1px solid var(--border-hairline); padding: var(--space-4); cursor: pointer; border-radius: var(--radius-sm); transition: all var(--dur-fast); }
.optcard:hover { background: var(--paper-100); }
.optcard.is-on { border-color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--ink-900); }
.optcard .t { font: var(--type-label); font-size: 14px; }
.optcard .d { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }

.toasts { position: fixed; right: 22px; bottom: 22px; z-index: 95; display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; align-items: center; gap: 12px; background: var(--ink-900); color: var(--paper-050); padding: 13px 18px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); font-size: 14px; animation: slidein var(--dur-slow) var(--ease-entrance); max-width: 380px; }
.toast svg { width: 17px; height: 17px; flex: none; }
.toast .sub { color: var(--text-on-inverse-muted); font-size: 12.5px; }

/* progress bar (zip prep) */
.zipbar { height: 4px; background: var(--paper-200); overflow: hidden; }
.zipbar > i { display: block; height: 100%; background: var(--ink-900); width: 0; transition: width var(--dur-base) linear; }

/* ---------------------------------------------------------------------
   Persona / prototype switcher
   --------------------------------------------------------------------- */
.persona { position: fixed; left: 18px; bottom: 18px; z-index: 70; background: var(--ink-900); color: var(--paper-050); border-radius: var(--radius-pill); display: flex; align-items: center; padding: 5px 6px 5px 16px; box-shadow: var(--shadow-lg); gap: 10px; }
.persona__lbl { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--text-on-inverse-muted); font-size: 10px; }
.persona__opts { display: flex; background: rgba(246,244,239,.1); border-radius: var(--radius-pill); padding: 3px; }
.persona__opts button { font: var(--type-label); font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-on-inverse-muted); background: transparent; border: 0; padding: 6px 13px; border-radius: var(--radius-pill); cursor: pointer; transition: all var(--dur-fast); }
.persona__opts button.is-on { background: var(--paper-050); color: var(--ink-900); }

/* ---------------------------------------------------------------------
   Guest reviewer banner
   --------------------------------------------------------------------- */
.guestbar { background: var(--ink-900); color: var(--paper-050); padding: 10px var(--space-7); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: 13px; }
.guestbar .eyl { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--text-on-inverse-muted); }

/* empty states */
.empty { padding: var(--space-9) var(--space-6); text-align: center; color: var(--text-muted); }
.empty .serif { font: var(--type-h2); color: var(--text-secondary); display: block; margin-bottom: var(--space-3); }

/* ---- tweak: olive accent variant ---- */
.app.acc-olive { --accent: var(--signal-positive); }
.app.acc-olive .chip.is-active,
.app.acc-olive .segment button.is-active,
.app.acc-olive .frow.is-active { background: var(--signal-positive); border-color: var(--signal-positive); }
.app.acc-olive .meter > i { background: var(--signal-positive); }
.app.acc-olive .topnav a.is-active,
.app.acc-olive .ctab.is-active { border-bottom-color: var(--signal-positive); }
.app.acc-olive .tile.is-selected { --ring: var(--signal-positive); }

/* ---- tweak: client gallery ink theme ---- */
.client--ink { background: var(--ink-900); }
.client--ink .cbar { background: color-mix(in srgb, var(--ink-900) 92%, transparent); border-bottom-color: rgba(246,244,239,.14); }
.client--ink .ctab { color: var(--text-on-inverse-muted); }
.client--ink .ctab:hover { color: var(--paper-050); }
.client--ink .ctab.is-active { color: var(--paper-050); border-bottom-color: var(--paper-050); }
.client--ink .ctab .cnt { color: var(--greige-400); }
.client--ink .chip { background: transparent; color: var(--text-on-inverse-muted); border-color: rgba(246,244,239,.22); }
.client--ink .chip:hover { color: var(--paper-050); border-color: rgba(246,244,239,.45); }
.client--ink .chip.is-active { background: var(--paper-050); color: var(--ink-900); border-color: var(--paper-050); }
.client--ink .icbtn { color: var(--paper-050); border-color: rgba(246,244,239,.22); }
.client--ink .icbtn:hover { background: rgba(246,244,239,.1); border-color: rgba(246,244,239,.45); }
.client--ink .cgallery { background: var(--ink-900); }
.client--ink .empty { color: var(--text-on-inverse-muted); }
.client--ink .empty .serif { color: var(--greige-200); }

/* animations */
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes slidein { from { opacity: 0; transform: translateX(20px); } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .projects { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .work { grid-template-columns: 1fr; }
  .rail { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--border-hairline); }
  .viewer { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .vpanel { position: fixed; right: 0; top: 0; bottom: 0; width: min(420px, 90vw); z-index: 6; box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-entrance); }
  .vpanel.open { transform: none; }
}
@media (max-width: 720px) {
  .page { padding: var(--space-6) var(--space-4) var(--space-9); }
  .topbar { padding: 0 var(--space-4); gap: var(--space-4); height: 58px; }
  .topnav, .search, .topbar__divider { display: none; }
  .projects { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .grid { --cols: 2 !important; --gap: 8px; }
  .chero__inner { padding: var(--space-7) var(--space-4) var(--space-6); }
  .chero__credit { display: none; }
  .prow { grid-template-columns: 56px 1fr 84px; }
  .prow__c-agency, .prow__c-date, .prow__c-status { display: none; }
  .persona { left: 10px; right: 10px; bottom: 10px; justify-content: center; }
  .compare__pair { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .cbar { top: 58px; }
  .worktools { top: 58px; }
}