/* Drawings below the hero, and on Services and Work: the routine as a line of stations, close-ups of the software,
   Framewright from drawing to film, and the engagement track. Each one draws once as it comes into view
   (sequence.js adds .is-waiting, then .is-drawn). Without the script, with reduced motion and in print, only the
   finished drawing exists. Text is never hidden or delayed. See DESIGN.md. */

/* ---------- The station line: a track, a steel ball at each station, the owner's station ringed ---------- */
.line { margin-top: clamp(56px, 7vw, 96px); }
.line-stations {
  --n: 5; --gap: clamp(20px, 2.4vw, 36px);
  position: relative; list-style: none; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: var(--gap);
}
.line-stations::before {
  content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--track); transform-origin: left center;
}
.station { position: relative; padding-top: 34px; }
.station > .ball { top: 0; left: 0; }
.station-decision > .ball { box-shadow: 0 0 0 3px var(--studio), 0 0 0 4px var(--graphite); }
.section .station h3 {
  font-family: var(--mono); font-weight: 400; font-size: 11px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite);
}
.station ul { list-style: none; margin-top: 14px; border-bottom: 1px solid var(--hairline); }
.section .station li { padding: 9px 0 10px; border-top: 1px solid var(--hairline); font-size: 14.5px; line-height: 1.5; color: var(--graphite-dim); text-wrap: pretty; }
.line-foot { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 36px); margin-top: 28px; }
.section .line-note { position: relative; grid-column: 2 / -1; padding-top: 18px; font-size: 15px; color: var(--graphite); }
/* The bracket: the same ruled line with end ticks as each section opening, over the stations a person oversees. */
.line-note::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;
}
.section .line .caption { margin-top: 20px; }

@media (max-width: 1023px) {
  .routine .line-stations { grid-template-columns: minmax(0, 1fr); row-gap: 30px; padding-left: 30px; }
  .routine .line-stations::before { left: 4px; right: auto; top: 4px; bottom: 6px; width: 1px; height: auto; transform-origin: center top; }
  .routine .station { padding-top: 0; }
  .routine .station > .ball { left: -30px; top: 3px; }
  .routine .station ul { margin-top: 10px; }
  .routine .line-foot { grid-template-columns: minmax(0, 1fr); padding-left: 30px; }
  .section .routine .line-note { grid-column: 1; }
}

/* Who does what on Services: four stations, the approval ringed. The list stays a description list. */
.who-does.line-duty {
  --gap: clamp(20px, 2.6vw, 40px);
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); border-bottom: 0; margin-top: 16px;
}
.who-does.line-duty::before {
  content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--track); transform-origin: left center;
}
.who-does.line-duty > div { position: relative; display: block; padding: 34px 0 0; border-top: 0; }
.who-does.line-duty > div::before {
  content: ""; position: absolute; top: 0; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff 0 12%, #c9ccd2 34%, #6b7078 78%, #3a3e44 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.who-does.line-duty > div:nth-child(3)::before { box-shadow: 0 0 0 3px var(--studio), 0 0 0 4px var(--graphite); }
.who-does.line-duty dt { padding-top: 0; color: var(--graphite); }
.who-does.line-duty dd { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); font-size: 14.5px; line-height: 1.55; }
@media (max-width: 899px) {
  .who-does.line-duty { grid-template-columns: minmax(0, 1fr); row-gap: 26px; padding-left: 30px; }
  .who-does.line-duty::before { left: 4px; right: auto; top: 4px; bottom: 6px; width: 1px; height: auto; transform-origin: center top; }
  .who-does.line-duty > div { padding-top: 0; }
  .who-does.line-duty > div::before { left: -30px; top: 3px; }
}

