/* ==========================================================
   Home: opening + build film, Look below, selected work,
   services, founder, Create yours, contact
   ========================================================== */

/* ---------- film ---------- */
.film { position: relative; background: var(--ink); color: var(--on-dark); }
.film-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.film-stage { position: absolute; inset: 0; background: var(--ink); }
.fv { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-scene) var(--ease); }
.fv.on { opacity: 1; }
.fv img, .fv video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) 50%; }
.fv video { opacity: 0; transition: opacity 260ms linear; }
.fv.ready video { opacity: 1; }
.fv .still { opacity: 0; transition: opacity var(--t-scene); }
.film.stills .fv .still { opacity: 1; }
.film.stills .fv video { display: none; }
.film-shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, rgba(10,11,12,.72) 0%, rgba(10,11,12,.38) 34%, rgba(10,11,12,0) 60%),
  linear-gradient(0deg, rgba(10,11,12,.78) 0%, rgba(10,11,12,0) 30%),
  linear-gradient(180deg, rgba(10,11,12,.45) 0%, rgba(10,11,12,0) 18%); transition: opacity var(--t-scene); }

/* opening */
.film-open { position: absolute; inset: 0; display: flex; align-items: center; padding-top: var(--mast-h); transition: opacity 300ms linear, transform 300ms linear; }
.film-open .wrap { display: grid; gap: 24px; }
.film-open .display { max-width: 13ch; }
.fo-sub { max-width: 54ch; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--on-dark-2); }
.fo-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 6px; }
.fo-work { margin-left: 8px; font-weight: 600; text-decoration: none; padding: 12px 4px; border-bottom: 1.5px solid transparent; transition: border-color var(--t-fast); }
.fo-work:hover { border-color: currentColor; }
.fo-trust { display: flex; flex-wrap: wrap; gap: 10px 0; margin-top: 18px; font-size: 14.5px; color: var(--on-dark-2); }
.fo-trust li { padding: 0 16px; border-left: 1px solid var(--line-d2); }
.fo-trust li:first-child { padding-left: 0; border-left: 0; }
.fo-trust b { color: var(--ivory); font-weight: 600; }
.film.started .film-open { opacity: 0; transform: translateY(-16px); pointer-events: none; }

/* chapter copy */
.film-copy { position: absolute; left: var(--gut); bottom: 150px; width: min(470px, calc(100% - 2 * var(--gut))); opacity: 0; transform: translateY(10px); transition: opacity var(--t-panel), transform var(--t-panel) var(--ease); pointer-events: none; }
.film.started .film-copy { opacity: 1; transform: none; pointer-events: auto; }
.fc-n { display: flex; align-items: center; gap: 12px; font: 500 13px/1 var(--mono); color: var(--gold-2); }
.fc-n i { flex: none; width: 28px; height: 1.5px; background: var(--red); }
.fc-t { margin-top: 14px; font: 500 clamp(32px, 3.4vw, 50px)/1.04 var(--serif); letter-spacing: -.02em; }
.fc-d { margin-top: 14px; font-size: 18px; line-height: 1.55; color: var(--on-dark-2); }
.fc-s { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ivory); text-decoration: none; border-bottom: 1px solid var(--line-d2); padding-bottom: 3px; }
.fc-s:hover { border-color: var(--ivory); }
.fc-cta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
.film-copy.swap { animation: fcIn var(--t-panel) var(--ease); }
@keyframes fcIn { from { opacity: .0; transform: translateY(8px); } }

/* chapters + timeline */
.film-ui { position: absolute; inset: auto 0 0 0; padding: 0 var(--gut) calc(22px + env(safe-area-inset-bottom)); pointer-events: none; }
.film-ui > * { pointer-events: auto; }
.film-chaps { display: flex; gap: 0; max-width: var(--max); margin: 0 auto; }
.film-chaps li { flex: 1; min-width: 0; }
.film-chaps button { width: 100%; text-align: left; padding: 10px 10px 12px 0; font: 500 14px/1.2 var(--sans); color: var(--on-dark-3); transition: color var(--t-fast); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.film-chaps button b { font: 500 12px/1 var(--mono); margin-right: 8px; color: inherit; }
.film-chaps button:hover { color: var(--ivory); }
.film-chaps button[aria-current="step"] { color: var(--ivory); }
.film-chaps button[aria-current="step"] b { color: var(--red); }
.film-bar { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; gap: 24px; }
.film-track { position: relative; flex: 1; height: 28px; cursor: pointer; touch-action: none; }
.film-track::before { content: ''; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--line-d2); }
.ft-segs { position: absolute; inset: 0; display: flex; pointer-events: none; }
.ft-segs i { flex: 1; border-left: 1px solid var(--line-d2); height: 10px; margin-top: 9px; }
.ft-segs i:first-child { border-left: 0; }
.ft-fill { position: absolute; left: 0; top: 13px; height: 2px; width: 0; background: var(--ivory); }
.ft-knob { position: absolute; top: 6px; left: 0; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--ivory); box-shadow: 0 0 0 4px rgba(244,239,230,.18); transition: box-shadow var(--t-fast); }
.film-track:hover .ft-knob, .film-track.drag .ft-knob { box-shadow: 0 0 0 7px rgba(244,239,230,.22); }
.film-track:focus-visible { outline-offset: 6px; }
.film-skip { flex: none; font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--on-dark-2); padding: 8px 0; }
.film-skip:hover { color: var(--ivory); }
.film-label { max-width: var(--max); margin: 6px auto 0; font-size: 12.5px; color: var(--on-dark-3); }
.film:not(.started) .film-chaps, .film:not(.started) .film-bar { opacity: 0; pointer-events: none; }
.film-chaps, .film-bar { transition: opacity var(--t-panel); }

