:root {
  --charcoal: #1A1814;
  --ink: #0C0B09;
  --teal: #238B8E;
  --ivory: #F5F4EF;
  --surface: var(--ink);
  --surface-raised: var(--charcoal);
  --text: var(--ivory);
  --text-rgb: 245, 244, 239;
  --surface-rgb: 26, 24, 20;
  --sky-rgb: 12, 11, 9;
  --accent: var(--teal);
  --accent-hover: #7FCFD1;
  --logo-main: var(--ivory);
  --logo-accent: var(--teal);
  --theme-duration: 1600ms;
  --theme-ease: cubic-bezier(.45, 0, .2, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}
* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--surface);
  color: var(--text);
  font-family: "Source Serif 4", "Iowan Old Style", Georgia, serif;
}
body { overflow-x: hidden; }
.brand {
  position: fixed;
  z-index: 2;
  top: 28px;
  left: 28px;
  width: 148px;
}
.logo-svg { display: block; width: 100%; height: auto; }
.shade {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  filter: brightness(0) blur(3px);
  transform: translateY(3px);
}
.mark { position: relative; }
main { position: relative; z-index: 1; }
.stage {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 200px 48px 80px;
  overflow: hidden;
}
.stage > :not(.field) { position: relative; }
.field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.quote { margin: 0; }
.quote blockquote { margin: 0; }
.quote p {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(30px, 3.6vw, 52px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.12;
  text-wrap: balance;
}
.quote figcaption {
  margin-top: 22px;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--text-rgb), 0.7);
}
.kicker {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
#contact { min-width: 0; }
#contact h2 {
  margin: 12px 0 0;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.reach {
  display: block;
  margin-top: 16px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.reach + .reach { margin-top: 8px; }
nav {
  position: fixed;
  z-index: 2;
  top: 36px;
  right: 36px;
}
.menu { position: relative; }
.menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 0;
  border: 0;
  appearance: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.menu button svg { width: 10px; height: 10px; transition: transform 0.2s ease; }
.menu button[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: max-content;
  min-width: 240px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  background: rgba(var(--surface-rgb), .88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(var(--text-rgb), 0.12);
  border-radius: 12px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
}
.menu-item {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.menu-item + .menu-item { margin-top: 2px; }
.menu-item:hover { background: rgba(var(--text-rgb), 0.07); }
.menu-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--text-rgb), 0.55);
}
.menu-value {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  overflow-wrap: anywhere;
}
.menu-item:hover .menu-value { color: var(--accent-hover); }
@media (prefers-reduced-motion: no-preference) {
  .menu-panel:not([hidden]) { animation: menu-in 0.18s var(--ease-out); }
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-6px); }
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media (max-width: 640px) {
  .brand { width: 96px; top: 16px; left: 16px; }
  nav { top: 20px; right: 16px; }
  .menu-panel { top: 84px; }
  .stage { padding: 140px 20px 48px; }
}

