/* Case studies (work/*.html) and the Work page panels with arrows. */
.cs-h1 { max-width: 22ch; }
/* Full-screen cover: the case image fills the first view and the title sits on it (always on dark tokens) */
.cs-cover { position: relative; display: flex; align-items: flex-end; min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); margin-bottom: var(--space-7); overflow: hidden; background: #0c0e11; color: var(--ink); }
.cs-cover-media { position: absolute; inset: 0; }
.cs-cover-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-cover-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--surface-000) 94%, transparent) 0%, color-mix(in srgb, var(--surface-000) 72%, transparent) 36%, color-mix(in srgb, var(--surface-000) 30%, transparent) 58%, transparent 78%),
    linear-gradient(90deg, color-mix(in srgb, var(--surface-000) 62%, transparent) 0%, color-mix(in srgb, var(--surface-000) 20%, transparent) 50%, transparent 72%); }
.cs-cover-inner .hk-eyebrow, .cs-cover .cs-h1 { text-shadow: 0 1px 18px rgba(0, 0, 0, .45); }
.cs-cover-inner { position: relative; z-index: 1; width: 100%; padding-top: var(--space-9); padding-bottom: var(--space-8); }
.cs-cover-inner .hk-eyebrow a { color: inherit; text-decoration: none; }
.cs-cover-inner .hk-eyebrow a:hover { text-decoration: underline; }
.cs-cover .page-lead { max-width: 640px; color: color-mix(in srgb, var(--ink) 82%, transparent); }
.cs-cover-cap { position: absolute; z-index: 1; top: var(--space-4); right: var(--space-5); margin: 0; padding: 3px 8px; color: rgba(238, 236, 230, .88); background: rgba(12, 14, 17, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: var(--radius-xs); }
.cs-funnel figcaption { margin-top: var(--space-3); color: var(--ink-muted); }
.cs-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); margin: 0 0 var(--space-8); padding: var(--space-5) 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.cs-facts div { display: grid; gap: 6px; align-content: start; }
.cs-facts dt { margin: 0; color: var(--accent-text); }
.cs-facts dd { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink); }
.cs-text p { margin: 0 0 var(--space-4); font-size: 18px; line-height: 29px; color: var(--ink-muted); }
.cs-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-steps li::before { background: var(--surface-000); }
.cs-funnel { margin: var(--space-7) 0 0; }
.cs-impact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.cs-impact li { display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-4); border-top: 2px solid var(--accent); }
.cs-impact li:last-child { border-top-color: var(--decision-lime); }
.cs-num { font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 54px); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-what { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.cs-impact-text { max-width: 720px; }
@media (max-width: 1100px) {
  .cs-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-steps, .cs-impact { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-7); }
}
@media (max-width: 640px) {
  .cs-cover-inner { padding-bottom: var(--space-6); }
  .cs-cover-cap { right: var(--space-4); }
  .cs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-steps { grid-template-columns: minmax(0, 1fr); }
  .cs-text p { font-size: 16px; line-height: 26px; }
}