@media (max-width: 760px) {
  .film-pin { display: flex; flex-direction: column; }
  .film-stage { inset: 0 0 auto 0; height: 58svh; }
  .film-shade { background: linear-gradient(0deg, var(--ink) 40%, rgba(15,16,18,.0) 58%), linear-gradient(180deg, rgba(10,11,12,.5), rgba(10,11,12,0) 20%); }
  .film-open { align-items: flex-end; padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
  .film-open .wrap { gap: 16px; }
  .film-open .display { font-size: clamp(38px, 11vw, 52px); }
  .fo-sub { font-size: 16.5px; }
  .fo-trust { display: none; }
  .fo-work { margin-left: 0; }
  .film-copy { bottom: 128px; width: auto; right: var(--gut); }
  .fc-t { font-size: 30px; margin-top: 10px; }
  .fc-d { font-size: 16px; margin-top: 8px; }
  .film-chaps { display: none; }
  .film-bar { gap: 14px; }
  .film-skip { font-size: 13.5px; }
  .film-label { font-size: 11.5px; }
}
@media (max-width: 760px) and (max-height: 640px) { .film-stage { height: 50svh; } .fo-sub { display: none; } }

/* ---------- Look below ---------- */
.below { padding: clamp(80px, 10vw, 136px) 0; }
.bv-modes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.bv-stage { position: relative; aspect-ratio: 3 / 2; max-height: 78vh; width: 100%; border-radius: var(--r-l); overflow: hidden; background: var(--ink-3); user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.bv-layer { position: absolute; inset: 0; }
.bv-layer img { width: 100%; height: 100%; object-fit: cover; }
.bv-alt { clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0); }
.bv-xray, .bv-over, .bv-alt, .bv-handle, .bv-lab, .rain, .bv-flow, .ex-pins { opacity: 0; pointer-events: none; transition: opacity var(--t-scene) var(--ease); }
.bv[data-mode="compare"] .bv-alt, .bv[data-mode="compare"] .bv-lab { opacity: 1; }
.bv[data-mode="compare"] .bv-handle { opacity: 1; pointer-events: auto; }
.bv[data-mode="below"] .bv-xray { opacity: 1; }
.bv[data-mode="image"] .bv-over, .bv[data-mode="rain"] .bv-over { opacity: 1; }
.bv[data-mode="rain"] .rain, .bv[data-mode="rain"] .bv-flow { opacity: 1; }
.bv[data-mode="image"] .ex-pins { opacity: 1; }
.ex-pins .ex-pin { pointer-events: auto; }
.bv-over { background: var(--ink-2); overflow: hidden; }
.bv-over img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bv-over .ex-blur { filter: blur(22px) brightness(.5); transform: scale(1.15); }
.bv-over.contain .x-over { object-fit: contain; }
.bv-over.svg .ex-blur { display: none; }
.bv-over.svg { background: #0d1012; }
.rain { position: absolute; inset: 0; width: 100%; height: 100%; }
.bv-flow { position: absolute; inset: 0; width: 100%; height: 100%; }
.bv-flow .fa { fill: none; stroke: #9fd3ff; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 14 12; animation: flow 1s linear infinite; filter: drop-shadow(0 0 6px rgba(120,190,255,.7)); }
.bv-flow .inl circle { fill: none; stroke: #ffd36a; stroke-width: 5; }
.bv-flow .inl text { fill: #fff; font: 700 30px var(--sans); paint-order: stroke; stroke: rgba(0,0,0,.7); stroke-width: 8px; }
.ex-pin { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--ivory); color: var(--ink); font: 700 14px/1 var(--sans); box-shadow: 0 0 0 5px rgba(244,239,230,.25), 0 6px 18px rgba(0,0,0,.4); transition: transform var(--t-fast), background var(--t-fast); }
.ex-pin:hover, .ex-pin.on { transform: scale(1.15); background: var(--gold-2); }
.bv-handle { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 56px; margin-left: -28px; cursor: ew-resize; touch-action: none; display: grid; place-items: center; z-index: 3; }
.bv-handle i { position: absolute; top: 0; bottom: 0; left: 27px; width: 2px; background: var(--ivory); box-shadow: 0 0 12px rgba(0,0,0,.4); }
.bv-handle span { position: relative; width: 52px; height: 52px; border-radius: 50%; background: var(--ivory); color: var(--ink); display: grid; place-items: center; font: 600 16px/1 var(--sans); letter-spacing: 2px; box-shadow: 0 6px 24px rgba(0,0,0,.35); transition: transform var(--t-fast); }
.bv-handle:hover span, .bv-handle.drag span { transform: scale(1.08); }
.bv-handle:focus-visible { outline: none; }
.bv-handle:focus-visible span { box-shadow: 0 0 0 3px var(--gold-2), 0 6px 24px rgba(0,0,0,.35); }
.bv-lab { position: absolute; top: 16px; z-index: 2; padding: 7px 12px; border-radius: 999px; background: rgba(15,16,18,.62); backdrop-filter: blur(8px); font: 600 13px/1 var(--sans); }
.bv-lab.l { left: 16px; } .bv-lab.r { right: 16px; }
.bv-stage .tag { bottom: 16px; left: 16px; }
.bv-sys { position: absolute; inset: 0; width: 100%; height: 100%; }
.bv-sys .dim { fill: rgba(8,9,10,.5); opacity: 0; transition: opacity var(--t-scene); }
.bv-sys.focus .dim { opacity: 1; }
.bv-sys .sys path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: transparent; }
.bv-sys .sys { opacity: 0; transition: opacity var(--t-scene); }
.bv-sys .sys.on { opacity: 1; }
.bv-sys .sys.on path { stroke: rgba(255,255,255,.0); }
.bv-sys .flow { fill: none; stroke-width: 9; stroke-dasharray: 1 22; stroke-linecap: round; animation: flow 1.1s linear infinite; filter: drop-shadow(0 0 6px rgba(255,255,255,.6)); }
.bv-sys .halo { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .32; }
.bv-sys .dim { fill: rgba(8,9,10,.62); }
@keyframes flow { to { stroke-dashoffset: -46; } }
.bv-foot { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px 28px; margin-top: 20px; min-height: 56px; }
.bv-sysbar { display: flex; flex-wrap: wrap; gap: 8px; }
.bv-say { font: 400 clamp(19px, 1.6vw, 23px)/1.4 var(--serif); color: var(--ivory); max-width: 54ch; }
.bv-note { grid-column: 1 / -1; }
@media (max-width: 900px) { .bv-foot { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .bv-stage { aspect-ratio: 4 / 3.4; border-radius: var(--r); }
  .bv-built img, .bv-alt img { object-position: 46% 50%; }
  .bv-handle span { width: 46px; height: 46px; }
  .bv-modes { gap: 8px; } .bv-modes .chip { min-height: 42px; padding: 0 14px; font-size: 14.5px; }
}

/* ---------- selected work ---------- */
.cases { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(20px, 2.4vw, 32px); }
.case { grid-column: span 6; position: relative; display: grid; text-decoration: none; color: inherit; border-radius: var(--r-l); overflow: hidden; background: var(--ink); color: var(--on-dark); min-height: 520px; isolation: isolate; }
.case:first-child { grid-column: 1 / -1; min-height: min(72vh, 680px); }
.case .ph { position: absolute; inset: 0; z-index: -1; background: var(--ink-3); }
.case .ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,11,12,.9) 0%, rgba(10,11,12,.35) 45%, rgba(10,11,12,0) 70%); }
.case:hover .ph img.ok { transform: scale(1.03); }
.case-b { align-self: end; padding: clamp(24px, 3vw, 44px); display: grid; gap: 12px; max-width: 760px; }
.case-k { font: 500 13px/1 var(--mono); color: var(--gold-2); }
.case-t { font: 500 clamp(28px, 2.8vw, 44px)/1.08 var(--serif); letter-spacing: -.015em; }
.case-d { color: var(--on-dark-2); max-width: 54ch; }
.case-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 6px; }
.case-stats div { display: grid; }
.case-stats b { font: 500 26px/1.1 var(--serif); }
.case-stats span { font-size: 13.5px; color: var(--on-dark-3); }
.case-go { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.case-go .ar { transition: transform var(--t-fast) var(--ease); }
.case:hover .case-go .ar { transform: translateX(4px); }
.case .tag { left: auto; right: 16px; top: 16px; bottom: auto; }
.work-more { margin-top: clamp(32px, 4vw, 56px); display: flex; justify-content: center; }
@media (max-width: 900px) { .case, .case:first-child { grid-column: 1 / -1; min-height: 460px; } .case:first-child { min-height: 520px; } }

/* ---------- services summary ---------- */
.svc-rows { border-top: 1px solid var(--line-2); }
.svc-row a { display: grid; grid-template-columns: 72px 1.1fr 1.4fr 48px; gap: 24px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; color: inherit; transition: background var(--t-fast); }
.svc-row .sn { font: 500 14px/1 var(--mono); color: var(--gold-ink); }
.svc-row .st { font: 500 clamp(24px, 2.2vw, 32px)/1.15 var(--serif); letter-spacing: -.012em; }
.svc-row .sd { color: var(--text-2); }
.svc-row .sd small { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }
.svc-row .sa { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease); }
.svc-row a:hover .sa { background: var(--ink); color: var(--ivory); border-color: var(--ink); transform: translateX(4px); }
.svc-row a:hover .st { color: var(--text); }
@media (max-width: 800px) { .svc-row a { grid-template-columns: 44px 1fr 44px; gap: 6px 14px; padding: 22px 0; } .svc-row .sd { grid-column: 2; grid-row: 2; font-size: 15.5px; } .svc-row .sa { grid-column: 3; grid-row: 1 / 3; } }

/* ---------- founder ---------- */
.founder { overflow: hidden; }
.fd-grid { display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; gap: clamp(36px, 6vw, 104px); align-items: center; }
.fd-photo { position: relative; }
.fd-frame { position: relative; aspect-ratio: 780 / 955; border-radius: var(--r-l); overflow: hidden; background: var(--ink-3); }
.fd-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.fd-photo figcaption { margin-top: 16px; display: grid; gap: 2px; }
.fd-photo figcaption b { font: 500 20px/1.3 var(--serif); }
.fd-photo figcaption span { font-size: 14.5px; color: var(--muted); }
.fd-copy { display: grid; gap: 22px; }
.fd-copy .h2 { font-style: italic; max-width: 20ch; }
.fd-src a { color: inherit; }
.fd-facts { display: grid; gap: 0; margin: 4px 0 0; border-top: 1px solid var(--line-2); }
.fd-facts div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.fd-facts dt { font-size: 14px; font-weight: 600; color: var(--muted); }
.fd-facts dd { margin: 0; font-weight: 500; }
.fd-cta { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; margin-top: 6px; }
@media (max-width: 860px) { .fd-grid { grid-template-columns: 1fr; } .fd-photo { max-width: 420px; } .fd-facts div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Create yours ---------- */
.cy { padding: clamp(80px, 10vw, 136px) 0; }
.cy-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
.cy-stagecol { position: sticky; top: calc(var(--mast-h) + 16px); }
.cy-stage { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-l); overflow: hidden; background: radial-gradient(120% 90% at 20% 0%, #2a2620, #0c0d0f 60%); }
.cy-imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 420ms var(--ease); }
.cy-imgs img.on { opacity: 1; }
.cy-ann { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cy-ann .bd { fill: rgba(227,199,124,.08); stroke: var(--gold-2); stroke-width: 6; stroke-dasharray: 22 14; transition: all 420ms var(--ease); }
.cy-ann .dl { fill: none; stroke: var(--gold-2); stroke-width: 2; }
.cy-ann text { fill: var(--ivory); font: 700 46px var(--sans); paint-order: stroke; stroke: rgba(10,11,12,.8); stroke-width: 10px; }
.cy-stage .tag { top: 14px; left: 14px; bottom: auto; }
.cy-mode { position: absolute; top: 14px; right: 14px; z-index: 2; padding: 7px 12px; border-radius: 999px; background: var(--red); color: #fff; font: 600 12.5px/1 var(--sans); }
.cy-note { min-height: 64px; margin-top: 12px; display: flex; }
.cy-note span { width: 100%; padding: 12px 16px; border-radius: 12px; background: var(--ink-3); border-left: 3px solid var(--gold-2); font-size: 15px; line-height: 1.5; color: var(--ivory); animation: noteIn var(--t-panel) var(--ease); }
@keyframes noteIn { from { opacity: 0; transform: translateY(6px); } }
.cy-sample { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.cy-k { font-size: 14px; font-weight: 600; color: var(--on-dark-3); margin-right: 4px; }
.chip.sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
.cy-exit { font-size: 14px; font-weight: 600; color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; padding: 8px 4px; }
.cy-ctl { display: grid; gap: 10px; }
.cy-q { margin: 0; padding: 22px 0 24px; border: 0; border-top: 1px solid var(--line-d); min-width: 0; }
.cy-q legend { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; margin-bottom: 16px; font: 500 20px/1.3 var(--serif); }
.cy-q .n { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line-d2); display: grid; place-items: center; font: 600 13px/1 var(--sans); }
.cy-q.done .n { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.cy-out { margin-left: auto; font: 600 16px/1 var(--sans); color: var(--gold-2); }
.cy-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cy-type { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--line-d2); text-align: left; font: 600 15.5px/1.2 var(--sans); transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.cy-type img { width: 54px; height: 36px; border-radius: 6px; object-fit: cover; flex: none; opacity: .85; }
.cy-type:hover { border-color: var(--ivory); }
.cy-type[aria-checked="true"] { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.cy-type[aria-checked="true"] img { opacity: 1; }
.cy-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.cy-hint { margin-top: 12px; font-size: 14.5px; color: var(--on-dark-2); }
.cy input[type=range] { width: 100%; height: 36px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.cy input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--gold-2) var(--p, 38%), var(--line-d2) var(--p, 38%)); }
.cy input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line-d2); }
.cy input[type=range]::-moz-range-progress { height: 4px; background: var(--gold-2); }
.cy input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: var(--ivory); box-shadow: 0 0 0 5px rgba(227,199,124,.25); transition: box-shadow var(--t-fast); }
.cy input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--ivory); }
.cy input[type=range]:active::-webkit-slider-thumb { box-shadow: 0 0 0 9px rgba(227,199,124,.3); }
.cy-scale { display: flex; justify-content: space-between; font-size: 13px; color: var(--on-dark-3); margin-top: 2px; }

