/* ═══════════════════════════════════════════════════════════
   Ugly Mug — flow page (extends desk.css)
   Default = plain stacked layout (no JS, reduced motion).
   html.flow-live = pinned stage driven by flow.js: a row of windows
   under the headline that pops dock-style under the cursor, then
   funnels into the "How we work" window as you scroll.
   ═══════════════════════════════════════════════════════════ */

.flow-page .bar-nav { gap: 2rem; }
/* desk.css sets body overflow-x: hidden, which turns body into a scroll box and breaks position: sticky. clip trims the same overflow without that. */
body.flow-page { overflow-x: clip; }

/* ───────── Static layout ───────── */
.flow { position: relative; }
.flow-stage { position: relative; padding: calc(var(--bar-h) + 3rem) var(--gutter) 4rem;
  background: radial-gradient(60rem 40rem at 18% -5%, rgba(201,168,76,.10), transparent 60%), radial-gradient(40rem 30rem at 90% 110%, rgba(232,214,179,.05), transparent 60%); }
.flow-head { text-align: center; max-width: 52rem; margin: 0 auto; position: relative; z-index: 5; }
.flow-head h1 { font-size: clamp(3.4rem, 8vw, 7rem); margin: .8rem 0 1rem; white-space: nowrap; }
.flow-head h1 em { font-style: normal; color: var(--gold); }
.flow-head .deck { margin-inline: auto; max-width: 48rem; text-wrap: balance; }

.dock { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; max-width: 1200px; margin: 3rem auto 0; }
.dwin { display: block; width: 100%; padding: 0; text-align: left; font: inherit; color: var(--win-ink); cursor: pointer; }
.dwin .win-bar { height: 1.9rem; padding: 0 .7rem; gap: .6rem; font-size: .6rem; }
.dwin .win-name { overflow: hidden; text-overflow: ellipsis; }
.dwin-body { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--dark); }
.dwin-body img, .dwin-body video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dwin-body video { opacity: 0; transition: opacity .3s; }
.dwin.is-playing .dwin-body video { opacity: 1; }
.dwin-ai { display: flex; flex-direction: column; justify-content: center; gap: .1rem; padding: .7rem .8rem;
  background: radial-gradient(14rem 10rem at 0% 0%, rgba(201,168,76,.12), transparent 60%), var(--win); }
.ai-row { display: flex; justify-content: space-between; gap: .5rem; padding: .28rem 0; border-bottom: 1px dashed var(--win-rule-soft); font-family: var(--mono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--win-ink-dim); }
.ai-row:last-child { border-bottom: 0; }
.ai-row span:last-child { color: var(--gold); }
.ai-win span:first-child { color: var(--win-ink); }

.dock-cap { display: none; }

.svc-head { text-align: center; margin: 5rem auto 0; max-width: 52rem; }
.svc-head h2 { font-size: clamp(2.4rem, 5vw, 4.4rem); margin-top: .5rem; }
.svc-deck { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 1.2rem; max-width: 1200px; margin: 2rem auto 0; }
.svc .win-text h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.wf { max-width: 46rem; margin: 3rem auto 0; }
.wf-rail { height: 2px; background: var(--win-rule-soft); }
.wf-fill { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: left; transform: scaleX(1); }
.wf-steps { list-style: none; margin: 0; padding: .4rem 1.4rem; }
.wf-step { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px dashed var(--win-rule-soft); }
.wf-step:last-child { border-bottom: 0; }
.wf-n { font-family: var(--mono); font-size: .8rem; color: var(--gold); letter-spacing: .08em; }
.wf-t { font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.4rem); text-transform: uppercase; line-height: 1; color: var(--win-ink); }
.wf-d { display: block; margin-top: .35rem; color: var(--win-ink-dim); font-size: 1rem; }
.wf-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.4rem 1.2rem; border-top: 1px solid var(--win-rule-soft); }

/* ───────── Live: pinned stage ───────── */
.flow-live .flow { height: 640vh; }
.flow-live .flow-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; padding: 0; }
.flow-live .flow-head { position: absolute; left: 50%; top: calc(var(--bar-h) + clamp(1rem, 5vh, 3.5rem)); width: min(52rem, 100% - 2 * var(--gutter)); translate: -50% 0; will-change: transform, opacity; }
.flow-live .flow-head .deck { font-size: clamp(.95rem, 1.2vw, 1.1rem); }
.flow-live .flow-head .desk-ctas { margin-top: 1.2rem; }

.flow-live .dock { display: block; position: absolute; inset: 0; margin: 0; max-width: none; pointer-events: none; z-index: 6; }
.flow-live .dwin { position: absolute; left: 0; top: 0; width: 15rem; opacity: 0; pointer-events: auto; transform-origin: 50% 60%; will-change: transform;
  transition: box-shadow .4s var(--ease), border-color .3s; }
