/* One continuous artwork behind translucent, readable surfaces. */
body{background:#0c1012;isolation:isolate}
body::before{content:"";position:fixed;inset:-6%;z-index:-2;pointer-events:none;background:url('assets/hero.png') 70% center/cover no-repeat;opacity:.48;animation:ambient-drift 28s ease-in-out infinite alternate;will-change:transform}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(9,14,17,.8),rgba(9,14,17,.42) 55%,rgba(9,14,17,.2)),linear-gradient(0deg,rgba(8,12,15,.25),transparent 60%)}
header{background:rgba(17,23,27,.38);backdrop-filter:blur(20px) saturate(120%);-webkit-backdrop-filter:blur(20px) saturate(120%);border-color:#ffffff15}
.hero{background:transparent}
.hero-art{display:none}
.hero-copy{max-width:850px}
.hero-bottom{border-color:#ffffff22}
.section{background:rgba(14,20,23,.35);border-color:#ffffff18;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.work{background:rgba(14,20,23,.22);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.system{background:rgba(28,37,36,.38);backdrop-filter:blur(19px) saturate(115%);-webkit-backdrop-filter:blur(19px) saturate(115%)}
.outcomes{gap:22px}
.outcomes article,.steps article{padding:28px;border:1px solid #ffffff20;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 #ffffff12,0 14px 40px #00000012;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.outcomes article p,.steps article p{color:#bec4c3}
.tags span{border-color:#ffffff25;background:#ffffff05;color:#c6ccca}
.filters button{background:#ffffff07;border-color:#ffffff25;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.filters button.active{background:#eaf0ec;color:#19211e}
.project{padding:12px 12px 22px;border:1px solid #ffffff20;border-radius:20px;background:linear-gradient(140deg,#ffffff0d,#ffffff03);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 #ffffff12}
.project-info{padding:0 10px}.project-info p{color:#bac3be}.project button.open{background:#ffffff09;border-color:#ffffff30}
.visual{border:1px solid #ffffff22;border-radius:12px}.project:hover .visual{transform:translateY(-3px)}
.steps{gap:18px}.steps h3{font-size:22px}.steps article{padding:25px}
.pipeline{padding:30px;border:1px solid #ffffff1c;border-radius:18px;background:#ffffff04;box-shadow:inset 0 1px 0 #ffffff0c}
.pipeline p,.system-note{color:#b9c3bf}.system-note{border-color:#ffffff1c}
.contact{background:linear-gradient(120deg,rgba(255,103,61,.2),rgba(62,36,30,.3));color:#f4f4ef;backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%);border-top:1px solid #ffad873d}
.contact .eyebrow{color:#ffc4ae}.contact em{color:#ff895f}.contact p:not(.eyebrow){color:#cbd0cd}.contact .button.dark{background:#ff7549;color:#191b16}.contact .button.dark:hover{background:#ff936e;color:#111}
footer{background:rgba(12,17,20,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#b0bbb6}
dialog{background:rgba(22,29,31,.88);border:1px solid #ffffff30;box-shadow:inset 0 1px 0 #ffffff20,0 30px 100px #0008;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}
@keyframes ambient-drift{from{transform:translate3d(-1%,0,0) scale(1)}to{transform:translate3d(1%,2%,0) scale(1.045)}}
@media(min-width:1500px){body::before{background-position:80% center}}
@media(max-width:800px){body::before{background-position:66% center;opacity:.34;animation-duration:35s}body::after{background:linear-gradient(90deg,#091015b8,#09101550)}.section{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.outcomes article,.steps article{padding:24px}.project-info h3{font-size:22px}.pipeline{padding:25px}.hero{min-height:690px}.hero-bottom{margin-top:120px}.contact{backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}}
@media(prefers-reduced-motion:reduce){body::before{animation:none;will-change:auto}}
@supports not (backdrop-filter:blur(1px)){.outcomes article,.steps article,.project{background:rgba(25,32,35,.88)}.section{background:rgba(14,20,23,.72)}}

/* Safari: keep the fixed background above the body paint, below the content. */
body::before{z-index:0}
body::after{z-index:1}
body>header,body>main,body>footer{position:relative;z-index:2}
@media(max-width:800px){
  body::before{
    inset:0;
    height:100vh;
    height:100lvh;
    background-position:82% center;
    background-size:auto 100%;
    opacity:.72;
    animation:mobile-ambient-drift 16s ease-in-out infinite alternate;
    will-change:auto;
  }
  body::after{
    background:linear-gradient(90deg,rgba(9,16,21,.65),rgba(9,16,21,.18)),linear-gradient(0deg,rgba(9,16,21,.2),transparent 65%);
  }
  .hero-copy{text-shadow:0 2px 16px rgba(0,0,0,.45)}
  .hero-copy .button{text-shadow:none}
}

@keyframes mobile-ambient-drift{
  from{transform:translate3d(0,-.8%,0) scale(1.02)}
  to{transform:translate3d(-4%,1.2%,0) scale(1.08)}
}
@media(prefers-reduced-motion:reduce){body::before{animation:none;transform:none}}

/* Keep explicit line breaks on mobile; hiding them joins adjacent words. */
@media(max-width:800px){
  .outcomes h3 br,.contact br{display:revert}
}