/* The funnel: 1 site -> 1,407 generated -> 12 shortlisted -> 1 chosen (drawn in code, follows the theme) */
.cs-funnel { padding: var(--space-6); background: var(--surface-100); border: 1px solid var(--line); border-radius: var(--radius-lg);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px); background-size: 16px 16px; }
.fn-svg { display: block; width: 100%; height: auto; }
.fn-site { fill: color-mix(in srgb, var(--accent) 10%, var(--surface-200)); stroke: var(--accent); stroke-width: 1.5; }
.fn-dot { fill: color-mix(in srgb, var(--accent) 55%, transparent); }
.fn-line { fill: none; stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1; }
.fn-line-b { stroke: color-mix(in srgb, var(--info, #188dec) 55%, transparent); }
.fn-tile { fill: var(--surface-200); stroke: var(--accent); stroke-width: 1.2; }
.fn-block { fill: var(--surface-300); stroke: color-mix(in srgb, var(--ink) 35%, transparent); stroke-width: .6; }
.fn-chosen { fill: color-mix(in srgb, var(--accent) 16%, var(--surface-200)); stroke: var(--accent); stroke-width: 2; }
.fn-stem { stroke: var(--decision-lime); stroke-width: 1.5; }
.fn-node { fill: var(--decision-lime); filter: drop-shadow(0 0 8px var(--decision-lime)); }
.fn-label { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; fill: var(--ink-muted); }
@media (max-width: 640px) { .cs-funnel { padding: var(--space-3); } .fn-label { font-size: 18px; } }

/* The view diagram (case 2): sightlines from each building to the landmark, clear or blocked */
.vw-plot { fill: color-mix(in srgb, var(--accent) 5%, transparent); stroke: var(--line-strong); stroke-dasharray: 4 4; }
.vw-blk { fill: var(--surface-300); stroke: color-mix(in srgb, var(--ink) 40%, transparent); stroke-width: 1; }
.vw-ray { stroke: var(--accent); stroke-width: 1.2; opacity: .75; }
.vw-ray-b { stroke: color-mix(in srgb, var(--ink-muted) 60%, transparent); stroke-width: 1; stroke-dasharray: 3 4; opacity: .7; }
.vw-target { fill: var(--decision-lime); filter: drop-shadow(0 0 8px var(--decision-lime)); }
.vw-tlabel, .vw-label, .vw-legend text { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; fill: var(--ink-muted); }
.vw-label { font-size: 13px; fill: var(--ink); }
.vw-park { fill: color-mix(in srgb, var(--success) 14%, transparent); stroke: color-mix(in srgb, var(--success) 45%, transparent); stroke-width: 1; }
/* The scoring diagram (case 3): entries -> dimensions -> Hakken Score -> winner */
.sc-entry { fill: var(--surface-200); stroke: var(--line-strong); }
.sc-dim { fill: color-mix(in srgb, var(--accent) 8%, var(--surface-200)); stroke: color-mix(in srgb, var(--accent) 55%, transparent); }
.sc-score { fill: color-mix(in srgb, var(--accent) 16%, var(--surface-200)); stroke: var(--accent); stroke-width: 1.5; }
.sc-win { fill: var(--surface-200); stroke: var(--decision-lime); stroke-width: 1.5; }
.sc-t { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; fill: var(--ink-muted); }
.sc-dt { font-family: var(--font-display); font-size: 18px; fill: var(--ink); }

/* Work index (site/work/index.html): each case card leads with its image */
.work-index .work-card { gap: 0; padding: 0; overflow: hidden; color: var(--ink); text-decoration: none; transition: border-color .2s; }
.work-index .work-card:hover { border-color: var(--line-control); }
.work-card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #0c0e11; }
.work-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-layer, ease); }
.work-card:hover .work-card-media img { transform: scale(1.03); }
.work-index .work-card > .case-tag { margin: 20px 24px 8px; }
.work-index .work-card > .case-title, .work-index .work-card > .case-body, .work-index .work-card > .case-metric, .work-index .work-card > .case-link { margin-left: 24px; margin-right: 24px; }
.work-index .work-card > .case-metric { margin-top: auto; flex-direction: column; align-items: flex-start; gap: 4px; }
.work-index .work-card > .case-link { margin-bottom: 24px; padding-top: var(--space-4); }
.work-index .case-title { font-family: var(--font-display); font-size: 22px; line-height: 28px; }

/* "Back to where you were": top-left on the cover, only when the visitor came from the homepage or Work page */
.cs-cover-top { position: absolute; z-index: 1; top: var(--space-4); left: 0; right: 0; }

/* ============================== WORK · the case studies as large panels, one at a time ============================== */
.ws { position: relative; height: clamp(520px, 76vh, 720px); overflow: hidden; border-radius: var(--radius-lg); background: #0c0e11; color: var(--ink); }
.ws-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.ws-track::-webkit-scrollbar { display: none; }
.ws-track:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.ws-slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.ws-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ws-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(12, 14, 17, .9) 0%, rgba(12, 14, 17, .7) 34%, rgba(12, 14, 17, .1) 66%, rgba(12, 14, 17, 0) 100%),
              linear-gradient(0deg, rgba(12, 14, 17, .6) 0%, transparent 40%); }