.brief { margin-top: clamp(32px, 4vw, 56px); border-radius: var(--r-l); background: var(--ivory); color: var(--text); overflow: hidden; }
.brief-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; padding: 26px clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--line-2); }
.brief-h .mono { color: var(--gold-ink); margin-bottom: 6px; }
.brief-b { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 0; align-items: start; }
.brief-main { padding: 6px clamp(20px, 3vw, 40px) 30px; }
.brief-b { align-items: stretch; }
.brief-side { border-left: 1px solid var(--line-2); background: rgba(255,255,255,.45); }
.brief-stick { padding: 28px clamp(20px, 2.6vw, 34px); position: sticky; top: 72px; max-height: calc(100vh - 80px); overflow: auto; scrollbar-width: thin; }
.brief-k { font: 600 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.brief-facts { margin: 0; display: grid; gap: 14px; align-content: start; }
.brief-facts div { display: grid; gap: 2px; }
.brief-facts dt { font-size: 13px; color: var(--muted); }
.brief-facts dd { margin: 0; font-weight: 600; }
.road { display: grid; gap: 4px; counter-reset: r; }
.road li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 10px 12px; border-radius: 10px; transition: background var(--t-panel); }
.road li .rn { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; font: 600 12px/1 var(--sans); }
.road li b { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.road li b em { font-style: normal; font: 600 11.5px/1 var(--sans); padding: 5px 8px; border-radius: 999px; background: var(--red); color: #fff; }
.road li p { font-size: 14.5px; color: var(--text-2); margin-top: 2px; }
.road li .pv { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.road li.here { background: #fff; box-shadow: 0 1px 0 var(--line); }
.road li.here .rn { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.road li.done { opacity: .55; }
.road li.done .rn { background: var(--line-2); border-color: transparent; }
.next { display: grid; gap: 14px; counter-reset: nx; margin-bottom: 16px; }
.next li { counter-increment: nx; display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 15.5px; line-height: 1.45; }
.next li::before { content: counter(nx); width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--ink); display: grid; place-items: center; font: 700 12px/1 var(--sans); }
@media (max-width: 1000px) { .brief-b { grid-template-columns: 1fr; } .brief-side { border-left: 0; border-top: 1px solid var(--line-2); } .brief-stick { position: static; max-height: none; } }
@media (max-width: 900px) {
  .cy-grid { grid-template-columns: 1fr; }
  .cy-stagecol { position: sticky; top: var(--mast-h); z-index: 3; margin: 0 calc(-1 * var(--gut)); padding: 8px var(--gut) 10px; background: var(--ink); }
  .cy-stage { aspect-ratio: 16 / 10; border-radius: var(--r); }
  .cy-sample { margin-top: 8px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .cy-sample::-webkit-scrollbar { display: none; }
  .cy-sample .chip { flex: none; }
  .cy-types { grid-template-columns: 1fr 1fr; }
  .cy-type img { display: none; }
  .cy-type { min-height: 52px; justify-content: center; text-align: center; }
}
@media (max-width: 700px) { .brief-acts .btn.gold { width: 100%; } }

/* ---------- contact ---------- */
.contact { background: var(--paper); }
.ct-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.ct-copy { display: grid; gap: 22px; position: sticky; top: calc(var(--mast-h) + 32px); }
.ct-lines { display: grid; gap: 0; border-top: 1px solid var(--line-2); margin-top: 6px; }
.ct-lines li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.ct-lines span { font-size: 14px; color: var(--muted); font-weight: 600; }
.ct-lines a { font: 500 22px/1.2 var(--serif); text-decoration: none; }
.ct-lines a:hover { color: var(--gold-ink); }
.offices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.offices a { text-decoration: none; font-size: 14.5px; line-height: 1.5; color: var(--text-2); display: grid; gap: 2px; }
.offices a b { color: var(--text); font-weight: 600; }
.offices a:hover b { text-decoration: underline; }
.ct-form { display: grid; gap: 18px; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-l); background: #fff; box-shadow: 0 1px 0 var(--line), 0 24px 60px -40px rgba(0,0,0,.35); }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ct-brief, .ct-ctx { border-radius: 12px; background: var(--ivory); padding: 14px 16px; display: grid; gap: 8px; }
.ct-ctx { display: flex; align-items: center; gap: 12px; }
.ct-ctx[hidden] { display: none; }
.ctb-h { display: flex; align-items: center; gap: 12px; }
.ct-brief .mono, .ct-ctx .mono { color: var(--gold-ink); }
.ct-brief strong, .ct-ctx strong { font-weight: 600; flex: 1; min-width: 0; }
.ctb-x { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px; }
.ct-brief summary { font-size: 14px; font-weight: 600; cursor: pointer; color: var(--text-2); }
.ct-brief pre { margin: 10px 0 0; white-space: pre-wrap; font: 400 13.5px/1.55 var(--mono); color: var(--text-2); max-height: 260px; overflow: auto; }
.ct-cerr { margin-top: -8px; }
.ct-form.bad-consent .ct-cerr { display: block; }
.ct-send { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ct-done { display: grid; gap: 14px; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-l); background: #fff; box-shadow: 0 1px 0 var(--line); }
.ct-done .ok-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--ivory); display: grid; place-items: center; }
@media (max-width: 900px) { .ct-grid { grid-template-columns: 1fr; } .ct-copy { position: static; } }
@media (max-width: 560px) { .f2 { grid-template-columns: 1fr; } .offices { grid-template-columns: 1fr; } .ct-lines a { font-size: 19px; } }

/* ---------- mobile refinements ---------- */
@media (max-width: 760px) {
  .film:not(.started) .film-label { opacity: 0; }
  .film-label { transition: opacity var(--t-panel); }
  .fo-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  .fo-cta .btn { padding: 0 14px; font-size: 15px; }
  .fo-work { grid-column: 1 / -1; justify-self: start; padding: 6px 0; }
}
@media (max-width: 620px) {
  .case, .case:first-child { min-height: 0; display: flex; flex-direction: column; background: var(--ink); }
  .case .ph { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 3; }
  .case .ph::after { background: linear-gradient(0deg, rgba(15,16,18,1) 0%, rgba(15,16,18,0) 40%); }
  .case-b { margin-top: -36px; position: relative; padding: 0 20px 24px; }
  .case-t { font-size: 28px; }
  .case-stats b { font-size: 22px; }
  .cy-k { display: none; }
}

/* low-quality placeholders: never an empty stage while the sharp image loads */
.film-stage { background: var(--ink) url("data:image/webp;base64,UklGRoYBAABXRUJQVlA4IHoBAADQCACdASowACAAPulmp02pJiOiNVQIASAdCWYAnTM0PglwOlerq6yW33a+Xgv3O4hkOFUewDy3cE5BSqOh2tlAglTtp98y4oQQXff5ZxQAAP7KaKbyIgGiAU5o9NZAcTHtKksr33yCE8giWfUo88PUtDRZvtFfUf/DO2bTw8yFtkK31cz/HHf2qA8CGt4gRotMJOPKXhLQrhcBP3QArbDG7Xm1wk0W8I8ZNE21NIiVG6U9cBXRotwNVnetpDb+VGd39pqIoitekjJ9pNcOCHlpIaxBLFTrVNXxFr1Km1JsNS6e+w0GPdiGqZy1M+2eV5JWqGoEBDA2sRcM9g/Dzq0fgXwa6wmD3H55V51WsZaNyqabylQuc+3k3+6ooXGWl3zxqw0vKqzdx8QZPxyZEtBiWXAmSfwaUu8nfvheVshsb4T8UfbvWT1VFj/FbJ/jA0bhbxcCMCLw9kllVV6F9/OE/Rgc71K31JtHpwKG7N3ukgX+HRw6UcjcwAA=") center / cover; }
.bv-stage { background: var(--ink-3) url("data:image/webp;base64,UklGRrIBAABXRUJQVlA4IKYBAABwCQCdASowACAAPu1iqE2ppaOiMBqqqTAdiWQArDOR+I5/3GpsHM9XL8A2HKaTD8WvRLoqC2FfHWJ4ySXdm2HZfhkGpwqjgOZCJJwE3FV8HyIlc9AA/pmAG7PpQqSH/yMkrSlK1PTeoEbTKjWKqUROUrbCgRANo2lymN3SRH7Kdm299QZnZjE8Yrfyut1sBa1Otb+8U8JpnorR+5CuCq/jrzGyDFfIkOdJHt0WX/APS1yddLzIZ+rz9Wlz02L7C3/aqztjaMtVsvnUGLPGzUe6xHX77oV+ePGNnRotUmJ/5iyKhJfstDj0A5Wzpq36J4tCOVd4BZdPlpDbUvd58Z/MLrSzPsHkV93y8/x7RsXVO5r2zqBy4obINkVpnvx5j3HUHdXWl/g9j9NCwm3LKixTU6Yz6j2lR5gnpiKWBfxSNzs2zcdv1fdEChF+GmhltWKy5j4epJcB7qPgigogNiGFavS10kfgAhJN9VyOmNfXziVNwGyWximHP/STMFH/O5wQmvLFISc6XB0DwZjFjRGxrJ5GV0SPrhXeAWYmLs0WUHfrqIGQAA==") center / cover; }
.cy-stage { background: #0c0d0f url("data:image/webp;base64,UklGRjwBAABXRUJQVlA4IDABAABwBwCdASowACAAPuFepU2opSOiNVgMARAcCUAXYIFmPA9zMEfKwLfN9QMWcDJiQN8WrupCyNOiCTC3TYG2l/dpsxOAAAD+Lfl0LUdOlhenn1HLQEbn2lxdde76SMHy4C3VMls2M7TVicDyHbLW/PPblp77bGELDj73YCxKjq2T+LRL/474dHVqa30Bjqhc1PgfiSGVpGBPDQtzcNu9MW5j1ZsUDUG710S5Myi/RXLCppo1RKPzePsLyOQxHNKSwKFrkNSkI7kpizqHts6Smgct/S5dla2IwDWSjC/DDy6jsunTBtoqBJG7A3SsHRhNzPr0q8vRNJ0VZ94uKZpOlhaS+SXlqhOUWZ7awl24BKIONJevminW/tnUCCLuhYAuQJdq718T+DJ6e1Ar2c7WAAAA") center / cover; }

/* ---------- project explorer ---------- */
.ex-projects { display: flex; gap: 0; margin-bottom: 18px; border-bottom: 1px solid var(--line-d); overflow-x: auto; scrollbar-width: none; }
.ex-projects::-webkit-scrollbar { display: none; }
.ex-p { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 18px 16px; font: 500 15.5px/1.2 var(--sans); color: var(--on-dark-2); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--t-fast), border-color var(--t-fast); }
.ex-p:hover { color: var(--ivory); }
.ex-p[aria-selected="true"] { color: var(--ivory); border-color: var(--red); }
.ex-n { font: 500 12px/1 var(--mono); color: var(--gold-2); }
.ex-body { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.ex-modes, .bv-sysbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ex-side { display: grid; gap: 18px; padding-top: 4px; }
.ex-meta { font-size: 14.5px; color: var(--on-dark-2); }
.ex-meta b { color: var(--ivory); font-weight: 600; }
.qa .q { font: 600 13px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gold-2); }
.qa .a { margin-top: 8px; font: 400 clamp(20px, 1.7vw, 24px)/1.4 var(--serif); color: var(--ivory); }
.qa .a { animation: noteIn var(--t-panel) var(--ease); }
.ex-pinlist { margin-top: 14px; display: grid; gap: 8px; }
.ex-pinlist li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 15px; color: var(--on-dark-2); cursor: pointer; padding: 6px; border-radius: 8px; transition: background var(--t-fast); }
.ex-pinlist li.on { background: rgba(244,239,230,.08); }
.ex-pinlist b { width: 24px; height: 24px; border-radius: 50%; background: var(--ivory); color: var(--ink); display: grid; place-items: center; font-size: 12px; }
.ex-pinlist strong { color: var(--ivory); font-weight: 600; }
.ex-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; border-top: 1px solid var(--line-d); }
.ex-facts li { padding: 10px 0; border-bottom: 1px solid var(--line-d); display: grid; gap: 2px; }
.ex-facts span { font-size: 12.5px; color: var(--on-dark-3); }
.ex-facts b { font-weight: 600; font-size: 15px; }
.ex-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
@media (max-width: 960px) { .ex-body { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .ex-p { padding: 12px 12px 14px; font-size: 14.5px; } .ex-pin { width: 28px; height: 28px; margin: -14px 0 0 -14px; font-size: 12.5px; } .bv-flow .inl text { display: none; } }

/* ---------- logo: approved white mark on dark, red mark on light ---------- */
.brand { position: relative; }
.brand .lg-w { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-panel); }
.brand img { transition: opacity var(--t-panel); }
.mast.over .brand .lg-w { opacity: 1; }
.mast.over .brand .lg-red { opacity: 0; }
.mast { background: linear-gradient(180deg, rgba(10,11,12,.0), rgba(10,11,12,0)); }
.mast.over:not(.solid) { background: linear-gradient(180deg, rgba(10,11,12,.62) 0%, rgba(10,11,12,.28) 70%, rgba(10,11,12,0) 100%); }

/* ---------- opening: one clear action ---------- */
.btn.lg { min-height: 58px; padding: 0 30px; font-size: 17px; }
.fo-cta { gap: 14px 22px; margin-top: 14px; }
.fo-work { margin-left: 0; color: var(--on-dark-2); }
.fo-work:hover { color: var(--ivory); }
.fo-trust { display: block; margin-top: 30px; font-size: 13.5px; letter-spacing: .02em; color: var(--on-dark-3); border: 0; }
.film-open .fo-sub { max-width: 46ch; }
.film-rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity var(--t-scene); }
.film-rain.on { opacity: 1; }
.cy-rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity var(--t-scene); }
.cy-rain.on { opacity: 1; }
.rain.on { opacity: 1; }
@media (max-width: 760px) {
  .fo-cta { grid-template-columns: 1fr; }
  .fo-cta .btn.lg { min-height: 54px; font-size: 16px; }
  .fo-work { justify-self: center; }
  .fo-trust { display: none; }
}
.fc-q { margin-top: 14px; font: 600 13px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gold-2); }
.fc-q + .fc-d { margin-top: 6px; }
@media (max-width: 760px) { .fc-q { margin-top: 10px; font-size: 12px; } }

