/* CHRISTIAN/CFO — wavvy/os brutalist theme */
:root {
  --ink:    #000000;
  --ink-2:  #242424;
  --ink-3:  #666666;
  --ink-4:  #999999;
  --line:   #e0e0e0;
  --bg:     #ffffff;
  --soft:   #f2f2f2;
  --soft-2: #f9f9f9;

  --yellow: #f8f806;
  --yellow-soft: #faffb1;
  --red:    #fe3921;
  --blue:   #8DD5E8;
  --green:  #A8F0A0;
  --cyan:   #00D4D4;
  --violet: #4a5fb8;
  --pink:   #ff6ec7;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  font-family: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace;
  font-weight: 400;
  background: var(--bg);
  color: var(--ink-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.sans { font-family: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { background: var(--yellow); }

h1, h2, h3, h4 { letter-spacing: -.5px; font-weight: 800; }
h1 { font-size: 22px; }
h2 { font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; }
h3 { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; }
.muted, small { color: var(--ink-3); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }

/* App shell */
.app {
  min-height: 100vh;
  background: #fff;
  display: grid;
  grid-template-columns: 260px 1fr;
}

/* Sidebar */
.sidebar {
  background: #000;
  color: #fff;
  padding: 22px 16px 16px;
  display: flex; flex-direction: column;
  border-right: 2px solid #000;
  position: sticky; top: 0;
  height: 100vh;
  overflow-y: auto;
}
.brand {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid #2b2b2b;
  margin-bottom: 18px;
}
.brand .mark {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 1.5px;
  color: #fff;
}
.brand .mark .slash { color: var(--yellow); }
.brand .chip {
  font-size: 9px; letter-spacing: 2px;
  padding: 4px 7px;
  background: var(--yellow); color: #000;
  text-transform: uppercase; font-weight: 800;
  border: 1px solid #000;
}

.nav { display: flex; flex-direction: column; flex: 1; }
.nav .sep {
  font-size: 10px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #737373;
  padding: 14px 4px 6px;
  font-weight: 700;
}
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: #bfbfbf;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.nav a:hover { background: #1a1a1a; color: #fff; }
.nav a.active { background: var(--yellow); color: #000; border-color: #000; }

/* Main */
.main {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 100vh;
}
.topbar {
  height: 68px;
  border-bottom: 2px solid #000;
  background: #fff;
  display: flex; align-items: center;
  padding: 0 28px;
  gap: 16px;
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 10;
}
.topbar h1 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin: 0;
}
.topbar .crumb {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.topbar .red-dot {
  width: 6px; height: 6px; background: var(--red); border: 1px solid #000;
}
.topbar .who {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
}
.topbar .avatar {
  width: 32px; height: 32px;
  background: var(--yellow);
  color: #000;
  display: grid; place-items: center;
  font-weight: 800; font-size: 13px;
  border: 1.5px solid #000;
}
.topbar .who small { color: var(--ink-3); }
.topbar .who div > div:first-child { font-weight: 800; color: var(--ink); letter-spacing: 1.5px; text-transform: uppercase; font-size: 11px; }

.main > .topbar + * { padding: 24px 32px 48px; }

/* Buttons */
.btn {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 8px 14px;
  border: 1.5px solid #000;
  background: #fff;
  color: #000;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, color .15s;
}
.btn:hover { background: var(--yellow); text-decoration: none; }
.btn.primary { background: #000; color: #fff; }
.btn.primary:hover { background: var(--yellow); color: #000; }
.btn.danger { background: var(--red); color: #fff; border-color: #000; }
.btn.danger:hover { background: #000; color: var(--yellow); }
.btn.ghost { border-color: transparent; }
.btn.ghost:hover { border-color: #000; }
.btn.sm { padding: 6px 10px; font-size: 9px; }

/* Cards */
.card {
  background: #fff;
  border: 1.5px solid #000;
  margin-bottom: 16px;
}
.card > h2:first-child,
.card > h3:first-child {
  padding: 12px 14px;
  border-bottom: 1.5px solid #000;
  margin: 0;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
/* Most cards: header + body content. Pad p/form/ul/details/row/grid that sit next to a heading. */
.card > p,
.card > form,
.card > ul,
.card > details,
.card > .row,
.card > .grid,
.card > .cta-row,
.card > svg.spark,
.card > .chat { padding: 14px; }
/* Tables in cards span edge-to-edge under the heading */
.card > table { width: 100%; }
/* Mobile/period filter rows: */
.card > div[style*="display:flex"]:first-of-type { padding: 14px 14px 0; }
/* Single-stat KPI card variant (when used outside .kpi-row) */
.card.kpi {
  padding: 14px 16px;
  position: relative;
  margin-bottom: 0;
}
.card.kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--yellow);
}
.card.kpi .label {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 700; color: var(--ink-3);
}
.card.kpi .value {
  font-size: 24px; font-weight: 800; margin-top: 6px; line-height: 1; letter-spacing: -.5px;
  color: var(--ink);
}
.card.kpi .sub {
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  margin-top: 8px; color: var(--ink-3);
}
/* When KPI cards live inside a grid, kill the grid gap to look like a stat row */
.grid.cols-3 > .card.kpi,
.grid.cols-4 > .card.kpi { border-color: #000; }

/* Stat row (KPIs) */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: 16px;
  border: 1.5px solid #000;
}
.kpi-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-row.cols-5 { grid-template-columns: repeat(5, 1fr); }
.kpi {
  padding: 14px 16px;
  border-right: 1px solid #000;
  background: #fff;
  position: relative;
}
.kpi:last-child { border-right: none; }
.kpi.accent-yellow { background: var(--yellow); }
.kpi.accent-red    { background: var(--red); color: #fff; }
.kpi.accent-blue   { background: var(--blue); }
.kpi.accent-green  { background: var(--green); }
.kpi.accent-black  { background: #000; color: var(--yellow); }
.kpi .label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .75;
}
.kpi .value {
  font-size: 26px;
  font-weight: 800;
  margin-top: 6px;
  line-height: 1;
  letter-spacing: -.5px;
}
.kpi .sub {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 8px;
  opacity: .8;
}

/* Generic grids */
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.row { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.row.r3 { grid-template-columns: repeat(3, 1fr); }
.row.r4 { grid-template-columns: repeat(4, 1fr); }

/* Tables */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.table th {
  text-align: left;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  padding: 10px 12px;
  background: #000;
  border-bottom: 1px solid #000;
}
.table td {
  padding: 11px 12px;
  border-bottom: 1px solid #000;
  vertical-align: middle;
  letter-spacing: 0.3px;
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--yellow-soft); }
.table .right { text-align: right; }
.amount-good { color: #057a3d; font-weight: 800; }
.amount-bad  { color: var(--red); font-weight: 800; }

/* Pills / badges */
.pill {
  display: inline-block;
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid #000;
  background: #fff;
  color: #000;
}
.pill.good   { background: var(--green); }
.pill.bad    { background: var(--red); color: #fff; }
.pill.warn   { background: var(--yellow); }
.pill.info   { background: var(--blue); }
.pill.muted  { background: #ddd; color: #444; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.input, .select, .textarea {
  width: 100%;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid #000;
  color: var(--ink);
  font: 12px/1.4 'Geist Mono', ui-monospace, monospace;
  letter-spacing: 0.3px;
  border-radius: 0;
}
.input:focus, .select:focus, .textarea:focus {
  outline: 3px solid var(--yellow);
  outline-offset: 0;
}
.textarea { min-height: 90px; resize: vertical; }
.select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%);
  background-position: calc(100% - 14px) 14px, calc(100% - 9px) 14px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}
input[type="color"] { padding: 2px; height: 38px; }
input[type="file"] { padding: 8px; font-size: 11px; }

/* Flash */
.flash-wrap { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.flash {
  padding: 10px 14px;
  border: 1.5px solid #000;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700;
}
.flash.success { background: var(--green); }
.flash.error   { background: var(--red); color: #fff; }
.flash.info    { background: var(--blue); }

/* AI chat */
.chat {
  display: flex; flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 12px;
  border: 1.5px solid #000;
  background: var(--soft-2);
}
.msg {
  max-width: 80%;
  padding: 10px 12px;
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.5;
  border: 1.5px solid #000;
  letter-spacing: 0.2px;
}
.msg.user { align-self: flex-end; background: var(--yellow); }
.msg.assistant { align-self: flex-start; background: #fff; }

/* Sparkline */
.spark { height: 140px; width: 100%; display: block; }

/* Mobile */
.mobile-toggle { display: none; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; z-index: 50; top: 0; left: 0; height: 100vh;
    width: 260px; transform: translateX(-100%); transition: transform .2s;
  }
  .sidebar.open { transform: translateX(0); }
  .mobile-toggle { display: inline-flex; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .kpi { border-right: 1px solid #000; border-bottom: 1px solid #000; }
  .kpi:nth-child(2n) { border-right: none; }
  .row, .row.r3, .row.r4 { grid-template-columns: 1fr; }
  .main > .topbar + * { padding: 16px; }
  .topbar { padding: 0 16px; }
  /* Long unbroken descriptions/refs shouldn't blow out the table on mobile */
  .table td { word-break: break-word; overflow-wrap: anywhere; }
}

/* Print */
@media print {
  body { background: #fff; color: #111; }
  .sidebar, .topbar, .no-print { display: none !important; }
  .app { display: block; }
}

/* ---------------------------------------------------------------- */
/* LANDING — design-army inspired, off-white agency layout         */
/* ---------------------------------------------------------------- */

body.da {
  background: #F4F4F4;
  color: #0a0a0a;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
body.da a { color: inherit; text-decoration: none; }
body.da a:hover { background: transparent; }

.da {
  --da-bg: #F4F4F4;
  --da-ink: #0a0a0a;
  --da-mute: #6b6b6b;
  --da-line: #d8d8d8;
  --da-margin: clamp(16px, 3.2vw, 44px);
  --da-section: clamp(80px, 12vw, 180px);
}

/* Reveal animation primitives ------------------------------------ */
.da [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.2,.7,.2,1) var(--delay,0s), transform .9s cubic-bezier(.2,.7,.2,1) var(--delay,0s); }
.da [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .da [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
}

/* Nav ------------------------------------------------------------ */
.da-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--da-margin);
  background: #0a0a0a;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.da-mark {
  display: inline-flex; align-items: baseline; gap: 0;
  font-weight: 800; font-size: 17px; letter-spacing: -.4px;
  font-family: 'Inter', sans-serif;
  color: #fff;
}
.da-mark .slash { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; padding: 0 1px; }
.da-nav-links { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.da-nav-links a {
  font-size: 14px; font-weight: 500; padding: 6px 0;
  position: relative;
  color: rgba(255,255,255,.8);
}
.da-nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 2px;
  height: 1px; background: #fff;
  transition: right .35s cubic-bezier(.2,.7,.2,1);
}
.da-nav-links a:hover { color: #fff; }
.da-nav-links a:hover::after { right: 0; }
.da-nav-meta {
  display: none;
}

/* Main / sections ------------------------------------------------ */
.da-main { display: block; }
.da-section { padding: var(--da-section) var(--da-margin); position: relative; }
.da-section + .da-section { border-top: 1px solid var(--da-line); }

/* Section heads -------------------------------------------------- */
.da-section-head {
  display: grid;
  grid-template-columns: clamp(120px, 14vw, 180px) 1fr;
  gap: clamp(20px, 4vw, 60px);
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 80px);
}
.da-section-head .num {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 1px; color: var(--da-mute);
  padding-bottom: 8px; border-bottom: 1px solid var(--da-line);
}
.da-section-head h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 7.5vw, 110px);
  line-height: .96;
  letter-spacing: -.04em;
  text-transform: none;
  margin: 0;
  color: var(--da-ink);
}
.da-section-head h2 em {
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-style: italic; font-weight: 400;
  letter-spacing: -.02em;
}

/* Hero — BRNT/CO typographic block --------------------------------- */
.da-hero-black {
  width: 100%;
  min-height: clamp(420px, 70vh, 760px);
  background: #0a0a0a;
  color: #f4f4f4;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 72px);
}
.da-hero-typo {
  position: relative;
  width: 100%;
  max-width: 1480px;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: clamp(0px, 0.5vw, 8px);
}
.da-hero-vlabel {
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-style: italic;
  font-size: 11px;
  letter-spacing: .12em;
  color: #d8581f;
  white-space: nowrap;
  pointer-events: none;
}
.da-hero-big {
  font-family: 'factoria', 'Instrument Serif', Georgia, serif;
  font-weight: 300;
  font-size: clamp(120px, 26vw, 460px);
  line-height: .82;
  letter-spacing: .005em;
  color: #f4f4f4;
  margin: 0;
  padding-left: clamp(48px, 6vw, 96px);
  text-align: center;
}
.da-hero-sub {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(12px, 2vw, 28px);
  padding-left: clamp(48px, 6vw, 96px);
  margin-top: clamp(-8px, -0.5vw, 0px);
}
.da-hero-tagline {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 4.4vw, 78px);
  letter-spacing: -.015em;
  color: #f4f4f4;
  line-height: 1;
}
.da-hero-co {
  font-family: 'factoria', 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 5.4vw, 96px);
  line-height: 1;
  letter-spacing: -.005em;
  color: transparent;
  -webkit-text-stroke: 2px #d8581f;
}
@media (max-width: 720px) {
  .da-hero-vlabel { left: 4px; font-size: 10px; }
  .da-hero-big, .da-hero-sub { padding-left: 28px; }
  .da-hero-co { -webkit-text-stroke-width: 1.5px; }
}

/* Hero glitch / TV-static load animation -------------------------- */
.da-hero-typo .glitch {
  position: relative;
  display: inline-block;
}
.da-hero-typo .glitch::before,
.da-hero-typo .glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* inherit type from parent so the duplicate matches exactly */
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  -webkit-text-stroke: inherit;
  text-align: inherit;
  padding: inherit;
  opacity: 0;
}
/* During the glitch, the duplicates take on color-channel ghosts */
.da-hero-black.is-glitching .glitch::before {
  color: #00f0ff;
  text-shadow: 2px 0 0 #00f0ff, 0 0 8px rgba(0,240,255,.6);
  -webkit-text-stroke-color: #00f0ff;
  mix-blend-mode: screen;
  opacity: 1;
  animation: gl-jitter-r 1.5s steps(1, end) forwards;
}
.da-hero-black.is-glitching .glitch::after {
  color: #ff0072;
  text-shadow: -2px 0 0 #ff0072, 0 0 8px rgba(255,0,114,.6);
  -webkit-text-stroke-color: #ff0072;
  mix-blend-mode: screen;
  opacity: 1;
  animation: gl-jitter-l 1.5s steps(1, end) forwards;
}
.da-hero-black.is-glitching .glitch {
  animation: gl-shake 1.5s steps(1, end) forwards;
}

/* Slice clip-path keyframes for chromatic-channel ghosts — wider slices, bigger offsets */
@keyframes gl-jitter-r {
  0%   { transform: translate(22px, -8px) scaleY(1.08); clip-path: inset(4% 0 70% 0); }
  6%   { transform: translate(-18px, 4px) scaleY(.92);  clip-path: inset(38% 0 18% 0); }
  12%  { transform: translate(28px, 2px);                clip-path: inset(70% 0 5% 0); }
  18%  { transform: translate(-24px, -10px) scaleY(1.2);clip-path: inset(12% 0 60% 0); }
  26%  { transform: translate(18px, 6px) scaleY(.85);   clip-path: inset(50% 0 22% 0); }
  34%  { transform: translate(-12px, 0);                 clip-path: inset(0 0 85% 0); }
  42%  { transform: translate(20px, -4px);               clip-path: inset(28% 0 38% 0); }
  50%  { transform: translate(-26px, 8px) scaleY(1.15); clip-path: inset(62% 0 12% 0); }
  58%  { transform: translate(14px, 0);                  clip-path: inset(8% 0 78% 0); }
  66%  { transform: translate(-10px, -6px);              clip-path: inset(42% 0 32% 0); }
  74%  { transform: translate(8px, 2px);                 clip-path: inset(74% 0 6% 0); }
  82%  { transform: translate(-6px, 0);                  clip-path: inset(20% 0 60% 0); }
  88%  { transform: translate(4px, 0);                   clip-path: inset(0 0 92% 0); opacity: .7; }
  94%  { transform: translate(-2px, 0);                  clip-path: inset(0 0 0 0); opacity: .35; }
  100% { transform: translate(0,0) scaleY(1);            clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes gl-jitter-l {
  0%   { transform: translate(-22px, 8px) scaleY(.9);   clip-path: inset(60% 0 14% 0); }
  6%   { transform: translate(18px, -4px) scaleY(1.15); clip-path: inset(10% 0 72% 0); }
  12%  { transform: translate(-30px, 0);                 clip-path: inset(78% 0 4% 0); }
  18%  { transform: translate(22px, 10px) scaleY(.85);  clip-path: inset(34% 0 40% 0); }
  26%  { transform: translate(-20px, -6px);              clip-path: inset(4% 0 80% 0); }
  34%  { transform: translate(14px, 0) scaleY(1.2);     clip-path: inset(56% 0 16% 0); }
  42%  { transform: translate(-18px, 4px);               clip-path: inset(22% 0 52% 0); }
  50%  { transform: translate(24px, -10px);              clip-path: inset(68% 0 8% 0); }
  58%  { transform: translate(-16px, 0) scaleY(.95);    clip-path: inset(14% 0 70% 0); }
  66%  { transform: translate(12px, 6px);                clip-path: inset(48% 0 26% 0); }
  74%  { transform: translate(-8px, -2px);               clip-path: inset(82% 0 2% 0); }
  82%  { transform: translate(6px, 0);                   clip-path: inset(30% 0 50% 0); }
  88%  { transform: translate(-4px, 0);                  clip-path: inset(94% 0 0 0); opacity: .7; }
  94%  { transform: translate(2px, 0);                   clip-path: inset(0 0 0 0); opacity: .35; }
  100% { transform: translate(0,0) scaleY(1);            clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes gl-shake {
  0%   { transform: translate(0,0) skewX(0) scaleY(1); filter: none; }
  3%   { transform: translate(18px, -8px)  skewX(-12deg) scaleY(1.18); filter: contrast(1.8) brightness(1.6) hue-rotate(20deg); }
  7%   { transform: translate(-22px, 12px) skewX(10deg)  scaleY(.78);  filter: invert(.25) contrast(2) blur(1.2px); }
  12%  { transform: translate(28px, -6px)  skewX(-8deg)  scaleY(1.25); filter: hue-rotate(80deg) brightness(1.8); }
  17%  { transform: translate(-16px, 14px) skewX(6deg);                filter: contrast(2.4) blur(.6px); }
  23%  { transform: translate(20px, -10px) skewX(-10deg) scaleY(.82);  filter: invert(.4) brightness(1.4); }
  29%  { transform: translate(-26px, 0)    skewX(8deg)   scaleY(1.15); filter: hue-rotate(-60deg) contrast(1.6); }
  36%  { transform: translate(12px, 8px)   skewX(-6deg);               filter: contrast(2.2) hue-rotate(120deg); }
  43%  { transform: translate(-18px, -6px) skewX(7deg)   scaleY(.9);   filter: blur(1.4px) brightness(1.5); }
  50%  { transform: translate(24px, 4px)   skewX(-9deg)  scaleY(1.2);  filter: invert(.5) contrast(1.8); }
  57%  { transform: translate(-10px, 10px) skewX(4deg);                filter: hue-rotate(180deg) brightness(1.3); }
  64%  { transform: translate(16px, -5px)  skewX(-5deg)  scaleY(1.08); filter: blur(.9px) contrast(1.5); }
  71%  { transform: translate(-12px, 2px)  skewX(3deg);                filter: invert(.2) brightness(1.2); }
  78%  { transform: translate(8px, 4px); filter: hue-rotate(40deg) contrast(1.3); }
  85%  { transform: translate(-5px, -2px)  skewX(2deg); filter: brightness(1.1); }
  92%  { transform: translate(3px, 0); }
  97%  { transform: translate(-1px, 0); }
  100% { transform: translate(0,0) skewX(0) scaleY(1); filter: none; }
}

/* (Background static/scanline overlays removed — glitch runs on plain black bg) */

@media (prefers-reduced-motion: reduce) {
  .da-hero-black.is-glitching .glitch,
  .da-hero-black.is-glitching .glitch::before,
  .da-hero-black.is-glitching .glitch::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* Lede bar — intro strip below hero ----------------------------- */
.da-lede-bar {
  padding: clamp(32px, 4vw, 52px) var(--da-margin) clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--da-line);
}
.da-lede-bar-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 60px);
}
.da-lede-bar .da-lede {
  max-width: 52ch;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.5;
  color: var(--da-ink);
  margin: 0;
}
.da-lede-bar .da-lede strong { font-weight: 700; }
.da-lede-bar .da-arrow-link {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 500;
  border: 1px solid var(--da-ink);
  padding: 14px 18px; border-radius: 999px;
  transition: background .25s, color .25s, transform .12s ease-out;
  white-space: nowrap;
  background: transparent;
  flex-shrink: 0;
}
.da-lede-bar .da-arrow-link:hover { background: var(--da-ink); color: var(--da-bg); }
.da-lede-bar .da-arrow-link .ar { transition: transform .25s; }
.da-lede-bar .da-arrow-link:hover .ar { transform: translateY(2px); }

.da-lede-bar-corners {
  display: flex;
  justify-content: space-between;
  margin-top: clamp(20px, 3vw, 36px);
}
.da-lede-corner {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--da-mute); letter-spacing: .4px;
}
@media (max-width: 720px) {
  .da-lede-corner--left { display: none; }
}


/* Work projects — horizontal scroller ----------------------------- */
.da-projects-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge */
  margin: 0 calc(-1 * var(--da-margin));
  padding: 0 var(--da-margin);
}
.da-projects-scroller::-webkit-scrollbar { display: none; }

.da-projects-track {
  display: flex;
  gap: clamp(20px, 3vw, 44px);
  padding-right: var(--da-margin);
}
.da-project {
  display: block;
  position: relative;
  isolation: isolate;
  flex: 0 0 clamp(320px, 42vw, 580px);
  scroll-snap-align: start;
}
.da-project-thumb {
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  display: grid; place-items: center;
  background: #111;
  color: #fff;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.da-project:hover .da-project-thumb { transform: scale(.985); }
.da-project--wavvy .da-project-thumb { background: linear-gradient(140deg, #f8f806 0%, #f4d800 60%, #c8a900 100%); color: #0a0a0a; }
.da-project--nf04 .da-project-thumb  { background: linear-gradient(140deg, #cfeaf3 0%, #8DD5E8 55%, #2c8ca0 100%); color: #0a0a0a; }
.da-project-mark {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 8vw, 120px);
  letter-spacing: -.05em;
  position: relative; z-index: 2;
  mix-blend-mode: multiply;
}
.da-project-mark .slash { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.da-project-stripes {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0 28px, rgba(0,0,0,.06) 28px 30px);
  z-index: 1;
}
.da-project-meta { padding: 18px 0 0; }
.da-project-cat {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .5px; color: var(--da-mute);
  text-transform: none;
}
.da-project-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.05;
  letter-spacing: -.025em;
  margin: 6px 0 10px;
  color: var(--da-ink);
}
.da-project-title em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.da-project-meta p {
  max-width: 48ch;
  font-size: 15px; color: #2a2a2a;
  margin: 0 0 14px;
}
.da-project-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  padding: 8px 0; position: relative;
  transition: transform .18s ease-out;
}
.da-project-cta::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px;
  height: 1px; background: currentColor;
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.da-project:hover .da-project-cta::after { transform: scaleX(1.04); }
.da-project-cta .ar { transition: transform .25s; }
.da-project:hover .da-project-cta .ar { transform: translateX(4px); }

/* Project scroller arrow nav */
.da-projects-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: clamp(28px, 4vw, 48px);
}
.da-projects-arrow {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2.5px solid var(--da-ink);
  background: transparent;
  color: var(--da-ink);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s, color .2s, opacity .25s, transform .12s;
}
.da-projects-arrow:hover {
  background: var(--da-ink);
  color: var(--da-bg);
}
.da-projects-arrow:active { transform: scale(.92); }
.da-projects-arrow--right svg { transform: scaleX(-1); }
.da-projects-arrow.is-disabled {
  opacity: .25;
  pointer-events: none;
}

/* Studio / Services ---------------------------------------------- */
.da-services {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--da-line);
  padding-top: clamp(28px, 4vw, 48px);
}
.da-service h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -.02em;
  margin: 0 0 14px;
  color: var(--da-ink);
}
.da-service ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.da-service li {
  font-size: 14px; color: #2a2a2a;
  padding-left: 14px; position: relative;
}
.da-service li::before {
  content: '+'; position: absolute; left: 0; top: 0;
  color: var(--da-mute);
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1;
}

/* Contact -------------------------------------------------------- */
.da-contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 5vw, 80px);
}
.da-contact-copy .big {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.15;
  letter-spacing: -.025em;
  margin: 0 0 32px;
  max-width: 22ch;
}
.da-contact-copy .big em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.da-contact-list {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--da-line);
}
.da-contact-list li {
  display: grid; grid-template-columns: 140px 1fr;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--da-line);
}
.da-contact-list li > span {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px; color: var(--da-mute); letter-spacing: .5px;
}
.da-contact-list li > a {
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 500;
  letter-spacing: -.01em;
  position: relative;
}
.da-contact-list li > a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: var(--da-ink);
  transition: right .35s cubic-bezier(.2,.7,.2,1);
}
.da-contact-list li > a:hover::after { right: 0; }

.da-contact-form-block {
  border: 1px solid var(--da-line);
  border-radius: 6px;
  background: #fafafa;
}
.da-contact-form-block > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: 15px;
}
.da-contact-form-block > summary::-webkit-details-marker { display: none; }
.da-contact-form-block > summary .chev {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 22px; line-height: 1; transition: transform .35s;
  color: var(--da-mute);
}
.da-contact-form-block[open] > summary .chev { transform: rotate(45deg); color: var(--da-ink); }

.da-form { padding: 4px 22px 22px; }
.da-form-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.da-form-row--full { grid-template-columns: 1fr; }
.da-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--da-mute); letter-spacing: .3px; font-family: 'Geist Mono', ui-monospace, monospace; }
.da-form label > span { text-transform: uppercase; }
.da-form input,
.da-form textarea {
  font: inherit; font-family: 'Inter', sans-serif;
  font-size: 15px; color: var(--da-ink);
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--da-line);
  border-radius: 4px;
  transition: border-color .2s, box-shadow .2s;
  resize: vertical;
}
.da-form input:focus,
.da-form textarea:focus {
  outline: none;
  border-color: var(--da-ink);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

.da-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--da-ink); color: var(--da-bg);
  border: 1px solid var(--da-ink);
  padding: 14px 22px; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background .25s, color .25s, transform .12s ease-out;
  margin-top: 6px;
}
.da-btn:hover { background: transparent; color: var(--da-ink); }
.da-btn .ar { transition: transform .25s; }
.da-btn:hover .ar { transform: translateX(4px); }

