/* ==========================================================================
   Unbrek — homepage sections
   Editorial rhythm over component assembly. Sections alternate alignment so
   the thread behind them has room to read.
   ========================================================================== */

/* --- Section shell ------------------------------------------------------ */
.section {
  position: relative;
  z-index: var(--z-content);
  /* Was clamp(96px,15vh,190px). At 900px tall that put 270px of padding around
     ~660px of content in every section — the single biggest source of dead
     space on the page. */
  padding-block: clamp(64px, 9vh, 120px);
}
.section--tall { padding-block: clamp(88px, 13vh, 170px); }

.section__num {
  display: flex; align-items: baseline; gap: 14px;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--t-low);
  margin: 0 0 26px;
  font-weight: 500;
}
.section__num b {
  font-weight: 500;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.section__num::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to right, var(--line), transparent);
  max-width: 180px;
  transform: translateY(-3px);
}

.section__title {
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-head);
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  max-width: 20ch;
  text-shadow: var(--shadow-text);
}
.section__body { max-width: 46ch; }
.section__body p + p { margin-top: 20px; }

.align-right { display: flex; justify-content: flex-end; }
.align-right .section__title,
.align-right .section__body { text-align: right; margin-left: auto; }
.align-right .section__num { justify-content: flex-end; flex-direction: row-reverse; }
.align-right .section__num::after {
  background: linear-gradient(to left, var(--line), transparent);
}
.align-center { text-align: center; }
.align-center .section__title,
.align-center .section__body { margin-inline: auto; }
.align-center .section__num { justify-content: center; }
.align-center .section__num::after { display: none; }

@media (max-width: 760px) {
  /* Mobile reads better left-aligned throughout — no forced asymmetry. */
  .align-right { justify-content: flex-start; }
  .align-right .section__title,
  .align-right .section__body { text-align: left; margin-left: 0; }
  .align-right .section__num { flex-direction: row; justify-content: flex-start; }
}