.flow-live .dwin.is-active { border-color: rgba(201,168,76,.5); box-shadow: 0 1px 0 rgba(248,245,239,.1) inset, 0 34px 60px -26px rgba(0,0,0,.95), 0 80px 140px -40px rgba(0,0,0,.9); }
.flow-live .dwin.is-active .win-num { color: var(--gold); }
.flow-live .dwin:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Caption under the row: slides its notch to the window you're on. */
.flow-live .dock-cap { display: block; position: absolute; left: 0; top: 0; width: min(33rem, 100% - 2rem); z-index: 30;
  background: rgba(29,29,29,.94); border: 1px solid var(--rule); border-radius: 12px; padding: .95rem 1.1rem 1rem; text-align: left;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 24px 48px -24px rgba(0,0,0,.85);
  opacity: 0; visibility: hidden; transform-origin: 50% 0; will-change: transform, opacity; }
.cap-notch { position: absolute; top: -7px; left: 0; width: 12px; height: 12px; background: rgba(29,29,29,.94); border-left: 1px solid var(--rule); border-top: 1px solid var(--rule); rotate: 45deg; opacity: 0; transition: opacity .25s; }
.flow-live .cap-notch { opacity: 1; }
.cap-kind { color: var(--gold); text-transform: uppercase; letter-spacing: .12em; font-size: .66rem; }
.cap-title { font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 1.9rem); text-transform: uppercase; line-height: 1; margin: .35rem 0 .45rem; }
.cap-desc { color: var(--ink-dim); font-size: .9rem; line-height: 1.5; }
.cap-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .6rem; }
.cap-meta { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin: 0; }
.cap-meta:empty { display: none; }
.cap-open { margin: 0; white-space: nowrap; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.cap-open:hover { color: var(--champagne); }

.flow-live .svc-head { position: absolute; left: 50%; top: calc(var(--bar-h) + clamp(.5rem, 3vh, 2rem)); width: min(52rem, 100% - 2 * var(--gutter)); translate: -50% 0; margin: 0; z-index: 4; opacity: 0; will-change: transform, opacity; }
.flow-live .svc-head h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); }
.flow-live .svc-deck { display: block; position: absolute; inset: 0; margin: 0; max-width: none; pointer-events: none; z-index: 8; }
.flow-live .svc { position: absolute; left: 0; top: 0; width: min(44rem, 100% - 2 * var(--gutter)); opacity: 0; pointer-events: auto; transform-origin: 50% 0; will-change: transform, opacity; }
.flow-live .svc .win-text { padding: 1.2rem 1.4rem 1.1rem; }
.svc-shade { position: absolute; inset: 0; background: #111; pointer-events: none; border-radius: inherit; opacity: 0; }
.flow-live .wf { position: absolute; left: 0; top: 0; width: min(44rem, 100% - 2 * var(--gutter)); margin: 0; z-index: 5; opacity: 0; will-change: transform, opacity; }
.flow-live .wf-fill { transform: scaleX(0); }
.flow-live .wf-step { opacity: .32; transition: opacity .45s var(--ease); }
.flow-live .wf-step .wf-n { transition: color .45s; color: var(--win-ink-faint); }
.flow-live .wf-step.is-on { opacity: 1; }
.flow-live .wf-step.is-on .wf-n { color: var(--gold); }
.flow-live .wf-step.is-done { opacity: .62; }

/* Phones: smaller head, row becomes two rows of three. */
@media (max-width: 760px) {
  .flow-head h1 { white-space: normal; }
  .flow-live .flow-head .deck { font-size: .86rem; line-height: 1.45; }
  .flow-live .flow-head h1 { margin: .5rem 0 .6rem; }
  .flow-live .flow-head .desk-ctas { margin-top: .9rem; }
  .flow-live .dock-cap { padding: .8rem .95rem; }
  .flow-live .svc .win-text p { font-size: .9rem; }
  .flow-live .svc .list button, .flow-live .svc .list-plain li { padding: .5rem 0; font-size: .86rem; }
  .cap-desc { font-size: .88rem; }
  .flow-live .wf-steps { padding: .2rem 1rem; }
  .wf-step { grid-template-columns: 2.2rem 1fr; padding: .8rem 0; }
}
/* Short laptop screens: shrink the headline so the row and its card both fit. */
@media (max-height: 840px) and (min-width: 761px) {
  .flow-live .flow-head h1 { font-size: clamp(3rem, 6vw, 5rem); margin: .45rem 0 .6rem; }
  .flow-live .flow-head .deck { font-size: .95rem; }
  .flow-live .flow-head .desk-ctas { margin-top: .8rem; }
}
/* "How we work" title is an h3 for search; keep it looking like the other window-bar labels. */
.win-bar h2.win-name, .win-bar h3.win-name { font: inherit; letter-spacing: inherit; line-height: inherit; text-transform: inherit; }
#work { position: absolute; }
.flow-page .foot-grid { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }

/* Phones: the row windows are ~130px wide, so drop the [0x] tag, use short names, and keep the AI rows on one line. */
.nm-short { display: none; }
@media (max-width: 760px) {
  .dwin .win-bar { padding: 0 .55rem; gap: .4rem; font-size: .62rem; letter-spacing: .06em; }
  .dwin .win-num { display: none; }
  .dwin .nm-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dwin .nm-short { display: inline; }
  .dwin-ai { padding: .35rem .5rem; gap: 0; }
  .ai-row { font-size: .5rem; letter-spacing: .02em; padding: .2rem 0; white-space: nowrap; gap: .3rem; }
}