/* Opening sections follow Katya's Canva layouts (1440 × 880 / 1440 × 694). */
.header {
  top: 40px;
  left: 6.1111%;
  right: 6.6667%;
  height: 72px;
  padding: 0;
  align-items: flex-start;
  border-radius: 0;
  color: #fff;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.header > .wordmark { margin-top: 24px; }
.header .wordmark { font-size: 38px; gap: 18px; letter-spacing: -2.5px; }
.header .wordmark span { width: 120px; font: 400 11px/1.35 Arial, sans-serif; letter-spacing: 0; }
.header .desktop-nav { gap: 56px; font: 400 13px/1.7 Arial, sans-serif; }
.header .desktop-nav a { padding-top: 12px; }
.header .nav-cta,
.hero-mobile-cta { background: #dec0d0; color: #350323; font-weight: 600; }
.header .nav-cta { min-width: 210px; height: 50px; padding: 14px 28px; gap: 6px; }
.header .nav-cta:hover,
.hero-mobile-cta:hover { background: #ecd1df; }
.header.scrolled {
  top: 16px;
  height: 74px;
  padding: 12px 22px;
  align-items: center;
  border-radius: 14px;
  background: #354658eb;
  box-shadow: 0 6px 35px #13202b26;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.header.scrolled > .wordmark { margin-top: 0; }
.header.scrolled .wordmark { font-size: 33px; }
.header.scrolled .desktop-nav { gap: 30px; }
.header.scrolled .desktop-nav a { padding: 12px 0; }
.header :is(a, button):focus-visible,
.hero a:focus-visible { outline-color: #f1d6e5; }
.header .mobile-nav { background: #354658fa; color: #fff; border-color: #ffffff30; }

.hero {
  display: block;
  width: 100%;
  max-width: none;
  min-height: 0;
  height: 61.1111vw;
  padding: 0;
  margin: 0;
  background: #46576a;
  color: #fff;
}
.hero-backdrop { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.hero-backdrop img {
  position: absolute;
  top: -.3334%;
  left: 0;
  width: 101.31%;
  height: 159.53%;
  object-fit: cover;
  object-position: center;
}
.hero-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/opening-grain.svg') repeat;
  opacity: .19;
  mix-blend-mode: soft-light;
}
.hero-copy { position: static; max-width: none; width: auto; }
.hero h1 {
  position: absolute;
  top: 31.6584%;
  left: 4.428%;
  width: 69%;
  color: #fff;
  font: 600 3.75vw/1.16 var(--sans);
  letter-spacing: -.012em;
  z-index: 2;
}
.hero h1 > span { display: block; white-space: nowrap; }
.hero h1 em {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: .49vw 0 0 28.716vw;
  padding: 0;
  font: italic 400 5.278vw/1.17 var(--serif);
  letter-spacing: -.025em;
}
.hero-description {
  position: absolute;
  top: 61.548%;
  left: 3.46%;
  width: 65.116%;
  max-width: none;
  margin: 0;
  font: 400 1.8056vw/1.82 Arial, sans-serif;
  color: #fff;
  z-index: 2;
}
.hero-mobile-cta { display: none; }
.still-life { position: relative; }
.still-life > img { display: block; width: 100%; height: 100%; object-fit: fill; }
.still-life > .still-life-original { display: none; }
@supports ((mask-image: url('')) or (-webkit-mask-image: url(''))) {
  .still-life > .still-life-original {
    display: block;
    mask-image: url('/assets/still-life-cutout.png');
    -webkit-mask-image: url('/assets/still-life-cutout.png');
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-mode: alpha;
  }
  .still-life > .still-life-fallback { display: none; }
}
.hero-object {
  position: absolute;
  left: 57.8253%;
  top: 23.7992%;
  width: 51.0056%;
  aspect-ratio: 735 / 705;
  z-index: 1;
}
.hero-pearls { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pearl { position: absolute; width: 2.2885%; height: auto; }
.pearl-one { left: 21.0828%; top: 86.8355%; }
.pearl-two { left: 76.4615%; top: 18.4068%; }
.pearl-three { left: 53.3755%; top: 88.6385%; width: 2.2461%; }
.pearl-four { left: 56.6811%; top: 88.6385%; }
.pearl-five { left: 62.2751%; top: 76.0867%; width: 2.2461%; }
.pearl-six { left: 63.3769%; top: 85.0325%; width: 3.3479%; }
.pearl-seven { left: 78.1944%; top: 13.6659%; width: 3.3903%; }

.manifesto {
  position: relative;
  isolation: isolate;
  display: block;
  max-width: none;
  height: 48.1944vw;
  min-height: 0;
  overflow: hidden;
  background: #32021f;
  color: #fff;
}
.manifesto-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
  z-index: -1;
}
.manifesto-image > img {
  width: 146.4%;
  height: auto;
  max-width: none;
  left: -32.667%;
  top: -98.62%;
  object-fit: initial;
  object-position: initial;
}
.manifesto-copy { padding: 5.02vw 0 0; position: relative; }
.manifesto-copy h2 {
  margin: 0 0 0 43.919%;
  font: 400 6.8056vw/1.16 Arial, sans-serif;
  letter-spacing: -.045em;
}
.manifesto-copy h2 > span { display: block; }
.manifesto-copy h2 em {
  display: block;
  margin: -.8333vw 0 0 22.58vw;
  font: italic 400 5.5556vw/1.1 var(--serif);
  letter-spacing: -.035em;
}
.manifesto-text {
  position: absolute;
  top: 29.24vw;
  left: 52.7326%;
  width: 39.5833%;
  color: #f7edf2;
  font: 400 1.3889vw/1.9 Arial, sans-serif;
}
.manifesto-text p + p { margin: 0 0 0 2.8647vw; width: 100%; }
.manifesto-glow,
.manifesto-flower { position: absolute; pointer-events: none; z-index: -1; }
.manifesto-glow { width: 39.3424%; left: 34.252%; top: -27.7038%; opacity: .23; }
.manifesto-glow img { width: 100%; display: block; filter: grayscale(1); }
.manifesto-flower { width: 39.748%; left: 85.325%; top: 33%; opacity: .67; }
.manifesto-flower img { width: 100%; display: block; filter: grayscale(.7) blur(14px); }
.path-object { height: calc(100% - 40px); width: 100%; aspect-ratio: auto; padding: 30px 0; }
.path-object > img { object-fit: contain; }
@supports ((mask-image: url('')) or (-webkit-mask-image: url(''))) {
  .path-object > .still-life-original { mask-size: contain; -webkit-mask-size: contain; mask-position: center; -webkit-mask-position: center; }
}

@media (min-width: 1151px) {
  .header:not(.scrolled) .desktop-nav { position: absolute; left: 31.19vw; gap: 0; }
  .header:not(.scrolled) .desktop-nav a:nth-child(1) { width: 7.7778vw; }
  .header:not(.scrolled) .desktop-nav a:nth-child(2) { width: 8.9583vw; }
  .header:not(.scrolled) .desktop-nav a:nth-child(3) { width: 7.9167vw; }
  .header:not(.scrolled) .desktop-nav a:nth-child(4) { width: 6.9444vw; }
}
@media (min-width: 1921px) {
  .hero h1 { font-size: 72px; }
  .hero h1 em { font-size: 102px; }
  .hero-description { font-size: 34px; max-width: 1250px; }
  .manifesto-text { font-size: 27px; max-width: 760px; }
}
@media (max-width: 1150px) {
  .header .desktop-nav { gap: 24px; }
  .header .wordmark { font-size: 33px; gap: 12px; }
  .header .wordmark span { width: auto; font-size: 10px; }
  .header .nav-cta { min-width: 176px; font-size: 12px; padding: 14px 19px; }
  .hero { min-height: 650px; }
  .hero h1 { font-size: clamp(34px, 3.75vw, 44px); }
  .hero h1 em { font-size: 6vw; }
  .hero-description { font-size: max(18px, 1.8056vw); }
  .hero-object { top: auto; bottom: -3.9%; }
  .manifesto { height: auto; min-height: 550px; }
  .manifesto-image { height: 100%; }
  .manifesto-image > img { width: 165%; left: -48%; top: calc(70px - 59.06vw); bottom: auto; }
  .manifesto-copy { min-height: 550px; padding-top: 5vw; padding-bottom: 44px; }
  .manifesto-copy h2 { font-size: 7.5vw; }
  .manifesto-copy h2 em { font-size: 6.6vw; }
  .manifesto-text { position: relative; top: auto; left: auto; width: 40%; margin: 44px 5% 0 53%; font-size: 17px; line-height: 1.8; }
  .manifesto-text p + p { margin: 15px 0 0; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .header { left: 5%; right: 5%; gap: 18px; }
  .header .wordmark span { display: none; }
  .header .desktop-nav { gap: 20px; font-size: 12px; }
  .header.scrolled .desktop-nav { gap: 18px; }
  .header .nav-cta { min-width: 156px; }
  .hero h1 { width: 86%; font-size: 3.78vw; }
  .hero-description { width: 66%; font-size: 17px; }
  .manifesto-text { font-size: 16px; }
}
@media (max-width: 760px) {
  .header { top: 22px; left: 24px; right: 24px; height: 58px; padding: 0; align-items: center; }
  .header > .wordmark { margin-top: 0; }
  .header .wordmark { font-size: 32px; gap: 12px; }
  .header .wordmark span { display: block; font-size: 9px; }
  .header .desktop-nav,
  .header .nav-cta { display: none; }
  .header .menu-toggle { padding: 10px 0 10px 10px; }
  .header .mobile-nav { top: 68px; }
  .header.scrolled { top: 12px; left: 12px; right: 12px; height: 66px; padding: 8px 16px; }
  .header.scrolled .wordmark { font-size: 30px; }
  .hero { height: auto; min-height: 0; padding: 145px 24px 0; }
  .hero-backdrop img { height: 160%; width: 100%; object-position: 52% 0; }
  .hero-copy { position: relative; }
  .hero h1 { position: relative; inset: auto; width: 100%; font-size: clamp(29px, 6.6vw, 48px); line-height: 1.17; letter-spacing: -.035em; }
  .hero h1 > span { white-space: normal; max-width: 620px; }
  .hero h1 em { font-size: clamp(43px, 9.5vw, 68px); line-height: 1.08; margin: 14px 0 0; letter-spacing: -.03em; max-width: 100%; }
  .hero-description { position: relative; inset: auto; width: 100%; margin-top: 30px; font-size: 17px; line-height: 1.8; max-width: 560px; }
  .hero-mobile-cta { display: inline-flex; margin-top: 27px; padding: 15px 24px; font-size: 13px; }
  .hero-object { position: relative; inset: auto; width: 112%; max-width: 590px; margin: 30px 0 -12px 5%; }
  .pearl-one { left: 8%; top: auto; bottom: 25%; width: 28px; }
  .pearl-two { left: auto; right: 6%; top: 110px; width: 24px; }
  .pearl-three { left: 10%; top: auto; bottom: 4%; width: 26px; }
  .pearl-four { left: 20%; top: auto; bottom: 5%; width: 26px; }
  .pearl-five { left: 5%; top: auto; bottom: 14%; width: 26px; }
  .pearl-six { display: none; }
  .pearl-seven { left: auto; right: 16%; top: 90px; width: 33px; }
  .manifesto { display: block; min-height: 0; height: auto; }
  .manifesto-image { position: relative; inset: auto; width: 100%; height: clamp(370px, 92vw, 620px); }
  .manifesto-image > img { width: 146.4%; height: auto; left: -32.667%; top: calc(50px - 104.8vw); bottom: auto; }
  .manifesto-image::after { content: ''; position: absolute; inset: auto 0 0; height: 130px; background: linear-gradient(transparent, #32021f90); }
  .manifesto-copy { min-height: 0; padding: 0 24px 66px; margin-top: -65px; }
  .manifesto-copy h2 { margin: 0; font-size: clamp(53px, 12.6vw, 78px); line-height: 1.06; letter-spacing: -.045em; }
  .manifesto-copy h2 em { margin: -2px 0 0 40%; font-size: clamp(62px, 14vw, 90px); line-height: 1.08; }
  .manifesto-text { margin: 34px 0 0; width: 100%; font-size: 16px; line-height: 1.85; }
  .manifesto-text p + p { width: auto; margin: 20px 0 0 6%; }
  .manifesto-glow { left: 28%; top: 30%; width: 90%; opacity: .15; }
  .manifesto-flower { left: 69%; top: auto; bottom: -5%; width: 90%; opacity: .25; }
  .path-object { height: 310px; padding: 5px 0 15px; }
}
@media (max-width: 374px) {
  .header { left: 20px; right: 20px; }
  .header .wordmark { font-size: 29px; gap: 9px; }
  .header .wordmark span { font-size: 8px; }
  .hero { padding: 135px 20px 0; }
  .hero h1 { font-size: 28px; }
  .hero h1 em { font-size: 40px; }
  .hero-description { font-size: 16px; }
  .manifesto-copy { padding-left: 20px; padding-right: 20px; }
  .manifesto-copy h2 { font-size: 49px; }
  .manifesto-copy h2 em { font-size: 59px; }
}