:root{--paper:#f7f7f4;--ink:#111;--soft:#ebe8e1;--muted:#77756f;--dark:#111;--max:1600px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Red Hat Display',Arial,Helvetica,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.page{overflow:hidden}.hero{min-height:58vh;padding:34px 7vw;display:flex;flex-direction:column;justify-content:space-between}.nav{display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;gap:12px;align-items:center;font-size:14px;line-height:1.05;opacity:0;animation:navIn .7s cubic-bezier(.22,.8,.25,1) .08s forwards}.mark{width:44px;height:44px;background:#111;color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px}.links{display:flex;gap:28px;align-items:center;font-size:13px;opacity:0;animation:navIn .7s cubic-bezier(.22,.8,.25,1) .16s forwards}.links a:last-child{background:#111;color:#fff;padding:10px 22px;border-radius:999px}.hero-main{display:block;padding-top:7vh}.hero h1{margin:0;max-width:1100px;font-size:clamp(72px,9vw,138px);line-height:.82;letter-spacing:-0.015em;font-weight:800}.hero h1 span{display:block;opacity:0;transform:translateY(28px);filter:blur(5px);animation:titleIn .9s cubic-bezier(.16,1,.3,1) forwards}.hero h1 span:nth-child(1){animation-delay:.16s}.hero h1 span:nth-child(2){animation-delay:.25s}.hero h1 span:nth-child(3){animation-delay:.34s}.tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 14px;color:#aaa;font-size:11px;text-transform:uppercase;letter-spacing:.05em}.tags span{opacity:0;transform:translateY(8px);animation:tagIn .55s cubic-bezier(.22,.8,.25,1) forwards}.tags span:nth-child(1){animation-delay:.52s}.tags span:nth-child(2){animation-delay:.57s}.tags span:nth-child(3){animation-delay:.62s}.tags span:nth-child(4){animation-delay:.67s}.tags span:nth-child(5){animation-delay:.72s}.collage-wrap{position:relative;height:52vh;min-height:430px;overflow:hidden;z-index:2}.tilt-stage{position:absolute;left:-6vw;top:24px;width:112vw;height:56vh;transform:rotate(-2.6deg);transform-origin:center top}.marquee{display:flex;width:max-content;height:100%;animation:scrollCollage 40s linear infinite;will-change:transform}.marquee:hover{animation-play-state:paused}.group{display:grid;grid-template-columns:repeat(12,14vw);width:max-content;height:100%;flex:none;gap:0;column-gap:0;row-gap:0}.column{display:grid;height:100%;min-width:0;gap:0;column-gap:0;row-gap:0}.column.two{grid-template-rows:1fr 1fr}.column.three{grid-template-rows:repeat(3,1fr)}.tile{position:relative;display:block;overflow:hidden;min-height:0;margin:0;padding:0;line-height:0}.tile img{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);max-width:none;object-fit:cover;display:block;transition:transform .35s ease}.tile:hover img{transform:scale(1.025)}.tile:after{display:none!important;content:none!important}.tile-label{display:none!important}.after-collage{position:relative;background:var(--soft);padding:72px 7vw 110px;z-index:1}.after-collage:before{content:"";position:absolute;left:-5%;top:-4.8vw;width:110%;height:8vw;background:var(--soft);border-radius:50% 50% 0 0/100% 100% 0 0;z-index:-1}.work-intro{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:42px}.work-intro p{margin:0;max-width:650px;font-size:clamp(28px,4vw,58px);line-height:1;letter-spacing:-0.015em}.work-intro span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#777}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px 18px;align-items:start}.project-card{display:block}.project-media{position:relative;aspect-ratio:1.22;overflow:hidden;border-radius:18px;background:#ddd;transition:transform .35s cubic-bezier(.2,.8,.2,1)}.project-media img{width:100%;height:100%;object-fit:cover}.project-card:hover .project-media{transform:none}.project-copy{padding-top:14px}.project-copy h2{margin:0;font-size:clamp(22px,2.1vw,36px);letter-spacing:-0.015em;line-height:1}.project-copy p{margin:7px 0 0;font-size:14px;line-height:1.4;color:#6d6a64;max-width:480px}.pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.pill{border:1px solid rgba(0,0,0,.15);border-radius:999px;padding:6px 9px;font-size:10px;text-transform:uppercase;letter-spacing:.04em}.bio-section{background:#111;color:#f5f2ea;padding:clamp(90px,12vw,180px) 7vw}.bio-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(40px,8vw,130px);align-items:start}.bio-photo{aspect-ratio:1;border-radius:18px;overflow:hidden;background:#222}.bio-photo img{width:100%;height:100%;object-fit:cover}.bio-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#888;margin-bottom:24px}.bio-copy h2{margin:0;max-width:900px;font-size:clamp(38px,5.2vw,76px);line-height:.98;letter-spacing:-0.015em;font-weight:650}.bio-copy h2 .muted{color:#555}.bio-bottom{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-top:42px}.bio-bottom p{margin:0;max-width:610px;color:#aaa;font-size:16px;line-height:1.55}.bio-link{border-bottom:1px solid #555;padding-bottom:7px;font-size:13px}.tools-section{background:#111;color:#f5f2ea;padding:0 7vw clamp(76px,9vw,120px)}.tools-rule{border-top:1px solid #2d2d2d;padding-top:34px}.tools-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:24px}.tools-head h2{margin:0;font-size:clamp(25px,3vw,42px);line-height:1;letter-spacing:-0.015em;font-weight:620}.tools-head p{margin:0;color:#777;font-size:12px}.tools-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #2d2d2d}.tool-card{min-height:125px;padding:20px 22px 18px 0;border-bottom:1px solid #2d2d2d;display:grid;grid-template-columns:54px 1fr;gap:15px;align-items:center}.tool-card:not(:last-child){border-right:1px solid #2d2d2d;margin-right:22px}.tool-icon{width:54px;height:54px;border-radius:13px;overflow:hidden}.tool-icon img{width:100%;height:100%;object-fit:cover}.tool-card strong{display:block;font-size:19px;letter-spacing:-0.015em}.tool-card span{display:block;color:#777;font-size:12px;margin-top:5px}footer{background:#0a0a0a;color:#f5f2ea;padding:clamp(70px,9vw,120px) 7vw 28px}.footer-main{display:grid;grid-template-columns:1.5fr .5fr;gap:40px;align-items:end;padding-bottom:70px}.footer-main h2{margin:0;font-size:clamp(54px,8.5vw,130px);line-height:.83;letter-spacing:-0.015em;font-weight:700}.footer-side{display:flex;flex-direction:column;gap:12px;align-items:flex-start}.footer-side p{color:#888;line-height:1.45;max-width:310px;margin:0 0 12px;font-size:14px}.footer-cta{background:#f5f2ea;color:#111;padding:12px 18px;border-radius:999px;font-size:13px}.footer-bottom{border-top:1px solid #242424;padding-top:18px;display:flex;justify-content:space-between;gap:20px;color:#666;font-size:11px;text-transform:uppercase;letter-spacing:.05em}.footer-links{display:flex;gap:18px}.case-hero{padding:28px 7vw 90px}.case-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:10vh}.case-kicker{font-size:12px;color:#777;text-transform:uppercase;letter-spacing:.08em}.case-title{font-size:clamp(64px,10vw,160px);line-height:.82;letter-spacing:-0.015em;margin:18px 0 35px}.case-meta{display:flex;gap:40px;flex-wrap:wrap;color:#777;font-size:13px}.case-image{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:22px}.case-body{max-width:900px;margin:0 auto;padding:90px 24px 120px;font-size:19px;line-height:1.65}.case-body h2{font-size:clamp(34px,5vw,62px);line-height:1;letter-spacing:-0.015em;margin:70px 0 20px}.case-tldr{background:#ece9e2;border-radius:18px;padding:26px;margin-bottom:50px}.case-tldr ul{margin:12px 0 0;padding-left:18px}.case-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:50px 0}.case-gallery img{border-radius:14px;width:100%;height:100%;object-fit:cover}.journal{padding:34px 7vw 110px}.journal h1{font-size:clamp(62px,9vw,130px);letter-spacing:-0.015em;line-height:.85;margin:12vh 0 70px}.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.journal-card{border-top:1px solid #ccc;padding-top:18px}.journal-card img{aspect-ratio:1.35;object-fit:cover;border-radius:14px;margin-bottom:18px}.journal-card small{color:#777;text-transform:uppercase}.journal-card h2{font-size:28px;letter-spacing:-0.015em}.journal-card p{color:#666;line-height:1.5}.reveal{opacity:0;transform:translateY(44px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}.reveal.visible{opacity:1;transform:none}@keyframes scrollCollage{from{transform:translateX(0)}to{transform:translateX(-50%)}}@keyframes titleIn{to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes tagIn{to{opacity:1;transform:translateY(0)}}@keyframes navIn{from{transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1050px){.project-grid{grid-template-columns:repeat(2,1fr)}.group{grid-template-columns:repeat(12,24vw)}}@media(max-width:760px){.hero{padding:24px 20px}.links a:not(:last-child){display:none}.hero h1{font-size:clamp(62px,20vw,100px)}.collage-wrap{height:54vh}.tilt-stage{left:-28vw;width:156vw;height:58vh}.group{grid-template-columns:repeat(12,40vw)}.after-collage{padding:58px 20px 80px}.after-collage:before{top:-8vw;height:12vw}.work-intro{display:block}.work-intro span{display:block;margin-top:16px}.project-grid{grid-template-columns:1fr}.bio-section{padding:82px 20px}.bio-grid{grid-template-columns:1fr}.bio-photo{max-width:420px}.bio-bottom{grid-template-columns:1fr}.tools-section{padding-left:20px;padding-right:20px}.tools-head{display:block}.tools-head p{margin-top:10px}.tools-row{grid-template-columns:1fr}.tool-card:not(:last-child){border-right:0;margin-right:0}footer{padding-left:20px;padding-right:20px}.footer-main{grid-template-columns:1fr}.footer-bottom{display:block}.footer-links{margin-top:12px}.case-hero,.journal{padding-left:20px;padding-right:20px}.case-gallery,.journal-grid{grid-template-columns:1fr}}


/* Under construction landing page */
.construction-page{
  min-height:100svh;
  background:#f7f5ef;
  color:#111;
  display:flex;
  flex-direction:column;
  padding:28px clamp(20px,5vw,72px);
  overflow:hidden;
}
.construction-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  font-size:13px;
}
.construction-brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:650;
  letter-spacing:-0.015em;
}
.construction-mark{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  background:#111;
  color:#fff;
  font-size:14px;
  font-weight:800;
}
.construction-status{
  display:flex;
  align-items:center;
  gap:9px;
  color:#77746d;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.construction-status::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#111;
  animation:constructionPulse 2s ease-in-out infinite;
}
.construction-main{
  flex:1;
  display:flex;
  align-items:center;
  padding:10vh 0 8vh;
}
.construction-copy{width:min(1150px,100%)}
.construction-copy h1{
  margin:0;
  max-width:1050px;
  font-size:clamp(72px,11vw,170px);
  line-height:.82;
  letter-spacing:-0.015em;
  font-weight:760;
}
.construction-copy p{
  max-width:590px;
  margin:34px 0 0;
  font-size:clamp(17px,1.7vw,24px);
  line-height:1.35;
  letter-spacing:-0.015em;
  color:#6f6c65;
}
.construction-bottom{
  border-top:1px solid rgba(17,17,17,.13);
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:12px;
  color:#76736c;
}
.construction-bottom a{
  color:#111;
  text-decoration:none;
  border-bottom:1px solid rgba(17,17,17,.35);
  padding-bottom:3px;
}
.construction-copy h1 span,
.construction-copy p,
.construction-top,
.construction-bottom{
  opacity:0;
  transform:translateY(18px);
  animation:constructionIn .85s cubic-bezier(.16,1,.3,1) forwards;
}
.construction-top{animation-delay:.05s}
.construction-copy h1 span{display:block}
.construction-copy h1 span:nth-child(1){animation-delay:.12s}
.construction-copy h1 span:nth-child(2){animation-delay:.20s}
.construction-copy p{animation-delay:.32s}
.construction-bottom{animation-delay:.42s}
@keyframes constructionIn{to{opacity:1;transform:none}}
@keyframes constructionPulse{
  0%,100%{opacity:.3;transform:scale(.85)}
  50%{opacity:1;transform:scale(1)}
}
@media(max-width:700px){
  .construction-page{padding:20px}
  .construction-status{max-width:150px;text-align:right;line-height:1.3}
  .construction-main{padding:10vh 0}
  .construction-copy h1{font-size:clamp(68px,21vw,105px)}
  .construction-bottom{display:block}
  .construction-bottom a{display:inline-block;margin-top:12px}
}


/* CMS-editable brand and homepage copy */
.brand-logo{
  width:44px;
  height:44px;
  object-fit:contain;
  display:block;
  flex:0 0 auto;
}
.construction-logo{
  width:40px;
  height:40px;
  object-fit:contain;
  display:block;
  flex:0 0 auto;
}
.hero-intro{
  max-width:620px;
  margin:28px 0 0;
  font-size:clamp(17px,1.55vw,23px);
  line-height:1.4;
  letter-spacing:-0.015em;
  color:#6f6c65;
}