/* Shared navigation and the path from the landing page to our work. */
::selection { background: var(--accent); color: #fff; }
nav { display: flex; align-items: center; gap: 28px; }
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  font-size: 15px;
  text-decoration: none;
  text-underline-offset: 6px;
}
.nav-link:hover, .nav-link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}
.menu button { min-height: 44px; }
.stage > .invitation {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(100% - 40px);
}
.work-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 56px;
  padding: 16px 26px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.35;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, transform 160ms var(--ease-out);
}
.work-link:hover { background: var(--surface-raised); border-color: var(--accent-hover); }
.work-link:active { transform: scale(.97); }
.work-link svg { width: 20px; height: 20px; flex-shrink: 0; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* The same galaxy stays behind the work as visitors scroll. */
/* Capture the sky and its reading layer together during navigation. */
.sky-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--surface);
  view-transition-name: field;
}
.sky-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(12, 11, 9, 0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
}
:is(.work-overview, .mad-page) .sky-scene::after {
  background: rgba(var(--sky-rgb), .24);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.work-page .brand, .work-page nav { position: absolute; }
.work-content {
  width: min(1440px, 100%);
  margin-inline: auto;
  padding: 180px 48px 64px;
}
.work-intro { max-width: 760px; margin-bottom: 48px; }
.work-intro h1 {
  margin: 0 0 20px;
  font-size: clamp(36px, 4.8vw, 64px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.work-intro p, .work-close p {
  margin: 0;
  max-width: 62ch;
  font-size: 19px;
  line-height: 1.6;
  color: rgba(var(--text-rgb), .8);
}
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.project { min-width: 0; }
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(var(--text-rgb), .24);
  border-radius: 12px;
  background: rgba(var(--surface-rgb), .94);
}
.video-placeholder { padding: 24px; text-align: center; }
.video-placeholder svg { display: block; width: 36px; height: 36px; margin: 0 auto 18px; color: var(--accent-hover); }
.video-placeholder p { margin: 0; font-size: 20px; }
.video-placeholder span { display: block; margin-top: 8px; color: rgba(var(--text-rgb), .72); font-size: 15px; }
.video-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--ink); }
[hidden] { display: none !important; }
.project h2 { margin: 22px 0 8px; font-size: 25px; font-weight: 400; }
.project > p { margin: 0; max-width: 54ch; font-size: 17px; line-height: 1.6; color: rgba(var(--text-rgb), .8); }
.work-close {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid rgba(var(--text-rgb), .2);
}
.work-close h2 { margin: 0 0 8px; font-size: 28px; font-weight: 400; }
.work-close .work-link { font-size: 18px; }
@media (max-width: 900px), (max-height: 700px) {
  .stage { padding-top: 200px; gap: 48px; }
  .stage > .invitation {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    flex-basis: 100%;
    max-width: 100%;
    margin: 0 auto 24px;
    text-align: center;
  }
}
@media (max-width: 760px) {
  .work-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  nav { gap: 20px; }
  .menu-panel { top: calc(100% + 10px); }
  .stage { padding-top: 170px; }
  .work-content { padding: 150px 20px 40px; }
  .work-intro { margin-bottom: 32px; }
  .work-intro p, .work-close p { font-size: 17px; }
  .work-close { margin-top: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .work-link { transition: none; }
}

/* Going to Our Work, the "What can we do for you?" button presses in and collapses, the rest of the home page flies
   past from the button's spot (42% down the first screen), and the work page assembles from the edges: header from the
   top, cards from the sides, footer from the bottom, lightly staggered. Going home, the pieces leave the way they came
   and the home page settles back. The sky holds still; only the page content moves. Exits run shorter than entrances. */
.brand { view-transition-name: brand; }
nav { view-transition-name: navigation; }

.stage { view-transition-name: home; }
.invitation { view-transition-name: invitation; }
.work-intro, .project, .work-close { view-transition-name: match-element; }
.work-intro { view-transition-class: slide from-top; }
.project:nth-child(odd) { view-transition-class: slide from-left; }
.project:nth-child(even) { view-transition-class: slide from-right; }
.work-close { view-transition-class: slide from-bottom; }
::view-transition-group(*) {
  animation-duration: 400ms;
  animation-timing-function: var(--ease-out);
}
::view-transition-group(*.slide) { z-index: 1; }
::view-transition-group(*.from-top) { --from: 0 -60vh; --wait: 60ms; }
::view-transition-group(*.from-left) { --from: -60vw 0; --wait: 100ms; }
::view-transition-group(*.from-right) { --from: 60vw 0; --wait: 140ms; }
::view-transition-group(*.from-bottom) { --from: 0 60vh; --wait: 180ms; }
::view-transition-group(home), ::view-transition-group(invitation) { z-index: 2; }
::view-transition-group(brand), ::view-transition-group(navigation) { z-index: 3; }
::view-transition-group(field) { z-index: 0; animation-duration: 620ms; }
::view-transition-old(field) { animation: none; opacity: 1; mix-blend-mode: normal; }
::view-transition-new(field) { animation: sky-blend 620ms var(--ease-out) both; mix-blend-mode: normal; }
@keyframes sky-blend { from { opacity: 0; } to { opacity: 1; } }
::view-transition-old(invitation) { animation: press-out 240ms var(--ease-out) both; }
::view-transition-old(home) { animation: fly-out 380ms var(--ease-out) both; transform-origin: 50% 42vh; }
::view-transition-new(*.slide) { animation: slide-in 440ms var(--ease-out) var(--wait) both; }
::view-transition-old(*.slide) { animation: slide-out 300ms var(--ease-out) both; }
::view-transition-new(home) { animation: fly-in 460ms var(--ease-out) 80ms both; transform-origin: 50% 42vh; }
::view-transition-new(invitation) { animation: pop-in 260ms var(--ease-out) 260ms both; }
@keyframes press-out {
  30% { transform: scale(.94); }
  70% { opacity: 1; }
  to { transform: scale(.5); opacity: 0; }
}
@keyframes fly-out { to { transform: scale(1.8); opacity: 0; } }
@keyframes fly-in { from { transform: scale(1.8); opacity: 0; } }
@keyframes slide-in { from { translate: var(--from); opacity: 0; } }
@keyframes slide-out { to { translate: var(--from); opacity: 0; } }
@keyframes pop-in { from { transform: scale(.9); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
/* Phones get the plain fade too; the full transition is for tablets and laptops. */
@media (prefers-reduced-motion: reduce), (max-width: 640px) {
  :root::view-transition-old(*), :root::view-transition-new(*) { animation: fade 200ms ease both; }
  :root::view-transition-old(*) { animation-direction: reverse; }
}

/* MAD Performance walkthrough selector, within the existing project card. */
.demo-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.demo-picker button {
  min-height: 44px; padding: 9px 13px; border: 1px solid rgba(var(--text-rgb), .3);
  border-radius: 8px; background: var(--surface); color: var(--text); font: inherit;
  font-size: 15px; cursor: pointer; transition: background-color 160ms, border-color 160ms;
}
.demo-picker button:hover { border-color: var(--accent-hover); }
.demo-picker button[aria-pressed="true"] { background: var(--surface-raised); border-color: var(--accent-hover); color: var(--accent-hover); }
.demo-picker button:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 3px; }
.project > .demo-caption { margin-top: 10px; font-size: 14px; min-height: 3.2em; }
.project-features { padding-left: 20px; margin: 18px 0; max-width: 54ch; color: rgba(var(--text-rgb), .8); font-size: 16px; line-height: 1.6; }
.project-features li + li { margin-top: 10px; }
.project-features strong { color: var(--text); font-weight: 600; }
.project > .project-note { font-size: 13px; color: rgba(var(--text-rgb), .72); }
@media (prefers-reduced-motion: reduce) { .demo-picker button { transition: none; } }

/* Project cards stay concise; their build stories live on dedicated pages. */
.project .project-link { margin-top: 22px; font-size: 17px; gap: 16px; }
/* Keep compact pages' closing invitations at the foot of a desktop viewport.
   Content can still grow naturally on phones, short windows, and with zoom. */
.work-compact .brand { width: 108px; top: 20px; }
.work-compact .work-content {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: 124px;
  padding-bottom: 24px;
}
.work-compact .work-intro { margin-bottom: 24px; }
.work-compact .work-intro h1 { font-size: clamp(36px, 4vw, 52px); margin-bottom: 12px; }
.work-overview .work-grid { padding-bottom: 28px; }
.work-overview .project { display: flex; flex-direction: column; align-items: flex-start; }
.work-overview .video-frame { width: 100%; flex: none; }
.work-overview .project h2 { margin-top: 16px; }
.work-overview .project > p { margin-bottom: 16px; }
.work-overview .project-link { margin-top: auto; min-height: 48px; padding: 12px 20px; }
.work-compact .work-close { margin-top: auto; padding-top: 20px; gap: 16px; }
.work-compact .work-close h2 { font-size: 24px; margin-bottom: 4px; }
.work-compact .work-close p { font-size: 16px; }
.work-compact .work-close .work-link { min-height: 48px; font-size: 16px; padding: 12px 20px; }
@media (min-width: 761px) and (max-height: 900px) {
  .work-compact .work-content { max-width: 1120px; padding-top: 112px; padding-bottom: 20px; }
  .work-compact .work-intro { margin-bottom: 20px; }
  .work-compact .work-intro h1 { font-size: 40px; }
  .work-compact .work-intro p { font-size: 17px; }
  .work-overview .project h2 { margin-top: 12px; font-size: 23px; }
  .work-overview .project > p { font-size: 16px; line-height: 1.5; margin-bottom: 12px; }
  .work-overview .work-grid { padding-bottom: 20px; }
}
@media (max-width: 760px) {
  .work-compact .work-content { padding-top: 124px; }
  .work-overview .work-grid { padding-bottom: 32px; }
  .work-compact .work-close { gap: 20px; }
}
.back-to-work { display: inline-block; margin-bottom: 24px; color: var(--accent-hover); font-size: 16px; text-underline-offset: 5px; }
.case-study .work-intro { max-width: 900px; }
.case-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.case-demo, .case-copy { min-width: 0; }
.case-copy section + section { margin-top: 36px; }
.case-copy h2 { margin: 0 0 14px; font-size: 28px; font-weight: 400; line-height: 1.2; text-wrap: balance; }
.case-copy p { max-width: 65ch; margin: 0 0 16px; font-size: 17px; line-height: 1.65; color: rgba(var(--text-rgb), .8); }
.case-demo .demo-caption { margin: 12px 0 20px; font-size: 14px; line-height: 1.6; color: rgba(var(--text-rgb), .8); }
.case-study .project-note { font-size: 13px; line-height: 1.6; color: rgba(var(--text-rgb), .72); }
.case-pending { max-width: 660px; }
.case-pending .work-link { margin-top: 12px; font-size: 18px; }
.case-demo { view-transition-name: match-element; view-transition-class: slide from-left; }
.case-copy { view-transition-name: match-element; view-transition-class: slide from-right; }
.project-page .work-intro { --entry-y: -60vh; animation: project-arrive 440ms var(--ease-out) 60ms backwards; }
.project-page .case-demo { --entry-x: -60vw; animation: project-arrive 440ms var(--ease-out) 100ms backwards; }
.project-page .case-copy { --entry-x: 60vw; animation: project-arrive 440ms var(--ease-out) 140ms backwards; }
.project-page .work-close { --entry-y: 60vh; animation: project-arrive 440ms var(--ease-out) 180ms backwards; }
.native-reveal .project-page :is(.work-intro, .case-demo, .case-copy, .work-close) { animation: none; }
@media (max-width: 900px) {
  .case-layout { grid-template-columns: 1fr; gap: 40px; }
}
@media (prefers-reduced-motion: reduce), (max-width: 640px) {
  .project-page :is(.work-intro, .case-demo, .case-copy, .work-close) { animation: fade 200ms ease both; }
}

@keyframes project-arrive {
  from { transform: translate3d(var(--entry-x, 0px), var(--entry-y, 0px), 0); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.project-page :is(.work-intro, .case-demo, .case-copy, .work-close).entry-finished { animation: none; }

/* MasterStitch's film leads its project story; the public-site system stays shared. */
.case-film { margin-bottom: 56px; }
.masterstitch-story { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.masterstitch-story > section,
.masterstitch-story > section + section { margin: 0; }
@media (max-width: 900px) {
  .masterstitch-story { grid-template-columns: 1fr; gap: 40px; }
  .case-film { margin-bottom: 40px; }
}

/* MAD's product story leads with useful outcomes; architecture opens on request. */
.mad-page .back-to-work { margin-bottom: 12px; min-height: 24px; }
.mad-page .case-layout { gap: 36px; padding-bottom: 28px; }
.mad-page .case-copy h2 { font-size: 24px; margin-bottom: 20px; }
.mad-page .project-features { list-style: none; padding: 0; margin: 0 0 20px; }
.mad-page .project-features li + li { margin-top: 16px; }
.mad-page .project-features strong { display: block; margin-bottom: 4px; }
.mad-page .demo-caption { margin-bottom: 12px; min-height: 3.2em; }
.mad-page .case-demo > .project-note { margin: 0; }
.build-details { border-top: 1px solid rgba(var(--text-rgb), .2); margin-bottom: 16px; }
.build-details summary {
  padding: 12px 0;
  min-height: 44px;
  color: var(--accent-hover);
  font-size: 16px;
  cursor: pointer;
}
.build-details summary:hover { color: var(--text); }
.build-details summary:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 4px; }
.build-details > div { padding-top: 4px; }
.build-details p { font-size: 16px; }
@media (min-width: 901px) and (max-height: 900px) {
  .mad-page .case-layout { gap: 28px; }
  .mad-page .case-copy h2 { margin-bottom: 16px; }
  .mad-page .project-features { line-height: 1.5; margin-bottom: 16px; }
  .mad-page .project-features li + li { margin-top: 12px; }
}
@media (max-width: 900px) {
  .mad-page .case-layout { gap: 28px; }
}

/* Each MAD walkthrough connects an observed problem to a reusable idea. */
.mad-page .case-chapters { margin-top: 8px; }
.mad-page .case-chapter { padding-bottom: 0; align-items: center; }
.mad-page .case-chapter + .case-chapter {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid rgba(var(--text-rgb), .2);
}
.mad-page figure.case-demo { margin: 0; }
.mad-page .case-chapter .demo-caption { min-height: 0; }
.mad-page .case-chapter h2 { font-size: 28px; line-height: 1.2; }
.mad-page .case-prompt { margin-top: 24px; margin-bottom: 0; color: var(--text); }
.mad-page .case-build { margin-top: 48px; margin-bottom: 32px; }
.mad-page .case-build p { max-width: 65ch; font-size: 16px; line-height: 1.6; color: rgba(var(--text-rgb), .8); }
.mad-page .case-build .project-note { font-size: 13px; }
.portfolio-inline :is(.work-intro, .case-demo, .case-copy, .work-close) { animation: none; }
.portfolio-transitioning { cursor: progress; }
.portfolio-transitioning main { pointer-events: none; }
.portfolio-status {
  position: fixed;
  z-index: 101;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 40px);
  margin: 0;
  padding: 10px 16px;
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
}
.portfolio-status:empty { display: none; }
@media (max-width: 900px) {
  .mad-page .case-chapter { gap: 24px; }
  .mad-page .case-chapter + .case-chapter { margin-top: 36px; padding-top: 36px; }
  .mad-page .case-build { margin-top: 36px; }
}

/* A single light pass stays inside a newly loaded video, never across the page. */
.video-reveal-cover, .video-reveal-sweep { position: absolute; pointer-events: none; z-index: 1; }
.video-reveal-cover { inset: 0; background: var(--ink); }
.video-reveal-sweep { top: 50%; left: 50%; width: 14%; height: 300%; background: var(--ivory); }
@media (prefers-reduced-motion: reduce) {
  .video-reveal-cover, .video-reveal-sweep { display: none; }
}

/* The light switch changes presentation only; the live sky keeps its state. */
html[data-theme="light"] {
  color-scheme: light;
  --surface: #fff;
  --surface-raised: #f2f2f2;
  --text: #111;
  --text-rgb: 17, 17, 17;
  --surface-rgb: 255, 255, 255;
  --sky-rgb: 255, 255, 255;
  --accent: #111;
  --accent-hover: #444;
  --logo-main: #111;
  --logo-accent: #111;
}
/* Only the transparent sky is recolored: stars, meteors and lens keep their physics. */
.field { filter: brightness(1); transition: filter var(--theme-duration) var(--theme-ease); }
html[data-theme="light"] .field { filter: brightness(0); }
#logo g[fill="#F5F4EF"] { fill: var(--logo-main); }
#logo path[fill="#238B8E"] { fill: var(--logo-accent); }
#logo g[fill], #logo path[fill] { transition: fill var(--theme-duration) var(--theme-ease); }
html, body, .sky-scene, .sky-scene::after, .menu-panel,
.quote figcaption, .reach, .nav-link, .menu button, .menu-item, .menu-label,
.menu-value, .work-intro p, .project > p, .case-copy p, .case-study .project-note,
.project-features, .project-features strong, .back-to-work, .work-close,
.build-details, .case-chapter, .portfolio-status {
  transition: color var(--theme-duration) var(--theme-ease), background-color var(--theme-duration) var(--theme-ease),
    border-color var(--theme-duration) var(--theme-ease);
}
.work-link {
  transition: color var(--theme-duration) var(--theme-ease), background-color var(--theme-duration) var(--theme-ease),
    border-color var(--theme-duration) var(--theme-ease), transform 160ms var(--ease-out);
}
html[data-theme="light"] .menu-panel { box-shadow: 0 20px 48px rgba(0, 0, 0, .12); }
html[data-theme="light"] .shade { opacity: .12; }
.shade { transition: opacity var(--theme-duration) var(--theme-ease); }
.theme-switch {
  position: fixed;
  z-index: 3;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 44px;
  height: 116px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: color var(--theme-duration) var(--theme-ease);
}
.theme-switch[hidden] { display: none; }
.theme-switch { box-shadow: none !important; }
.theme-switch > svg { width: 15px; height: 15px; flex: none; opacity: .5; }
.theme-switch[aria-checked="true"] .theme-sun,
.theme-switch[aria-checked="false"] .theme-moon { opacity: 1; }
.theme-track {
  display: block;
  position: relative;
  width: 26px;
  height: 54px;
  border: 1px solid rgba(var(--text-rgb), .5);
  border-radius: 16px;
  background: var(--surface-raised);
  transition: background-color var(--theme-duration) var(--theme-ease), border-color var(--theme-duration) var(--theme-ease);
}
.theme-thumb {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text);
  transform: translateY(28px);
  transition: transform 320ms var(--ease-out), background-color var(--theme-duration) var(--theme-ease);
}
.theme-switch[aria-checked="true"] .theme-thumb { transform: translateY(0); }
.theme-switch:hover .theme-track { border-color: var(--text); }
.theme-switch:focus-visible { outline-offset: 2px; border-radius: 8px; }
@media (max-width: 900px) {
  .theme-switch { position: absolute; top: 76px; right: 16px; transform: none; height: 58px; gap: 2px; }
  .theme-switch > svg { width: 10px; height: 10px; }
  .theme-track { width: 20px; height: 34px; }
  .theme-thumb { width: 12px; height: 12px; left: 3px; top: 3px; transform: translateY(14px); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --theme-duration: 0ms; }
  .theme-thumb { transition: none; }
}

/* Phone home: a centered quote, followed by a quiet contact footer. */
@media (max-width: 640px) {
  .stage {
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(160px, 1fr) auto auto;
    align-content: stretch;
    align-items: center;
    justify-items: center;
    gap: 36px;
    padding: calc(140px + env(safe-area-inset-top))
      max(24px, env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom))
      max(24px, env(safe-area-inset-left));
  }
  .stage > .invitation { margin: 0; width: 100%; }
  .stage .work-link { gap: 16px; padding-inline: 20px; }
  .stage .quote { width: 100%; text-align: center; }
  .stage .quote p {
    max-width: 20ch;
    margin-inline: auto;
    font-size: clamp(28px, 6.6vw, 34px);
    line-height: 1.2;
  }
  .stage .quote figcaption {
    max-width: 28ch;
    margin: 18px auto 0;
    font-size: 11px;
    line-height: 1.8;
    letter-spacing: .1em;
    text-wrap: balance;
  }
  .stage #contact {
    width: 100%;
    padding-top: 24px;
    border-top: 1px solid rgba(var(--text-rgb), .16);
    text-align: center;
  }
  .stage #contact .kicker { display: none; }
  .stage #contact h2 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -.015em;
    color: rgba(var(--text-rgb), .7);
  }
  .stage #contact .reach {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    font-size: 17px;
  }
  .stage #contact .reach[href^="mailto:"] {
    display: block;
    align-content: center;
    font-size: clamp(14px, 3.8vw, 16px);
  }
}

