/* ==========================================================================
   Urgency and the free proof of concept, buildouts (Alex, 2026-11-10).

   Sources: the board's Agriswara b03 black band and Terrava b04 closing
   call to action; Cosmos layouts (dark metric panels, a centered report
   call to action, two-column contact blocks); the intro deck's Threat and
   proof of concept slides for all figures and wording.
   ========================================================================== */

.uc { padding: 0 0 clamp(88px, 10vw, 156px); background: var(--bg); color: var(--ink); }
.uc-wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.uc-h { margin: 0; font-family: var(--logo); font-weight: 400; font-size: clamp(34px, 4.3vw, 66px); line-height: 1.06; letter-spacing: -.034em; text-wrap: balance; }
.uc-lede { margin: 18px 0 0; max-width: 54ch; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.uc-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 0 26px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 500; transition: opacity .2s; }
.uc-btn:hover { opacity: .85; }
.uc-btn--w { background: #fff; color: var(--ink); }
.uc-fine { margin: 12px 0 0; font-size: 13.5px; color: #61635C; }

/* ---------- buildout 1: a black band of figures, then a centered close on a photo ---------- */
.uc-band { padding: clamp(36px, 5vw, 76px) clamp(22px, 4vw, 64px); background: #000; color: #fff; }
.uc-band .kick svg { color: #fff; }
.uc-band .uc-h { max-width: 18em; margin-top: 22px; }
.uc-band .uc-lede { color: rgba(255, 255, 255, .78); }
.uc-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin: clamp(36px, 4.6vw, 70px) 0 0; padding: 0; list-style: none; }
.uc-figs li { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .34); }
.uc-fig { display: block; font-family: var(--logo); font-weight: 300; font-size: clamp(50px, 6.1vw, 96px); line-height: 1; letter-spacing: -.045em; }
.uc-figs p { margin: 12px 0 0; max-width: 34ch; font-size: 15.5px; line-height: 1.45; color: rgba(255, 255, 255, .8); text-wrap: pretty; }

.uc-close { position: relative; display: grid; place-items: center; min-height: clamp(460px, 74vh, 660px); overflow: hidden; color: #fff; text-align: center; background: #111; }
.uc-close img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.uc-close::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.uc-close-in { position: relative; z-index: 1; display: grid; justify-items: center; padding: 40px clamp(20px, 4vw, 48px); }
.uc-close .kick svg { color: #fff; }
.uc-close .uc-h { max-width: 15em; margin-top: 18px; }
.uc-close .uc-lede { max-width: 50ch; color: rgba(255, 255, 255, .88); }
.uc-close .uc-btn { margin-top: 28px; }

/* ---------- buildout 2: share prices falling, then a split close ---------- */
.uc-head { display: grid; gap: 22px; justify-items: start; margin-bottom: clamp(32px, 4vw, 60px); }
.uc-falls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 24px); margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.uc-fall-track { height: clamp(170px, 19vw, 280px); }
.uc-fall-bar { display: block; height: calc(var(--d) * 2.05%); background: #E8E7E3; border-bottom: 2px solid var(--ink); transform-origin: 50% 0; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--t, 0s); }
.uc-js .uc-falls:not(.in) .uc-fall-bar { transform: scaleY(0); }
.uc-pct { display: block; font-family: var(--logo); font-weight: 300; font-size: clamp(40px, 4.1vw, 64px); line-height: 1; letter-spacing: -.04em; }
.uc-when { display: block; margin-top: 10px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: #61635C; }
.uc-falls b { display: block; margin-top: 6px; font-size: 16px; font-weight: 500; }
.uc-falls p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: #61635C; text-wrap: pretty; }

.uc-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px clamp(32px, 5vw, 80px); align-items: end; padding-top: clamp(22px, 2.6vw, 36px); border-top: 1px solid var(--ink); }
.uc-split .uc-big { margin: 18px 0 0; font-family: var(--logo); font-weight: 400; font-size: clamp(38px, 4.6vw, 70px); line-height: 1.04; letter-spacing: -.04em; }
.uc-split .uc-btn { margin-top: 26px; }
.uc-steps { margin: 0; padding: 0; list-style: none; }
.uc-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 18px 0; border-top: 1px solid var(--line); }
.uc-steps li:first-child { border-top: 0; }
.uc-n { padding-top: 5px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: #61635C; }
.uc-steps h3 { margin: 0; font-family: var(--logo); font-weight: 400; font-size: clamp(22px, 2vw, 30px); line-height: 1.14; letter-spacing: -.024em; }
.uc-steps p { margin: 7px 0 0; max-width: 50ch; font-size: 15px; line-height: 1.48; color: #61635C; text-wrap: pretty; }

/* ---------- buildout 3: four companies, then a black close ---------- */
.uc-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 16px); margin: 0; padding: 0; list-style: none; }
.uc-four li { position: relative; height: clamp(420px, 66vh, 580px); overflow: hidden; color: #fff; background: #111; }
.uc-four img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.uc-four li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .46) 44%, rgba(0, 0, 0, .3) 100%); }
.uc-card { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(16px, 1.6vw, 24px); }
.uc-card .uc-fig { font-size: clamp(46px, 4.7vw, 72px); }
.uc-card b { display: block; font-size: 16px; font-weight: 500; }
.uc-card p { margin: 7px 0 0; font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .86); text-wrap: pretty; }

.uc-dark { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 36px clamp(32px, 5vw, 80px); align-items: start; padding: clamp(36px, 5vw, 76px) clamp(22px, 4vw, 64px); background: #000; color: #fff; }
.uc-dark .kick svg { color: #fff; }
.uc-dark .uc-h { margin-top: 18px; }
.uc-dark .uc-lede { color: rgba(255, 255, 255, .8); }
.uc-dark .uc-btn { margin-top: 26px; }
.uc-dark .uc-steps li { border-top-color: rgba(255, 255, 255, .24); }
.uc-dark .uc-steps li:first-child { border-top: 1px solid rgba(255, 255, 255, .24); }
.uc-dark .uc-n, .uc-dark .uc-steps p { color: rgba(255, 255, 255, .72); }

@media (max-width: 1000px) {
  .uc-falls { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; }
  .uc-falls li { padding-top: 0; border-top: 2px solid var(--ink); }
  .uc-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uc-split, .uc-dark { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .uc-figs, .uc-four { grid-template-columns: minmax(0, 1fr); }
  .uc-fall-track { height: 130px; }
  .uc-four li { height: 400px; }
}
@media (prefers-reduced-motion: reduce) { .uc-fall-bar { transition: none; } }

/* ---------- On Home (Alex, 2026-11-10): the proof of concept, with a layer model ----------
   The Our platform drawing, white on black. */
.uc-dark--dia { align-items: center; }
.uc-dia svg { display: block; width: 100%; height: auto; overflow: visible; }
.uc-dia .iso-face { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .78); stroke-width: 1; }
.uc-dia .iso-face--on { fill: rgba(255, 255, 255, .2); stroke: #fff; }
.uc-dia .iso-ln { stroke: rgba(255, 255, 255, .85); }
.uc-dia .iso-faint { stroke: rgba(255, 255, 255, .28); }
.uc-dia .iso-post { stroke: rgba(255, 255, 255, .34); }
.uc-dia .iso-dot { fill: #fff; }
.uc-dia .iso-plate[data-i="2"] .iso-ln { stroke: #fff; }
.uc-dia .iso-lbl { fill: rgba(255, 255, 255, .9); }
.uc-dia .iso-num { fill: rgba(255, 255, 255, .55); }
@media (max-width: 1000px) { .uc-dia { max-width: 620px; } }