/* --- 00 · Hero ---------------------------------------------------------- */
.hero {
  position: relative;
  z-index: var(--z-content);
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center;
  /* Top-aligned, not centred: the thread's two rings sit at 0.80 of viewport
     height, and centring the copy drops the buttons straight on top of them. */
  justify-content: flex-start;
  text-align: center;
  padding: clamp(112px, 16vh, 180px) var(--gut) 100px;
}
.hero__eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 28px;
  font-weight: 500;
}
.hero__title {
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  margin: 0;
  max-width: 15ch;
  text-shadow: var(--shadow-text);
}
/* The line that carries the idea. It mends on load. */
.hero__title .mend {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.hero__title .mend::after {
  content: "";
  position: absolute; left: 0; bottom: -0.14em;
  height: 2px; width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  animation: mend-line 1.4s var(--ease-out) 1.1s forwards;
}
@keyframes mend-line { to { transform: scaleX(1); } }

.hero__lead {
  max-width: 54ch;
  margin: 30px 0 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--t-body);
  text-shadow: var(--shadow-text-sm);
}
.hero__actions {
  display: flex; align-items: center; gap: 28px;
  margin-top: 40px; flex-wrap: wrap; justify-content: center;
}
.hero__scroll {
  position: absolute; left: 50%; bottom: 34px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--t-low);
}
.hero__scroll i {
  display: block; width: 1px; height: 42px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scroll-hint 2.4s var(--ease) infinite;
  transform-origin: top center;
}
@keyframes scroll-hint {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(42px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll i { animation: none; opacity: .7; }
  .hero__title .mend::after { animation: none; transform: scaleX(1); }
}
@media (max-width: 600px) { .hero__scroll { display: none; } }

@media (max-width: 480px) {
  /* Stop the eyebrow orphaning "· AI" onto a line of its own. */
  .hero__eyebrow { letter-spacing: .2em; font-size: 10px; }
  .hero__title { max-width: 100%; }
  .hero__actions { gap: 20px; }
  /* Keep clear of the sticky CTA bar. */
  .hero { padding-bottom: 130px; }
}


/* --- Split: heading column beside its content ---------------------------
   Several sections were a narrow column of text with an empty right half.
   Pairing the heading with its content halves their height and gives the
   page a spine. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: start;
}
.split__lead { position: sticky; top: 108px; }
.split__lead .section__title { max-width: 15ch; }
.split__lead .section__body { max-width: 38ch; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 26px; }
  .split__lead { position: static; }
}

/* --- Meet: founders + the note, one section ----------------------------- */
.meet {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: start;
  margin-top: 4px;
}
.meet__people { display: grid; gap: 14px; align-content: start; }

/* Compact founder row — the full profiles live on founders.html */
.fmini {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(20, 48, 44, 0.5);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.fmini:hover {
  border-color: var(--accent-dim);
  background: rgba(26, 58, 53, 0.7);
  transform: translateX(3px);
  color: inherit;
}
.fmini__frame {
  width: 56px; height: 68px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(217,105,61,.16), transparent 65%),
    linear-gradient(180deg, rgba(26,58,53,.9), rgba(10,26,24,.94));
}
.fmini__frame img { opacity: .34; }
.fmini__frame img.fmini__photo {
  opacity: 1; width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
}
.fmini__text { display: grid; gap: 3px; min-width: 0; }
.fmini__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 18px; color: var(--t-hi); letter-spacing: -0.01em;
}
.fmini__role {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-text);
}
.fmini__line { font-size: var(--fs-xs); color: var(--t-mid); margin-top: 4px; }
.fmini__go { color: var(--t-low); flex: none; transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.fmini:hover .fmini__go { color: var(--accent-text); transform: translateX(4px); }

/* The note now lives in a ~400px column rather than a full-width band, so it
   needs display type sized for that measure — at the old scale it ran to about
   30 characters a line and read as a ragged column. */
.meet .note p { font-size: clamp(16px, 1.35vw, 20px); line-height: 1.62; }
.meet .note { padding-left: clamp(18px, 2.2vw, 30px); }
.meet .note__sign { margin-top: 24px; }

@media (max-width: 900px) {
  .meet { grid-template-columns: 1fr; gap: 34px; }
}

/* --- 01 · The problem — struck-through ledger --------------------------- */
.strike-list { list-style: none; margin: 0; padding: 0; }
.strike-list li {
  position: relative;
  padding: 16px 0 16px 30px;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-lead);
  color: var(--t-body);
}
.strike-list li::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 14px; height: 1px; background: var(--t-faint);
}
/* The line strikes through as it enters — the thing being crossed off. */
.strike-list li span { position: relative; display: inline; }
.strike-list li span::after {
  content: "";
  position: absolute; left: -2px; right: -2px; top: 52%;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.strike-list li.is-in span::after { transform: scaleX(1); }
.strike-list li.is-in { color: var(--t-low); }
@media (prefers-reduced-motion: reduce) {
  .strike-list li span::after { transition: none; transform: scaleX(1); }
}
.problem__turn {
  margin-top: 30px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--t-hi);
  max-width: 26ch;
  text-shadow: var(--shadow-text);
}

/* --- 02 · The approach — pinned horizontal carousel ----------------------
   The section pins for a fixed runway of vertical scroll; during that runway
   the rail of cards translates left. When the runway is spent the section
   releases and the page carries on normally. The runway has to be long enough
   that the horizontal travel feels paced rather than flung. */
.section--approach { padding-block: 0; }
.approach__track { position: relative; min-height: 300svh; }  /* JS overrides with an exact height once it can measure the travel */

.carousel {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(20px, 3vh, 40px);
  padding-block: clamp(70px, 10vh, 110px) clamp(28px, 5vh, 56px);
  overflow: hidden;
}
.carousel__title {
  font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-head);
  letter-spacing: -0.02em; margin: 0 0 28px; max-width: 20ch;
  text-shadow: var(--shadow-text);
}

