/* Landing continuation below the hero. Uses tokens.css; see DESIGN.md. */

html { scroll-padding-top: 72px; }
main:focus { outline: none; }
.section {
  position: relative;
  width: min(100%, calc(var(--content-max) + 2 * var(--pad-x)));
  margin: 0 auto; padding: var(--space-section) var(--pad-x) 0;
}
/* Each section opens on the same ruled line with end ticks as the hero navigation. */
.section::before {
  content: ""; position: absolute; top: 0; left: var(--pad-x); right: var(--pad-x); height: 7px;
  border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline);
  background: linear-gradient(var(--hairline), var(--hairline)) center / 100% 1px no-repeat;
}
.section.build::before { display: none; }
.section + .section, .footer { margin-top: clamp(72px, 8vw, 120px); }

.section h2 {
  font-family: var(--serif); font-weight: 300; font-size: var(--type-section);
  line-height: 1.06; letter-spacing: -0.018em; text-wrap: balance;
}
.section h3 { font-family: var(--serif); font-weight: 400; font-size: var(--type-block); line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.section h4, .section h5 { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite-dim); }
.section p { font-size: var(--type-body); line-height: 1.65; color: var(--graphite-dim); text-wrap: pretty; }
.section .lede { font-size: 17px; color: var(--graphite); max-width: 34em; }
.section .caption { font-size: 13px; line-height: 1.5; }
.section .mono-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }

/* The first section after the hero continues its vertical axis instead of opening on a rule. */
.axis-continue { top: 0; height: clamp(48px, 6vw, 88px); }

/* ---------- What we build ---------- */
.build-intro { text-align: center; }
.build-intro .lede { margin: 24px auto 0; }

.finance {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 7vw, 112px);
  margin-top: clamp(72px, 9vw, 128px); align-items: start;
}
.finance-text h3 { margin-bottom: 20px; }
.finance-text p + p { margin-top: 14px; }

.queue { background: var(--panel); border: 1px solid var(--hairline); padding: 24px clamp(20px, 2.4vw, 32px) 20px; }
.queue-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.queue-count { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--graphite-dim); }
.queue-list, .approved-list { list-style: none; }
.queue-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--hairline);
}
.queue-what { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.queue-name { font-family: var(--serif); font-size: 19px; line-height: 1.25; color: var(--graphite); }
.queue-from { font-size: 13px; color: var(--graphite-dim); }
.queue-held { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--alert); }
.queue-actions { display: flex; gap: 14px; flex: none; }
.queue-item.is-held .queue-name { color: var(--graphite-dim); }
.queue .track-link:focus-visible .ball { box-shadow: 0 0 0 2.5px var(--panel), 0 0 0 3.5px var(--graphite); }
.section .queue-empty { padding: 18px 0 4px; font-size: 15px; }
.approved { margin-top: 22px; }
.approved h5 { padding-bottom: 8px; }
.approved-list li {
  position: relative; padding: 8px 0 8px 20px; font-size: 14px; color: var(--graphite-dim); border-top: 1px solid var(--hairline);
}
.approved-list li::before {
  content: ""; position: absolute; left: 2px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff 0 12%, #c9ccd2 34%, #6b7078 78%, #3a3e44 100%);
}
.queue .caption { margin-top: 18px; }

/* Text-only parts of What we build: heading on the left, copy on the right. */
.pair {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 7vw, 112px);
  margin-top: clamp(72px, 9vw, 128px); align-items: start;
}
.pair-text p + p, .pair-text .weighs + p { margin-top: 14px; }
.weighs { list-style: none; margin-top: 14px; border-bottom: 1px solid var(--hairline); }
.section .weighs li { padding: 10px 0; border-top: 1px solid var(--hairline); font-size: 15px; line-height: 1.6; color: var(--graphite); }

/* ---------- Getting noticed and finding work ---------- */
.noticed { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(40px, 7vw, 120px); align-items: start; }
.noticed-head .lede { margin-top: 24px; font-size: 16px; color: var(--graphite-dim); }
.noticed-list { list-style: none; border-bottom: 1px solid var(--hairline); }
.noticed-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 32px; align-items: baseline;
  padding: 26px 0 28px; border-top: 1px solid var(--hairline);
}
.section .noticed-list h3 { font-size: clamp(20px, 1.8vw, 24px); }
.noticed-list p { font-size: 15px; }
.noticed-foot { grid-column: 2; margin-top: 20px; }

