:root{
  --sage:#b6c6bd;
  --gold:#d4b263;
  --vanilla:#eee9dc;
}

.balayage-hero{
  min-height:760px;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(440px,1.18fr);
  border-bottom:1px solid var(--line);
}
.balayage-hero-copy{
  align-self:center;
  padding:7rem 4.5vw 6rem 5vw;
}
.balayage-hero h1,.client-copy h2,.design-principles h2{
  margin:0;
  font-family:"Italiana","Baskerville","Songti SC",serif;
  font-weight:400;
  letter-spacing:0;
}
.balayage-hero h1{
  font-size:clamp(3.35rem,6.4vw,7.2rem);
  line-height:.9;
}
.balayage-hero h1 em{color:var(--sage);font-weight:400}
.balayage-hero-photo{
  position:relative;
  min-width:0;
  min-height:760px;
  margin:0;
  overflow:hidden;
  border-left:1px solid var(--line);
}
.balayage-hero-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 48%;
}
.balayage-hero-photo figcaption{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.25rem;
  background:rgba(10,10,9,.84);
  color:rgba(241,240,234,.7);
  font-size:.68rem;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.balayage-hero-photo strong{color:var(--vanilla);font-weight:500}

.client-story{
  display:grid;
  grid-template-columns:minmax(270px,.68fr) minmax(0,1.32fr);
  gap:4vw;
  align-items:start;
  padding-top:8rem;
  padding-bottom:8rem;
}
.client-story--b{background:var(--vanilla);color:var(--ink)}
.client-story--b .section-kicker{color:#708078}
.client-copy{position:sticky;top:2rem}
.client-copy h2{
  max-width:520px;
  margin-bottom:2.3rem;
  font-size:clamp(2.45rem,4.2vw,4.9rem);
  line-height:1;
}
.client-copy p{
  max-width:550px;
  margin:0 0 1.05rem;
  color:rgba(241,240,234,.56);
  font-size:.82rem;
  line-height:1.8;
}
.client-copy p strong{color:rgba(241,240,234,.86);font-weight:500}
.client-story--b .client-copy p{color:rgba(10,10,9,.61)}
.client-story--b .client-copy p strong{color:rgba(10,10,9,.88)}
.client-copy .service-meta{
  margin-top:2rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
  color:var(--sage);
  font-size:.67rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.client-story--b .client-copy .service-meta{border-color:rgba(10,10,9,.16);color:#596b62}

.comparison-pair{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.comparison-photo{min-width:0;margin:0}
.comparison-photo img{
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  display:block;
  object-fit:cover;
}
.comparison-photo figcaption{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.9rem 0 0;
  color:rgba(241,240,234,.48);
  font-size:.66rem;
  line-height:1.45;
}
.comparison-photo figcaption strong{color:var(--sage);font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.client-story--b .comparison-photo figcaption{color:rgba(10,10,9,.52)}
.client-story--b .comparison-photo figcaption strong{color:#596b62}

.design-principles{
  display:grid;
  grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);
  gap:7vw;
  padding:8rem 5vw;
  border-bottom:1px solid var(--line);
}
.design-principles h2{max-width:650px;font-size:clamp(2.5rem,4.8vw,5.4rem);line-height:.98}
.design-principles ol{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.design-principles li{display:grid;grid-template-columns:3rem 1fr;gap:1.5rem;padding:1.6rem 0;border-bottom:1px solid var(--line)}
.design-principles li>span{color:var(--sage);font-size:.68rem;letter-spacing:.12em}
.design-principles li p{margin:0;color:rgba(241,240,234,.57);font-size:.84rem;line-height:1.75}
.design-principles li strong{color:rgba(241,240,234,.9);font-weight:500}

.case-close{
  padding:9rem 10vw;
  background:#11130f;
  text-align:center;
}
.case-close .case-result-quote{max-width:1050px;margin:0 auto;color:var(--vanilla)}
.case-close>a{
  display:inline-block;
  margin-top:3rem;
  padding:.9rem 0;
  border-bottom:1px solid var(--gold);
  color:var(--gold);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.12em;
  text-decoration:none;
  text-transform:uppercase;
}

@media(max-width:900px){
  .balayage-hero{grid-template-columns:1fr;min-height:auto}
  .balayage-hero-copy{padding:5.5rem 6vw 4rem}
  .balayage-hero-photo{min-height:680px;border-left:0;border-top:1px solid var(--line)}
  .client-story{grid-template-columns:1fr;gap:3.5rem}
  .client-copy{position:static}
  .design-principles{grid-template-columns:1fr;gap:3.5rem}
}

@media(max-width:600px){
  .balayage-hero-copy{padding:4.5rem 5vw 3.3rem}
  .balayage-hero h1{font-size:clamp(3rem,15vw,4.35rem)}
  .balayage-hero-photo{min-height:520px}
  .balayage-hero-photo figcaption{align-items:flex-start;flex-direction:column;gap:.35rem}
  .client-story{padding-top:5rem;padding-bottom:5rem}
  .client-copy h2{font-size:clamp(2.45rem,12vw,3.6rem)}
  .comparison-pair{grid-template-columns:1fr;gap:2.4rem}
  .comparison-photo img{aspect-ratio:3/4}
  .comparison-photo figcaption{align-items:flex-start;flex-direction:column;gap:.25rem}
  .design-principles{padding-top:5rem;padding-bottom:5rem}
  .design-principles li{grid-template-columns:2rem 1fr;gap:1rem}
  .case-close{padding:6rem 5vw}
}

@media(min-width:901px){
  .balayage-hero{width:100%;max-width:1320px;min-height:590px;margin-inline:auto}
  .balayage-hero-copy{padding:4.75rem 4rem}
  .balayage-hero h1{font-size:clamp(3rem,3.8vw,4.7rem);line-height:.94}
  .balayage-hero-photo{min-height:590px;height:590px}
  .client-story{padding-top:5.5rem;padding-bottom:5.5rem}
  .client-copy h2{font-size:clamp(2.35rem,3vw,3.65rem)}
  .comparison-photo img{aspect-ratio:4/5}
  .design-principles{padding:5.5rem max(3rem,calc((100vw - 1280px)/2));gap:5rem}
  .design-principles h2{font-size:clamp(2.3rem,3.1vw,3.8rem)}
  .case-close{padding:6.5rem max(3rem,calc((100vw - 1280px)/2))}
}