/* ---------- Close inspection: a screenshot, one region outlined, that region beside or below at native size ---------- */
.inspect {
  --gap: clamp(28px, 3.6vw, 56px);
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: var(--gap); align-items: start;
  margin-top: clamp(32px, 4vw, 48px);
}
.inspect-overview { position: relative; }
.inspect-overview > img, .inspect-detail > img { display: block; width: 100%; height: auto; background: var(--panel); outline: 1px solid var(--hairline); }
.inspect-mark { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border: 1px solid var(--graphite); }
.inspect-leader {
  position: absolute; left: calc(var(--x) + var(--w)); right: calc(-1 * var(--gap)); top: calc(var(--y) + var(--h) / 2); height: 1px;
  background: var(--graphite); transform-origin: left center;
}
.inspect-detail { margin-top: var(--detail-top, 0); }
.section .inspect figcaption, .hub-section .inspect figcaption { grid-column: 1 / -1; margin-top: 16px; max-width: 46em; font-size: 13px; line-height: 1.5; color: var(--graphite-dim); }

/* The region drops below the screenshot when it is wide. */
.inspect.is-below { display: block; }
.is-below .inspect-overview { width: min(100%, 880px); }
.is-below .inspect-leader { left: calc(var(--x) + var(--w) / 2); right: auto; top: calc(var(--y) + var(--h)); bottom: calc(-1 * var(--gap)); width: 1px; height: auto; transform-origin: center top; }
.is-below .inspect-detail {
  margin-top: var(--gap); margin-left: calc(min(100%, 880px) * var(--xr));
  width: min(var(--native), calc(100% - min(100%, 880px) * var(--xr)));
}

@media (max-width: 899px) {
  .inspect { display: block; }
  .inspect-overview, .is-below .inspect-overview { width: 100%; }
  .inspect-leader, .is-below .inspect-leader {
    left: calc(var(--x) + var(--w) / 2); right: auto; top: calc(var(--y) + var(--h)); bottom: calc(-1 * var(--gap)); width: 1px; height: auto; transform-origin: center top;
  }
  .inspect-detail, .is-below .inspect-detail { margin: var(--gap) 0 0; width: min(100%, var(--native)); }
}

/* Each region, in percent of its screenshot (1440 × 1000), and where the detail sits beside it. */
.inspect-crm-work { --x: 67.92%; --y: 39.4%; --w: 29.72%; --h: 36.8%; --detail-top: 37.3%; --native: 428px; }
.inspect-crm-pipeline { --x: 20.83%; --y: 33%; --w: 55.56%; --h: 31%; --xr: 0.2083; --native: 800px; }

/* ---------- Framewright, drawn to filmed: four stations on one track ---------- */
.made-steps {
  --gap: clamp(20px, 2.4vw, 36px);
  position: relative; list-style: none; display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 3.8fr) minmax(0, 2.2fr) minmax(0, 1.8fr);
  column-gap: var(--gap); align-items: start; margin-top: clamp(32px, 4vw, 48px);
}
.made-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--track); transform-origin: left center; }
.made-step { position: relative; padding-top: 30px; }
.made-step > .ball { top: 0; left: 0; }
.section .made-label, .hub-section .made-label { font-family: var(--mono); font-size: 11px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
.made-step > img { display: block; width: 100%; height: auto; margin-top: 12px; background: #fff; outline: 1px solid var(--hairline); }
.section .made-step .caption, .hub-section .made-step .caption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--graphite-dim); }
.made-step .film-open { width: 100%; margin-top: 12px; }
.made-step .film-open img { outline: 1px solid var(--hairline); }
@media (max-width: 899px) {
  .made-steps { grid-template-columns: minmax(0, 1fr); row-gap: 30px; padding-left: 30px; }
  .made-steps::before { left: 4px; right: auto; top: 4px; bottom: 6px; width: 1px; height: auto; transform-origin: center top; }
  .made-step { padding-top: 0; }
  .made-step > .ball { left: -30px; top: 3px; }
  .made-built > img { width: min(100%, 340px); }
  .made-step .film-open { width: min(100%, 240px); }
}