/* v55: project role pills, tool detail pages, and Decap live previews */
.role-pill{background:#111;color:#fff;border-color:#111}
.case-project-tags{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.case-project-tags .pill{padding:7px 11px;font-size:10px}
.tool-detail-heading{display:grid;grid-template-columns:110px minmax(0,1fr);gap:28px;align-items:start;margin:18px 0 58px}
.tool-detail-heading .case-title{margin:0 0 20px}
.tool-detail-icon{width:110px;height:110px;border-radius:24px;object-fit:cover;background:#e6e3dc}
.tool-detail-description{max-width:720px;margin:0;color:#6d6a64;font-size:clamp(18px,2vw,28px);line-height:1.35;letter-spacing:-0.015em}
.tool-detail-cta{display:inline-flex;align-items:center;margin-top:24px;background:#111;color:#fff;border:1px solid #111;border-radius:999px;padding:10px 16px;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.tool-detail-image{margin-top:0}
.cms-site-preview{min-height:100%;background:var(--paper);color:var(--ink)}
.cms-site-preview .case-nav a{pointer-events:none}
@media(max-width:760px){.tool-detail-heading{grid-template-columns:70px minmax(0,1fr);gap:18px;margin-bottom:40px}.tool-detail-icon{width:70px;height:70px;border-radius:17px}.case-project-tags{margin-bottom:14px}}

/* v64: split hero hierarchy + one continuous image texture across the full title block. */
.hero-gradient-title{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  width:max-content;
  max-width:100%;
  overflow:visible;
}
.hero-gradient-title .hero-gradient-fill{
  background-image:url('/uploads/hero-gradient-texture.png');
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  overflow:visible;
  will-change:background-size,background-position,transform,opacity,filter;
  opacity:0;
  transform:translateY(28px);
  filter:blur(5px);
  animation:titleIn .9s cubic-bezier(.16,1,.3,1) forwards;
}
.hero .hero-greeting{
  margin:0 0 clamp(8px,1vw,14px);
  max-width:none;
  white-space:nowrap;
  font-size:clamp(44px,6.1vw,94px);
  line-height:.94;
  letter-spacing:-0.015em;
  font-weight:760;
  animation-delay:.16s;
}
.hero .hero-name{
  margin:0;
  max-width:none;
  overflow:visible;
  white-space:nowrap;
  font-size:clamp(72px,9vw,138px);
  line-height:.9;
  letter-spacing:-0.015em;
  font-weight:800;
}
.hero .hero-name .hero-gradient-fill{
  display:block;
}
.hero .hero-name .hero-gradient-fill:nth-child(1){animation-delay:.25s}
.hero .hero-name .hero-gradient-fill:nth-child(2){animation-delay:.34s}

/* Neutralize the older generic H1 span entrance rules for this rebuilt title. */
.hero .hero-name span:nth-child(1),
.hero .hero-name span:nth-child(2){
  animation-name:titleIn;
}

@media(max-width:760px){
  .hero .hero-greeting{
    font-size:clamp(38px,12vw,64px);
    white-space:normal;
  }
  .hero .hero-name{
    font-size:clamp(62px,20vw,100px);
    white-space:normal;
  }
}
@media(prefers-reduced-motion:reduce){
  .hero-gradient-title .hero-gradient-fill{
    will-change:auto;
  }
}


/* v69: final mockup-based hero. Source of truth: Aug 13 layout mockup. */
:root{--hero-accent:#f45a2a}
.hero{
  min-height:66vh;
  padding:34px 7vw 0;
}
.hero-main{
  display:block;
  padding-top:clamp(62px,8vh,112px);
  padding-bottom:clamp(42px,6vh,78px);
}
.hero-gradient-title{
  display:block;
  width:min(1180px,100%);
}
.hero .hero-greeting{
  margin:0 0 clamp(12px,1.2vw,20px);
  color:var(--ink);
  -webkit-text-fill-color:currentColor;
  background:none;
  opacity:0;
  transform:translateY(18px);
  filter:blur(3px);
  animation:titleIn .75s cubic-bezier(.16,1,.3,1) .08s forwards;
  font-size:clamp(34px,3.7vw,58px);
  line-height:.98;
  letter-spacing:-0.015em;
  font-weight:760;
  white-space:normal;
}
.hero .hero-name{
  margin:0;
  max-width:1180px;
  font-size:clamp(88px,10.8vw,168px);
  line-height:.84;
  letter-spacing:-0.015em;
  font-weight:820;
  white-space:normal;
}
.hero .hero-name .hero-gradient-fill{
  display:block;
  background-image:url('/uploads/hero-gradient-texture.png');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.hero-intro{
  max-width:970px;
  margin:clamp(28px,3vw,42px) 0 0;
  color:var(--ink);
  font-size:clamp(25px,2.75vw,44px);
  line-height:1.08;
  letter-spacing:-0.015em;
  font-weight:450;
}
.hero-rotating-word{
  display:inline-block;
  position:relative;
  color:var(--hero-accent);
  font-family:'Red Hat Display',Arial,Helvetica,sans-serif;
  font-size:1em;
  font-style:normal;
  font-weight:600;
  line-height:inherit;
  letter-spacing:-0.015em;
  vertical-align:baseline;
  transform-origin:50% 70%;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),filter .18s ease,opacity .18s ease;
}
.hero-rotating-word.is-changing{
  transform:translateY(-.08em) skewX(-4deg);
  filter:blur(2px);
  opacity:.55;
}
.collage-wrap{
  height:38vh;
  min-height:330px;
}
.tilt-stage{
  top:8px;
  height:43vh;
  transform:rotate(-2.6deg);
}
@media(max-width:760px){
  .hero{min-height:auto;padding:24px 20px 0}
  .hero-main{padding-top:clamp(58px,12vh,90px);padding-bottom:44px}
  .hero .hero-greeting{font-size:clamp(31px,9.5vw,46px);margin-bottom:12px}
  .hero .hero-name{font-size:clamp(68px,20vw,104px);line-height:.86}
  .hero-intro{font-size:clamp(23px,7.2vw,34px);line-height:1.1;margin-top:28px}
  .collage-wrap{height:42vh;min-height:300px}
  .tilt-stage{top:6px;height:47vh}
}
@media(prefers-reduced-motion:reduce){
  .hero-rotating-word{transition:none}
}

/* v111: consolidated moving-gallery foundation */
body{overflow-x:clip}
.page{overflow:visible}

.hero-collage-sequence{
  position:relative;
  height:265svh;
  background:var(--paper);
}

.hero-collage-stage{
  --depth-handoff:0;
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  background:var(--paper);
  isolation:isolate;
}

.hero-collage-stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:var(--soft);
  opacity:var(--depth-handoff);
}

.hero-collage-stage > .hero{
  position:absolute;
  inset:0 0 auto;
  z-index:2;
  width:100%;
  will-change:transform,opacity;
}

.hero-collage-stage > .collage-wrap{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:4;
  width:100%;
  height:38svh;
  min-height:330px;
  overflow:hidden;
  transform-origin:center;
  will-change:transform;
  backface-visibility:hidden;
}

.hero-collage-sequence .collage-depth-scale{
  position:absolute;
  inset:0;
  overflow:visible;
  transform-origin:center;
  will-change:transform;
  backface-visibility:hidden;
}

.hero-collage-sequence .tilt-stage{
  left:-6vw;
  width:112vw;
  top:50%;
  translate:0 -50%;
  height:auto;
  min-height:0;
  overflow:visible;
  transform:rotate(-2.6deg);
  transform-origin:center;
  will-change:transform;
}

.hero-collage-sequence .marquee{
  height:auto;
  align-items:flex-start;
  animation-duration:46s;
}

.hero-collage-sequence .marquee:hover{
  animation-play-state:running;
}

.hero-collage-sequence .group{
  grid-template-columns:repeat(16,clamp(110px,11vw,180px));
  height:auto;
  align-items:start;
}

.hero-collage-sequence .column,
.hero-collage-sequence .column.two,
.hero-collage-sequence .column.three{
  display:flex;
  flex-direction:column;
  height:auto;
  gap:0;
}

.hero-collage-sequence .tile,
.hero-collage-sequence .tile-extra{
  display:block!important;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  flex:0 0 auto;
}

.hero-collage-sequence .tile img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
}

.hero-collage-sequence + .after-collage{
  position:relative;
  z-index:5;
  padding-top:48px;
}

@media(max-width:1050px){
  .hero-collage-sequence .group{
    grid-template-columns:repeat(16,clamp(105px,15vw,155px));
  }
}

@media(max-width:760px){
  .hero-collage-sequence{
    height:265svh;
  }

  .hero-collage-stage > .collage-wrap{
    height:42svh;
    min-height:300px;
  }

  .hero-collage-sequence .tilt-stage{
    left:-12vw;
    width:124vw;
  }

  .hero-collage-sequence .group{
    grid-template-columns:repeat(16,24vw);
  }

  .hero-collage-sequence + .after-collage{
    padding-top:42px;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-collage-sequence{height:auto}
  .hero-collage-stage{position:relative;height:auto;overflow:visible}
  .hero-collage-stage::after{display:none}
  .hero-collage-stage > .hero{position:relative;inset:auto;transform:none!important;opacity:1!important}
  .hero-collage-stage > .collage-wrap{position:relative;left:auto;right:auto;bottom:auto;transform:none!important}
  .hero-collage-sequence .collage-depth-scale{transform:none!important}
  .hero-collage-sequence .tilt-stage{transform:rotate(-2.6deg)!important}
}

/* v75: shared navigation, mobile hamburger, project detail reorder, all-projects index */

/* One nav position everywhere. Home, projects, tools, journal index/detail all
   share the same 34px / 7vw desktop origin and 24px / 20px mobile origin. */
.case-hero,
.journal,
.projects-index{
  padding-left:7vw;
  padding-right:7vw;
}
.case-hero{padding-top:34px}
.projects-index{padding-top:34px;padding-bottom:110px}
.nav{
  position:relative;
  z-index:80;
  min-height:44px;
}
.menu-toggle{
  display:none;
  appearance:none;
  border:0;
  background:transparent;
  width:44px;
  height:44px;
  padding:10px 8px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:7px;
  cursor:pointer;
}
.menu-toggle span{
  display:block;
  width:24px;
  height:2px;
  background:var(--ink);
  border-radius:999px;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s ease;
}
.nav.is-open .menu-toggle span:first-child{transform:translateY(4.5px) rotate(45deg)}
.nav.is-open .menu-toggle span:last-child{transform:translateY(-4.5px) rotate(-45deg)}

/* Project page: image first, then the content hierarchy. */
.project-detail-hero{
  padding-bottom:0;
}
.project-detail-hero .project-featured-image{
  margin-top:clamp(54px,7vh,96px);
}
.project-detail-heading{
  width:min(1180px,100%);
  margin:clamp(54px,7vw,105px) auto 0;
  padding-bottom:clamp(58px,7vw,100px);
}
.project-detail-heading .case-title{
  margin:0 0 34px;
}
.project-client{
  display:grid;
  grid-template-columns:minmax(80px,120px) 1fr;
  align-items:baseline;
  gap:18px;
  margin-bottom:20px;
  color:var(--ink);
  font-size:clamp(15px,1.4vw,20px);
}
.case-meta-label{
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.project-detail-heading .case-project-tags{
  margin:0;
}
.project-case-body{
  padding-top:0;
}

/* Homepage "View all projects" button. */
.all-projects-cta{
  display:flex;
  justify-content:center;
  margin-top:clamp(48px,6vw,80px);
}
.all-projects-cta a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--ink);
  color:#fff;
  border:1px solid var(--ink);
  border-radius:999px;
  padding:13px 20px;
  font-size:13px;
  line-height:1;
  transition:transform .25s ease,background .25s ease,color .25s ease;
}
.all-projects-cta a:hover{
  transform:translateY(-2px);
  background:transparent;
  color:var(--ink);
}

/* All-projects page includes every project, independent of homepage featured state. */
.projects-index-head{
  width:min(1180px,100%);
  margin:clamp(90px,13vh,170px) 0 clamp(52px,6vw,82px);
}
.projects-index-head h1{
  margin:0;
  font-size:clamp(70px,10vw,150px);
  line-height:.84;
  letter-spacing:-0.015em;
}
.projects-index-head p{
  margin:24px 0 0;
  color:var(--muted);
  font-size:14px;
}
.projects-index-grid{
  width:100%;
}

@media(max-width:760px){
  .hero,
  .case-hero,
  .journal,
  .projects-index{
    padding-left:20px;
    padding-right:20px;
    padding-top:24px;
  }

  /* Replace the condensed mobile link row with a real hamburger menu. */
  .menu-toggle{
    display:flex;
    margin-left:auto;
    opacity:0;
    animation:navIn .7s cubic-bezier(.22,.8,.25,1) .16s forwards;
  }
  .nav .links{
    position:absolute;
    top:calc(100% + 12px);
    left:0;
    right:0;
    z-index:100;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:10px;
    background:rgba(247,247,244,.98);
    border:1px solid rgba(17,17,17,.10);
    border-radius:18px;
    box-shadow:0 18px 45px rgba(0,0,0,.10);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px) scale(.985);
    transform-origin:top center;
    animation:none;
    transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1),visibility .22s;
  }
  .nav.is-open .links{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }
  .nav .links a,
  .nav .links a:not(:last-child){
    display:block;
    width:100%;
    padding:14px 13px;
    border-radius:12px;
    font-size:14px;
  }
  .nav .links a:last-child{
    margin-top:4px;
    padding:14px 13px;
    text-align:center;
  }

  .project-detail-hero .project-featured-image{
    margin-top:44px;
    border-radius:16px;
    aspect-ratio:4 / 3;
  }
  .project-detail-heading{
    margin-top:44px;
    padding-bottom:58px;
  }
  .project-detail-heading .case-title{
    font-size:clamp(52px,16vw,82px);
    line-height:.86;
    margin-bottom:28px;
  }
  .project-client{
    grid-template-columns:72px 1fr;
    margin-bottom:18px;
  }
  .projects-index{
    padding-bottom:80px;
  }
  .projects-index-head{
    margin:70px 0 44px;
  }
  .projects-index-head h1{
    font-size:clamp(58px,18vw,88px);
  }
}

/* v76: tighter hero rhythm, almost no dead-air handoff, editable index copy */

/* The base hero is a flex column with space-between. On desktop that pushes the
   copy too far toward the bottom of the screen. Keep the nav at the same spot,
   but let the hero copy follow it naturally. */
@media(min-width:761px){
  .hero-collage-stage > .hero{
    justify-content:flex-start;
  }
  .hero-collage-stage > .hero .hero-main{
    padding-top:clamp(54px,7vh,88px);
    padding-bottom:clamp(30px,4vh,54px);
  }
}

/* Shorter scroll runway. The gallery wall now remains full-screen until the
   final portion of the pinned sequence, then hands directly into projects. */
.hero-collage-sequence{
  height:220svh;
}
.hero-collage-sequence + .after-collage{
  padding-top:26px;
}
.after-collage{
  padding-bottom:96px;
}
.work-intro{
  margin-bottom:32px;
}

.journal-index-head{
  margin:clamp(78px,10vh,130px) 0 clamp(48px,5vw,70px);
  max-width:1180px;
}
.journal-index-head h1{
  margin:0;
}
.journal-index-head p{
  max-width:680px;
  margin:24px 0 0;
  color:var(--muted);
  font-size:clamp(16px,1.5vw,21px);
  line-height:1.5;
}
.projects-index-head p{
  max-width:680px;
  font-size:clamp(16px,1.5vw,21px);
  line-height:1.5;
}

@media(max-width:760px){
  .hero-collage-sequence{
    height:235svh;
  }
  .hero-collage-sequence + .after-collage{
    padding-top:22px;
  }
  .after-collage{
    padding-bottom:72px;
  }
  .work-intro{
    margin-bottom:28px;
  }
  .journal-index-head{
    margin:58px 0 40px;
  }
}

/* v78: single-stroke Phill logo draw-on hover */
.brand-logo-animated{
  color:var(--ink);
  overflow:visible;
}
.brand-logo-path{
  fill:none;
  stroke:currentColor;
  stroke-dasharray:100;
  stroke-dashoffset:0;
}

/* Idle = fully drawn. A fresh hover/focus restarts the supplied single-stroke
   draw-on motion. */
@media (hover:hover) and (pointer:fine){
  .brand:hover .brand-logo-path{
    animation:brandLogoDrawOn 1.4s cubic-bezier(.65,0,.35,1) both;
  }
}
.brand:focus-visible .brand-logo-path{
  animation:brandLogoDrawOn 1.4s cubic-bezier(.65,0,.35,1) both;
}

@keyframes brandLogoDrawOn{
  from{stroke-dashoffset:100}
  to{stroke-dashoffset:0}
}

@media (prefers-reduced-motion:reduce){
  .brand:hover .brand-logo-path,
  .brand:focus-visible .brand-logo-path{
    animation:none;
    stroke-dashoffset:0;
  }
}

/* v82: fluid logo loader
   The draw and fade overlap, and the scroll lock is released the instant the
   exit starts. No hidden 400ms "dead" period after the loader disappears. */
.site-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background:var(--paper,#f7f7f4);
  color:var(--ink,#111);
  opacity:1;
  pointer-events:auto;
  will-change:opacity;
  transition:opacity .34s cubic-bezier(.22,.61,.36,1);
}

.site-loader-logo{
  width:clamp(76px,8vw,118px);
  height:auto;
  overflow:visible;
  opacity:0;
  transform:scale(.985);
  will-change:opacity,transform;
  transition:
    opacity .14s ease-out,
    transform .42s cubic-bezier(.16,1,.3,1);
}

.site-loader-path{
  fill:none;
  stroke:currentColor;
  stroke-dasharray:100;
  stroke-dashoffset:100;
}

.site-loader.is-running .site-loader-logo{
  opacity:1;
  transform:scale(1);
}

.site-loader.is-running .site-loader-path{
  animation:siteLoaderDrawFluid 1.08s cubic-bezier(.4,0,.2,1) forwards;
}

/* Fade begins while the last portion of the stroke is completing. */
.site-loader.is-leaving{
  opacity:0;
  pointer-events:none;
}

.site-loader.is-leaving .site-loader-logo{
  transform:scale(1.025);
}

@keyframes siteLoaderDrawFluid{
  from{stroke-dashoffset:100}
  to{stroke-dashoffset:0}
}

/* Lock only while the intro is actually blocking the screen. JS removes this
   class the moment the fade begins, not after it finishes. */
html.loader-forced,
html.loader-forced body{
  overflow:hidden;
}

@media(max-width:760px){
  .site-loader-logo{width:82px}
}

@media(prefers-reduced-motion:reduce){
  .site-loader-logo{
    opacity:1;
    transform:none;
    transition:none;
  }
  .site-loader-path{
    stroke-dashoffset:0;
    animation:none!important;
  }
  .site-loader{
    transition:opacity .16s ease;
  }
}

/* v87: smaller hero type + nav hover states */

/* Pull the hero typography back while keeping the same black-nav /
   white-panel composition from v85. */
@media(min-width:761px){
  .hero-collage-stage > .hero .hero-greeting{
    font-size:clamp(26px,2vw,36px) !important;
    margin-bottom:clamp(9px,.7vw,12px);
  }

  .hero-collage-stage > .hero .hero-name{
    max-width:1160px !important;
    font-size:clamp(84px,8vw,138px) !important;
    line-height:.84 !important;
    letter-spacing:-0.015em !important;
  }

  .hero-collage-stage > .hero .hero-intro{
    max-width:900px !important;
    margin-top:clamp(22px,1.8vw,30px);
    font-size:clamp(21px,1.72vw,30px);
    line-height:1.08;
    letter-spacing:-0.015em;
    font-weight:560;
  }

  /* Give the standard nav links a subtle animated underline and a tiny lift. */
  .hero-collage-stage > .hero .links a:not(:last-child){
    position:relative;
    display:inline-flex;
    align-items:center;
    opacity:.82;
    transition:
      opacity .22s ease,
      transform .24s cubic-bezier(.2,.8,.2,1);
  }

  .hero-collage-stage > .hero .links a:not(:last-child)::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-7px;
    height:2px;
    border-radius:999px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .28s cubic-bezier(.2,.8,.2,1);
  }

  .hero-collage-stage > .hero .links a:not(:last-child):hover,
  .hero-collage-stage > .hero .links a:not(:last-child):focus-visible{
    opacity:1;
    transform:translateY(-1px);
  }

  .hero-collage-stage > .hero .links a:not(:last-child):hover::after,
  .hero-collage-stage > .hero .links a:not(:last-child):focus-visible::after{
    transform:scaleX(1);
  }

  /* Contact keeps the pill treatment but gets its own clear hover response. */
  .hero-collage-stage > .hero .links a:last-child{
    transition:
      background .24s ease,
      color .24s ease,
      transform .24s cubic-bezier(.2,.8,.2,1),
      box-shadow .24s ease;
  }

  .hero-collage-stage > .hero .links a:last-child:hover,
  .hero-collage-stage > .hero .links a:last-child:focus-visible{
    background:#deded9 !important;
    color:#111 !important;
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(0,0,0,.18);
  }
}

@media(min-width:761px) and (max-width:1100px){
  .hero-collage-stage > .hero .hero-name{
    font-size:clamp(78px,9.8vw,112px) !important;
  }

  .hero-collage-stage > .hero .hero-intro{
    font-size:clamp(20px,2.35vw,27px);
  }
}

@media(max-width:760px){
  .hero-collage-stage > .hero .hero-greeting{
    font-size:clamp(24px,7.2vw,34px) !important;
  }

  .hero-collage-stage > .hero .hero-name{
    font-size:clamp(60px,16vw,86px) !important;
  }

  .hero-collage-stage > .hero .hero-intro{
    font-size:clamp(19px,5vw,25px);
    line-height:1.1;
  }

  /* Touch devices do not need hover, but keyboard/accessibility focus still
     gets a visible state inside the hamburger menu. */
  .hero-collage-stage > .hero .links a:focus-visible{
    outline:2px solid currentColor;
    outline-offset:2px;
  }
}

/* v88: slower moving gallery + slightly larger site logo */

/* The moving wall now takes longer to complete each horizontal loop.
   Previous effective duration was ~46s. */
.hero-collage-sequence .marquee{
  animation-duration:60s !important;
}

/* Slight bump to the shared site logo everywhere. */
.brand-logo{
  width:48px;
  height:48px;
}

/* Homepage black-nav logo gets a little more presence without changing the
   surrounding spacing or brand text. */
@media(min-width:761px){
  .hero-collage-stage > .hero .brand-logo{
    width:50px;
    height:50px;
  }
}

/* Keep the mobile increase restrained so it doesn't crowd the hamburger. */
@media(max-width:760px){
  .hero-collage-stage > .hero .brand-logo{
    width:45px;
    height:45px;
  }

  .hero-collage-sequence .marquee{
    animation-duration:64s !important;
  }
}

/* ==================================================================
   v111 — consolidated current homepage state
   ================================================================== */

/* Gallery → statement → Projects ---------------------------------- */
.hero-collage-sequence{
  height:260svh !important;
  background:#f7f7f4 !important;
}

.hero-collage-stage{
  background:#f7f7f4 !important;
}

.hero-collage-stage::after{
  transition:none;
  z-index:1;
}

.hero-collage-stage > .collage-wrap{
  z-index:4 !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible;
}

.hero-collage-sequence .collage-depth-scale,
.hero-collage-sequence .tilt-stage{
  overflow:visible;
}

.gallery-interlude{
  position:absolute;
  inset:0;
  z-index:7;
  display:grid;
  place-items:center;
  padding:8vh 7vw;
  opacity:0;
  pointer-events:none;
  transform:translate3d(0,16px,0) scale(.985);
  will-change:opacity,transform;
}

.gallery-interlude p{
  margin:0;
  width:min(1050px,100%);
  color:var(--ink);
  text-align:center;
  white-space:pre-line;
  font-size:clamp(46px,6.2vw,96px);
  line-height:.92;
  letter-spacing:-0.015em;
  font-weight:650;
}

.hero-collage-sequence + .after-collage{
  padding-top:24px !important;
}

/* White hero + plain white curve ---------------------------------- */
.hero-collage-stage > .hero{
  z-index:6 !important;
  background:#f7f7f4 !important;
  color:#111 !important;
  border-radius:0 !important;
  overflow:hidden;
}

.hero-collage-stage > .hero .hero-main{
  background:transparent !important;
  color:#111 !important;
  border-radius:0 !important;
}

.hero-collage-stage > .hero .nav,
.hero-collage-stage > .hero .brand,
.hero-collage-stage > .hero .links,
.hero-collage-stage > .hero .hero-greeting,
.hero-collage-stage > .hero .hero-intro{
  color:#111 !important;
}

.hero-collage-stage > .hero .brand-logo{
  color:#111 !important;
}

.hero-collage-stage > .hero .menu-toggle span{
  background:#111 !important;
}

.hero-collage-stage > .hero .links a:last-child{
  background:#111 !important;
  color:#fff !important;
}

/* The old texture class name remains in the markup for compatibility, but
   the current visual treatment is intentionally solid black. */
.hero-collage-stage > .hero .hero-gradient-fill,
.hero-collage-stage > .hero .phill-easter-line{
  background:none !important;
  background-image:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
  filter:none !important;
}

.curve-swipe{
  position:absolute;
  inset:0;
  z-index:5;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
  will-change:opacity;
}

.curve-swipe-path{
  fill:#f7f7f4 !important;
  stroke:none;
}

/* Phillllllllll fold Easter egg ----------------------------------- */
/* Each folding cell contains the same lowercase l glyph used in “Phill”.
   Outfit uses the same inherited display face here, so every revealed letter
   stays matched to the lowercase l in “Phill”. */
.hero .hero-name .phill-easter-line{
  display:inline !important;
  overflow:visible;
  white-space:nowrap;
}

.phill-fold-tail,
.phill-fold-cell,
.phill-fold-glyph{
  font-style:normal;
  animation:none !important;
}


.phill-fold-tail{
  display:inline !important;
  vertical-align:baseline !important;
  line-height:inherit !important;
  perspective:680px;
  transform-style:preserve-3d;
}

.phill-fold-cell{
  position:relative;
  /* Optical baseline correction: the clipped inline-block otherwise rides
     slightly high beside the real lowercase l glyph in Outfit. */
  top:.055em !important;
  display:inline-block !important;
  max-width:0;
  overflow:hidden;
  vertical-align:baseline !important;
  line-height:inherit !important;
  perspective:440px;
  transform-style:preserve-3d;
  transition:max-width .36s cubic-bezier(.16,1,.3,1);
  transition-delay:calc((7 - var(--fold-i))*22ms);
}

.phill-fold-glyph{
  display:inline-block !important;
  min-width:.26em;
  vertical-align:baseline !important;
  line-height:inherit !important;
  font-family:inherit !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  /* CMS typography can uppercase the hero line. Keep the easter-egg glyphs
     explicitly lowercase so they always match the two l's in Phill. */
  text-transform:lowercase !important;
  font-feature-settings:inherit;
  font-variation-settings:inherit;
  background:none !important;
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
  transform-origin:left bottom !important;
  transform:perspective(440px) rotateY(-92deg) translateX(-.025em) scaleX(.70);
  opacity:0;
  backface-visibility:hidden;
  will-change:transform,opacity;
  transition:
    transform .48s cubic-bezier(.16,1,.3,1),
    opacity .14s ease;
  transition-delay:calc((7 - var(--fold-i))*22ms);
}

.phill-fold-cell:nth-child(even) .phill-fold-glyph{
  transform-origin:right bottom !important;
  transform:perspective(440px) rotateY(92deg) translateX(.025em) scaleX(.70);
}

.phill-easter-line:hover .phill-fold-cell{
  max-width:.5em;
  transition-delay:calc(var(--fold-i)*45ms);
}

.phill-easter-line:hover .phill-fold-glyph,
.phill-easter-line:hover .phill-fold-cell:nth-child(even) .phill-fold-glyph{
  transform:perspective(440px) rotateY(0) translateX(0) scaleX(1);
  opacity:1;
  transition-delay:calc(var(--fold-i)*45ms);
}

.phill-fold-tail::after{
  content:"";
  display:inline-block;
  width:.10em;
}

.hero .hero-name,
.hero .hero-gradient-title{
  overflow:visible;
}

/* Semi-transparent circle cursor ---------------------------------- */
@media(hover:hover) and (pointer:fine){
  html,
  body,
  a,
  button,
  input,
  textarea,
  select,
  label,
  [role="button"]{
    cursor:none !important;
  }

  .site-cursor{
    position:fixed;
    top:0;
    left:0;
    z-index:2147483647;
    width:28px;
    height:28px;
    border-radius:50%;
    background:rgba(255,255,255,.46);
    mix-blend-mode:difference;
    opacity:0;
    pointer-events:none;
    will-change:transform,opacity;
    transition:opacity .18s ease;
  }

  .site-cursor.is-visible{opacity:1}
  .site-cursor.is-hovering{background:rgba(255,255,255,.58)}
}

/* Mobile ----------------------------------------------------------- */
@media(max-width:760px){
  .hero-collage-sequence{
    height:250svh !important;
  }

  .hero-collage-sequence + .after-collage{
    padding-top:18px !important;
  }

  .gallery-interlude{
    padding:6vh 22px;
  }

  .gallery-interlude p{
    width:min(560px,100%);
    font-size:clamp(36px,11vw,62px);
    line-height:.94;
  }

  .hero-collage-stage > .hero .links{
    background:#f7f7f4 !important;
    color:#111 !important;
    border-color:rgba(17,17,17,.12) !important;
  }

  .hero-collage-stage > .hero .links a:last-child{
    background:#111 !important;
    color:#fff !important;
  }

  .hero .hero-name .phill-fold-cell{
    top:.045em !important;
  }

  .phill-fold-tail::after{
    width:.08em;
  }
}

/* Accessibility ---------------------------------------------------- */
@media(hover:none), (pointer:coarse){
  .phill-fold-tail{
    display:none !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .gallery-interlude{
    display:none;
  }

  .phill-fold-tail,
  .site-cursor{
    display:none !important;
  }

  @media(hover:hover) and (pointer:fine){
    html,
    body,
    a,
    button,
    input,
    textarea,
    select,
    label,
    [role="button"]{
      cursor:auto !important;
    }
  }
}

/* ==================================================================
   v113 — framed moving gallery at rest, full-screen on scroll
   ================================================================== */

.hero-collage-stage > .collage-wrap{
  /* JS animates this radius from 30px → 0. */
  border-radius:30px;
  overflow:hidden !important;
  clip-path:inset(0 round 30px);
  will-change:transform,width,height,border-radius,opacity;
  box-shadow:0 10px 34px rgba(17,17,17,.06);
}

/* The clip follows the visible radius closely enough during the early motion.
   Once the gallery expands beyond the viewport, stage overflow becomes the
   effective full-screen crop. */
.hero-collage-stage > .collage-wrap[style*="border-radius: 0"]{
  clip-path:none;
}

.hero-collage-stage .collage-depth-scale,
.hero-collage-stage .tilt-stage{
  border-radius:inherit;
}

/* Prevent the image wall itself from poking through the rounded resting frame. */
.hero-collage-stage .collage-depth-scale{
  overflow:hidden !important;
}

/* As the existing depth animation scales, the outer wrapper remains the single
   clipping boundary. */
.hero-collage-stage .tilt-stage{
  overflow:visible !important;
}

/* The initial gallery is now intentionally inset, so remove any legacy width
   assumptions that visually fight the JS-computed resting width. */
.hero-collage-stage > .collage-wrap{
  margin-left:0 !important;
  max-width:none !important;
}

/* Mobile gets a slightly smaller radius/margin while keeping the same concept. */
@media(max-width:760px){
  .hero-collage-stage > .collage-wrap{
    border-radius:20px;
    clip-path:inset(0 round 20px);
    box-shadow:0 8px 24px rgba(17,17,17,.055);
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-collage-stage > .collage-wrap{
    border-radius:24px !important;
    clip-path:inset(0 round 24px) !important;
  }
}

/* ==================================================================
   v114 — framed gallery + gallery-anchored swoop
   ================================================================== */

.curve-swipe{
  z-index:5 !important;
  overflow:visible !important;
  shape-rendering:geometricPrecision;
}

.curve-swipe-path{
  fill:#f7f7f4 !important;
  stroke:none !important;
}

/* The hero remains above the white paper shape while the gallery sits beneath. */
.hero-collage-stage > .hero{
  z-index:6 !important;
}

.hero-collage-stage > .collage-wrap{
  z-index:4 !important;
}

/* Rounded outer gallery corners remain visible underneath the softly-rounded
   swoop tips at rest. */
.hero-collage-stage > .collage-wrap{
  isolation:isolate;
}

/* Mobile's smaller frame gets a proportionally softer swoop shoulder. */
@media(max-width:760px){
  .curve-swipe{
    inset:-.5px;
    width:calc(100% + 1px);
    height:calc(100% + 1px);
  }
}

/* ==================================================================
   v115 — gallery clipping / overscan correction
   ================================================================== */

/* The rounded outer wrapper should be the ONLY clipping boundary. */
.hero-collage-stage > .collage-wrap{
  overflow:hidden !important;
  isolation:isolate;
}

/* Do not clip the rotated / scaled wall inside the frame.
   v113 added overflow:hidden here, which was shaving off artwork before the
   outer rounded frame had a chance to crop it. */
.hero-collage-stage .collage-depth-scale{
  overflow:visible !important;
  border-radius:0 !important;
}

/* Give the moving wall a tiny overscan buffer. This keeps rotated rows and
   marquee motion safely beyond the visible frame at every angle. */
.hero-collage-stage .tilt-stage{
  overflow:visible !important;
  left:calc(-6vw - 6px) !important;
  width:calc(112vw + 12px) !important;
}

.hero-collage-stage .marquee{
  overflow:visible !important;
}

/* Keep images a hair oversized so subpixel transforms cannot expose seams at
   the rounded edge while the gallery is moving. */
.hero-collage-stage .tile img{
  inset:-2px !important;
  width:calc(100% + 4px) !important;
  height:calc(100% + 4px) !important;
  max-width:none !important;
}

/* clip-path was redundant with border-radius + overflow:hidden and could remain
   at the old resting radius while JS was animating the actual radius.
   Removing it lets the animated border-radius be the single source of truth. */
.hero-collage-stage > .collage-wrap{
  clip-path:none !important;
}

/* Mobile uses the wider tilted wall from the existing responsive layout,
   again with a small extra buffer beyond it. */
@media(max-width:760px){
  .hero-collage-stage .tilt-stage{
    left:calc(-12vw - 5px) !important;
    width:calc(124vw + 10px) !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-collage-stage > .collage-wrap{
    clip-path:none !important;
  }
}

/* ==================================================================
   v116 — swoop visible before first scroll
   ================================================================== */

.curve-swipe{
  opacity:1;
  visibility:visible;
}

/* Keep v114/v115 layering exactly the same. The geometry, not z-index, now
   creates the earlier visible reveal. */
.curve-swipe-path{
  fill:#f7f7f4 !important;
}

/* ==================================================================
   v117 — swoop layered above hero, clipped below hero edge
   ================================================================== */

/* This is the key fix:
   gallery = 4
   hero = 6
   swoop = 7

   The JS clip-path limits the swoop to the region BELOW the hero bottom, so
   it can be above the hero without covering the actual header content. */
.curve-swipe{
  z-index:7 !important;
  opacity:1;
  visibility:visible;
  pointer-events:none;
  will-change:opacity,clip-path;
}

/* Keep hero content beneath the swoop layer only in z-order. Since the swoop
   is clipped to below the hero edge, nav/headline remain completely untouched. */
.hero-collage-stage > .hero{
  z-index:6 !important;
}

/* The centered interlude must remain above everything when it takes over. */
.gallery-interlude{
  z-index:8 !important;
}

/* White paper curve stays visually identical to v116. */
.curve-swipe-path{
  fill:#f7f7f4 !important;
  stroke:none !important;
}

/* ==================================================================
   v118 — swoop is the actual white hero background
   ================================================================== */

/* The old opaque hero background was hiding both the gallery and curve.
   Make the hero shell transparent. */
.hero-collage-stage > .hero{
  z-index:6 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
}

/* Keep child content transparent too. */
.hero-collage-stage > .hero .hero-main{
  background:transparent !important;
  background-color:transparent !important;
}

/* The white SVG now supplies the visible hero paper/background. */
.curve-swipe{
  z-index:5 !important;
  opacity:1;
  visibility:visible;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  pointer-events:none;
}

.curve-swipe-path{
  fill:#f7f7f4 !important;
  stroke:none !important;
}

/* Gallery is physically present underneath the paper from frame one. */
.hero-collage-stage > .collage-wrap{
  z-index:4 !important;
}

/* Hero text/nav remain on top of both paper and gallery. */
.hero-collage-stage > .hero .nav,
.hero-collage-stage > .hero .hero-main{
  position:relative;
  z-index:2;
}

/* Interlude still takes priority later. */
.gallery-interlude{
  z-index:8 !important;
}

/* The stage itself stays white as a safe fallback outside the active layers,
   but no opaque hero rectangle sits on top of the swoop anymore. */
.hero-collage-stage{
  background:#f7f7f4 !important;
}


/* ==================================================================
   v123 — Stroh typography system
   Red Hat Display = primary type / display / body / navigation / UI
   Sentient = reserved only for project descriptions
   ================================================================== */
:root{
  --font-display:'Red Hat Display',Arial,Helvetica,sans-serif;
  --font-sans:'Red Hat Display',Arial,Helvetica,sans-serif;
  --font-serif:'Red Hat Display',Arial,Helvetica,sans-serif;
}

body,
button,
input,
textarea,
select{
  font-family:var(--font-sans);
}

/* Big expressive type carries the same rounded, designed energy as the mark. */
.hero .hero-greeting,
.hero .hero-name,
.work-intro p,
.project-copy h2,
.bio-copy h2,
.tools-head h2,
.footer-main h2,
.case-title,
.case-body h1,
.case-body h2,
.case-body h3,
.journal h1,
.journal-card h2{
  font-family:var(--font-display);
}

/* Preserve the hero's editorial contrast as the intentional serif moment. */
.hero-rotating-word{
  font-family:var(--font-serif);
  font-weight:400;
  letter-spacing:-0.015em;
}

/* Red Hat Display is the unified primary voice across display and utility typography.
   Sentient is reserved for lightweight project descriptions. Tracking stays relaxed. */
.hero .hero-name,
.case-title,
.footer-main h2,
.journal h1{
  letter-spacing:-0.015em;
}

.hero .hero-greeting,
.work-intro p,
.bio-copy h2,
.tools-head h2,
.project-copy h2,
.case-body h2,
.journal-card h2{
  letter-spacing:-0.015em;
}

/* ==================================================================
   v122 — fixed navigation + mobile overflow safety
   ================================================================== */

/* The navigation now lives outside the animated hero so its fixed positioning
   is tied to the viewport, not to the hero's transformed scroll container. */
.nav{
  position:fixed !important;
  top:calc(34px + env(safe-area-inset-top, 0px));
  left:calc(7vw + env(safe-area-inset-left, 0px));
  right:calc(7vw + env(safe-area-inset-right, 0px));
  width:auto;
  z-index:1000 !important;
  min-width:0;
  pointer-events:none;
}

.nav > *{pointer-events:auto}
.nav .brand{gap:0}
.brand-logo{width:50px;height:50px}

/* Keep the desktop hover behavior after moving the nav out of the hero. */
@media(min-width:761px){
  .nav .links a:not(:last-child){
    position:relative;
    display:inline-flex;
    align-items:center;
    opacity:.82;
    transition:opacity .22s ease,transform .24s cubic-bezier(.2,.8,.2,1);
  }
  .nav .links a:not(:last-child)::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-7px;
    height:2px;
    border-radius:999px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .28s cubic-bezier(.2,.8,.2,1);
  }
  .nav .links a:not(:last-child):hover,
  .nav .links a:not(:last-child):focus-visible{
    opacity:1;
    transform:translateY(-1px);
  }
  .nav .links a:not(:last-child):hover::after,
  .nav .links a:not(:last-child):focus-visible::after{transform:scaleX(1)}
  .nav .links a:last-child{
    transition:background .24s ease,color .24s ease,transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease;
  }
  .nav .links a:last-child:hover,
  .nav .links a:last-child:focus-visible{
    background:#deded9;
    color:#111;
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(0,0,0,.18);
  }
}

/* General shrink-to-fit guardrails. These prevent flex/grid children and long
   CMS text from making the mobile layout wider than the visual viewport. */
html,
body,
.page,
main,
section{max-width:100%;min-width:0}

.bio-copy,
.project-copy,
.tool-detail-heading > div,
.footer-side,
.work-intro > *{min-width:0}

.footer-links,
.case-meta,
.pills{max-width:100%}

@media(max-width:760px){
  .nav{
    top:calc(24px + env(safe-area-inset-top, 0px));
    left:calc(20px + env(safe-area-inset-left, 0px));
    right:calc(20px + env(safe-area-inset-right, 0px));
  }

  .brand-logo{width:45px;height:45px}

  /* The hidden hover letters are desktop-only, so the visible hero line gets
     the full width on touch devices. JS trims only the rare line that still
     measures wider than the available content box. */
  .hero-gradient-title,
  .hero .hero-name{width:100%;max-width:100%}
  .hero .hero-name > .hero-gradient-fill{
    max-width:none;
    white-space:nowrap;
    transform-origin:left center;
  }

  /* Safari's dynamic chrome can make the useful viewport a few pixels narrower
     than 100vw. Keep every major content area inside the safe-area gutters. */
  .hero,
  .after-collage,
  .bio-section,
  .tools-section,
  footer,
  .case-hero,
  .journal,
  .projects-index{
    padding-left:calc(20px + env(safe-area-inset-left, 0px));
    padding-right:calc(20px + env(safe-area-inset-right, 0px));
  }

  .project-grid,
  .bio-grid,
  .tools-row,
  .journal-grid,
  .case-gallery{min-width:0;width:100%}

  .project-card,
  .tool-card,
  .journal-card{min-width:0;max-width:100%}

  .project-media,
  .bio-photo,
  .case-image,
  .tool-detail-image{max-width:100%}

  .footer-links{display:flex;flex-wrap:wrap;gap:10px 16px}

  .tool-detail-heading{grid-template-columns:64px minmax(0,1fr);gap:14px}
  .tool-detail-icon{width:64px;height:64px}

  .case-title,
  .projects-index-head h1,
  .journal h1,
  .footer-main h2{
    max-width:100%;
    overflow-wrap:break-word;
  }
}

@media(max-width:390px){
  .hero,
  .after-collage,
  .bio-section,
  .tools-section,
  footer,
  .case-hero,
  .journal,
  .projects-index{
    padding-left:calc(16px + env(safe-area-inset-left, 0px));
    padding-right:calc(16px + env(safe-area-inset-right, 0px));
  }

  .nav{
    left:calc(16px + env(safe-area-inset-left, 0px));
    right:calc(16px + env(safe-area-inset-right, 0px));
  }

  .menu-toggle{width:42px;height:42px}
  .brand-logo{width:43px;height:43px}
}

/* Preserve the vertical rhythm from v121. A fixed element leaves normal flow,
   so these offsets replace the space the nav used to occupy. */
:root{--fixed-nav-flow-space:50px}

@media(min-width:761px){
  .hero-collage-stage > .hero .hero-main{
    padding-top:calc(clamp(54px,7vh,88px) + var(--fixed-nav-flow-space)) !important;
  }

  .case-hero{
    padding-top:calc(34px + var(--fixed-nav-flow-space) + env(safe-area-inset-top, 0px));
  }

  .projects-index-head{
    margin-top:calc(clamp(90px,13vh,170px) + var(--fixed-nav-flow-space));
  }

  .journal-index-head{
    margin-top:calc(clamp(78px,10vh,130px) + var(--fixed-nav-flow-space));
  }
}

@media(max-width:760px){
  :root{--fixed-nav-flow-space:45px}

  .hero-collage-stage > .hero{
    padding-top:calc(24px + env(safe-area-inset-top, 0px));
  }

  .hero-collage-stage > .hero .hero-main{
    padding-top:calc(clamp(58px,12vh,90px) + var(--fixed-nav-flow-space)) !important;
  }

  .case-hero,
  .case-hero:not(.project-detail-hero){
    padding-top:calc(24px + var(--fixed-nav-flow-space) + env(safe-area-inset-top, 0px));
  }

  .projects-index-head{margin-top:115px}
  .journal-index-head{margin-top:103px}
}


/* ==================================================================
   v123 — white direction-aware navigation + Outfit display type
   ================================================================== */

/* Full-width white header. It stays fixed, slides away while scrolling down,
   and returns as soon as the user scrolls up. */
.nav{
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  min-height:0;
  padding:calc(20px + env(safe-area-inset-top, 0px)) calc(7vw + env(safe-area-inset-right, 0px)) 20px calc(7vw + env(safe-area-inset-left, 0px));
  background:#fff;
  color:#111;
  border-bottom:1px solid rgba(17,17,17,.07);
  box-shadow:0 1px 0 rgba(255,255,255,.55);
  transform:translate3d(0,0,0);
  transition:transform .34s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease;
  will-change:transform;
}
.nav.nav-hidden{
  transform:translate3d(0,-110%,0);
}
.nav.is-open{
  transform:translate3d(0,0,0);
}
.nav .brand,
.nav .links,
.nav .menu-toggle{
  color:#111;
}
.nav .menu-toggle span{background:#111}

/* Give the now-full-width header a little depth once it is floating over
   content, without turning it into a heavy card. */
@supports(selector(:has(*))){
  body:has(.nav:not(.nav-hidden)) .nav{box-shadow:0 7px 24px rgba(17,17,17,.045)}
}

@media(max-width:760px){
  .nav{
    padding:calc(16px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-right, 0px)) 16px calc(20px + env(safe-area-inset-left, 0px));
  }
  .nav .links{
    top:100%;
    left:calc(20px + env(safe-area-inset-left, 0px));
    right:calc(20px + env(safe-area-inset-right, 0px));
    background:#fff;
  }
}

@media(max-width:390px){
  .nav{
    padding-left:calc(16px + env(safe-area-inset-left, 0px));
    padding-right:calc(16px + env(safe-area-inset-right, 0px));
  }
  .nav .links{
    left:calc(16px + env(safe-area-inset-left, 0px));
    right:calc(16px + env(safe-area-inset-right, 0px));
  }
}

@media(prefers-reduced-motion:reduce){
  .nav{transition:none}
}

/* ==================================================================
   v125 — mobile section-transition overflow fix
   ================================================================== */

/* The projects-section transition used to be 110% wide and shifted 5% left.
   That was harmless on desktop, but Mobile Safari could count the oversized
   pseudo-element in the page's horizontal layout and expose a blank strip on
   the right. Keep the same soft curve, but contain it to the section width. */
.after-collage{
  overflow-x:clip;
}

.after-collage::before{
  left:0 !important;
  width:100% !important;
}

/* Guard the root viewport as well. `clip` prevents horizontal scroll without
   creating the scroll container side effects that `hidden` can introduce. */
html,
body{
  max-width:100%;
  overflow-x:clip;
}

/* ==================================================================
   v127 — keep hero/gallery swoop, remove projects-section swoop
   ================================================================== */

/* The animated .curve-swipe belongs to the hero → moving-gallery handoff.
   The separate pseudo-element on .after-collage created a second curve above
   the project grid. Remove only that lower transition. */
.after-collage::before{
  content:none !important;
  display:none !important;
}


/* ==================================================================
   v128 — fully retire the hero swoop after its handoff
   ================================================================== */

/* v118 forced opacity/visibility with !important. That meant the JS could
   calculate the correct end state but could not actually hide the SVG, so its
   white paper fill could reappear later in the scroll between the gallery and
   Projects. Leave these properties non-important so the inline motion state
   can take control and remove the swoop once the gallery is full-screen. */
.curve-swipe{
  opacity:1;
  visibility:visible;
}

/* ==================================================================
   v130 — verified editorial project hierarchy
   1 = standard / 4 columns
   2 = featured / 8 columns
   3 = hero / full width
   ================================================================== */
.project-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 1.6vw, 28px);
  row-gap: clamp(54px, 6vw, 100px);
  align-items: start;
}

.project-card.project-importance-1 { grid-column: span 4; }
.project-card.project-importance-2 { grid-column: span 8; }
.project-card.project-importance-3 { grid-column: 1 / -1; }

.project-card.project-importance-1 .project-media { aspect-ratio: 4 / 3; }
.project-card.project-importance-2 .project-media { aspect-ratio: 3 / 2; }
.project-card.project-importance-3 .project-media { aspect-ratio: 16 / 8.25; }

.project-card.project-importance-2 .project-copy h2 {
  font-size: clamp(27px, 2.8vw, 48px);
}

.project-card.project-importance-3 .project-copy {
  max-width: min(980px, 84%);
  padding-top: 18px;
}

.project-card.project-importance-3 .project-copy h2 {
  font-size: clamp(38px, 4.4vw, 72px);
}

.project-card.project-importance-3 .project-copy p {
  max-width: 700px;
  font-size: clamp(14px, 1.15vw, 17px);
}

@media (max-width: 1050px) and (min-width: 761px) {
  .project-card.project-importance-1 { grid-column: span 6; }
  .project-card.project-importance-2,
  .project-card.project-importance-3 { grid-column: 1 / -1; }
  .project-card.project-importance-2 .project-media { aspect-ratio: 16 / 9; }
}

@media (max-width: 760px) {
  .project-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 54px;
  }

  .project-card.project-importance-1,
  .project-card.project-importance-2,
  .project-card.project-importance-3 {
    grid-column: 1 / -1;
  }

  .project-card.project-importance-1 .project-media { aspect-ratio: 4 / 3; }
  .project-card.project-importance-2 .project-media,
  .project-card.project-importance-3 .project-media { aspect-ratio: 16 / 10; }

  .project-card.project-importance-3 .project-copy { max-width: 100%; }

  .project-card.project-importance-1 .project-copy h2,
  .project-card.project-importance-2 .project-copy h2,
  .project-card.project-importance-3 .project-copy h2 {
    font-size: clamp(28px, 9vw, 42px);
  }
}

/* ==================================================================
   v132 — site-wide dark mode
   Follows the OS on first visit, then remembers the visitor's toggle.
   ================================================================== */
:root{
  color-scheme:light;
  --theme-nav:#ffffff;
  --theme-paper:#f7f7f4;
  --theme-soft:#ebe8e1;
  --theme-text:#111111;
  --theme-text-soft:#6d6a64;
  --theme-border:rgba(17,17,17,.12);
  --theme-card:#ddddda;
  --theme-deep:#111111;
  --theme-deeper:#0a0a0a;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --paper:#121210;
  --ink:#f2f0e9;
  --soft:#1b1a17;
  --muted:#aaa69c;
  --dark:#090908;
  --theme-nav:#121210;
  --theme-paper:#121210;
  --theme-soft:#1b1a17;
  --theme-text:#f2f0e9;
  --theme-text-soft:#aaa69c;
  --theme-border:rgba(242,240,233,.14);
  --theme-card:#262521;
  --theme-deep:#0d0d0c;
  --theme-deeper:#080808;
}

body,
.nav,
.after-collage,
.after-collage::before,
.case-tldr,
.construction-page,
.hero-collage-stage,
.hero-collage-sequence,
.curve-swipe-path,
.project-media,
.journal-card,
.theme-toggle{
  transition:background-color .28s ease,color .28s ease,border-color .28s ease,fill .28s ease,box-shadow .28s ease;
}

/* Theme switch ---------------------------------------------------- */
.nav-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  min-width:0;
}
.theme-toggle{
  appearance:none;
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(17,17,17,.12);
  border-radius:999px;
  background:rgba(255,255,255,.58);
  color:#111;
  cursor:pointer;
  box-shadow:none;
}
.theme-toggle:hover,
.theme-toggle:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(17,17,17,.28);
  background:#f2f1ed;
}
.theme-toggle:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}
.theme-icon{
  grid-area:1/1;
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:opacity .2s ease,transform .28s cubic-bezier(.2,.8,.2,1);
}
.theme-icon-moon{opacity:0;transform:rotate(-18deg) scale(.72)}
html[data-theme="dark"] .theme-icon-sun{opacity:0;transform:rotate(18deg) scale(.72)}
html[data-theme="dark"] .theme-icon-moon{opacity:1;transform:none}