/* ---------- Work we've already built ---------- */
.work-head { max-width: 640px; }
.work-head .lede { margin-top: 24px; }
.built-list { list-style: none; margin-top: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--hairline); }
.built {
  display: grid; grid-template-columns: 28px minmax(0, 4fr) minmax(0, 6fr); column-gap: clamp(20px, 3vw, 40px); align-items: baseline;
  padding: 26px 0 28px; border-top: 1px solid var(--hairline);
}
.tick { position: relative; top: -4px; width: 12px; height: 7px; border-left: 1.5px solid var(--graphite); border-bottom: 1.5px solid var(--graphite); transform: rotate(-45deg); }
.section .built h3 { font-size: clamp(20px, 1.8vw, 24px); }
.built p + p, .built-body p + p { margin-top: 12px; }
.built-more { margin-top: 6px; }
.built-more summary { list-style: none; cursor: pointer; }
.built-more summary::-webkit-details-marker { display: none; }
.built-more[open] summary { color: var(--graphite); }
.built-more[open] summary::before { transform: scaleX(1); }
.covers { list-style: none; margin-top: 4px; }
.section .covers li { padding: 10px 0; border-top: 1px solid var(--hairline); font-size: 15px; line-height: 1.6; color: var(--graphite-dim); }

.film-body { display: flex; align-items: flex-start; gap: clamp(24px, 3vw, 40px); }
.film-text { flex: 1; min-width: 0; }
.film-open { flex: none; display: flex; flex-direction: column; align-items: flex-start; width: clamp(200px, 18vw, 264px); text-align: left; }
.film-open:focus-visible { outline: none; }
.film-open img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; outline: 1px solid var(--hairline); transition: outline-color .3s; }
.film-open:hover img, .film-open:focus-visible img { outline-color: var(--graphite); }
.film-label { margin-top: 10px; font-size: 14px; }
.film-open:hover .film-label .ball, .film-open:focus-visible .film-label .ball { left: calc(100% - 5px); transform: rotate(540deg); }
.film-open:hover .film-label::before, .film-open:focus-visible .film-label::before { background: var(--graphite); }
.film-open:focus-visible .film-label::before { height: 2px; bottom: 8.5px; }
.film-open:focus-visible .film-label .ball { box-shadow: 0 0 0 2.5px var(--studio), 0 0 0 3.5px var(--graphite); }
.film-length { font-size: 12.5px; color: var(--graphite-dim); }

/* Looking for the next business: future projects, opened on its own ruled line so it reads apart from the finished work. */
.next { position: relative; margin-top: clamp(112px, 12vw, 176px); padding-top: clamp(64px, 7vw, 104px); }
.next::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px;
  border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline);
  background: linear-gradient(var(--hairline), var(--hairline)) center / 100% 1px no-repeat;
}
.next-head, .next-item, .next-note, .next-foot {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(40px, 7vw, 120px);
}
.section .next h3 { font-weight: 300; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; letter-spacing: -0.016em; max-width: 11em; }
.next-intro { max-width: 36em; }
.next-intro p + p { margin-top: 16px; }
.next-list { list-style: none; margin-top: clamp(56px, 7vw, 96px); border-bottom: 1px solid var(--hairline); }
.next-item { padding: clamp(32px, 3.6vw, 48px) 0 clamp(36px, 4vw, 52px); border-top: 1px solid var(--hairline); align-items: baseline; }
.section .next-item h4 {
  font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: -0.005em; text-transform: none;
  color: var(--graphite); text-wrap: balance; max-width: 12em;
}
.next-text { max-width: 36em; }
.section .next-text .next-outcome {
  margin-top: 18px; font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(19px, 1.6vw, 21px); line-height: 1.4; color: var(--graphite);
}
.next-note { margin-top: clamp(40px, 5vw, 64px); }
.section .next-note p { grid-column: 2; max-width: 36em; font-size: 15px; }
.next-note-label { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite-dim); }
.next-foot { margin-top: clamp(48px, 6vw, 72px); align-items: center; }
.next-foot .race { grid-column: 2; justify-self: start; }
.next-foot .caption { grid-column: 2; margin-top: 12px; max-width: 32em; }

/* ---------- Film dialog ---------- */
.film {
  margin: auto; padding: 0; border: 1px solid var(--hairline); background: var(--panel); color: var(--graphite);
  width: min(calc(100vw - 32px), calc((100dvh - 170px) * 9 / 16 + 48px), 520px); max-height: calc(100dvh - 24px); overflow: auto;
}
.film[open] { animation: film-in .45s var(--ease); }
@keyframes film-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.film::backdrop { background: rgba(30, 33, 36, 0.22); backdrop-filter: blur(2px); }
.film-inner { padding: 16px 24px 20px; }
.film-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; }
.film-head h2 { font-family: var(--serif); font-weight: 300; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }
.film-video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: var(--studio); outline: 1px solid var(--hairline); }
.film-desc { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--graphite-dim); }

