@font-face{font-family:Geist;src:url('../assets/Geist.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--ink:#eef0e9;--soft:#bbc2b7;--sage:#d3e2bc;--hair:#e2eadd22;--g:clamp(18px,4.5vw,78px);font-family:Geist,Arial,sans-serif;background:#101210;color:var(--ink)}
*{box-sizing:border-box}body{margin:0;min-width:280px;background:radial-gradient(ellipse at 18% 21%,#20262080,transparent 44%),#101210}button,input,a{font:inherit}button{color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #e5f0c8;outline-offset:4px}[hidden]{display:none!important}p,h1,h2,h3,figure{margin:0}.skip{position:fixed;top:8px;left:8px;z-index:8;transform:translateY(-150%);background:#262c23;padding:10px}.skip:focus{transform:none}.bar,.wrap,.end{max-width:1680px;margin:auto;padding-inline:var(--g)}.bar{height:66px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--hair)}.brand{font-size:24px;font-weight:690;letter-spacing:-.085em}.brand span{color:var(--sage)}.top-links{display:flex;gap:clamp(14px,2.6vw,40px);font-size:13px;align-items:center}.top-links a:hover,.text-link:hover{text-decoration:underline;text-underline-offset:5px}.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin:clamp(24px,4vw,60px) 0 clamp(20px,2.5vw,38px)}.intro h1{font-size:clamp(55px,6.5vw,107px);font-weight:435;letter-spacing:-.087em;line-height:.96}.intro em,.offer em{font-family:Baskerville,'Times New Roman',serif;font-weight:400;color:var(--sage);letter-spacing:-.066em}.intro p{max-width:31ch;color:var(--soft);font-size:clamp(14px,1.15vw,18px);line-height:1.45}.room{display:grid;grid-template-columns:minmax(0,1fr) minmax(224px,24%);column-gap:clamp(20px,2.5vw,42px);align-items:start}.screening{min-width:0}.stage{background:#080a09;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:12px;display:grid;place-items:center;isolation:isolate;box-shadow:0 14px 45px #0305034d}.image{--split:50%;position:absolute;inset:0;margin:auto;overflow:hidden;isolation:isolate}.still,.paint,.curtain{position:absolute;inset:0;width:100%;height:100%}.still{background-size:200% 100%;background-position:right center}.curtain{background-size:200% 100%;background-position:left center;clip-path:inset(0 calc(100% - var(--split)) 0 0)}.paint{pointer-events:none}.glass{border:1px solid #eff7ee66;box-shadow:inset 0 1px 2px #fafffa4d,inset 0 -1px 3px #d3ded126,0 3px 15px #02060338;background:linear-gradient(145deg,#9ca79a51,#242b26a3 55%,#737b7040);-webkit-backdrop-filter:blur(13px) saturate(1.18);backdrop-filter:blur(13px) saturate(1.18)}.badge{position:absolute;top:clamp(10px,1.3vw,22px);padding:6px 10px;border-radius:99px;font-size:clamp(10px,.78vw,13px);line-height:1.2;color:white;text-shadow:0 1px 2px #000;pointer-events:none}.badge.first{left:clamp(9px,1vw,17px)}.badge.last{right:clamp(9px,1vw,17px)}.divider{width:1px;background:#f5faeddd;box-shadow:0 0 10px #121a0e88;position:absolute;left:var(--split);top:0;bottom:0;pointer-events:none}.knob{width:clamp(39px,3.7vw,58px);height:clamp(39px,3.7vw,58px);border-radius:50%;display:grid;place-items:center;position:absolute;left:clamp(21px,var(--split),calc(100% - 21px));top:50%;transform:translate(-50%,-50%);pointer-events:none;color:white;transition:scale .18s ease}.knob svg,.icon svg{display:block}.scrubber{position:absolute;inset:0;width:100%;height:100%;margin:0;cursor:ew-resize;appearance:none;-webkit-appearance:none;background:transparent;opacity:0;touch-action:pan-y}.scrubber::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:1px;height:40px}.scrubber::-moz-range-thumb{width:1px;height:40px;border:0}.scrubber:focus-visible~.knob{outline:3px solid white;outline-offset:4px}.image:active .knob{scale:1.04}.info{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:17px 0 8px}.caption{min-width:0}.over,.index-title,.micro{font:520 10px/1.4 Geist,Arial,sans-serif;text-transform:uppercase;letter-spacing:.14em;color:var(--soft)}.caption h2{margin:3px 0 5px;font-size:clamp(25px,2.8vw,46px);font-weight:450;letter-spacing:-.065em;line-height:1.1}.caption p,.offer p{color:var(--soft);font-size:14px;line-height:1.5}.play{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:99px;min-height:42px;padding:0 15px;white-space:nowrap;font-size:13px}.play:disabled{cursor:default;opacity:.6}.index-title{font-weight:550;display:flex;justify-content:space-between;margin:0 3px 9px}.scene-list{display:grid;gap:3px}.scene{position:relative;display:flex;align-items:center;gap:11px;min-height:52px;background:transparent;border:1px solid transparent;border-radius:11px;text-align:left;padding:5px 8px;transition:background .2s,border-color .2s}.scene img{width:clamp(51px,5.7vw,90px);aspect-ratio:1.7;object-fit:cover;border-radius:5px;filter:brightness(.86)}.scene span{display:block}.scene .project{font-size:10px;color:var(--soft);letter-spacing:.05em}.scene .name{font-size:clamp(13px,1vw,17px);line-height:1.22;margin-top:3px;letter-spacing:-.02em}.scene[aria-current=true]{background:linear-gradient(120deg,#c3d4b61e,#dce7d00b);border-color:#c9d7be46;box-shadow:inset 0 1px #ffffff0e}.scene[aria-current=true] img,.scene:hover img{filter:none}.scene:hover{background:#ffffff0b}.offer{margin:clamp(32px,5vw,80px) 0;display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--hair);padding-top:clamp(25px,3.5vw,50px)}.offer h2{margin:4px 0 8px;font-size:clamp(31px,4vw,64px);line-height:1;font-weight:435;letter-spacing:-.07em}.offer p{max-width:53ch}.cta{display:inline-flex;min-height:46px;align-items:center;gap:14px;justify-content:center;border-radius:99px;padding:0 21px;color:white;font-size:14px;flex:none}.end{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--hair);padding-block:20px 28px;font-size:13px}.status{padding-top:8px}
@media(min-width:1700px){.stage{max-height:65vh}}
@media(max-width:850px){.room{grid-template-columns:1fr}.index{margin-top:16px}.scene-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.scene{padding:6px;gap:7px}.intro{margin-top:29px}.index-title{margin-bottom:8px}}
@media(max-width:580px){.bar{height:54px}.top-links a:last-child{display:none}.intro{display:block;margin:24px 0 17px}.intro h1{font-size:clamp(54px,13vw,72px)}.intro p{margin-top:10px;max-width:37ch;font-size:13px}.stage{border-radius:9px}.info{padding-top:12px}.caption h2{font-size:29px}.caption p{font-size:13px}.play{padding:0 11px;min-height:38px}.scene-list{grid-template-columns:repeat(2,minmax(0,1fr))}.scene img{width:clamp(40px,12vw,65px)}.offer{display:block}.cta{margin-top:16px}.badge{padding:4px 7px}.index{margin-top:14px}.over,.index-title,.micro{font-size:9px}.scene .project{font-size:9px}.scene .name{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
.source{position:absolute;width:1px;height:1px;left:0;bottom:0;opacity:0;pointer-events:none}.icon[hidden],.icon svg[hidden]{display:none}.stage[data-portrait=true]{background:radial-gradient(ellipse at center,#242925,#0c0f0c 75%)}
@media(max-width:580px){.stage[data-portrait=true]{aspect-ratio:1.12}} @media(max-width:370px){.stage[data-portrait=true] .badge{font-size:8px}}
.stage[data-portrait=true]::before{content:"";position:absolute;inset:-30px;background:var(--backdrop) center / cover;filter:blur(28px) saturate(.72) brightness(.30);pointer-events:none;z-index:-1}.badge{z-index:1}.intro h1 em{margin-left:.035em}
/* Signature collection */
.collection{margin-block:clamp(30px,5vw,72px);padding-top:clamp(20px,3vw,42px);border-top:1px solid var(--hair)}
.collection h2{margin:0 0 16px;font-size:clamp(21px,2.3vw,34px);font-weight:450;letter-spacing:-.045em}
.lut-list{display:flex;flex-wrap:wrap;gap:10px 12px;max-width:1020px;margin:0;padding:0;list-style:none}
.lut-bubble{display:inline-flex;align-items:center;gap:.65em;position:relative;isolation:isolate;overflow:hidden;border-radius:100vmax;min-height:42px;padding:.55em 1.14em .55em .77em;color:#f1f1ea;letter-spacing:.005em;font-size:14px;border:1px solid rgb(var(--tint)/.36);background:radial-gradient(100% 160% at 8% 2%,rgb(var(--tint)/.25),transparent 66%),linear-gradient(162deg,rgb(var(--glint)/.14),rgb(var(--tint)/.055) 52%,rgb(var(--tint)/.16));box-shadow:inset 0 1px 0 rgb(255 255 255/.22),inset 0 -1px 4px rgb(var(--tint)/.10),0 4px 10px #080a091c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .3s ease,border-color .3s ease}
.lut-bead{width:16px;height:16px;flex:none;border-radius:50%;background:radial-gradient(ellipse at 33% 24%,#ffffffea 0%,transparent 23%),radial-gradient(ellipse at 68% 85%,rgb(var(--glint)/.95),transparent 61%),radial-gradient(ellipse at 38% 34%,rgb(var(--tint)),rgb(var(--tint)/.68) 57%,#111713 120%);box-shadow:inset 0 0 1px 1px rgb(255 255 255/.38),0 0 8px rgb(var(--tint)/.15)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.lut-bubble:hover{transform:translateY(-2px);border-color:rgb(var(--glint)/.65)}}
@media(max-width:500px){.intro h1{font-size:clamp(41px,10.5vw,54px)}.lut-list{gap:8px}.lut-bubble{min-height:36px;font-size:13px}.lut-bead{width:14px;height:14px}}

.collection.has-pack{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4.4vw,74px);align-items:center}.pack-art{display:block;overflow:hidden;border-radius:12px}.pack-art img{display:block;width:100%;height:auto}.pack-looks{min-width:0}.pack-looks h2{max-width:17ch;margin-bottom:22px}.pack-looks .lut-list{gap:9px}.pack-looks .lut-bubble{font-size:clamp(12px,.9vw,15px)}@media(max-width:760px){.collection.has-pack{grid-template-columns:1fr;gap:21px}.pack-looks h2{max-width:none;margin-bottom:13px}}

/* Keep the filter and its moving comparison in the same view. */
.room {
  grid-template-columns:minmax(0,1fr) minmax(265px,.37fr);
  column-gap:clamp(22px,3.5vw,60px);
  align-items:start;
}
.screening {grid-row:1;grid-column:1;scroll-margin-block-start:18px}
.look-index {
  grid-row:1;grid-column:2;display:grid;align-content:start;
  gap:clamp(14px,1.6vw,22px);min-width:0;
}
.look-index h2,.case-studies h2 {font:455 clamp(23px,2.1vw,34px)/1.1 Geist,sans-serif;letter-spacing:-.055em;margin:0}
.look-index h2 em,.case-studies h2 em {font:italic 400 1.02em/.97 Georgia,serif;letter-spacing:-.06em;color:var(--sage)}
.look-index .lut-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 8px}
.lut-list li {list-style:none;min-width:0}
.look-index .lut-bubble {
  width:100%;justify-content:flex-start;gap:8px;text-align:left;white-space:nowrap;
  padding:8px clamp(8px,1.1vw,18px);min-height:41px;
  font:520 clamp(12px,.92vw,15px)/1.2 Geist,sans-serif;
  transition:transform .22s cubic-bezier(.2,.74,.24,1.2),border-color .2s,box-shadow .2s;
}
.lut-bubble[aria-pressed="true"] {
  border-color:rgb(var(--glint)/.9);
  background:radial-gradient(ellipse at 20% 0%,rgb(var(--glint)/.28),transparent 70%),linear-gradient(145deg,rgb(var(--tint)/.35),rgb(var(--tint)/.12));
  box-shadow:inset 0 1px 2px #fffa,inset 0 -1px 3px rgb(var(--tint)/.35),0 0 10px rgb(var(--tint)/.12);
}
.lut-bubble:focus-visible {outline:2px solid rgb(var(--glint));outline-offset:3px}
.case-studies {border-top:1px solid var(--hair);margin-block:clamp(28px,4vw,64px);padding-block-start:clamp(18px,2.5vw,36px)}
.case-studies h2 {margin-bottom:15px}
.case-studies .scene-list {grid-template-columns:repeat(3,minmax(0,1fr));gap:5px 14px}
@media(min-width:851px){.look-index {align-self:center; padding-bottom:clamp(20px,4vw,66px)}}
@media(max-width:850px){
  .room {display:flex;flex-direction:column;gap:17px}
  .look-index {margin:0;display:block;width:100%}
  .look-index h2 {font-size:21px; margin:0 0 11px}
  .look-index .lut-list {display:flex;flex-wrap:wrap;gap:6px}
  .look-index .lut-bubble {min-height:36px;padding:6px 11px;width:auto;font-size:13px}
  .screening {width:100%;scroll-margin-block-start:8px}
  .screening {order:2}
  .case-studies .scene-list {grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
}
@media(max-width:480px){
  .room {gap:14px}
  .look-index .lut-list {gap:5px}
  .look-index .lut-bubble {gap:5px;padding:6px 9px;min-height:33px;font-size:12px}
  .look-index .lut-bead {width:11px;height:11px}
}