.construction-actions{display:flex;align-items:center;gap:16px}
.construction-actions .theme-toggle{width:38px;height:38px;flex-basis:38px}

/* Dark surfaces --------------------------------------------------- */
html[data-theme="dark"] body{
  background:var(--theme-paper);
  color:var(--theme-text);
}
html[data-theme="dark"] .hero-collage-sequence,
html[data-theme="dark"] .hero-collage-stage{
  background:var(--theme-paper) !important;
}
html[data-theme="dark"] .hero-collage-stage > .hero,
html[data-theme="dark"] .hero-collage-stage > .hero .hero-main{
  color:var(--theme-text) !important;
}
html[data-theme="dark"] .hero-collage-stage > .hero .hero-greeting,
html[data-theme="dark"] .hero-collage-stage > .hero .hero-intro,
html[data-theme="dark"] .hero-collage-stage > .hero .hero-gradient-fill,
html[data-theme="dark"] .hero-collage-stage > .hero .phill-easter-line{
  color:var(--theme-text) !important;
  -webkit-text-fill-color:var(--theme-text) !important;
}
html[data-theme="dark"] .curve-swipe-path{
  fill:var(--theme-paper) !important;
}
html[data-theme="dark"] .gallery-interlude p{color:var(--theme-text)}
html[data-theme="dark"] .after-collage,
html[data-theme="dark"] .after-collage::before{background:var(--theme-soft)}
html[data-theme="dark"] .work-intro span,
html[data-theme="dark"] .project-copy p,
html[data-theme="dark"] .projects-index-head p,
html[data-theme="dark"] .journal-index-head p,
html[data-theme="dark"] .case-kicker,
html[data-theme="dark"] .case-meta,
html[data-theme="dark"] .tool-detail-description,
html[data-theme="dark"] .journal-card small,
html[data-theme="dark"] .journal-card p{color:var(--theme-text-soft)}
html[data-theme="dark"] .project-media,
html[data-theme="dark"] .tool-detail-icon{background:var(--theme-card)}
html[data-theme="dark"] .pill{border-color:var(--theme-border)}
html[data-theme="dark"] .role-pill{
  background:var(--theme-text);
  border-color:var(--theme-text);
  color:#111;
}
html[data-theme="dark"] .all-projects-cta a{
  background:var(--theme-text);
  border-color:var(--theme-text);
  color:#111;
}
html[data-theme="dark"] .all-projects-cta a:hover{
  background:transparent;
  color:var(--theme-text);
}

