/* ONECA Atelier visual refinement. Loaded after the supplied styles so their
   interactions, images and masks remain intact. */
.oneca-noir {
  --dissolve: clamp(100px, 9vw, 140px);
  --section-space: clamp(72px, 7vw, 104px);
}

.oneca-noir .hero-scroll-stage {
  height: auto;
}
.draft-split.oneca-noir.has-split-motion .hero-scroll-stage {
  height: calc(max(760px, 100svh) + 80px);
}
.oneca-noir .hero-editorial {
  height: max(760px, 100svh);
  min-height: 760px;
  padding-inline: var(--gutter);
  background: linear-gradient(100deg, var(--paper) 34%, #f4efea 54%, #d1c9c2 77%, #95908c);
}
.oneca-noir .hero-copy {
  width: 56%;
  max-width: 820px;
}
.oneca-noir .hero-editorial h1 {
  font-size: clamp(58px, 5vw, 76px);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.075;
}
.oneca-noir .hero-editorial h1 > span:last-child {
  color: var(--orange);
}
.oneca-noir .hero-description {
  color: var(--ink);
  max-width: 43ch;
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.65;
}
.oneca-noir .hero-editorial .hero-cta {
  margin-top: 24px;
}
.oneca-noir .hero-editorial:after {
  height: 150px;
}
.draft-split.oneca-noir .split-portrait-frame {
  mask-image: linear-gradient(90deg, transparent 0%, #0000001f 8%, #0000009e 21%, #000 34%), linear-gradient(#000 76%, #00000070 92%, transparent 100%);
}

.oneca-noir #about {
  padding-block: var(--section-space) 78px;
}
.oneca-noir .about-statement,
.oneca-noir :is(#services,#work,#contact) h2 {
  font-size: clamp(44px, 4.25vw, 64px);
  letter-spacing: -.025em;
  line-height: 1.12;
}
.oneca-noir .about-copy {
  font-size: 18px;
  line-height: 1.65;
  gap: 48px;
  margin-top: 32px;
}
.oneca-noir .about-copy p {
  line-height: 1.65;
}
.oneca-noir :is(#services,#work,#contact) {
  padding-top: calc(var(--dissolve) + 40px);
}
.oneca-noir :is(#services,#contact) {
  background-image: linear-gradient(to bottom, var(--paper) 0%, #f5f2ef 12%, #e8e4e1 26%, #cbc6c3 42%, #a19b99 58%, #77716f 72%, #4b4645 87%, var(--noir) 100%);
}
.oneca-noir #work {
  background: linear-gradient(to bottom, var(--noir) 0%, #4b4645 13%, #77716f 28%, #a19b99 42%, #cbc6c3 58%, #e8e4e1 74%, #f5f2ef 88%, var(--paper) 100%) top / 100% var(--dissolve) no-repeat;
  padding-bottom: 88px;
}
.oneca-noir #services .service-select {
  font-size: clamp(26px, 2.35vw, 38px);
}
.oneca-noir #services .section-top,
.oneca-noir #work .work-top {
  margin-bottom: 40px;
}
.oneca-noir #approach {
  padding-top: 76px;
  padding-bottom: 72px;
}
.oneca-noir #approach p:not(.section-label),
.oneca-noir #contact .contact-intro > p:not(.section-label) {
  font-size: 18px;
  line-height: 1.65;
}

@media (width >= 701px) and (width <= 1100px) {
  .oneca-noir .hero-copy { width: 53%; }
  .oneca-noir .hero-editorial h1 { font-size: clamp(50px, 5.5vw, 62px); }
  .oneca-noir .hero-editorial h1 > span:first-child { max-width: 10ch; }
  .oneca-noir .hero-description { max-width: 37ch; font-size: 17px; }
  .draft-split.oneca-noir .split-portrait-frame {
    mask-image: linear-gradient(90deg, transparent 0%, #0000001f 10%, #0000009e 25%, #000 39%), linear-gradient(#000 76%, #00000070 92%, transparent 100%);
  }
}

@media (width <= 700px) {
  .oneca-noir { --gutter: 22px; --dissolve: 88px; --section-space: 64px; }
  .draft-split.oneca-noir.has-split-motion .hero-scroll-stage { height: auto; }
  .oneca-noir .hero-editorial {
    height: 788px;
    min-height: 0;
    padding: 107px 22px 0;
    display: block;
    background: linear-gradient(to bottom, var(--paper) 0% 43%, #eee8e2 67%, var(--paper) 100%);
  }
  .oneca-noir .hero-copy { width: 100%; max-width: 540px; }
  .oneca-noir .hero-editorial h1 {
    font-size: clamp(36px, 10.8vw, 44px);
    letter-spacing: -.025em;
    line-height: 1.075;
  }
  .oneca-noir .hero-editorial h1 > span:first-child { max-width: 10.5ch; }
  .oneca-noir .hero-description {
    max-width: 39ch;
    margin-top: 15px;
    font-size: 16px;
    line-height: 1.6;
  }
  .oneca-noir .hero-editorial .hero-cta { margin-top: 18px; }
  .draft-split.oneca-noir .split-portrait {
    position: absolute;
    top: 405px;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 370px;
    margin: 0;
  }
  .draft-split.oneca-noir .split-portrait-frame {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    mask-image: linear-gradient(to bottom, transparent 0%, #000000ab 9%, #000 22% 82%, transparent 100%);
  }
  .draft-split.oneca-noir .portrait-half img {
    object-position: center 32%;
  }
  .oneca-noir .hero-editorial:after { height: 95px; }
  .oneca-noir .hero-baseline { bottom: 13px; }
  .oneca-noir #about { padding-block: 64px 60px; }
  .oneca-noir .about-statement,
  .oneca-noir :is(#services,#work,#contact) h2 {
    font-size: clamp(32px, 9vw, 38px);
    line-height: 1.14;
  }
  .oneca-noir .about-copy { font-size: 16px; line-height: 1.6; gap: 20px; margin-top: 24px; }
  .oneca-noir .about-copy p { line-height: 1.6; }
  .oneca-noir :is(#services,#work,#contact) { padding-top: calc(var(--dissolve) + 36px); }
  .oneca-noir #services .section-top,
  .oneca-noir #work .work-top { margin-bottom: 32px; }
  .oneca-noir #work { padding-bottom: 64px; }
  .oneca-noir #approach { padding-block: 64px 58px; }
  .oneca-noir #approach p:not(.section-label),
  .oneca-noir #contact .contact-intro > p:not(.section-label) { font-size: 16px; line-height: 1.6; }
}

@media (width <= 360px) {
  .oneca-noir .hero-editorial { height: 760px; padding: 100px 18px 0; }
  .oneca-noir .hero-editorial h1 { font-size: 36px; }
  .oneca-noir .hero-description { font-size: 15px; }
  .draft-split.oneca-noir .split-portrait { top: 414px; height: 338px; }
}