/* BITARD discipline filtering: selection fades in place, then survivors reflow. */
body.bitard-filter-motion .bitard-gallery{
  overflow-anchor:none;
}
body.bitard-filter-motion .bitard-card{
  will-change:transform,opacity;
}
body.bitard-filter-motion .bitard-card:hover img{
  transform:none!important;
}
body.bitard-filter-motion .bitard-card__shade,
body.bitard-filter-motion .bitard-card__label{
  transition:none!important;
}

/* A discipline is both a filter and a service overview. The overview occupies
   the same right-hand WORK canvas as the showreel and hands directly into the
   filtered project grid below it.

   The category name is the primary service label and aligns with the permanent
   WORK title. Scope sits directly below it as secondary information, then the
   statement/copy share one editorial row. The DOM stays unchanged so filter
   transitions and progressive enhancement retain exactly the same ownership. */
.bitard-inline-service[hidden]{display:none!important}
.bitard-inline-service{
  width:100%;
  margin:0 0 var(--gutter);
  padding:0 0 clamp(34px,4.8vh,56px);
  border-bottom:1px solid rgba(20,20,20,.14);
  transform-origin:50% 0;
  display:grid;
  grid-template-columns:minmax(0,1.22fr) minmax(290px,.78fr);
  column-gap:clamp(42px,6vw,96px);
  align-items:start;
}

/* Flatten the two historic wrapper boxes into the service grid so category,
   scope, statement and copy can form one clear hierarchy without new markup. */
.bitard-inline-service__layout,
.bitard-inline-service__heading{
  display:contents;
}
.bitard-inline-service__name{
  grid-column:1 / -1;
  grid-row:1;
  display:block;
  margin:0;
  color:var(--ink);
  font-size:19px;
  font-weight:500;
  line-height:1.08;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.bitard-inline-service__eyebrow{
  grid-column:1 / -1;
  grid-row:2;
  margin:7px 0 0;
  color:var(--muted);
  font-size:8px;
  line-height:1.2;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.bitard-inline-service__statement{
  grid-column:1;
  grid-row:3;
  display:block;
  max-width:880px;
  margin-top:clamp(18px,2.4vh,28px);
  font-size:clamp(34px,4.15vw,64px);
  font-weight:400;
  line-height:.97;
  letter-spacing:-.042em;
  text-transform:uppercase;
}
.bitard-inline-service__copy{
  grid-column:2;
  grid-row:3;
  max-width:500px;
  margin-top:clamp(20px,2.6vh,30px);
  padding-top:0;
}
.bitard-inline-service__copy p{
  margin:0;
  font-size:clamp(14px,1.04vw,17px);
  line-height:1.45;
  letter-spacing:-.008em;
}
.bitard-inline-service__capabilities{
  display:flex;
  flex-wrap:wrap;
  gap:6px 17px;
  margin-top:22px;
  padding-top:12px;
  border-top:1px solid rgba(20,20,20,.14);
  color:var(--muted);
  font-size:8px;
  line-height:1.35;
  letter-spacing:.05em;
}
.bitard-inline-service__work-label{
  grid-column:1 / -1;
  grid-row:4;
  margin-top:clamp(34px,4.8vh,54px);
  color:var(--muted);
  font-size:8px;
  line-height:1.2;
  letter-spacing:.075em;
  text-transform:uppercase;
}

@media (max-width:1280px){
  .bitard-inline-service{column-gap:36px}
  .bitard-inline-service__name{font-size:19px}
  .bitard-inline-service__statement{font-size:clamp(32px,4vw,52px)}
}

@media (max-width:1040px){
  .bitard-inline-service{
    grid-template-columns:1fr;
    column-gap:0;
  }
  .bitard-inline-service__name{font-size:18px}
  .bitard-inline-service__statement{
    grid-column:1;
    grid-row:3;
    font-size:clamp(32px,5.7vw,50px);
  }
  .bitard-inline-service__copy{
    grid-column:1;
    grid-row:4;
    max-width:680px;
    margin-top:28px;
  }
  .bitard-inline-service__work-label{
    grid-row:5;
  }
}

@media (max-width:820px){
  .bitard-inline-service{
    padding-top:0;
    padding-bottom:40px;
  }
  .bitard-inline-service__name{
    font-size:17px;
  }
  .bitard-inline-service__eyebrow{
    margin-top:6px;
  }
  .bitard-inline-service__statement{
    margin-top:18px;
    font-size:clamp(31px,7.6vw,46px);
    line-height:.99;
  }
  .bitard-inline-service__copy{
    margin-top:24px;
  }
  .bitard-inline-service__copy p{font-size:16px}
  .bitard-inline-service__work-label{margin-top:34px}
}

@media (max-width:620px){
  .bitard-inline-service__name{font-size:16px}
  .bitard-inline-service__statement{font-size:clamp(29px,9.5vw,42px)}
  .bitard-inline-service__copy p{font-size:15px;line-height:1.48}
  .bitard-inline-service__capabilities{gap:6px 13px;margin-top:20px}
}

@media (prefers-reduced-motion:reduce){
  body.bitard-filter-motion .bitard-card{will-change:auto}
}