/* ---------- Create yours: rain, readiness, richer brief ---------- */
.cy-flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cy-flow .fa { fill: none; stroke: #9fd3ff; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 14 12; animation: flow 1s linear infinite; filter: drop-shadow(0 0 6px rgba(120,190,255,.7)); }
.cy-note span b { display: block; margin-bottom: 2px; color: var(--gold-2); font-weight: 600; }
.cy-place { margin-top: 16px; }
.cy-place .input { min-height: 46px; }
.cy-ready { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dark .pill span { border-color: var(--line-d2); color: var(--on-dark); }
.dark .pill:hover span { border-color: var(--ivory); }
.dark .pill input:checked + span { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.brief-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.brief-next .brief-k + .next, .brief-next .brief-k + .need, .brief-next .brief-k + .kit { margin-bottom: 22px; }
.need, .kit { display: grid; gap: 10px; }
.need li, .kit li { display: grid; gap: 2px; font-size: 14.5px; line-height: 1.45; }
.need b { font-weight: 600; }
.need span, .kit span { color: var(--text-2); }
.need a, .kit a { color: var(--text); font-weight: 600; }
.kit a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) { .film-rain { inset: 0 0 auto 0; height: 58svh; } }
@media (max-width: 900px) {
  .cy-stage { aspect-ratio: 16 / 9; }
  .cy-note { min-height: 0; margin-top: 8px; }
  .cy-note span { padding: 8px 12px; font-size: 13.5px; }
}

/* ---------- contour texture ---------- */
.contours { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.svc-sum, .cy, .contact { position: relative; isolation: isolate; }
.svc-sum > .wrap, .cy > .wrap, .contact > .wrap { position: relative; z-index: 1; }

/* ---------- TikTok carousel ---------- */
.social-sec { background: var(--ink-2); }
.tt-nav { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.social-sec .social { margin-top: 18px; }

/* ---------- layout sketch ---------- */
.cy-sketch { position: absolute; inset: 0; width: 100%; height: 100%; background: #101315; touch-action: none; user-select: none; -webkit-user-select: none; }
.cy-stage.sketching .cy-imgs, .cy-stage.sketching .cy-ann { opacity: 0; }
.cy-flow.top, .cy-stage.sketching .cy-rain { z-index: 2; }
.cy-sketch .sk-road { fill: #2a2d31; }
.cy-sketch .sk-cl { stroke: #E3C77C; stroke-width: 3; stroke-dasharray: 26 20; opacity: .6; }
.cy-sketch text { font: 600 24px var(--sans); fill: var(--ivory); pointer-events: none; }
.cy-sketch .sk-t { fill: var(--on-dark-3); font-size: 22px; }
.cy-sketch .sk-dim { fill: var(--gold-2); font-size: 22px; }
.sk-site > rect:first-child { fill: rgba(108,150,92,.16); stroke: var(--gold-2); stroke-width: 4; stroke-dasharray: 18 12; }
.sk-el { cursor: grab; }
.sk-el:active { cursor: grabbing; }
.sk-el.building rect:first-child { fill: #EDE7DA; stroke: #fff; stroke-width: 3; }
.sk-el.building text { fill: var(--ink); }
.sk-el.parking rect:first-child { fill: #3b3f45; stroke: #6b7078; stroke-width: 3; }
.sk-el.parking .sk-st { stroke: rgba(255,255,255,.55); stroke-width: 2; }
.sk-el.drive rect:first-child { fill: #4a4e55; stroke: #7c818a; stroke-width: 3; }
.sk-el.pond ellipse { fill: rgba(90,166,230,.45); stroke: #8cc6f2; stroke-width: 4; }
.sk-rz { fill: var(--gold-2); stroke: #0c0d0f; stroke-width: 3; cursor: nwse-resize; opacity: 0; transition: opacity var(--t-fast); }
.sk-el:hover .sk-rz, .sk-el.sel .sk-rz, .sk-el:focus .sk-rz, .sk-site .sk-rz { opacity: 1; }
.sk-site .sk-rz { cursor: nesw-resize; }
.sk-el.sel > rect:first-child, .sk-el.sel > ellipse, .sk-el:focus-visible > rect:first-child, .sk-el:focus-visible > ellipse { stroke: var(--gold-2); stroke-width: 6; }
.sk-el:focus, .sk-site:focus { outline: none; }
.sk-site:focus-visible > rect:first-child { stroke-width: 7; }
.sk-scale line { stroke: var(--ivory); stroke-width: 4; }
.sk-scale text { font-size: 20px; }
.sk-tools { display: grid; gap: 10px; margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: var(--ink-3); }
.sk-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sk-row span { display: contents; }
.sk-row .cy-k { display: inline; }
.sk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 4px 0 0; }
.sk-stats div { display: grid; gap: 2px; }
.sk-stats dt { font-size: 12.5px; color: var(--on-dark-3); }
.sk-stats dd { margin: 0; font: 600 16px/1.2 var(--sans); color: var(--ivory); }
.sk-warn { display: grid; gap: 4px; }
.sk-warn li { font-size: 13.5px; color: #f2b8a0; padding-left: 18px; position: relative; }
.sk-warn li::before { content: '!'; position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; background: #f2b8a0; color: #111; font: 700 10px/13px var(--sans); text-align: center; }
.cy-skbtn { gap: 8px; }
.cy-skbtn[aria-pressed="true"]::before { display: none; }
@media (max-width: 620px) { .sk-stats { grid-template-columns: 1fr 1fr; } }

/* phase stepping */
.ph-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.ph-nav .pv, .pvs .pv { font-size: 13.5px; font-weight: 600; color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; background: none; padding: 4px 0; }
.ph-nav .pv[disabled] { opacity: .35; text-decoration: none; cursor: default; }
.pvs { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.pvs .pv { color: var(--gold-ink); }
.road li.pvon { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (max-width: 900px) { .cy-stagecol:has(.sketching) { position: static; } }
.cy-grid > *, .ex-body > *, .ct-grid > * { min-width: 0; }
.cy-stage.sketching > .tag.viz { display: none; }

/* TikTok rail: endless, gap-free, live previews */
.tt-track { position: relative; margin-inline: calc(50% - 50vw); height: calc(min(250px, 62vw) * 16 / 9); overflow: hidden; touch-action: pan-y; cursor: grab; border-radius: 16px; -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); border-radius: 0; }
.tt-track.drag { cursor: grabbing; }
.tt-track:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 4px; }
.tt-card { position: absolute; top: 0; left: 0; width: min(250px, 62vw); height: 100%; will-change: transform; }
.tt-frame { position: relative; height: 100%; border-radius: 16px; overflow: hidden; background: #0c0d0f; box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.tt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease); }
.tt-card.ready iframe { opacity: 1; }
.tt-poster { transition: opacity .6s var(--ease); }
.tt-card.ready .tt-poster { opacity: 1; }
.tt-poster { position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; gap: 16px; padding: 22px; overflow: hidden; background: radial-gradient(120% 70% at 20% 10%, hsl(var(--h) 45% 32%), transparent 60%), radial-gradient(90% 60% at 90% 90%, rgba(196,22,29,.35), transparent 60%), #0e1013; }
.tt-poster::before { content: ''; position: absolute; inset: -30%; background: repeating-radial-gradient(circle at 30% 40%, transparent 0 22px, rgba(227,199,124,.08) 22px 23px); animation: ttDrift 18s linear infinite; }
@keyframes ttDrift { to { transform: translate(8%, -6%) rotate(8deg); } }
.tt-poster img { position: relative; width: 104px; height: auto; opacity: .9; }
.tt-poster b { position: relative; font: 500 26px/1.15 var(--serif); color: var(--ivory); max-width: 12ch; }
.tt-mark { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; background: rgba(244,239,230,.12); display: grid; place-items: center; }
.tt-mark svg { width: 18px; height: 18px; fill: var(--ivory); }
.tt-card:not(.ready) .tt-cap b { display: none; }
@media (prefers-reduced-motion: reduce) { .tt-poster::before { animation: none; } }
.tt-open { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 14px; text-align: left; background: linear-gradient(transparent 55%, rgba(0,0,0,.78)); cursor: pointer; color: var(--ivory); border-radius: 16px; }
.tt-track.drag .tt-open { cursor: grabbing; }
.tt-cap { display: grid; gap: 3px; min-width: 0; }
.tt-cap b { font: 500 18px/1.2 var(--serif); }
.tt-cap i { font-style: normal; font-size: 12.5px; color: rgba(244,239,230,.75); }
.tt-play { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ivory); color: var(--ink); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.45); transition: transform var(--t-fast); }
.tt-play svg { width: 18px; height: 18px; fill: currentColor; margin-left: 2px; }
.tt-open:hover .tt-play, .tt-open:focus-visible .tt-play { transform: scale(1.12); }
.tt-open:focus-visible { outline: 3px solid var(--gold-2); outline-offset: -3px; }
.tt-nav .link { margin-left: 10px; }
.tt-dlg { padding: 0; border: 0; border-radius: 18px; background: #0c0d0f; color: var(--ivory); width: min(400px, 92vw); max-height: 94vh; overflow: hidden; }
.tt-dlg::backdrop { background: rgba(5,6,7,.78); backdrop-filter: blur(6px); }
.tt-dlg-h { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 18px; }
.tt-dlg-h strong { flex: 1; font: 500 18px/1.2 var(--serif); }
.tt-dlg-h .link { font-size: 13.5px; white-space: nowrap; }
.tt-dlg-f { aspect-ratio: 9 / 16; max-height: calc(94vh - 64px); margin: 0 auto; }
.tt-dlg-f iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- the brief as a working document ---------- */
.brief-hd { display: grid; gap: 4px; min-width: 0; }
.brief-prog { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 14px; color: var(--text-2); }
.bp-bar { display: flex; gap: 4px; }
.bp-bar i { width: 22px; height: 6px; border-radius: 3px; background: var(--line-2); transition: background var(--t-panel); }
.bp-bar i.on { background: var(--gold); }
.bsec { padding: 26px 0; border-bottom: 1px solid var(--line-2); display: grid; gap: 14px; }
.bsec:last-child { border-bottom: 0; }
.bsec h4 { display: flex; align-items: center; gap: 12px; font: 500 clamp(20px, 1.8vw, 24px)/1.2 var(--serif); margin: 0; }
.bsec h4 span { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--ivory); display: grid; place-items: center; font: 600 13px/1 var(--sans); flex: none; }
.bhint { font-size: 14.5px; color: var(--text-2); margin: -4px 0 0; max-width: 62ch; }
.brief .input { background: #fff; color: var(--text); border-color: var(--line-2); }
.brief .input:focus { border-color: var(--ink); }
.brief .input::placeholder { color: var(--muted); }
.brief .field > span { color: var(--text); }
.brief .field > span { font-size: 14.5px; }
.brief-facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.brief-facts div { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); }
.brief-facts div.wide { grid-column: 1 / -1; }
.brief-facts .unset dd { font-weight: 500; }
.bset { color: var(--red); font: 600 14px/1.3 var(--sans); text-decoration: underline; text-underline-offset: 3px; text-decoration-style: dotted; padding: 0; text-align: left; }
.brief-refs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.brief-refs .brief-k { margin: 0 6px 0 0; }
.bref { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); font-size: 14px; font-weight: 600; }
.bref button { width: 24px; height: 24px; border-radius: 50%; font-size: 16px; line-height: 1; color: var(--text-2); }
.bref button:hover { background: var(--line); }
.btopics { display: flex; flex-wrap: wrap; gap: 8px; }
.brief .chip { border-color: var(--line-2); color: var(--text); background: #fff; }
.brief .chip[aria-pressed="true"] { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.brief .chip[aria-pressed="true"]::before { background: var(--gold); }
.btq { display: grid; gap: 12px; }
.btq-i > span { display: grid; gap: 2px; color: var(--text-2); }
.btq-i > span b { color: var(--text); font-weight: 600; }
.btq-i { animation: noteIn var(--t-panel) var(--ease); }
.bdocs { display: grid; gap: 0; border-top: 1px solid var(--line); }
.bdocs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.bdocs li > div:first-child { display: grid; gap: 2px; font-size: 14.5px; line-height: 1.45; }
.bdocs li b { font-weight: 600; font-size: 15.5px; }
.bdocs li span { color: var(--text-2); }
.bdocs li a { color: var(--text); font-weight: 600; }
.bdocs li.d-have b::after { content: " ✓"; color: #2E7D46; }
.seg { display: inline-flex; border: 1.5px solid var(--line-2); border-radius: 999px; padding: 3px; background: #fff; }
.seg button { padding: 7px 12px; border-radius: 999px; font: 600 13px/1 var(--sans); color: var(--text-2); white-space: nowrap; min-height: 34px; }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--ivory); }
.d-have .seg button[aria-checked="true"] { background: #2E7D46; }
.d-unsure .seg button[aria-checked="true"] { background: var(--gold); color: var(--ink); }
.seg button:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 1px; }
@media (max-width: 620px) { .bdocs li { grid-template-columns: 1fr; } .seg { justify-self: start; } }
.brief-side .road li { padding: 8px 8px; }
.brief-side .road li p { font-size: 13.5px; }
.brief-side .next li { font-size: 15px; }
.brief-side .next li:first-child { font-weight: 600; }
.brief-side .kit { margin-bottom: 18px; }
.brief-side .note a { color: var(--text); font-weight: 600; }
.brief-side .brief-k { margin-top: 4px; }
.brief-side .next { margin-bottom: 24px; }
.brief-side .road { margin-bottom: 22px; }
@media print {
  body.print-brief > *:not(main), body.print-brief main > *:not(#home), body.print-brief #home > *:not(#create), body.print-brief #create .wrap > *:not(#brief) { display: none !important; }
  body.print-brief #create { background: #fff !important; padding: 0 !important; }
  body.print-brief .brief { border: 0; }
  body.print-brief .brief-acts, body.print-brief .pvs, body.print-brief .bset { display: none !important; }
  body.print-brief .brief-b { grid-template-columns: 1fr 1fr; }
  body.print-brief .brief-stick { position: static; max-height: none; }
}
.btq-i > span { font-weight: 400; }
.brief-acts .cy-exit { color: var(--text-2); }
.brief-acts .cy-exit:hover { color: var(--red); }

/* ================= Project explorer v2 ================= */
.xp { display: grid; gap: 18px; }
.xp-k { font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-3); }
.xp-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.xp-filter .xp-k { margin-right: 4px; }
.xp-pick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.xp-card { position: relative; display: grid; grid-template-rows: auto 1fr; text-align: left; border-radius: 16px; overflow: hidden; background: var(--ink-2); border: 1.5px solid var(--line-d); color: var(--on-dark-2); transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); }
.xp-card[hidden] { display: none; }
.xp-card:hover { transform: translateY(-3px); border-color: var(--line-d2); }
.xp-card[aria-selected="true"] { border-color: var(--gold-2); color: var(--ivory); box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 1px var(--gold-2); }
.xp-ci { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-3); }
.xp-ci img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter var(--t-fast); filter: saturate(.75) brightness(.8); }
.xp-card:hover .xp-ci img, .xp-card[aria-selected="true"] .xp-ci img { transform: scale(1.06); filter: none; }
.xp-ct { display: grid; gap: 4px; padding: 12px 14px 14px; align-content: start; }
.xp-n { font: 500 11px/1.3 var(--mono); color: var(--gold-2); }
.xp-ct b { font: 600 15px/1.25 var(--sans); color: var(--ivory); }
.xp-ct i { font-style: normal; font-size: 13.5px; line-height: 1.35; }
@media (max-width: 1100px) { .xp-pick { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(210px, 240px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; } .xp-card { scroll-snap-align: start; } }
.xp-main { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
@media (max-width: 960px) { .xp-main { grid-template-columns: 1fr; } }
.xp-stagecol { display: grid; gap: 12px; min-width: 0; }
.xp-groups { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.xp-g { display: grid; gap: 8px; }
.xp-g > div { display: flex; flex-wrap: wrap; gap: 6px; }
.xp-g.exp .xp-k { color: #9fd3ff; }
.xp-scene { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 6px; border-radius: 999px; border: 1.5px solid var(--line-d2); color: var(--on-dark-2); font: 600 14px/1 var(--sans); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.xp-scene i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(244,239,230,.08); font: 600 12px/1 var(--mono); }
.xp-scene:hover { color: var(--ivory); border-color: var(--on-dark-3); }
.xp-scene[aria-selected="true"] { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.xp-scene[aria-selected="true"] i { background: var(--gold); color: var(--ink); }
.xp-g.exp .xp-scene[aria-selected="true"] { background: #cfe8ff; border-color: #cfe8ff; }
.xp-stage { position: relative; aspect-ratio: 16 / 10; max-height: 76vh; width: 100%; border-radius: var(--r-l); overflow: hidden; background: #0c0e10; user-select: none; -webkit-user-select: none; touch-action: pan-y; outline: none; }
@media (max-width: 760px) { .xp-stage { aspect-ratio: 4 / 3.6; border-radius: var(--r); } }
.xp-bg { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(26px) brightness(.42) saturate(1.1); transition: opacity var(--t-scene); }
.xp-bg:not([src]) { opacity: 0; }
.xp-cam { position: absolute; inset: 0; will-change: transform; }
.xp-frame { position: absolute; overflow: hidden; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.xp[data-mode="diagram"] .xp-frame, .xp[data-mode="below"] .xp-frame, .xp[data-mode="compare"] .xp-frame { box-shadow: none; }
.xp-frame > img, .xp-cmp img, .xp-xray img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xp-ia, .xp-ib, .xp-cmp, .xp-xray, .xp-dg, .bv-flow, .xp-pins, .xp .rain, .xp .bv-handle, .xp .bv-lab { opacity: 0; pointer-events: none; transition: opacity var(--t-scene) var(--ease); }
.xp[data-mode="image"] .xp-ia, .xp[data-mode="pair"] .xp-ia, .xp[data-mode="rain"] .xp-ia { opacity: 1; }
.xp[data-mode="pair"] .xp-ib.on { opacity: 1; }
.xp[data-mode="compare"] .xp-cmp, .xp[data-mode="compare"] .bv-lab { opacity: 1; }
.xp[data-mode="compare"] .bv-handle { opacity: 1; pointer-events: auto; }
.xp[data-mode="below"] .xp-xray { opacity: 1; }
.xp[data-mode="diagram"] .xp-dg { opacity: 1; pointer-events: auto; }
.xp[data-mode="rain"] .rain, .xp[data-mode="rain"] .bv-flow { opacity: 1; }
.xp-pins { opacity: 1; pointer-events: none; }
.xp[data-mode="compare"] .xp-pins, .xp[data-mode="below"] .xp-pins, .xp[data-mode="diagram"] .xp-pins { display: none; }
.xp .rain { position: absolute; inset: 0; width: 100%; height: 100%; }
.x-altw { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0); }
.xp .bv-handle { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 56px; margin-left: -28px; cursor: ew-resize; touch-action: none; display: grid; place-items: center; z-index: 3; }
.xp-dg { position: absolute; inset: 0; }
.xp-dg svg { width: 100%; height: 100%; display: block; }
.xp.paused .bv-flow .fa { animation-play-state: paused; }
.xp.off * { animation-play-state: paused !important; }
/* pins */
.xp-pins .ex-pin { position: absolute; pointer-events: auto; width: 36px; height: 36px; margin: -18px 0 0 -18px; padding: 0; border-radius: 50%; background: var(--ivory); color: var(--ink); font: 700 14px/1 var(--sans); box-shadow: 0 6px 18px rgba(0,0,0,.45); animation: pinIn .5s var(--d, 0s) both cubic-bezier(.3,1.6,.5,1); transition: background var(--t-fast); }
.xp-pins .ex-pin::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(244,239,230,.7); animation: pinPulse 2.4s calc(var(--d, 0s) + .6s) infinite; }
.xp-pins .ex-pin span { position: relative; }
.xp-pins .ex-pin:hover, .xp-pins .ex-pin.on { background: var(--gold-2); }
.xp-pins .ex-pin.on::before { animation: none; border-color: var(--gold-2); }
.xp-pins .ex-pin:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 4px; }
@keyframes pinIn { from { opacity: 0; transform: scale(.3); } }
@keyframes pinPulse { 0% { opacity: .9; transform: scale(.8); } 70%, 100% { opacity: 0; transform: scale(1.6); } }
/* stage chrome */
.xp-stage .x-tag { top: 14px; left: 14px; bottom: auto; z-index: 4; }
.xp-stage[data-mt="viz"] .x-tag { background: rgba(20,40,60,.78); }
.xp .bv-lab { position: absolute; top: 52px; z-index: 3; padding: 7px 12px; border-radius: 999px; background: rgba(15,16,18,.62); backdrop-filter: blur(8px); font: 600 13px/1 var(--sans); color: var(--ivory); }
.xp .bv-lab.l { left: 14px; } .xp .bv-lab.r { right: 14px; }
.xp-tools { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 4; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 130px); }
.xp-tools[hidden] { display: none; }
.seg.dark { background: rgba(15,16,18,.72); border-color: rgba(244,239,230,.25); backdrop-filter: blur(8px); }
.seg.dark button { color: var(--on-dark-2); }
.seg.dark button[aria-checked="true"], .seg.dark button[aria-pressed="true"] { background: var(--ivory); color: var(--ink); }
.xp-tb { min-height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(15,16,18,.72); backdrop-filter: blur(8px); border: 1.5px solid rgba(244,239,230,.25); color: var(--ivory); font: 600 13.5px/1 var(--sans); }
.xp-tb:hover { border-color: var(--ivory); }
.xp-tb.gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.xp-srcbtn { position: absolute; right: 14px; top: 14px; z-index: 4; padding: 7px 12px; border-radius: 999px; background: rgba(15,16,18,.62); backdrop-filter: blur(8px); color: var(--ivory); font: 600 12.5px/1 var(--sans); border: 1px solid rgba(244,239,230,.25); }
.xp-srcbtn::before { content: 'ⓘ '; }
.xp-srcbtn[aria-expanded="true"] { background: var(--ivory); color: var(--ink); }
.xp-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 92%); z-index: 6; overflow: auto; padding: 18px; background: rgba(12,14,16,.94); backdrop-filter: blur(12px); color: var(--on-dark-2); font-size: 14.5px; line-height: 1.5; display: grid; gap: 12px; align-content: start; animation: drawerIn .35s var(--ease); border-left: 1px solid var(--line-d); }
@keyframes drawerIn { from { transform: translateX(30px); opacity: 0; } }
.xd-h { display: flex; justify-content: space-between; align-items: center; color: var(--ivory); }
.xd-x, .xp-popx { width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; color: var(--ivory); background: rgba(244,239,230,.1); }
.xd-imgs { display: grid; gap: 10px; }
.xd-imgs figure { margin: 0; display: grid; gap: 6px; }
.xd-imgs img { width: 100%; border-radius: 8px; }
.xd-imgs figcaption { font-size: 13px; }
.xp-drawer a, .xp-side .note a { color: var(--ivory); font-weight: 600; }
.xd-k { font-size: 13px; color: var(--on-dark-3); }
.mtb { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font: 600 11.5px/1.3 var(--sans); vertical-align: 1px; white-space: nowrap; }
.mtb.real { background: rgba(227,199,124,.16); color: var(--gold-2); }
.mtb.viz { background: rgba(159,211,255,.14); color: #9fd3ff; }
.xp-pop { position: absolute; z-index: 5; right: 14px; top: 56px; width: min(320px, calc(100% - 28px)); padding: 16px 16px 14px; border-radius: 14px; background: var(--ivory); color: var(--text); box-shadow: 0 18px 50px rgba(0,0,0,.45); display: grid; gap: 8px; font-size: 14.5px; line-height: 1.45; animation: noteIn var(--t-panel) var(--ease); }
.xp-pop.left { right: auto; left: 14px; }
.xp-pop.top.left, .xp-pop.top { top: 56px; }
.xp-popx { position: absolute; right: 8px; top: 8px; color: var(--text); background: var(--line); }
.xp-pt { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; padding-right: 30px; }
.xp-pt b { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--ivory); display: grid; place-items: center; font-size: 12px; flex: none; }
.xp-pq { font-style: italic; color: var(--text-2); }
.xp-addq { justify-self: start; padding: 9px 14px; border-radius: 999px; background: var(--ink); color: var(--ivory); font: 600 13.5px/1.2 var(--sans); text-align: left; }
.xp-addq:disabled { background: #2E7D46; cursor: default; }
@media (max-width: 620px) { .xp-pop { top: auto; bottom: 64px; left: 10px !important; right: 10px !important; width: auto; } .xp-pins .ex-pin { width: 30px; height: 30px; margin: -15px 0 0 -15px; font-size: 12.5px; } .xp-tools { max-width: calc(100% - 24px); bottom: 10px; } .xp .bv-lab { top: 48px; font-size: 12px; } .bv-flow .inl text, .bv-flow .fl { display: none; } }
.xp-inset { position: absolute; left: 14px; bottom: 14px; z-index: 4; width: clamp(110px, 20%, 200px); border-radius: 10px; overflow: hidden; border: 2px solid var(--ivory); box-shadow: 0 10px 26px rgba(0,0,0,.5); padding: 0; }
.xp-inset img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.xp-inset span { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px; background: rgba(15,16,18,.75); color: var(--ivory); font: 600 11.5px/1.3 var(--sans); }
.xp-inset[hidden] { display: none; }
.xp-load { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; padding: 8px 14px; border-radius: 999px; background: rgba(15,16,18,.7); color: var(--ivory); font-size: 13px; }
.bv-flow .fl { fill: #cfe8ff; font: 700 26px var(--sans); paint-order: stroke; stroke: rgba(0,0,0,.75); stroke-width: 7px; }
/* side */
.xp-side { display: grid; gap: 18px; align-content: start; }
.xp-title { font: 400 clamp(26px, 2.4vw, 34px)/1.1 var(--serif); color: var(--ivory); margin: -6px 0 0; }
.xp-step { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line-d); animation: noteIn var(--t-panel) var(--ease); }
.xp-step .xp-k { color: var(--gold-2); }
.xp-see { font-size: 15.5px; color: var(--on-dark-2); line-height: 1.5; }
.xp-q { font: 600 16px/1.35 var(--sans); color: var(--ivory); }
.xp-a { font: 400 clamp(18px, 1.5vw, 21px)/1.45 var(--serif); color: var(--ivory); }
.xp-ask { font-size: 15.5px; color: var(--on-dark-2); font-style: italic; }
.xp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 6px; }
.xp-side .ex-pinlist { margin-top: 6px; display: grid; gap: 4px; }
.xp-side .ex-pinlist li { padding: 0; display: block; }
.pl-b { width: 100%; display: grid; grid-template-columns: 26px 1fr; gap: 10px; text-align: left; padding: 7px 8px; border-radius: 10px; color: var(--on-dark-2); font-size: 14.5px; line-height: 1.4; transition: background var(--t-fast); }
.pl-b:hover, .ex-pinlist li.on .pl-b { background: rgba(244,239,230,.08); }
.pl-b b { width: 24px; height: 24px; border-radius: 50%; background: var(--ivory); color: var(--ink); display: grid; place-items: center; font-size: 12px; }
.ex-pinlist li.on .pl-b b { background: var(--gold-2); }
.pl-b strong { color: var(--ivory); font-weight: 600; }
.xp-toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 30px); z-index: 90; padding: 12px 18px; border-radius: 999px; background: var(--ivory); color: var(--text); font: 500 14.5px/1.3 var(--sans); box-shadow: 0 12px 34px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--ease); max-width: calc(100% - 32px); }
.xp-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.xp-toast a { color: var(--text); font-weight: 700; margin-left: 6px; }
/* diagrams */
.dg .bg { fill: #10151b; }
.dg .lb { fill: #F4EFE6; font: 600 30px var(--sans); }
.dg .lb.big { font: 500 44px var(--serif); fill: rgba(244,239,230,.75); }
.dg .lb.sm { font-size: 26px; }
.dg .lb.dim { fill: rgba(244,239,230,.45); }
.dg .part { transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s; transform-box: fill-box; }
.dg .bld { fill: #2a3038; stroke: #4a525c; stroke-width: 3; }
.dg .door { fill: #E3C77C; }
.dg .walk { fill: #3b434c; }
.dg .curb { stroke: #9aa3ad; stroke-width: 6; }
.dg .stripe { stroke: #F4EFE6; stroke-width: 5; }
.dg .stripe.b { stroke: #5AA6E6; }
.dg .acc { fill: rgba(90,166,230,.16); }
.dg .aisle { fill: rgba(90,166,230,.1); }
.dg .hatch { stroke: #5AA6E6; stroke-width: 5; }
.dg .sym circle { fill: #2f6fb0; } .dg .sym path { stroke: #fff; stroke-width: 5; fill: none; stroke-linecap: round; }
.dg .ramp { fill: #6b737c; } .dg .dws { fill: #E3C77C; }
.dg .drive { fill: #1a1f25; }
.dg .route { fill: none; stroke: #E3C77C; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 18 14; animation: dash 1.2s linear infinite; filter: drop-shadow(0 0 8px rgba(227,199,124,.7)); }
.dg .route-end { fill: #E3C77C; }
@keyframes dash { to { stroke-dashoffset: -32; } }
.dg .soil { fill: #2a2119; } .dg .grain { fill: rgba(227,199,124,.18); }
.dg .gw { stroke: #5AA6E6; stroke-width: 4; stroke-dasharray: 16 12; } .dg .gwt { fill: #9fd3ff; }
.dg .roofline { stroke: #9aa3ad; stroke-width: 10; stroke-linecap: round; }
.dg .pipe-s { stroke: #9aa3ad; stroke-width: 12; }
.dg .pave { fill: #4a525c; }
.dg .grate { fill: #1b1f24; stroke: #E3C77C; stroke-width: 4; } .dg .box { fill: #3b434c; }
.dg .trench { fill: rgba(159,211,255,.08); stroke: #9fd3ff; stroke-width: 3; stroke-dasharray: 10 8; } .dg .rock { fill: #6b737c; }
.dg .pipe { stroke: #9aa3ad; stroke-width: 16; fill: none; } .dg .perf { stroke: #cfe8ff; stroke-width: 10; stroke-dasharray: 4 10; fill: none; }
.dg .flow { fill: none; stroke: #9fd3ff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 26; animation: dash 0.9s linear infinite; filter: drop-shadow(0 0 6px rgba(120,190,255,.8)); }
.dg .seep { stroke: #9fd3ff; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 6 10; animation: dash 1.2s linear infinite; }
.dg .drop { stroke: rgba(159,211,255,.55); stroke-width: 3; stroke-linecap: round; animation: drop 1.1s linear infinite; }
@keyframes drop { from { transform: translateY(-40px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(150px); opacity: 0; } }
.dg .road { fill: #1a1f25; } .dg .lot { fill: rgba(244,239,230,.04); stroke: #E3C77C; stroke-width: 5; stroke-dasharray: 22 12; }
.dg .setback { fill: none; stroke: rgba(244,239,230,.4); stroke-width: 3; stroke-dasharray: 8 8; }
.dg .pond { fill: rgba(90,166,230,.35); stroke: #5AA6E6; stroke-width: 3; } .dg .green { fill: rgba(109,191,115,.3); }
.dg .arrow { stroke: #E3C77C; stroke-width: 8; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { .dg .route, .dg .flow, .dg .seep { animation: none; } .dg .drop { display: none; } .xp-pins .ex-pin, .xp-pins .ex-pin::before { animation: none; } .xp-card:hover { transform: none; } }
.bsaved ul { display: grid; gap: 8px; }
.bsaved li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line-2); font-size: 15px; line-height: 1.45; }
.bsaved li span { display: grid; gap: 2px; }
.bsaved li i { font-style: normal; font-size: 13px; color: var(--muted); }
.bsaved li button { width: 28px; height: 28px; border-radius: 50%; flex: none; color: var(--text-2); font-size: 18px; line-height: 1; }
.bsaved li button:hover { background: var(--line); }
.bsaved .brief-k { margin-bottom: 10px; }
.idk { margin-top: 10px; justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1.5px dashed var(--line-d2); color: var(--on-dark-2); font: 600 13px/1 var(--sans); }
.idk:hover { color: var(--ivory); border-color: var(--on-dark-3); }
.idk[aria-pressed="true"] { border-style: solid; border-color: var(--gold-2); color: var(--gold-2); background: rgba(227,199,124,.1); }
.idk[aria-pressed="true"]::before { content: '✓'; }
.cy-dg { position: absolute; inset: 0; z-index: 2; background: #10151b; }
.cy-dg[hidden] { display: none; }
.cy-dg svg { width: 100%; height: 100%; display: block; }
.cy-stage:has(.cy-mode:not([hidden])) > .tag.viz { display: none; }
.xp-all { margin-left: auto; }
/* brief: re-sectioned so every block fits its box */
.brief-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .brief-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.brief-facts div { min-width: 0; }
.brief-facts dd { overflow-wrap: anywhere; }
@media (max-width: 560px) { .brief-facts { grid-template-columns: 1fr 1fr; } }
.brief-stick { position: sticky; max-height: none; overflow: visible; }
.brief-path { padding: 24px clamp(20px, 3vw, 40px) 28px; border-top: 1px solid var(--line-2); background: rgba(255,255,255,.35); }
.brief-path .road { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.brief-path .road li { grid-template-columns: 1fr; gap: 8px; padding: 14px; border: 1px solid var(--line-2); border-radius: 12px; align-content: start; background: rgba(255,255,255,.5); }
.brief-path .road li.here { border-color: var(--ink); background: #fff; }
.brief-path .road li p { font-size: 13.5px; line-height: 1.45; }
.brief-path .road li b { font-size: 15px; }
@media (max-width: 1000px) { .brief-path .road { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .brief-path .road { grid-template-columns: 1fr; } }
.brief-hd .h3 { overflow-wrap: anywhere; }
.brief-h { align-items: flex-start; }
/* explorer: tour, blueprint lens, transitions */
.xp-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; }
.xp-tour { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 999px; background: var(--gold); color: var(--ink); font: 700 14px/1 var(--sans); box-shadow: 0 8px 24px rgba(227,199,124,.25); transition: transform var(--t-fast); }
.xp-tour:hover { transform: translateY(-1px); }
.xp-tour[aria-pressed="true"] { background: var(--ivory); }
.xp-prog { position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 7; background: transparent; }
.xp-prog i { display: block; height: 100%; width: 0; background: var(--gold-2); transition: width 1.2s var(--ease); }
.xp.touring .xp-prog { background: rgba(244,239,230,.12); }
.xp-bp { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; clip-path: circle(0 at var(--lx, 50%) var(--ly, 50%)); transition: clip-path .5s var(--ease), opacity .3s; }
.xp.bp-on .xp-bp { opacity: 1; clip-path: circle(clamp(70px, 16%, 170px) at var(--lx, 50%) var(--ly, 50%)); transition: opacity .3s; }
.xp-bpl { position: absolute; left: var(--lx, 50%); top: var(--ly, 50%); transform: translate(-50%, calc(clamp(70px, 16%, 170px) * 0 + 90px)); z-index: 2; padding: 4px 8px; border-radius: 999px; background: rgba(11,36,64,.85); color: #cfe8ff; font: 600 11px/1.2 var(--sans); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .3s; }
.xp.bp-on .xp-bpl { opacity: 1; }
.xp.bp-on .xp-stage { cursor: crosshair; }
.xp-tb.bp[aria-pressed="true"] { background: #0b2440; border-color: #9fd3ff; color: #cfe8ff; }
.xp-frame.wipe { animation: xpWipe .7s cubic-bezier(.2,.7,.2,1); }
@keyframes xpWipe { from { clip-path: inset(0 0 0 100% round 6px); filter: brightness(1.4); } to { clip-path: inset(0 0 0 0 round 6px); filter: none; } }
.xp-card:active { transform: scale(.98); }
.xp-ghost { position: absolute; z-index: 1; object-fit: cover; opacity: 0; pointer-events: none; border-radius: 6px; }
.xp-cam { z-index: 0; }
.xp-ghost:not([src]) { display: none; }

.tt-poster .tt-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; max-width: none; }
.tt-poster::before { display: none; }
.tt-card:not(.ready) .tt-cap b { display: block; }
.tt-card.ready .tt-poster { opacity: 1; }
.tt-mark { z-index: 1; }