:root{--ob-orange:#ff5424;--ob-black:#111;--ob-paper:#f4f3ef;--ob-peach:#f4d7c4;--line:rgba(17,17,17,.16)}
*{box-sizing:border-box}.orange-black-case{margin:0;background:var(--ob-paper);color:var(--ob-black)}.orange-black-case .site-header{background:rgba(13,13,13,.96)}.shell{width:min(1540px,calc(100% - 96px));margin-inline:auto}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:700}.case-section{padding:clamp(90px,10vw,180px) 0}.case-section h2{font-family:"Lebowski GB Preview","Helvetica Neue",Arial,sans-serif;font-weight:400;font-size:clamp(58px,7.1vw,132px);line-height:.86;letter-spacing:-.045em;margin:0}.case-section p{font-size:clamp(17px,1.15vw,23px);line-height:1.45}.ob-hero{min-height:100svh;position:relative;overflow:hidden;background:var(--ob-peach);padding-top:var(--header-h);isolation:isolate}.ob-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 67% 56%,transparent 0 25%,rgba(255,84,36,.09) 60%,transparent 78%);z-index:-1}.ob-hero__meta{position:absolute;z-index:3;top:calc(var(--header-h) + 34px);left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.13em;font-size:11px}.ob-hero__visual{position:absolute;inset:10% -4% -4% 32%;display:grid;place-items:center}.ob-hero__pack{width:min(75vw,1180px);height:auto;object-fit:contain;filter:drop-shadow(0 35px 35px rgba(30,15,8,.16));animation:packFloat 7s ease-in-out infinite}.capsule{position:absolute;width:30px;height:62px;border-radius:22px;background:linear-gradient(90deg,#dd8a00,#ffcf33 45%,#ed9e00 70%,#c87300);box-shadow:0 10px 18px rgba(91,47,0,.2);animation:capsuleFloat 5s ease-in-out infinite}.capsule::after{content:"";position:absolute;left:3px;right:3px;top:50%;border-top:1px solid rgba(128,64,0,.3)}.capsule--1{left:15%;top:22%;transform:rotate(-42deg)}.capsule--2{right:12%;top:18%;transform:rotate(58deg);animation-delay:-1s}.capsule--3{right:3%;top:48%;transform:rotate(20deg);animation-delay:-2s}.capsule--4{left:4%;top:61%;transform:rotate(52deg);animation-delay:-3s}.capsule--5{right:18%;bottom:9%;transform:rotate(-54deg);animation-delay:-4s}.capsule--6{left:28%;bottom:10%;transform:rotate(25deg);animation-delay:-2.5s}.ob-hero__copy{position:absolute;z-index:2;left:var(--gutter);top:50%;transform:translateY(-44%);width:min(42vw,690px)}.ob-hero__copy h1{font-family:"Lebowski GB Preview","Helvetica Neue",Arial,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(82px,11vw,210px);line-height:.72;letter-spacing:-.06em;margin:.14em 0 .18em}.ob-hero__copy p:last-child{max-width:550px;font-size:clamp(17px,1.2vw,24px)}.ob-hero__scroll{position:absolute;z-index:3;right:var(--gutter);bottom:32px;color:inherit;text-transform:uppercase;font-size:11px;letter-spacing:.12em}.case-index{height:64px;display:grid;grid-template-columns:repeat(6,1fr);position:sticky;top:var(--header-h);z-index:20;background:rgba(244,243,239,.94);backdrop-filter:blur(14px);border-block:1px solid var(--line)}.case-index a{color:inherit;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:12px;border-right:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:.09em}.case-index span{color:var(--ob-orange)}.case-index a[aria-current="true"]{background:#fff}.intro{background:#fff}.intro__grid{display:grid;grid-template-columns:1fr 2.2fr 1.05fr;gap:6vw;align-items:start}.intro__copy p:first-child{margin-top:0}.full-image{width:min(1700px,calc(100% - 48px));margin:100px auto 0;background:#fff}.full-image img{display:block;width:100%;height:auto;object-fit:contain}.full-image figcaption,.packaging figure figcaption,.range__rail figcaption{padding:10px 0;text-transform:uppercase;font-size:10px;letter-spacing:.12em}.full-image--dark{background:#171717}.system{background:var(--ob-black);color:white}.section-heading{max-width:1220px}.section-heading>p:last-child{max-width:700px;margin-left:auto}.section-heading--split{display:grid;grid-template-columns:.65fr 2fr 1fr;max-width:none;align-items:start;gap:4vw}.type-stage{width:min(1600px,calc(100% - 48px));margin:100px auto 0;min-height:70vh;background:var(--ob-paper);color:var(--ob-black);display:flex;align-items:center;justify-content:space-around;padding:8vw}.type-stage div{display:flex;flex-direction:column;font-family:Georgia,serif;font-weight:900;font-size:clamp(70px,10vw,190px);line-height:.72}.type-stage div span{color:var(--ob-orange)}.type-stage small{font:300 clamp(20px,2.2vw,38px)/1 Arial,sans-serif;align-self:flex-end}.type-stage p{max-width:360px}.color-strip{width:min(1600px,calc(100% - 48px));margin:auto;display:grid;grid-template-columns:repeat(3,1fr)}.color-strip span{aspect-ratio:2/1;padding:24px;text-transform:uppercase;font-size:11px;letter-spacing:.12em}.color-strip span:nth-child(1){background:var(--ob-orange)}.color-strip span:nth-child(2){background:#1b1b1b}.color-strip span:nth-child(3){background:#fff;color:#111}.packaging{background:#fff}.packaging__pair{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:2px}.packaging__pair figure{margin:0;background:var(--ob-paper)}.packaging__pair img{width:100%;height:auto;display:block}.range{background:var(--ob-peach);overflow:hidden}.range__copy{display:grid;grid-template-columns:.7fr 2fr 1fr;gap:4vw;align-items:start}.range__hero{margin:80px auto 0;width:min(1500px,90vw)}.range__hero img{display:block;width:100%;height:auto;object-fit:contain}.range__rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:80px max(48px,calc((100vw - 1540px)/2)) 20px}.range__rail figure{flex:0 0 min(78vw,1000px);margin:0;background:#fff;scroll-snap-align:center}.range__rail img{display:block;width:100%;height:auto;object-fit:contain}.digital{background:#202020;color:white}.website-stage{width:min(1420px,calc(100% - 96px));height:min(78vh,980px);margin:100px auto 0;overflow:auto;background:#f7dfcf;border:14px solid #111;box-shadow:0 45px 90px rgba(0,0,0,.35);position:relative}.website-stage img{display:block;width:100%;height:auto}.website-stage span{position:sticky;bottom:12px;left:12px;display:inline-block;padding:9px 12px;background:#111;color:#fff;font-size:10px;text-transform:uppercase;letter-spacing:.1em}.result{background:var(--ob-orange)}.result__grid{display:grid;grid-template-columns:2fr 1fr;gap:10vw}.result__grid ul{list-style:none;margin:0;padding:0;border-top:1px solid rgba(0,0,0,.25)}.result__grid li{padding:18px 0;border-bottom:1px solid rgba(0,0,0,.25);font-size:18px}.case-contact{background:#070707}[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .75s ease,transform .75s ease}[data-reveal].is-visible{opacity:1;transform:none}@keyframes packFloat{50%{transform:translateY(-14px) rotate(.5deg)}}@keyframes capsuleFloat{50%{margin-top:-20px;margin-left:9px}}
@media(max-width:900px){.shell{width:calc(100% - 36px)}.ob-hero{min-height:800px}.ob-hero__meta{left:18px;right:auto;top:calc(var(--header-h) + 20px);flex-direction:column;gap:4px}.ob-hero__visual{inset:28% -32% 5% 4%}.ob-hero__pack{width:105vw}.ob-hero__copy{left:18px;top:34%;width:82vw}.ob-hero__copy h1{font-size:clamp(74px,24vw,125px)}.ob-hero__copy p:last-child{font-size:15px;max-width:80%}.capsule{transform:scale(.7)}.case-index{overflow-x:auto;grid-template-columns:repeat(6,150px)}.case-section{padding:86px 0}.intro__grid,.section-heading--split,.range__copy,.result__grid{grid-template-columns:1fr;gap:28px}.case-section h2{font-size:clamp(54px,16vw,86px)}.full-image{width:100%;margin-top:56px}.packaging__pair{grid-template-columns:1fr;width:100%}.type-stage{width:100%;min-height:70vh;flex-direction:column;align-items:flex-start;padding:60px 20px}.color-strip{width:100%;grid-template-columns:1fr}.color-strip span{aspect-ratio:4/1}.range__hero{width:100%;margin-top:50px}.range__rail{padding-inline:18px}.website-stage{width:calc(100% - 36px);height:70vh;margin-top:56px;border-width:7px}.ob-hero__scroll{right:18px}.section-heading>p:last-child{margin-left:0}}
@media(prefers-reduced-motion:reduce){.ob-hero__pack,.capsule{animation:none}[data-reveal]{opacity:1;transform:none;transition:none}}
.case-index{position:relative;top:auto}

/* Exact Omega-3 softgels reused from the Orange Black project cover. */
.capsule {
  width: 34px;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 10px 12px rgba(91, 47, 0, .22));
}

.capsule::after { content: none; }

@media (max-width: 900px) {
  .capsule { width: 24px; }
  .capsule--1 { transform: rotate(-42deg) scale(.78); }
  .capsule--2 { transform: rotate(58deg) scale(.78); }
  .capsule--3 { transform: rotate(20deg) scale(.78); }
  .capsule--4 { transform: rotate(52deg) scale(.78); }
  .capsule--5 { transform: rotate(-54deg) scale(.78); }
  .capsule--6 { transform: rotate(25deg) scale(.78); }
}

/* Two original PSD groups, kept separate for a restrained scroll parallax. */
.range__hero--layers {
  --range-progress: 0;
  position: relative;
  aspect-ratio: 6296 / 4681;
  overflow: hidden;
  background: var(--ob-peach);
  isolation: isolate;
}

.range__hero--layers .range__box {
  position: absolute;
  top: 3.59%;
  width: 51.7%;
  height: auto;
  will-change: transform;
  transition: transform .08s linear;
}

.range__box--left {
  left: 6.93%;
  z-index: 2;
  transform: translate3d(
    calc(var(--range-progress) * -10px),
    calc(var(--range-progress) * -20px),
    0
  );
}

.range__box--right {
  left: 44.44%;
  z-index: 1;
  transform: translate3d(
    calc(var(--range-progress) * 10px),
    calc(var(--range-progress) * 20px),
    0
  );
}

@media (max-width: 900px) {
  .range__hero--layers .range__box { transition: none; }
  .range__box--left {
    transform: translate3d(0, calc(var(--range-progress) * -8px), 0);
  }
  .range__box--right {
    transform: translate3d(0, calc(var(--range-progress) * 8px), 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .range__hero--layers .range__box { transform: none; }
}

.type-stage .type-stage__logo {
  flex: 0 1 900px;
  width: min(68%, 900px);
  min-width: 0;
  font: inherit;
  line-height: normal;
}

.type-stage__logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 900px) {
  .type-stage .type-stage__logo {
    flex: none;
    width: 100%;
    max-width: none;
  }
}