/* Design tokens */
:root {
  --bg: #f6f2ea;
  --ink: #24211f;
  --muted: #746e66;
  --line: #dcd6cc;
  --green: #607d58;
  --width: 1320px;
  --gutter: clamp(22px, 5vw, 96px);
  --section: clamp(88px, 11vw, 170px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: Arial, Helvetica, sans-serif;
  --header-height: 92px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height, 92px) + 24px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}
::selection {
  background: #d9d1c4;
}
img {
  display: block;
  width: 100%;
  height: auto;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
p {
  line-height: 1.65;
}
.container {
  width: min(var(--width), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}
.eyebrow,
.section-heading,
.header nav,
.availability {
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.section {
  padding-top: var(--section);
}
/* Intro: one identical text layer is clipped progressively. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: none;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
  pointer-events: none;
}
.loader-word {
  position: relative;
  font-size: clamp(20px, 14.1vw, 280px);
  font-weight: 800;
  letter-spacing: -0.065em;
  line-height: 1;
  color: #e2dcd2;
  white-space: nowrap;
}
.loader-fill {
  position: absolute;
  inset: 0;
  color: var(--ink);
  clip-path: inset(0 calc(100% - var(--progress, 0%)) 0 0);
}
.loader-bottom {
  position: absolute;
  bottom: 35px;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.06em;
}
.loader.done {
  opacity: 0;
  transform: translateY(-22px);
}
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 110;
  background: var(--ink);
  color: var(--bg);
  padding: 12px 18px;
  transform: translateY(-150%);
  font-size: 14px;
}
.skip-link:focus {
  transform: none;
}
/* Navigation & hero */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 36px;
}
.wordmark {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.055em;
}
.header nav {
  display: flex;
  gap: 32px;
}
.header nav a,
.footer-bottom a {
  position: relative;
}
.header nav a:after,
.footer-bottom a:after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s;
}
.header nav a:hover:after,
.footer-bottom a:hover:after {
  transform: scaleX(1);
}
.hero {
  padding-top: 100px;
  padding-bottom: 38px;
}
.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.hero .eyebrow span {
  color: var(--muted);
}
.availability {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  letter-spacing: 0.045em;
}
.availability span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}
.hero h1 {
  font-size: clamp(40px, 5.9vw, 86px);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 1.08;
  margin: 66px 0 38px;
}
.hero-bottom {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
}
.hero-bottom p {
  max-width: 470px;
  font-size: 18px;
  color: var(--muted);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 38px;
  padding: 17px 24px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 50px;
  font-size: 10px;
  letter-spacing: 0.04em;
  min-height: 48px;
  flex: none;
  transition:
    background 0.25s,
    transform 0.25s;
}
.button:hover {
  background: #443e37;
  transform: translateY(-2px);
}
.button span {
  font-size: 16px;
}
/* Selected work */
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  margin-bottom: 40px;
}
.section-heading h2 {
  font: inherit;
}
.section-heading > span {
  color: var(--muted);
  font-size: 9px;
}
.project-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px 28px;
}
.project-image {
  display: block;
  position: relative;
  overflow: hidden;
  border: 0;
  padding: 0;
  background: #e7e1d7;
  width: 100%;
  aspect-ratio: 900/680;
  border-radius: 3px;
  text-align: left;
}
.project-image img {
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.75s var(--ease),
    filter 0.75s var(--ease);
}
.view {
  position: absolute;
  bottom: 20px;
  right: 20px;
  border-radius: 30px;
  padding: 12px 17px;
  background: var(--bg);
  font-size: 9px;
  letter-spacing: 0.06em;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.3s,
    transform 0.3s;
}
.project-image:hover img {
  transform: scale(1.025);
  filter: brightness(0.96);
}
.project-image:hover .view,
.project-image:focus-visible .view {
  opacity: 1;
  transform: none;
}
.project-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 22px 0 9px;
  gap: 20px;
}
.project-title h3 {
  font-size: 20px;
  letter-spacing: -0.04em;
  font-weight: 500;
}
.project-title > span {
  font-size: 10px;
  color: var(--muted);
}
.project-copy > p {
  font-size: 13px;
  max-width: 480px;
  color: var(--muted);
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 17px;
}
.tags span {
  font-size: 9px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
}
.image-note {
  font-size: 10px;
  color: var(--muted);
  margin-top: 28px;
}
/* About & resume */
.about {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 50px;
}
.about > h2 {
  font-weight: 500;
  padding-top: 8px;
}
.about > div {
  max-width: 670px;
}
.about h3 {
  font-size: clamp(32px, 3.9vw, 54px);
  line-height: 1.12;
  letter-spacing: -0.055em;
  font-weight: 400;
  margin-bottom: 38px;
}
.about p {
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 20px;
}
.experience article {
  display: grid;
  grid-template-columns: 1fr 2fr 0.75fr;
  gap: 32px;
  padding: 31px 0;
  border-bottom: 1px solid var(--line);
}
.experience h3 {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
}
.experience h4 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
}
.experience p {
  max-width: 520px;
  font-size: 13px;
  color: var(--muted);
}
.experience article > span {
  font-size: 11px;
  text-align: right;
  line-height: 1.6;
}
.skills {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 68px;
}
.skills h3 {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: 22px;
}
.skills ul {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.9;
}
.education {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;
  border-top: 1px solid var(--line);
  padding-top: 34px;
  margin: 65px 0 35px;
}
.education h3 {
  margin-bottom: 24px;
}
.education h4 {
  font-size: 17px;
  font-weight: 400;
  margin-bottom: 6px;
}
.education p {
  font-size: 13px;
  color: var(--muted);
}
.education .thesis {
  margin-top: 15px;
  max-width: 460px;
}

