.landing-header{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:flex-end;
  padding:var(--space-4) var(--space-5);color:#fff;
  flex-wrap:wrap;gap:var(--space-2);
}
@media (max-width:520px){
  .landing-header{padding:var(--space-3)}
}
.landing-header .lang-switch{border-color:rgba(255,255,255,.35)}
.landing-header .lang-switch button{color:rgba(255,255,255,.7)}
.landing-header .lang-switch button[aria-pressed="true"]{background:#fff;color:#141414}
.landing-header .lang-switch button:hover:not([aria-pressed="true"]){background:rgba(255,255,255,.15);color:#fff}

.split{
  min-height:100dvh;display:grid;grid-template-columns:1fr 1fr;position:relative;
}
@media (max-width:820px){
  .split{grid-template-columns:1fr;min-height:auto}
}

.split-panel{
  position:relative;min-height:100dvh;display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate;
}
@media (max-width:820px){.split-panel{min-height:70vh}}

.split-panel .bg{
  position:absolute;inset:0;z-index:-2;
  filter:grayscale(1) contrast(1.02);
  transition:filter var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transform:scale(1.04);
}
.split-panel:hover .bg,.split-panel:focus-within .bg{
  filter:grayscale(0) contrast(1.02);
  transform:scale(1.1);
}
@media (prefers-reduced-motion:reduce){
  .split-panel .bg{transform:none}
  .split-panel:hover .bg,.split-panel:focus-within .bg{transform:none}
}

.bg-architecture{
  background:
    linear-gradient(0deg,rgba(15,20,30,.2),rgba(15,20,30,0) 40%),
    url('../img/architecture-crossroads.jpg');
  background-size:cover;
  background-position:center 35%;
}
.bg-cosmetics{
  background:
    linear-gradient(0deg,rgba(74,44,59,.15),rgba(74,44,59,0) 40%),
    url('../img/cosmetics-landing.jpg');
  background-size:cover;
  background-position:center 30%;
}

.split-panel::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.08) 45%);
}

.panel-link{
  display:flex;flex-direction:column;align-items:flex-start;
  width:100%;padding:var(--space-6) var(--space-5);color:#fff;position:relative;z-index:1;
}
.panel-eyebrow{
  font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;opacity:.75;margin-bottom:var(--space-3);
}
.panel-title{
  font-size:clamp(2.8rem,6.4vw,4.6rem);font-family:var(--font-display);font-weight:600;
}
.panel-desc{
  margin-top:var(--space-4);max-width:40ch;color:rgba(255,255,255,.82);font-size:1.15rem;
  height:calc(1em * 1.6 * 2);overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.panel-cta{
  margin-top:var(--space-5);display:inline-flex;align-items:center;gap:.6em;
  font-size:1rem;font-weight:600;letter-spacing:.03em;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:4px;
  transition:gap var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.panel-link:hover .panel-cta{gap:1em;border-color:#fff}
.panel-cta svg{width:19px;height:19px}

.split-center{
  position:absolute;top:20%;left:50%;transform:translate(-50%,-50%);z-index:15;
  pointer-events:none;
}
.logo-badge{
  width:220px;height:220px;border-radius:50%;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4em;
  box-shadow:0 10px 34px rgba(0,0,0,.32);
}
.logo-badge img{width:76%;height:auto;display:block;margin-top:14px}
.logo-badge .tagline{
  font-size:.6rem;letter-spacing:.08em;color:#8a8783;text-transform:uppercase;text-align:center;
}
@media (max-width:820px){
  .split-center{
    top:var(--space-4);left:var(--space-4);transform:none;
    height:23.19px;display:flex;align-items:center;
  }
  .logo-badge{
    width:auto;height:auto;border-radius:0;background:none;box-shadow:none;
    display:block;
  }
  .logo-badge img{
    width:130px;height:auto;margin-top:0;
    filter:drop-shadow(0 1px 3px rgba(255,255,255,.55));
  }
  .logo-badge .tagline{display:none}
  .panel-link{padding-left:var(--space-3);padding-right:var(--space-3);padding-bottom:var(--space-6)}
  .panel-eyebrow{margin-bottom:var(--space-2)}
  .panel-desc{margin-top:var(--space-2)}
  .panel-cta{margin-top:var(--space-3)}
}
@media (max-width:520px){
  .logo-badge img{width:104px}
  .split-center{top:var(--space-3);left:var(--space-3)}
}

.landing-footer{
  position:absolute;bottom:0;left:0;right:0;z-index:20;
  display:flex;justify-content:center;padding:var(--space-3);
  font-size:.72rem;letter-spacing:.05em;color:rgba(255,255,255,.55);
}
@media (max-width:820px){.landing-footer{position:static;background:#141414;padding:var(--space-4)}}