:root {
  --yb-yellow: #ffbc00;
  --yb-graphite: #3c3c3b;
  --yb-ink: #171717;
  --yb-paper: #f5f5f1;
  --yb-line: rgba(23, 23, 23, .18);
}

.yourbackpack-case {
  background: var(--yb-paper);
  color: var(--yb-ink);
}

.yourbackpack-case .button,
.yourbackpack-case .menu-toggle {
  border-color: var(--yb-yellow);
  background: var(--yb-yellow);
  color: var(--yb-ink);
}

.yourbackpack-case .button:hover { background: #ffd04a; }
.yb-shell { width: min(1540px, calc(100% - 96px)); margin-inline: auto; }
.yb-section { padding: clamp(96px, 10vw, 180px) 0; }
.yb-eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; }
.yb-section h2 {
  margin: 0;
  font-family: "Lebowski GB Preview", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(64px, 7.2vw, 136px);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: .88;
}

.yb-copy { max-width: 590px; }
.yb-copy p { margin: 0; font-size: clamp(17px, 1.12vw, 22px); line-height: 1.48; }
.yb-copy p + p { margin-top: 1em; }

.yb-hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  overflow: hidden;
  isolation: isolate;
  background: var(--yb-yellow);
  color: var(--yb-graphite);
}

.yb-hero::before {
  content: "Yb";
  position: absolute;
  z-index: -1;
  right: -5vw;
  bottom: -18vw;
  color: transparent;
  font-family: var(--sans);
  font-size: min(72vw, 1250px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.16em;
  -webkit-text-stroke: 1px rgba(60, 60, 59, .16);
}

.yb-hero__meta {
  position: absolute;
  z-index: 3;
  top: 28px;
  right: var(--gutter);
  left: var(--gutter);
  display: flex;
  justify-content: space-between;
  color: rgba(60, 60, 59, .66);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.yb-hero__grid {
  min-height: calc(100svh - var(--header-h));
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 4vw;
  align-items: center;
  padding-block: 86px 58px;
}

.yb-hero__copy { position: relative; z-index: 2; }
.yb-hero__logo { width: min(35.6vw, 544px); height: auto; margin-bottom: clamp(36px, 4vw, 66px); }
.yb-hero__headline {
  margin: 0;
  font-family: "Lebowski GB Preview", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(90px, 9.5vw, 180px);
  letter-spacing: -.055em;
  line-height: .77;
}

.yb-hero__lead { max-width: 600px; margin: 34px 0 0; font-size: clamp(17px, 1.16vw, 23px); line-height: 1.45; }
.yb-hero__visual { position: relative; align-self: end; min-width: 0; height: calc(100svh - var(--header-h) - 62px); display: flex; align-items: flex-end; justify-content: center; }
.yb-hero__visual img { position: relative; z-index: 2; width: auto; height: min(78vh, 900px); max-width: 100%; object-fit: contain; object-position: bottom; }
.yb-hero__step { position: absolute; z-index: 1; top: 7%; right: 0; color: rgba(60, 60, 59, .18); font: 400 clamp(210px, 24vw, 430px)/.8 "Lebowski GB Preview", sans-serif; letter-spacing: -.07em; }
.yb-hero__scroll { position: absolute; z-index: 4; right: var(--gutter); bottom: 28px; color: rgba(60, 60, 59, .72); font-size: 10px; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }

@media (min-width: 901px) {
  .yb-hero__visual {
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: 20.4px;
  }

  .yb-hero__visual img {
    max-width: none;
    margin-right: -16.984px;
  }
}

.yb-index {
  position: sticky;
  z-index: 30;
  top: var(--header-h);
  height: 62px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--yb-line);
  background: rgba(245, 245, 241, .95);
  backdrop-filter: blur(14px);
}

.yb-index a { display: flex; align-items: center; justify-content: center; gap: 10px; border-right: 1px solid var(--yb-line); color: inherit; font-size: 10px; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.yb-index a:last-child { border-right: 0; }
.yb-index span { color: #a97500; }
.yb-index a[aria-current="true"] { background: var(--yb-yellow); }

.yb-heading-grid { display: grid; grid-template-columns: .65fr 2fr 1fr; gap: 4.5vw; align-items: start; }
.yb-context { background: var(--yb-paper); }
.yb-figure { margin: 90px auto 0; }
.yb-figure--edge { width: min(1840px, calc(100% - 48px)); }
.yb-figure img { width: 100%; height: auto; }
.yb-figure figcaption,
.yb-identity__plates figcaption,
.yb-screen figcaption,
.yb-screen-grid figcaption,
.yb-media__grid figcaption { padding-top: 10px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }

.yb-identity { background: #fff; }
.yb-identity__plates { display: grid; grid-template-columns: 16fr 9fr; gap: 2px; margin-top: clamp(70px, 8vw, 130px); }
.yb-identity__plates figure { margin: 0; display: grid; grid-template-rows: 1fr auto; min-width: 0; }
.yb-identity__plates img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.yb-colors { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 2px; }
.yb-colors span { aspect-ratio: 2.55 / 1; padding: 22px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.yb-colors span:nth-child(1) { background: var(--yb-yellow); color: var(--yb-graphite); }
.yb-colors span:nth-child(2) { background: var(--yb-graphite); color: #fff; }
.yb-colors span:nth-child(3) { border: 1px solid var(--yb-line); background: #fff; }

.yb-digital { background: var(--yb-graphite); color: #fff; }
.yb-heading-grid--dark .yb-copy { color: rgba(255, 255, 255, .68); }
.yb-screen { margin: clamp(70px, 8vw, 130px) auto 0; }
.yb-screen--wide { width: min(1840px, calc(100% - 48px)); }
.yb-screen img,
.yb-screen-grid img { width: 100%; height: auto; }
.yb-screen figcaption,
.yb-screen-grid figcaption { color: rgba(255, 255, 255, .58); }
.yb-screen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 2px; }
.yb-screen-grid figure { min-width: 0; margin: 0; }

.yb-media { background: var(--yb-yellow); }
.yb-media__grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 2px; margin-top: clamp(70px, 8vw, 130px); }
.yb-media__grid figure { min-width: 0; margin: 0; background: #fff; }
.yb-media__grid img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.yb-media__grid figcaption { padding: 10px 12px 12px; background: var(--yb-yellow); }

.yb-result { background: var(--yb-ink); color: #fff; }
.yb-result__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 10vw; }
.yb-result__grid h2 { max-width: 980px; }
.yb-result__grid > div > p:last-child { max-width: 720px; margin: 34px 0 0; color: rgba(255, 255, 255, .66); font-size: clamp(17px, 1.12vw, 22px); line-height: 1.48; }
.yb-result__grid ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .25); }
.yb-result__grid li { padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .25); font-size: 18px; }

.yb-contact { background: #08080a; }
.yb-contact .gradient-text { --text-gradient: linear-gradient(105deg, #ffbc00 0%, #ffe08a 46%, #f4f3ef 100%); }
.yb-contact .contact__main .yb-eyebrow { margin-bottom: 40px; }

.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .72s ease, transform .72s ease; }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .yb-hero__grid { grid-template-columns: 1.05fr .95fr; }
  .yb-hero__headline { font-size: clamp(82px, 10.4vw, 122px); }
  .yb-heading-grid { grid-template-columns: .5fr 1.75fr 1fr; }
}

@media (max-width: 900px) {
  .yb-shell { width: calc(100% - 40px); }
  .yb-section { padding: 88px 0; }
  .yb-section h2 { font-size: clamp(54px, 16vw, 84px); line-height: .9; }
  .yb-hero__meta { top: 22px; right: 20px; left: 20px; }
  .yb-hero__meta span:last-child { display: none; }
  .yb-hero__grid { min-height: calc(100svh - var(--header-h)); grid-template-columns: 1fr; gap: 0; align-items: start; padding: 74px 0 60px; }
  .yb-hero__copy { padding-top: 10px; }
  .yb-hero__logo { width: min(79.5vw, 492px); margin-bottom: 30px; }
  .yb-hero__headline { font-size: clamp(70px, 19vw, 122px); }
  .yb-hero__lead { max-width: 540px; margin-top: 22px; font-size: 16px; }
  .yb-hero__visual { position: absolute; right: -3vw; bottom: 0; width: 48vw; height: 62vh; pointer-events: none; }
  .yb-hero__visual img { height: min(58vh, 620px); }
  .yb-hero__step { top: 12%; right: -4vw; font-size: 38vw; }
  .yb-hero__scroll { right: 20px; bottom: 18px; }
  .yb-index { overflow-x: auto; grid-template-columns: repeat(4, minmax(132px, 1fr)); }
  .yb-index a { justify-content: flex-start; padding-inline: 18px; }
  .yb-heading-grid { grid-template-columns: 1fr; gap: 24px; }
  .yb-copy { max-width: 650px; }
  .yb-figure--edge,
  .yb-screen--wide { width: calc(100% - 24px); margin-top: 56px; }
  .yb-identity__plates { width: calc(100% - 24px); grid-template-columns: 1fr; margin-top: 56px; }
  .yb-identity__plates img { height: auto; object-fit: contain; }
  .yb-colors { width: calc(100% - 24px); grid-template-columns: 1fr; }
  .yb-colors span { aspect-ratio: 3.5 / 1; }
  .yb-screen-grid { width: calc(100% - 24px); grid-template-columns: 1fr; }
  .yb-media__grid { width: calc(100% - 24px); grid-template-columns: 1fr; margin-top: 56px; }
  .yb-result__grid { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 560px) {
  .yb-hero__grid { min-height: 880px; }
  .yb-hero__copy { padding-top: 4px; }
  .yb-hero__headline { font-size: clamp(64px, 20.5vw, 92px); }
  .yb-hero__lead { max-width: 72%; }
  .yb-hero__visual { right: -5vw; width: 56vw; height: 40vh; }
  .yb-hero__visual img { height: min(38vh, 340px); }
  .yb-hero__step { top: -12%; right: -10vw; font-size: 48vw; }
  .yb-figure figcaption,
  .yb-identity__plates figcaption,
  .yb-screen figcaption,
  .yb-screen-grid figcaption,
  .yb-media__grid figcaption { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}