:root{--octo-blue:#213d92;--octo-lilac:#aab9ef;--octo-pink:#f4e6e4;--octo-orange:#ef6a2d;--octo-green:#27a273;--ink:#11131a;--paper:#f4f1eb}
*{box-sizing:border-box}.octo-case{background:var(--paper);color:var(--ink)}.octo-case .site-header{background:rgba(10,10,12,.94)}.section{padding:clamp(100px,11vw,210px) 0}.eyebrow{font-size:11px;letter-spacing:.13em;text-transform:uppercase}.lead{font-size:clamp(24px,2vw,38px);line-height:1.18}.section-head{display:grid;grid-template-columns:2fr 8fr 2fr;gap:24px;margin-bottom:clamp(70px,8vw,140px)}.section-head .eyebrow{grid-column:1}.section-head h2{grid-column:2;margin:0;font-size:clamp(62px,7vw,126px);line-height:.9;letter-spacing:-.055em}.section-head--wide h2{grid-column:2/-1;max-width:1300px}
.hero{position:relative;min-height:calc(100svh - var(--header-h));overflow:hidden;background:var(--octo-lilac);isolation:isolate}.hero__wash{position:absolute;z-index:0;inset:auto -12vw -30vw auto;width:75vw;height:75vw;border-radius:50%;background:radial-gradient(circle,#d7dcfa,transparent 62%);opacity:.72}.hero__tentacles{position:absolute;z-index:1;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.hero__tentacle-body{fill:var(--octo-blue);stroke:none}.hero__top,.hero__body{position:relative;z-index:2}.hero__top{padding-top:clamp(35px,5vw,80px)}.hero__top>p,.number{font-size:11px;letter-spacing:.12em;text-transform:uppercase}.hero .hero__project-title{margin:20px 0 0;color:white;font-size:clamp(108px,15.8vw,272px);font-weight:400;line-height:.82;letter-spacing:-.065em}.hero__body{display:grid;grid-template-columns:7fr 5fr;gap:5vw;align-items:end;min-height:720px;padding-top:7vw;padding-bottom:6vw}.hero__copy{color:white;text-shadow:0 1px 18px rgba(22,42,105,.14)}.hero__copy h2{margin:28px 0;font-size:clamp(50px,5.4vw,96px);font-weight:400;line-height:.92;letter-spacing:-.05em}.hero__copy>p:not(.number){max-width:620px;font-size:clamp(17px,1.2vw,22px)}.hero__product{margin:0}.hero__product img{display:block;width:100%;mix-blend-mode:multiply}.hero figcaption,figure figcaption{margin-top:10px;font-size:11px;color:#6f7078}.hero .text-link--dark{color:white}
.case-index{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid #cac7c0}.case-index a{display:flex;gap:18px;padding:26px 20px;border-right:1px solid #cac7c0;color:inherit;text-decoration:none}.case-index span{font-size:10px;color:#777}
.context{background:#fff}.context__grid{display:grid;grid-template-columns:5fr 5fr;gap:8vw;margin-left:16.666%}.context__grid>p:last-child{max-width:620px;font-size:18px;line-height:1.55}.chain{display:grid;grid-template-columns:repeat(6,1fr);margin:100px 0 0;padding:0;border-top:1px solid;list-style:none;counter-reset:item}.chain li{min-height:180px;padding:22px 22px;border-right:1px solid #d4d4d4;font-size:20px}.chain li::before{counter-increment:item;content:"0" counter(item);display:block;margin-bottom:50px;font-size:11px;color:#777}
.idea{background:var(--octo-blue);color:white}.idea__grid{display:grid;grid-template-columns:7fr 5fr;gap:7vw;align-items:center}.idea__copy h2{margin:20px 0 50px;font-size:clamp(70px,8vw,144px);line-height:.86;letter-spacing:-.06em}.idea__copy>p:last-child{max-width:700px;color:#cbd3f3}.idea__symbol{text-align:center}.idea__symbol img{width:100%;filter:brightness(0) invert(1)}.idea__symbol p{margin-top:30px;letter-spacing:.12em;text-transform:uppercase}
.meaning{background:var(--octo-pink)}.meaning__grid{display:grid;grid-template-columns:6fr 5fr;gap:8vw;align-items:center}.meaning__poster img{width:100%}.meaning__text{font-size:22px;line-height:1.5}.meaning__text blockquote{margin:70px 0 0;padding-top:30px;border-top:1px solid;font-size:clamp(36px,4vw,72px);line-height:1}
.identity{background:#eef2ff}.identity__gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:5vw 24px;align-items:center}.identity__gallery figure{margin:0}.identity__gallery img{display:block;width:100%}.identity__logo{grid-column:1/span 4}.identity__emboss{grid-column:7/span 6}.identity__underwater{grid-column:1/span 8;width:85%}.identity__sheets{grid-column:9/span 4;width:135%;margin-left:-20%}.identity__logo img{background:transparent}.identity__logo figcaption{margin-top:38px}.identity__sheets img{mix-blend-mode:multiply}
.identity__appliance--controls{grid-column:1/span 6}.identity__appliance--machine{grid-column:7/span 6}.identity__appliance img{height:auto;object-fit:contain}
.packaging{background:white}.packaging__head{display:grid;grid-template-columns:2fr 6fr 4fr;gap:24px;align-items:end;margin-bottom:10vw}.packaging__head h2{margin:0;font-size:clamp(80px,10vw,180px);line-height:.82;letter-spacing:-.065em}.packaging__head>p:last-child{font-size:20px;line-height:1.5}.packaging__gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:7vw 24px;align-items:center}.packaging__gallery figure{margin:0}.packaging__gallery img{width:100%;display:block}.packaging__tubes{grid-column:1/span 8}.packaging__box{grid-column:9/span 4}.packaging__powder{grid-column:1/span 4}.packaging__pods{grid-column:6/span 7}.packaging__gel{grid-column:1/span 5}.packaging__family{grid-column:7/-1}.packaging__character{grid-column:2/span 5}.packaging__laundry{grid-column:7/-1}.packaging__powder img{mix-blend-mode:multiply}
.result{background:#08090c;color:white}.result__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,72px);align-items:center}.result__copy{min-width:0}.result__copy h2{margin:24px 0 32px;font-size:clamp(54px,5.2vw,96px);line-height:.95;letter-spacing:-.045em}.result__copy h2+.lead{margin-top:1em}.result__copy>p:not(.eyebrow){color:#c8c8ca}.result__copy .octo-result-lead{font-size:clamp(24px,1.7vw,30px);line-height:1.3}.result__visual{width:100%;max-width:1086px;margin:0;justify-self:end}.result__visual img{width:100%;height:auto;display:block;object-fit:contain}.result figcaption{color:#8d8d92}.result .button{margin-top:30px}
.result-wide-media{width:100%;margin:0;background:#08090c;line-height:0;overflow:hidden}
.result-wide-media img{display:block;width:100%;height:auto;max-width:none}
.credits{background:var(--octo-pink)}.credits__grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid}.credits article{padding:28px 40px 80px 0;border-right:1px solid #c9c2bd}.credits article+article{padding-left:40px}.credits span{font-size:10px;color:#777}.credits h3{margin:60px 0 25px;font-size:clamp(34px,3vw,56px);line-height:.95}.credits p{max-width:480px;line-height:1.5}.case-contact{padding-top:clamp(110px,11vw,180px)}
@media(max-width:900px){.section{padding:90px 0}.section-head,.packaging__head{display:block}.section-head h2{margin-top:24px}.hero__top{display:block}.hero__body,.idea__grid,.meaning__grid,.result__grid{grid-template-columns:1fr}.hero__body{padding-top:60px}.case-index{grid-template-columns:repeat(3,1fr)}.context__grid{grid-template-columns:1fr;margin-left:0}.chain{grid-template-columns:1fr 1fr}.idea__symbol{margin-top:70px}.identity__logo{grid-column:1/span 7}.identity__emboss{grid-column:5/-1}.identity__underwater{grid-column:1/-1;width:100%}.identity__sheets{grid-column:5/-1;width:100%;margin-left:0}.identity__appliance--controls,.identity__appliance--machine{grid-column:1/-1}.packaging__head>p:last-child{margin-top:35px}.packaging__tubes,.packaging__gel,.packaging__family,.packaging__character,.packaging__laundry{grid-column:1/-1}.packaging__box{grid-column:6/-1}.packaging__powder{grid-column:1/span 6}.packaging__pods{grid-column:3/-1}.credits__grid{grid-template-columns:1fr}.credits article,.credits article+article{padding:30px 0;border-right:0;border-bottom:1px solid}}
@media(max-width:560px){.case-index{grid-template-columns:1fr 1fr}.hero .hero__project-title{font-size:31vw}.hero__body{min-height:auto}.hero__copy h2{font-size:48px}.section-head h2,.idea__copy h2,.packaging__head h2,.result__copy h2,.contact h2{font-size:54px}.chain{grid-template-columns:1fr}.identity__gallery,.packaging__gallery{display:block}.identity__gallery figure,.packaging__gallery figure{margin-bottom:70px}}
@media(max-width:760px){.hero__wash{opacity:.55}}
@media(prefers-reduced-motion:reduce){.hero__tentacles{transform:none!important}}

/* OCTO page visual draft adjustments */
.octo-intellect-label,
.octo-underwater-caption,
.octo-sheets-caption,
.octo-context-eyebrow,
.octo-context-title,
.octo-context-lead,
.octo-result-eyebrow,
.octo-result-title,
.octo-result-lead,
.octo-logo-image,
#case-title,
.hero__project-title,
.identity__underwater .octo-underwater-image,
.identity__sheets .octo-sheets-image {
  transform: none;
}

  @media (min-width: 1200px) {
  .hero__project-title,
  #case-title {
    transform: translateX(-6px) translateY(22px);
  }

  .octo-context-eyebrow {
    width: 248px;
    transform: translateX(-2px);
    transform-origin: left top;
  }

  .octo-context-title {
    width: 1011px;
    transform: translateX(-4px);
    transform-origin: left top;
  }

  .octo-context-lead {
    width: 581px;
    transform: translateX(20px);
    transform-origin: left top;
  }

  .octo-intellect-label {
    display: inline-block;
    margin: 0;
    transform: translate(-70.48px, 15.102px) scale(1.4748);
    transform-origin: left top;
    line-height: 1;
    white-space: nowrap;
  }

  .identity__sheets {
    width: 682px;
    height: 504.359px;
    margin-left: 0;
    position: relative;
    overflow: visible;
  }

  .identity__sheets .octo-sheets-image {
    width: 682px;
    height: 477px;
    object-fit: cover;
    position: absolute;
    left: -112.9px;
    top: -37.2px;
    display: block;
  }

  .identity__underwater {
    width: 879px;
    height: 455.359px;
    position: relative;
    overflow: visible;
  }

  .identity__underwater .octo-underwater-image {
    width: 709.695px;
    height: 402.57px;
    object-fit: cover;
    transform: none;
    position: absolute;
    left: -0.048px;
    top: -24.485px;
    transform-origin: left top;
    display: block;
  }

  .identity__underwater .octo-underwater-caption {
    width: 879px;
    position: absolute;
    left: 0;
    top: 409px;
    display: inline-block;
  }

  .identity__sheets .octo-sheets-caption {
    width: 340px;
    position: absolute;
    left: 78.3px;
    top: 432.9px;
    transform-origin: left top;
    margin: 0;
    display: inline-block;
    height: 18px;
    overflow: hidden;
    line-height: 1;
  }

  .identity__logo .octo-logo-image {
    width: 505px;
    height: 129px;
    object-fit: contain;
    transform: translateY(10px);
  }

  .packaging__powder {
    width: 501.328px;
    height: 528.047px;
    position: relative;
    overflow: visible;
    transform: translateY(-16px);
  }

  .packaging__powder > img {
    width: 501.312px;
    height: 593.109px;
    object-fit: cover;
    position: absolute;
    left: 23.1px;
    top: -13.987px;
    margin: 0;
    display: block;
    max-width: none;
  }

  .packaging__powder > figcaption {
    position: absolute;
    left: 0;
    top: 562.428px;
    width: 501.328px;
    height: 16.719px;
    margin: 0;
    overflow: hidden;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
  }

  .packaging__gel,
  .packaging__character {
    position: relative;
    overflow: visible;
    transform: translateY(-16px);
  }

  .packaging__gel {
    width: 632.656px;
    height: 382.578px;
  }

  .packaging__gel > img {
    position: absolute;
    left: 0.011px;
    top: -36.944px;
    width: 656.634px;
    height: 369.346px;
    max-width: none;
    object-fit: cover;
    display: block;
  }

  .packaging__gel > figcaption {
    position: absolute;
    left: 0;
    top: 346.459px;
    width: 632.656px;
    height: 16.719px;
    margin: 0;
    overflow: hidden;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
  }

  .packaging__character {
    width: 632.672px;
    height: 379.672px;
  }

  .packaging__character > img {
    position: absolute;
    left: -131.271px;
    top: -110.037px;
    width: 764.015px;
    height: 426.226px;
    max-width: none;
    object-fit: cover;
    display: block;
  }

  .packaging__character > figcaption {
    position: absolute;
    left: -131.3px;
    top: 325.353px;
    width: 632.672px;
    height: 16.719px;
    margin: 0;
    overflow: hidden;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
  }
}

@media (max-width: 1199px) {
  .identity__sheets,
  .identity__underwater,
  .identity__logo .octo-logo-image,
  .identity__underwater .octo-underwater-image,
  .identity__sheets .octo-sheets-image,
  .identity__underwater .octo-underwater-caption,
  .identity__sheets .octo-sheets-caption,
  .identity__logo .octo-logo-image,
  .octo-intellect-label,
  .octo-context-eyebrow,
  .octo-context-title,
  .octo-context-lead,
  .hero__project-title,
  #case-title,
  .result__copy .octo-result-title,
  .result__copy .octo-result-eyebrow,
  .result__copy .octo-result-lead {
    transform: none;
  }

  .identity__sheets,
  .identity__underwater {
    width: auto;
    margin-left: 0;
  }

  .identity__underwater .octo-underwater-image,
  .identity__sheets .octo-sheets-image,
  .identity__logo .octo-logo-image {
    width: 100%;
    height: auto;
  }

  .identity__sheets,
  .identity__underwater,
  .packaging__powder,
  .packaging__gel,
  .packaging__character {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    transform: none;
  }

  .identity__sheets .octo-sheets-image,
  .identity__underwater .octo-underwater-image,
  .packaging__powder > img,
  .packaging__gel > img,
  .packaging__character > img {
    position: static;
    left: auto;
    top: auto;
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: cover;
  }

  .packaging__gel > figcaption,
  .packaging__character > figcaption {
    width: auto;
    height: auto;
    position: static;
    left: auto;
    top: auto;
    overflow: visible;
    line-height: normal;
    margin-top: 10px;
    white-space: normal;
  }

  .identity__underwater .octo-underwater-caption,
  .identity__sheets .octo-sheets-caption {
    width: auto;
    height: auto;
    transform: none;
    position: static;
    left: auto;
    top: auto;
    overflow: visible;
    white-space: normal;
    line-height: normal;
  }

  .packaging__powder > figcaption {
    width: auto;
    height: auto;
    position: static;
    left: auto;
    top: auto;
    overflow: visible;
    line-height: normal;
    margin-top: 10px;
    white-space: normal;
  }

  #contact-title {
    width: auto;
    max-width: 980px;
    margin-left: 0;
    margin-top: 0;
  }
}

@media (min-width: 1200px) {
  #contact-title {
    width: 794.5px;
    max-width: none;
    margin-left: -0.2px;
    margin-top: 0.2px;
    margin-bottom: 50px;
  }
}