.ws-body { position: absolute; left: clamp(28px, 5vw, 72px); bottom: clamp(28px, 6vh, 64px); width: min(560px, 46%); display: grid; gap: var(--space-3); }
.ws-tag { margin: 0; color: var(--accent-text); }
.ws-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; text-wrap: balance; }
.ws-text { margin: 0; font-size: 17px; line-height: 27px; color: color-mix(in srgb, var(--ink) 80%, transparent); }
.ws-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-3); }
.ws-metric { display: grid; gap: 2px; margin: 0; padding-left: var(--space-4); border-left: 2px solid var(--accent); }
.ws-metric-v { font-family: var(--font-display); font-size: 34px; line-height: 1.05; }
.ws-metric-l { font-size: 14px; line-height: 20px; color: color-mix(in srgb, var(--ink) 72%, transparent); }
.ws-link { text-decoration: none; }
.ws-arrow { position: absolute; z-index: 2; top: 50%; width: 52px; height: 52px; display: grid; place-items: center; margin-top: -26px; padding: 0; cursor: pointer;
  color: var(--ink); background: color-mix(in srgb, #0c0e11 55%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); border-radius: var(--radius-full); transition: background .2s, border-color .2s, transform .2s; }
.ws-arrow:hover { background: color-mix(in srgb, #0c0e11 80%, transparent); border-color: var(--accent); }
.ws-arrow:active { transform: scale(.96); }
.ws-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ws-prev { left: 20px; } .ws-next { right: 20px; }
.ws-count { position: absolute; z-index: 2; right: 28px; bottom: 24px; margin: 0; color: color-mix(in srgb, var(--ink) 72%, transparent); }
.ws-now { color: var(--ink); }
.ws-body { margin-left: 44px; }   /* clear of the left arrow */
@media (max-width: 900px) {
  .ws { height: clamp(560px, 82vh, 680px); }
  .ws-shade { background: linear-gradient(0deg, rgba(12, 14, 17, .96) 0%, rgba(12, 14, 17, .88) 55%, rgba(12, 14, 17, .35) 80%, rgba(12, 14, 17, 0) 100%); }
  .ws-body { left: 22px; right: 22px; bottom: 76px; width: auto; margin-left: 0; }
  .ws-text { font-size: 15px; line-height: 23px; }
  .ws-metric-v { font-size: 28px; }
  .ws-arrow { top: auto; bottom: 18px; margin-top: 0; width: 44px; height: 44px; }
  .ws-prev { left: 22px; } .ws-next { left: 76px; right: auto; }
  .ws-count { bottom: 30px; right: 22px; }
}
@media (prefers-reduced-motion: reduce) { .ws-track { scroll-behavior: auto; } }

/* Work: the headline and the project panel fit the first screen; the panel takes the height left, 420–720px */
.work-fit { display: flex; flex-direction: column; min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); }
.work-hero { flex: none; padding: clamp(28px, 6vh, 72px) 0 clamp(20px, 3.5vh, 40px); }
.work-hero .page-h1 { max-width: 24ch; margin-bottom: 0; font-size: clamp(34px, min(4.6vw, 6.4vh), 64px); }
.work-fit .work-section { flex: 1 1 auto; display: flex; flex-direction: column; padding: 0 0 24px; border-top: 0; }
.work-fit .work-section > .container { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; }
.work-fit .ws { flex: 1 1 auto; height: auto; min-height: 420px; max-height: 720px; }
@media (max-width: 900px) { .work-fit .ws { min-height: 560px; } }
.work-fit .ws { display: flex; flex-direction: column; }
.work-fit .ws-track { flex: 1 1 auto; height: auto; min-height: 0; }
.work-fit .ws-slide { height: auto; }

/* Work panels: the case-study button sits in the panel's bottom-right corner; the counter moves to the top-right.
   The whole panel opens the case study (page.js), so it reads as one button. */
.ws-slide { cursor: pointer; }
.ws-img { transition: transform 1.2s var(--ease-layer, ease); }
.ws-slide:hover .ws-img { transform: scale(1.02); }
.ws-link { position: absolute; z-index: 2; right: 28px; bottom: 28px; display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px;
  font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink); text-decoration: none;
  background: color-mix(in srgb, #0c0e11 50%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--ink) 34%, transparent); border-radius: var(--radius-full); transition: background .2s, border-color .2s; }
.ws-slide:hover .ws-link, .ws-link:focus-visible { background: color-mix(in srgb, #0c0e11 78%, transparent); border-color: var(--accent); }
.ws-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ws-count { top: 26px; bottom: auto; }
@media (max-width: 900px) {
  .ws-link { right: 22px; bottom: 18px; padding: 11px 16px; font-size: 14px; }
  .ws-count { top: 20px; right: 22px; }
}