.icon{
  width:24px;
  height:24px;
  flex:none;
  stroke:currentColor;
  stroke-width:2;
  fill:none;
  stroke-linecap:square;
  stroke-linejoin:miter
}
.icon-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  min-height:48px;
  border:2px solid transparent
}
.icon-button:hover{
  border-color:var(--color-accent)
}
.icon-button:disabled{
  opacity:.3;
  border-color:transparent
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:56px;
  min-width:288px;
  padding:14px 22px;
  border:1px solid var(--color-text);
  font-size:18px;
  line-height:24px;
  position:relative
}
.button::after{
  content:'';
  position:absolute;
  inset:-1px;
  border:3px solid transparent;
  pointer-events:none;
  transition:border-color 160ms ease-out
}
.button:hover::after{
  border-color:var(--color-accent)
}
.button-primary{
  background:var(--color-text);
  color:var(--color-base);
  border:2px solid var(--color-accent)
}
.button-secondary{
  border-color:var(--color-structure)
}
.actions{
  display:flex;
  flex-wrap:wrap;
  gap:24px
}
.frame{
  position:relative;
  padding:calc(var(--frame-gap) + var(--frame-stroke))
}
.corners{
  position:absolute;
  inset:0;
  pointer-events:none;
  color:var(--color-accent);
  transition:opacity 160ms
}
.corners i{
  position:absolute;
  width:var(--frame-arm);
  height:var(--frame-arm);
  border-color:currentColor;
  border-style:solid;
  border-width:0
}
.corners i:nth-child(1){
  top:0;
  left:0;
  border-top-width:var(--frame-stroke);
  border-left-width:var(--frame-stroke)
}
.corners i:nth-child(2){
  top:0;
  right:0;
  border-top-width:var(--frame-stroke);
  border-right-width:var(--frame-stroke)
}
.corners i:nth-child(3){
  bottom:0;
  left:0;
  border-bottom-width:var(--frame-stroke);
  border-left-width:var(--frame-stroke)
}
.corners i:nth-child(4){
  bottom:0;
  right:0;
  border-bottom-width:var(--frame-stroke);
  border-right-width:var(--frame-stroke)
}
.asset{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden
}
.asset img{
  width:100%;
  height:100%;
  object-fit:contain
}
.asset.is-placeholder{
  background:var(--color-structure)
}
.placeholder-copy{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
  padding:8px;
  font-size:clamp(14px,2vw,28px);
  line-height:1.3;
  pointer-events:none
}
.placeholder-copy small{
  font-size:12px;
  line-height:16px
}
.placeholder-copy .placeholder-meta{
  font-size:10px;
  line-height:16px;
  margin-top:8px
}
.pattern{
  width:192px;
  height:192px;
  background-image:url('../assets/pattern.svg');
  background-size:96px;
  pointer-events:none
}
.site-header{
  height:96px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--color-structure);
  font-size:16px;
  line-height:24px
}
.brand{
  font-size:14px
}
.desktop-nav{
  display:flex;
  gap:64px;
  align-items:center
}
.nav-link{
  position:relative;
  padding-block:12px
}
.nav-link::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:2px;
  background:var(--color-accent);
  opacity:0
}
.nav-link:hover::after,.nav-link[aria-current]::after{
  opacity:1
}
.language{
  display:flex;
  gap:16px;
  align-items:center;
  font-size:16px
}
.language .active{
  border-bottom:2px solid var(--color-accent);
  padding-block:12px
}
.language [aria-disabled]{
  opacity:.5;
  cursor:default
}
.menu-toggle{
  display:none
}
.modal{
  position:fixed;
  inset:0;
  max-width:none;
  max-height:none;
  width:100%;
  height:100%;
  height:100dvh;
  margin:0;
  background:var(--color-base);
  color:var(--color-text);
  overflow-y:auto;
  overscroll-behavior:contain
}
.modal::backdrop{
  background:var(--color-base)
}
.modal[open]{
  animation:modal-in 220ms ease-out
}
@keyframes modal-in{
  from{
    opacity:0
  }
  to{
    opacity:1
  }
}
.mobile-menu .menu-top{
  height:77px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--color-structure)
}
.menu-links{
  display:flex;
  flex-direction:column;
  gap:24px;
  margin-block:64px
}
.menu-links a{
  font-family:var(--font-heading);
  font-size:28px;
  line-height:36px;
  padding-block:8px
}
.mobile-menu .language{
  margin-bottom:48px
}
.menu-contact{
  display:grid;
  gap:24px;
  margin-top:48px;
  font-size:16px
}
.menu-contact small{
  display:block;
  font-size:12px;
  margin-bottom:8px
}
.availability{
  display:flex;
  gap:16px;
  align-items:baseline;
  font-size:16px;
  line-height:24px
}
.availability::before{
  content:'';
  width:8px;
  height:8px;
  flex:none;
  background:var(--color-mark)
}
.site-footer{
  margin-top:192px;
  padding-block:36px;
  border-top:1px solid #8b8b89;
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:14px;
  line-height:20px
}
.project-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:24px;
  row-gap:96px
}
.project-card{
  display:block;
  min-width:0
}
.project-card .project-visual{
  height:384px
}
.project-card .corners{
  opacity:0
}
.project-card:hover .corners,.project-card:focus-visible .corners,.project-card.featured .corners{
  opacity:1
}
.project-card:hover{
  --frame-stroke:3px
}
.project-card:hover .frame{
  padding:26px
}
.project-card.featured{
  grid-column:1/-1
}
.project-card.featured .project-visual{
  height:544px
}
.project-card .card-info{
  display:grid;
  grid-template-columns:86px 1fr;
  gap:24px;
  margin-top:40px
}
.project-card .order{
  padding-top:8px
}
.project-card .categories{
  font-size:14px;
  line-height:20px;
  margin-top:12px
}
.project-card .description{
  grid-column:2;
  margin-top:8px;
  font-size:18px;
  line-height:28px
}
.project-card .card-action{
  grid-column:2;
  justify-self:end;
  margin-top:24px
}
.project-card.featured .card-info{
  grid-template-columns:86px 1fr 288px
}
.project-card.featured .card-action{
  grid-column:3;
  grid-row:1/3;
  align-self:start;
  margin-top:8px
}
.project-card.featured .description{
  max-width:790px
}
.project-card.medium .card-action{
  min-width:48px;
  padding:12px;
  border:0
}
.project-card.medium .card-action .action-label{
  display:none
}
.project-card.posters{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:start
}
.project-card.posters .project-visual{
  height:352px;
  display:flex;
  justify-content:center
}
.project-card.posters .asset.is-placeholder{
  max-width:214px
}
.project-card.posters .card-info{
  margin-top:0;
  margin-left:110px;
  grid-template-columns:1fr
}
.project-card.posters .card-heading{
  display:flex;
  gap:24px;
  align-items:center
}
.project-card.posters .order{
  position:absolute;
  margin-left:-110px
}
.project-card.posters .description,.project-card.posters .card-action{
  grid-column:1
}
.project-card.posters .card-action{
  justify-self:start;
  margin-top:64px
}
.case-bar{
  height:96px;
  position:sticky;
  top:0;
  z-index:3;
  background:var(--color-base);
  border-bottom:1px solid var(--color-structure);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}
