/* Portfolio — Arc gallery */
.cds-pf {
  position: relative; height: var(--pf-h, 100vh); min-height: 620px; overflow: hidden; outline: none;
  background: var(--cds-navy); color: var(--cds-light); font-family: var(--cds-mono);
}
.cds-pf__data { display: none; }
.cds-pf__stage { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; transition: opacity 0.8s var(--cds-ease-out), transform 1s var(--cds-ease-out), filter 0.8s; }
.cds-pf__stage canvas { display: block; width: 100% !important; height: 100% !important; }
.cds-pf.is-dragging .cds-pf__stage { cursor: grabbing; }

/* names and arrows that sit on each screen */
.cds-pf__tags { position: absolute; inset: 0; pointer-events: none; }
.cds-pf__tag {
  position: absolute; left: 0; top: 0; display: flex; align-items: flex-end; justify-content: space-between;
  transform-origin: 0 100%; margin-top: -40px; height: 40px; opacity: 0; will-change: transform, opacity;
}
.cds-pf__tag-title { font-family: var(--cds-font); font-weight: 400; font-stretch: 100%; letter-spacing: -0.015em; font-size: 1.45rem; line-height: 1; color: #fff; white-space: nowrap; text-shadow: 0 2px 18px rgba(10, 12, 30, 0.5); }
.cds-pf__tag-go { pointer-events: auto; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(14, 16, 38, 0.85); transition: background-color 0.3s, transform 0.5s var(--cds-ease-out); }
.cds-pf__tag-go svg { width: 14px; height: 14px; fill: none; stroke: var(--cds-light); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s; }
.cds-pf__tag.is-center .cds-pf__tag-go { background: var(--cds-light); }
.cds-pf__tag.is-center .cds-pf__tag-go svg { stroke: var(--cds-navy); }
.cds-pf__tag-go:hover { background: var(--cds-accent) !important; transform: rotate(-45deg); }
.cds-pf__tag-go:hover svg { stroke: var(--cds-navy); }

/* corner furniture */
.cds-pf__top { position: absolute; z-index: 3; left: var(--cds-gutter); top: calc(var(--cds-header-h) + 18px); pointer-events: none; }
.cds-pf__top .cds-eyebrow { margin: 0 0 0.5rem; }
.cds-pf__count { margin: 0; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(238, 238, 242, 0.5); }
.cds-pf__count span { color: var(--cds-red); }

.cds-pf__caption { position: absolute; z-index: 3; left: 50%; bottom: clamp(5.2rem, 11.5vh, 6.6rem); width: min(520px, 80vw); transform: translateX(-50%); text-align: center; pointer-events: none; transition: opacity 0.5s; }
.cds-pf__cap-meta { margin: 0; display: flex; justify-content: center; gap: 1.1em; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(238, 238, 242, 0.55); }
.cds-pf__cap-n { color: var(--cds-red); }
.cds-pf__cap-desc { margin: 0.6rem 0 0; font-weight: 300; font-size: 0.86rem; line-height: 1.6; color: rgba(238, 238, 242, 0.8); }
.cds-pf__caption.is-in > * { animation: cds-pf-cap 0.7s var(--cds-ease-out) both; }
.cds-pf__caption.is-in > :nth-child(2) { animation-delay: 0.06s; }
@keyframes cds-pf-cap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.cds-pf__foot { position: absolute; z-index: 4; left: var(--cds-gutter); right: var(--cds-gutter); bottom: clamp(1.6rem, 4vh, 2.6rem); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; pointer-events: none; }
.cds-pf__foot > * { pointer-events: auto; }
.cds-pf__views { display: flex; align-items: center; gap: 0.6rem; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(238, 238, 242, 0.4); }
.cds-pf__view { all: unset; cursor: pointer; color: rgba(238, 238, 242, 0.45); transition: color 0.3s; }
.cds-pf .cds-pf__view, .cds-pf .cds-pf__view:hover, .cds-pf .cds-pf__view:focus { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.cds-pf__view:hover { color: var(--cds-light); }
.cds-pf__view.is-on { color: var(--cds-light); }
.cds-pf__view.is-on::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 0.55em; border-radius: 50%; background: var(--cds-red); vertical-align: 0.12em; }
.cds-pf__view:focus-visible { outline: 2px solid var(--cds-accent); outline-offset: 4px; }
.cds-pf__hint { margin: 0; justify-self: center; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(238, 238, 242, 0.4); transition: opacity 0.5s; }
.cds-pf__cta { justify-self: end; }

/* ── Index view ───────────────────────────────────────────── */
.cds-pf__index {
  position: absolute; inset: 0; z-index: 2; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--cds-header-h) + 7.2rem) var(--cds-gutter) 8rem;
  opacity: 0; visibility: hidden; transition: opacity 0.6s var(--cds-ease-out), visibility 0s 0.6s;
}
.cds-pf__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(238, 238, 242, 0.12); }
.cds-pf__row {
  position: relative; display: grid; grid-template-columns: 3.4rem minmax(0, 1.6fr) minmax(0, 0.5fr) minmax(0, 0.7fr) minmax(0, 0.8fr) 2rem; align-items: baseline; gap: 1rem;
  padding: clamp(1.1rem, 2.6vh, 1.6rem) 0; border-bottom: 1px solid rgba(238, 238, 242, 0.12);
  color: rgba(238, 238, 242, 0.5) !important; text-decoration: none !important; transition: color 0.4s;
}
.cds-pf__row-n { font-size: 0.72rem; letter-spacing: 0.06em; color: rgba(238, 238, 242, 0.4); }
.cds-pf__row-title { font-family: var(--cds-font); font-weight: 400; font-stretch: 100%; letter-spacing: -0.02em; font-size: clamp(2rem, 1rem + 2.4vw, 3.6rem); line-height: 1.02; transition: transform 0.7s var(--cds-ease-out); }
.cds-pf__row-cat, .cds-pf__row-svc { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.cds-pf__row-go { grid-column: -2; align-self: center; width: 20px; height: 20px; opacity: 0; transform: translateX(-10px); transition: opacity 0.4s, transform 0.6s var(--cds-ease-out); }
.cds-pf__row-go svg { width: 100%; height: 100%; fill: none; stroke: var(--cds-red); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cds-pf__row::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--cds-red); transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--cds-ease-io); }
.cds-pf__row:hover, .cds-pf__row:focus-visible { color: var(--cds-light) !important; outline: none; }
.cds-pf__row:hover .cds-pf__row-title, .cds-pf__row:focus-visible .cds-pf__row-title { transform: translateX(0.6rem); }
.cds-pf__row:hover .cds-pf__row-go, .cds-pf__row:focus-visible .cds-pf__row-go { opacity: 1; transform: none; }
.cds-pf__row:hover::after, .cds-pf__row:focus-visible::after { transform: scaleX(1); }
.cds-pf__row:hover .cds-pf__row-n { color: var(--cds-red); }