/* --- Step nav ----------------------------------------------------------- */
.cnav {
  display: flex; gap: 6px; margin: 0; padding: 0; list-style: none;
  flex-wrap: wrap;
}
.cnav__item {
  display: flex; align-items: baseline; gap: 9px;
  padding: 13px 0 0;
  border-top: 1px solid var(--line);
  color: var(--t-low);
  font-size: var(--fs-sm); font-weight: 500;
  min-width: 132px; text-align: left;
  position: relative;
  transition: color var(--dur) var(--ease);
}
.cnav li { flex: 1 1 0; min-width: 0; }
.cnav__item::after {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0;
  background: var(--accent);
  transition: width .5s var(--ease-out);
}
.cnav__item.is-active { color: var(--t-hi); }
.cnav__item.is-active::after { width: 100%; }
.cnav__item i {
  font-style: normal; font-size: var(--fs-eyebrow); letter-spacing: .2em;
  color: var(--t-low); font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease);
}
.cnav__item.is-active i { color: var(--accent-text); }

/* --- Rail --------------------------------------------------------------- */
.carousel__viewport { overflow: hidden; }
.carousel__rail {
  display: flex;
  gap: clamp(16px, 1.6vw, 26px);
  padding-inline: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
  will-change: transform;
}

/* Long landscape cards — wider than they are tall, so the eye travels
   sideways with the motion instead of fighting it. */
.ccard {
  flex: 0 0 auto;
  width: clamp(280px, 42vw, 560px);
  min-height: clamp(280px, 46svh, 400px);
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 38px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(20, 48, 44, 0.62);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
/* The card being read sits forward; its neighbours step back. */
.ccard[data-active="false"] { opacity: .48; }
.ccard[data-active="true"] { border-color: var(--accent-dim); }

.ccard__n {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--fs-eyebrow); letter-spacing: .24em; text-transform: uppercase;
  color: var(--t-low); margin: 0 0 20px; font-weight: 500;
}
.ccard__n span {
  color: var(--accent-text); font-variant-numeric: tabular-nums;
}
.ccard__n::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to right, var(--line), transparent);
}
.ccard__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(20px, 1.9vw, 27px); line-height: 1.22;
  letter-spacing: -0.02em; color: var(--t-hi); margin: 0 0 16px;
}
.ccard__body {
  font-size: var(--fs-sm); line-height: 1.75; color: var(--t-body); margin: 0;
}
.ccard__meta {
  margin: auto 0 0; padding-top: 22px;
  display: grid; gap: 14px;
  border-top: 1px solid var(--line-soft);
}
.ccard__meta > div { display: grid; gap: 3px; }
.ccard__meta dt {
  font-size: var(--fs-eyebrow); letter-spacing: .18em; text-transform: uppercase;
  color: var(--t-low);
}
.ccard__meta dd { margin: 0; font-size: var(--fs-sm); color: var(--t-hi); }

/* --- Travel indicator --------------------------------------------------- */
.cprogress {
  height: 2px; background: var(--line-soft); border-radius: 2px; overflow: hidden;
}
.cprogress i {
  display: block; height: 100%; width: 0; background: var(--accent);
  transform-origin: left center;
}

/* --- Touch: no pinning, native swipe ------------------------------------
   The wireframe is explicit that mobile gets no scroll-lock. Below this
   breakpoint the rail becomes an ordinary snap-scrolling carousel that the
   visitor flicks through, and the section stops pinning entirely. */
@media (max-width: 900px) {
  .section--approach { padding-block: clamp(96px, 15vh, 190px); }
  .approach__track { min-height: 0; }
  .carousel {
    position: static; height: auto; overflow: visible;
    padding-block: 0;
  }
  .carousel__viewport { overflow: visible; }
  .carousel__rail {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-block: 4px 18px;
    transform: none !important;
  }
  .carousel__rail::-webkit-scrollbar { display: none; }
  .ccard {
    scroll-snap-align: start;
    width: min(82vw, 420px);
    opacity: 1 !important;
  }
  .cnav { display: none; }
}

/* --- Reduced motion: no travel at all, just a stack --------------------- */
@media (prefers-reduced-motion: reduce) {
  .approach__track { min-height: 0; }
  .section--approach { padding-block: clamp(96px, 15vh, 190px); }
  .carousel { position: static; height: auto; overflow: visible; padding-block: 0; }
  .carousel__viewport { overflow: visible; }
  .carousel__rail {
    flex-direction: column;
    transform: none !important;
    padding-inline: 0;
    overflow: visible;
  }
  .ccard { width: 100%; opacity: 1 !important; min-height: 0; }
  .cnav { display: none; }
  .cprogress { display: none; }
}