.back-button{
  display:flex;
  gap:16px;
  align-items:center;
  min-height:48px;
  font-size:16px
}
.case-content{
  padding-top:48px
}
.case-heading h1{
  margin-bottom:24px
}
.case-heading .case-description{
  margin-top:32px;
  max-width:1000px
}
.case-meta{
  margin-block:40px 48px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  font-size:18px;
  line-height:28px
}
.case-meta dt{
  font-size:14px;
  line-height:20px;
  margin-bottom:12px
}
.case-gallery{
  margin-top:48px
}
.stage-button{
  width:100%;
  height:472px;
  display:block
}
.stage-button .asset{
  height:100%
}
.gallery-controls{
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:32px;
  font-size:14px;
  line-height:20px
}
.gallery-caption{
  flex:1
}
.gallery-arrows{
  display:flex;
  gap:8px
}
.gallery-controls .button{
  min-width:120px;
  min-height:48px;
  font-size:16px;
  padding:10px 16px
}
.thumbnails{
  display:flex;
  gap:24px;
  margin-top:48px
}
.thumbnail{
  width:86px;
  height:64px;
  padding:4px;
  border:2px solid transparent
}
.thumbnail[aria-current=true]{
  border-color:var(--color-accent)
}
.thumbnail .placeholder-copy{
  gap:0;
  font-size:10px
}
.thumbnail .placeholder-copy small,.thumbnail .placeholder-meta{
  display:none
}
.case-details{
  margin-top:96px
}
.case-row{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px;
  margin-bottom:64px
}
.case-row h2{
  grid-column:span 4
}
.case-row .row-content{
  grid-column:span 8
}
.case-row ul{
  display:grid;
  gap:16px;
  margin-top:24px;
  font-size:18px;
  line-height:28px
}
.case-images{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin-block:64px
}
.case-images figure{
  min-width:0
}
.case-images .detail-image{
  display:block;
  width:100%;
  height:360px
}
.case-images figcaption{
  margin-top:16px;
  font-size:14px;
  line-height:20px
}
.case-wide .detail-image{
  height:472px
}
.case-wide figcaption{
  margin-top:16px
}
.case-scale{
  padding-block:64px;
  align-items:start
}
.case-scale .big-number{
  font-size:48px;
  line-height:56px;
  grid-column:span 4
}
.case-scale h3,.case-scale>p{
  grid-column:span 4
}
.case-story{
  margin-top:64px
}
.case-story .eyebrow{
  margin-bottom:32px
}
.case-story .case-row{
  margin-bottom:48px
}
.case-bottom{
  border-top:1px solid var(--color-structure);
  margin-top:96px;
  padding-block:48px 64px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px
}
.next-project{
  text-align:right;
  display:grid;
  gap:16px
}
.next-project small{
  font-size:14px
}
.next-project span{
  display:flex;
  align-items:center;
  gap:32px;
  font-family:var(--font-heading);
  font-size:26px
}
.case-posters .stage-button .asset.is-placeholder{
  max-width:300px;
  margin-inline:auto
}
.case-posters .case-images{
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.case-posters .case-images .asset.is-placeholder{
  max-width:240px;
  margin-inline:auto
}
.viewer{
  background:var(--color-text);
  color:var(--color-base);
  overflow:hidden;
  display:none;
  padding:32px 48px
}
.viewer[open]{
  display:grid;
  grid-template-rows:48px minmax(0,1fr) 56px;
  gap:24px
}
.viewer::backdrop{
  background:var(--color-text)
}
.viewer-top,.viewer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  font-size:14px
}
.viewer-stage{
  position:relative;
  overflow:hidden;
  touch-action:pan-y;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0
}
.viewer-stage.zoomed{
  touch-action:none;
  cursor:grab
}
.viewer-stage.dragging{
  cursor:grabbing
}
.viewer-stage .asset{
  width:100%;
  height:100%;
  transform-origin:center;
  transition:transform 160ms ease-out;
  will-change:transform
}
.viewer-stage.dragging .asset{
  transition:none
}
.viewer-stage .asset.is-placeholder{
  background:none
}
.viewer-stage .placeholder-copy{
  color:var(--color-text)
}
.viewer-stage .asset.is-placeholder img{
  object-fit:contain
}
.viewer-tools{
  display:flex;
  align-items:center;
  gap:8px
}
.viewer-tools output{
  min-width:48px;
  text-align:center
}
.viewer-hint{
  margin-left:24px
}
.gallery-live{
  min-width:48px
}
.viewer .placeholder-copy{
  max-height:100%
}
@media(min-width:768px){
  .case-heading h1{
    margin-top:32px;
    margin-bottom:0
  }
  .case-heading .case-description{
    margin-top:24px
  }
  .case-meta{
    margin-block:64px 116px
  }
  .case-gallery{
    margin-top:0
  }
}
@media(max-width:767px){
  .case-heading h1{
    margin-top:24px;
    margin-bottom:0
  }
}
.stage-button{
  touch-action:pan-y
}

