/* LIKE's original hand icons form the whole opening story. */
#story.brand-intro {
  display:block;
  position:relative;
  height:240svh;
  background:#fde4d1;
  color:#d71f38;
  --intro-display:'Barlow Condensed','Impact','Arial Narrow',sans-serif;
  --intro-body:'DM Sans',Arial,sans-serif;
  --intro-heading-size:min(clamp(52px,8.6vw,156px),14svh);
  --intro-row-gap:clamp(28px,4svh,48px);
}
.brand-stage {
  position:sticky;
  top:0;
  height:100svh;
  min-height:0;
  overflow:hidden;
  isolation:isolate;
  background:#fde4d1;
}
.intro-accessible {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.intro-art {position:absolute;inset:0;pointer-events:none;}
.intro-scene {position:absolute;inset:0;opacity:0;will-change:opacity;}
.intro-wave-scene {opacity:1;}
.intro-art-icon {position:absolute;display:block;height:auto;aspect-ratio:1;object-fit:contain;transform:translate(-50%,-50%);will-change:transform;}
.intro-wave {left:78%;top:52%;width:min(23vw,40svh,330px);transform-origin:50% 82%;}
.intro-duet {width:min(17vw,29svh,240px);transform-origin:50% 80%;}
.intro-duet--left {left:14%;top:55%;}
.intro-duet--right {left:86%;top:45%;}
.intro-fan {left:50%;top:27%;width:min(12vw,19svh,165px);transform-origin:50% 88%;}
.intro-copy {
  position:absolute;
  top:52%;
  left:36%;
  width:52%;
  max-width:950px;
  transform:translate(-50%,-50%);
  text-align:center;
  pointer-events:none;
}
#story .intro-eyebrow {
  font:600 14px/1.4 var(--intro-body);
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:0 0 24px;
}
.intro-headlines {display:grid;overflow:hidden;isolation:isolate;}
.intro-panel {
  grid-area:1/1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-self:stretch;
  padding-block:.045em;
  opacity:0;
  color:#d71f38;
  font:900 var(--intro-heading-size)/.91 var(--intro-display);
  letter-spacing:-.035em;
  text-transform:uppercase;
  will-change:transform;
}
.intro-panel:first-child {opacity:1;}
.intro-panel span {display:block;white-space:nowrap;}
.intro-panel[data-intro-panel="2"] {font-size:calc(var(--intro-heading-size)*.75);line-height:1.02;}
.intro-panel span+span {margin-top:.04em;}
.intro-panel em {font:inherit;color:#f27035;}
#story .intro-tagline {font:500 18px/1.5 var(--intro-body);margin:29px 0 0;color:#71212b;}
.intro-pattern {
  position:absolute;
  display:flex;
  --icon-gap:28px;
  gap:var(--icon-gap);
  left:calc(50% - 50vw);
  width:max-content;
  opacity:0;
  transform:translateX(0);
  will-change:transform,opacity;
}
.intro-pattern:has(.intro-pattern-group) {gap:0;}
.intro-pattern-group {display:flex;flex:none;gap:var(--icon-gap);padding-right:var(--icon-gap);}
.intro-pattern--top {bottom:calc(100% + var(--intro-row-gap));}
.intro-pattern--bottom {top:calc(100% + var(--intro-row-gap));}
.intro-pattern img {display:block;width:clamp(58px,5.5vw,88px);height:auto;aspect-ratio:1;object-fit:contain;}
.intro-pattern img:nth-child(3n) {transform:rotate(12deg);}
.intro-pattern img:nth-child(3n+1) {transform:rotate(-10deg);}
.intro-bottom {
  position:absolute;
  z-index:2;
  bottom:max(30px,4.6svh);
  left:5%;
  right:5%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  font:500 14px/1.5 var(--intro-body);
  color:#71212b;
}
.intro-scroll {display:flex;gap:12px;align-items:center;}
.intro-scroll-mark {width:19px;height:28px;border:1.5px solid currentColor;border-radius:10px;position:relative;}
.intro-scroll-mark::after {content:'';position:absolute;width:3px;height:6px;border-radius:2px;background:currentColor;left:6.5px;top:6px;}
.intro-progress {display:flex;align-items:center;gap:12px;font-size:12px;font-variant-numeric:tabular-nums;}
.intro-track {display:block;width:90px;height:2px;background:rgba(113,33,43,.18);}
.intro-track>span {display:block;height:100%;background:#d71f38;transform:scaleX(0);transform-origin:left;}
.intro-menu {color:#d71f38;text-decoration:underline;text-underline-offset:5px;padding:10px 0;}
.intro-menu:hover {color:#71212b;}
.in-story .header {height:128px;padding:12px 5%;background:transparent;color:#d71f38;font-family:'DM Sans',Arial,sans-serif;}
.in-story .header>a {display:block;width:86px;height:104px;padding:0;background:transparent;border-radius:0;box-shadow:none;transform:none;}
.in-story .header .logo {width:86px;height:104px;object-fit:contain;}
.in-story .header>nav {display:flex;pointer-events:auto;font-family:'DM Sans',Arial,sans-serif;font-size:14px;gap:28px;}
.in-story .header nav .button {font-family:'DM Sans',Arial,sans-serif;font-weight:600;}
.in-story .header .process-controls {display:none;}
@media(min-width:821px) and (max-height:700px) {
  #story.brand-intro {--intro-heading-size:min(8vw,13svh);--intro-row-gap:24px;}
  .intro-copy {top:53%;}
  #story .intro-eyebrow {margin-bottom:18px;}
  #story .intro-tagline {margin-top:18px;}
  .intro-pattern img {width:55px;}
  .in-story .header {height:88px;padding-block:10px;}
  .in-story .header>a,.in-story .header .logo {width:56px;height:68px;}
}
@media(max-width:820px) and (min-height:501px) {
  #story.brand-intro {height:220svh;--intro-heading-size:min(clamp(44px,13vw,84px),14svh);--intro-row-gap:clamp(24px,3.5svh,34px);}
  .in-story .header {height:102px;padding:12px 5%;}
  .in-story .header>a,.in-story .header .logo {width:64px;height:78px;}
  .in-story .header>nav {gap:16px;font-size:14px;}
  .in-story .header .small {font-size:12px;padding:10px 14px;min-height:42px;}
  .intro-copy {top:61%;left:50%;width:90%;}
  .intro-wave {left:50%;top:31%;width:min(34vw,23svh,150px);}
  .intro-duet {top:31%;width:min(25vw,19svh,115px);}
  .intro-duet--left {left:28%;}
  .intro-duet--right {left:72%;}
  .intro-fan {top:29%;width:min(21vw,16svh,100px);}
  .intro-panel {line-height:.96;letter-spacing:-.025em;}
  #story .intro-eyebrow {font-size:12px;margin-bottom:20px;}
  #story .intro-tagline {font-size:15px;margin-top:20px;}
  .intro-pattern {--icon-gap:18px;}
  .intro-pattern img {width:min(58px,8.5svh);}
  .intro-bottom {bottom:24px;gap:12px;font-size:12px;}
  .intro-scroll {gap:8px;}
  .intro-scroll-mark {display:none;}
  .intro-progress {display:none;}
}
@media(max-height:500px) {
  #story.brand-intro {--intro-heading-size:min(8vw,12svh);--intro-row-gap:12px;}
  #story .intro-eyebrow {font-size:10px;line-height:1.4;margin-bottom:8px;}
  #story .intro-tagline {font-size:12px;line-height:1.5;margin-top:8px;}
  .intro-pattern img {width:min(36px,9svh);}
  .in-story .header {height:64px;padding-block:7px;}
  .in-story .header>a,.in-story .header .logo {width:42px;height:50px;}
  .intro-bottom {bottom:10px;font-size:12px;}
  .intro-menu {padding-block:5px;}
}
@media(prefers-reduced-motion:reduce) {
  #story.brand-intro {height:auto;}
  .brand-stage {position:relative;height:100svh;}
  .intro-scene {display:none;}
  .intro-pattern {opacity:1;}
  .intro-copy {top:52%;left:50%;width:60%;}
  .intro-panel,.intro-pattern {will-change:auto;}
    .intro-scroll,.intro-progress {display:none;}
  .intro-bottom {justify-content:center;}
}
@media(max-width:820px) and (min-height:501px) and (prefers-reduced-motion:reduce) {
  .intro-copy {top:55%;width:90%;}
}

/* Keep the main navigation in a regular sans serif in every scroll state. */
.header nav,
.header nav > a,
.header nav .button,
.in-story .header > nav,
.in-story .header nav .button {
  font-family: 'DM Sans', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

/* A stable header avoids a logo-size jump when the mobile intro ends. */
@media(max-width:650px){
 .header,.in-story .header{height:84px;padding:8px 5%;gap:12px}
 .header>a,.in-story .header>a{flex:none;width:56px;height:68px;padding:0;transform:none}
 .header .logo,.in-story .header .logo{width:56px;height:68px}
 .header>nav,.in-story .header>nav{gap:12px;font-size:14px}
 .header nav>a:nth-child(2){display:block}
 .header .small,.in-story .header .small{font-size:12px;min-height:44px;padding:10px;gap:8px;white-space:nowrap}
}
@media(max-width:950px) and (max-height:500px){
 .header,.in-story .header{height:64px;padding-block:7px}
 .header>a,.in-story .header>a,.header .logo,.in-story .header .logo{width:42px;height:50px}
}

/* A more prominent Order now button in both header states. */
.header nav .button,.in-story .header nav .button{
 min-width:170px;min-height:58px;padding:16px 24px;font-size:16px;line-height:1.25;gap:24px;white-space:nowrap;flex:none;
}
@media(max-width:650px), (max-width:950px) and (max-height:500px){
 .header nav .button,.in-story .header nav .button{min-width:130px;min-height:52px;padding:14px 16px;font-size:14px;gap:12px}
}
@media(max-width:380px){
 .header,.in-story .header{padding-inline:4%;gap:8px}
 .header>nav,.in-story .header>nav{gap:8px}
 .header nav .button,.in-story .header nav .button{min-width:116px;padding-inline:12px;gap:10px}
}