/* Navigation ------------------------------------------------------ */
html[data-theme="dark"] .nav{
  background:rgba(18,18,16,.96);
  color:var(--theme-text);
  border-bottom-color:var(--theme-border);
  box-shadow:0 1px 0 rgba(255,255,255,.025);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
html[data-theme="dark"] .nav .brand,
html[data-theme="dark"] .nav .links,
html[data-theme="dark"] .nav .menu-toggle,
html[data-theme="dark"] .brand-logo-animated{color:var(--theme-text)}
html[data-theme="dark"] .nav .menu-toggle span{background:var(--theme-text)}
html[data-theme="dark"] .nav .links a:last-child{
  background:var(--theme-text);
  color:#111;
}
html[data-theme="dark"] .nav .links a:last-child:hover,
html[data-theme="dark"] .nav .links a:last-child:focus-visible{
  background:#d7d3c9 !important;
  color:#111 !important;
}
html[data-theme="dark"] .theme-toggle{
  background:rgba(255,255,255,.055);
  color:var(--theme-text);
  border-color:rgba(242,240,233,.16);
}
html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .theme-toggle:focus-visible{
  background:rgba(255,255,255,.105);
  border-color:rgba(242,240,233,.34);
}
@supports(selector(:has(*))){
  html[data-theme="dark"] body:has(.nav:not(.nav-hidden)) .nav{box-shadow:0 8px 28px rgba(0,0,0,.24)}
}

/* Existing dark sections become the deeper layer ----------------- */
html[data-theme="dark"] .bio-section,
html[data-theme="dark"] .tools-section{background:var(--theme-deep)}
html[data-theme="dark"] footer{background:var(--theme-deeper)}
html[data-theme="dark"] .tools-rule,
html[data-theme="dark"] .tools-row,
html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .footer-bottom{border-color:rgba(242,240,233,.12)}
html[data-theme="dark"] .footer-cta{
  background:var(--theme-text);
  color:#111;
}

/* Detail, journal, and index pages ------------------------------- */
html[data-theme="dark"] .case-tldr{background:#1e1d1a}
html[data-theme="dark"] .journal-card{border-top-color:rgba(242,240,233,.18)}
html[data-theme="dark"] .project-client{color:var(--theme-text)}
html[data-theme="dark"] .tool-detail-cta{
  background:var(--theme-text);
  color:#111;
  border-color:var(--theme-text);
}

/* Under-construction page ---------------------------------------- */
html[data-theme="dark"] .construction-page{
  background:var(--theme-paper);
  color:var(--theme-text);
}
html[data-theme="dark"] .construction-copy p,
html[data-theme="dark"] .construction-status,
html[data-theme="dark"] .construction-bottom{color:var(--theme-text-soft)}
html[data-theme="dark"] .construction-bottom{border-top-color:var(--theme-border)}
html[data-theme="dark"] .construction-bottom a{color:var(--theme-text);border-bottom-color:rgba(242,240,233,.34)}
html[data-theme="dark"] .construction-mark{background:var(--theme-text);color:#111}
html[data-theme="dark"] .construction-status::before{background:var(--theme-text)}

/* Loader inherits the chosen theme before the page paints. */
html[data-theme="dark"] .site-loader{background:var(--theme-paper);color:var(--theme-text)}

@media(max-width:760px){
  .nav-actions{gap:8px}
  .theme-toggle{width:42px;height:42px;flex-basis:42px}
  .nav-actions .menu-toggle{margin-left:0}
  .nav .links{right:calc(20px + env(safe-area-inset-right, 0px))}
  html[data-theme="dark"] .nav .links,
  html[data-theme="dark"] .hero-collage-stage > .hero .links{
    background:#191816 !important;
    color:var(--theme-text) !important;
    border-color:var(--theme-border) !important;
    box-shadow:0 18px 45px rgba(0,0,0,.28);
  }
  html[data-theme="dark"] .hero-collage-stage > .hero .links a:last-child{
    background:var(--theme-text) !important;
    color:#111 !important;
  }
}

@media(max-width:390px){
  .theme-toggle{width:40px;height:40px;flex-basis:40px}
}

@media(prefers-reduced-motion:reduce){
  body,
  .nav,
  .after-collage,
  .after-collage::before,
  .case-tldr,
  .construction-page,
  .hero-collage-stage,
  .hero-collage-sequence,
  .curve-swipe-path,
  .theme-toggle,
  .theme-icon{transition:none}
}

/* v133: restrained Stroh orange accent system -------------------- */
:root{
  --accent:#FF5921;
  --accent-rgb:255,89,33;
}

/* Small editorial signals. Keep the large surfaces and artwork neutral. */
.work-intro span,
.bio-kicker,
.case-kicker,
.journal-card small{
  color:var(--accent);
}

html[data-theme="dark"] .work-intro span,
html[data-theme="dark"] .case-kicker,
html[data-theme="dark"] .journal-card small{
  color:var(--accent);
}

/* Navigation gets a thin orange signature rather than a permanent color wash. */
@media(min-width:761px){
  .nav .links a:not(:last-child)::after{
    background:var(--accent);
  }

  .nav .links a:last-child:hover,
  .nav .links a:last-child:focus-visible,
  html[data-theme="dark"] .nav .links a:last-child:hover,
  html[data-theme="dark"] .nav .links a:last-child:focus-visible{
    background:var(--accent) !important;
    color:#fff !important;
    box-shadow:0 9px 24px rgba(var(--accent-rgb),.20);
  }
}

/* The theme control carries a tiny always-visible brand-color note. */
.theme-toggle,
html[data-theme="dark"] .theme-toggle{
  color:var(--accent);
}
.theme-toggle:hover,
.theme-toggle:focus-visible,
html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .theme-toggle:focus-visible{
  border-color:rgba(var(--accent-rgb),.52);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08);
}
.theme-toggle:focus-visible{
  outline-color:var(--accent);
}

/* Project cards stay image-first. Orange appears only when the user engages. */
.project-copy h2{
  transition:color .22s ease;
}
.project-card:hover .project-copy h2,
.project-card:focus-visible .project-copy h2{
  color:var(--accent);
}

/* Small persistent accents in content-heavy areas. */
.bio-link{
  border-bottom-color:rgba(var(--accent-rgb),.70);
  transition:color .2s ease,border-color .2s ease;
}
.bio-link:hover,
.bio-link:focus-visible{
  color:var(--accent);
  border-bottom-color:var(--accent);
}

.case-tldr{
  box-shadow:inset 3px 0 0 rgba(var(--accent-rgb),.82);
}

.case-body a:not(.pill),
.footer-links a,
.construction-bottom a{
  transition:color .2s ease,border-color .2s ease;
}
.case-body a:not(.pill){
  text-decoration:underline;
  text-decoration-color:rgba(var(--accent-rgb),.55);
  text-underline-offset:.18em;
}
.case-body a:not(.pill):hover,
.case-body a:not(.pill):focus-visible,
.footer-links a:hover,
.footer-links a:focus-visible,
.construction-bottom a:hover,
.construction-bottom a:focus-visible{
  color:var(--accent);
}

.construction-status::before,
html[data-theme="dark"] .construction-status::before{
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.10);
}

/* CTA color appears on interaction, preserving the neutral resting palette. */
.all-projects-cta a:hover,
.all-projects-cta a:focus-visible,
html[data-theme="dark"] .all-projects-cta a:hover,
html[data-theme="dark"] .all-projects-cta a:focus-visible,
.footer-cta:hover,
.footer-cta:focus-visible,
html[data-theme="dark"] .footer-cta:hover,
html[data-theme="dark"] .footer-cta:focus-visible,
.tool-detail-cta:hover,
.tool-detail-cta:focus-visible,
html[data-theme="dark"] .tool-detail-cta:hover,
html[data-theme="dark"] .tool-detail-cta:focus-visible{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

/* Keyboard focus uses the same signature color site-wide. */
a:focus-visible,
button:focus-visible{
  outline-color:var(--accent);
}

/* v134: dedicated About page ------------------------------------ */
.about-nav-shell{
  background:var(--paper);
  padding:34px 7vw 28px;
}
.bio-page-section{
  min-height:calc(100vh - 104px);
  display:flex;
  align-items:center;
}
.bio-page-section .bio-grid{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
}
.bio-page-section .bio-copy h1{
  margin:0;
  max-width:900px;
  font-size:clamp(38px,5.2vw,76px);
  line-height:.98;
  letter-spacing:-0.015em;
  font-weight:650;
}
@media(max-width:760px){
  .about-nav-shell{padding:24px 20px 20px}
  .bio-page-section{min-height:auto;padding:82px 20px}
}

/* v137: About-page work experience ------------------------------- */
.experience-section{
  background:var(--paper);
  color:var(--ink);
  padding:0 7vw clamp(96px,11vw,170px);
}
.experience-inner{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
}
.experience-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px;
  padding:34px 0 24px;
  border-top:1px solid rgba(17,17,17,.14);
}
.experience-head p{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(38px,5vw,72px);
  line-height:.95;
  letter-spacing:-0.015em;
  font-weight:650;
}
.experience-head span{
  color:var(--accent);
  font-size:11px;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding-bottom:5px;
}
.experience-list{
  border-bottom:1px solid rgba(17,17,17,.14);
}
.experience-item{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(150px,.48fr) minmax(0,1.15fr);
  gap:clamp(24px,4vw,64px);
  align-items:start;
  padding:30px 0 34px;
  border-top:1px solid rgba(17,17,17,.14);
}
.experience-primary h3{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(25px,2.4vw,39px);
  line-height:1;
  letter-spacing:-0.012em;
  font-weight:600;
}
.experience-company{
  margin-top:8px;
  font-size:14px;
  line-height:1.35;
}
.experience-company a{
  color:var(--accent);
  border-bottom:1px solid rgba(var(--accent-rgb),.45);
  padding-bottom:2px;
}
.experience-company a:hover,
.experience-company a:focus-visible{
  border-bottom-color:var(--accent);
}
.experience-meta{
  display:flex;
  flex-direction:column;
  gap:5px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
  text-transform:uppercase;
  letter-spacing:.045em;
}
.experience-description{
  margin:0;
  color:#6d6a64;
  font-size:15px;
  line-height:1.58;
  max-width:620px;
}

html[data-theme="dark"] .experience-head,
html[data-theme="dark"] .experience-item,
html[data-theme="dark"] .experience-list{
  border-color:var(--theme-border);
}
html[data-theme="dark"] .experience-description{
  color:var(--theme-text-soft);
}

@media(max-width:760px){
  .experience-section{
    padding-left:calc(20px + env(safe-area-inset-left, 0px));
    padding-right:calc(20px + env(safe-area-inset-right, 0px));
    padding-bottom:96px;
  }
  .experience-head{
    display:block;
    padding-top:28px;
  }
  .experience-head span{
    display:block;
    margin-top:12px;
  }
  .experience-item{
    grid-template-columns:1fr;
    gap:14px;
    padding:25px 0 28px;
  }
  .experience-meta{
    flex-direction:row;
    flex-wrap:wrap;
    gap:6px 14px;
  }
  .experience-description{
    font-size:14px;
  }
}

@media(max-width:390px){
  .experience-section{
    padding-left:calc(16px + env(safe-area-inset-left, 0px));
    padding-right:calc(16px + env(safe-area-inset-right, 0px));
  }
}



/* v138: make Experience discoverable even before roles exist */
.experience-empty{
  margin-top:2px;
  padding:26px 0 4px;
  border-top:1px solid rgba(17,17,17,.14);
  color:var(--muted);
}
.experience-empty strong,
.experience-empty span{
  display:block;
}
.experience-empty strong{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  letter-spacing:-0.005em;
  color:var(--ink);
}
.experience-empty span{
  margin-top:6px;
  font-size:12px;
  line-height:1.5;
}
html[data-theme="dark"] .experience-empty{
  border-color:var(--theme-border);
}

/* v139: Company-first experience hierarchy ----------------------- */
.experience-company{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(28px,2.8vw,44px);
  line-height:.98;
  letter-spacing:-0.012em;
  font-weight:650;
}
.experience-company a,
.experience-company span{
  color:var(--ink);
}
.experience-company a{
  border-bottom:0;
  padding-bottom:0;
  transition:color .2s ease;
}
.experience-company a:hover,
.experience-company a:focus-visible{
  color:var(--accent);
  border-bottom:0;
}

.experience-primary h3{
  margin:8px 0 0;
  font-family:var(--font-sans);
  font-size:14px;
  line-height:1.35;
  letter-spacing:0;
  font-weight:500;
  color:var(--muted);
}

html[data-theme="dark"] .experience-company a,
html[data-theme="dark"] .experience-company span{
  color:var(--ink);
}

@media(max-width:760px){
  .experience-company{
    font-size:clamp(27px,8.2vw,38px);
  }
  .experience-primary h3{
    margin-top:7px;
    font-size:14px;
  }
}


/* v150: Red Hat Display primary + Sentient project descriptions only ------- */
:root{
  --font-display:'Red Hat Display',Arial,Helvetica,sans-serif;
  --font-sans:'Red Hat Display',Arial,Helvetica,sans-serif;
  --font-serif:'Red Hat Display',Arial,Helvetica,sans-serif;
}

body,
button,
input,
textarea,
select,
.hero-rotating-word{
  font-family:var(--font-sans);
}

/* Sentient is intentionally limited to project-card descriptions. */
.project-copy p{
  font-family:'Sentient',Georgia,'Times New Roman',serif;
  font-weight:300;
  font-style:normal;
  letter-spacing:0;
}

/* Carry forward the quieter light/dark mode control. */
.theme-toggle,
html[data-theme="dark"] .theme-toggle{
  width:30px;
  height:30px;
  padding:0;
  border-color:transparent;
  background:transparent;
  color:var(--muted);
  box-shadow:none;
  opacity:.72;
  transition:opacity .2s ease,color .2s ease,background-color .2s ease;
}
.theme-toggle:hover,
.theme-toggle:focus-visible,
html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .theme-toggle:focus-visible{
  background:rgba(127,127,127,.08);
  border-color:transparent;
  color:var(--ink);
  box-shadow:none;
  opacity:1;
}
.theme-toggle:focus-visible{
  outline:1px solid rgba(var(--accent-rgb),.5);
  outline-offset:2px;
}
.theme-toggle svg{
  width:15px;
  height:15px;
  stroke-width:1.65;
}
@media(max-width:760px){
  .theme-toggle,
  html[data-theme="dark"] .theme-toggle{
    width:28px;
    height:28px;
  }
  .theme-toggle svg{
    width:14px;
    height:14px;
  }
}

/* v149: optional looping video project thumbnails ---------------- */
.project-media .project-thumb-image,
.project-media .project-thumb-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
}