/* --- 03 · What we build — four groups ----------------------------------- */
.groups {
  display: grid;
  /* Explicit column counts, not auto-fit: with 5 cards, auto-fit computes 4
     columns at typical desktop widths, wraps the 5th onto its own row, then
     collapses the three now-empty tracks and stretches that lone card to
     fill the whole row. Fixed track counts per breakpoint leave an
     incomplete last row visually empty instead, which reads as normal. */
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 34px;
}
@media (max-width: 980px) { .groups { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .groups { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .groups { grid-template-columns: 1fr; } }
.group {
  background: rgba(20, 48, 44, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 32px 28px 34px;
  transition: background var(--dur) var(--ease);
  position: relative;
}
.group:hover, .group:focus-within { background: rgba(26, 58, 53, 0.86); }
.group::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: var(--accent);
  transition: width .5s var(--ease-out);
}
.group:hover::before, .group:focus-within::before { width: 100%; }
.group__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 21px; letter-spacing: -0.01em; color: var(--t-hi);
  margin: 0 0 6px;
}
.group__note { font-size: var(--fs-xs); color: var(--t-low); margin: 0 0 22px; }
.group__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.group__list li {
  font-size: var(--fs-sm); color: var(--t-mid);
  padding-left: 16px; position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.group__list li::before {
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: 5px; height: 5px; border-radius: 50%;
  border: 1px solid var(--accent-dim);
  transition: background var(--dur-fast) var(--ease);
}
.group:hover .group__list li { color: var(--t-body); }
.group:hover .group__list li::before { background: var(--accent-ghost); }

/* --- 04 · AI without the hype — pinned card deck -------------------------
   One card is on stage at a time; scrolling brings the next one up and sends
   the last one away. Vertical motion here, against the horizontal rail in
   section 02, so the two pinned sections don't feel like the same trick. */
/* --- Legible: soften the thread/dot field behind reading-heavy content ----
   Sections 04-06 sit further into the thread's choreography, where it's at
   its thickest and most opaque (and the ambient dot field is brighter still —
   see js/thread.js), which was making body copy hard to read directly on the
   canvas. Pure backdrop-blur, no added background colour: the animation stays
   visible as soft texture behind the text instead of a sharp shape competing
   with it, and — unlike an opaque panel — it never clips the thread running
   through the section. Applied to the actual paragraph/list content in each
   section, not to short headings, which already read fine at display size
   with the existing text-shadow. */
.legible {
  position: relative;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.section--deck { padding-block: 0; }
.deck__track { position: relative; min-height: 280svh; }
.deck__sticky {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; align-items: center;
  padding-block: clamp(80px, 11vh, 130px) clamp(40px, 7vh, 80px);
}
.deck__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: center;
  width: 100%;
}
.deck__lead .section__title { max-width: 15ch; }
.deck__lead .section__body { max-width: 38ch; }

.deck__count {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: 34px;
  font-size: var(--fs-eyebrow); letter-spacing: .2em;
  color: var(--t-low); font-variant-numeric: tabular-nums;
}
.deck__count span:first-child { color: var(--accent-text); }
.deck__count i { font-style: normal; opacity: .5; }

/* The stage holds every card in the same place; only one is on screen. */
.deck__stage {
  position: relative;
  min-height: clamp(260px, 38svh, 340px);
}
.dcard {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(24px, 2.6vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(20, 48, 44, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(34px) scale(.98);
  transition: opacity .5s var(--ease), transform .6s var(--ease-out);
  pointer-events: none;
}
.dcard[data-state="in"] {
  opacity: 1; transform: none; pointer-events: auto;
  border-color: var(--accent-dim);
}
/* Cards already read leave upwards, so the direction matches the scroll. */
.dcard[data-state="out"] { opacity: 0; transform: translateY(-34px) scale(.98); }

.dcard__n {
  font-size: var(--fs-eyebrow); letter-spacing: .24em;
  color: var(--accent-text); margin: 0 0 22px;
  font-variant-numeric: tabular-nums;
}
.dcard__pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
}
.dcard__from, .dcard__to {
  font-size: var(--fs-lead); line-height: 1.6; margin: 0;
  text-shadow: var(--shadow-text-sm);
}
.dcard__from { color: var(--t-low); }
.dcard__to { color: var(--t-hi); }
.dcard__label {
  display: block;
  font-size: var(--fs-eyebrow); letter-spacing: .24em; text-transform: uppercase;
  margin-bottom: 10px; color: var(--t-low); font-weight: 500;
}
.dcard__to .dcard__label { color: var(--accent-text); }
.dcard__arrow { color: var(--accent-dim); }
.dcard__arrow svg { width: 24px; height: 24px; }

@media (max-width: 900px) {
  .dcard__pair { grid-template-columns: 1fr; gap: 16px; }
  .dcard__arrow { transform: rotate(90deg); }
  .deck__grid { grid-template-columns: 1fr; gap: 28px; align-items: start; }
}

/* --- Touch and reduced motion: no pinning, all three stacked ------------- */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .section--deck { padding-block: clamp(64px, 9vh, 120px); }
  .deck__track { min-height: 0; }
  .deck__sticky { position: static; height: auto; padding-block: 0; display: block; }
  .deck__stage { min-height: 0; display: grid; gap: 16px; }
  .dcard {
    position: static; inset: auto;
    opacity: 1 !important; transform: none !important;
    pointer-events: auto; transition: none;
  }
  .deck__count { display: none; }
}

/* --- 05 · Commitments — a ledger, not badges ---------------------------- */
.commitments {
  margin-top: 40px;
  border-top: 1px solid var(--line-soft);
  /* Six single-file rows ran to ~1060px. Two columns halves that without
     crowding — each row keeps its own number, claim and clarifier. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(28px, 4vw, 72px);
}
.commitment {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 4px clamp(12px, 1.6vw, 20px);
  align-items: baseline;
  padding: clamp(18px, 2vw, 26px) 0;
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--dur) var(--ease);
}
.commitment:hover { background: rgba(243, 245, 241, 0.02); }
.commitment__n {
  font-size: var(--fs-eyebrow); letter-spacing: .2em; color: var(--t-low);
  font-variant-numeric: tabular-nums;
}
.commitment__what {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(19px, 2vw, 26px); line-height: 1.25;
  letter-spacing: -0.01em; color: var(--t-hi);
}
.commitment__why { grid-column: 2; font-size: var(--fs-sm); color: var(--t-mid); }

@media (max-width: 820px) {
  .commitments { grid-template-columns: 1fr; }
}

/* --- 06 · Work ---------------------------------------------------------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 34px;
}
.work-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 30px 34px;
  background: rgba(20, 48, 44, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  display: flex; flex-direction: column;
}
.work-card:hover { border-color: var(--accent-dim); transform: translateY(-4px); }
.work-card__status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-eyebrow); letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: 18px; font-weight: 500;
}
.work-card__status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.work-card__title {
  font-family: var(--font-display); font-weight: 600; font-size: 23px;
  letter-spacing: -0.01em; color: var(--t-hi); margin: 0 0 12px;
}
.work-card__body { font-size: var(--fs-sm); line-height: 1.7; color: var(--t-mid); margin: 0; }
.work-card__meta {
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line-soft);
  font-size: var(--fs-xs); color: var(--t-low);
  display: flex; flex-wrap: wrap; gap: 8px 16px;
}

/* An honest empty slot rather than invented work. */
.work-card--next {
  border-style: dashed;
  border-color: var(--line-soft);
  background: transparent;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
}
.work-card--next:hover { transform: none; border-color: var(--line); }
.work-card--next p { font-size: var(--fs-sm); color: var(--t-low); margin: 0; max-width: 30ch; }


/* --- 06 · Work — condensed proof rows ------------------------------------
   The full case write-ups live on work.html; repeating them here made the
   homepage longer without telling anyone anything new. */
.proof { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.proof__row { border-bottom: 1px solid var(--line-soft); }
.proof__row > a,
.proof__row > span:first-child {
  display: block;
}
.proof__row > a {
  display: grid; gap: 5px;
  padding: 20px 0;
  color: inherit; text-decoration: none;
  transition: padding-left var(--dur) var(--ease);
}
.proof__row > a:hover { padding-left: 12px; color: inherit; }
.proof__row--open { display: grid; gap: 5px; padding: 20px 0; opacity: .62; }
.proof__status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-eyebrow); letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent-text); font-weight: 500;
}
.proof__status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.proof__row--open .proof__status { color: var(--t-low); }
.proof__name {
  font-family: var(--font-display); font-weight: 600; font-size: 21px;
  color: var(--t-hi); letter-spacing: -0.01em;
}
.proof__desc { font-size: var(--fs-sm); color: var(--t-mid); max-width: 52ch; }

/* --- 07 · Founders ------------------------------------------------------
   Each founder is an editorial row: a modest portrait plate beside the text,
   rather than two tall empty boxes side by side. Until the photography exists
   this keeps the missing image from being the loudest thing on the page — and
   when it arrives, only the <img> changes. */
.founders {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
  margin-top: 52px;
}
.founder {
  display: grid;
  grid-template-columns: minmax(170px, 230px) 1fr;
  gap: clamp(24px, 3.2vw, 52px);
  align-items: start;
}
.founder__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(217,105,61,.14), transparent 62%),
    linear-gradient(180deg, rgba(26,58,53,.9), rgba(10,26,24,.94));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
}
/* A fine diagonal tooth over the plate, and an inset hairline, so the empty
   frame reads as a considered surface rather than a failed image. */