/* Home remains reachable while reading long pages or answering the brief. */
.work-page .brand { position: fixed; }
.contact-page .brand { z-index: 6; }
@media (max-width: 640px) { nav { gap: 12px; } nav .nav-link, .menu button { font-size: 14px; } }

/* Gentle fixed depth, independent of cursor position. */
.work-link, .demo-picker button { box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }
html[data-theme="light"] :is(.work-link, .demo-picker button) { box-shadow: 0 3px 10px rgba(0, 0, 0, .08); }

/* Give portfolio descriptions a defined surface while keeping the films separate. */
.masterstitch-story > section,
.mad-page .case-chapter > .case-copy {
  box-sizing: border-box;
  padding: 28px;
  border: 1px solid rgba(var(--text-rgb), .18);
  border-radius: 14px;
  background: #282725;
  transition: background-color var(--theme-duration) var(--theme-ease), border-color var(--theme-duration) var(--theme-ease);
}
.project-summary {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 20px;
}
.work-overview .project-summary h2 { margin-top: 0; }
.project-summary > p { margin: 0 0 24px; font-size: 17px; line-height: 1.65; color: rgba(var(--text-rgb), .8); }
.masterstitch-story { gap: 24px; }
.masterstitch-story .case-prompt { margin-top: 24px; margin-bottom: 0; color: var(--text); }
html[data-theme="light"] :is(.masterstitch-story > section, .mad-page .case-chapter > .case-copy) { background: #f2f2f2; }
@media (max-width: 760px) {
  .masterstitch-story > section,
  .mad-page .case-chapter > .case-copy { padding: 22px; }
}

/* A dedicated left gutter keeps the fixed home logo clear of scrolling media. */
.work-page { --brand-gutter: 164px; }
.work-page .brand { position: fixed; top: 20px; left: 24px; width: 108px; }
.work-page .work-content {
  box-sizing: border-box;
  width: calc(100% - var(--brand-gutter));
  margin-left: var(--brand-gutter);
  margin-right: 0;
  padding-left: 24px;
  padding-right: 40px;
}
@media (min-width: 1600px) {
  .work-page .work-content { margin-left: max(var(--brand-gutter), calc((100% - 1440px) / 2)); }
}
@media (max-width: 760px) {
  .work-page { --brand-gutter: 76px; }
  .work-page .brand { top: 20px; left: 12px; width: 52px; min-height: 44px; }
  .work-page .work-content { padding-left: 8px; padding-right: 20px; }
}

/* Keep theme controls anchored beneath Contact on every page. */
nav, .work-page nav { position: fixed; z-index: 4; }
.theme-switch { position: fixed; top: 82px; right: 36px; transform: none; }
@media (max-width: 900px) {
  .theme-switch { position: fixed; top: 82px; right: 36px; }
}
@media (max-width: 640px) {
  .theme-switch { top: 66px; right: 16px; }
}

/* Return links retain link navigation with a clear button-sized target. */
.back-to-work {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(var(--text-rgb), .3);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  background: rgba(var(--surface-rgb), .6);
  transition: background-color 180ms ease, border-color 180ms ease;
}
.back-to-work svg { width: 18px; height: 18px; flex: none; }
.back-to-work:hover { background: rgba(var(--text-rgb), .1); border-color: var(--text); }
.back-to-work:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .back-to-work { transition: none; } }