.project-media .project-thumb-image{
  z-index:1;
}

.project-media .project-thumb-video{
  z-index:2;
  display:block;
  opacity:0;
  pointer-events:none;
  transition:opacity .24s ease;
  background:transparent;
}

.project-media.is-video-ready .project-thumb-video{
  opacity:1;
}

@media(prefers-reduced-motion:reduce){
  .project-media .project-thumb-video{
    display:none;
  }
}

/* v151: consistent homepage project-description sizing ----------- */
.project-grid .project-card.project-importance-1 .project-copy p,
.project-grid .project-card.project-importance-2 .project-copy p,
.project-grid .project-card.project-importance-3 .project-copy p{
  font-size:14px;
  line-height:1.5;
}

/* v152: keep the Phillllllllll fold glyphs visible in dark mode --- */
html[data-theme="dark"] .phill-fold-glyph{
  color:var(--theme-text) !important;
  -webkit-text-fill-color:var(--theme-text) !important;
}

/* v153: preserve Decap paragraph and line breaks ------------------ */
/* Blank lines in Decap become separate paragraphs. A single newline
   inside one paragraph becomes a <br>. */

.bio-body,
.footer-copy,
.experience-description,
.tool-detail-description,
.projects-index-intro,
.journal-index-intro,
.construction-message{
  min-width:0;
}

.bio-body p,
.footer-copy p,
.experience-description p,
.tool-detail-description p,
.projects-index-intro p,
.journal-index-intro p,
.construction-message p{
  margin-top:0;
  margin-bottom:0;
}

.bio-body p + p{
  margin-top:1em;
}

.footer-copy p + p,
.experience-description p + p,
.tool-detail-description p + p,
.projects-index-intro p + p,
.journal-index-intro p + p,
.construction-message p + p{
  margin-top:.85em;
}

/* Keep the first project-description gap from the title, then add
   natural spacing between any additional paragraphs. */
.project-copy p + p{
  margin-top:.75em;
}

/* Preserve the existing layout/type rules after introducing wrappers. */
.bio-body{
  max-width:610px;
}
.bio-body p{
  color:#aaa;
  font-size:16px;
  line-height:1.55;
}

.footer-copy{
  max-width:310px;
  margin-bottom:12px;
}
.footer-copy p{
  color:#888;
  line-height:1.45;
  font-size:14px;
}

.experience-description p{
  color:inherit;
  font:inherit;
  line-height:inherit;
}

.tool-detail-description p{
  color:inherit;
  font:inherit;
  line-height:inherit;
}

.projects-index-intro p{
  max-width:680px;
  color:var(--muted);
  font-size:clamp(16px,1.5vw,21px);
  line-height:1.5;
}

.journal-index-intro p{
  max-width:680px;
  color:var(--muted);
  font-size:clamp(16px,1.5vw,21px);
  line-height:1.5;
}

html[data-theme="dark"] .bio-body p{
  color:var(--theme-text-soft);
}

@media(max-width:760px){
  .bio-body{
    max-width:none;
  }
}



/* v154: respect manual line breaks in Hero Intro Before Changing Word */
.hero-intro-prefix{
  white-space:normal;
}
.hero-intro-prefix br{
  display:block;
  content:"";
}


/* v156: GSAP cursor-tracking Experience preview ------------------ */
.experience-item{
  position:relative;
}

.experience-copy{
  min-width:0;
}

.experience-cursor-preview{
  position:fixed;
  top:0;
  left:0;
  z-index:9999;
  width:clamp(250px,26vw,370px);
  aspect-ratio:4 / 3;
  object-fit:cover;
  border-radius:14px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  box-shadow:0 18px 52px rgba(0,0,0,.18);
  will-change:transform,opacity;
}

.experience-item[data-experience-preview]{
  transition:opacity .18s ease;
}

.experience-list:has(.experience-item.is-previewing) .experience-item:not(.is-previewing){
  opacity:.48;
}

.experience-projects{
  margin-top:18px;
  display:flex;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
}

.experience-projects-label{
  padding-top:5px;
  color:var(--muted);
  font-size:10px;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.experience-project-links{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.experience-project-links a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px 8px;
  border:1px solid rgba(17,17,17,.14);
  border-radius:999px;
  color:var(--ink);
  font-size:12px;
  line-height:1;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}

.experience-project-links a:hover,
.experience-project-links a:focus-visible{
  color:var(--accent);
  border-color:rgba(var(--accent-rgb),.5);
  background:rgba(var(--accent-rgb),.045);
}

html[data-theme="dark"] .experience-project-links a{
  border-color:var(--theme-border);
}

@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
  .experience-cursor-preview{
    display:none !important;
  }

  .experience-list:has(.experience-item.is-previewing) .experience-item:not(.is-previewing){
    opacity:1;
  }
}

@media(max-width:760px){
  .experience-projects{
    margin-top:12px;
    gap:9px;
  }
}

/* v158: slightly roomier homepage project grid ------------------- */
.after-collage .project-grid{
  column-gap:clamp(20px,2vw,34px);
  row-gap:clamp(64px,6.8vw,112px);
}

@media(max-width:760px){
  .after-collage .project-grid{
    row-gap:64px;
  }
}

/* v159: Markdown images inserted inside project/body text ---------- */
.case-body .case-inline-image{
  margin:clamp(34px,5vw,64px) 0;
  width:100%;
}

.case-body .case-inline-image img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border-radius:16px;
}

.case-body .case-inline-image:first-child{
  margin-top:0;
}

.case-body .case-inline-image:last-child{
  margin-bottom:0;
}

@media(max-width:760px){
  .case-body .case-inline-image{
    margin:32px 0;
  }

  .case-body .case-inline-image img{
    border-radius:12px;
  }
}

/* v160: previous / next project navigation ----------------------- */
.project-pager{
  padding:0 7vw clamp(74px,9vw,120px);
  background:var(--paper);
  color:var(--ink);
}

.project-pager-inner{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid rgba(17,17,17,.14);
  border-bottom:1px solid rgba(17,17,17,.14);
}

.project-pager-link{
  min-width:0;
  min-height:150px;
  padding:28px 0 30px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:30px;
  transition:opacity .2s ease;
}

.project-pager-link + .project-pager-link{
  border-left:1px solid rgba(17,17,17,.14);
  padding-left:clamp(22px,3vw,48px);
}

.project-pager-previous{
  padding-right:clamp(22px,3vw,48px);
}

.project-pager-next{
  text-align:right;
  align-items:flex-end;
}

.project-pager-link:only-child.project-pager-next{
  grid-column:2;
  border-left:1px solid rgba(17,17,17,.14);
  padding-left:clamp(22px,3vw,48px);
}

.project-pager-link:only-child.project-pager-previous{
  grid-column:1;
  padding-right:clamp(22px,3vw,48px);
}