.cds-pf__peek {
  position: absolute; left: 0; top: 0; z-index: 3; width: 240px; aspect-ratio: 3 / 2; margin: -80px 0 0 0; pointer-events: none;
  border-radius: 6px; overflow: hidden; background: #121430; box-shadow: 0 30px 60px rgba(8, 9, 24, 0.5);
  opacity: 0; clip-path: inset(50% 0 50% 0 round 6px); transition: opacity 0.3s, clip-path 0.6s var(--cds-ease-out);
}
.cds-pf__peek.is-on { opacity: 1; clip-path: inset(0 0 0 0 round 6px); }
.cds-pf__peek img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cds-pf__peek.is-plate { background: #F4F4F7; }
.cds-pf__peek.is-plate img { object-fit: contain; padding: 6%; }

.cds-pf.is-index .cds-pf__index { opacity: 1; visibility: visible; transition: opacity 0.6s 0.15s var(--cds-ease-out), visibility 0s; }
.cds-pf.is-index .cds-pf__stage { opacity: 0.12; transform: scale(0.96); filter: blur(6px); pointer-events: none; }
.cds-pf.is-index .cds-pf__tags, .cds-pf.is-index .cds-pf__caption, .cds-pf.is-index .cds-pf__hint { opacity: 0; }
.cds-pf.is-index .cds-pf__rows li { animation: cds-pf-row 0.8s var(--cds-ease-out) both; }
.cds-pf.is-index .cds-pf__rows li:nth-child(2) { animation-delay: 0.05s; }
.cds-pf.is-index .cds-pf__rows li:nth-child(3) { animation-delay: 0.1s; }
.cds-pf.is-index .cds-pf__rows li:nth-child(4) { animation-delay: 0.15s; }
.cds-pf.is-index .cds-pf__rows li:nth-child(5) { animation-delay: 0.2s; }
.cds-pf.is-index .cds-pf__rows li:nth-child(n+6) { animation-delay: 0.25s; }
@keyframes cds-pf-row { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.cds-pf__tags { transition: opacity 0.4s; }
.cds-pf.is-nogl .cds-pf__views { display: none; }

@media (max-width: 1024px) {
  .cds-pf__row { grid-template-columns: 2.6rem minmax(0, 1fr) 2rem; }
  .cds-pf__peek { display: none; }
  .cds-pf__row-cat, .cds-pf__row-svc { display: none; }
  .cds-pf__hint { display: none; }
}