:root {
  --bg: #F3F1EC;
  --ink: #171716;
  --accent: #F03419;
  --rule: #B8B5AE;
  --rule-dark: #383734;
  --card-dark: #222220;
  --on-dark: #F3F1EC;
  --on-dark-muted: #D5D2CA;
  --display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --body: 'Inter', system-ui, -apple-system, sans-serif;
  --band: 1200px;
  --pad: 40px;

  /* ---- Vertical rhythm -------------------------------------------------
     One token for the space at the top and the bottom of every top-level
     section, so the gap at a boundary is always 2 x --sec and never the
     sum of a wrapper's padding and the block's own. Before this the page
     carried six distinct top paddings and nine bottom ones, because
     several sections wore an inline `padding-block: 60px` on top of a
     component that already had its own clamp. The worst adjacency
     measured 277px of dead space against 60px elsewhere.

     --sec-half is the intra-section step: intro to body, strip padding,
     carousel slide padding. Deriving it keeps the two in proportion at
     every width rather than drifting apart. */
  --sec: clamp(56px, 5vw, 72px);
  --sec-half: calc(var(--sec) / 2);

  /* One reading measure. 1ch in Inter is about 1.14 average characters,
     so 62ch lands at roughly 70 characters a line at any of the body
     sizes on this page. .lead used to carry five different max-widths
     (560px, 640px twice, 68ch, 800px) and the FAQ answers, the caveat
     list and the timeline bodies ran at 85 to 123 characters. */
  --measure: 62ch;

  /* The one editorial corner radius. The page is otherwise a flat
     hairline system; the 3px and 5px radii left in the file belong to
     the dashboard mockup, which is imitating a real web app. */
  --r: 4px;
}

/* Applied to every top-level section. -t and -b exist for the two places
   where one section supplies the top of a pair and the next supplies the
   bottom (the FAQ heading and its accordion). */
.sec   { padding-block: var(--sec); }
.sec-t { padding-top: var(--sec); }
.sec-b { padding-bottom: var(--sec); }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 400 18px/1.45 var(--body);
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

.band { max-width: var(--band); margin: 0 auto; }
.pad { padding-inline: var(--pad); }

/* Mono Typography */
.m {
  font: 500 12px/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.m.red { color: var(--accent); }
.m.light { color: var(--on-dark); }

h1 {
  font: 800 clamp(36px, 5vw, 68px)/0.98 var(--display);
  letter-spacing: -0.04em;
  max-width: 1080px;
}
h2 {
  font: 700 clamp(26px, 3vw, 40px)/1.05 var(--display);
  letter-spacing: -0.03em;
}

/* Nav Bar */
.sitehead {
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  background: rgba(243, 241, 236, 0.94);
  backdrop-filter: blur(12px);
  z-index: 100;
}
.sitehead .in {
  padding: 20px var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px 28px;
  flex-wrap: wrap;
}
.sitehead .mark {
  display: flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
}
.sitehead .mark b {
  font: 800 18px/1 var(--display);
  letter-spacing: -0.02em;
}
.sitehead ul { list-style: none; display: flex; flex-wrap: wrap; gap: 24px; }
.sitehead a.lnk {
  font: 500 12px/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color 0.15s ease;
}
.sitehead a.lnk:hover { color: var(--accent); }
.sitehead a.mail { color: var(--accent); }

/* Hero Section */
.hero-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
  padding-block: var(--sec);
}
.avail { display: flex; align-items: center; gap: 12px; }
.twoup {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  width: 100%;
  margin-top: 10px;
}
.lead { max-width: var(--measure); font-size: 17px; line-height: 1.5; color: #2e2d2a; }
.note { font: 400 14px/1.5 var(--mono); color: #5f5d58; }

.rule { border-bottom: 1px solid var(--rule); }

/* Stats Bar */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--rule);
}
.stats .s {
  padding: var(--sec-half) var(--pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  transition: background 0.2s ease;
}
.stats .s:hover { background: rgba(240, 52, 25, 0.03); }
.stats .s + .s { border-left: 1px solid var(--rule); }
.stats .n {
  font: 800 clamp(38px, 4.2vw, 54px)/1 var(--display);
  letter-spacing: -0.02em;
  color: var(--accent);
}

/* Intro Header. The top space belongs to the section wrapper (.sec), not
   to the intro, or the two stack. The intro only owns the step down to the
   body it introduces. */
.intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-block: 0 var(--sec-half);
}