.founder__frame::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(-45deg, rgba(243,245,241,.02) 0 1px, transparent 1px 8px);
  box-shadow: inset 0 0 0 1px rgba(243,245,241,.04);
  border-radius: inherit;
  pointer-events: none;
}
.founder__frame img:not(.founder__mark) {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
}
.founder__mark { width: 44px; opacity: .28; }
.founder__pending {
  font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--t-low);
}
.founder__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(20px, 2vw, 25px); color: var(--t-hi);
  margin: 0 0 6px; letter-spacing: -0.01em;
}
.founder__role {
  font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-text); margin: 0 0 16px;
}
.founder__bio { font-size: var(--fs-sm); line-height: 1.8; color: var(--t-mid); margin: 0; max-width: 62ch; }

@media (max-width: 620px) {
  .founder { grid-template-columns: 1fr; gap: 20px; }
  .founder__frame { max-width: 168px; }
}

/* --- 08 · The human note ------------------------------------------------ */
.note {
  border-left: 2px solid var(--accent);
  padding-left: clamp(20px, 4vw, 48px);
  max-width: 62ch;
  position: relative;
}
.note p {
  font-family: var(--font-display);
  font-weight: 400;
  /* Floor lowered from 19px: at the mobile column width 19px gave a ~24
     character measure, which reads as a ragged column rather than a letter. */
  font-size: clamp(17px, 2.1vw, 27px);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--t-hi);
  text-shadow: var(--shadow-text);
}
.note p + p { margin-top: 24px; }
.note__sign {
  margin-top: 32px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--t-low);
  letter-spacing: .04em;
}

/* --- 09 · Closing CTA --------------------------------------------------- */
.closing {
  position: relative; z-index: var(--z-content);
  text-align: center;
  padding: clamp(90px, 14vh, 150px) var(--gut) clamp(72px, 11vh, 120px);
}
.closing__title {
  font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-tight);
  letter-spacing: var(--tr-display); margin: 0 auto; max-width: 14ch;
  text-shadow: var(--shadow-text);
}
.closing__lead {
  font-size: var(--fs-lead); color: var(--t-body);
  margin: 26px auto 0; max-width: 46ch;
}
.closing__actions {
  display: flex; align-items: center; justify-content: center;
  gap: 28px; margin-top: 40px; flex-wrap: wrap;
}
.closing__promise {
  margin-top: 54px;
  font-size: var(--fs-xs); color: var(--t-low);
  display: inline-flex; align-items: center; gap: 10px;
}
.closing__promise::before {
  content: ""; width: 22px; height: 1px; background: var(--accent-dim);
}