.da-contact .flash { padding: 12px 14px; border: 1px solid var(--da-line); border-radius: 4px; margin-bottom: 8px; font-size: 14px; background: #fff; }
.da-contact .flash.error { border-color: #d54a3a; color: #8c1f12; background: #fff4f1; }
.da-contact .flash.success { border-color: #2cbf4e; color: #14601f; background: #f1fbf2; }

/* Footer --------------------------------------------------------- */
.da-footer {
  background: var(--da-ink);
  color: var(--da-bg);
  padding: clamp(60px, 9vw, 110px) var(--da-margin) 0;
  position: relative;
  overflow: hidden;
}
.da-footer-mark {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(80px, 18vw, 280px);
  line-height: .85;
  letter-spacing: -.05em;
  display: flex; align-items: baseline;
  margin-bottom: clamp(40px, 6vw, 80px);
  user-select: none;
}
.da-footer-mark .slash,
.da-footer-mark .dot { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.da-footer-mark .dot { color: #ec6b2e; }

.da-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(40px, 6vw, 80px);
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.da-footer-grid h5 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  font-weight: 500;
  margin: 0 0 14px;
}
.da-footer-grid > div { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.da-footer-grid a { position: relative; display: inline-block; padding-bottom: 1px; }
.da-footer-grid a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -1px; height: 1px; background: var(--da-bg); transition: right .35s cubic-bezier(.2,.7,.2,1); }
.da-footer-grid a:hover::after { right: 0; }
.da-footer-grid span { color: rgba(255,255,255,.7); font-size: 14px; }

.da-marquee {
  margin: 0 calc(-1 * var(--da-margin));
  padding: clamp(28px, 4vw, 50px) 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.da-marquee-track {
  display: flex; gap: 28px; align-items: center;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 5vw, 60px);
  letter-spacing: -.02em;
  animation: da-marquee 40s linear infinite;
  width: max-content;
}
.da-marquee-track .sep {
  font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400;
  color: #f8f806;
}
@keyframes da-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .da-marquee-track { animation: none; } }

.da-footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 0 26px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  font-family: 'Geist Mono', ui-monospace, monospace;
  letter-spacing: .5px;
}
.da-footer-bottom .brand-stamp { user-select: none; }

/* Responsive ----------------------------------------------------- */
@media (max-width: 960px) {
  .da-services { grid-template-columns: repeat(2, 1fr); }
  .da-contact-grid { grid-template-columns: 1fr; }
  .da-footer-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .da-project { flex: 0 0 80vw; }
  .da-section-head { grid-template-columns: 1fr; gap: 12px; }
  .da-section-head .num { padding-bottom: 6px; max-width: 160px; }
  .da-hero-foot { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 600px) {
  .da-nav-links { gap: 16px; }
  .da-nav-links a { font-size: 13px; }
  .da-services { grid-template-columns: 1fr; }
  .da-contact-list li { grid-template-columns: 110px 1fr; }
  .da-form-row { grid-template-columns: 1fr; }
  .da-hero-corner--bl, .da-hero-corner--br { font-size: 10px; }
}

/* Auth pages */
.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, #000 1px, transparent 1.5px) 0 0 / 22px 22px,
    #fff;
  padding: 24px;
}
.auth-card {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border: 2px solid #000;
}
.auth-card .head {
  background: #000; color: #fff;
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.auth-card .head .mark { font-weight: 800; font-size: 16px; letter-spacing: 1.5px; }
.auth-card .head .mark .slash { color: var(--yellow); }
.auth-card .head .chip {
  background: var(--yellow); color: #000;
  padding: 3px 8px;
  font-size: 9px; letter-spacing: 2px; font-weight: 800; text-transform: uppercase;
  border: 1px solid #fff;
}
.auth-card .body { padding: 20px; }
.auth-card h2 { margin-bottom: 14px; }

/* Floating AI assistant bubble */
.ai-bubble-root { position: fixed; right: 18px; bottom: 18px; z-index: 1000; }
.ai-bubble {
  width: 56px; height: 56px; border-radius: 999px;
  background: var(--yellow); color: #000;
  border: 2px solid #000; box-shadow: 4px 4px 0 #000;
  cursor: pointer; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 22px;
  transition: transform .12s, box-shadow .12s;
}
.ai-bubble:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; }
.ai-bubble:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }
.ai-bubble[data-unread="1"]::after {
  content: ''; position: absolute; top: -4px; right: -4px;
  width: 14px; height: 14px; background: var(--red);
  border: 2px solid #000; border-radius: 999px;
}

.ai-panel {
  position: absolute; right: 0; bottom: 70px;
  width: 360px; height: 520px; max-height: calc(100vh - 90px);
  background: #fff; border: 2px solid #000; box-shadow: 6px 6px 0 #000;
  display: none; flex-direction: column; overflow: hidden;
}
.ai-panel.open { display: flex; }

.ai-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: #000; color: var(--yellow);
  font-weight: 800; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  flex: 0 0 auto;
}
.ai-panel-actions { display: flex; gap: 8px; align-items: center; }
.ai-panel-actions .ai-expand,
.ai-panel-actions .ai-close {
  background: transparent; border: none; color: var(--yellow); cursor: pointer;
  font-size: 14px; padding: 0 4px; text-decoration: none; line-height: 1;
}
.ai-panel-actions .ai-expand:hover,
.ai-panel-actions .ai-close:hover { background: var(--yellow); color: #000; }

.ai-panel .chat {
  flex: 1 1 auto; max-height: none; min-height: 0; border: none;
  border-bottom: 1.5px solid #000; padding: 12px;
}
.ai-panel .chat .msg { font-size: 12px; }
.ai-empty {
  color: var(--ink-3); text-align: center; padding: 1.5rem .5rem;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
}

.ai-panel-form { display: flex; gap: 6px; padding: 8px; flex: 0 0 auto; background: #fff; }
.ai-panel-input {
  flex: 1; min-height: 38px; max-height: 120px; resize: none;
  padding: 8px 10px; font: inherit; font-size: 12px;
  border: 1.5px solid #000; background: #fff; color: var(--ink);
}
.ai-panel-input:focus { outline: 3px solid var(--yellow); outline-offset: -3px; }
.ai-panel-send {
  background: var(--yellow); color: #000; border: 1.5px solid #000;
  padding: 0 14px; font-weight: 900; font-size: 16px; cursor: pointer;
}
.ai-panel-send:hover:not(:disabled) { background: #000; color: var(--yellow); }
.ai-panel-send:disabled { opacity: .5; cursor: not-allowed; }
.ai-panel-input:disabled { background: var(--soft-2); cursor: not-allowed; }

/* Proposed action card (AI tool-use confirmation) */
.ai-action-card {
  align-self: stretch; max-width: 100%;
  background: #fff; border: 2px solid #000;
  padding: 10px 12px; margin: 2px 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px; letter-spacing: .3px;
}
.ai-action-card.is-approved  { background: var(--yellow-soft); }
.ai-action-card.is-cancelled { background: var(--soft-2); opacity: .7; }
.ai-action-head {
  font-size: 9px; letter-spacing: 2px; font-weight: 800;
  color: #000; background: var(--yellow); padding: 2px 6px;
  align-self: flex-start; border: 1.5px solid #000;
}
.ai-action-name {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-weight: 700; font-size: 11px; color: var(--ink);
}
.ai-action-summary {
  font-weight: 700; color: var(--ink); font-size: 12px; line-height: 1.4;
}
.ai-action-details summary {
  cursor: pointer; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-3); padding: 2px 0;
}
.ai-action-details[open] summary { color: var(--ink); }
.ai-action-details pre {
  background: var(--soft-2); border: 1px solid #000; padding: 6px 8px;
  font-size: 10px; line-height: 1.4; overflow-x: auto; margin: 4px 0 0;
  white-space: pre-wrap; word-break: break-word;
}
.ai-action-buttons { display: flex; gap: 6px; margin-top: 2px; }
.ai-action-card button {
  flex: 1; padding: 6px 8px;
  font: inherit; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  border: 1.5px solid #000; cursor: pointer;
}
.ai-action-approve { background: var(--yellow); color: #000; }
.ai-action-approve:hover:not(:disabled) { background: #000; color: var(--yellow); }
.ai-action-cancel  { background: #fff; color: #000; }
.ai-action-cancel:hover:not(:disabled)  { background: var(--red); color: #fff; }
.ai-action-card button:disabled { opacity: .5; cursor: not-allowed; }
.ai-action-status {
  font-size: 9px; letter-spacing: 1.5px; font-weight: 800; text-transform: uppercase;
  color: var(--ink-3);
}
.ai-action-card.is-approved  .ai-action-status { color: #000; }
.ai-action-card.is-cancelled .ai-action-status { color: var(--red); }

/* Destructive variant — red border + red header chip */
.ai-action-card.is-destructive {
  border-color: var(--red);
  box-shadow: 3px 3px 0 var(--red);
}
.ai-action-card.is-destructive .ai-action-head {
  background: var(--red); color: #fff; border-color: var(--red);
}
.ai-action-card.is-destructive .ai-action-approve {
  background: var(--red); color: #fff; border-color: var(--red);
}
.ai-action-card.is-destructive .ai-action-approve:hover:not(:disabled) {
  background: #000; color: var(--red); border-color: #000;
}

/* Field-level diff for update_* actions */
.ai-action-diff {
  margin: 4px 0 0; padding: 6px 8px;
  background: var(--soft-2); border: 1px solid #000;
  display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px;
  font-size: 10px; line-height: 1.5;
}
.ai-action-diff dt {
  text-transform: uppercase; letter-spacing: 1px; font-weight: 800;
  color: var(--ink-3); align-self: center;
}
.ai-action-diff dd { margin: 0; word-break: break-word; }
.ai-action-diff .diff-before {
  text-decoration: line-through; color: var(--ink-3);
}
.ai-action-diff .diff-arrow { color: var(--ink-3); margin: 0 4px; }
.ai-action-diff .diff-after {
  font-weight: 700; color: var(--ink);
  background: var(--yellow-soft); padding: 0 3px;
}
.ai-action-nodiff {
  font-size: 10px; color: var(--ink-3); font-style: italic;
}
.ai-action-context {
  font-size: 10px; color: var(--ink); padding: 4px 6px;
  background: var(--soft-2); border-left: 3px solid var(--red);
}

@media (max-width: 600px) {
  .ai-bubble-root { right: 14px; bottom: 14px; }
  .ai-panel.open {
    position: fixed; inset: 0; right: 0; bottom: 0;
    width: 100vw; height: 100dvh; max-height: 100dvh;
    border: none; box-shadow: none;
  }
}

/* ───────────────────────────────────────────────────────────
   Alt landing — pill modifiers
   ─────────────────────────────────────────────────────────── */
.da-lede-bar .da-arrow-link--pill {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 2px solid var(--da-ink);
}

.da-project-btn--pill {
  display: inline-flex;
  align-items: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 14px 22px;
  border-radius: 999px;
  border: 2px solid var(--da-ink);
  background: transparent;
  color: var(--da-ink);
  transition: background .25s, color .25s, transform .12s ease-out;
}
body.da .da-project-btn--pill:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}


/* ───────────────────────────────────────────────────────────
   Alt landing — Factoria only on the inline <em> italic word
   inside section heads. Everything else stays in Inter.
   (Factoria loaded via Typekit kit ctm7iro.css — linked in
   landing_alt.php. Variants: 400, 400 italic, 700, 700 italic.)
   ─────────────────────────────────────────────────────────── */
.landing-alt .da-section-head h2 em {
  font-family: 'factoria', 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 200; /* Factoria Thin Italic */
}


/* Alt landing — keep all titles on a single line on desktop */
@media (min-width: 720px) {
  .landing-alt .da-section-head h2,
  .landing-alt .da-project-title,
  .landing-alt .da-hero-big,
  .landing-alt .da-hero-co {
    white-space: nowrap;
  }
}


/* ───────────────────────────────────────────────────────────
   Alt landing — project card border + hover + meta spacing
   ─────────────────────────────────────────────────────────── */
/* 1.5px black border around each project card thumbnail */
.landing-alt .da-project-thumb {
  border: 1.5px solid #000;
  transition: transform .8s cubic-bezier(.2,.7,.2,1),
              box-shadow .35s cubic-bezier(.2,.7,.2,1),
              border-color .35s ease;
}

/* Hover effect: lift, soft drop-shadow, zoom-in on the bg image,
   and a subtle grayscale-to-color transition on the inner image */
.landing-alt .da-project-thumb {
  background-size: cover;
  background-position: center;
  filter: saturate(1);
  transition: transform .6s cubic-bezier(.2,.7,.2,1),
              box-shadow .35s cubic-bezier(.2,.7,.2,1),
              filter .4s ease,
              border-color .35s ease;
}
.landing-alt .da-project:hover .da-project-thumb {
  /* No scale — just lift. Scaling a 4px border produces jagged corners
     and pushes the card past the scroller's clip edge. */
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.08);
  filter: saturate(1.15) contrast(1.04);
}

/* Give the scroller breathing room above + below so the lifted card
   and its drop-shadow don't get clipped by overflow-y: hidden. */
.landing-alt .da-projects-scroller {
  padding-top: 12px;
  padding-bottom: 24px;
}

/* CTA pill micro-interaction on card hover */
.landing-alt .da-project:hover .da-project-btn--pill {
  transform: translateY(-1px) scale(1.04);
  filter: brightness(1.08);
}

/* Tighter, more deliberate vertical rhythm in the project meta block */
.landing-alt .da-project-meta {
  padding-top: 22px;
}
.landing-alt .da-project-cat {
  display: block;
  margin-bottom: 14px;
  text-transform: capitalize;
}
.landing-alt .da-project-title {
  margin: 0 0 16px;
}
.landing-alt .da-project-meta p {
  margin: 0 0 22px;
}


/* ───────────────────────────────────────────────────────────
   Alt landing — section identifiers (01 — Work, etc.)
   Stacked, left-aligned: label sits directly above the title
   so all section h2s share a single left edge.
   ─────────────────────────────────────────────────────────── */
.landing-alt .da-section-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: clamp(20px, 3vw, 56px);
}

.landing-alt .da-section-head h2 {
  grid-column: auto;
  margin: 0;
}

.landing-alt .da-section-id {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  color: #888;
  padding-bottom: 8px;
  border-bottom: 1px solid #c8c8c8;
  width: auto;
  max-width: 220px;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .landing-alt .da-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* Bump project thumb border 1.5px → 4px */
.landing-alt .da-project-thumb {
  border-width: 4px;
}