/* ---------- How an engagement works ---------- */
.engagement-head { max-width: 640px; }
.engagement-head .lede { margin-top: 24px; }
.stops {
  position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 48px); margin-top: clamp(56px, 7vw, 96px);
}
.stops::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--track); }
.stop { position: relative; padding-top: 36px; }
.stop .ball { top: 0; left: 0; }
.stop:last-child .ball { box-shadow: 0 0 0 3px var(--studio), 0 0 0 4px var(--graphite); }
.stop h3 { font-size: clamp(21px, 1.9vw, 26px); }
.stop p { margin-top: 12px; font-size: 15px; }

/* ---------- Start a conversation ---------- */
.start { text-align: center; padding-bottom: clamp(96px, 11vw, 160px); }
.start .lede { margin: 20px auto 0; max-width: 30em; }
.start .race { margin-top: 28px; }

/* ---------- Footer ---------- */
.footer {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; row-gap: 12px; column-gap: 32px;
  width: min(100%, calc(var(--content-max) + 2 * var(--pad-x))); margin: 0 auto; padding: 28px var(--pad-x) 40px;
}
.footer::before {
  content: ""; position: absolute; top: 0; left: var(--pad-x); right: var(--pad-x); height: 7px;
  border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline);
  background: linear-gradient(var(--hairline), var(--hairline)) center / 100% 1px no-repeat;
}
.footer-mark { font-family: var(--serif); font-size: 20px; color: var(--graphite); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: 28px; }
.footer-note { grid-column: 1 / -1; font-size: 13px; color: var(--graphite-dim); }
.footer-note a { color: inherit; text-decoration: underline; text-decoration-color: var(--track); text-underline-offset: 3px; }

/* ---------- Section bar (appears once the hero has scrolled away) ---------- */
.bar {
  position: fixed; z-index: 5; top: 0; left: 0; right: 0; height: 60px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 32px;
  padding: 0 var(--pad-x); background: rgba(234, 234, 234, 0.96);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s;
}
.bar::after {
  content: ""; position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: 0; height: 7px;
  border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline);
  background: linear-gradient(var(--hairline), var(--hairline)) center / 100% 1px no-repeat;
}
.bar.is-shown { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }
.bar-mark { font-family: var(--serif); font-size: 19px; color: var(--graphite); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.bar-links { list-style: none; display: flex; justify-content: center; column-gap: clamp(20px, 3vw, 40px); white-space: nowrap; }

/* ---------- Phone ---------- */
@media (max-width: 959px) {
  .noticed, .finance, .pair { grid-template-columns: minmax(0, 1fr); }
  .noticed-head { margin-bottom: 40px; }
  .noticed-foot { grid-column: 1; }
  .finance-text { margin-bottom: 40px; }
  .pair { row-gap: 16px; }
  .film-body { flex-direction: column; gap: 20px; }
  .film-open { width: min(288px, 100%); }
}

/* Four section links need about 880px before they crowd the wordmark and Contact. */
@media (max-width: 879px) {
  .bar { grid-template-columns: auto 1fr; }
  .bar-links { display: none; }
  .bar-contact { justify-self: end; }
}

@media (max-width: 759px) {
  .section { padding-top: 88px; }
  .section + .section, .footer { margin-top: 64px; }
  .section .lede { font-size: 16px; }
  .noticed-list li { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 20px 0 22px; }

  .build-intro { text-align: left; }
  .build-intro .lede { margin-left: 0; }
  .finance, .pair { margin-top: 64px; }
  .queue { margin: 0 calc(-1 * var(--pad-x) + 8px); padding: 20px 16px 16px; }
  .queue-item { flex-direction: column; align-items: flex-start; gap: 6px; }
  .queue-actions { gap: 20px; }


  .built { grid-template-columns: 20px minmax(0, 1fr); row-gap: 6px; padding: 20px 0 22px; }
  .built > :not(.tick) { grid-column: 2; }
  .tick { grid-row: 1; }
  .next { margin-top: 88px; padding-top: 56px; }
  .next-head, .next-item, .next-note, .next-foot { grid-template-columns: minmax(0, 1fr); }
  .section .next-note p { grid-column: 1; }
  .next-intro { margin-top: 24px; }
  .next-list { margin-top: 48px; }
  .next-item { row-gap: 12px; padding: 28px 0 32px; }
  .section .next-text .next-outcome { margin-top: 14px; font-size: 19px; }
  .next-foot .race, .next-foot .caption { grid-column: 1; }

  .stops { grid-template-columns: minmax(0, 1fr); row-gap: 36px; margin-top: 48px; padding-left: 32px; }
  .stops::before { left: 4px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .stop { padding-top: 0; }
  .stop .ball { left: -32px; top: 9px; }

  .start .race { margin-top: 22px; }

  .footer { grid-template-columns: minmax(0, 1fr); }
  .footer-links { justify-content: flex-start; flex-direction: column; }

  .bar { height: 56px; }
}