/* A compact, pinned header separates navigation from scrolling project content. */
.work-page { --header-height: 144px; }
.work-page::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: var(--header-height);
  background: var(--surface);
  border-bottom: 1px solid rgba(var(--text-rgb), .12);
  z-index: 3;
  pointer-events: none;
  transition: background-color var(--theme-duration) var(--theme-ease);
}
.work-page .brand { z-index: 6; }
.work-page nav { position: fixed; z-index: 5; }
.work-page .work-content { padding-top: calc(var(--header-height) + 28px); }
.work-page :is(h1, h2, section, a) { scroll-margin-top: calc(var(--header-height) + 20px); }
.theme-switch { height: 58px; gap: 2px; top: 76px; z-index: 4; }
.theme-switch > svg { width: 10px; height: 10px; }
.theme-track { width: 20px; height: 34px; }
.theme-thumb { width: 12px; height: 12px; left: 3px; top: 3px; transform: translateY(14px); }
@media (max-width: 640px) {
  .work-page { --header-height: 124px; }
  .theme-switch { top: 56px; }
}

/* The pinned header protects the logo, so content can be centered again. */
.work-page .work-content {
  width: min(1440px, 100%);
  margin-inline: auto;
  padding-left: 48px;
  padding-right: 48px;
}
@media (max-width: 760px) {
  .work-page .work-content { padding-left: 20px; padding-right: 20px; }
}

