/* Hero only: reuse the existing rose, ivory, wine and local serif fonts. */
.header{
  background:var(--ivory);
  border-bottom-color:transparent
}
.header:not(.scrolled){
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:106px;
  background:transparent
}
.header.scrolled{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  margin-bottom:0;
  background:#faf7f1ed
}
.header .header-cta{
  background:var(--rose-deep);
  color:var(--ivory);
  border-color:var(--rose-deep);
  font-size:11px;
  letter-spacing:.1em;
  padding:13px 22px;
  min-height:47px
}
.header .header-cta:hover{
  background:var(--wine)
}
.campaign{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--ivory);
  color:var(--wine);
  min-height:850px;
  height:100svh;
  max-height:1160px;
  padding:106px 6.3% 0
}
/* Dissolve the portrait into chapter 01 instead of ending both images on a hard seam. */
.campaign::after{
  content:'';
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:-1px;
  height:clamp(96px,11vh,138px);
  background:linear-gradient(180deg,rgba(241,235,224,0) 0%,rgba(241,235,224,.64) 52%,#f1ebe0 100%);
  pointer-events:none
}
.campaign-inner{
  position:relative;
  max-width:1630px;
  height:100%;
  margin:0 auto
}
.campaign-copy{
  position:relative;
  z-index:3;
  width:54%;
  padding-top:clamp(35px,5vh,70px)
}
.campaign-kicker{
  font-size:12px;
  letter-spacing:.26em;
  line-height:1.5;
  margin:0 0 12px;
  color:var(--rose-deep)
}
.campaign h1{
  font-family:var(--serif);
  font-size:clamp(66px,min(6.25vw,10vh),112px);
  font-weight:400;
  line-height:.96;
  letter-spacing:-.045em;
  margin:0
}
.campaign-title-line{
  display:block;
  overflow:hidden;
  padding:.13em .04em .16em 0;
  margin:-.13em -.04em -.16em 0
}
.campaign-title-line>span{
  display:block;
  white-space:nowrap;
}
.campaign-title-line:nth-child(1){
  color:var(--rose-deep)
}


.campaign-subtitle{
  font-size:clamp(16px,min(1.42vw,2.2vh),23px);
  line-height:1.65;
  color:#736758;
  margin-top:clamp(14px,2.4vh,22px);
  letter-spacing:.015em
}
.campaign-cta{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  min-height:59px;
  max-width:100%;
  padding:16px 27px;
  border-radius:100px;
  background:var(--rose-deep);
  color:var(--ivory);
  font-size:12px;
  letter-spacing:.17em;
  line-height:1.5;
  margin-top:clamp(16px,2.2vh,25px);
  transition:background .3s,transform .3s
}
.campaign-cta svg{
  transition:transform .35s cubic-bezier(.2,.7,.2,1)
}
.campaign-cta:hover{
  background:var(--wine);
  transform:translateY(-2px)
}
.campaign-cta:hover svg{
  transform:translateX(5px)
}
.campaign-portrait{
  position:absolute;
  z-index:2;
  width:68%;
  height:auto;
  aspect-ratio:1261/1600;
  right:-6%;
  top:-53px;
  pointer-events:none;
}
.campaign-silhouette{
  position:absolute;
  inset:0;
  mask:none;
  -webkit-mask:none
}
.campaign-original{
  object-fit:contain
}
.campaign-seal{
  position:absolute;
  z-index:3;
  right:0;
  top:24px;
  width:clamp(108px,12vw,185px);
  color:var(--rose-deep);
}
.campaign-seal svg{
  width:100%;
  height:auto;
  display:block
}
.campaign-seal text{
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:2.3px
}
.campaign-editorial{
  position:absolute;
  z-index:3;
  top:29%;
  right:0;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(19px,1.75vw,29px);
  line-height:1.23;
  text-align:right;
  color:var(--rose-deep)
}
.campaign-editorial>span{
  display:block;
  width:38px;
  height:1px;
  background:var(--rose);
  margin:20px 0 0 auto
}
.campaign-metrics{
  position:relative;
  z-index:3;
  width:50%;
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr;
  margin-top:clamp(24px,3.4vh,38px);
  gap:0
}
.campaign-metric{
  padding:0 20px;
  display:flex;
  flex-direction:column;
  text-align:center;
  gap:10px
}
.campaign-metric:first-child{
  padding-left:0
}
.campaign-metric+.campaign-metric{
  border-left:1px solid var(--line)
}
.campaign-metric strong{
  font-family:var(--serif);
  font-size:clamp(29px,min(2.7vw,4.7vh),45px);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.025em;
  color:var(--rose-deep);
  white-space:nowrap
}
.campaign-metric>span{
  font-size:10px;
  letter-spacing:.12em;
  line-height:1.65;
  max-width:145px;
  align-self:center
}
.campaign-signature{
  position:absolute;
  z-index:3;
  left:0;
  bottom:30px;
  display:flex;
  gap:17px;
  align-items:start;
  color:var(--rose-deep)
}
.campaign-signature>span{
  width:34px;
  height:1px;
  background:var(--rose);
  margin-top:9px;
  flex-shrink:0
}
.campaign-signature p{
  font-size:10px;
  letter-spacing:.22em;
  line-height:1.7;
  margin-bottom:4px
}
.campaign-signature em{
  font-family:var(--serif);
  font-size:18px;
  line-height:1.5
}
.campaign-signature-break{
  display:none
}
.campaign-organic{
  position:absolute;
  z-index:-1;
  pointer-events:none;
  background:#e5d8c4;
}
.campaign-organic-one{
  width:88%;
  height:120%;
  left:49%;
  top:-15%;
  border-radius:60% 0 52% 45%;
  transform:rotate(33deg);
  background:#ebe1d1
}
.campaign-organic-two{
  width:105%;
  height:82%;
  left:25%;
  top:64%;
  border-radius:54% 48% 0 0;
  transform:rotate(-25deg);
  background:#d6c4a8
}
.campaign-contour{
  position:absolute;
  z-index:1;
  width:113%;
  height:90%;
  left:42%;
  top:73%;
  border:1px solid #ab8b5c85;
  border-radius:50%;
  transform:rotate(-31deg);
  pointer-events:none
}
@media(min-width:1800px) and (min-height:1000px){
  .campaign{
    padding-top:120px
  }
  .campaign-copy{
    padding-top:60px
  }
  .campaign-portrait{
    top:-72px
  }
  .campaign-metrics{
    margin-top:50px
  }
  .campaign-signature{
    bottom:48px
  }
}
@media(min-width:701px) and (max-width:1100px){
  .campaign{
    min-height:820px;
    max-height:1100px;
    padding:100px 5% 0
  }
  .campaign-copy{
    width:59%;
    padding-top:45px
  }
  .campaign h1{
    font-size:6.5vw
  }
  .campaign-subtitle{
    font-size:17px
  }
  .campaign-portrait{
    width:82%;
    right:-18%;
    top:28px
  }
  .campaign-seal{
    right:0;
    top:12px;
    width:100px
  }
  .campaign-editorial{
    right:0;
    top:150px;
    font-size:19px
  }
  .campaign-cta{
    font-size:10px;
    gap:20px;
    padding:15px 22px;
    min-height:54px
  }
  .campaign-metrics{
    width:50%;
    margin-top:37px
  }
  .campaign-metric{
    padding:0 13px
  }
  .campaign-metric strong{
    font-size:28px
  }
  .campaign-metric>span{
    font-size:9px;
    letter-spacing:.06em;
    max-width:110px
  }
  .campaign-signature{
    bottom:32px
  }
  .campaign-signature em{
    font-size:17px
  }
  .campaign-organic-one{
    left:57%
  }
}
@media(max-width:850px) and (min-width:701px){
  .campaign{
    height:900px
  }
  .campaign h1{
    font-size:6.6vw
  }
  .campaign-copy{
    width:62%
  }
  .campaign-portrait{
    top:100px;
    right:-24%;
    width:91%
  }
  .campaign-subtitle{
    font-size:16px
  }
  .campaign-seal{
    top:22px;
    width:112px
  }
  .campaign-editorial{
    top:155px;
    font-size:18px
  }
  .campaign-metrics{
    grid-template-columns:1fr;
    width:35%;
    gap:20px;
    margin-top:32px
  }
  .campaign-metric{
    padding:0 0 0 15px!important;
    text-align:left;
    border-left:1px solid var(--line);
    gap:5px
  }
  .campaign-metric>span{
    align-self:start;
    max-width:140px;
    font-size:9px
  }
  .campaign-signature{
    bottom:28px
  }
  .campaign-signature em{
    font-size:16px
  }
  .campaign-signature-break{
    display:block
  }
}
@media(max-width:700px){
  .header:not(.scrolled){
    height:88px;
    padding-inline:6%
  }
  .header .wordmark{
    gap:12px
  }
  .header .brand-monogram{
    font-size:50px
  }
  .header .brand-type{
    font-size:11px;
    letter-spacing:.12em
  }
  .header .brand-type small{
    font-size:7px;
    letter-spacing:.14em
  }
  .header .mobile-menu{
    border:0
  }
  .header .mobile-menu svg{
    stroke-width:1.2;
    width:28px;
    height:28px
  }
  .campaign{
    height:auto;
    max-height:none;
    min-height:0;
    padding:88px 6% 0
  }
  .campaign-inner{
    /* The visible crop ends just after the lowest hair strands, before the sleeves. */
    height:calc(132vw + 258px);
    min-height:0;
    max-height:none
  }
  .campaign-copy{
    padding-top:33px;
    width:100%
  }
  .campaign-kicker{
    font-size:10px;
    letter-spacing:.23em;
    margin-bottom:11px
  }
  .campaign h1{
    font-size:10.5vw;
    letter-spacing:-.04em;
    line-height:1.03
  }
  .campaign-title-line{
    width:max-content;
    max-width:100%
  }
  .campaign-title-line:first-child{
    max-width:65%
  }
  .campaign-subtitle{
    font-size:14px;
    line-height:1.65;
    letter-spacing:.01em;
    margin-top:18px;
    max-width:70%
  }
  .campaign-cta{
    min-height:51px;
    margin-top:18px;
    padding:14px 19px;
    gap:16px;
    font-size:9px;
    letter-spacing:.13em;
    position:relative;
    z-index:4
  }
  .campaign-portrait{
    width:157%;
    right:-54%;
    top:258px;
    aspect-ratio:1261/1600
  }
  .campaign-seal{
    width:93px;
    right:-1%;
    top:13px
  }
  .campaign-seal text{
    font-size:10px
  }
  .campaign-editorial{
    right:0;
    top:199px;
    font-size:16px;
    line-height:1.2
  }
  .campaign-editorial>span{
    width:22px;
    margin-top:13px
  }
  .campaign-metrics{
    display:flex;
    flex-direction:column;
    width:39%;
    margin-top:34px;
    gap:23px
  }
  .campaign-metric{
    padding:0 0 0 12px!important;
    gap:6px;
    text-align:left;
    border-left:1px solid var(--line)
  }
  .campaign-metric strong{
    font-size:28px;
    line-height:1.1
  }
  .campaign-metric>span{
    align-self:start;
    font-size:9px;
    letter-spacing:.08em;
    max-width:110px;
    line-height:1.65
  }
  .campaign-signature{
    display:none
  }
  .campaign-organic-one{
    width:140%;
    height:70%;
    left:44%;
    top:12%;
    transform:rotate(30deg);
    border-radius:55% 0 60% 50%;
    background:#ebe1d1
  }
  .campaign-organic-two{
    width:210%;
    height:63%;
    left:-41%;
    top:64%;
    border-radius:50% 50% 0 0;
    transform:rotate(-34deg);
    background:#d9c8ac
  }
  .campaign-contour{
    left:-27%;
    top:77%;
    width:190%;
    height:43%;
    transform:rotate(-38deg)
  }
  .campaign::after{
    height:clamp(54px,16vw,74px)
  }
}
@media(max-width:374px){
  .campaign h1{
    font-size:10.4vw
  }
  .campaign-subtitle{
    font-size:13px
  }
  .campaign-seal{
    width:80px;
    right:-1%
  }
  .campaign-cta{
    font-size:8px;
    padding-inline:16px;
    gap:11px
  }
  .campaign-portrait{
    top:250px;
    right:-58%;
    width:165%
  }
  .campaign-inner{
    /* The narrower crop uses a slightly wider portrait. */
    height:calc(138vw + 250px)
  }
  .campaign-editorial{
    top:185px;
    font-size:14px
  }
  .campaign-metric strong{
    font-size:23px
  }
  .campaign-metric>span{
    font-size:7px
  }
}
@media(min-width:500px) and (max-width:700px){
  .campaign-copy{
    padding-top:42px
  }
  .campaign-kicker{
    font-size:12px
  }
  .campaign-subtitle{
    font-size:18px
  }
  .campaign-cta{
    font-size:11px;
    padding:17px 25px;
    gap:25px
  }
  .campaign-seal{
    width:125px;
    top:15px
  }
  .campaign-portrait{
    top:345px
  }
  .campaign-editorial{
    top:280px;
    font-size:23px
  }
  .campaign-inner{
    /* Keep the same hair-level crop after the portrait's 500px layout shift. */
    height:calc(132vw + 345px)
  }
  .campaign-metrics{
    margin-top:44px;
    gap:33px
  }
  .campaign-metric strong{
    font-size:35px
  }
  .campaign-metric>span{
    font-size:10px;
    max-width:140px
  }
}
@media(prefers-reduced-motion:reduce){
  .campaign-cta:hover{
    transform:none
  }
}

/* Motion layers are separate from layout and from the interactive button. */
.campaign-title-line > span { transform-origin: 0 100%; }
.campaign-action { width: fit-content; max-width: 100%; }
.campaign-seal circle, .campaign-seal > svg > path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.campaign-cta { position: relative; isolation: isolate; overflow: hidden; transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s; }
.campaign-cta::before { content: ''; position: absolute; inset: -1px; z-index: -1; background: var(--wine); clip-path: circle(0% at 88% 50%); transition: clip-path .7s cubic-bezier(.16,1,.3,1); }
.campaign-cta::after { content: ''; position: absolute; right: 12px; top: 50%; width: 39px; height: 39px; border: 1px solid #faf7f126; border-radius: 50%; transform: translateY(-50%) scale(.8); opacity: 0; transition: opacity .4s, transform .5s; pointer-events: none; }
.campaign-cta:hover, .campaign-cta:focus-visible { background: var(--rose-deep); transform: translateY(-3px); box-shadow: 0 7px 0 -5px #ab8b5c45; }
.campaign-cta:hover::before, .campaign-cta:focus-visible::before { clip-path: circle(130% at 88% 50%); }
.campaign-cta:hover::after, .campaign-cta:focus-visible::after { opacity: 1; transform: translateY(-50%) scale(1); }
.campaign-cta:hover svg, .campaign-cta:focus-visible svg { transform: translateX(4px); }
.campaign-cta:active { transform: translateY(0) scale(.98); }
@media (max-width: 700px) { .campaign-cta::after { right: 6px; width: 35px; height: 35px; } }
@media (prefers-reduced-motion: reduce) {
  .campaign-cta:hover, .campaign-cta:focus-visible, .campaign-cta:active, .campaign-cta:hover svg, .campaign-cta:focus-visible svg { transform: none; }
}