/* Unpublished navigation study. The center stays empty while interactions are refined. */
:root { --paper: #f7f6f5; --landing-ink: #16130e; --corner-inset: 28px; --navigation-font-size: 11px; --navigation-padding: 16px; --navigation-height: calc(32px + 2 * var(--navigation-padding)); --nav-ease: cubic-bezier(.22, 1, .36, 1); }
body { background: var(--paper); }
main { display: block; max-width: none; margin: 0; }
main > .utility, main > .layout, main > .sidebar-footer, #feedback-mobile { display: none !important; }
.navigation-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.navigation-study { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-height: 100svh; padding: var(--corner-inset); color: var(--landing-ink); }
.corner-header, .corner-footer { display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.corner-header { position: relative; z-index: 3; align-items: flex-start; }
.corner-primary, .corner-top-right, .corner-views, .contact-control { display: flex; align-items: center; gap: 7px; }
.corner-primary { flex-wrap: nowrap; }
.corner-top-right { gap: 14px; }
.corner-views { position: relative; isolation: isolate; }
.nav-control {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  color: inherit;
  font: 400 var(--navigation-font-size)/16px var(--mono);
  white-space: nowrap;
  text-decoration: none;
  transform: translateZ(0);
  transition: border-color .38s var(--nav-ease), background-color .4s var(--nav-ease), transform .5s var(--nav-ease), box-shadow .4s var(--nav-ease);
}
.nav-control > span, .nav-control > svg { position: relative; z-index: 1; pointer-events: none; }
.nav-control::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff; opacity: 0; transition: opacity .45s var(--nav-ease); }
@media (hover: hover) {
  .nav-control:hover { border-color: #16130e20; box-shadow: 0 1px 2px #16130e03; }
  .nav-control:hover::before { opacity: .48; }
}
.nav-control:active { transform: scale(.96); transition-duration: .12s; }
.nav-control[aria-disabled='true'] { cursor: default; }
.nav-control:focus-visible { outline: 2px dotted #fd919c; outline-offset: 4px; }
.nav-control.is-current { border-color: #16130e22; background: #ffffff45; }
.view-indicator { position: absolute; top: 0; left: 0; height: 100%; border: 1px solid #16130e26; border-radius: 9px; background: #ffffff5c; box-shadow: 0 1px 2px #16130e04; pointer-events: none; z-index: -1; transition: transform .52s var(--nav-ease), width .52s var(--nav-ease); }
.corner-views .nav-control[aria-pressed='true']:hover { border-color: transparent; }
.nav-placeholder { width: 32px; height: 32px; padding: 5px; border-radius: 50%; }
.nav-placeholder svg { flex: none; }
.nav-ripple { position: absolute !important; z-index: 0 !important; border-radius: 50%; background: #16130e; pointer-events: none; opacity: 0; }
.nav-ripple-ring { background: transparent; border: 1px solid #16130e; }
.contact-control { position: relative; gap: 0; }
.contact-reveal { display: grid; grid-template-columns: 0fr; margin-left: 0; opacity: 0; visibility: hidden; filter: blur(3px); transform: translateX(-7px); transition: grid-template-columns .52s var(--nav-ease), margin-left .52s var(--nav-ease), opacity .3s ease, filter .4s ease, transform .52s var(--nav-ease), visibility .52s; }
.contact-reveal-inner { min-width: 0; overflow: hidden; }
.contact-control.is-open .contact-reveal { grid-template-columns: 1fr; margin-left: 8px; opacity: 1; visibility: visible; filter: blur(0); transform: translateX(0); }
.contact-copy { justify-content: space-between; gap: 16px; border-radius: 999px; border-color: #16130e24; padding-inline: 15px; font: 400 13px/16px var(--sans); background: #ffffff45; }
.contact-copy-label { color: #16130e72; min-width: 43px; text-align: right; transition: color .25s; }
.contact-copy.is-copied .contact-copy-label { color: #16130e; }
.empty-stage { min-height: 220px; }
.corner-footer { font: 400 var(--navigation-font-size)/20px var(--mono); }
.corner-footer p { margin: 0; }
.corner-footer p:last-child { text-align: right; }
@media (max-width: 1000px) {
  .contact-reveal { position: absolute; top: calc(100% + 9px); left: 0; margin: 0 !important; transform: translateY(-5px); }
  .contact-control.is-open .contact-reveal { transform: translateY(0); }
  .contact-copy { background: var(--paper); }
}
@media (max-width: 700px) {
  :root { --corner-inset: 16px; --navigation-font-size: 11px; --navigation-padding: 12px; }
  .corner-header, .corner-footer { gap: 12px; }
  .corner-primary, .corner-views { gap: 2px; }
  .corner-top-right { gap: 4px; }
  .nav-control { min-height: 32px; padding: 7px; line-height: 16px; border-radius: 8px; }
  .nav-placeholder { width: 30px; min-height: 32px; padding: 5px; border-radius: 50%; }
  .nav-placeholder svg { width: 19px; height: 19px; }
  .view-indicator { border-radius: 8px; }
  .corner-footer { line-height: 18px; align-items: flex-end; }
  .corner-footer p:first-child { max-width: 190px; }
  .corner-footer p:last-child { flex: none; }
  .contact-copy { font-size: 13px; padding-inline: 13px; }
  .contact-reveal { position: fixed; top: calc(var(--corner-inset) + 45px); left: var(--corner-inset); right: auto; }
}
@media (max-width: 360px) {
  :root { --navigation-font-size: 11px; }
  .nav-control { padding-inline: 5px; }
  .corner-top-right { gap: 0; }
  .corner-header { gap: 5px; }
  .corner-footer p:first-child { max-width: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .navigation-study *, .navigation-study *::before { transition: none !important; animation: none !important; }
}

/* The video introduction remains above the empty navigation study. */
@font-face { font-family: 'Averia Serif Libre'; src: url('./assets/AveriaSerifLibre-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
.intro-landing { padding: var(--corner-inset); }
.intro-landing .hero { position: relative; height: calc(100svh - 109px); min-height: 300px; padding: 0; margin: 0; border-radius: 7px; overflow: hidden; isolation: isolate; }
.intro-landing .hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.intro-copy { position: absolute; left: 50%; top: calc(50% - 12px); transform: translate(-50%, -50%); width: calc(100% - 48px); color: #f7f6f5; text-align: center; z-index: 2; }
.intro-landing .hero h1 { position: static; max-width: none; margin: 0; padding: 0; font: italic 700 35px/50px 'Averia Serif Libre', Georgia, serif; letter-spacing: 0; }
.intro-landing .hero .current { position: static; max-width: none; width: auto; margin: 12px 0 0; text-align: center; font: 400 18px/1.5 'TWK Lausanne', Arial, sans-serif; text-transform: none; }
.intro-landing .hero .current { font-size: 18px !important; }
.intro-copy a:hover { text-decoration: underline; text-underline-offset: 4px; }
.intro-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 15px; }
.intro-nav > div { display: flex; gap: 7px; }
@media (max-width: 700px) {
 .intro-landing .hero { height: calc(100svh - 83px); }
 .intro-copy { width: calc(100% - 36px); }
 .intro-landing .hero h1 { font-size: clamp(25px, 5.1vw, 35px); line-height: 1.35; text-wrap: balance; }
 .intro-landing .hero .current { margin-top: 14px; line-height: 1.65; text-wrap: balance; }
 .intro-nav > div { gap: 2px; }
}

/* One shared navigation row, flowing below the video and sticking above the workspace. */
.shared-navigation { position: sticky; top: 0; z-index: 5; padding: var(--navigation-padding) var(--corner-inset); background: var(--paper); }
.intro-landing { padding-bottom: 0; }
.intro-landing .hero { height: calc(100svh - var(--corner-inset) - var(--navigation-height)); }
.navigation-study { min-height: calc(100svh - var(--navigation-height)); grid-template-rows: 1fr auto; padding-top: 0; }
@media (max-width: 700px) {
 .intro-landing .hero { height: calc(100svh - var(--corner-inset) - var(--navigation-height)); }
 .navigation-study { min-height: calc(100svh - var(--navigation-height)); }
}

/* Koto-inspired two-column project feed, with captions revealed underneath. */
@font-face { font-family: 'TWK Lausanne'; src: url('./local-fonts/TWKLausannePan-400.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(130, minmax(0, 1fr)); gap: 8px; aspect-ratio: 8 / 13; padding-bottom: 0; margin-bottom: 40px; }
.project-grid[hidden] { display: none !important; }
.project-panel { position: relative; min-width: 0; min-height: 0; isolation: isolate; }
.panel-notion { grid-column: 1; grid-row: 51 / 81; --project-surface: #e9e8e5; }
.panel-thrive { grid-column: 1; grid-row: 1 / 51; --project-surface: #eeedeb; }
.panel-sullivan { grid-column: 2; grid-row: 1 / 31; --project-surface: #e5e9ec; }
.panel-tbd { grid-column: 2; grid-row: 31 / 81; --project-surface: #ebe9e6; }
.panel-tbd-second { grid-column: 1; grid-row: 81 / 131; --project-surface: #e8e7e4; }
.panel-colorstack { grid-column: 2; grid-row: 81 / 111; --project-surface: #eee6e8; }
.project-image-space { position: absolute; inset: 0 0 auto; height: 100%; width: 100%; background: var(--project-surface); border-radius: 7px; overflow: hidden; z-index: 1; transition: height 167ms linear; }
.project-summary { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; height: 24px; padding: 5px 0 0; opacity: 0; transition: opacity 167ms linear; font-family: 'TWK Lausanne', Arial, sans-serif; }
.project-summary h2, .project-summary .project-description { min-width: 0; margin: 0; font: 400 15px/1.25 'TWK Lausanne', Arial, sans-serif; letter-spacing: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.project-summary h2 { flex-shrink: 0; color: #242321; }
.project-summary .project-description { text-align: right; color: #77736f; }
.project-launch { position: absolute; inset: 0; z-index: 3; padding: 0; border-radius: 7px; cursor: pointer; }
.project-launch:focus-visible { outline: 2px dotted #fd919c; outline-offset: 3px; }
.project-panel:focus-within .project-image-space { height: calc(100% - 24px); }
.project-panel:focus-within .project-summary { opacity: 1; transition-delay: 167ms; }
@media (hover: hover) and (pointer: fine) {
 .project-panel:hover .project-image-space { height: calc(100% - 24px); }
 .project-panel:hover .project-summary { opacity: 1; transition-delay: 167ms; }
}
.empty-stage[data-active-view='spatial'] { min-height: calc(100svh - 142px); }
#navigation-stage { scroll-margin-top: var(--navigation-height); }
@media (max-width: 700px), (hover: none) {
 .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; aspect-ratio: auto; gap: 20px 8px; margin-bottom: 28px; }
 .project-panel { grid-column: auto; grid-row: auto; padding-bottom: 72px; }
 .project-image-space { position: relative; height: auto; aspect-ratio: 4 / 3; }
 .project-summary { height: 72px; padding: 10px 18px 0 0; flex-direction: column; justify-content: flex-start; gap: 3px; opacity: 1; }
 .project-summary h2, .project-summary .project-description { font-size: 14px; white-space: normal; text-align: left; }
 .project-summary .project-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 .project-panel:hover .project-image-space, .project-panel:focus-within .project-image-space { height: auto; }
 .empty-stage[data-active-view='spatial'] { min-height: calc(100svh - 102px); }
}
@media (max-width: 480px) {
 .project-grid { grid-template-columns: 1fr; }
 .project-panel { padding-bottom: 72px; }
}
/* A short film entrance, followed by a glide down to the project grid. */
.intro-skip { display: none; }
.intro-cinematic .intro-landing { padding: var(--corner-inset); }
.intro-cinematic .intro-landing .hero { height: calc(100svh - 2 * var(--corner-inset)); min-height: 0; border-radius: 7px; }
.intro-cinematic .intro-skip { position: absolute; display: grid; place-items: center; left: 50%; bottom: 24px; transform: translateX(-50%); width: 44px; height: 44px; padding: 0; z-index: 3; color: #f7f6f5; border-radius: 50%; transition: background-color .3s; }
.intro-cinematic .intro-skip:hover { background: #ffffff15; }
.intro-cinematic .intro-skip:focus-visible { outline: 2px dotted #fd919c; outline-offset: 3px; }
.intro-arriving .intro-copy { animation: film-copy-in 1.4s cubic-bezier(.22,1,.36,1) .35s both; }
.intro-gliding { scroll-behavior: auto !important; }

/* Keep the padded film behind the workspace as the next section scrolls over it. */
.intro-landing { position: sticky; top: 0; z-index: 0; padding: var(--corner-inset); }
.intro-landing .hero { height: calc(100svh - 2 * var(--corner-inset)); min-height: 0; }
.navigation-study { z-index: 1; background: var(--paper); }
@media (prefers-reduced-motion: reduce) { .intro-landing { position: relative; } }
@keyframes film-copy-in { from { opacity: 0; filter: blur(5px); transform: translate(-50%, calc(-50% + 8px)); } to { opacity: 1; filter: blur(0); transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: reduce) { .intro-arriving .intro-copy { animation: none; } }

/* Fixed-feeling left rail alongside the two-column project feed. */
.work-layout { display: grid; grid-template-columns: minmax(220px, 24%) minmax(0, 1fr); align-items: start; gap: 24px; }
.work-layout .empty-stage { min-width: 0; }
.work-sidebar { position: sticky; top: var(--navigation-height); align-self: start; height: calc(100svh - var(--navigation-height) - var(--corner-inset)); padding: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 0; color: #242321; font: 400 16px/1.4 'TWK Lausanne', Arial, sans-serif; }
.work-brand { display: flex; align-items: center; gap: 12px; flex: none; min-height: 48px; width: 100%; padding: 10px 12px; border-radius: 7px; background: #eeedeb; text-align: left; font: 400 11px/1 var(--mono); }
.work-brand img { flex: none; display: block; }
.work-brand-section { color: #77736f; }
.work-brand-dot { margin-left: auto; color: #77736f; }
.work-introduction { margin: 52px 12px 38px; }
.work-introduction h2 { margin: 0; font: 400 24px/1.3 'TWK Lausanne', Arial, sans-serif; letter-spacing: -.3px; }
.work-introduction p { margin: 4px 0 0; font: 400 24px/1.35 'TWK Lausanne', Arial, sans-serif; color: #85817d; letter-spacing: -.3px; }
.work-sidebar .corner-views { flex-direction: column; align-items: stretch; gap: 12px; margin: 0 12px 24px; isolation: auto; }
.work-sidebar .view-indicator { display: none; }
.work-sidebar .corner-views .nav-control { justify-content: flex-start; padding: 6px 10px 6px 18px; min-height: 36px; font: 400 17px/24px 'TWK Lausanne', Arial, sans-serif; text-transform: none; border-color: transparent; }
.work-sidebar [data-view] { color: #85817d; }
.work-sidebar [data-view][aria-pressed='true'] { color: #242321; }
.work-sidebar [data-view][aria-pressed='true'] > span::before { content: '•'; position: absolute; left: -16px; }
.work-preview { margin-top: auto; position: relative; display: flex; gap: 12px; width: 100%; padding: 12px; border-radius: 7px; background: #eeedeb; text-align: left; font-family: 'TWK Lausanne', Arial, sans-serif; }
.work-preview[hidden] { display: none; }
.work-preview-tile { display: grid; place-items: center; flex: none; width: 64px; height: 72px; border-radius: 3px; background: #e3e1dc; color: #242321; font-size: 28px; }
.work-preview-copy { min-width: 0; display: flex; flex-direction: column; padding-right: 12px; }
.work-preview-title { font-size: 15px; line-height: 1.3; }
.work-preview-description { margin-top: 2px; font-size: 14px; line-height: 1.3; color: #85817d; }
.work-preview-category { margin-top: 14px; font-size: 10px; line-height: 1.3; color: #77736f; text-transform: uppercase; }
.work-preview-arrow { position: absolute; right: 10px; top: 10px; color: #77736f; font-size: 16px; }
.work-brand:focus-visible, .work-preview:focus-visible { outline: 2px dotted #fd919c; outline-offset: 4px; }
@media (max-width: 900px) {
 .work-layout { grid-template-columns: minmax(180px, 25%) minmax(0, 1fr); gap: 16px; }
 .work-introduction { margin: 36px 8px 24px; }
 .work-introduction h2, .work-introduction p { font-size: 20px; }
 .work-preview-tile { width: 44px; height: 54px; }
 .work-preview { gap: 8px; padding: 10px; }
 .work-preview-title { font-size: 13px; }
 .work-preview-description { font-size: 12px; }
}
@media (max-width: 700px) {
 .work-layout { display: block; }
 .work-sidebar { position: static; height: auto; margin-bottom: 22px; }
 .work-brand { min-height: 44px; }
 .work-introduction { margin: 24px 0 16px; }
 .work-introduction h2, .work-introduction p { font-size: 22px; }
 .work-sidebar .corner-views { flex-direction: row; margin: 0; gap: 18px; }
 .work-sidebar .corner-views .nav-control { font-size: 16px; }
 .work-preview { display: none; }
}
#navigation-stage:focus { outline: none; }

/* One persistent entry point for the existing annotation flow. */
.feedback-entry, .case-feedback, #feedback-mobile { display: none !important; }
#annotate-feedback { position: fixed; right: 24px; bottom: 24px; z-index: 210; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 40px; padding: 10px 12px; border: 1px solid #ffffff50; border-radius: 8px; background: #fd919c; color: #ffffff; box-shadow: 0 4px 16px #00000014; font: 400 11px/16px 'Departure Mono', monospace; text-transform: none; transition: background-color .2s, transform .3s var(--nav-ease), opacity .2s; }
#annotate-feedback svg { display: block; width: 20px; height: 20px; flex: none; }
#annotate-feedback[hidden] { display: none; }
#annotate-feedback:hover { background: #f7a4ad; transform: translateY(-1px); }
#annotate-feedback:active { transform: translateY(0) scale(.97); }
#annotate-feedback:focus-visible { outline: 2px dotted #fd919c; outline-offset: 4px; }
body:has(#feedback-dialog[open]) #annotate-feedback { opacity: 0; pointer-events: none; }
@media (max-width: 700px) { #annotate-feedback { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); } }

/* Compact two-way view selector, anchored to the upper-right corner. */
.corner-top-right .corner-views { display: flex; gap: 0; padding: 4px; border: 1px solid #16130e1c; border-radius: 999px; background: var(--paper); isolation: isolate; }
.corner-top-right .corner-views .nav-control { min-width: 76px; min-height: 28px; padding: 6px 14px; border: 0; border-radius: 999px; font: 400 11px/16px var(--mono); text-transform: uppercase; box-shadow: none; }
.corner-top-right .corner-views .nav-control::before { display: none; }
.corner-top-right .view-indicator { top: 4px; height: calc(100% - 8px); border: 0; border-radius: 999px; background: #eeedeb; box-shadow: none; }
.work-sidebar { visibility: hidden; }
.spatial-view[hidden] { display: none !important; }
.spatial-view { position: relative; height: calc(100svh - var(--navigation-height) - var(--corner-inset)); min-height: 460px; font-family: 'TWK Lausanne', Arial, sans-serif; }
.empty-stage[data-active-view='spatial'] { min-height: 0; }
.spatial-scene { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; border-radius: 7px; user-select: none; }
.spatial-scene.is-dragging, .spatial-scene.is-dragging * { cursor: grabbing; }
.spatial-scene:focus-visible { outline: 2px dotted #fd919c; outline-offset: 3px; }
.spatial-scene canvas, .spatial-nodes { position: absolute; inset: 0; width: 100%; height: 100%; }
.spatial-nodes { pointer-events: none; }
.spatial-node { position: absolute; left: 50%; top: 50%; width: clamp(96px, 11vw, 140px); padding: 0; text-align: left; pointer-events: auto; will-change: transform; background: transparent; color: #242321; }
.spatial-node-art { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; border-radius: 5px; background: var(--node-surface); border: 1px solid #16130e0b; font: 400 28px/1 'TWK Lausanne',Arial,sans-serif; transition: box-shadow .25s; }
.spatial-node-title { display: block; margin-top: 7px; font: 400 12px/1.3 'TWK Lausanne',Arial,sans-serif; white-space: nowrap; }
.spatial-node:hover .spatial-node-art, .spatial-node:focus-visible .spatial-node-art { box-shadow: 0 8px 24px #16130e1c; }
.spatial-node:focus-visible { outline: 2px dotted #fd919c; outline-offset: 5px; }
@media (max-width:700px) {
 .corner-top-right .corner-views .nav-control { min-width: 64px; padding-inline: 9px; }
 .work-sidebar { display: none; }
 .spatial-view { min-height: 430px; }
 .spatial-node { width: 108px; }
 .spatial-scene { bottom: 0; }
 .shared-navigation .corner-header { align-items: center; }
}

.spatial-node { transition: opacity .2s; }
.spatial-node-title { opacity: 0; transition: opacity .2s; }
.spatial-node:hover .spatial-node-title, .spatial-node:focus-visible .spatial-node-title, .spatial-node.is-selected .spatial-node-title { opacity: 1; }

.navigation-study { overflow-anchor: none; }

/* Spatial displays individual media pieces; INDEX retains the project overview. */
.spatial-node { width: clamp(80px, 9vw, 116px); }
.spatial-node-art { position: relative; overflow: hidden; font-size: 20px; }
.spatial-node-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.spatial-node-art img.spatial-detail { transform: scale(1.65); }
.spatial-media-placeholder { padding: 12px; gap: 8px; align-content: center; font: 400 12px/1.25 'TWK Lausanne',Arial,sans-serif; text-align: center; }
.spatial-media-placeholder span:last-child { font: 400 9px/14px var(--mono); color: #77736f; }
.spatial-node-title { white-space: normal; font-size: 10px; }
.spatial-node[data-related='false'] { pointer-events: auto; }
@media(max-width:700px) { .spatial-node { width: 84px; } .spatial-media-placeholder { padding: 8px; font-size: 10px; } }

/* A light sweep stays on the outline so the annotation label remains steady. */
@property --annotate-shimmer-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
#annotate-feedback::before {
 content: ''; position: absolute; inset: -2px; padding: 2px; border-radius: 10px; pointer-events: none;
 background: conic-gradient(from var(--annotate-shimmer-angle), transparent 0% 64%, #e46d8055 76%, #df687c 84%, transparent 94%);
 -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
 -webkit-mask-composite: xor; mask-composite: exclude;
 animation: annotate-outline-shimmer 4s linear infinite;
}
@keyframes annotate-outline-shimmer { to { --annotate-shimmer-angle: 360deg; } }
@media(prefers-reduced-motion: reduce) { #annotate-feedback::before { animation: none; background: #ffffff60; } }

/* A compact anchored feedback composer. Selection instructions remain in the first step. */
#feedback-context, #feedback-count, #feedback-form .feedback-private { display: none !important; }
#feedback-dialog[data-state='write'] { width: min(420px, calc(100vw - 32px)); padding: 18px; overflow: visible; border-radius: 14px; }
#feedback-dialog[data-state='write'] #feedback-step,
#feedback-dialog[data-state='write'] #feedback-title,
#feedback-dialog[data-state='write'] label[for='feedback-message'],
#feedback-dialog[data-state='write'] .note-shortcut { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#feedback-dialog[data-state='write'] #feedback-close { top: -10px; right: -10px; width: 24px; height: 24px; background: var(--paper); border: 1px solid var(--note-border); font-size: 18px; box-shadow: 0 2px 6px #0000000c; }
#feedback-form { position: relative; margin: 0; padding-right: 54px; }
#feedback-form[hidden] { display: none !important; }
#feedback-dialog[data-state='write'] #feedback-message { box-sizing: border-box; width: 100%; min-height: 40px; max-height: 140px; padding: 8px 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: 400 15px/24px var(--sans); resize: none; }
#feedback-dialog[data-state='write'] #feedback-message:focus { outline: none; box-shadow: none; }
#feedback-dialog[data-state='write']:focus-within { border-color: #e3728080; }
#feedback-form .note-options { display: none; margin: 8px 0 0; }
#feedback-form.has-message .note-options { display: flex; }
#feedback-form #feedback-category { max-width: 160px; min-height: 28px; padding: 3px 24px 3px 0; border: 0; border-radius: 0; background-position: right 4px center; font: 400 13px/20px var(--sans); }
#feedback-form .note-submit-row { position: absolute; right: 0; bottom: 0; margin: 0; }
#feedback-dialog #feedback-send { display: grid; place-items: center; width: 36px; height: 36px; min-width: 36px; padding: 0; gap: 0; border: 0; border-radius: 9px; background: #403f3f; color: white; font: 400 25px/1 var(--sans); }
#feedback-dialog #feedback-send:disabled { background: #a4a3a1; opacity: 1; cursor: default; }
#feedback-form #feedback-status:not(:empty) { border: 0; border-radius: 0; padding: 0; margin: 10px 0 0; background: none; font: 400 12px/18px var(--sans); }
#feedback-retry { margin: 4px 0 0; font-size: 12px; }
#feedback-verification:empty { display: none; }
@media(max-width:700px) {
 #feedback-dialog[data-state='write'] { padding: 16px; inset: auto 16px 16px; width: calc(100vw - 32px); max-height: calc(100dvh - 32px); }
 #feedback-dialog[data-state='write'] #feedback-message { font-size: 16px; }
}

/* Keep the invitation above the compact composer, without a floating close icon. */
body:has(#feedback-dialog[open]) #feedback-dialog[data-state='write'] #feedback-title {
 position: static; width: auto; height: auto; padding: 0; margin: 0 0 6px;
 overflow: visible; clip-path: none; white-space: normal;
 font: 500 17px/1.4 var(--sans);
}
#feedback-dialog[data-state='write'] #feedback-close { display: none; }

#feedback-send svg { display: block; flex: none; }

/* Styled category picker rather than the browser's native select popup. */
#feedback-form #feedback-category { display: none !important; }
.note-category-picker { position: relative; }
#feedback-category-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 0; border-radius: 9px; background: #efeeed; color: #626260; font: 400 13px/20px var(--sans); transition: background .15s; }
#feedback-category-trigger:hover, #feedback-category-trigger[aria-expanded='true'] { background: #e9e8e6; }
#feedback-category-trigger svg { flex: none; color: #85817d; }
#feedback-category-trigger:focus-visible { outline: 2px dotted #fd919c; outline-offset: 3px; }
#feedback-category-menu { position: fixed; z-index: 2; width: 220px; padding: 6px; border: 1px solid #16130e12; border-radius: 15px; background: #fff; color: #242321; box-shadow: 0 12px 30px #16130e1a; overflow-y: auto; }
#feedback-category-menu[hidden] { display: none !important; }
#feedback-category-menu [role='option'] { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; font: 400 15px/22px var(--sans); }
#feedback-category-menu [role='option'] svg { flex: none; opacity: 0; }
#feedback-category-menu [aria-selected='true'] svg { opacity: 1; }
#feedback-category-menu [aria-selected='true'], #feedback-category-menu [role='option']:hover, #feedback-category-menu [role='option']:focus-visible { background: #f3f2f1; outline: none; }
#feedback-dialog.note-dark #feedback-category-trigger { background: #303030; color: #e6e6e2; }
#feedback-dialog.note-dark #feedback-category-menu { background: #252525; border-color: #ffffff20; color: #fcfcfa; }
#feedback-dialog.note-dark #feedback-category-menu [aria-selected='true'], #feedback-dialog.note-dark #feedback-category-menu [role='option']:hover, #feedback-dialog.note-dark #feedback-category-menu [role='option']:focus-visible { background: #373737; }

/* Quiet media cards with a small hover callout, rather than long floating labels. */
.spatial-node-art { border-radius: 7px; box-shadow: 0 5px 13px #211c180f, 0 1px 3px #211c1807; transition: transform .3s var(--nav-ease), box-shadow .3s var(--nav-ease); }
.spatial-node:hover .spatial-node-art, .spatial-node:focus-visible .spatial-node-art, .spatial-node.is-hovered .spatial-node-art { transform: translateY(-2px) scale(1.07); box-shadow: 0 12px 25px #211c1829, 0 2px 6px #211c180d; }
.spatial-node:hover, .spatial-node:focus-visible, .spatial-node.is-hovered { z-index: 300 !important; opacity: 1 !important; }
.spatial-node-caption { position: absolute; top: 100%; left: 50%; width: max-content; max-width: 100%; margin-top: 10px; transform: translate(-50%, -3px); opacity: 0; pointer-events: none; transition: opacity .18s, transform .25s var(--nav-ease); }
.spatial-node-caption::before { content: ''; position: absolute; left: 50%; top: -3px; width: 7px; height: 7px; background: white; transform: translateX(-50%) rotate(45deg); }
.spatial-node .spatial-node-title { display: block; position: relative; width: max-content; max-width: 100%; margin: 0; padding: 3px 7px; border-radius: 4px; background: #fff; color: #242321; box-shadow: 0 2px 7px #211c180e; font: 400 10px/14px 'TWK Lausanne',Arial,sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 1; }
.spatial-node:hover .spatial-node-caption, .spatial-node:focus-visible .spatial-node-caption, .spatial-node.is-hovered .spatial-node-caption { opacity: 1; transform: translate(-50%,0); }

/* Expanded media retains its experience context and a strip of related pieces. */
#spatial-gallery { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: max(84px, calc(var(--navigation-height) + 20px)) clamp(24px, 10vw, 170px) 28px; border: 0; background: #f7f6f5f5; color: #242321; overflow: auto; overscroll-behavior: contain; font-family: 'TWK Lausanne',Arial,sans-serif; }
#spatial-gallery::backdrop { background: #f7f6f5b8; backdrop-filter: blur(9px); }
body:has(#spatial-gallery[open]), html:has(#spatial-gallery[open]) { overflow: hidden; }
.spatial-gallery-shell { max-width: 1200px; margin: 0 auto; }
.spatial-gallery-header { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }
.spatial-gallery-header h2 { margin: 0; font: 400 16px/24px 'TWK Lausanne',Arial,sans-serif; }
.spatial-gallery-case { padding: 0; color: inherit; font: 400 15px/24px 'TWK Lausanne',Arial,sans-serif; text-decoration: underline; text-underline-offset: 4px; }
.spatial-gallery-close { display: grid; place-items: center; width: 36px; height: 36px; margin-left: auto; padding: 4px; color: inherit; border-radius: 7px; }
.spatial-gallery-close:hover { background: #16130e08; }
.spatial-gallery-media { margin: 0; }
.spatial-gallery-art { position: relative; display: grid; place-items: center; width: 100%; height: min(61dvh, 650px); min-height: 180px; overflow: hidden; border-radius: 8px; box-shadow: 0 18px 50px #211c1814; transform-origin: center; }
.spatial-gallery-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.spatial-gallery-art img.spatial-gallery-detail { object-fit: cover; transform: scale(1.65); }
.spatial-gallery-media figcaption { margin-top: 10px; color: #77736f; font: 400 13px/20px 'TWK Lausanne',Arial,sans-serif; }
.spatial-gallery-thumbnails { display: flex; gap: 12px; margin-top: 20px; padding: 3px; overflow-x: auto; }
.spatial-gallery-thumb { display: grid; place-items: center; position: relative; flex: none; width: 94px; height: 62px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; opacity: .7; }
.spatial-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.spatial-gallery-thumb img.spatial-gallery-detail { transform: scale(1.65); }
.spatial-gallery-thumb:hover, .spatial-gallery-thumb[aria-pressed='true'] { opacity: 1; }
.spatial-gallery-thumb[aria-pressed='true'] { outline: 1px solid #242321; outline-offset: 3px; }
.spatial-gallery-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12px; text-align: center; font: 400 clamp(18px,3vw,40px)/1.2 'TWK Lausanne',Arial,sans-serif; }
.spatial-gallery-placeholder span:last-child { color: #77736f; font: 400 11px/16px var(--mono); }
.spatial-gallery-thumb .spatial-gallery-placeholder { padding: 6px; gap: 4px; font-size: 9px; }
.spatial-gallery-thumb .spatial-gallery-placeholder span:last-child { font: 400 8px/10px 'TWK Lausanne',Arial,sans-serif; }
#spatial-gallery button:focus-visible { outline: 2px dotted #fd919c; outline-offset: 4px; }
@media(max-width:700px) {
 #spatial-gallery { padding: 28px 18px; }
 .spatial-gallery-header { gap: 12px; flex-wrap: wrap; }
 .spatial-gallery-header h2 { max-width: calc(100% - 50px); }
 .spatial-gallery-case { font-size: 13px; order: 3; flex-basis: 100%; text-align: left; }
 .spatial-gallery-art { height: 55dvh; }
 .spatial-gallery-thumb { width: 76px; height: 52px; }
}
@media(prefers-reduced-motion:reduce) { .spatial-node-art, .spatial-node-caption { transition: none; } }

/* Rectangular view switch with softened corners. */
.corner-top-right .corner-views { border-radius: 9px; }
.corner-top-right .corner-views .nav-control, .corner-top-right .view-indicator { border-radius: 6px; }

/* Small corner controls for project previews. */
.project-thumbnail-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-preview-control { position: absolute; right: 14px; bottom: 14px; z-index: 4; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: white; cursor: pointer; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .2)); transition: background 180ms, bottom 167ms linear; }
.project-preview-control:hover { background: rgb(0 0 0 / .12); }
.project-preview-control:focus-visible { outline: 2px solid #fd919c; outline-offset: 3px; }
.project-preview-control svg { width: 28px; height: 28px; }
.project-preview-control .preview-progress { opacity: .45; }
.project-preview-control .preview-pause { display: none; }
.project-preview-control.is-playing .preview-play { display: none; }
.project-preview-control.is-playing .preview-pause { display: block; }
.project-panel:focus-within .project-preview-control { bottom: 38px; }
@media (hover: hover) and (pointer: fine) { .project-panel:hover .project-preview-control { bottom: 38px; } }
@media (max-width: 700px), (hover: none) { .project-preview-control, .project-panel:focus-within .project-preview-control { bottom: 86px; } }
@media (prefers-reduced-motion: reduce) { .project-preview-control { transition: none; } }

.project-thumbnail-image { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Preserve the complete 5:3 Sullivan composition, including its outer padding. */
.panel-sullivan .project-image-space { background: var(--paper); }
.panel-sullivan .project-thumbnail-video { object-fit: contain; }
@media (max-width: 700px), (hover: none) {
 .panel-sullivan .project-image-space { aspect-ratio: 5 / 3; }
}
@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
 .panel-sullivan { grid-row: 1 / 26; }
 .panel-tbd { grid-row: 26 / 81; }
}

.panel-notion .project-thumbnail-video { object-fit: cover; }
.panel-notion .project-image-space { background: var(--paper); }
/* Full-page project opening with a compact floating project index. */
#case-study { inset: 0; margin: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; border: 0; border-radius: 0; background: var(--paper); box-shadow: none; }
#case-study::backdrop { background: var(--paper); }
.case-scroll { padding: 0; height: 100%; scroll-behavior: smooth; }
.case-cover { padding: 122px max(32px, calc((100vw - 1200px) / 2)) 24px; }
.case-cover-title { margin: 0 0 22px; font: 400 clamp(24px, 3vw, 40px)/1.15 'TWK Lausanne', Arial, sans-serif; letter-spacing: -.03em; }
.case-cover-media { overflow: hidden; border-radius: 12px; background: #eeedeb; }
.case-cover-media video, .case-cover-media img { display: block; width: 100%; max-height: 78svh; object-fit: contain; }
.case-project-dock { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 10; }
.case-dock-tray { display: flex; align-items: center; gap: 12px; height: 66px; padding: 10px 16px; border-radius: 20px; background: rgb(239 238 236 / .8); backdrop-filter: blur(22px) saturate(1.1); box-shadow: 0 8px 32px #00000005; }
.case-dock-tray > button[data-dock-project] { display: grid; place-items: center; flex: none; width: 52px; height: 44px; padding: 4px; border: 0; border-radius: 8px; background: transparent; transition: transform 240ms cubic-bezier(.16,1,.3,1), background 200ms; }
.case-dock-tray img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; filter: drop-shadow(0 2px 2px #0002); }
.case-dock-tray > button[data-dock-project]:hover { transform: translateY(-4px) scale(1.18); background: #ffffff60; }
.case-dock-tray > button[aria-current='page'] { background: #ffffff90; }
.case-dock-tray button:focus-visible, .case-dock-close:focus-visible, .interaction-sound:focus-visible { outline: 2px solid #fd919c; outline-offset: 3px; }
.case-dock-divider { width: 1px; height: 26px; background: #0002; margin-left: 2px; }
.case-dock-close { position: absolute; right: calc(100% + 16px); top: 17px; display: grid; place-items: center; width: 32px; height: 32px; padding: 5px; border: 0; border-radius: 50%; background: #efeeecd9; color: #74716d; }
.case-dock-close:hover { background: #e6e4e1; color: #242321; }
.case-dock-close svg { width: 22px; height: 22px; }
.interaction-sound { display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 5px; border: 0; border-radius: 7px; background: transparent; color: #74716d; }
.interaction-sound:hover { background: #00000006; }
.interaction-sound svg { width: 20px; height: 20px; }
.interaction-sound .sound-off { display: none; }
.interaction-sound[aria-pressed='true'] .sound-on { display: none; }
.interaction-sound[aria-pressed='true'] .sound-off { display: block; }
#case-study .project-soon { min-height: 65svh; padding-top: 80px; }
@media (max-width:700px) { .case-cover { padding: 110px 18px 18px; } .case-project-dock { left: calc(50% + 16px); } .case-dock-tray { gap: 4px; padding: 8px; height: 60px; border-radius: 17px; } .case-dock-tray > button[data-dock-project] { width: 42px; height: 38px; } .case-dock-close { right: calc(100% + 8px); top: 14px; width: 28px; height: 28px; } .case-dock-divider { margin: 0 2px; } }
@media (prefers-reduced-motion:reduce) { .case-scroll { scroll-behavior: auto; } .case-dock-tray > button[data-dock-project] { transition: none; } }
.case-cover { min-height: 100svh; }
#case-study .case-cover { width: 100%; aspect-ratio: auto; background: var(--paper); border-radius: 0; }
#case-study, #case-content:focus { outline: none; }
/* A quiet frosted tray, uniform landscape previews, and springy hover labels. */
.case-project-dock { top: 14px; }
.case-dock-tray { height: 84px; gap: 22px; padding: 18px 24px; border-radius: 28px; background: rgb(255 255 255 / .72); box-shadow: 0 10px 38px #24232104; backdrop-filter: blur(24px); }
.case-dock-tray > button[data-dock-project] { position: relative; width: 64px; height: 40px; padding: 0; border-radius: 0; background: transparent; transform: none; transition: none; }
.case-dock-tray > button[data-dock-project] img { width: 64px; height: 40px; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 1px; filter: drop-shadow(0 3px 3px #00000018); transform: translateY(0) scale(1); transition: transform 320ms cubic-bezier(.2,1.5,.4,1), filter 250ms ease; will-change: transform; }
.case-dock-tray > button[data-dock-project]:hover, .case-dock-tray > button[aria-current='page'] { background: transparent; transform: none; }
.case-dock-tray > button[data-dock-project]:is(:hover,:focus-visible) img { transform: translateY(-3px) scale(1.14); filter: drop-shadow(0 6px 5px #00000021); }
.case-dock-caption { position: absolute; top: calc(100% + 36px); left: 50%; display: flex; align-items: center; gap: 7px; width: max-content; max-width: min(420px,calc(100vw - 32px)); padding: 9px 14px; border: 1px solid #dedbd650; border-radius: 999px; background: rgb(247 246 245 / .9); backdrop-filter: blur(18px); color: #242321; font: 400 14px/20px 'TWK Lausanne',Arial,sans-serif; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%,6px) scale(.97); transition: opacity 150ms ease, transform 260ms cubic-bezier(.2,1.3,.4,1), visibility 150ms; }
.case-dock-caption > span:last-child { color: #96928e; }
.case-dock-tray > button[data-dock-project]:is(:hover,:focus-visible) .case-dock-caption { opacity: 1; visibility: visible; transform: translate(-50%,0) scale(1); }
.case-dock-divider { height: 30px; background: #c8c5c0; margin: 0 0 0 2px; }
.case-dock-close { width: 40px; height: 40px; top: 22px; right: calc(100% + 18px); padding: 8px; background: #ffffff9c; color: #ccc9c4; transition: color 180ms, background 180ms, transform 260ms cubic-bezier(.2,1.5,.4,1); }
.case-dock-close svg { width: 24px; height: 24px; }
.case-dock-close:hover { color: #8c8881; background: #ffffffd9; transform: scale(1.08); }
@media (max-width:700px) {
 .case-project-dock { left: calc(50% + 18px); top: 14px; }
 .case-dock-tray { height: 66px; gap: 12px; padding: 14px; border-radius: 22px; }
 .case-dock-tray > button[data-dock-project], .case-dock-tray > button[data-dock-project] img { width: 46px; height: 29px; }
 .case-dock-tray .interaction-sound { width: 24px; padding: 3px; }
 .case-dock-divider { height: 24px; margin: 0; }
 .case-dock-close { width: 28px; height: 28px; top: 19px; right: calc(100% + 7px); padding: 4px; }
 .case-dock-caption { font-size: 12px; gap: 5px; padding: 7px 11px; top: calc(100% + 28px); }
 .case-dock-caption > span:last-child { display: none; }
}
@media (prefers-reduced-motion:reduce) { .case-dock-tray > button[data-dock-project] img, .case-dock-caption, .case-dock-close { transition: none; } }
.case-dock-caption { border-color: #e3e0dc; }
.case-cover { padding-top: 154px; }
@media (max-width:700px) { .case-cover { padding-top: 128px; } }
/* Slimmer project dock. */
.case-dock-tray { height: 64px; gap: 16px; padding: 12px 18px; border-radius: 22px; }
.case-dock-tray > button[data-dock-project], .case-dock-tray > button[data-dock-project] img { width: 56px; height: 35px; }
.case-dock-close { width: 32px; height: 32px; top: 16px; right: calc(100% + 14px); padding: 5px; }
.case-dock-divider { height: 25px; }
.case-dock-caption { top: calc(100% + 27px); }
@media (max-width:700px) {
 .case-dock-tray { height: 56px; gap: 10px; padding: 10px 12px; border-radius: 19px; }
 .case-dock-tray > button[data-dock-project], .case-dock-tray > button[data-dock-project] img { width: 44px; height: 27.5px; }
 .case-dock-close { width: 28px; height: 28px; top: 14px; right: calc(100% + 7px); padding: 4px; }
 .case-dock-caption { top: calc(100% + 24px); }
}
/* Tighter tray corners with gently rounded preview images. */
.case-dock-tray { border-radius: 13px; }
.case-dock-tray > button[data-dock-project] img { border-radius: 4px; }
@media (max-width:700px) { .case-dock-tray { border-radius: 11px; } }
/* Unified menu entry and command search. */
.corner-primary[hidden] { display: none !important; }
.portfolio-menu { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px 9px 16px; border: 0; border-radius: 9px; background: #141414; color: #fff; font: 400 17px/22px 'TWK Lausanne',Arial,sans-serif; transition: background 160ms, transform 180ms; }
.portfolio-menu:hover { background: #292929; }
.portfolio-menu:active { transform: scale(.97); }
.menu-return { display: grid; place-items: center; width: 27px; height: 25px; border-radius: 5px; background: #333; color: #eee; font: 400 21px/1 Arial,sans-serif; }
.portfolio-menu:focus-visible { outline: 2px solid #fd919c; outline-offset: 4px; }
#command-palette { inset: 0; margin: auto; width: min(640px,calc(100vw - 40px)); max-width: 640px; max-height: calc(100svh - 64px); padding: 0; overflow: hidden; border: 1px solid #e7e7e7; border-radius: 20px; background: #fcfcfc; color: #191919; box-shadow: 0 24px 80px #0002; font: 400 15px/1.4 'TWK Lausanne',Arial,sans-serif; }
#command-palette::backdrop { background: #0005; backdrop-filter: blur(9px); }
#command-palette .command-header { display: flex; align-items: center; gap: 12px; height: 64px; padding: 16px 20px; border-bottom: 1px solid #eee; }
#command-palette .command-header input { min-width: 0; width: 100%; padding: 0; border: 0; outline: none; text-align: left; background: transparent; color: #222; font: inherit; letter-spacing: -.02em; text-transform: none; }
#command-palette .command-header input::placeholder { color: #999; }
#command-go { display: flex; align-items: center; flex: none; gap: 7px; padding: 0; background: none; font: inherit; }
#command-go kbd { display: grid; place-items: center; width: 24px; height: 23px; border: 0; border-radius: 5px; background: #e9e9e9; color: #222; font: 18px/1 Arial,sans-serif; }
#command-palette .command-body { max-height: calc(100svh - 176px); overflow: auto; padding: 6px 10px 10px; }
#command-palette #command-results { max-height: none; overflow: visible; }
#command-palette .command-group, #command-palette .command-categories h2 { margin: 14px 10px 6px; color: #a0a0a0; font: 500 12px/18px 'TWK Lausanne',Arial,sans-serif; text-transform: uppercase; letter-spacing: .02em; }
#command-palette .command-group::after { display: none; }
#command-palette .command-result { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 36px; padding: 7px 10px; border: 0; border-radius: 10px; color: #191919; background: transparent; text-align: left; text-transform: none; font: inherit; }
#command-palette .command-result.active, #command-palette .command-result:hover { background: #f0f0f0; }
#command-palette .command-result small { color: #a0a0a0; font: inherit; white-space: nowrap; }
#command-palette .command-categories { padding-bottom: 4px; }
.command-category-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 4px 10px; }
.command-category-list button { min-width: 0; padding: 0; border: 0; background: transparent; font: 400 13px/20px 'TWK Lausanne',Arial,sans-serif; text-align: center; }
.command-category-list img { display: block; width: 100%; aspect-ratio: 1.2; object-fit: cover; border-radius: 16px; margin-bottom: 6px; transition: transform 220ms cubic-bezier(.16,1,.3,1); }
.command-category-list button:hover img { transform: translateY(-3px); }
#command-palette .command-footer { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 10px 20px; border-top: 1px solid #eee; color: #999; font: 400 11px/16px 'TWK Lausanne',Arial,sans-serif; }
#command-palette .command-footer #close-search { position: static; transform: none; padding: 0; border: 0; border-radius: 0; background: transparent; color: #888; font: inherit; }
#command-palette .command-empty { padding: 20px 10px; font: inherit; }
/* Preview fills its media box even when the caption is revealed. */
.panel-sullivan .project-thumbnail-video { object-fit: cover; }
/* Feedback dismissal follows the reference's quarter-turn and press. */
.feedback-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
body:has(#feedback-dialog[open]) #feedback-dialog .feedback-heading #feedback-title { margin: 0; flex: 1; }
#feedback-dialog #feedback-close, #feedback-dialog[data-state='write'] #feedback-close { position: static; display: grid; place-items: center; flex: none; width: 26px; height: 26px; padding: 4px; margin: 0; border: 0; border-radius: 6px; background: transparent; color: #85817d; box-shadow: none; transition: color 150ms, background 150ms, transform 150ms; }
#feedback-dialog #feedback-close:hover { transform: rotate(90deg); color: #242321; background: #00000006; }
#feedback-dialog #feedback-close:active { transform: rotate(90deg) scale(.92); }
#feedback-dialog #feedback-close:focus-visible { outline: 2px solid #fd919c; outline-offset: 2px; }
@media (max-width:700px) { .portfolio-menu { font-size: 15px; padding: 7px 9px 7px 12px; } #command-palette { width: calc(100vw - 24px); border-radius: 17px; } #command-palette .command-header { padding: 14px 16px; } #command-palette .command-result small { font-size: 12px; } #command-palette .command-footer > span { display: none; } .command-category-list { gap: 8px; } }
@media (prefers-reduced-motion:reduce) { .portfolio-menu, .command-category-list img, #feedback-dialog #feedback-close { transition: none; } }
#command-palette .command-header, #command-palette .command-header input, #command-palette .command-result, #command-palette #command-go { font: 400 15px/22px 'TWK Lausanne',Arial,sans-serif; }
@media (max-width:700px) { #command-palette .command-header input { font-size: 16px; } }
#command-palette .command-header, #command-palette .command-header input, #command-palette .command-header input::placeholder, #command-palette .command-result { font-size: 15px !important; }
@media (max-width:700px) { #command-palette .command-header input, #command-palette .command-header input::placeholder { font-size: 16px !important; } }
/* Keep Menu in the same control family as Index / Spatial. */
.portfolio-menu { height: 38px; min-height: 38px; gap: 8px; padding: 4px 10px 4px 14px; border: 1px solid #16130e1c; border-radius: 9px; background: var(--paper); color: #16130e; font: 400 11px/16px var(--mono); text-transform: uppercase; }
.portfolio-menu:hover { background: #eeedeb; }
.menu-return { width: 22px; height: 22px; border-radius: 5px; background: #eeedeb; color: #62605b; font: 400 17px/1 Arial,sans-serif; }
@media (max-width:700px) { .portfolio-menu { height: 38px; min-height: 38px; padding: 4px 9px 4px 12px; font-size: 11px; } }
/* Pages and commands, with a detached dismissal control. */
#command-palette { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; max-height: calc(100svh - 140px); }
#command-palette .command-panel { overflow: hidden; border: 1px solid #e7e7e7; border-radius: 18px; background: #fcfcfc; box-shadow: 0 24px 80px #0002; }
#command-palette .command-body { max-height: calc(100svh - 220px); padding-bottom: 14px; }
#command-palette .command-header input, #command-palette .command-header input::placeholder { font-family: 'Departure Mono',monospace; font-size: 12px !important; line-height: 18px; letter-spacing: 0; text-transform: uppercase; }
#command-palette .command-result .command-key { color: #a09c98; font: 400 12px/18px 'Departure Mono',monospace; text-transform: uppercase; }
#command-palette .command-group { margin-top: 16px; }
#command-palette > .command-floating-close { position: absolute; top: calc(100% + 16px); bottom: auto; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; min-height: 38px; width: max-content; margin: 0; padding: 9px 15px; border: 1px solid #16130e1c; border-radius: 9px; background: var(--paper); color: #62605b; font: 400 11px/18px 'Departure Mono',monospace; text-transform: uppercase; box-shadow: 0 4px 14px #00000006; }
#command-palette > .command-floating-close:hover { background: #eeedeb; }
#command-palette > .command-floating-close:focus-visible { outline: 2px solid #fd919c; outline-offset: 3px; }
@media (max-width:700px) { #command-palette .command-panel { border-radius: 15px; } #command-palette .command-header input, #command-palette .command-header input::placeholder { font-size: 12px !important; } }
#command-palette .command-group { font: 400 12px/18px 'Departure Mono',monospace; text-transform: uppercase; letter-spacing: 0; }



.work-sidebar .sidebar-bio{margin:0;max-width:235px;font:400 15px/23px "TWK Lausanne",Arial,sans-serif;color:#15130f;overflow-wrap:break-word}
.sidebar-bio a{color:rgba(21,19,15,.56);text-decoration:underline;text-underline-offset:2px}

.work-sidebar{visibility:visible}
@media(max-width:700px){.work-sidebar{display:flex;margin-bottom:24px}.work-sidebar .sidebar-bio{max-width:360px}}

/* Close at the trailing edge; compact send hint appears on hover or focus. */
#feedback-dialog .feedback-heading #feedback-close{order:2;margin-left:8px}
#feedback-dialog .feedback-heading #feedback-title{order:1}
.feedback-send-tip{position:absolute;right:-4px;bottom:calc(100% + 10px);display:flex;align-items:center;gap:16px;width:max-content;padding:10px 12px;border:1px solid #ffffff12;border-radius:14px;background:#242323;color:#fff;font:400 13px/18px 'TWK Lausanne',Arial,sans-serif;box-shadow:0 8px 24px #0002;opacity:0;visibility:hidden;transform:translateY(4px) scale(.97);transform-origin:bottom right;transition:opacity .16s,transform .16s,visibility .16s;pointer-events:none;z-index:10}
.feedback-send-tip kbd{padding:2px 7px;border-radius:6px;background:#ffffff15;color:#eee;font:400 12px/16px var(--mono)}
.note-submit-row:hover .feedback-send-tip,.note-submit-row:focus-within .feedback-send-tip{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
@media(prefers-reduced-motion:reduce){.feedback-send-tip{transition:none}}

/* Non-interactive tags stay beside the native pointer and never intercept clicks. */
.project-cursor-labels{pointer-events:none;position:fixed;inset:0;z-index:9999}
.project-cursor-row{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}
.project-cursor-clip{width:0;overflow:hidden;transition:width 280ms cubic-bezier(.76,0,.24,1) var(--label-delay);border-radius:7px}
.project-cursor-clip>span{display:block;width:max-content;padding:9px 16px;background:#fd919c;color:#fff;font:400 12px/16px var(--mono);letter-spacing:.055em;white-space:nowrap;text-transform:uppercase}
.project-cursor-labels.is-visible .project-cursor-clip{width:var(--label-width);transition:width 350ms cubic-bezier(.22,1,.36,1) var(--label-delay)}
@media(hover:none),(pointer:coarse){.project-cursor-labels{display:none}}
@media(prefers-reduced-motion:reduce){.project-cursor-clip,.project-cursor-labels.is-visible .project-cursor-clip{transition:none}}

/* Departure Mono is always uppercase; Lausanne titles retain their written case. */
.project-cursor-clip>span,.nav-control,.portfolio-menu,.menu-return,.corner-footer,.work-brand,
.spatial-media-placeholder span:last-child,.spatial-gallery-placeholder span:last-child,
.command-group,.command-shortcut,#command-query,#command-query::placeholder,#close-search,
.command-result small,.feedback-send-tip kbd,.note-step,.note-shortcut,#note-highlight-label,
.story-readmore,.story-experiences h2,.story-bottom h2,.story-sidebar h2,.story-bio h2,.story-history h2,
.story-date,.story-sidebar-credit,.story-link-callout,.case-meta dt,.case-eyebrow,.case-category,
.case-next-label,.case-next-category,.project-tag-year,.annotation-launcher{ text-transform:uppercase; }

/* Original navigation and nodes, restored beside the project feed. */
.work-sidebar{overflow-y:auto;scrollbar-width:thin;padding-right:4px}
.work-sidebar .sidebar-links{display:grid;gap:28px;margin-top:32px;width:100%;max-width:235px;flex:none}
.work-sidebar .sidebar-links nav{display:grid;gap:8px}
.work-sidebar .sidebar-links h2{font:500 14px/20px 'TWK Lausanne',Arial,sans-serif;text-transform:none;margin:0 0 6px;color:#626260}
.work-sidebar .sidebar-links nav>a,.work-sidebar .sidebar-links nav>button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:23px;padding:0;text-align:left;color:#626260;font:400 12px/21px var(--mono);text-transform:uppercase;transition:padding-left .2s ease,color .2s ease}
.work-sidebar .sidebar-links nav>a:hover,.work-sidebar .sidebar-links nav>button:hover,.work-sidebar .sidebar-links nav>a:focus-visible,.work-sidebar .sidebar-links nav>button:focus-visible{padding-left:6px;color:#111}
@media(max-width:700px){.work-sidebar{overflow:visible}.work-sidebar .sidebar-links{grid-template-columns:1fr 1fr;gap:24px;max-width:100%;margin-top:24px}}
@media(prefers-reduced-motion:reduce){.work-sidebar .sidebar-links nav>a,.work-sidebar .sidebar-links nav>button{transition:none}}
.work-sidebar .sidebar-links nav>a span,.work-sidebar .sidebar-links nav>button span{font-family:inherit;font-size:inherit;letter-spacing:inherit}
.work-sidebar .sidebar-links h2,.work-sidebar .sidebar-links nav>a,.work-sidebar .sidebar-links nav>button{color:#15130f}
.work-sidebar .sidebar-links nav>a:hover,.work-sidebar .sidebar-links nav>button:hover,.work-sidebar .sidebar-links nav>a:focus-visible,.work-sidebar .sidebar-links nav>button:focus-visible{color:#15130f}

@font-face{font-family:'TWK Lausanne Headline';src:url('./local-fonts/TWKLausannePan-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
.intro-landing .hero #intro-headline{max-width:577px;margin:0 auto;padding:0;font:normal 500 44px/50px 'TWK Lausanne Headline','TWK Lausanne',Arial,sans-serif;letter-spacing:0;text-align:center;color:#f7f6f5;text-wrap:balance}
@media(max-width:600px){.intro-landing .hero #intro-headline{font-size:clamp(28px,7vw,44px);line-height:1.14}}
.work-sidebar .work-copyright{margin-top:auto;padding-top:32px;padding-bottom:4px;flex:none;color:#15130f;font:400 13px/20px 'TWK Lausanne',Arial,sans-serif;text-transform:none}
@media(max-width:700px){.work-sidebar .work-copyright{margin-top:24px;padding-top:0}}

/* About shares the homepage's Lausanne body and Departure Mono label scale. */
#story-overlay{--sans:'TWK Lausanne',Arial,sans-serif;font-family:var(--sans);font-weight:400}
#story-overlay .story-shell{font-family:var(--sans);font-size:15px;line-height:23px}
#story-overlay .story-bio p,#story-overlay .story-history p,#story-overlay .story-sidebar-bio p{font:400 15px/23px var(--sans)}
#story-overlay .story-experience,#story-overlay .story-company{font:400 15px/23px var(--sans)}
#story-overlay .story-role{font:400 13px/20px var(--sans)}
#story-overlay .story-design-toggle,#story-overlay .story-sidebar-links a,#story-overlay .story-sidebar-links button{font:400 15px/23px var(--sans)}
#story-overlay .story-bio h2,#story-overlay .story-experiences h2,#story-overlay .story-history h2,#story-overlay .story-sidebar h2,#story-overlay .story-bottom h2,#story-overlay .story-date,#story-overlay .story-location{font:400 12px/20px var(--mono);text-transform:uppercase}
#story-overlay #story-close{font-family:var(--sans)}

/* Figma butterfly lockup anchors the left; all navigation controls share the right. */
.shared-navigation .corner-header{align-items:center}
.header-brand{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:11px 0;border-radius:7px;background:transparent;color:#16130e;flex:none}
.header-brand img{display:block;width:21.12px;height:21.12px;flex:none}
.header-brand span{font:400 14px/14px var(--mono);text-transform:uppercase;white-space:nowrap}
.header-brand:focus-visible{outline:2px solid #fd919c;outline-offset:4px}
.corner-top-right>.portfolio-menu{flex:none}
@media(max-width:480px){.shared-navigation .corner-header{gap:8px}.header-brand span{display:none}.corner-top-right{gap:6px}}
:root{--navigation-height:calc(43.12px + 2 * var(--navigation-padding))}
#story-overlay #story-home.about-brand{display:inline-flex;align-items:center;gap:10px;width:auto;height:auto;padding:0;flex:none;color:#fcfcfa}
#story-overlay #story-home.about-brand img{display:block;width:21.12px;height:21.12px;filter:invert(1)}
#story-overlay #story-home.about-brand span{font:400 14px/14px var(--mono);text-transform:uppercase;white-space:nowrap}
/* Give longer About paragraphs an even right edge without stretching the last line. */
#story-overlay .story-history p,#story-overlay .story-bio p{text-align:justify;text-justify:inter-word;hyphens:auto;text-align-last:left}
#story-overlay .about-menu{margin-left:auto;margin-right:16px;background:#1c1c1c;border-color:#ffffff30;color:#fcfcfa}
#story-overlay .about-menu:hover{background:#303030}
#story-overlay .about-menu .menu-return{background:#ffffff12;color:#fcfcfa}
.menu-return .menu-symbol{position:relative;display:block;width:16px;height:16.123px}
.menu-symbol img{position:absolute;left:0;top:0;display:block;width:259.043px;height:261.039px;max-width:none;transform:scale(.06176581);transform-origin:top left}
#story-overlay .about-menu .menu-symbol img{filter:invert(1)}
/* Sidebar font comparison: Lausanne links with the existing layout and hover motion. */

.work-sidebar .sidebar-links nav>a,.work-sidebar .sidebar-links nav>button{font-family:var(--mono);font-size:12px!important;line-height:21px;min-height:23px}
.work-sidebar .sidebar-links nav>a span,.work-sidebar .sidebar-links nav>button span{font-size:inherit!important}
.menu-return .menu-symbol{width:12px;height:12.1px}
.menu-symbol img{transform:scale(.04632436)}
.project-grid{grid-template-rows:repeat(140,minmax(0,1fr));aspect-ratio:8/14}
.panel-ibm{grid-column:2;grid-row:111/141;--project-surface:#000}
.case-editorial{padding:140px 4vw 70px;font-family:'TWK Lausanne',Arial,sans-serif}
.case-editorial-head{display:grid;grid-template-columns:1fr 2fr;gap:30px;padding:30px 0 65px}
.case-editorial h1{font-size:clamp(48px,8vw,112px);line-height:1;margin:0;letter-spacing:-.05em}
.case-editorial-deck{font-size:clamp(27px,4vw,58px);line-height:1.08;margin:0;max-width:850px;letter-spacing:-.035em}
.case-editorial-label{font:12px/20px var(--mono);text-transform:uppercase;margin-bottom:20px}
.case-editorial-film{width:100%;height:80svh;object-fit:contain;background:#399e80;display:block}
.case-editorial-story{display:grid;grid-template-columns:1fr 2fr;gap:40px;padding:90px 0}
.case-editorial-meta{display:grid;align-content:start;gap:28px}.case-editorial-meta p{margin:0;font-size:18px}
.case-editorial-copy{font-size:clamp(22px,2.5vw,34px);line-height:1.4;max-width:850px}.case-editorial-copy p{margin:0 0 30px}
.case-editorial-image{display:block;width:100%;max-height:100svh;object-fit:contain;background:#eeedeb}
@media(max-width:700px){.case-editorial-head,.case-editorial-story{grid-template-columns:1fr}.case-editorial{padding-top:120px}.case-editorial-story{padding:45px 0}.case-editorial-film{height:65svh}}

/* Sidebar follows the command menu's heading and option hierarchy. */
.work-sidebar .sidebar-links{gap:24px;max-width:235px}
.work-sidebar .sidebar-links nav{gap:0}
.work-sidebar .sidebar-links h2{margin:0 10px 6px;font:400 12px/18px 'Departure Mono',monospace;text-transform:uppercase;letter-spacing:0;color:#a0a0a0}
.work-sidebar .sidebar-links nav>a,.work-sidebar .sidebar-links nav>button{min-height:36px;padding:7px 10px;border-radius:10px;font:400 15px/22px 'TWK Lausanne',Arial,sans-serif!important;text-transform:none;background:transparent;color:#191919;transition:background 160ms ease}
.work-sidebar .sidebar-links nav>a:hover,.work-sidebar .sidebar-links nav>button:hover,.work-sidebar .sidebar-links nav>a:focus-visible,.work-sidebar .sidebar-links nav>button:focus-visible{padding-left:10px;background:#f0f0f0;color:#191919}
.work-sidebar .sidebar-links .email-label{font:inherit!important;text-transform:none}

.work-sidebar .sidebar-links h2,#command-palette .command-group{font:400 14px/20px 'Departure Mono',monospace;text-transform:uppercase}
.work-sidebar .sidebar-links nav .sidebar-link-arrow{font:400 14px/20px 'Departure Mono',monospace!important;margin-left:auto;flex:none}
/* Keep sidebar labels flush with the bio, including hover and focus. */
.work-sidebar .sidebar-links h2{margin-left:0;margin-right:0}
.work-sidebar .sidebar-links nav>a,.work-sidebar .sidebar-links nav>button,.work-sidebar .sidebar-links nav>a:hover,.work-sidebar .sidebar-links nav>button:hover,.work-sidebar .sidebar-links nav>a:focus-visible,.work-sidebar .sidebar-links nav>button:focus-visible{padding-left:0;padding-right:0}

.work-sidebar .sidebar-links .sidebar-arrow-glyph{display:inline-block;transition:transform 220ms ease;transform-origin:center}
.work-sidebar .sidebar-links nav>a:is(:hover,:focus-visible) .sidebar-arrow-glyph,.work-sidebar .sidebar-links nav>button:is(:hover,:focus-visible) .sidebar-arrow-glyph{transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){.work-sidebar .sidebar-links .sidebar-arrow-glyph{transition:none}}
.work-sidebar .sidebar-links nav>a,.work-sidebar .sidebar-links nav>button{transition:padding-left 200ms ease,background 160ms ease}
.work-sidebar .sidebar-links nav>a:is(:hover,:focus-visible),.work-sidebar .sidebar-links nav>button:is(:hover,:focus-visible){padding-left:6px}
@media(prefers-reduced-motion:reduce){.work-sidebar .sidebar-links nav>a,.work-sidebar .sidebar-links nav>button{transition:none}}

/* Thrive case study — Figma 341:112 */
.thrive-template{width:min(909px,calc(100% - 48px));margin:0 auto;padding:120px 0 64px;display:flex;flex-direction:column;align-items:center;gap:32px;font:400 15px/23px 'TWK Lausanne',Arial,sans-serif;color:#5f5855}
.thrive-template .thrive-text{width:min(700px,100%)}
.thrive-media-slot{width:100%;height:auto;aspect-ratio:909/570;background:#d7d5d2;border-radius:28px}
.thrive-template-header h1{margin:0;font:500 27px/50px 'TWK Lausanne Headline','TWK Lausanne',Arial,sans-serif;letter-spacing:0;color:#000}
.thrive-facts{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:40px;margin:0;font:400 15px/23px 'TWK Lausanne',Arial,sans-serif;white-space:nowrap}
.thrive-facts div{display:flex;gap:5px}.thrive-facts dt,.thrive-facts dd{margin:0}.thrive-facts dd{color:#15130f}
.thrive-rule{height:0;position:relative}.thrive-rule img{position:absolute;left:0;top:-1.5px;max-width:100%}
.thrive-overview{display:flex;flex-direction:column;align-items:flex-start;gap:20px}.thrive-overview p{margin:0}.thrive-overview strong{font-weight:700}.thrive-overview ul{padding-left:22.5px;margin:0;display:grid;gap:10px;list-style:disc}
.thrive-read-more{display:flex;align-items:center;justify-content:center;gap:15px;padding:12px;border:1px solid #000;border-radius:28px;color:#000;font:400 15px/23px 'TWK Lausanne',Arial,sans-serif;background:transparent}.thrive-read-more img{width:19.2px;height:19.2px;max-width:none}.thrive-read-more:hover{background:#eeedeb}
.thrive-media-gallery{width:100%;display:flex;flex-direction:column;gap:50px;margin-top:18px;scroll-margin-top:110px}.thrive-media-pair{display:grid;grid-template-columns:1fr 1fr;gap:50px}.thrive-media-pair .thrive-media-slot{aspect-ratio:429.5/430}
.thrive-takeaways{margin-top:18px;display:flex;flex-direction:column;gap:20px}.thrive-takeaways h2{font:400 15px/23px 'TWK Lausanne',Arial,sans-serif;margin:0}.thrive-takeaway-columns{display:grid;grid-template-columns:1fr 1fr;gap:50px}.thrive-takeaway-columns h3{font:700 15px/23px 'TWK Lausanne',Arial,sans-serif;color:#15130f;margin:0 0 10px}.thrive-takeaway-columns p{font:400 14px/20px 'TWK Lausanne',Arial,sans-serif;letter-spacing:-.1px;color:#000;margin:0}
@media(max-width:800px){.thrive-facts{flex-wrap:wrap;justify-content:flex-start;gap:8px 20px;padding:8px 0}.thrive-template-header h1{font-size:24px;line-height:32px}.thrive-media-pair,.thrive-takeaway-columns{gap:24px}}
@media(max-width:500px){.thrive-template{width:calc(100% - 32px);gap:24px}.thrive-media-slot{border-radius:18px}.thrive-media-gallery{gap:24px}.thrive-takeaway-columns{grid-template-columns:1fr}}
#case-study .thrive-template #case-title{font:500 27px/50px 'TWK Lausanne Headline','TWK Lausanne',Arial,sans-serif;letter-spacing:0;margin:0;color:#000}
@media(max-width:800px){#case-study .thrive-template #case-title{font-size:24px;line-height:32px}}
.thrive-takeaway-columns p{color:#5F5855}

.thrive-media-gallery>.thrive-media-slot,.thrive-phone-frame{background:#efefef}
.thrive-phone-frame{position:relative;height:500px;min-width:0;border-radius:28px;overflow:hidden}
.thrive-phone{position:absolute;display:block;max-width:none;object-fit:cover;left:50%;top:63px;transform:translateX(-50%);width:245.054px;height:501px}
.thrive-phone-focus{top:64px;left:calc(50% - .28px);width:244.937px;height:516px}
.thrive-phone-name{left:calc(50% - .22px)}
.thrive-phone-notifications{left:calc(50% + .28px)}
.thrive-phone-crop{position:absolute;left:calc(50% + .25px);top:63px;transform:translateX(-50%);width:245px;height:502px;overflow:hidden}
.thrive-phone-crop img{display:block;position:absolute;left:0;top:0;width:110.27%;height:100%;max-width:none}
@media(max-width:650px){.thrive-phone-frame{height:auto;aspect-ratio:429.5/500;container-type:inline-size}.thrive-phone{top:14.67cqw;width:57.06cqw;height:116.65cqw}.thrive-phone-focus{top:14.9cqw;width:57.03cqw;height:120.14cqw}.thrive-phone-crop{top:14.67cqw;width:57.04cqw;height:116.88cqw}}

.thrive-pitch-cover{overflow:hidden}.thrive-pitch-cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 57%}
.thrive-pitch-cover{position:relative}.thrive-pitch-cover img{position:absolute;inset:0}

.thrive-website-frame{position:relative;overflow:hidden}.thrive-website-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thrive-brand-row{display:flex;gap:clamp(8px,1.1vw,16px);width:100%;margin-top:18px}.thrive-brand-row img{display:block;min-width:0;width:calc((100% - 64px)/5);flex:1;aspect-ratio:860/1076;object-fit:cover;border-radius:12px}
.case-dock-tray > button[data-dock-project] img{transition:transform 500ms cubic-bezier(.16,1,.3,1),filter 400ms ease;transform-origin:50% 80%}
.case-dock-tray > button[data-dock-project]:is(:hover,:focus-visible) img{transform:translateY(-5px) scale(1.2)}
.case-dock-tray > button[data-dock-project].dock-neighbor img{transform:translateY(-2px) scale(1.07)}
.case-dock-caption{transition:opacity 200ms ease,transform 450ms cubic-bezier(.16,1,.3,1),visibility 200ms}
.case-dock-tray{transition:box-shadow 450ms ease,background 450ms ease}.case-dock-tray:hover{box-shadow:0 12px 40px #2423210a}
@media(max-width:600px){.case-dock-tray{gap:10px;padding:12px}.case-dock-tray>button[data-dock-project],.case-dock-tray>button[data-dock-project] img{width:36px;height:23px}.thrive-brand-row img{border-radius:6px}}
@media(prefers-reduced-motion:reduce){.case-dock-tray > button[data-dock-project] img,.case-dock-caption,.case-dock-tray{transition:none}}
/* Crop the screenshot's baked-in browser edge and paper margin. */
.thrive-website-frame img{transform:scale(1.035);transform-origin:center}
/* Give the identity boards the same two-column scale as the product gallery. */
.thrive-brand-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:50px;width:100%;margin-top:18px}
.thrive-brand-row img{width:100%;min-width:0;aspect-ratio:860/1076;object-fit:cover;border-radius:28px}
@media(max-width:800px){.thrive-brand-row{gap:24px}}
@media(max-width:500px){.thrive-brand-row img{border-radius:18px}}
/* Full story: command-menu surface with a spacious editorial reading layout. */
#case-study .thrive-story-modal{box-sizing:border-box;width:min(1000px,calc(100vw - 48px));max-width:none;height:min(800px,calc(100dvh - 64px));max-height:none;margin:auto;padding:0;border:0;border-radius:24px;background:#fff;color:#302e2c;box-shadow:0 24px 100px #0003;overflow:hidden;font:400 18px/1.5 'TWK Lausanne',Arial,sans-serif}
.thrive-story-modal::backdrop{background:#0005;backdrop-filter:blur(8px)}
.thrive-story-modal>header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 36px;background:#fff}
.thrive-story-modal h2,.thrive-story-modal h3,.thrive-story-modal h4,.thrive-story-close{font:400 14px/22px 'Departure Mono',monospace;text-transform:uppercase;letter-spacing:0}
.thrive-story-modal h2{margin:0;color:#96928e}.thrive-story-close{display:flex;align-items:center;gap:12px;padding:5px 0;color:#302e2c}.thrive-story-close span{display:inline-block;font:400 24px/24px 'TWK Lausanne',Arial,sans-serif;transition:transform 250ms ease}.thrive-story-close:hover span{transform:rotate(90deg)}
.thrive-story-body{height:calc(100% - 88px);box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;padding:8px 36px 40px}
.thrive-story-body p{margin:0 0 22px;font:400 18px/1.5 'TWK Lausanne',Arial,sans-serif}.thrive-story-intro{padding:0 0 30px}.thrive-story-intro ul{padding-left:22px;margin:0;display:grid;gap:8px;list-style:disc}
.thrive-story-body section{display:grid;grid-template-columns:180px minmax(0,1fr);gap:28px;border-top:1px solid #cbc8c5;padding:28px 0}.thrive-story-body h3{margin:0;color:#96928e}.thrive-story-body section p:last-child{margin-bottom:0}.thrive-story-body h4{margin:0 0 10px;color:#5f5855}
@media(max-width:650px){#case-study .thrive-story-modal{width:calc(100vw - 24px);height:calc(100dvh - 32px);border-radius:18px}.thrive-story-modal>header{padding:20px}.thrive-story-body{padding:8px 20px 28px;height:calc(100% - 74px)}.thrive-story-body section{grid-template-columns:1fr;gap:18px}.thrive-story-body p{font-size:16px}}

.portfolio-menu .menu-enter{font:400 16px/20px 'Departure Mono',monospace;color:inherit;background:none;padding:0}
.header-brand span,#story-overlay #story-home.about-brand span{font-size:11px;line-height:16px}

#sidebar-copy-email,#sidebar-copy-email .email-label{text-transform:none!important}

.header-brand span,#story-overlay #story-home.about-brand span{position:relative;top:1px}

.spatial-depth-ruler{position:absolute;z-index:4;right:18px;top:50%;transform:translateY(-50%);width:112px;height:clamp(220px,40vh,360px);color:#171717;user-select:none;pointer-events:auto}
.depth-ticks{position:absolute;inset:0 0 0 auto;width:33px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;pointer-events:none}
.depth-ticks i{display:block;width:9px;height:1px;background:currentColor;opacity:.18;transition:width 180ms ease,opacity 180ms ease}
.spatial-depth-ruler .depth-label{position:absolute;right:43px;font:400 10px/1 'Departure Mono',monospace;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity 180ms ease;pointer-events:none}
.depth-max{top:0;transform:translateY(-50%)}.depth-mid{top:50%;transform:translateY(-50%)}.depth-min{bottom:0;transform:translateY(50%)}
.spatial-depth-range{position:absolute;inset:-8px -10px;width:calc(100% + 20px);height:calc(100% + 16px);margin:0;writing-mode:vertical-lr;direction:rtl;opacity:0;cursor:ns-resize;touch-action:none}
.spatial-depth-ruler:has(input:focus-visible){outline:1px solid #8885;outline-offset:8px;border-radius:4px}
@media(max-width:700px){.spatial-depth-ruler{right:10px;width:88px;height:clamp(180px,32vh,260px)}.spatial-depth-ruler .depth-label{font-size:9px;right:37px}}
@media(prefers-reduced-motion:reduce){.depth-ticks i,.spatial-depth-ruler .depth-label{transition:none}}

.spatial-depth-ruler{z-index:300;width:145px}
.mobile-navigation-toggle{display:none}
#mobile-navigation-drawer{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 40px);box-sizing:border-box;padding:24px;border:1px solid #16130e1c;border-radius:18px;background:var(--paper);color:#15130f;overflow:auto;box-shadow:0 20px 70px #0002}
#mobile-navigation-drawer::backdrop{background:#0004;backdrop-filter:blur(10px)}
#mobile-navigation-drawer>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;font:400 11px/20px var(--mono)}
#mobile-navigation-drawer>header button{font:inherit;padding:8px}
.mobile-navigation-body{display:grid;gap:28px}.mobile-navigation-body .corner-views{display:flex;position:relative;gap:8px}.mobile-navigation-body .view-indicator{display:none}.mobile-navigation-body .nav-control{flex:1;padding:12px;border:1px solid #16130e1c;border-radius:8px;font:11px/16px var(--mono)}.mobile-navigation-body .nav-control[aria-pressed=true]{background:#eeedeb}
#mobile-navigation-drawer .sidebar-links{display:grid;gap:24px}#mobile-navigation-drawer nav{display:grid;gap:4px}#mobile-navigation-drawer h2{font:400 12px/20px var(--mono);text-transform:uppercase;color:#96928e;margin:0 0 8px}#mobile-navigation-drawer .sidebar-links a,#mobile-navigation-drawer .sidebar-links button{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font:400 17px/24px 'TWK Lausanne',Arial,sans-serif!important;text-transform:none;color:#15130f}#mobile-navigation-drawer .email-label{text-transform:none!important}#mobile-navigation-drawer .sidebar-link-arrow{font:12px/20px var(--mono)!important}
@media(max-width:700px){
 .shared-navigation .corner-header{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px}
 .corner-top-right{margin-left:auto;gap:8px;flex:none}.portfolio-menu .menu-enter,.portfolio-menu .menu-return{display:none}
 .mobile-navigation-toggle{display:grid;place-items:center;width:38px;height:38px;padding:8px;border:1px solid #16130e1c;border-radius:9px;background:var(--paper);color:#16130e}
 .work-layout{display:block}.work-sidebar{display:flex!important;position:static;height:auto;min-height:0;margin-bottom:24px;overflow:visible}
 .work-sidebar .sidebar-bio{max-width:100%;width:100%;font-size:16px;line-height:24px}.work-sidebar .work-copyright{display:none}
 .project-grid{display:flex!important;flex-direction:column;gap:28px;aspect-ratio:auto!important;grid-template-rows:none!important;margin:0 0 80px;padding:0;height:auto}
 .project-grid[hidden]{display:none!important}
 .project-grid .project-panel{display:block;position:relative;grid-area:auto!important;width:100%;height:auto;min-height:0;padding:0;overflow:visible}
 .project-grid .project-image-space,.project-grid .project-panel:is(:hover,:focus-within) .project-image-space{position:relative;inset:auto;width:100%;height:auto!important;aspect-ratio:4/3;border-radius:8px}
 .project-grid .panel-thrive .project-image-space,.project-grid .panel-tbd .project-image-space,.project-grid .panel-aven .project-image-space{aspect-ratio:4/5}
 .project-grid .project-summary{position:relative;inset:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;width:100%;height:auto;min-height:56px;padding:12px 24px 0 0;opacity:1!important;transition:none}
 .project-grid .project-summary h2,.project-grid .project-summary .project-description{font:400 17px/23px 'TWK Lausanne',Arial,sans-serif;white-space:normal;text-align:left;overflow:visible;display:block}
 .project-grid .project-launch{inset:0;border-radius:8px}
 .project-grid .project-preview-control,.project-grid .project-panel:is(:hover,:focus-within) .project-preview-control{bottom:80px;right:14px}
 .intro-landing{position:relative}.header-brand{padding:8px 0}.header-brand span{display:inline;font-size:11px}
}

@media(max-width:700px){.intro-landing .hero,.intro-cinematic .intro-landing .hero{height:45svh;min-height:0}}
@media(max-width:700px){.work-sidebar .sidebar-bio>a[href="#story"]{display:none}}

.mobile-project-heading{display:none}
@media(max-width:700px){.mobile-project-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 -12px;color:#77736f}.mobile-project-heading h2,.mobile-project-heading>span{margin:0;font:400 11px/20px 'Departure Mono',monospace;text-transform:uppercase;letter-spacing:0}.mobile-project-heading>span{margin-left:auto;text-align:right}}
@media(max-width:700px){.mobile-project-heading,.mobile-project-heading h2,.mobile-project-heading>span{color:#16130e}}

@media(max-width:700px){.intro-landing .intro-copy{width:calc(100% - 32px)}.intro-landing .hero #intro-headline{font-size:clamp(16px,4.8vw,30px);line-height:1.2}.intro-landing .hero #intro-headline .headline-line{display:block;white-space:nowrap}}

.intro-landing .hero #intro-headline .headline-line{display:block;white-space:nowrap}
@media(max-width:700px){.work-sidebar{display:none!important}.shared-navigation{position:relative;top:auto}.intro-landing{padding-top:0}}
@media(max-width:700px){.shared-navigation{padding-block:12px}.intro-landing,.intro-cinematic .intro-landing{padding-top:0}}
@media(max-width:700px){.mobile-project-heading{margin:0;padding:12px 0}.project-grid{row-gap:28px}.mobile-project-heading+ .project-panel{margin-top:-16px}}
@media(max-width:700px){.intro-landing,.intro-cinematic .intro-landing{padding-bottom:0}.navigation-study{padding-top:0}.mobile-project-heading{padding-block:24px;margin:0}.mobile-project-heading+.project-panel{margin-top:-28px}}

.intro-cinematic .intro-skip,.intro-skip{display:none!important}
@media(max-width:700px),(hover:none),(pointer:coarse){.project-cursor-labels{display:none!important}}
@media(max-width:700px){#mobile-navigation-drawer .corner-views{display:none}}
@media(max-width:700px){#command-palette #close-search.command-floating-close{display:none!important}}
@media(max-width:700px){.mobile-navigation-toggle{display:none}}

@media(min-width:701px) and (hover:hover){.panel-notion{grid-column:2;grid-row:1/31}.panel-sullivan{grid-column:1;grid-row:51/81}.panel-aven{grid-column:2;grid-row:31/81}.panel-apron{grid-column:1;grid-row:81/131}}

:root{--paper:#fffefe}body{background:#fffefe}
@media(min-width:701px) and (hover:hover){.panel-sullivan{grid-column:2;grid-row:1/31}.panel-notion{grid-column:1;grid-row:51/81}}
/* Preserve Sullivan's top and left edges across every card size and state. */
.panel-sullivan .project-image-space img,.panel-sullivan .project-image-space video{object-position:left top;transform-origin:left top}

@font-face{font-family:'TWK Lausanne Headline';src:url('./local-fonts/TWKLausannePan-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
.intro-landing .hero #intro-headline{font-weight:700}

@font-face{font-family:'TWK Lausanne Headline';src:url('./local-fonts/TWKLausannePan-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
.intro-landing .hero #intro-headline{font-weight:600}

.case-placeholder{display:grid;place-items:center;color:#78736f;font:400 12px/20px 'Departure Mono',monospace;text-transform:uppercase;text-align:center;padding:16px;box-sizing:border-box;background:#efefef;border-radius:28px}.sullivan-placeholder-grid>div{aspect-ratio:860/1076}
/* Case-study media uses the same corner radius as homepage project cards. */
.thrive-template .thrive-media-slot,.thrive-template .thrive-phone-frame,.thrive-template .thrive-brand-row img,.thrive-template .case-placeholder{border-radius:7px}
@media(max-width:700px){.thrive-template .thrive-media-slot,.thrive-template .thrive-phone-frame,.thrive-template .thrive-brand-row img,.thrive-template .case-placeholder{border-radius:8px}}

.thrive-identity-frame>img{display:block;width:100%;height:100%;object-fit:cover}
/* Continuous iOS-style corner treatment; 1.6 approximates 60% smoothing. */
@supports(corner-shape:superellipse(1.6)){
 .intro-landing .hero,.project-image-space,.project-launch,.spatial-node-art,.spatial-gallery-art,.spatial-gallery-thumb,.case-cover-media,.thrive-template .thrive-media-slot,.thrive-template .thrive-phone-frame,.thrive-template .thrive-brand-row img,.thrive-template .case-placeholder{corner-shape:superellipse(1.6)}
}
.thrive-identity-frame{overflow:hidden}
#case-study .thrive-template:not(.sullivan-template) .thrive-overview>p{font-size:15px;line-height:23px}
#case-study .thrive-template:not(.sullivan-template) .thrive-read-more{border-width:2px}
#case-study .thrive-template:not(.sullivan-template) .thrive-overview>p,#case-study .thrive-template:not(.sullivan-template) .thrive-overview>ul{color:#000}
#case-study .sullivan-template .thrive-overview>p{font-size:15px;line-height:23px;color:#000}
#case-study .sullivan-template .thrive-overview>ul{color:#000}
#case-study .sullivan-template .thrive-read-more{border-width:2px}
#case-study .thrive-story-modal .thrive-story-body,#case-study .thrive-story-modal .thrive-story-body p,#case-study .thrive-story-modal .thrive-story-body li{font-size:15px;line-height:23px}

#case-study .thrive-template .thrive-overview{gap:30px}

.project-cursor-labels.is-obstructed{visibility:hidden}

.shared-navigation .corner-header .header-brand span,
.shared-navigation .corner-header .portfolio-menu,
.shared-navigation .corner-header .nav-control{font-size:14px}

/* Consistent homepage Departure Mono scale. */
.shared-navigation .corner-header .header-brand span,
.shared-navigation .corner-header .portfolio-menu,
.shared-navigation .corner-header .menu-enter,
.shared-navigation .corner-header .nav-control,
.work-sidebar .sidebar-links h2,
.work-sidebar .sidebar-links nav .sidebar-link-arrow,
.project-cursor-clip>span,
.annotation-launcher,
.mobile-project-heading h2,
.mobile-project-heading>span,
.spatial-depth-ruler .depth-label{font-size:13px!important}

.thrive-read-more{position:relative;isolation:isolate;overflow:hidden;transition:color 280ms ease;background:transparent}
.thrive-read-more::before{content:"";position:absolute;inset:0;z-index:-1;background:#160900;border-radius:inherit;transform:translateY(102%);transition:transform 420ms cubic-bezier(.22,1,.36,1)}
.thrive-read-more img{transition:filter 280ms ease}
.thrive-read-more:hover,.thrive-read-more:focus-visible{background:transparent;color:#fff}
.thrive-read-more:hover::before,.thrive-read-more:focus-visible::before{transform:translateY(0)}
.thrive-read-more:hover img,.thrive-read-more:focus-visible img{filter:brightness(0) invert(1)}
@media(prefers-reduced-motion:reduce){.thrive-read-more,.thrive-read-more::before,.thrive-read-more img{transition:none}}

.thrive-read-more{transition:color 180ms ease,border-color 180ms ease}
.thrive-read-more::before{inset:-3px;border-radius:0;transform:translateY(calc(100% + 4px));transition:transform 300ms cubic-bezier(.2,.8,.2,1);will-change:transform}
.thrive-read-more img{transition:filter 180ms ease}
.thrive-read-more:hover,.thrive-read-more:focus-visible{border-color:#160900;background:#160900;transition:color 180ms ease,border-color 180ms ease,background-color 0s 280ms}
.thrive-read-more:hover::before,.thrive-read-more:focus-visible::before{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.thrive-read-more,.thrive-read-more::before,.thrive-read-more img{transition:none}}

/* The expand arrow gently recedes as the button fills. */
.thrive-read-more img{transform:scale(1);transform-origin:center;transition:transform 280ms cubic-bezier(.2,.8,.2,1),filter 180ms ease;will-change:transform}
.thrive-read-more:hover img,.thrive-read-more:focus-visible img{transform:scale(.78);filter:brightness(0) invert(1)}
@media(prefers-reduced-motion:reduce){.thrive-read-more img{transition:none}}

#story-overlay #story-home.about-brand span,
#story-overlay .about-menu,
#story-overlay .about-menu .menu-enter{font-size:13px!important}

/* Broad, continuous media corners matching the supplied frame reference. */
#case-study .thrive-template .thrive-media-slot,
#case-study .thrive-template .thrive-phone-frame,
#case-study .thrive-template .thrive-brand-row img,
#case-study .thrive-template .case-placeholder,
#case-study .case-cover-media{border-radius:28px;overflow:hidden}
@supports(corner-shape:superellipse(1.6)){
 #case-study .thrive-template .thrive-media-slot,
 #case-study .thrive-template .thrive-phone-frame,
 #case-study .thrive-template .thrive-brand-row img,
 #case-study .thrive-template .case-placeholder,
 #case-study .case-cover-media{corner-shape:superellipse(1.6)}
}
@media(max-width:700px){
 #case-study .thrive-template .thrive-media-slot,
 #case-study .thrive-template .thrive-phone-frame,
 #case-study .thrive-template .thrive-brand-row img,
 #case-study .thrive-template .case-placeholder,
 #case-study .case-cover-media{border-radius:20px}
}

.project-grid .project-image-space,
.project-grid .project-launch{border-radius:7px;overflow:hidden}
@supports(corner-shape:superellipse(1.6)){
 .project-grid .project-image-space,
 .project-grid .project-launch{corner-shape:superellipse(1.6)}
}
@media(max-width:700px){
 .project-grid .project-image-space,
 .project-grid .project-launch{border-radius:8px}
}

@media(min-width:701px){
 #case-study .thrive-template .thrive-media-slot,
 #case-study .thrive-template .thrive-phone-frame,
 #case-study .thrive-template .thrive-brand-row img,
 #case-study .thrive-template .case-placeholder,
 #case-study .case-cover-media{border-radius:20px}
}

/* Match media gutters to the spacing between case-study sections. */
.thrive-template .thrive-media-pair{gap:32px}
@media(max-width:500px){.thrive-template .thrive-media-pair{gap:24px}}

.sullivan-template .thrive-media-gallery{gap:32px;margin-top:0}
.sullivan-template .sullivan-placeholder-grid{gap:32px;margin-top:0}
@media(max-width:500px){
 .sullivan-template .thrive-media-gallery,
 .sullivan-template .sullivan-placeholder-grid{gap:24px}
}

.sullivan-story-modal .sullivan-story-thanks{color:#5f5855;border-top:1px solid #ddd;padding-top:28px;margin-top:28px}

/* A calmer reading rhythm across portfolio case studies. */
#case-study .thrive-template .thrive-overview>p,
#case-study .thrive-template .thrive-overview>ul,
#case-study .thrive-template .thrive-takeaway-columns p,
.thrive-story-modal .thrive-story-body,
.thrive-story-modal .thrive-story-body p,
.thrive-story-modal .thrive-story-body li{
 font-family:'TWK Lausanne',Arial,sans-serif;
 font-size:15px;
 font-weight:400;
 line-height:25px;
 letter-spacing:0;
}
#case-study .thrive-template .thrive-takeaway-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
@media(max-width:500px){#case-study .thrive-template .thrive-takeaway-columns{grid-template-columns:1fr;gap:24px}}
#case-study .thrive-template .thrive-takeaway-columns h3{
 font:500 20px/28px 'TWK Lausanne',Arial,sans-serif;
 letter-spacing:0;
 color:#000;
 margin:0 0 16px;
}
#case-study .thrive-template .thrive-takeaway-columns p{color:#5f5855}
.thrive-story-modal .thrive-story-body p{margin-bottom:28px}
.thrive-story-modal .thrive-story-body p:last-child{margin-bottom:0}
.sullivan-story-modal .sullivan-story-thanks p{line-height:25.5px;margin-bottom:32px}
.sullivan-story-modal .sullivan-story-thanks p:last-child{margin-bottom:0}

.sullivan-demo-frame video{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}

.sullivan-cover{position:relative}.sullivan-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 90%}

.case-project-dock{translate:0 0;opacity:1;transition:translate 300ms cubic-bezier(.22,1,.36,1),opacity 180ms ease}
.case-project-dock.is-scroll-hidden{translate:0 calc(-100% - 40px);opacity:0;pointer-events:none}
.case-project-dock:focus-within{translate:0 0;opacity:1;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.case-project-dock{transition:none}}

.case-narrative{display:flex;flex-direction:column;gap:20px;padding:16px 0}
#case-study .case-narrative h2{margin:0;font:500 20px/28px 'TWK Lausanne',Arial,sans-serif;color:#000;letter-spacing:0}
#case-study .case-narrative p,#case-study .case-narrative li{margin:0;font:400 15px/25px 'TWK Lausanne',Arial,sans-serif;letter-spacing:0;color:#5f5855}
.case-narrative ul{margin:0;padding-left:22px;display:grid;gap:12px}
.case-narrative blockquote{margin:4px 0;padding:0 0 0 20px;border-left:2px solid #16130e;font:500 20px/30px 'TWK Lausanne',Arial,sans-serif;color:#16130e}

#case-study .thrive-template .case-narrative>p{
 width:100%;max-width:700px;white-space:normal;text-wrap:wrap;word-break:normal;overflow-wrap:normal;hyphens:none;
}

.sullivan-tradeoff figure{margin:4px 0;width:100%;border-radius:20px;overflow:hidden}
.sullivan-tradeoff figure img{display:block;width:100%;height:auto}
#case-study .sullivan-tradeoff blockquote{font-size:18px;line-height:28px;font-weight:400;border-left-color:#ccc}
@supports(corner-shape:superellipse(1.6)){.sullivan-tradeoff figure{corner-shape:superellipse(1.6)}}

#case-study .sullivan-tradeoff{width:100%;max-width:none}
#case-study .sullivan-tradeoff>h2,#case-study .sullivan-tradeoff>p{width:min(700px,100%);align-self:center}
.sullivan-tradeoff figure{background:#efefef}

#case-study .thrive-template .sullivan-tradeoff>p,
#case-study .thrive-template .sullivan-tradeoff>h2{width:min(700px,100%);max-width:700px;align-self:center;hyphens:none}

#case-study .sullivan-architecture{margin:0;aspect-ratio:2048/742;height:auto}.sullivan-architecture img{display:block;width:100%;height:auto}

#case-study .sullivan-template .thrive-overview>p,
#case-study .sullivan-template .thrive-overview>ul{color:#5f5855}

.sullivan-dashboard-frame{position:relative}.sullivan-dashboard-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}

/* Phone case-study layout: contained navigation, generous reading insets. */
@media(max-width:700px){
 .annotation-launcher,#annotate-feedback{display:none!important}
 #case-study{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;overflow:hidden}
 #case-study .case-scroll{padding:0;height:100%;overflow-x:hidden;overflow-y:auto}
 #case-study .thrive-template{width:calc(100% - 32px);padding:100px 0 40px;gap:28px}
 #case-study .thrive-template .thrive-text{width:calc(100% - 24px);max-width:100%}
 #case-study .thrive-template .thrive-template-header h1{font-size:25px;line-height:32px;letter-spacing:-.35px}
 #case-study .thrive-facts{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;white-space:normal;padding:0;margin-top:20px;font-size:13px;line-height:20px}
 #case-study .thrive-facts div{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
 #case-study .thrive-facts dt{color:#78736f}
 #case-study .thrive-template .thrive-overview{gap:24px}
 #case-study .thrive-template .thrive-overview>p,#case-study .thrive-template .thrive-overview>ul,
 #case-study .case-narrative p,#case-study .case-narrative li,
 #case-study .thrive-template .thrive-takeaway-columns p{font-size:15px;line-height:24px;font-weight:400}
 #case-study .case-narrative{gap:16px;padding:8px 0}
 #case-study .case-narrative h2,#case-study .thrive-template .thrive-takeaway-columns h3{font-size:20px;line-height:27px}
 #case-study .case-narrative blockquote{font-size:18px;line-height:27px;padding-left:14px}
 #case-study .thrive-template .thrive-media-pair{grid-template-columns:1fr;gap:20px;width:100%}
 #case-study .thrive-phone-frame{height:440px}
 #case-study .thrive-template .thrive-takeaway-columns{grid-template-columns:1fr;gap:28px}
 #case-study .sullivan-tradeoff{width:100%;max-width:100%}
 #case-study .thrive-template .sullivan-tradeoff>p,#case-study .thrive-template .sullivan-tradeoff>h2{width:calc(100% - 24px);max-width:100%}
 .case-project-dock{left:50%;top:12px;width:calc(100% - 88px);max-width:460px}
 .case-project-dock .case-dock-tray{width:100%;height:60px;overflow-x:auto;overflow-y:hidden;gap:8px;padding:10px 12px;scrollbar-width:none;border-radius:14px;overscroll-behavior-x:contain}
 .case-project-dock .case-dock-tray::-webkit-scrollbar{display:none}
 .case-dock-tray>button[data-dock-project]{width:54px;height:38px;flex:none}
 .case-dock-tray>button[data-dock-project]:hover,.case-dock-tray>button.dock-neighbor{transform:none}
 .case-dock-caption{display:none!important}
 .case-project-dock .case-dock-close{right:calc(100% + 6px);top:12px;width:34px;height:34px}
 .thrive-story-modal{width:calc(100vw - 24px);max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px)}
 .thrive-story-modal .thrive-story-body{padding:8px 20px 28px}
 .thrive-story-modal .thrive-story-body section{grid-template-columns:1fr;gap:16px}
 .thrive-story-modal .thrive-story-body p,.thrive-story-modal .thrive-story-body li{font-size:15px;line-height:24px}
}

.case-mobile-header,.case-mobile-panel{display:none}
@media(max-width:700px){
 #case-study .case-project-dock{display:none}
 .case-mobile-header{display:flex;position:absolute;inset:0 0 auto;z-index:20;height:76px;padding:16px 22px;align-items:center;justify-content:space-between;background:rgba(255,254,254,.94);backdrop-filter:blur(18px)}
 .case-mobile-header button{border:0;background:none;color:#171717;padding:8px;cursor:pointer}
 .case-mobile-header [data-case-home]{font-family:'Departure Mono',monospace;font-size:13px}
 .case-mobile-header svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.25;display:block}
 .case-mobile-panel[open]{display:block}
 .case-mobile-panel{position:fixed;inset:12px 12px auto;margin:0;width:calc(100% - 24px);max-width:none;max-height:calc(100dvh - 24px);padding:0;border:1px solid rgba(255,255,255,.5);border-radius:26px;background:rgba(250,250,250,.96);color:#171717;box-shadow:0 24px 80px #0002;overflow:auto;font-family:'TWK Lausanne',sans-serif}
 .case-mobile-panel::backdrop{background:#20202855;backdrop-filter:blur(10px)}
 .case-mobile-panel>header{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;gap:20px}
 .case-mobile-panel>header span{font-family:'Departure Mono',monospace;font-size:13px}
 .case-mobile-panel button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
 .case-mobile-panel>header button{font-size:28px;width:36px;height:36px;padding:0;line-height:1;font-weight:300}
 .case-mobile-projects{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:24px 28px 34px;scrollbar-width:none}
 .case-mobile-projects button{flex:0 0 65%;min-width:0;scroll-snap-align:center;padding:0}
 .case-mobile-projects img{width:100%;height:155px;object-fit:contain;border-radius:10px;filter:drop-shadow(0 8px 8px #0002)}
 .case-mobile-projects span{display:block;text-align:center;margin-top:24px;font-size:16px;line-height:1.4}
 .case-mobile-links{padding:18px 26px}
 .case-mobile-links button{display:block;width:100%;text-align:center;border-bottom:1px solid #0002;padding:20px 0;font-size:20px}
 .case-mobile-panel>footer{padding:24px 26px 30px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:13px}
}
@media(max-width:700px){
 .case-mobile-header .case-mobile-brand,.case-mobile-panel .case-mobile-brand{display:flex;align-items:center;justify-content:center;gap:9px;font-family:'Departure Mono',monospace;font-size:13px;white-space:nowrap}
 .case-mobile-icon{width:26px;height:28px;display:block;object-fit:contain}
 .case-mobile-panel{background:linear-gradient(145deg,rgba(250,250,250,.87),rgba(218,222,233,.82));backdrop-filter:blur(30px) saturate(1.15);-webkit-backdrop-filter:blur(30px) saturate(1.15)}
 .case-mobile-panel::backdrop{background:rgba(60,63,73,.25);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
 .case-mobile-panel>header button{display:flex;align-items:center;justify-content:center}
 .case-mobile-panel>footer>div{display:flex;gap:16px}
 .case-mobile-panel a{color:inherit;text-decoration:none}
 .case-mobile-projects{touch-action:pan-x;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-padding:28px;padding-top:35px;padding-bottom:40px;min-height:290px}
 .case-mobile-projects button{flex-basis:62%}
 .case-mobile-projects img{height:170px}
 .case-mobile-links{padding-top:20px;padding-bottom:8px}
}
@media(max-width:700px){
 .case-mobile-panel{box-shadow:0 22px 38px rgba(25,31,47,.25),0 5px 12px rgba(25,31,47,.08)}
 .case-mobile-panel::backdrop{background:linear-gradient(to bottom,rgba(50,55,68,.16),rgba(50,55,68,.08) 42%,transparent 70%);backdrop-filter:none;-webkit-backdrop-filter:none}
 .case-mobile-panel::after{content:'';position:fixed;pointer-events:none;z-index:-1;left:-12px;right:-12px;top:0;height:calc(100% + 180px);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);mask-image:linear-gradient(#000 0%,#000 55%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0%,#000 55%,transparent 100%)}
 .case-mobile-projects{align-items:start;min-height:0;padding:28px 28px 36px;gap:24px}
 .case-mobile-projects button{flex:0 0 65%;display:flex;flex-direction:column;align-items:stretch}
 .case-mobile-projects img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:6px;box-shadow:0 10px 20px #0002;filter:none}
 .case-mobile-projects span{margin-top:28px;font-size:16px;font-weight:400}
}
@media(max-width:700px){
 .case-mobile-panel::after{content:none}
 .case-mobile-panel::backdrop{background:rgba(50,55,68,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);mask-image:linear-gradient(to bottom,#000 0px,#000 280px,transparent 600px);-webkit-mask-image:linear-gradient(to bottom,#000 0px,#000 280px,transparent 600px)}
}
@media(max-width:700px){
 .case-mobile-panel::backdrop{mask-image:linear-gradient(to bottom,#000 0px,#000 var(--panel-bottom,320px),transparent calc(var(--panel-bottom,320px) + 40dvh));-webkit-mask-image:linear-gradient(to bottom,#000 0px,#000 var(--panel-bottom,320px),transparent calc(var(--panel-bottom,320px) + 40dvh))}
}
@media(max-width:700px){
 .case-mobile-panel::backdrop{
  background:rgba(215,218,225,.14);
  backdrop-filter:blur(40px);
  -webkit-backdrop-filter:blur(40px);
  mask-image:linear-gradient(to bottom,#000 0px,#000 calc(var(--panel-bottom,320px) + 18dvh),transparent calc(var(--panel-bottom,320px) + 40dvh));
  -webkit-mask-image:linear-gradient(to bottom,#000 0px,#000 calc(var(--panel-bottom,320px) + 18dvh),transparent calc(var(--panel-bottom,320px) + 40dvh));
 }
}
@media(max-width:700px){
 .case-mobile-panel{
  background:linear-gradient(145deg,rgba(255,255,255,.48),rgba(235,240,249,.32));
  backdrop-filter:blur(22px) saturate(1.45);
  -webkit-backdrop-filter:blur(22px) saturate(1.45);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 22px 38px rgba(25,31,47,.22),0 5px 12px rgba(25,31,47,.06);
 }
}
/* Opening the sheet focuses its container, not a seemingly selected icon. */
.case-mobile-panel:focus{outline:none}
.case-mobile-panel button:focus:not(:focus-visible){outline:none}

/* Menu access beside the sidebar credit. */
.work-copyright{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.command-shortcut{appearance:none;border:0;background:transparent;padding:0;color:inherit;cursor:pointer;font:400 13px/20px "Departure Mono",monospace;white-space:nowrap;text-transform:uppercase}
.command-shortcut:hover{opacity:.6}
.command-shortcut:focus-visible{outline:2px solid currentColor;outline-offset:5px}

.work-sidebar .work-copyright .command-shortcut{font-family:"Departure Mono",monospace!important;font-size:13px!important;font-weight:400!important;line-height:20px!important;padding:0;text-align:left;color:#15130f}

/* Minimal view switch: outline only the active view. */
.corner-top-right .corner-views{padding:0;gap:8px;border:0;background:transparent;border-radius:0}
.corner-top-right .corner-views .nav-control{border:1px solid transparent;border-radius:10px;background:transparent;min-height:36px;padding:8px 14px}
.corner-top-right .corner-views .nav-control[aria-pressed='true']{border-color:#16130e22;background:transparent}
.corner-top-right .corner-views .nav-control[aria-pressed='true']:hover{border-color:#16130e22}
.corner-top-right .view-indicator{display:none}

/* Close Apron's former slot with the remaining community projects. */
@media(min-width:701px){
 .project-grid .panel-colorstack{grid-column:1;grid-row:81/111}
 .project-grid .panel-ibm{grid-column:2;grid-row:81/111}
}

/* End the grid at the final project row instead of reserving Apron's old height. */
@media(min-width:701px){
 .project-grid{grid-template-rows:repeat(110,minmax(0,1fr));aspect-ratio:8/11;margin-bottom:32px}
}

/* Align the desktop shortcut with the final project cards. */
@media(min-width:701px){
 .work-layout .work-sidebar{position:relative;top:auto;align-self:stretch;height:auto;margin-bottom:32px;overflow:visible}
 .work-sidebar .work-copyright{padding-bottom:0}
}

/* Use only the page inset below the final row, matching the side edges. */
@media(min-width:701px){
 .work-layout .project-grid{margin-bottom:0}
 .work-layout .work-sidebar{margin-bottom:0}
}