/* ---------- Homepage: the evidence sits inside the ruled list of built work ---------- */
.built > figure { grid-column: 2 / -1; }
.built-shown { padding-bottom: clamp(36px, 4.4vw, 56px); }
/* The month-end pack sits under its row title, beside the text. */
.built-pack > .tick { grid-column: 1; grid-row: 1; }
.built-pack > h3 { grid-column: 2; grid-row: 1; }
.built-pack > .built-body { grid-column: 3; grid-row: 1 / span 2; }
.built > .pack { grid-column: 2; grid-row: 2; align-self: start; margin-top: 18px; width: min(100%, 220px); }
.built .pack { margin-top: 18px; width: min(100%, 240px); }
/* On Work, under the row title, aligned with it. */
.rows .pack { margin: 18px 0 0 26px; width: min(calc(100% - 26px), 200px); }
.built .pack img, .rows .pack img { display: block; width: 100%; height: auto; background: #fff; outline: 1px solid var(--hairline); }
.section .built .pack figcaption, .hub-section .rows .pack figcaption { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--graphite-dim); }
.start-links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 28px; margin-top: 18px; }
/* On Work, a figure takes the full width of its row. */
.rows > li > figure { grid-column: 1 / -1; }
@media (max-width: 759px) {
  .built > figure, .built > .pack { grid-column: 2; grid-row: auto; }
  .built-pack > h3, .built-pack > .built-body { grid-column: 2; grid-row: auto; }
  .start-links { flex-direction: column; align-items: center; }
}

/* ---------- Waiting, then drawn once ---------- */
.is-waiting.axis-run .axis-continue { transform: scaleY(0); }
.is-drawn.axis-run .axis-continue { transition: transform .9s var(--ease); }
.axis-run .axis-continue { transform-origin: center top; }

.is-waiting .line-stations::before, .is-waiting.line-duty::before, .is-waiting .made-steps::before { transform: scaleX(0); }
.is-waiting .station > .ball, .is-waiting.line-duty > div::before { opacity: 0; transform: translateX(-16px); }
.is-waiting .station-decision > .ball, .is-waiting.line-duty > div:nth-child(3)::before { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.is-drawn .line-stations::before, .is-drawn.line-duty::before, .is-drawn .made-steps::before { transition: transform 1.25s var(--ease); }
.is-drawn .station > .ball, .is-drawn.line-duty > div::before { transition: opacity .35s ease, transform .7s var(--ease), box-shadow .5s ease; }
.is-drawn .station:nth-child(2) > .ball, .is-drawn.line-duty > div:nth-child(2)::before { transition-delay: .25s; }
.is-drawn .station:nth-child(3) > .ball, .is-drawn.line-duty > div:nth-child(3)::before { transition-delay: .5s; }
.is-drawn .station:nth-child(4) > .ball, .is-drawn.line-duty > div:nth-child(4)::before { transition-delay: .75s; }
.is-drawn .station:nth-child(5) > .ball { transition-delay: 1s; }
.is-drawn .station-decision > .ball { transition: opacity .35s ease .75s, transform .7s var(--ease) .75s, box-shadow .6s ease 1.45s; }
.is-drawn.line-duty > div:nth-child(3)::before { transition: opacity .35s ease .5s, transform .7s var(--ease) .5s, box-shadow .6s ease 1.2s; }

/* Framewright: the track draws with its figure. Each station has its own data-sequence, so on a phone it draws when
   it comes into view: its ball arrives and its image opens downward. Side by side, the four arrive in turn.
   A clip-path can only be interpolated to another inset(), not to none, so the drawn state ends at inset(-2px),
   which also leaves each image's 1px outline unclipped. */
.made-step.is-waiting > .ball { opacity: 0; transform: translateX(-16px); }
.made-step.is-waiting > img, .made-step.is-waiting .film-open img { clip-path: inset(0 0 100% 0); }
.made-step.is-drawn > .ball { transition: opacity .35s ease, transform .7s var(--ease); }
.made-step.is-drawn > img, .made-step.is-drawn .film-open img { clip-path: inset(-2px); transition: clip-path .9s var(--ease) .2s; }
@media (min-width: 900px) {
  .made-step.is-drawn:nth-child(2) > .ball { transition-delay: .25s; }
  .made-step.is-drawn:nth-child(3) > .ball { transition-delay: .5s; }
  .made-step.is-drawn:nth-child(4) > .ball { transition-delay: .75s; }
  .made-step.is-drawn:nth-child(2) > img { transition-delay: .45s; }
  .made-step.is-drawn:nth-child(3) > img { transition-delay: .7s; }
  .made-step.is-drawn:nth-child(4) .film-open img { transition-delay: .95s; }
}

/* Inspection: the outline draws and the leader runs towards the detail. The detail has its own data-sequence and
   opens from that side once it is in view: after the leader when it sits beside the screenshot, sooner below it. */
.is-waiting .inspect-mark { clip-path: inset(0 100% 100% 0); }
.is-waiting .inspect-leader { transform: scaleX(0); }
.is-waiting.is-below .inspect-leader { transform: scaleY(0); }
.inspect-detail.is-waiting > img { clip-path: inset(0 100% 0 0); }
.is-below .inspect-detail.is-waiting > img { clip-path: inset(0 0 100% 0); }
.is-drawn .inspect-mark { clip-path: inset(-2px); transition: clip-path .6s var(--ease); }
.is-drawn .inspect-leader { transition: transform .5s var(--ease) .45s; }
.inspect-detail.is-drawn > img { clip-path: inset(-2px); transition: clip-path .8s var(--ease) .8s; }
.is-below .inspect-detail.is-drawn > img { transition-delay: .4s; }

/* Engagement: a graphite sweep runs along the track, then fades, leaving the stops. */
.stops::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--graphite); opacity: 0; transform-origin: left center; }
.is-waiting .stops::after { opacity: 1; transform: scaleX(0); }
.is-waiting .stop > .ball { opacity: 0; transform: scale(.4); }
.is-drawn .stops::after { transition: transform 1.4s var(--ease), opacity .6s ease 1.5s; }
.is-drawn .stop > .ball { transition: opacity .3s ease, transform .5s var(--ease); }
.is-drawn .stop:nth-child(2) > .ball { transition-delay: .4s; }
.is-drawn .stop:nth-child(3) > .ball { transition-delay: .8s; }
.is-drawn .stop:nth-child(4) > .ball { transition-delay: 1.2s; }