/* Slightly tighter, centered portfolio media without shrinking phone layouts. */
@media (min-width: 761px) {
  .work-overview .work-grid { width: 90%; margin-inline: auto; }
  .stitch-page .case-film { width: 90%; margin-inline: auto; }
}

/* Match Stitch Line's cards to the film and balance the three descriptions. */
.stitch-page .masterstitch-story {
  width: 90%;
  margin-inline: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 24px;
}
.stitch-page .masterstitch-story > section {
  display: flex;
  flex-direction: column;
  padding: 24px;
}
.stitch-page .masterstitch-story .case-prompt { margin-top: auto; padding-top: 8px; }
@media (max-width: 1100px) {
  .stitch-page .masterstitch-story { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .stitch-page .masterstitch-story { width: 100%; }
  .stitch-page .masterstitch-story > section { padding: 22px; }
}

/* Theme selection lives on home; interior headers use the recovered space. */
.work-page .theme-switch { display: none; }
.work-page { --header-height: 96px; }
.work-page .brand { top: 12px; width: 84px; }
.work-page nav { top: 24px; }
.work-page .work-content { padding-top: calc(var(--header-height) + 20px); }
@media (max-width: 640px) {
  .work-page { --header-height: 76px; }
  .work-page .brand { top: 12px; width: 52px; }
  .work-page nav { top: 20px; }
}

/* Align the project introduction to the same edges as its film and cards. */
.stitch-page .work-intro {
  width: 90%;
  max-width: none;
  margin: 0 auto 32px;
}
.stitch-page .work-intro .back-to-work { margin-bottom: 24px; }
.stitch-page .work-intro h1 {
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.1;
  margin: 0 0 12px;
}
.stitch-page .work-intro > p {
  max-width: 52ch;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
  margin: 0;
  text-wrap: pretty;
}
@media (max-width: 760px) {
  .stitch-page .work-intro { width: 100%; margin-bottom: 24px; }
}

/* One shared alignment for the overview introduction, videos, and closing link. */
.work-overview:not(.contact-page) .work-intro,
.work-overview:not(.contact-page) .work-close {
  width: 90%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
.work-overview .work-intro { margin-bottom: 32px; }
.work-overview .work-intro h1 { margin-bottom: 12px; text-wrap: balance; }
.work-overview .work-intro > p { max-width: 62ch; text-wrap: pretty; }
.work-overview .work-intro .back-to-work { margin-bottom: 24px; }
.work-page { --header-height: 112px; }
.work-page .brand { width: 112px; top: 10px; }
.work-page nav { top: 32px; }
@media (max-width: 760px) {
  .work-overview:not(.contact-page) .work-intro,
  .work-overview:not(.contact-page) .work-close { width: 100%; }
}
@media (max-width: 640px) {
  .work-page { --header-height: 92px; }
  .work-page .brand { width: 80px; top: 12px; }
  .work-page nav { top: 24px; }
}

@media (max-width: 760px) {
  .work-overview .project-summary > p { font-size: 16px; }
  .project-summary .project-link { max-width: 100%; }
  .masterstitch-story > section { min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
  .work-page nav { gap: 8px; right: 12px; }
  .work-page nav .nav-link, .work-page .menu button { font-size: 13px; }
}

/* Compact header with more legible lettering inside the existing brand mark. */
.work-page { --header-height: 96px; }
.work-page .brand { width: 100px; top: 6px; }
.work-page nav { top: 26px; }
@media (max-width: 640px) {
  .work-page { --header-height: 80px; }
  .work-page .brand { width: 80px; top: 6px; }
  .work-page nav { top: 20px; }
}

/* Preserve the wordmark scale while allowing its wider lettering. */
.logo-svg { overflow: visible; }

/* Independent brand elements retain the original outlines and letter spacing. */
.brand-parts {
  --brand-symbol-size: 64%;
  --brand-name-gap: 7px;
  --brand-descriptor-gap: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--logo-main);
  text-decoration: none;
}
.brand-parts svg { display: block; flex: none; height: auto; overflow: visible; }
.brand-parts .brand-symbol { width: var(--brand-symbol-size); }
.brand-parts .brand-name { width: 100%; margin-top: var(--brand-name-gap); }
.brand-parts .brand-descriptor { width: 92%; margin-top: var(--brand-descriptor-gap); }
.brand-symbol g[fill="#F5F4EF"] { fill: var(--logo-main); }
.brand-symbol path[fill="#238B8E"] { fill: var(--logo-accent); }
.work-page .brand-parts { --brand-symbol-size: 55%; --brand-name-gap: 5px; --brand-descriptor-gap: 4px; }

/* Widen the wordmarks independently, with the name leading the descriptor. */
.brand-parts .brand-name { width: 115%; }
.brand-parts .brand-descriptor { width: 103%; }

/* The overview fits a desktop screen; detail pages and phones remain scrollable. */
@media (min-width: 1000px) and (min-height: 700px) {
  .work-overview:has(.work-grid) .work-content {
    min-height: 100svh;
    padding-top: calc(var(--header-height) + 20px);
    padding-bottom: 20px;
  }
  .work-overview:has(.work-grid) .work-intro .overview-home {
    position: fixed;
    top: 28px;
    left: 160px;
    z-index: 6;
    min-height: 36px;
    margin: 0;
    padding: 7px 12px;
    gap: 7px;
    font-size: 14px;
  }
  .work-overview:has(.work-grid) .work-intro { margin-bottom: 20px; }
  .work-overview:has(.work-grid) .work-intro h1 { font-size: clamp(32px, 3.2vw, 44px); margin-bottom: 8px; }
  .work-overview:has(.work-grid) .work-intro > p { font-size: 16px; line-height: 1.5; max-width: 78ch; }
  .work-overview .work-grid { gap: 28px; padding-bottom: 20px; }
  .work-overview .video-frame { height: clamp(140px, calc(100svh - 550px), 290px); aspect-ratio: auto; }
  .work-overview .video-frame video { width: 100%; height: 100%; object-fit: contain; }
  .work-overview .project-summary { margin-top: 14px; }
  .work-overview .project-summary h2 { font-size: 24px; margin-bottom: 10px; }
  .work-overview .project-summary > p { font-size: 16px; line-height: 1.5; margin-bottom: 16px; }
  .work-overview .project-link { min-height: 42px; padding: 9px 16px; font-size: 15px; }
  .work-overview:has(.work-grid) .work-close { padding-top: 16px; gap: 16px; }
  .work-overview:has(.work-grid) .work-close h2 { font-size: 22px; }
}

/* Reduce the lockup and descriptor while retaining the outlined letter spacing. */
.work-page .brand-parts { width: 92px; }
.brand-parts .brand-descriptor { width: 92%; }
@media (max-width: 640px) {
  .work-page .brand-parts { width: 74px; }
}

/* Home's brand is only slightly larger than the interior header brand. */
body:not(.work-page) .brand-parts { width: 108px; }
@media (max-width: 640px) { body:not(.work-page) .brand-parts { width: 84px; } }

/* Contact stays above the quiz, header, and all portfolio content. */
.contact-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, .22);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  cursor: pointer;
}
.contact-menu-backdrop[hidden] { display: none; }
body.contact-menu-open nav { z-index: 101; }
body.contact-menu-open nav > .nav-link { filter: blur(3px); pointer-events: none; }
body.contact-menu-open .menu-panel { background: var(--surface-raised); }

