/* Ivory, platinum, graphite and restrained bronze. Flat source-artwork collections. */
:root {
  --night:#3f4845;
  --cream:#faf9f5;
  --gold:#ad9373;
  --gold-deep:#80694c;
  --muted:#7b8278;
  --line:#a7afa335;
  --edge-gradient:linear-gradient(115deg,#e6e5df 0%,#f6f4ef 48%,#ddd8ce 100%)
}
body {
  color:#3f4845;
  background:#faf9f5
}
.eyebrow {
  color:#72776e
}
.portfolio-explorer {
  background:#faf9f5;
  border-radius:0
}
.portfolio-explorer>h2 {
  color:#3f4845
}
.portfolio-tabs {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:35px 0 55px;
  overflow:visible
}
.portfolio-tabs button {
  font:500 12px/1.5 var(--sans);
  display:flex;
  align-items:flex-start;
  gap:12px;
  text-align:left;
  padding:17px 14px;
  border:1px solid #c7cbc035;
  border-radius:3px;
  background:#eeede760;
  color:#70796d;
  white-space:normal;
  transition:background .3s,border-color .3s
}
.portfolio-tabs button span {
  font-size:8px;
  margin-top:4px;
  color:#989c92
}
.portfolio-tabs button[aria-selected=true] {
  background:#e8e8df;
  color:#3f4845;
  border-color:#adb59e
}
.portfolio-tabs button:hover {
  background:#e8e8df
}
.portfolio-panels article {
  grid-template-columns:.85fr 1.5fr;
  gap:6%;
  align-items:start;
  padding-top:15px
}
.portfolio-panel-copy {
  position:sticky;
  top:110px;
  padding-top:15px
}
.portfolio-panel-copy h2 {
  font:400 clamp(38px,3.8vw,59px)/1.08 var(--serif);
  letter-spacing:-.025em;
  color:#3f4845;
  overflow-wrap:normal
}
.portfolio-panel-copy h2 em {
  color:#80694c
}
.portfolio-panel-copy>p:not(.eyebrow) {
  font:14px/1.85 var(--sans);
  color:#697164;
  margin:24px 0
}
.portfolio-panel-copy .button {
  font:12px var(--sans);
  padding:16px 23px;
  border-radius:3px;
  color:#53614e;
  border-color:#9ca78e80;
  max-width:100%;
  gap:30px
}
.portfolio-panel-copy .disclosure {
  margin-top:32px;
  border-color:#bbc2b350
}
.portfolio-panel-copy .disclosure summary {
  font:12px/1.6 var(--sans);
  color:#62715a
}
.portfolio-panel-copy .disclosure>div {
  font:12px/1.85 var(--sans);
  color:#6c7565
}
.brand-gallery {
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  transform:none!important;
  rotate:none!important;
  box-shadow:none;
  overflow:visible
}
.brand-gallery-label {
  font:8px var(--sans);
  letter-spacing:.12em;
  color:#7d8773;
  padding:0 0 21px;
  gap:20px;
  border-bottom:1px solid #bdc5b535;
  margin-bottom:20px
}
.brand-logo-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}
.brand-logo-tile {
  min-width:0;
  position:relative;
  min-height:130px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:15px;
  padding:22px 12px 18px;
  background:linear-gradient(145deg,#f6f6f1,#efefe7);
  border:1px solid #c6cdba45;
  border-radius:5px;
  transition:background .4s,border-color .4s,box-shadow .4s
}
.brand-logo-tile:hover {
  background:#e8eadd;
  border-color:#aab79c;
  box-shadow:0 12px 30px #626d4d0c
}
.brand-logo-tile .logo-mark {
  width:100%;
  max-width:155px;
  height:58px;
  flex:none;
  mix-blend-mode:normal
}
.brand-logo-tile .logo-mark svg {
  width:100%!important;
  max-width:155px;
  height:58px!important;
  max-height:58px;
  display:block;
  filter:url(#logo-paper-remove)
}
.brand-tile-name {
  font:9px/1.5 var(--sans);
  color:#7a846e;
  text-align:center;
  max-width:145px
}
.gallery-source {
  font:9px/1.7 var(--sans);
  color:#8c9481;
  margin:22px 0 0
}
.brand-logo-tile .logo-mark[aria-label="NYX Professional Makeup"] svg,.brand-logo-tile .logo-mark[aria-label="SK-II"] svg,.brand-logo-tile .logo-mark[aria-label="MAC"] svg,.brand-logo-tile .logo-mark[aria-label="Campbell’s"] svg,.brand-logo-tile .logo-mark[aria-label="Eight O’Clock Coffee"] svg,.brand-logo-tile .logo-mark[aria-label="Eveready"] svg,.brand-logo-tile .logo-mark[aria-label="Pactiv"] svg,.brand-logo-tile .logo-mark[aria-label="Matrix"] svg,.brand-logo-tile .logo-mark[aria-label="Redken"] svg {
  filter:url(#logo-panel-remove)
}
.brand-gallery.perfume-editorial {
  position:relative;
  border-radius:150px 5px 5px 5px;
  overflow:hidden;
  background:#e8e8df
}
.perfume-portrait {
  height:490px;
  overflow:hidden
}
.perfume-portrait svg {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.perfume-caption {
  padding:30px 35px
}
.perfume-caption>span {
  font:8px var(--sans);
  letter-spacing:.13em;
  color:#7d8773
}
.perfume-caption h3 {
  font:37px/1.1 var(--serif);
  color:#3f4845;
  margin:18px 0
}
.perfume-caption p {
  font:12px/1.7 var(--sans);
  color:#707969
}
.office-frame {
  height:440px;
  border-radius:5px 140px 5px 5px
}
.office-view img {
  filter:saturate(.92);
  object-position:center
}
.city-slide img {
  filter:saturate(.92);
  object-position:center
}
.atlas-stage {
  height:510px
}
.city-slide {
  border-radius:150px 150px 4px 4px
}
.atlas-ring {
  border-radius:160px 160px 4px 4px;
  border-color:#b8c0ae75
}
.office-explorer {
  grid-template-columns:1.3fr .7fr;
  gap:40px 60px
}
.office-information {
  padding:0
}
.office-name {
  font-size:48px
}
.office-fact {
  color:#646f5c
}
.office-photo-note {
  color:#89917c
}
.office-heading h2 {
  color:#3f4845
}
.city-slide:after,.office-view:after {
  background:linear-gradient(transparent,#2f3835d9)
}
.film-poster,.trade-video {
  filter:saturate(.72)
}
.film-wash {
  background:linear-gradient(90deg,#faf9f5f5 0%,#faf9f5e8 30%,#faf9f591 52%,#faf9f500 76%),linear-gradient(0deg,#39433b3d,transparent 50%)
}
.stage-photo img,.image-editorial-visual img,.partnership-photo img,.subhero-media img {
  filter:saturate(.82)
}
.stage-copy>p:not(.eyebrow) {
  color:#646e5c
}
.stage-copy h3,.office-heading h2,.film-heading h1,.company-edit h2 {
  color:#3f4845
}
.company-edit-copy>p {
  color:#646e5c
}
.header nav a,.header nav.open>a {
  color:#4c5846
}
.profile-footer p,.profile-footer-main>div>p,.profile-footer .footer-office-group span {
  color:#67745b
}
.office-times {
  color:#536449
}
.header,.header.scrolled,.profile-footer {
  background:var(--edge-gradient)
}
.brand-conveyor {
  background:#efeee8
}
.conveyor-window {
  background:transparent
}
.operations-photo {
  transform:none
}
.tilt {
  rotate:none!important;
  transform:none!important
}
@media(max-width:1000px) {
  .brand-logo-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .portfolio-panels article {
    grid-template-columns:.8fr 1.2fr
  }
  .office-explorer {
    gap:35px;
    grid-template-columns:1fr 1fr
  }
  .office-frame {
    height:420px
  }
}
@media(max-width:640px) {
  .portfolio-tabs {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin:30px 0 40px
  }
  .portfolio-tabs button {
    font-size:10px;
    padding:13px 10px;
    gap:9px;
    min-width:0
  }
  .portfolio-panel-copy {
    position:static;
    padding:0;
    order:0
  }
  .portfolio-panel-copy h2 {
    font-size:39px;
    line-height:1.12
  }
  .portfolio-panel-copy>p:not(.eyebrow) {
    font-size:13px
  }
  .portfolio-panels article {
    display:flex;
    flex-direction:column;
    gap:32px;
    padding-top:0
  }
  .brand-gallery {
    width:100%;
    margin:0;
    order:1
  }
  .brand-logo-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }
  .brand-logo-tile {
    min-height:115px;
    padding:18px 10px 14px;
    gap:10px
  }
  .brand-logo-tile .logo-mark,.brand-logo-tile .logo-mark svg {
    max-width:125px;
    height:52px!important;
    max-height:52px
  }
  .brand-tile-name {
    font-size:8px
  }
  .brand-gallery-label {
    font-size:7px;
    line-height:1.7;
    gap:15px
  }
  .brand-gallery-label>span {
    max-width:50%
  }
  .perfume-portrait {
    height:320px
  }
  .perfume-caption {
    padding:25px
  }
  .perfume-caption h3 {
    font-size:31px
  }
  .office-explorer {
    grid-template-columns:1fr;
    gap:25px
  }
  .office-frame {
    height:320px;
    border-radius:5px 100px 5px 5px
  }
  .office-name {
    font-size:38px
  }
  .atlas-stage {
    height:400px
  }
  .city-slide {
    border-radius:140px 140px 4px 4px
  }
  .atlas-ring {
    border-radius:150px 150px 4px 4px
  }
  .film-wash {
    background:linear-gradient(90deg,#faf9f5ed,#faf9f5b5 55%,#faf9f565),linear-gradient(0deg,#faf9f588,transparent)
  }
  .perfume-editorial {
    border-top-left-radius:110px
  }
}
@media(prefers-reduced-motion:reduce) {
  .brand-logo-tile {
    transition:none
  }
}
.perfume-portrait svg { overflow: hidden; }
.perfume-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; border-radius: 0; }