/* A quiet introduction opens into an uninterrupted image gallery. */
/* A changing gallery must not anchor the root scroller to the CTA below it. */
html{overflow-anchor:none}
.project-page{--paper:#f5f4ed;background:var(--paper)}
.project-page .site-header{padding-inline:28px}
.project-story{position:relative;padding:12px;overflow-anchor:none}
.project-intro{padding:28px 18px 38px}
.project-heading .micro{display:block;color:#78808a;margin-bottom:17px}
.project-heading h1{font-size:clamp(30px,3vw,46px);line-height:1.06;letter-spacing:-.055em;overflow-wrap:anywhere}
.project-subtitle{font-size:clamp(19px,1.65vw,25px);line-height:1.25;letter-spacing:-.035em;margin-top:18px;max-width:400px}
.project-tags{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:24px 0 0;padding:0}
.project-tags li{border:1px solid #b8bab4;border-radius:100px;padding:6px 11px;font-size:10px;line-height:1.25}
.project-description{font-size:13px;line-height:1.65;max-width:390px;margin-top:42px}
.project-description>p{color:#555d65}
.project-description .button{margin-top:24px;max-width:100%;font-size:12px;padding:7px 8px 7px 20px;gap:16px}
.project-links{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:22px}
.project-links .text-link{font-size:11px;gap:10px}
.project-note{font-family:Space Mono,monospace;font-size:9px;line-height:1.5;color:#737b84;margin-top:18px}
.project-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0;align-content:start}
.project-frame{margin:0;overflow:hidden;border-radius:12px;background:#e8edf1;min-width:0}
.project-frame--wide{grid-column:1/-1}
.project-frame img{display:block;width:100%;height:auto}
.project-frame--portrait{background:#fff}
.project-frame--portrait img{aspect-ratio:4/5;object-fit:contain}
.project-frame--photo img{aspect-ratio:1;object-fit:cover}
.project-frame--wide.project-frame--photo img{aspect-ratio:16/10}
.project-frame--technician img{object-position:50% 42%}
.project-frame--network-team img{object-position:75% 50%}
.project-frame--workstation img{object-position:75% 50%}
.project-frame--brand{background:#fff}
.project-frame--brand img{aspect-ratio:16/9;object-fit:contain}
.project-rail{display:none}
.project-page .service-cta{margin-top:12px}
@media(min-width:1000px){
  .project-story{--intro-width:31%;display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
  .project-intro{grid-area:1/1;width:var(--intro-width);position:sticky;top:22px;min-height:calc(100svh - 116px);padding:24px 36px 26px 16px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;z-index:1}
  .project-heading h1{font-size:clamp(29px,2.7vw,43px)}
  .project-subtitle{font-size:clamp(18px,1.6vw,25px)}
  .project-description{margin-top:0}
  .project-gallery{grid-area:1/1;margin-left:var(--intro-width);position:relative;z-index:2}
  .project-story.is-enhanced .project-gallery{transition:margin-left .75s cubic-bezier(.22,1,.36,1)}
  .project-story.is-enhanced.is-expanded .project-gallery{margin-left:52px}
  .project-story.is-enhanced .project-intro{transition:opacity .3s ease .25s,transform .5s cubic-bezier(.22,1,.36,1) .15s,visibility 0s;opacity:1;transform:translateX(0)}
  .project-story.is-enhanced.is-expanded .project-intro{opacity:0;transform:translateX(-40px);visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .5s cubic-bezier(.22,1,.36,1),visibility 0s .22s}
  .project-rail{position:sticky;top:24px;grid-area:1/1;display:flex;width:40px;height:calc(100svh - 48px);flex-direction:column;align-items:center;justify-content:space-between;opacity:0;visibility:hidden;pointer-events:none;padding-block:8px;z-index:3}
  .project-rail>span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
  .project-rail a{font-size:24px;display:grid;place-items:center;width:40px;height:44px}
  .project-story.is-expanded .project-rail{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s .35s}
}
@media(min-width:1000px) and (max-height:760px){
  .project-intro{gap:24px;padding-top:17px;padding-right:28px}
  .project-heading .micro{margin-bottom:11px}
  .project-heading h1{font-size:31px}
  .project-subtitle{font-size:18px;margin-top:12px}
  .project-tags{margin-top:17px}
  .project-description{font-size:12px;line-height:1.5}
  .project-description .button{margin-top:18px}
  .project-links{margin-top:16px}
}
@media(max-width:999px){
  .project-page .site-header{padding-inline:24px}
  .project-intro{max-width:750px;padding:38px 16px 44px}
  .project-heading h1{font-size:clamp(36px,5vw,56px)}
  .project-description{max-width:560px;margin-top:28px;font-size:14px}
  .project-frame{border-radius:9px}
}
@media(max-width:540px){
  .project-story{padding:8px}
  .project-gallery{gap:8px;grid-template-columns:1fr}
  .project-intro{padding:32px 14px 38px}
  .project-frame--portrait img{aspect-ratio:auto}
  .project-heading h1{font-size:36px}
  .project-tags{margin-top:20px}
}
@media(prefers-reduced-motion:reduce){
  .project-intro{position:relative;top:auto;min-height:0}
}