/* The overview return control belongs outside the main content stacking context. */
.overview-home {
  position: absolute;
  top: calc(var(--header-height) + 12px);
  left: 20px;
  z-index: 6;
  margin: 0;
  min-height: 44px;
  padding: 8px 12px;
  gap: 7px;
  font-size: 14px;
}
body:not(:has(.work-grid)) > .overview-home { display: none; }
.work-overview:has(.overview-home) .work-content { padding-top: calc(var(--header-height) + 76px); }
@media (min-width: 1000px) and (min-height: 700px) {
  .overview-home { position: fixed; top: 28px; left: 160px; min-height: 36px; padding: 7px 12px; }
  .work-overview:has(.overview-home) .work-content { padding-top: calc(var(--header-height) + 20px); }
}

/* Keep the return action with page content rather than in the global header. */
.overview-home {
  position: absolute;
  top: calc(var(--header-height) + 12px);
  left: max(20px, calc((100% - min(1120px, 100%)) / 2 + 48px));
  min-height: 36px;
  padding: 6px 10px;
}
.work-overview:has(.overview-home) .work-content { padding-top: calc(var(--header-height) + 64px); }
@media (min-width: 1000px) and (min-height: 700px) {
  .work-overview .video-frame { height: clamp(120px, calc(100svh - 594px), 246px); }
}
@media (max-width: 760px) {
  .overview-home { left: 20px; min-height: 44px; }
  .work-overview:has(.overview-home) .work-content { padding-top: calc(var(--header-height) + 72px); }
}