/* Projects Layout Section */
.proj-container {
  width: 100%;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.proj {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  background: var(--bg);
}
.proj + .proj { border-top: 1px solid var(--rule); }

.proj .txt {
  padding: 40px var(--pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  justify-content: center;
}
.proj .tags { color: #5f5d58; margin-top: 4px; font-size: 11px; }

.proj .shot {
  background: #171716;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  min-height: 420px;
}
.proj.flip .txt { order: 2; border-left: 1px solid var(--rule); }
.proj.flip .shot { order: 1; }
.proj:not(.flip) .shot { border-left: 1px solid var(--rule); }

/* Buttons */
.btnrow { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-decoration: none;
  border: 1px solid var(--ink);
  padding: 13px 16px;
  background: var(--ink);
  color: var(--bg);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(240, 52, 25, 0.25);
}
.btn.light-btn {
  background: transparent;
  border-color: rgba(243,241,236,0.6);
  color: var(--on-dark);
}
.btn.light-btn:hover {
  background: var(--on-dark);
  color: var(--ink);
  border-color: var(--on-dark);
}

/* Perfect Scaled Vector Dashboard UI Component */
.dashboard-window {
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px;
  font-family: var(--body);
  color: #0f172a;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  overflow: hidden;
}

.db-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 6px;
  font-size: 9px;
  gap: 4px;
}
.db-nav-tabs { display: flex; gap: 2px; overflow: hidden; }
.db-tab {
  padding: 3px 6px;
  border-radius: 3px;
  background: #f1f5f9;
  color: #475569;
  font-weight: 600;
  font-size: 8.5px;
  white-space: nowrap;
}
.db-tab.active { background: #2563eb; color: #ffffff; }

.db-global-filters { display: flex; align-items: center; gap: 3px; font-size: 8px; color: #64748b; font-weight: 600; white-space: nowrap; }
.filter-select {
  border: 1px solid #cbd5e1;
  padding: 2px 5px;
  border-radius: 3px;
  background: #fff;
  color: #0f172a;
  font-weight: 600;
  font-size: 8px;
}

.db-badge-row { display: flex; align-items: center; gap: 6px; font-family: var(--mono); }
.m-badge { font-size: 8.5px; font-weight: 600; color: #64748b; letter-spacing: 0.05em; }
.sub-badge { font-size: 8px; padding: 2px 5px; background: #ffedd5; color: #c2410c; border-radius: 10px; font-weight: 600; }

.db-form-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1.1fr 1fr 1fr;
  gap: 4px;
  background: #f8fafc;
  padding: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
}
.input-box {
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  padding: 3px 5px;
  font-size: 8px;
  color: #0f172a;
  background: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.input-box.placeholder { color: #94a3b8; }
.btn-save {
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  background: #fff;
  color: #475569;
  font-size: 8px;
  font-weight: 600;
  cursor: pointer;
  padding: 3px 5px;
  white-space: nowrap;
}

.db-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}
.target-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0; /* Prevents flex/grid overflow */
}

.tcard-header { display: flex; flex-direction: column; gap: 2px; }
.tcard-title { display: flex; align-items: center; justify-content: space-between; gap: 2px; font-size: 9.5px; }
.c-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.c-dot.dot-green { background: #16a34a; }
.c-dot.dot-orange { background: #ea580c; }
.c-dot.dot-blue { background: #2563eb; }
.track-badge { font-size: 7.5px; padding: 1px 3px; background: #dcfce7; color: #15803d; border-radius: 3px; font-weight: 600; white-space: nowrap; letter-spacing: -0.02em; }
.track-badge.behind { background: #fee2e2; color: #dc2626; }

.tcard-val strong { font-size: 12px; font-weight: 800; font-family: var(--display); display: block; }
.tcard-sub { font-size: 7.5px; color: #64748b; display: block; white-space: nowrap; }

.tcard-progress { height: 4px; background: #f1f5f9; border-radius: 2px; overflow: hidden; display: flex; }
.pbar-fill.green { background: #84cc16; }
.pbar-fill.orange { background: #f97316; }

.tcard-metrics { display: flex; flex-direction: column; gap: 2px; font-size: 7.5px; color: #64748b; border-top: 1px solid #f1f5f9; padding-top: 4px; }
.tcard-metrics div { display: flex; justify-content: space-between; align-items: center; }
.tcard-metrics strong { font-size: 8px; color: #0f172a; }
.green-text { color: #16a34a !important; }

/* Move-Out Catalog Window */
.catalog-window {
  width: 100%;
  max-width: 520px;
  background: #18181b;
  border: 1px solid #27272a;
  border-radius: 8px;
  padding: 14px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cat-bar { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #27272a; padding-bottom: 8px; }
.cat-status-pill { font-size: 9px; font-family: var(--mono); background: #27272a; color: var(--accent); padding: 3px 6px; border-radius: 4px; }
.cat-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cat-card { background: #09090b; border: 1px solid #27272a; border-radius: 6px; overflow: hidden; }
.cat-img {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a1a1aa;
  font-family: var(--mono);
  font-size: 10px;
}
.cat-img.img-furniture { background: linear-gradient(135deg, #1e293b, #0f172a); }
.cat-img.img-lamp { background: linear-gradient(135deg, #334155, #1e293b); }
.cat-details { padding: 8px; font-size: 10px; display: flex; flex-direction: column; gap: 2px; }
.price-tag { color: var(--accent); font-family: var(--mono); font-size: 9px; }

/* Dark Band (Homebase) Section */
.dark { background: var(--ink); color: var(--on-dark); width: 100%; }
.dark .inner { padding-block: var(--sec); display: flex; flex-direction: column; gap: 36px; }
.dark h2 { color: var(--on-dark); font-size: clamp(26px, 3.5vw, 44px); }
.dark p { color: var(--on-dark-muted); }
.dark .hb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: center; }

.hb-terminal {
  background: var(--card-dark);
  border: 1px solid var(--rule-dark);
  border-radius: var(--r);
  padding: 18px;
  font-family: var(--mono);
  font-size: 11px;
}
.hb-term-bar { border-bottom: 1px solid var(--rule-dark); padding-bottom: 8px; color: #a3a3a3; font-weight: 600; }
.hb-term-body { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.t-red { color: var(--accent); }

.strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-dark);
  border: 1px solid var(--rule-dark);
}
.strip div { background: var(--card-dark); padding: 20px; transition: background 0.2s ease; }
.strip div:hover { background: #2b2b28; }
.strip div:last-child { background: var(--accent); }
.strip .k { font: 500 12px/1.5 var(--mono); color: var(--on-dark); }

/* Timeline. No padding of its own: its section wrapper carries .sec. The
   two together were 130px top and bottom, the worst boundary on the page. */
.tl { display: flex; flex-direction: column; gap: 32px; }
.tl .rows { border-top: 1px solid var(--rule); }
.tl .r {
  display: grid;
  grid-template-columns: 140px 220px minmax(0, 1fr);
  gap: 12px 28px;
  padding-block: 24px;
  border-bottom: 1px solid var(--rule);
  transition: background 0.2s ease, padding-left 0.2s ease;
}
.tl .r:hover { background: rgba(240, 52, 25, 0.02); padding-left: 8px; }
.tl .org { font-weight: 700; font-size: 15px; }
.tl .role { font-size: 12px; color: #5f5d58; margin-top: 4px; font-family: var(--mono); }
.tl .d { font-size: 15px; color: #2e2d2a; max-width: var(--measure); }

/* Capabilities */
.caps { padding-block: clamp(44px, 5.5vw, 70px); display: flex; flex-direction: column; gap: 32px; }
.capgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.capgrid div {
  padding: 24px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background 0.2s ease;
}
.capgrid div:hover { background: #e9e6df; }
.capgrid p { font-size: 14.5px; line-height: 1.5; color: #2e2d2a; }

/* CTA Section */
.cta { background: var(--accent); color: var(--on-dark); width: 100%; }
.cta .inner { padding-block: var(--sec) var(--sec-half); display: flex; flex-direction: column; gap: 36px; }
.cta h2 { color: var(--on-dark); font-size: clamp(30px, 4.2vw, 52px); max-width: 22ch; }
.cta .foot {
  border-top: 1px solid rgba(243,241,236,0.4);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.cta .foot .m { color: var(--on-dark); }

/* Footer */
.sitefoot { border-top: 1px solid var(--rule); background: var(--bg); }
.sitefoot .in { padding: 24px var(--pad); }
.sitefoot .row1 { display: flex; justify-content: space-between; font: 500 12px var(--mono); }

/* Floating Quick Action Dock */
.floating-dock {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(23, 23, 22, 0.94);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(243, 241, 236, 0.2);
  border-radius: 40px;
  padding: 8px 18px;
  z-index: 999;
  box-shadow: 0 16px 36px rgba(0,0,0,0.3);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  pointer-events: none;
}
.floating-dock.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.dock-content {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
}
.dock-text {
  font: 500 11px var(--mono);
  color: var(--on-dark);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.dock-btn {
  font: 600 10.5px var(--mono);
  color: var(--ink);
  background: var(--on-dark);
  padding: 6px 12px;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.dock-btn:hover {
  background: var(--accent);
  color: #fff;
}

/* Mobile Breakdown */
@media (max-width: 900px) {
  :root { --pad: 20px; }
  .twoup, .stats, .proj, .dark .hb, .strip, .capgrid { grid-template-columns: minmax(0, 1fr); }
  .stats .s + .s { border-left: 0; border-top: 1px solid var(--rule); }
  .proj.flip .txt, .proj:not(.flip) .shot { order: 0; border-left: 0; }
  .proj .txt { padding: 28px var(--pad); }
  .capgrid { border-left: 0; }
  .capgrid div { border-right: 0; }
  .tl .r { grid-template-columns: minmax(0, 1fr); }
  .floating-dock { width: 90%; }
  .dock-text { font-size: 10px; }

  /* Header. At 360px the six nav items wrapped to a THIRD line and the header
     went to 149px, while .anchor only cleared 124px, so every anchored section
     landed underneath it. A tighter gap keeps the nav on one row down to 360px.
     The links then carry their own vertical padding, which turns a 14px-tall
     tap target into a 44px one, and the smaller box padding pays for it: the
     header is 95px at 360, 390 and 430, where it used to be 149, 99 and 99.
     If you change the nav item count or these paddings, re-measure .anchor's
     scroll-margin-top. */
  .sitehead .in { padding: 10px var(--pad); gap: 2px 20px; }
  .sitehead .mark { padding-block: 5px; }
  .sitehead ul { gap: 0 16px; }
  .sitehead a.lnk { display: block; padding: 15px 0; }

  /* min-height: 420px left up to 150px of empty black under a visual that is
     only as tall as the phone is wide. */
  .proj .shot { min-height: 0; padding: 24px var(--pad); }

  /* The dock is fixed 20px off the bottom of the viewport, so at the end of the
     page it sat on top of the last footer line. */
  .sitefoot .in { padding-bottom: 104px; }
}

/* Portrait: the file's own aspect drives the height, so it can never be stretched.
   Declared width/height on the <img> match the file exactly to avoid layout shift. */
.about-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.portrait-card { display: flex; flex-direction: column; gap: 10px; }
.portrait-img-wrapper { background: #171716; overflow: hidden; }
.portrait-img-wrapper img { display: block; width: 100%; height: auto; }
.portrait-caption { font: 500 11px/1.4 var(--mono, monospace); letter-spacing: 0.1em; text-transform: uppercase; color: #5f5d58; }
@media (max-width: 900px) { .about-hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* The portrait is already cropped to the black wall, so nothing should re-crop it.
   Something upstream was forcing a 3:4 wrapper with object-fit: cover, which sliced
   the sign off at both edges. Let the file's own ratio drive the height instead. */
.about-hero-grid .portrait-card .portrait-img-wrapper { aspect-ratio: auto; height: auto; }
.about-hero-grid .portrait-card .portrait-img-wrapper img {
  width: 100%; height: auto; aspect-ratio: auto; object-fit: fill;
}

/* Interactive target controls on the dashboard mockup */
select.input-box, input.input-box { font-family: inherit; cursor: pointer; }
input.input-box { cursor: text; }
select.input-box:focus-visible, input.input-box:focus-visible, .btn-save:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
.btn-save { cursor: pointer; }
.btn-save:hover { background: #f1f5f9; }
.db-hint { margin-top: 6px; font-size: 8px; color: #64748b; display: flex; gap: 6px; align-items: center; }
.db-reset { background: none; border: 0; padding: 0; font: inherit; color: #2563eb; cursor: pointer; text-decoration: underline; }

/* Whole-visual click targets */
.shot-link { display: block; text-decoration: none; color: inherit; transition: opacity 0.18s; }
.shot-link:hover { opacity: 0.92; }
.shot-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Real screenshots in the project visuals */
.shot-img { display: block; width: 100%; height: auto; }
.shot-link .shot-img { transition: opacity 0.18s; }

/* The dashboard mockup is built at a small fixed scale; zoom enlarges it while
   keeping layout and click targets correct (transform: scale would not). */
.dashboard-window { zoom: 1.22; }
@media (max-width: 900px) {
  .dashboard-window { zoom: 1; }

  /* The status pill is white-space: nowrap and .tcard-title never got a chance
     to shrink around it, so .db-cards-grid ran ~14px wider than the window and
     the window's own overflow: hidden sliced "Behind Target" off the Sharm card.
     Verified at 360, 390 and 430. Giving the pill its own line inside the card
     is what lets the three columns fit; stacking the cards was the alternative
     and it triples the height of the mockup. Grid rather than a wrapped flex
     row because justify-self keeps the pill the width of its own text, and a
     flex-basis: 100% item stretches into a full-width banner. */
  .tcard-title { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 4px; }
  .tcard-title .track-badge { grid-column: 1 / -1; justify-self: start; }

  /* Seven 8.5px tabs cannot share a 322px window with the month and city
     filters: the strip wanted 546px and had 141px at 390 and 111px at 360, so
     .db-nav-tabs' own overflow: hidden was slicing the ACTIVE tab down to
     "Ta", which reads as a broken render rather than as a narrow app. On a
     phone the mockup shows the view you are actually looking at, and the
     topbar wraps rather than clipping if the filters still do not fit.
     Measured at 360, 390 and 430. */
  .db-topbar { flex-wrap: wrap; }
  .db-nav-tabs .db-tab:not(.active) { display: none; }

  /* The control row is the one genuinely interactive part of the mockup, and
     the cue above it says "try it", but at zoom 1 the select, the number input
     and the Save button were all 20px tall with their labels ellipsised to
     "Per BA ta...". Two readable columns instead of five 8px ones. */
  .db-form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; padding: 8px; }
  .db-form-row .input-box,
  .db-form-row .btn-save { font-size: 12px; min-height: 44px; padding: 8px 10px; }
  .db-form-row div.input-box { display: flex; align-items: center; }
  .db-form-row .btn-save { grid-column: 1 / -1; }
  /* The negative margin keeps the hint line the height it looks, while the
     padding gives Reset a 44px box to be tapped in. */
  .db-hint { font-size: 11px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
  .db-reset { padding: 15px 10px; margin: -9px -10px; }
}

/* The case studies collapse by default, so the project blocks stay scannable.
   Native <details>, the same pattern as /faq, which means it works with JS off
   and is keyboard operable without any focus management of our own.
   A modal was the alternative and was rejected: it needs JS, a focus trap and an
   escape hatch, and it reads badly on mobile. */
.cs-fold { width: 100%; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cs-fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.cs-fold > summary::-webkit-details-marker { display: none; }
.cs-fold > summary::marker { content: ''; }
.cs-fold > summary:hover .m { color: var(--accent); }
.cs-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cs-fold > summary .m { transition: color 0.15s ease; }
.fold-ic {
  font: 500 20px/1 var(--mono);
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.cs-fold[open] > summary .fold-ic { transform: rotate(45deg); }
.cs-fold .cs { padding: 4px 0 24px; }
.dark .cs-fold { border-color: var(--rule-dark); }

/* Case-study body inside each project block: PROBLEM / BUILD / PROOF / IMPACT.
   The :not(.m) guard matters. `.cs .row p` alone outranks `.m` on specificity and
   would blow the 12px mono labels up to 15px body size. */
.cs { display: flex; flex-direction: column; gap: 18px; }
.cs .row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
.cs .row p:not(.m) { font-size: 15px; line-height: 1.5; color: #2e2d2a; }
.cs .row .m { padding-top: 3px; }
.dark .cs .row p:not(.m) { color: var(--on-dark-muted); }
@media (max-width: 900px) { .cs .row { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* Illustrative duplicate-pair table. Invented values on the real column shape;
   see the "never publish real advisor data" non-negotiable in CLAUDE.md.
   The four highlighted columns are the dedup key. */
.dupt-wrap { margin-top: 12px; border: 1px solid var(--rule); background: #fff; overflow-x: auto; }
/* Six columns is the most that fits a half-band column without clipping.
   Do not add columns or raise the font without re-checking that `status` is
   still visible; the kept/removed tags are the point of the interaction. */
.dupt { border-collapse: collapse; width: 100%; font: 500 10px/1.4 var(--mono); }
.dupt th, .dupt td { padding: 6px 6px; text-align: left; white-space: nowrap; border-bottom: 1px solid #e9e6df; }
.dupt th { font-weight: 600; color: #5f5d58; text-transform: uppercase; letter-spacing: 0.06em; }
.dupt tbody tr:last-child td { border-bottom: 0; }
.dupt .k { background: rgba(240, 52, 25, 0.07); }
.dupt th.k { color: var(--accent); }
.dupt-note { margin-top: 8px; font: 400 11.5px/1.5 var(--mono); color: #5f5d58; }
.dupt-note.light { color: var(--on-dark-muted); opacity: 0.75; }

/* The dedup interaction. The duplicate row is struck through rather than deleted,
   which matches the site's own "removed, not rejected" language. */
.dupt tr.is-dup td { background: rgba(240, 52, 25, 0.04); }
/* Reserve the status width up front so the table does not reflow when the
   tags appear on dedup. */
.dupt .st { text-align: right; min-width: 58px; }
.dupt .tag {
  display: none;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 8.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.dupt.deduped .tag { display: inline-block; }
.dupt .tag.keep { background: #dcfce7; color: #15803d; }
.dupt .tag.gone { background: #fee2e2; color: #dc2626; }
.dupt tbody tr { transition: opacity 0.35s ease; }
.dupt.deduped tr.is-dup { opacity: 0.4; }
.dupt.deduped tr.is-dup td:not(.st) { text-decoration: line-through; }

.dupt-bar { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.dupt-btn {
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.08em;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  padding: 9px 12px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.dupt-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-1px); }
.dupt-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dupt-kpis { display: flex; flex-wrap: wrap; gap: 14px; }
.kpi { display: flex; flex-direction: column; gap: 3px; font-family: var(--mono); }
.kpi b { font-size: 9px; font-weight: 600; letter-spacing: 0.07em; color: #5f5d58; }
.kpi i {
  font-style: normal;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  transition: color 0.25s ease;
}
.kpi i.corrected { color: #15803d; }
.kpi i.inflated { color: var(--accent); }

/* Homebase context-block generator, on the existing .hb-terminal shell */
.hb-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; }
.hb-lbl { font: 600 9px/1 var(--mono); letter-spacing: 0.08em; color: #a3a3a3; }
.hb-sel {
  font: 500 10.5px var(--mono);
  background: #111110;
  color: var(--on-dark);
  border: 1px solid var(--rule-dark);
  border-radius: 3px;
  padding: 4px 6px;
  cursor: pointer;
}
.hb-sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hb-term-body .ln { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; }
.hb-term-body .ln span { color: #8a8a85; }
.hb-term-body .ln b { font-weight: 500; color: var(--on-dark); }

/* The rows cascade in when the fold opens.
   This is an animation, not a transition out of a hidden base state, and that is
   deliberate: the rows' normal style is fully visible, and the hidden frame exists
   only inside the keyframes. So if animations never run, or JS never adds .in, the
   content is simply there. A transition from `opacity: 0` can strand it invisible. */
@keyframes cs-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.cs .row.in { animation: cs-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* At 390px the table has about 348px to work with, so it needs to run tighter
   still or `status` is pushed out of view and the tags become unreachable.
   Measured again at 360px, where it had 318px and needed 329, so the STATUS
   header rendered as "STATU". These paddings buy back the 11px and leave the
   table fitting with slack at all three phone widths. */
@media (max-width: 900px) {
  .dupt { font-size: 9px; }
  .dupt th, .dupt td { padding: 5px 3px; }
  .dupt .st { min-width: 46px; }
}

/* Touch targets.
   This block sits at the end of the file on purpose. .dupt-btn, .hb-sel and
   .dock-btn all declare their padding further down than the "Mobile Breakdown"
   media query, so an override placed up there loses the cascade at equal
   specificity and silently does nothing. Everything here measured between 24px
   and 39px tall on a phone before the change. */
@media (max-width: 900px) {
  .btn { min-height: 44px; }
  .dupt-btn { padding: 16px; }
  .hb-sel { min-height: 44px; padding: 8px 10px; font-size: 11.5px; }
  /* The flex row wrapped mid-pair: ISSUE, its select, then URGENCY orphaned on
     the end of the line with its select alone underneath. A two-column grid
     keeps each label with the control it names. */
  .hb-form { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: center; }
  .dock-btn { padding: 11px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs .row.in { animation: none; }
  .cs-fold > summary .m, .fold-ic { transition: none; }
  .dupt tbody tr, .kpi i, .dupt-btn { transition: none; }
  .dupt-btn:hover { transform: none; }
}