@media (max-width: 1023px) {
  .is-waiting.routine .line-stations::before { transform: scaleY(0); }
  .is-waiting.routine .station > .ball { transform: translateY(-16px); }
}
@media (max-width: 899px) {
  .is-waiting.line-duty::before, .is-waiting .made-steps::before { transform: scaleY(0); }
  .is-waiting.line-duty > div::before, .made-step.is-waiting > .ball { transform: translateY(-16px); }
  .is-waiting .inspect-leader { transform: scaleY(0); }
  .inspect-detail.is-waiting > img { clip-path: inset(0 0 100% 0); }
  .inspect-detail.is-drawn > img { transition-delay: .4s; }
}
@media (max-width: 759px) {
  .stops::after { left: 4px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; transform-origin: center top; }
  .is-waiting .stops::after { transform: scaleY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .is-waiting * , .is-waiting::before, .is-waiting *::before, .is-waiting::after, .is-waiting *::after { transition: none !important; }
}
@media print {
  .is-waiting .line-stations::before, .is-waiting.routine .line-stations::before, .is-waiting.line-duty::before, .is-waiting .made-steps::before,
  .is-waiting .inspect-leader, .is-waiting.is-below .inspect-leader { transform: none; }
  .is-waiting .station > .ball, .is-waiting.routine .station > .ball, .is-waiting.line-duty > div::before, .made-step.is-waiting > .ball, .is-waiting .stop > .ball { opacity: 1; transform: none; }
  .made-step.is-waiting > img, .made-step.is-waiting .film-open img, .is-waiting .inspect-mark,
  .inspect-detail.is-waiting > img, .is-below .inspect-detail.is-waiting > img { clip-path: none; }
  .is-waiting .stops::after { opacity: 0; }
}