/* =====================================================================
   PLH® USA — home (from 28/10/2026). The choice between the two
   products, nothing else: Slim on black, NEO on white, each half the
   link to its landing. Proportions taken from the approved layout
   (1600 × 884): plate and knob are placed in % of their half so the
   composition holds at any size.
   ===================================================================== */

:root {
  --black: #000;
  --white: #FFF;
  --f: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --spectrum: linear-gradient(90deg, #E3201B 0%, #F07E1C 24%, #F4BE13 42%, #8DC63F 60%, #18AEC4 78%, #1E4FA8 100%);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--black); color: var(--white);
  font-family: var(--f); line-height: 1.2;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
sup { font-size: .5em; vertical-align: super; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 10; padding: .6rem 1rem; background: var(--white); color: var(--black); }
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------- the mark */
.top { position: absolute; top: 0; left: 0; z-index: 3; padding: clamp(.9rem, 2vw, 1.5rem) 0 0 clamp(1.25rem, .8rem + 2.5vw, 4rem); }
.mark { display: block; }
.mark svg { width: 30px;  /* same as the header mark on /slim/ and /neo/ */ height: auto; fill: var(--white); }
.mark:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

/* ------------------------------------------------------------ the split */
.split { display: grid; grid-template-columns: 1fr 1fr; }

.side { position: relative; display: block; height: 100svh; min-height: 560px; overflow: hidden; }
.side--slim { background: var(--black); color: var(--white); }
.side--neo  { background: var(--white); color: var(--black); }
.side:focus-visible { outline: 2px solid currentColor; outline-offset: -10px; }

/* positioned with `translate`, so `transform` stays free for the motion */
.side__shot { position: absolute; display: block; width: auto; max-width: none; translate: -50% 0; }
.side--slim .side__shot { left: 44.6%; top: 18.7%; height: 55%; }
.side--neo  .side__shot { left: 50%; top: 59%; height: 22.3%; translate: -50% -50%; }

.side__text { position: absolute; display: block; }
.side__name, .side__claim, .rise { display: block; }

.side--slim .side__text { left: 11%; top: 75%; }
.side--slim .side__name  { font-size: clamp(1.5rem, 2.3vw, 3rem); font-weight: 400; letter-spacing: -.01em; line-height: 1.2; }
.side--slim .side__claim { font-size: clamp(1.25rem, 2vw, 2.6rem); font-weight: 400; line-height: 1.19; }

.side--neo .side__text { left: 17.9%; top: 26.5%; }
.side--neo .side__name  { font-size: clamp(1.8rem, 2.8vw, 3.6rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; }
.side--neo .side__claim { font-size: clamp(1.6rem, 2.56vw, 3.3rem); font-weight: 500; letter-spacing: -.01em; line-height: 1.12; }

/* the only colour on the page, and it belongs to NEO */
.side__spectrum {
  width: fit-content;
  background: var(--spectrum);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* --------------------------------------------------------------- motion
   Intro: CSS keyframes (predetermined, off the main thread). Fill-mode
   `backwards`, not `both`, so once they end the transform is free again
   for the hover below. */
@keyframes shot-in { from { opacity: 0; transform: translateY(28px); } }
@keyframes knob-in { from { opacity: 0; transform: scale(.96); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade-in { from { opacity: 0; } }

.mark                   { animation: fade-in .9s var(--ease-out) .1s backwards; }
.side--slim .side__shot { animation: shot-in 1.2s var(--ease-out) .1s backwards; }
.side--neo  .side__shot { animation: knob-in 1.1s var(--ease-out) .25s backwards; }
.rise { animation: rise-in .9s var(--ease-out) backwards; }
.side--slim .side__name .rise             { animation-delay: .4s; }
.side--slim .side__claim .rise            { animation-delay: .46s; }
.side--slim .side__claim .rise + .rise    { animation-delay: .52s; }
.side--neo  .side__name .rise             { animation-delay: .5s; }
.side--neo  .side__claim .rise            { animation-delay: .56s; }
.side--neo  .side__claim .rise + .rise    { animation-delay: .62s; }

.side__shot { transition: transform .7s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .side--slim:hover .side__shot { transform: translateY(-10px); }
  .side--neo:hover  .side__shot { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .mark, .side__shot, .rise { animation-name: fade-in; animation-duration: .5s; }
  .side__shot { transition: none; }
  .side--slim:hover .side__shot, .side--neo:hover .side__shot { transform: none; }
}

/* ------------------------------------------------------------- footer
   Reveal: the footer is stuck to the bottom of the viewport underneath the
   split, which scrolls up off it. Pure CSS (sticky + stacking), so nothing
   runs on scroll. Kept shorter than the viewport, or its top would hide. */
.split { position: relative; z-index: 1; }
.foot {
  position: sticky; bottom: 0; z-index: 0;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto;
  gap: 2rem 1.6rem; min-height: min(44svh, 420px);
  padding: clamp(2.6rem, 7vh, 5rem) clamp(18px, 3.4vw, 64px) 2.2rem;
  background: #0E0E0F; color: var(--white);
}
.foot__payoff { font-size: clamp(1.9rem, 3.4vw, 3.8rem); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.foot__nav { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; font-size: clamp(1.1rem, 1.4vw, 1.5rem); }
.foot__nav a { color: rgba(255,255,255,.6); transition: color .2s ease; }
.foot__nav a:focus-visible { outline: 1px solid var(--white); outline-offset: 4px; }
.foot__line { align-self: end; font-size: .82rem; color: rgba(255,255,255,.5); }
.foot__social { align-self: end; display: flex; gap: .2rem; margin-right: -.45rem; }
.foot__social a { display: inline-flex; padding: .45rem; border-radius: 50%; color: rgba(255,255,255,.55); transition: color .2s ease; }
.foot__social a:focus-visible { outline: 1px solid var(--white); }
.foot__social svg { width: 17px; height: 17px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .foot__nav a:hover, .foot__social a:hover { color: var(--white); }
}

/* --------------------------------------------------------------- mobile
   The halves stack and share one screen: Slim above, NEO below, each with
   its object on the right and its words on the left. */
@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; }
  .side { height: 50svh; min-height: 330px; }

  .side--slim .side__shot { left: 73%; top: 9%; height: 82%; }
  .side--slim .side__text { left: 20px; top: auto; bottom: 9%; }
  .side--slim .side__name  { font-size: 1.9rem; }
  .side--slim .side__claim { font-size: 1.3rem; }

  .side--neo .side__shot { left: 70%; top: 62%; height: 46%; }
  .side--neo .side__text { left: 20px; top: 11%; }
  .side--neo .side__name  { font-size: 2.1rem; }
  .side--neo .side__claim { font-size: 1.55rem; }

  .foot { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; gap: 1.6rem; padding-inline: 20px; }
  .foot__nav { flex-direction: row; align-items: center; gap: 1.4rem; }
  .foot__social { margin-left: -.45rem; margin-right: 0; }
}