.hero-slider {
  position:absolute;
  inset:0;
  z-index:0;
  background:#171714
}

.hero-slider .slide {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.035);
  transition:opacity 1.2s ease,transform 7s ease
}

.hero-slider .slide.active {
  opacity:1;
  transform:scale(1)
}

.hero-shade,.hero-copy,.hero>.scroll-cue {
  z-index:2
}

.hero-shade {
  z-index:1;
  pointer-events:none
}

.feature-visual:before,.feature-visual .arch {
  display:none
}

.feature-visual>img,.team-art>img,.service-art>img,.project-image>img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s ease
}

.feature-visual:hover>img,.team-art:hover>img,.service-art:hover>img,.project-image:hover>img {
  transform:scale(1.025)
}

.feature-visual>span,.team-art>span,.project-image>span {
  z-index:2
}

.team-art>img {
  position:absolute;
  inset:0
}

.team-art.studio-photo>img {
  object-fit:cover;
  object-position:46% center
}

.service-art:after,.project-image:after {
  display:none!important
}

.project-image {
  background:#aaa!important
}

@media(max-width:800px) {
  .hero-slider .slide {
    object-position:center
  }
  .hero-slider .slide:first-child {
    object-position:58% center
  }
  .hero-slider .slide:nth-child(2) {
    object-position:57% center
  }
  .team-art.studio-photo>img {
    object-fit:cover;
    object-position:44% center
  }
}

@media(prefers-reduced-motion:reduce) {
  .hero-slider .slide {
    transition:opacity .2s ease;
    transform:none
  }
  .feature-visual>img,.team-art>img,.service-art>img,.project-image>img {
    transition:none
  }
}

.references-section {
  padding:0 5vw 130px;
  background:var(--paper)
}

.references-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  padding:0 0 32px;
  border-bottom:1px solid var(--line)
}

.references-heading p {
  margin:0;
  font-size:10px;
  letter-spacing:.22em
}

.references-heading span {
  max-width:340px;
  color:#77736c;
  font-size:13px;
  line-height:1.6;
  text-align:right
}

.reference-brands {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  padding-top:16px
}

.brand-card {
  position:relative;
  min-height:230px;
  padding:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:#f8f7f3;
  border:1px solid transparent;
  color:#161616;
  overflow:hidden;
  transition:background .35s ease,border-color .35s ease,transform .35s ease,box-shadow .35s ease
}

.brand-card:before {
  content:counter(reference,decimal-leading-zero);
  counter-increment:reference;
  position:absolute;
  left:18px;
  top:16px;
  color:#aaa59d;
  font:9px 'DM Sans',sans-serif;
  letter-spacing:.12em
}

.reference-brands {counter-reset:reference}
.brand-card:hover {background:#fff;border-color:#d8d3ca;transform:translateY(-4px);box-shadow:0 18px 40px rgba(35,32,27,.07)}
.brand-card strong {font-style:normal;white-space:nowrap}
.brand-agt strong {font:800 clamp(48px,5vw,76px)/1 Arial,sans-serif;letter-spacing:-.07em}
.agt-symbol {position:relative;width:60px;height:57px;flex:0 0 60px}
.agt-symbol i,.agt-symbol b {position:absolute;width:40px;height:40px;border:9px solid}
.agt-symbol i {left:0;top:0;border-color:#00df14}
.agt-symbol b {right:0;bottom:0;border-color:#ef0015}
.brand-camsan {gap:15px}
.brand-camsan strong {font:600 clamp(23px,2.3vw,34px)/.8 Arial,sans-serif}
.brand-camsan small {display:block;color:#178071;text-align:right;font-size:.45em;font-weight:500;margin-top:10px}
.camsan-symbol {width:35px;height:35px;border-left:7px solid #187b6d;border-top:7px solid #187b6d;transform:rotate(-45deg)}
.brand-creavit strong {font:300 clamp(39px,3.8vw,58px)/1 Arial,sans-serif;letter-spacing:-.06em}
.brand-creavit sup {font-size:.18em;vertical-align:top;margin-left:2px}
.brand-tone {gap:10px}
.brand-tone strong {font:300 clamp(34px,3.3vw,50px)/1 'Manrope',sans-serif;letter-spacing:.05em}
.tone-mark {width:21px;height:21px;background:#ed604a;box-shadow:inset 5px 0 #fff,inset -5px 0 #fff;clip-path:polygon(0 20%,25% 20%,25% 0,45% 0,45% 20%,70% 20%,70% 0,90% 0,90% 20%,100% 20%,100% 100%,0 100%)}
.brand-cemstone strong {font:900 clamp(27px,2.8vw,43px)/1 Arial,sans-serif;color:#08a8bb;letter-spacing:-.09em}
.brand-anka:after {content:'';position:absolute;width:185px;height:185px;border-radius:50%;background:#050505;z-index:0}
.brand-anka:before {z-index:2;color:#aaa}
.brand-anka span {display:flex;flex-direction:column;align-items:flex-end}
.brand-anka span {position:relative;z-index:1;color:#fff}
.brand-anka strong {font:300 clamp(30px,3vw,44px)/1 Arial,sans-serif;letter-spacing:.08em}
.brand-anka small {font:300 clamp(12px,1.3vw,18px)/1 Arial,sans-serif;letter-spacing:.12em;margin-top:8px}
.brand-artema strong {font:500 clamp(32px,3.1vw,46px)/1 Arial,sans-serif;letter-spacing:.18em}
.brand-vitra strong {font:400 clamp(45px,4vw,62px)/1 'Manrope',sans-serif;letter-spacing:.06em}

@media(max-width:1100px) {.reference-brands {grid-template-columns:repeat(2,minmax(0,1fr))}.brand-card {min-height:220px}}
@media(max-width:560px) {
  .references-section {padding:0 20px 80px}
  .references-heading {align-items:flex-start;flex-direction:column;gap:12px;padding-bottom:24px}
  .references-heading span {text-align:left}
  .reference-brands {grid-template-columns:1fr;gap:10px;padding-top:10px}
  .brand-card {min-height:180px}
  .brand-card:hover {transform:none}
  .brand-anka:after {width:150px;height:150px}
}