.project-pager-label{
  color:var(--muted);
  font-size:11px;
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.project-pager-link strong{
  max-width:620px;
  font-family:var(--font-display);
  font-size:clamp(28px,3.2vw,50px);
  line-height:.95;
  letter-spacing:-0.015em;
  font-weight:600;
  transition:color .2s ease,transform .25s cubic-bezier(.2,.8,.2,1);
}

.project-pager-link:hover strong,
.project-pager-link:focus-visible strong{
  color:var(--accent);
}

.project-pager-previous:hover strong,
.project-pager-previous:focus-visible strong{
  transform:translateX(-4px);
}

.project-pager-next:hover strong,
.project-pager-next:focus-visible strong{
  transform:translateX(4px);
}

html[data-theme="dark"] .project-pager{
  background:var(--paper);
}

html[data-theme="dark"] .project-pager-inner,
html[data-theme="dark"] .project-pager-link + .project-pager-link,
html[data-theme="dark"] .project-pager-link:only-child.project-pager-next{
  border-color:var(--theme-border);
}

@media(max-width:760px){
  .project-pager{
    padding-left:20px;
    padding-right:20px;
    padding-bottom:82px;
  }

  .project-pager-inner{
    grid-template-columns:1fr;
  }

  .project-pager-link,
  .project-pager-link:only-child.project-pager-next,
  .project-pager-link:only-child.project-pager-previous{
    grid-column:1;
    min-height:118px;
    padding:22px 0 24px;
    text-align:left;
    align-items:flex-start;
    border-left:0;
  }

  .project-pager-link + .project-pager-link{
    border-left:0;
    border-top:1px solid rgba(17,17,17,.14);
  }

  html[data-theme="dark"] .project-pager-link + .project-pager-link{
    border-top-color:var(--theme-border);
  }

  .project-pager-link strong{
    font-size:clamp(28px,8vw,38px);
  }
}

/* v161: per-word serif emphasis from Decap Markdown --------------- */
/* In Decap, use the Italic button or wrap text in *asterisks*.
   The site interprets that as a typeface change rather than slanted sans. */
.serif-emphasis{
  font-family:'Sentient',Georgia,'Times New Roman',serif;
  font-style:normal;
  font-weight:400;
  letter-spacing:-0.008em;
}

/* v162: optional hover-image project thumbnails ------------------ */
.project-media .project-thumb-hover{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  opacity:0;
  transform:scale(1.018);
  pointer-events:none;
  transition:
    opacity .24s ease,
    transform .42s cubic-bezier(.2,.8,.2,1);
}

@media(hover:hover) and (pointer:fine){
  .project-card:hover .project-media.has-hover-thumbnail .project-thumb-hover,
  .project-card:focus-visible .project-media.has-hover-thumbnail .project-thumb-hover{
    opacity:1;
    transform:scale(1);
  }
}

@media(hover:none),(pointer:coarse){
  .project-media.has-hover-thumbnail .project-thumb-hover{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .project-media .project-thumb-hover{
    transition:none;
    transform:none;
  }
}

/* v163: stationary project cards with ambient thumbnail glow ------ */
.project-card{
  position:relative;
}

.project-media{
  overflow:visible;
  transform:none;
  transition:none;
  isolation:isolate;
}

.project-media-frame{
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
  border-radius:inherit;
  background:#ddd;
}

.project-thumb-glow{
  position:absolute;
  inset:4%;
  z-index:0;
  width:92% !important;
  height:92% !important;
  max-width:none;
  object-fit:cover;
  border-radius:inherit;
  opacity:0;
  filter:blur(clamp(24px,3vw,48px)) saturate(1.18);
  transform:scale(.98);
  pointer-events:none;
  will-change:opacity,transform;
  transition:
    opacity .32s ease,
    transform .48s cubic-bezier(.2,.8,.2,1);
}

/* The card no longer lifts. Hover energy comes from its own colors. */
.project-card:hover .project-media,
.project-card:focus-visible .project-media{
  transform:none !important;
}

@media(hover:hover) and (pointer:fine){
  .project-card:hover{
    z-index:3;
  }

  .project-card:hover .project-thumb-glow{
    opacity:.34;
    transform:scale(1.08);
  }
}

.project-card:focus-visible{
  z-index:3;
}

.project-card:focus-visible .project-thumb-glow{
  opacity:.34;
  transform:scale(1.08);
}

html[data-theme="dark"] .project-card:hover .project-thumb-glow,
html[data-theme="dark"] .project-card:focus-visible .project-thumb-glow{
  opacity:.42;
}

@media(prefers-reduced-motion:reduce){
  .project-thumb-glow{
    transition:none;
  }
}

/* v164: Contact page / Netlify form ------------------------------ */
.contact-page{
  min-height:100vh;
  background:var(--paper);
  color:var(--ink);
}

.contact-main{
  width:min(100%,calc(var(--max) + 14vw));
  margin:0 auto;
  padding:clamp(110px,14vw,210px) 7vw clamp(90px,10vw,150px);
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(420px,1.2fr);
  gap:clamp(64px,9vw,150px);
  align-items:start;
}

.contact-intro{
  position:sticky;
  top:150px;
}

.contact-kicker{
  margin:0 0 20px;
  color:var(--accent);
  font-size:11px;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.contact-intro h1{
  margin:0;
  max-width:740px;
  font-family:var(--font-display);
  font-size:clamp(58px,7.1vw,112px);
  line-height:.86;
  letter-spacing:-0.015em;
  font-weight:650;
}

.contact-intro-copy{
  margin-top:32px;
  max-width:560px;
}

.contact-intro-copy p{
  margin:0;
  color:var(--muted);
  font-size:clamp(16px,1.25vw,19px);
  line-height:1.55;
}

.contact-intro-copy p + p{
  margin-top:1em;
}

.contact-form-shell{
  padding-top:8px;
}

.contact-form{
  width:100%;
}

.contact-honeypot{
  position:absolute !important;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

.contact-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:30px 22px;
}

.contact-field{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}

.contact-field > span{
  font-size:11px;
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}

.contact-field small{
  font-size:9px;
  opacity:.65;
}

.contact-field input,
.contact-field select,
.contact-field textarea{
  width:100%;
  appearance:none;
  border:0;
  border-bottom:1px solid var(--theme-border);
  border-radius:0;
  padding:12px 0 14px;
  background:transparent;
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.4;
  outline:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}

.contact-field select{
  cursor:pointer;
}

.contact-field textarea{
  min-height:190px;
  resize:vertical;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{
  border-bottom-color:var(--accent);
  box-shadow:0 1px 0 var(--accent);
}

.contact-field-message{
  grid-column:1 / -1;
}

.contact-submit-row{
  margin-top:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}

.contact-submit{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:14px 22px 15px;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-sans);
  font-size:13px;
  line-height:1;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease,transform .2s ease;
}

.contact-submit:hover,
.contact-submit:focus-visible{
  background:var(--accent);
  color:#fff;
}

.contact-email-fallback{
  margin:0;
  color:var(--muted);
  font-size:12px;
}

.contact-email-fallback a{
  color:var(--ink);
  border-bottom:1px solid rgba(var(--accent-rgb),.55);
  padding-bottom:2px;
}

.contact-email-fallback a:hover,
.contact-email-fallback a:focus-visible{
  color:var(--accent);
}

.contact-success{
  padding:clamp(34px,5vw,64px) 0;
  border-top:1px solid var(--theme-border);
  border-bottom:1px solid var(--theme-border);
}

.contact-success h2{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(48px,6vw,90px);
  line-height:.9;
  letter-spacing:-0.015em;
}

.contact-success > div{
  margin-top:26px;
  max-width:520px;
}

.contact-success > div p{
  color:var(--muted);
  line-height:1.55;
}

.contact-success > a{
  display:inline-flex;
  gap:8px;
  margin-top:30px;
  padding-bottom:5px;
  border-bottom:1px solid rgba(var(--accent-rgb),.55);
  font-size:13px;
}

.contact-success > a:hover,
.contact-success > a:focus-visible{
  color:var(--accent);
}

html[data-theme="dark"] .contact-field option{
  background:var(--theme-paper);
  color:var(--theme-text);
}

@media(max-width:900px){
  .contact-main{
    grid-template-columns:1fr;
    gap:70px;
  }

  .contact-intro{
    position:static;
  }
}

@media(max-width:760px){
  .contact-main{
    padding:105px 20px 80px;
    gap:56px;
  }

  .contact-intro h1{
    font-size:clamp(54px,17vw,82px);
  }

  .contact-form-grid{
    grid-template-columns:1fr;
    gap:26px;
  }

  .contact-field-message{
    grid-column:1;
  }

  .contact-submit-row{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* v165: magnetic "Let's talk" footer CTA -------------------------- */
.footer-cta-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  margin-top:2px;
}

.footer-magnetic-zone{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Generous invisible hit area so the magnetic response begins well before
   the cursor reaches the visible pill. */
.footer-magnetic-zone::before{
  content:"";
  position:absolute;
  inset:-64px;
  border-radius:999px;
}

.footer-cta-magnetic{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  will-change:transform;
}

.footer-cta-magnetic [data-magnetic-label]{
  display:inline-block;
  pointer-events:none;
  will-change:transform;
}

.footer-playful-note{
  margin:4px 0 0;
  max-width:280px;
  color:#666;
  font-size:10px;
  line-height:1.35;
  letter-spacing:.01em;
  text-transform:none;
  opacity:0;
  transform:translateY(5px);
  transition:
    opacity .42s ease,
    transform .42s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}

.footer-playful-note.is-visible{
  opacity:.72;
  transform:none;
}

html[data-theme="dark"] .footer-playful-note{
  color:#777;
}

@media(hover:none),(pointer:coarse){
  .footer-magnetic-zone::before{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .footer-playful-note{
    transition:none;
    transform:none;
  }
}

/* v167: the delayed footer note only makes sense when magnetism exists */
@media(hover:none),(pointer:coarse){
  .footer-playful-note{
    display:none !important;
  }
}

/* v171: centered homepage hero ----------------------------------- */
.hero-collage-stage > .hero .hero-main{
  width:100%;
  text-align:center;
}

.hero-collage-stage > .hero .hero-gradient-title{
  width:min(1160px,100%);
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.hero-collage-stage > .hero .hero-greeting{
  width:100%;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.hero-collage-stage > .hero .hero-name{
  width:100%;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  overflow:visible;
}

/* Keep the name inside a centered line box so the Phillllllllll
   fold can expand without being pinned against a left-aligned edge. */
.hero-collage-stage > .hero .hero-name > .hero-gradient-fill{
  text-align:center;
  transform-origin:center center;
}

.hero-collage-stage > .hero .hero-intro{
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center;
}

.hero-collage-stage > .hero .tags{
  justify-content:center;
}

/* Preserve the fold's inline 3D/baseline mechanics and visible overflow. */
.hero-collage-stage > .hero .phill-easter-line,
.hero-collage-stage > .hero .phill-fold-tail{
  overflow:visible;
}

@media(max-width:760px){
  .hero-collage-stage > .hero .hero-gradient-title,
  .hero-collage-stage > .hero .hero-name{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }

  .hero-collage-stage > .hero .hero-name > .hero-gradient-fill{
    transform-origin:center center;
  }

  .hero-collage-stage > .hero .hero-intro{
    text-align:center;
  }
}

/* v172: restore left alignment + vertically center hero in swoop -- */
.hero-collage-stage > .hero .hero-main{
  width:100%;
  text-align:left;
}

.hero-collage-stage > .hero .hero-gradient-title{
  width:min(1160px,100%);
  margin-left:0;
  margin-right:0;
  text-align:left;
}

.hero-collage-stage > .hero .hero-greeting{
  width:auto;
  margin-left:0;
  margin-right:0;
  text-align:left;
}

.hero-collage-stage > .hero .hero-name{
  width:auto;
  margin-left:0;
  margin-right:0;
  text-align:left;
  overflow:visible;
}

.hero-collage-stage > .hero .hero-name > .hero-gradient-fill{
  text-align:left;
  transform-origin:left center;
}

.hero-collage-stage > .hero .hero-intro{
  margin-left:0 !important;
  margin-right:0 !important;
  text-align:left;
}

.hero-collage-stage > .hero .tags{
  justify-content:flex-start;
}

/* On desktop, let the hero copy occupy the remaining white swoop area
   beneath the nav, then center the copy vertically within that space. */
@media(min-width:761px){
  .hero-collage-stage > .hero{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }

  .hero-collage-stage > .hero .hero-main{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    padding-top:clamp(18px,2.5vh,34px) !important;
    padding-bottom:clamp(52px,7vh,90px) !important;
  }
}

@media(max-width:760px){
  .hero-collage-stage > .hero .hero-gradient-title,
  .hero-collage-stage > .hero .hero-name{
    margin-left:0;
    margin-right:0;
    text-align:left;
  }

  .hero-collage-stage > .hero .hero-name > .hero-gradient-fill{
    transform-origin:left center;
  }

  .hero-collage-stage > .hero .hero-intro{
    text-align:left;
  }
}

/* v173: calmer moving gallery + type-on rotating hero word -------- */
.hero-collage-sequence .marquee{
  animation-duration:78s !important;
}

/* Remove the old scramble/swap distortion. The only movement now comes
   from characters typing and erasing. */
.hero-rotating-word{
  white-space:nowrap;
  transform:none;
  filter:none;
  opacity:1;
}

.hero-rotating-word.is-changing{
  transform:none;
  filter:none;
  opacity:1;
}

.hero-rotating-word::after{
  content:"";
  display:inline-block;
  width:1.5px;
  height:.82em;
  margin-left:.065em;
  vertical-align:-.06em;
  background:currentColor;
  opacity:0;
}

.hero-rotating-word.is-typing::after{
  opacity:.72;
  animation:heroTypeCaret .68s steps(1,end) infinite;
}

@keyframes heroTypeCaret{
  0%,48%{opacity:.72}
  49%,100%{opacity:0}
}

@media(max-width:760px){
  .hero-collage-sequence .marquee{
    animation-duration:86s !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-rotating-word::after{
    display:none;
  }
}

/* v174: rotating word inherits the complete Hero Intro typography -- */
.hero-collage-stage > .hero .hero-rotating-word{
  font-family:inherit;
  font-size:1em;
  font-style:inherit;
  font-weight:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
}

/* v178: 16:9 moving-gallery tiles -------------------------------- */
/* The columns get wider along with the new landscape ratio so the
   two/three-image stacks still fill the framed gallery vertically. */
.hero-collage-sequence .group{
  grid-template-columns:repeat(16,clamp(190px,18vw,300px));
}

.hero-collage-sequence .tile,
.hero-collage-sequence .tile-extra{
  aspect-ratio:16 / 9;
}

/* Two-tile columns are vertically centered against taller three-tile
   columns, which keeps the landscape mosaic feeling intentional. */
.hero-collage-sequence .group{
  align-items:stretch;
}

.hero-collage-sequence .column,
.hero-collage-sequence .column.two,
.hero-collage-sequence .column.three{
  height:100%;
  justify-content:center;
}

/* Wider cards increase the total marquee width. Lengthen the loop so
   the perceived horizontal drift stays calm rather than speeding up. */
.hero-collage-sequence .marquee{
  animation-duration:112s !important;
}

@media(max-width:1050px){
  .hero-collage-sequence .group{
    grid-template-columns:repeat(16,clamp(180px,24vw,250px));
  }
}

@media(max-width:760px){
  .hero-collage-sequence .group{
    grid-template-columns:repeat(16,clamp(165px,42vw,230px));
  }

  .hero-collage-sequence .marquee{
    animation-duration:120s !important;
  }
}



/* v179: scroll-filled gallery interlude --------------------------- */
.gallery-interlude-word{
  display:inline;
  opacity:.18;
  will-change:opacity;
}

.gallery-interlude p{
  transform:none;
}


/* v4: compact hero/gallery runway now that the interlude is removed */
.hero-collage-sequence{
  height:245svh !important;
}

@media(max-width:760px){
  .hero-collage-sequence{
    height:230svh !important;
  }
}

/* v55 philosophy / process concept */
.philosophy-section{background:#111;color:#f7f7f4;min-height:78vh;display:grid;place-items:center;padding:110px 7vw;text-align:center}.philosophy-inner{width:min(1100px,100%);display:flex;flex-direction:column;align-items:center}.philosophy-title{margin:0 0 clamp(48px,7vw,88px);font-size:clamp(40px,5.2vw,78px);line-height:.95;letter-spacing:-.035em;font-weight:700}.philosophy-title em,.process-head em{font-family:'Sentient',Georgia,serif;font-weight:400}.philosophy-statement{display:flex;justify-content:center;flex-wrap:wrap;gap:.08em .24em;max-width:950px;font-size:clamp(34px,5vw,74px);line-height:.98;letter-spacing:-.04em;font-weight:650}.philosophy-statement span{display:inline-block;will-change:transform}.philosophy-statement [data-word="building"]{order:1}.philosophy-statement [data-word="brands"]{order:2}.philosophy-statement [data-word="that"]{order:3}.philosophy-statement [data-word="people"]{order:4}.philosophy-statement [data-word="care"]{order:5}.philosophy-statement [data-word="about"]{order:6}.philosophy-statement.is-swapped [data-word="care"]{order:4}.philosophy-statement.is-swapped [data-word="about"]{order:5}.philosophy-statement.is-swapped [data-word="people"]{order:6}.philosophy-step{margin-top:54px;display:flex;align-items:center;gap:8px;font-size:clamp(18px,2vw,27px);font-weight:650;min-height:44px}.philosophy-icon{width:32px;height:32px;margin-left:5px;overflow:visible}.philosophy-icon path{fill:none;stroke:currentColor;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}.philosophy-cta{margin-top:28px;background:#f7f7f4;color:#111;border-radius:999px;padding:12px 18px;font-size:13px;font-weight:650;transition:transform .2s ease}.philosophy-cta:hover{transform:translateY(-2px)}.process-section{background:#f7f7f4;color:#111;padding:clamp(100px,12vw,180px) 7vw;scroll-margin-top:90px}.process-inner{max-width:1500px;margin:auto}.process-head{display:grid;grid-template-columns:.55fr 1.45fr;gap:40px;margin-bottom:clamp(70px,9vw,130px)}.process-head>p{margin:0;font-size:clamp(34px,4.2vw,64px);font-weight:700;letter-spacing:-.035em}.process-head h2{margin:0;font-size:clamp(42px,5.5vw,82px);line-height:.96;letter-spacing:-.04em}.process-list{border-top:1px solid rgba(0,0,0,.2)}.process-item{display:grid;grid-template-columns:.25fr .65fr 1.1fr;gap:30px;align-items:start;padding:34px 0;border-bottom:1px solid rgba(0,0,0,.2)}.process-index{font-size:12px;color:#777}.process-item h3{margin:0;font-size:clamp(28px,3vw,46px);line-height:1}.process-item p{margin:0;max-width:650px;font-size:16px;line-height:1.55;color:#666}@media(max-width:760px){.philosophy-section{min-height:72vh;padding:90px 20px}.philosophy-title{margin-bottom:44px}.philosophy-statement{font-size:clamp(34px,10vw,54px);gap:.06em .2em}.philosophy-step{margin-top:42px}.process-section{padding:90px 20px}.process-head{grid-template-columns:1fr;gap:22px}.process-item{grid-template-columns:44px 1fr;gap:12px 16px}.process-item p{grid-column:2}}
/* v3 philosophy CMS controls + restored hero */
.philosophy-section{background:var(--ph-bg,#111);color:var(--ph-text,#f7f7f4);text-align:var(--ph-align,center)}
.philosophy-inner{align-items:var(--ph-align,center)}
.philosophy-title{font-size:clamp(40px,5.2vw,var(--ph-title-size,78px))}
.philosophy-statement{font-size:clamp(34px,5vw,var(--ph-statement-size,74px))}
.philosophy-process-preview{margin-top:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.philosophy-icon{width:var(--ph-icon-size,40px);height:var(--ph-icon-size,40px);margin:0;display:block}
.philosophy-step{margin-top:0;justify-content:center}
.process-section{background:var(--pr-bg,#f7f7f4);color:var(--pr-text,#111)}
.process-head h2{font-size:clamp(42px,5.5vw,var(--pr-heading-size,82px))}
.process-item h3{font-size:clamp(28px,3vw,var(--pr-step-size,46px))}
@media(max-width:760px){.philosophy-process-preview{margin-top:42px}}
/* CMS hero style controls, preserving the existing hero as defaults. */
.hero-collage-stage > .hero{color:var(--hero-text,#111)}
.hero-collage-stage > .hero .hero-main{text-align:var(--hero-align,center)}
.hero-collage-stage > .hero .hero-gradient-title,.hero-collage-stage > .hero .hero-greeting,.hero-collage-stage > .hero .hero-name{ text-align:var(--hero-align,center)}
.hero-collage-stage > .hero .hero-greeting{font-size:clamp(34px,3.7vw,var(--hero-greeting-max,58px))}
.hero-collage-stage > .hero .hero-name{font-size:clamp(88px,10.8vw,var(--hero-name-max,168px))}
.hero-collage-stage > .hero .hero-intro{font-size:clamp(25px,2.75vw,var(--hero-intro-max,44px));color:var(--hero-text,#111)}

/* v4: hero alignment + explicit homepage process sizing controls */
.hero-collage-stage > .hero .hero-main,
.hero-collage-stage > .hero .hero-gradient-title,
.hero-collage-stage > .hero .hero-greeting,
.hero-collage-stage > .hero .hero-name,
.hero-collage-stage > .hero .hero-intro{
  text-align:var(--hero-align,left) !important;
}
.hero-collage-stage > .hero .hero-main{align-items:flex-start !important;}
.hero-collage-stage > .hero .tags{justify-content:flex-start !important;}
.philosophy-step{font-size:clamp(18px,2vw,var(--ph-step-size,27px));}
.philosophy-cta{font-size:var(--ph-cta-size,13px);}


/* v5 homepage process: direct CMS sizing + pinned scroll pause */
.philosophy-scroll{position:relative;height:var(--ph-scroll-height,495vh);background:var(--ph-bg,#111);}
.philosophy-scroll .philosophy-section{position:sticky;top:0;height:100vh;min-height:100vh;padding:clamp(72px,8vh,110px) 7vw;overflow:hidden;display:grid;place-items:center;}
.philosophy-scroll .philosophy-title{font-size:var(--ph-title-size,78px);}
.philosophy-scroll .philosophy-statement{font-size:var(--ph-statement-size,74px);}
.philosophy-scroll .philosophy-step{font-size:var(--ph-step-size,27px);}
.philosophy-scroll .philosophy-cta{font-size:var(--ph-cta-size,13px);}
.philosophy-scroll .philosophy-icon{width:var(--ph-icon-size,40px);height:var(--ph-icon-size,40px);}
@media(max-width:760px){
  .philosophy-scroll{height:calc(var(--ph-scroll-height,495vh) * .72);}
  .philosophy-scroll .philosophy-section{padding:72px 20px;}
  .philosophy-scroll .philosophy-title{font-size:min(var(--ph-title-size,78px),14vw);}
  .philosophy-scroll .philosophy-statement{font-size:min(var(--ph-statement-size,74px),11vw);}
}

/* v6: sitewide Decap rich-text rendering ----------------------------------- */
.rich-inline-heading{display:inline;font:inherit;line-height:inherit;letter-spacing:inherit}
.rich-inline-h1{font-size:1.35em;font-weight:800}
.rich-inline-h2{font-size:1.2em;font-weight:750}
.rich-inline-h3{font-size:1.1em;font-weight:700}
.rich-inline-h4,.rich-inline-h5,.rich-inline-h6{font-size:1em;font-weight:700}
.rich-inline-quote{font-family:'Sentient',Georgia,serif;font-style:italic}
.rich-inline-list-item{display:inline}

.hero-intro a,.work-intro a,.tools-head a,.philosophy-section a:not(.philosophy-cta),
.bio-copy a:not(.bio-link),.experience-section a,.process-section a,.contact-intro a,
.projects-index-head a,.journal-index-head a,.footer-copy a,.construction-message a,
.project-copy a,.tool-card a,.case-body a,.tool-detail-description a{
  text-decoration:underline;
  text-decoration-thickness:.08em;
  text-underline-offset:.14em;
}

.hero-intro code,.work-intro code,.tools-head code,.bio-copy code,.experience-section code,
.process-section code,.contact-intro code,.projects-index-head code,.journal-index-head code,
.footer-copy code,.construction-message code,.project-copy code,.tool-card code,.case-body code,
.tool-detail-description code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:.86em;
  padding:.08em .28em;
  border:1px solid currentColor;
  border-radius:.3em;
}

.bio-body h1,.footer-copy h1,.experience-description h1,.contact-intro-copy h1,
.projects-index-intro h1,.journal-index-intro h1,.construction-message h1,
.tool-detail-description h1,.process-item-body h1,.journal-card-tldr h1{
  margin:.6em 0 .25em;font-size:1.65em;line-height:1.05;letter-spacing:-.025em
}
.bio-body h2,.footer-copy h2,.experience-description h2,.contact-intro-copy h2,
.projects-index-intro h2,.journal-index-intro h2,.construction-message h2,
.tool-detail-description h2,.process-item-body h2,.journal-card-tldr h2{
  margin:.7em 0 .3em;font-size:1.4em;line-height:1.1;letter-spacing:-.02em
}
.bio-body h3,.footer-copy h3,.experience-description h3,.contact-intro-copy h3,
.projects-index-intro h3,.journal-index-intro h3,.construction-message h3,
.tool-detail-description h3,.process-item-body h3,.journal-card-tldr h3{
  margin:.8em 0 .3em;font-size:1.18em;line-height:1.15
}
.bio-body h4,.bio-body h5,.bio-body h6,.footer-copy h4,.footer-copy h5,.footer-copy h6,
.experience-description h4,.experience-description h5,.experience-description h6,
.contact-intro-copy h4,.contact-intro-copy h5,.contact-intro-copy h6,
.projects-index-intro h4,.projects-index-intro h5,.projects-index-intro h6,
.journal-index-intro h4,.journal-index-intro h5,.journal-index-intro h6,
.construction-message h4,.construction-message h5,.construction-message h6,
.tool-detail-description h4,.tool-detail-description h5,.tool-detail-description h6,
.process-item-body h4,.process-item-body h5,.process-item-body h6,
.journal-card-tldr h4,.journal-card-tldr h5,.journal-card-tldr h6{
  margin:.8em 0 .3em;font-size:1em;line-height:1.2
}

.bio-body ul,.bio-body ol,.footer-copy ul,.footer-copy ol,.experience-description ul,.experience-description ol,
.contact-intro-copy ul,.contact-intro-copy ol,.projects-index-intro ul,.projects-index-intro ol,
.journal-index-intro ul,.journal-index-intro ol,.construction-message ul,.construction-message ol,
.tool-detail-description ul,.tool-detail-description ol,.process-item-body ul,.process-item-body ol,
.journal-card-tldr ul,.journal-card-tldr ol{
  margin:.65em 0;padding-left:1.25em
}

.bio-body blockquote,.footer-copy blockquote,.experience-description blockquote,.contact-intro-copy blockquote,
.projects-index-intro blockquote,.journal-index-intro blockquote,.construction-message blockquote,
.tool-detail-description blockquote,.process-item-body blockquote,.journal-card-tldr blockquote,
.case-body blockquote{
  margin:1em 0;padding-left:1em;border-left:2px solid currentColor;font-family:'Sentient',Georgia,serif;font-style:italic
}

.bio-body hr,.footer-copy hr,.experience-description hr,.contact-intro-copy hr,
.projects-index-intro hr,.journal-index-intro hr,.construction-message hr,
.tool-detail-description hr,.process-item-body hr,.journal-card-tldr hr,.case-body hr{
  border:0;border-top:1px solid currentColor;opacity:.2;margin:1.5em 0
}

.process-item-body{max-width:650px;min-width:0}
.process-item-body p{margin:0;font-size:16px;line-height:1.55;color:#666}
.process-item-body p+p{margin-top:.75em}
.process-item-body ul,.process-item-body ol{color:#666;font-size:16px;line-height:1.55}
html[data-theme="dark"] .process-item-body p,html[data-theme="dark"] .process-item-body ul,html[data-theme="dark"] .process-item-body ol{color:inherit;opacity:.72}

.journal-card-tldr p{margin:.45em 0 0}
.case-tldr > p,.case-tldr > div > p{margin:.65em 0 0}

@media(max-width:760px){
  .process-item-body{grid-column:2}
}


/* v7: cursor-reactive hero dot field */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero-main{position:relative;z-index:2}
.hero-dot-field{
  --dot-x:52%;
  --dot-y:56%;
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:var(--hero-dot-opacity,.28);
  background-image:radial-gradient(circle, var(--hero-dot-color,#111111) 1.35px, transparent 1.7px);
  background-size:25px 25px;
  background-position:center;
  -webkit-mask-image:radial-gradient(circle 340px at var(--dot-x) var(--dot-y),#000 0%,rgba(0,0,0,.92) 18%,rgba(0,0,0,.48) 48%,rgba(0,0,0,.10) 76%,transparent 100%);
  mask-image:radial-gradient(circle 340px at var(--dot-x) var(--dot-y),#000 0%,rgba(0,0,0,.92) 18%,rgba(0,0,0,.48) 48%,rgba(0,0,0,.10) 76%,transparent 100%);
  transition:opacity .35s ease;
}
.hero-dot-field.is-active{opacity:var(--hero-dot-hover-opacity,.72)}
.hero-dot-field.is-static{opacity:var(--hero-dot-opacity,.28);--dot-x:68%;--dot-y:52%}
@media(max-width:760px){
  .hero-dot-field{background-size:22px 22px;-webkit-mask-image:radial-gradient(circle 230px at var(--dot-x) var(--dot-y),#000 0%,rgba(0,0,0,.72) 42%,transparent 100%);mask-image:radial-gradient(circle 230px at var(--dot-x) var(--dot-y),#000 0%,rgba(0,0,0,.72) 42%,transparent 100%)}
}
@media(prefers-reduced-motion:reduce){.hero-dot-field{transition:none}}

/* v9: true MorphSVG process mark */
.philosophy-icon{overflow:visible}
.philosophy-icon path{fill:currentColor;stroke:none;transform-origin:50% 50%}

/* v13: CMS-controlled dot geometry + homepage section spacing */
.hero{padding-top:var(--hero-pad-top,34px);padding-bottom:var(--hero-pad-bottom,34px)}
.hero-dot-field{
  background-image:radial-gradient(circle, var(--hero-dot-color,#111111) var(--hero-dot-size,1.35px), transparent calc(var(--hero-dot-size,1.35px) + .35px));
  background-size:var(--hero-dot-spacing,25px) var(--hero-dot-spacing,25px);
}
.after-collage{padding-top:var(--section-pad-top,72px);padding-bottom:var(--section-pad-bottom,110px)}
.tools-section{padding-top:var(--section-pad-top,0px);padding-bottom:var(--section-pad-bottom,120px)}
.philosophy-scroll .philosophy-section{padding-top:var(--ph-pad-top,110px);padding-bottom:var(--ph-pad-bottom,110px)}
@media(max-width:760px){
  .hero{padding-top:var(--hero-pad-top,24px);padding-bottom:var(--hero-pad-bottom,24px)}
  .hero-dot-field{background-size:var(--hero-dot-spacing,22px) var(--hero-dot-spacing,22px)}
  .after-collage{padding-top:var(--section-pad-top,58px);padding-bottom:var(--section-pad-bottom,80px)}
  .tools-section{padding-top:var(--section-pad-top,0px);padding-bottom:var(--section-pad-bottom,76px)}
  .philosophy-scroll .philosophy-section{padding-top:var(--ph-pad-top,72px);padding-bottom:var(--ph-pad-bottom,72px)}
}


/* v14: CMS section colors + true rich-text italics */
em{font-style:italic}
.serif-emphasis{font-style:normal}
.hero{background:var(--hero-bg,#f7f7f4);color:var(--hero-text,#111111)}
.collage-wrap{background:var(--section-bg,#111111);color:var(--section-text,#f7f7f4)}
.after-collage{background:var(--section-bg,var(--soft));color:var(--section-text,var(--ink))}
.after-collage:before{background:var(--section-bg,var(--soft))}
.tools-section{background:var(--section-bg,#111);color:var(--section-text,#f5f2ea)}
footer{background:var(--footer-bg,#0a0a0a);color:var(--footer-text,#f5f2ea)}
html[data-theme="dark"] footer{background:var(--footer-bg,#0a0a0a);color:var(--footer-text,#f5f2ea)}

/* v15: CMS section colors must win over legacy theme + muted child colors */
.hero,
html[data-theme="light"] .hero,
html[data-theme="dark"] .hero{background:var(--hero-bg,#f7f7f4)!important;color:var(--hero-text,#111)!important}
.collage-wrap,
html[data-theme="light"] .collage-wrap,
html[data-theme="dark"] .collage-wrap{background:var(--section-bg,#111)!important;color:var(--section-text,#f7f7f4)!important}
.after-collage,
html[data-theme="light"] .after-collage,
html[data-theme="dark"] .after-collage{background:var(--section-bg,var(--soft))!important;color:var(--section-text,var(--ink))!important}
.after-collage:before,
html[data-theme="light"] .after-collage:before,
html[data-theme="dark"] .after-collage:before{background:var(--section-bg,var(--soft))!important}
.tools-section,
html[data-theme="light"] .tools-section,
html[data-theme="dark"] .tools-section{background:var(--section-bg,#111)!important;color:var(--section-text,#f5f2ea)!important}
.philosophy-scroll,
.philosophy-section,
html[data-theme="light"] .philosophy-section,
html[data-theme="dark"] .philosophy-section{background:var(--ph-bg,#111)!important;color:var(--ph-text,#f7f7f4)!important}
footer,
html[data-theme="light"] footer,
html[data-theme="dark"] footer{background:var(--footer-bg,#0a0a0a)!important;color:var(--footer-text,#f5f2ea)!important}

/* Text inside CMS-colored sections inherits the chosen section text color. */
.hero .hero-intro,.hero .tags,
.after-collage .work-intro,.after-collage .work-intro p,.after-collage .work-intro span,
.after-collage .project-copy,.after-collage .project-copy h2,.after-collage .project-copy p,
.after-collage .all-projects-cta,.after-collage .all-projects-cta a,
.tools-section .tools-head,.tools-section .tools-head h2,.tools-section .tools-head p,
.tools-section .tool-card,.tools-section .tool-card strong,.tools-section .tool-card span,
.philosophy-section .philosophy-title,.philosophy-section .philosophy-statement,.philosophy-section .philosophy-step,
footer .footer-main,footer .footer-main h2,footer .footer-side,footer .footer-side p,footer .footer-bottom,footer .footer-links{color:inherit!important}

/* Borders adapt to the chosen text color instead of staying hard-coded black/gray. */
.after-collage .pill{border-color:color-mix(in srgb,currentColor 22%,transparent)}
.tools-section .tools-rule,.tools-section .tools-row,.tools-section .tool-card{border-color:color-mix(in srgb,currentColor 20%,transparent)}
\n\n/* ==================================================================\n   v16 — Decap wiring audit\n   CMS values are the source of truth. Section padding is applied to the\n   element that actually owns the visible content, so a value of 0 is 0.\n   ================================================================== */\n.hero{padding-top:0!important;padding-bottom:0!important;}\n.hero .hero-main{padding-top:var(--hero-pad-top,34px)!important;padding-bottom:var(--hero-pad-bottom,34px)!important;}\n.after-collage{padding-top:var(--section-pad-top,72px)!important;padding-bottom:var(--section-pad-bottom,110px)!important;}\n.tools-section{padding-top:var(--section-pad-top,0px)!important;padding-bottom:var(--section-pad-bottom,120px)!important;}\n.philosophy-scroll .philosophy-section{padding-top:var(--ph-pad-top,110px)!important;padding-bottom:var(--ph-pad-bottom,110px)!important;}\n@media(max-width:760px){\n  .hero .hero-main{padding-top:var(--hero-pad-top,34px)!important;padding-bottom:var(--hero-pad-bottom,34px)!important;}\n  .after-collage{padding-top:var(--section-pad-top,72px)!important;padding-bottom:var(--section-pad-bottom,110px)!important;}\n  .tools-section{padding-top:var(--section-pad-top,0px)!important;padding-bottom:var(--section-pad-bottom,120px)!important;}\n  .philosophy-scroll .philosophy-section{padding-top:var(--ph-pad-top,110px)!important;padding-bottom:var(--ph-pad-bottom,110px)!important;}\n}\n

/* v17 — restore hero → moving-gallery swoop after CMS color wiring */
.hero-collage-stage > .hero,
html[data-theme="light"] .hero-collage-stage > .hero,
html[data-theme="dark"] .hero-collage-stage > .hero{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
}
.hero-collage-stage > .hero .hero-main{background:transparent!important;}
.curve-swipe{opacity:1;visibility:visible;pointer-events:none;}
.curve-swipe-path{fill:var(--hero-paper,#f7f7f4)!important;}
/* v3.0 clean homepage */
.v3-page{min-height:100vh;padding:34px 7vw 0}.v3-page .nav{display:flex;align-items:center;justify-content:space-between}.v3-page .brand{width:42px;height:42px}.v3-page .brand-logo{width:100%;height:100%}.v3-page .nav-actions,.v3-page .links{display:flex;align-items:center}.v3-page .nav-actions{gap:20px}.v3-page .links{gap:26px}.v3-editorial{padding:clamp(72px,10vw,150px) 0 7vw}.v3-copy{display:grid;grid-template-columns:1.45fr .55fr;gap:5vw;align-items:end;margin-bottom:clamp(56px,7vw,100px)}.v3-copy h1{font-size:clamp(64px,10vw,154px);line-height:.82;letter-spacing:-.055em;font-weight:650;margin:0}.v3-copy p{font-family:Sentient,Georgia,serif;font-size:clamp(19px,2vw,28px);line-height:1.25;margin:0;max-width:520px}.v3-ticker{width:calc(100% + 14vw);margin-left:-7vw;overflow:hidden;border-top:1px solid #bbb;border-bottom:1px solid #bbb;padding:11px 0;margin-bottom:14px}.v3-ticker-track{display:flex;width:max-content;animation:v3ticker 38s linear infinite}.v3-ticker-set{flex:none;white-space:nowrap;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding-right:1ch}@keyframes v3ticker{to{transform:translateX(-50%)}}.v3-slideshow{position:relative;width:calc(100% + 14vw);margin-left:-7vw;aspect-ratio:16/8.4;overflow:hidden;background:#ddd}.v3-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}.v3-slide.is-active{opacity:1}@media(max-width:760px){.v3-page{padding:24px 20px 0}.v3-copy{grid-template-columns:1fr;gap:28px}.v3-copy h1{font-size:clamp(62px,20vw,104px)}.v3-editorial{padding-top:72px}.v3-slideshow{width:calc(100% + 40px);margin-left:-20px;aspect-ratio:4/3}.v3-slide{object-fit:contain;background:#ddd}}@media(prefers-reduced-motion:reduce){.v3-ticker-track{animation:none}}

/* v3 restored site cursor */
@media(hover:hover) and (pointer:fine){html,body,a,button,input,textarea,select,label,[role="button"]{cursor:none!important}.site-cursor{position:fixed;top:0;left:0;z-index:2147483647;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.46);mix-blend-mode:difference;opacity:0;pointer-events:none;will-change:transform,opacity;transition:opacity .18s ease}.site-cursor.is-visible{opacity:1}.site-cursor.is-hovering{background:rgba(255,255,255,.58)}}
@media(max-width:760px){.v3-ticker{width:calc(100% + 40px);margin-left:-20px}}

/* v3.0 ticker: four identical runs guarantee edge-to-edge coverage on wide displays. */
.v3-ticker-track{min-width:max-content;}
.v3-ticker-set{display:block;}
@keyframes v3ticker{from{transform:translateX(0)}to{transform:translateX(-25%)}}

/* v3.0 Decap-controlled type sizes + transparent slideshow */
.v3-page .links a{font-size:var(--nav-size,14px)}
.v3-copy h1{font-size:var(--desktop-size,clamp(64px,10vw,154px))}
.v3-copy p{font-size:var(--desktop-size,clamp(19px,2vw,28px))}
.v3-ticker-set{font-size:var(--desktop-size,14px)}
.v3-slideshow,.v3-slide{background:transparent!important}
.construction-status{font-size:var(--construction-status-size,12px)}
.construction-copy h1{font-size:var(--construction-heading-size,120px)}
.construction-message{font-size:var(--construction-message-size,20px)}
.construction-bottom{font-size:var(--construction-footer-size,12px)}
@media(max-width:760px){
  .v3-copy h1{font-size:clamp(62px,20vw,104px)}
  .v3-copy p{font-size:clamp(19px,2vw,28px)}
  .v3-ticker-set{font-size:10px}
}

/* v3 project page builder */
.project-page{padding-bottom:8vw}.project-page .nav{display:flex;align-items:center;justify-content:space-between}.project-hero{padding:clamp(90px,12vw,180px) 0 clamp(55px,7vw,100px)}.project-hero h1{font-size:clamp(64px,11vw,170px);line-height:.84;letter-spacing:-.06em;margin:0 0 56px;max-width:1200px}.project-meta{display:flex;flex-wrap:wrap;gap:10px 28px;padding:16px 0;border-top:1px solid currentColor;border-bottom:1px solid currentColor;font-size:13px;text-transform:uppercase;letter-spacing:.1em}.project-intro{font-family:Sentient,Georgia,serif;font-size:var(--intro-size,28px);line-height:1.35;max-width:900px;margin:64px 0 0}.project-intro p{margin:0 0 1em}.project-tldr{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px;font-size:15px;line-height:1.4}.project-tldr>div{border-top:1px solid currentColor;padding-top:12px}.project-featured,.project-full-image{width:calc(100% + 14vw);margin-left:-7vw;margin-right:-7vw}.project-featured{margin-top:0;margin-bottom:0}.project-featured img,.project-full-image img,.project-two img,.project-gallery img{display:block;width:100%;height:auto}.project-sections{padding-top:clamp(60px,8vw,120px)}.project-sections>*{margin-top:0;margin-bottom:clamp(60px,8vw,120px)}.project-rich{font-family:Sentient,Georgia,serif;font-size:var(--text-size,20px);line-height:1.55;max-width:var(--max-width,900px);margin-left:auto;margin-right:auto}.project-rich h2,.project-rich h3{font-family:'Red Hat Display',sans-serif;letter-spacing:-.03em;line-height:1}.project-rich h2{font-size:2.2em}.project-rich h3{font-size:1.5em}.project-rich a{text-decoration:underline}.project-full-image figcaption{font-size:12px;padding:10px 7vw 0}.project-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap,16px)}.project-gallery{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:var(--gap,16px)}.project-spacer{margin-bottom:0!important}
@media(max-width:760px){.project-page{padding-left:20px;padding-right:20px}.project-hero h1{font-size:clamp(58px,19vw,100px);margin-bottom:38px}.project-meta{display:grid;grid-template-columns:1fr 1fr}.project-intro{font-size:22px!important;margin-top:42px}.project-tldr{grid-template-columns:1fr;gap:18px;margin-top:42px}.project-featured,.project-full-image{width:calc(100% + 40px);margin-left:-20px;margin-right:-20px}.project-full-image figcaption{padding-left:20px}.project-two{grid-template-columns:1fr}.project-gallery{grid-template-columns:repeat(min(var(--cols,2),2),1fr)}}

/* v3.0 project editorial layout — image-led, generous, no hairline dividers */
.project-page{padding-bottom:10vw}
.project-hero{padding:clamp(110px,13vw,190px) 0 clamp(72px,8vw,120px)}
.project-title-row{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);gap:clamp(48px,8vw,140px);align-items:end}
.project-hero h1{font-size:clamp(68px,9.2vw,148px);line-height:.88;letter-spacing:-.058em;margin:0;max-width:1100px}
.project-intro{font-family:Sentient,Georgia,serif;font-size:var(--intro-size,28px);line-height:1.32;max-width:540px;margin:0 0 .12em}
.project-intro p{margin:0}.project-intro p+p{margin-top:.8em}
.project-details{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:clamp(70px,8vw,120px);max-width:1100px}
.project-details>div{display:flex;flex-direction:column;gap:7px}
.project-details span{font-size:11px;line-height:1;text-transform:uppercase;letter-spacing:.12em;opacity:.52}
.project-details strong{font-size:15px;line-height:1.25;font-weight:500}
.project-tldr{display:grid;grid-template-columns:140px 1fr;gap:clamp(28px,5vw,80px);margin-top:clamp(58px,7vw,100px);padding:clamp(26px,3vw,42px);background:#111;color:#f7f7f4;border-radius:0}
.project-tldr-label{font-size:clamp(24px,2.8vw,42px);font-weight:700;line-height:.9;letter-spacing:-.045em}
.project-tldr-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 36px;align-items:start}
.project-tldr-points p{margin:0;font-size:15px;line-height:1.4}
.project-tldr-points p:before{content:'↳';display:block;font-size:14px;margin-bottom:8px;opacity:.55}
.project-featured,.project-full-image{width:calc(100% + 14vw);margin-left:-7vw;margin-right:-7vw}
.project-featured{margin-top:0;margin-bottom:0}.project-featured img{max-height:none;object-fit:cover}
.project-sections{padding-top:clamp(72px,9vw,140px)}
.project-sections>*{margin-top:0;margin-bottom:clamp(72px,9vw,140px)}
.project-rich{font-family:Sentient,Georgia,serif;font-size:var(--text-size,20px);line-height:1.55;max-width:var(--max-width,900px);margin-left:0;margin-right:auto}
.project-rich h2,.project-rich h3{font-family:'Red Hat Display',sans-serif;letter-spacing:-.04em;line-height:.95;max-width:850px}
.project-rich h2{font-size:clamp(42px,5vw,76px);margin:0 0 .45em}.project-rich h3{font-size:clamp(30px,3.4vw,52px);margin:0 0 .5em}
.project-rich p{max-width:760px}.project-rich p+p{margin-top:1em}
.project-two,.project-gallery{width:100%}
/* Explicitly kill legacy hairlines inside the new project header. */
.project-page .project-meta,.project-page .project-tldr>div{border:0!important}
@media(max-width:760px){
 .project-page{padding-left:20px;padding-right:20px}
 .project-hero{padding-top:96px;padding-bottom:62px}
 .project-title-row{grid-template-columns:1fr;gap:34px}
 .project-hero h1{font-size:clamp(58px,18vw,96px)}
 .project-intro{font-size:22px!important;max-width:100%}
 .project-details{grid-template-columns:1fr 1fr;gap:24px 18px;margin-top:52px}
 .project-tldr{grid-template-columns:1fr;gap:26px;margin-top:52px;padding:26px 22px}
 .project-tldr-points{grid-template-columns:1fr;gap:20px}
 .project-tldr-points p:before{display:inline;margin:0 9px 0 0}
 .project-featured,.project-full-image{width:calc(100% + 40px);margin-left:-20px;margin-right:-20px}
 .project-full-image figcaption{padding-left:20px}
 .project-rich{max-width:100%!important}
}

/* v3 project refinement: featured-first + subtle TLDR */
.project-featured-first{margin-top:clamp(84px,9vw,128px);margin-bottom:0}
.project-featured-first + .project-hero{padding-top:clamp(64px,7vw,104px)}
.project-tldr{background:rgba(17,17,17,.045);color:var(--ink);padding:clamp(22px,2.4vw,34px);gap:clamp(22px,4vw,60px)}
.project-tldr-label{font-size:12px;line-height:1;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding-top:4px}
.project-tldr-points{gap:14px 32px}
.project-tldr-points p{font-size:15px;line-height:1.45}
.project-tldr-points p:before{display:none!important;content:none!important}
@media(max-width:760px){
 .project-featured-first{margin-top:76px}
 .project-featured-first + .project-hero{padding-top:48px}
 .project-tldr{padding:22px 20px;gap:18px}
 .project-tldr-points{gap:12px}
 .project-tldr-points p:before{display:none!important;content:none!important}
}

/* v3 project back-to-top */
.back-to-top{position:fixed;right:24px;bottom:24px;z-index:9999;width:52px;height:52px;border:0;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .22s ease,transform .22s ease,visibility .22s ease;font:600 18px/1 'Red Hat Display',sans-serif}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:700px){.back-to-top{right:16px;bottom:16px;width:46px;height:46px}}

/* v3 flexible project blocks + animation library */
.project-text-columns{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:var(--gap,32px)}
.project-text-columns>div{font-family:Sentient,Georgia,serif;font-size:var(--text-size,18px);line-height:1.55}.project-text-columns p:first-child{margin-top:0}
.project-image-block{margin-left:auto;margin-right:auto}.project-image-block img,.project-image-columns img,.project-image-text img{display:block;width:100%;height:auto}.project-image-block.width-bleed{width:calc(100% + 14vw);margin-left:-7vw;margin-right:-7vw}.project-image-block.width-full{width:100%}.project-image-block.width-threequarter{width:75%}.project-image-block.width-half{width:50%}.project-image-block.align-left{margin-left:0}.project-image-block.align-right{margin-right:0}.project-image-block figcaption,.project-image-columns figcaption{font-size:12px;margin-top:9px;opacity:.6}
.project-image-columns{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:var(--gap,16px)}.project-image-columns figure{margin:0}
.project-image-text{display:grid;grid-template-columns:var(--image-width,55%) 1fr;gap:var(--gap,48px);align-items:center}.project-image-text.image-right{grid-template-columns:1fr var(--image-width,55%)}.project-image-text.image-right img{order:2}.project-image-text>div{font-family:Sentient,Georgia,serif;font-size:var(--text-size,20px);line-height:1.55}
.anim-section{height:var(--scroll-h,260vh);width:calc(100% + 14vw);margin-left:-7vw!important;margin-right:-7vw!important;position:relative;overflow:clip}.anim-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.sticky-gallery .anim-sticky{display:flex;flex-direction:column;justify-content:center;gap:var(--gap,16px)}.sticky-row{display:flex;gap:var(--gap,16px);width:max-content;will-change:transform}.sticky-row img{width:min(28vw,420px);aspect-ratio:1;object-fit:cover;flex:none}.sticky-row.row-a{transform:translateX(calc(-18% * var(--p,0)))}.sticky-row.row-b{transform:translateX(calc(-28% + 18% * var(--p,0)))}
.stack-stage{display:grid;place-items:end center}.stack-stage img{position:absolute;bottom:-2vh;width:min(var(--print-w,56vw),900px);max-height:82vh;object-fit:contain;transform:translateY(calc((1 - var(--local,0))*115vh)) rotate(calc((var(--i) - 2)*.7deg));transform-origin:bottom center}
.ad-stage{display:grid;place-items:center}.ad-stage img{position:absolute;width:min(var(--ad-w,300px),75vw);height:auto;transform:translateX(calc((1 - var(--local,0))*var(--dir,1)*115vw)) rotate(calc((var(--i) - 2)*2deg));z-index:calc(var(--i) + 1)}.ad-stage img:nth-child(odd){--dir:-1}.ad-stage img:nth-child(even){--dir:1}
.insta-stage{display:grid;place-items:center}.insta-frame{position:relative;width:min(430px,88vw);aspect-ratio:4/5.35;background:#fff;border:1px solid #ddd;border-radius:14px;overflow:hidden;padding-top:62px}.insta-head{position:absolute;top:0;left:0;right:0;height:62px;display:flex;align-items:center;gap:10px;padding:0 14px}.insta-head i{width:34px;height:34px;border-radius:50%;background:#ddd}.insta-head span{width:120px;height:10px;border-radius:8px;background:#ddd}.insta-frame>img{position:absolute;left:0;top:62px;width:100%;height:calc(100% - 112px);object-fit:cover;transform:translateY(calc((1 - var(--local,0))*110%));z-index:calc(var(--i) + 1)}.insta-ui{position:absolute;bottom:0;left:0;right:0;height:50px;background:#fff;z-index:50;display:flex;gap:10px;align-items:center;padding:0 14px}.insta-ui b{width:18px;height:18px;border-radius:50%;background:#ddd}
.book-stage{display:grid;place-items:center;perspective:1600px}.book{position:relative;width:min(74vw,920px);aspect-ratio:17/11;transform-style:preserve-3d}.book-page{position:absolute;inset:0 50% 0 0;transform-origin:right center;transform:rotateY(calc(-180deg * var(--local,0)));transform-style:preserve-3d;z-index:calc(100 - var(--i));background:#eee}.book-page img{width:100%;height:100%;object-fit:cover;display:block}
.multiply-stage{display:grid;place-items:center}.multiply-line{position:absolute;left:12%;right:12%;top:50%;height:3px;background:currentColor}.multiply-source{position:absolute;width:min(22vw,260px);max-height:32vh;object-fit:contain;transform:translateY(calc((-34vh) + 68vh * var(--p,0)));opacity:calc(1 - clamp((var(--p,0) - .48)*12,0,1))}.multiply-results{position:absolute;display:flex;gap:5vw;top:58%;transform:translateY(calc((1 - var(--p,0))*22vh));opacity:calc((var(--p,0) - .45)*3)}.multiply-results img{width:min(18vw,220px);max-height:28vh;object-fit:contain}
.hover-video-blocks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:center}.hover-video-blocks video{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;background:transparent}.hover-video-blocks video:nth-child(2n){transform:translateY(8%)}.hover-video-blocks video:nth-child(3n){transform:translateY(-7%)}
.image-compare{position:relative;overflow:hidden;aspect-ratio:16/9}.image-compare img{display:block;width:100%;height:100%;object-fit:cover}.compare-after{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--compare,50%)) 0 0)}.compare-after img{position:absolute;inset:0}.image-compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize}
.project-hardcut{width:calc(100% + 14vw);margin-left:-7vw!important;margin-right:-7vw!important}.project-hardcut .v3-ticker{margin-bottom:12px}.project-hardcut-stage{position:relative;aspect-ratio:16/9;overflow:hidden}.hardcut-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}.hardcut-slide.is-active{opacity:1}
@media(max-width:760px){.project-text-columns{grid-template-columns:1fr}.project-image-block.width-threequarter,.project-image-block.width-half{width:100%}.project-image-block.width-bleed,.anim-section,.project-hardcut{width:calc(100% + 40px);margin-left:-20px!important;margin-right:-20px!important}.project-image-columns{grid-template-columns:repeat(min(var(--cols),2),minmax(0,1fr))}.project-image-text,.project-image-text.image-right{grid-template-columns:1fr}.project-image-text.image-right img{order:0}.sticky-row img{width:54vw}.hover-video-blocks{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.book{width:92vw}.multiply-results{gap:2vw}.multiply-results img{width:28vw}}


/* v3 projects index */
.projects-index{padding-bottom:10vw}
.projects-index-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:6vw;align-items:end;padding:clamp(90px,12vw,180px) 0 clamp(52px,7vw,96px)}
.projects-index-head h1{margin:0;font-size:clamp(78px,14vw,210px);line-height:.78;letter-spacing:-.065em;font-weight:650}
.projects-index-head p{margin:0;max-width:480px;font-family:Sentient,Georgia,serif;font-size:clamp(18px,2vw,27px);line-height:1.3}
.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(54px,7vw,110px) clamp(20px,2.2vw,38px)}
.projects-card{display:block;color:inherit;text-decoration:none}
.projects-card figure{margin:0;overflow:hidden;background:rgba(17,17,17,.045);aspect-ratio:4/3}
.projects-card img,.projects-placeholder{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.projects-card:hover img{transform:scale(1.018)}
.projects-card-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:baseline;padding-top:16px}
.projects-card h2{margin:0;font-size:clamp(25px,2.5vw,40px);line-height:.98;letter-spacing:-.04em;font-weight:600}
.projects-card p{margin:0;font-size:11px;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;text-align:right;opacity:.62}
.projects-empty{font-family:Sentient,Georgia,serif;font-size:22px}
@media(max-width:760px){.projects-index-head{grid-template-columns:1fr;gap:30px;padding-top:90px}.projects-index-head h1{font-size:clamp(70px,22vw,118px)}.projects-grid{grid-template-columns:1fr;gap:58px}.projects-card-copy{grid-template-columns:1fr;gap:8px}.projects-card p{text-align:left}.projects-card figure{aspect-ratio:4/3}}

/* v3.0 sticky scroll gallery: true viewport-width breakout */
.project-sections > .sticky-gallery{
  width:100vw !important;
  max-width:none !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}
.project-sections > .sticky-gallery .anim-sticky{
  width:100vw;
  max-width:none;
}
.project-sections > .sticky-gallery .sticky-row{
  max-width:none;
}
@media(max-width:760px){
  .project-sections > .sticky-gallery{
    width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
  }
}