/* Shared page navigation; hidden controls never receive pointer or keyboard input. */
.back-to-top{
  position:fixed;
  right:32px;
  bottom:32px;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border:1px solid var(--color-text);
  background:var(--color-base);
  color:var(--color-text);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity 180ms ease-out,transform 180ms ease-out,visibility 0s 180ms;
}
.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition-delay:0s;
}
.back-to-top:hover{
  border-color:var(--color-accent);
}
/* Immediately yield the space to overlays and mobile text/CTA. */
.back-to-top.is-blocked{
  visibility:hidden;
  transition:none;
}

/* Shared compact wordmark, using the existing favicon. */
.site-header .brand,.menu-top .brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-heading);
  font-size:16px;
  line-height:24px;
  letter-spacing:.04em
}
.brand img{width:28px;height:28px;flex:none}

/* Shared footer signature on every page. */
.site-footer{align-items:baseline}
.footer-brand{display:flex;align-items:center;gap:10px;flex:none}
.footer-brand img{width:24px;height:24px;flex:none}
.footer-wordmark{font-family:var(--font-heading);font-weight:500;letter-spacing:.04em}
.footer-note{display:flex;align-items:baseline;gap:10px;font-family:var(--font-body);font-weight:400;color:color-mix(in srgb,var(--color-base) 85%,var(--color-text))}
.footer-marker{display:block;width:7px;height:7px;flex:none;background:var(--color-mark);align-self:flex-start;margin-top:6px}