/* Return action sits beside the heading, aligned with its first line. */
.overview-title-row { position: relative; }
.work-overview .work-intro .overview-return {
  position: absolute;
  left: -56px;
  top: 0;
  width: 40px;
  min-height: 40px;
  padding: 8px;
  margin: 0;
}
@media (max-width: 760px) {
  .overview-title-row { display: flex; align-items: flex-start; gap: 12px; }
  .work-overview .work-intro .overview-return { position: static; flex: 0 0 44px; min-height: 44px; }
  .overview-title-row h1 { min-width: 0; }
}

/* The separated logo fades with the rest of the theme. */
.brand-parts { transition: color var(--theme-duration) var(--theme-ease); }
.brand-symbol g[fill], .brand-symbol path[fill] { transition: fill var(--theme-duration) var(--theme-ease); }
.theme-switch > svg { transition: opacity var(--theme-duration) var(--theme-ease); }

/* Text resolves its own theme target; nested text inherits without a second fade. */
.quote { color: var(--text); transition: color var(--theme-duration) var(--theme-ease); }
.quote blockquote { color: inherit; transition: none; }
.quote figcaption { color: rgba(var(--text-rgb), .7); transition: color var(--theme-duration) var(--theme-ease); }
.quote figcaption cite { color: inherit; transition: none; }
#contact h2, #contact .kicker { color: var(--text); transition: color var(--theme-duration) var(--theme-ease); }
.nav-link, .menu > button { color: var(--text); transition: color var(--theme-duration) var(--theme-ease); }

/* Animate one inherited foreground value so homepage wording cannot lag. */
@property --home-foreground {
  syntax: '<color>';
  inherits: true;
  initial-value: #f5f4ef;
}
:root { --home-foreground: #f5f4ef; transition: --home-foreground var(--theme-duration) var(--theme-ease), background-color var(--theme-duration) var(--theme-ease); }
html[data-theme="light"] { --home-foreground: #111111; }
body:not(.work-page) :is(.quote, .quote blockquote, .quote p, #contact h2, #contact .kicker, .reach, .nav-link, .menu > button, .invitation .work-link, .brand-parts) {
  color: var(--home-foreground);
  transition-property: background-color, border-color, transform;
}
body:not(.work-page) .quote figcaption {
  color: color-mix(in srgb, var(--home-foreground) 70%, transparent);
  transition: none;
}
body:not(.work-page) .quote cite { color: inherit; transition: none; }