/* Contact */
.contact {
  padding-top: var(--section);
}
.contact > .availability {
  border-top: 1px solid var(--line);
  padding-top: 35px;
}
.contact h2 {
  font-size: clamp(46px, 7.7vw, 110px);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.065em;
  margin: 55px 0 40px;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 30px;
}
.email {
  font-size: 15px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  font-size: 10px;
  color: var(--muted);
  margin-top: 110px;
  padding: 26px 0 32px;
  border-top: 1px solid var(--line);
}
.footer-bottom > div {
  display: flex;
  gap: 25px;
}
.footer-bottom > a {
  font-size: 9px;
  letter-spacing: 0.05em;
}

@media (min-width: 1500px) {
  .hero {
    padding-top: 130px;
  }
  .hero h1 {
    margin-top: 80px;
  }
}
@media (max-width: 768px) {
  .header {
    padding-block: 25px;
  }
  .header nav {
    gap: 19px;
    font-size: 9px;
  }
  .wordmark {
    font-size: 16px;
  }
  .hero {
    padding-top: 65px;
  }
  .hero-top {
    gap: 20px;
  }
  .hero h1 {
    margin-top: 50px;
  }
  .hero-bottom {
    align-items: start;
  }
  .hero-bottom p {
    font-size: 16px;
  }
  .project-grid {
    gap: 48px 20px;
  }
  .project-title h3 {
    font-size: 18px;
  }
  .about {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .about > div {
    max-width: 600px;
  }
  .about p {
    font-size: 16px;
  }
  .skills {
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
  }
  .experience article {
    grid-template-columns: 1fr 2fr;
    gap: 15px;
  }
  .experience article > span {
    grid-column: 2;
    text-align: left;
  }
  .contact h2 {
    margin-top: 40px;
  }
  .footer-bottom {
    margin-top: 75px;
  }
}
@media (max-width: 540px) {
  .header {
    align-items: start;
    gap: 20px;
    flex-direction: column;
  }
  .header nav {
    width: 100%;
    justify-content: space-between;
    font-size: 10px;
  }
  .header nav a {
    padding-block: 8px;
  }
  .hero {
    padding-top: 40px;
  }
  .hero-top {
    flex-direction: column;
    gap: 20px;
  }
  .hero h1 {
    font-size: clamp(36px, 9vw, 48px);
    margin: 40px 0 25px;
  }
  .hero-bottom {
    flex-direction: column;
    gap: 25px;
  }
  .hero-bottom p {
    max-width: 330px;
  }
  .section-heading {
    margin-bottom: 25px;
  }
  .section-heading > span {
    font-size: 8px;
    letter-spacing: 0;
  }
  .project-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .view {
    opacity: 1;
    transform: none;
    padding: 10px 13px;
    bottom: 14px;
    right: 14px;
  }
  .project-title h3 {
    font-size: 20px;
  }
  .project-copy > p {
    font-size: 14px;
  }
  .tags span {
    font-size: 10px;
  }
  .experience article {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-block: 25px;
  }
  .experience article > span {
    grid-column: 1;
  }
  .experience h3 {
    font-size: 10px;
    color: var(--muted);
  }
  .skills {
    gap: 35px 18px;
  }
  .skills h3 {
    font-size: 9px;
  }
  .skills ul {
    font-size: 12px;
    overflow-wrap: anywhere;
  }
  .education {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .education h3 {
    margin-bottom: 15px;
  }
  .contact-row {
    align-items: start;
    flex-direction: column;
    gap: 23px;
  }
  .footer-bottom {
    flex-wrap: wrap;
    gap: 25px;
  }
  .footer-bottom > span {
    width: 100%;
  }
  .loader-bottom {
    font-size: 8px;
    bottom: 25px;
    gap: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    transition: none !important;
    animation: none !important;
  }
  .loader {
    display: none;
  }
}

/* Persistent navigation: full-width surface, original content alignment. */
.site-header{position:sticky;top:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:background .3s,border-color .3s,backdrop-filter .3s}
.site-header.scrolled{background:rgba(246,242,234,.94);backdrop-filter:blur(14px);border-color:var(--line)}
.header{padding-block:24px;min-height:82px}
.header nav a{display:inline-flex;align-items:center;min-height:44px}
.header nav a:after{bottom:7px}
[id]{scroll-margin-top:8px}
#home,#case-main{scroll-margin-top:var(--header-height)}

/* Homepage polish: related elements stay together; final work is deliberately wide. */
.hero{padding-top:clamp(54px,6vw,92px)}
.hero-top{max-width:850px}
.hero h1{margin-top:52px}
.hero-bottom{justify-content:flex-start;align-items:center;gap:48px}
.project-title{align-items:flex-start}
.project-title h3{font-size:clamp(17px,1.45vw,21px);line-height:1.25}
.project-title h3 a{text-decoration-thickness:1px;text-underline-offset:5px}
.project-title h3 a:hover{text-decoration:underline}
.project-title>span{padding-top:3px}
.project-featured{grid-column:1/-1}
.project-featured .project-image{aspect-ratio:1500/680}
.project-featured .project-copy{display:grid;grid-template-columns:1fr 1fr;column-gap:50px;padding-top:24px}
.project-featured .project-title{margin:0;grid-row:1/3}
.project-featured .tags{margin-top:16px}
.about>div{max-width:650px}

/* Shared static case studies. All content is editable in its own HTML page. */
.case-hero{padding-top:clamp(42px,5vw,76px)}
.case-topline{display:flex;justify-content:space-between;gap:24px;align-items:center}
.case-topline>span{color:var(--muted)}
.back-link{font-size:10px;letter-spacing:.06em;display:inline-flex;align-items:center;min-height:44px}
.back-link:hover{color:var(--muted)}
.case-hero h1{font-size:clamp(42px,5.8vw,82px);font-weight:400;line-height:1.06;letter-spacing:-.06em;max-width:1100px;margin:48px 0 28px;text-wrap:balance}
.case-intro{font-size:clamp(17px,1.5vw,21px);color:var(--muted);max-width:760px;line-height:1.6}
.case-meta{display:grid;grid-template-columns:1fr 1.25fr 1.25fr 1fr;gap:32px;padding-block:26px;border-block:1px solid var(--line);margin:48px 0 40px}
.case-meta div{min-width:0}
.case-meta dt{font-size:9px;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}
.case-meta dd{margin:0;font-size:12px;line-height:1.65}
.case-visual{margin:0}
.case-visual img{aspect-ratio:900/580;object-fit:contain;background:#e5dfd3;border-radius:3px}
.case-visual figcaption{color:var(--muted);font-size:10px;margin-top:14px}
.case-story{padding-top:clamp(70px,8vw,120px)}
.case-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px)}
.case-split section>h2{margin-bottom:24px}
.case-split p,.case-prose p{font-size:17px;color:var(--muted);line-height:1.75}
.case-split p+p,.case-prose p+p{margin-top:20px}
.case-section{display:grid;grid-template-columns:1fr 2fr;gap:50px;margin-top:clamp(64px,8vw,115px)}
.case-section>h2{padding-top:6px}
.case-prose{max-width:720px}
.case-callout{margin:clamp(64px,8vw,115px) 0;padding-block:42px;border-block:1px solid var(--line);display:grid;grid-template-columns:1fr 2fr;gap:50px}
.case-callout>span{padding-top:8px;color:var(--muted)}
.case-callout p{font-size:clamp(28px,3.3vw,46px);line-height:1.2;letter-spacing:-.045em;max-width:800px}
.workflow-figure{margin:56px 0 0;padding:clamp(24px,3vw,42px);background:#eee9df;border-radius:3px}
.workflow-figure figcaption{display:flex;justify-content:space-between;gap:20px;margin-bottom:35px}
.workflow-figure figcaption>span:last-child{font-size:10px;color:var(--muted)}
.flow-diagram{display:flex;list-style:none;margin:0;padding:0;gap:23px}
.flow-diagram li{flex:1;position:relative;padding-top:16px;border-top:1px solid #bcb5a9;min-width:0;font-size:12px;line-height:1.55}
.flow-diagram li:not(:last-child):after{content:'→';position:absolute;right:-18px;top:32px;color:var(--muted)}
.flow-number{display:block;color:var(--muted);font-size:9px;margin-bottom:14px}
.flow-branch{margin:28px 0 0 auto;padding:12px 0 0 20px;border-left:1px solid #bcb5a9;max-width:440px;font-size:12px;color:var(--muted)}
.case-decisions{margin-top:clamp(64px,8vw,115px)}
.case-decisions>h2{margin-bottom:30px}
.decision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.decision-grid article{border-top:1px solid var(--line);padding-top:20px}
.decision-number{font-size:10px;color:var(--muted)}
.decision-grid h3{margin:25px 0 12px;font-size:19px;font-weight:400;letter-spacing:-.025em}
.decision-grid p{color:var(--muted);font-size:14px;line-height:1.7}
.scope-grid{display:grid;gap:25px;max-width:720px}
.scope-grid h3{font-weight:400;font-size:19px;margin-bottom:10px;letter-spacing:-.025em}
.scope-grid p{color:var(--muted);font-size:15px}
.case-outcome{border-top:1px solid var(--line);padding-top:38px}
.case-outcome .case-prose>p:first-child{font-size:clamp(23px,2.6vw,34px);color:var(--ink);line-height:1.35;letter-spacing:-.035em}
.case-prose .client-note{font-size:11px;line-height:1.65;margin-top:28px}
.project-navigation{margin-top:clamp(64px,8vw,110px);border-top:1px solid var(--line);padding-top:36px;display:grid;grid-template-columns:1fr 2fr;gap:50px;align-items:start}
.next-project{display:flex;flex-direction:column;gap:19px}
.next-project .eyebrow{color:var(--muted)}
.next-title{font-size:clamp(26px,3.4vw,48px);line-height:1.12;letter-spacing:-.045em;transition:opacity .25s;max-width:740px}
.next-project:hover .next-title{opacity:.65}

@media(max-width:1024px){
 .hero-top{max-width:100%}
 .case-meta{grid-template-columns:repeat(2,1fr);gap:24px 40px}
 .case-split{gap:48px}
 .decision-grid{grid-template-columns:repeat(2,1fr)}
 .flow-diagram{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
 .flow-diagram li:after{display:none}
 .flow-number:after{content:' /'}
 .case-section,.case-callout,.project-navigation{grid-template-columns:.65fr 2fr;gap:32px}
}
@media(max-width:768px){
 .header{padding-block:14px;min-height:72px}
 .hero{padding-top:50px}
 .hero h1{margin-top:42px}
 .hero-bottom{gap:32px}
 .hero-bottom p{max-width:400px}
 .project-featured .project-copy{gap:30px}
 .case-section,.case-callout,.project-navigation{grid-template-columns:1fr;gap:24px}
 .case-split{grid-template-columns:1fr;gap:44px}
 .case-split p,.case-prose p{font-size:16px}
 .case-hero h1{margin-top:30px}
 .case-visual img{aspect-ratio:900/680}
}
@media(max-width:540px){
 .header{padding-block:10px 6px;gap:3px;min-height:100px}
 .header .wordmark{display:inline-flex;min-height:35px;align-items:center}
 .header nav{gap:0}
 .header nav a{padding-block:0;font-size:10px}
 .hero{padding-top:36px}
 .hero h1{margin:35px 0 25px}
 .hero-bottom{align-items:flex-start;gap:25px}
 .hero-top{gap:15px}
 .project-title h3{font-size:19px}
 .project-featured .project-image{aspect-ratio:900/680}
 .project-featured .project-copy{display:block;padding-top:0}
 .project-featured .project-title{margin:22px 0 9px}
 .case-page .header{flex-direction:row;align-items:center;min-height:70px;gap:22px;padding-block:13px}
 .case-page .header nav{gap:14px;width:auto}
 .case-page .header nav a{font-size:9px}
 .case-hero{padding-top:30px}
 .case-hero h1{font-size:clamp(37px,9.8vw,48px);margin:28px 0 24px}
 .case-meta{margin:32px 0 28px;gap:24px 20px}
 .case-meta dd{font-size:11px}
 .case-meta dt{font-size:9px}
 .case-story{padding-top:60px}
 .case-callout{padding-block:30px}
 .workflow-figure{padding:24px;margin-top:34px}
 .workflow-figure figcaption{flex-direction:column;gap:8px;margin-bottom:26px}
 .flow-diagram{grid-template-columns:1fr;gap:0}
 .flow-diagram li{display:flex;align-items:baseline;gap:16px;padding-block:14px;font-size:13px}
 .flow-number{margin:0;min-width:20px}
 .flow-diagram li:not(:last-child):after{display:block;content:'↓';top:auto;bottom:-8px;right:0}
 .flow-branch{padding-left:16px;font-size:12px}
 .decision-grid{grid-template-columns:1fr;gap:28px}
 .decision-grid h3{margin-top:16px}
 .next-title{font-size:32px}
 .project-navigation{gap:28px}
 .email{overflow-wrap:anywhere}
}

/* Wordmark state: overlapping layers reserve the full name's width in both states. */
.header .wordmark { display:inline-grid; align-items:center; flex-shrink:0; }
.wordmark-full,.wordmark-short { grid-area:1/1; justify-self:start; transition:opacity 280ms var(--ease),transform 280ms var(--ease); }
.wordmark-full { opacity:1; transform:translateY(0); }
.wordmark-short { font-size:22px; letter-spacing:-.07em; opacity:0; transform:translateY(4px); }
.site-header.scrolled .wordmark-full { opacity:0; transform:translateY(-4px); }
.site-header.scrolled .wordmark-short { opacity:1; transform:translateY(0); }
.site-header:not(.header-ready) .wordmark-full,.site-header:not(.header-ready) .wordmark-short { transition:none; }
.loader.is-loading { display:flex; }

/* Reveals are opt-in only after the observer is ready. Without JS, everything is visible. */
.reveal-ready .reveal-item {
 opacity:0;
 transform:translateY(var(--reveal-distance,20px)) scale(var(--reveal-scale,1));
 transition:opacity 740ms var(--ease),transform 740ms var(--ease);
 transition-delay:var(--reveal-delay,0ms);
}
.reveal-ready .reveal-item.is-revealed,.reveal-ready .reveal-item:focus-within { opacity:1; transform:translateY(0) scale(1); }
.reveal-ready .reveal-item:focus-within { transition-delay:0ms; }
.reveal-ready .reveal-body { --reveal-distance:13px; }
.reveal-ready .reveal-media { --reveal-distance:24px; --reveal-scale:.99; transition-duration:800ms; }
.reveal-ready .project:nth-child(even) { --reveal-delay:80ms; }
@media(max-width:540px) {
 .case-page .header { gap:14px; }
 .case-page .header nav { gap:10px; }
 .reveal-ready .project:nth-child(even) { --reveal-delay:0ms; }
}
@media(prefers-reduced-motion:reduce) {
 .reveal-ready .reveal-item { opacity:1!important; transform:none!important; transition:none!important; }
 .wordmark-full,.wordmark-short { transform:none!important; transition:none!important; }
 .loader.is-loading { display:none; }
}
/* Final art direction: a cream canvas with color confined to project details. */
.header .wordmark { font-size:18px; font-weight:750; }
.header nav a { font-size:12px; letter-spacing:.085em; }
.case-page:has(.case-visual img[src$="document-workflow.svg"]) { --project-accent:#784F46; --project-tint:#E9DFD6; }
.case-page:has(.case-visual img[src$="product-information-platform.svg"]) { --project-accent:#4D5943; --project-tint:#E3E6DA; }
.case-page:has(.case-visual img[src$="document-processing.svg"]) { --project-accent:#465A68; --project-tint:#E1E7E9; }
.case-page:has(.case-visual img[src$="fintech-platform.svg"]) { --project-accent:#405B49; --project-tint:#DFE6DD; }
.case-page:has(.case-visual img[src$="3d-platform.svg"]) { --project-accent:#8B513A; --project-tint:#EADDD0; }
.case-page .case-topline>.eyebrow,
.case-page .decision-number,
.case-page .flow-number { color:var(--project-accent,var(--muted)); }
.case-page .workflow-figure { background:var(--project-tint,#EEE9DF); }
.case-page .flow-diagram li { border-color:var(--project-accent,var(--line)); }
.case-page .flow-diagram li:not(:last-child):after { color:var(--project-accent,var(--muted)); }
.case-page .flow-branch { border-color:var(--project-accent,var(--line)); }
@media(max-width:540px) {
 .header .wordmark { font-size:15px; }
 .header nav a { font-size:10px; letter-spacing:.06em; }
 .case-page .header nav a { font-size:9px; letter-spacing:.04em; }
 .wordmark-short { font-size:21px; }
}