@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&display=swap');
:root{--ink:#20211d;--paper:#f4f3ee;--line:#d6d5ce;--orange:#f3ab49;--pad:clamp(24px,5vw,86px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #dc9b43;outline-offset:6px}p,h1,h2,h3{margin:0}img{display:block;max-width:100%}.skip{position:fixed;top:-80px;left:20px;background:white;padding:16px;z-index:100}.skip:focus{top:16px}
.header{height:84px;display:flex;justify-content:space-between;align-items:center;padding:0 var(--pad);position:absolute;top:0;left:0;width:100%;z-index:5;color:#fff;border-bottom:1px solid #ffffff2e}.wordmark{display:inline-flex;align-items:center;font-size:31px;letter-spacing:-1.6px;font-weight:600;gap:2px}.mango-mark{width:38px;height:38px;object-fit:contain;margin:0 3px;transform:rotate(-12deg)}.labs{font-size:20px;letter-spacing:-.9px;font-weight:450;padding-top:4px}nav{display:flex;gap:35px;font-size:13px;align-items:center}nav a{padding:9px 0}.nav-contact{display:flex;gap:32px}
.hero{min-height:820px;height:100svh;max-height:1160px;position:relative;background:#292722;isolation:isolate;overflow:hidden;color:#fff}.hero-media,.hero-shade{position:absolute;inset:0;z-index:-1}.hero-media{overflow:hidden}.reel{position:relative;overflow:hidden}.reel img,.reel video{width:100%;height:100%;object-fit:cover}.reel video{position:absolute;inset:0;opacity:0}.reel.has-video video{opacity:1}.hero-film{position:absolute;inset:0;width:100%;height:100%;background:#292822}.hero-film picture{display:block;width:100%;height:100%}.hero-film video,.hero-film img{object-position:center}.hero-shade{background:linear-gradient(90deg,rgba(12,15,14,.66),rgba(12,15,14,.13) 65%),linear-gradient(0deg,rgba(9,12,11,.38),transparent 56%),linear-gradient(180deg,rgba(9,12,11,.24),transparent 24%)}.hero-content{position:absolute;left:var(--pad);right:var(--pad);bottom:155px}h1{font-size:clamp(48px,5.5vw,89px);line-height:1.03;font-weight:450;letter-spacing:-.052em;max-width:900px}h1>span{color:#ffd59b}.button{display:inline-flex;gap:65px;align-items:center;padding:17px 22px;font-size:13px;margin-top:35px;border-radius:3px;transition:background .2s,transform .2s}.button-light{background:var(--paper);color:var(--ink)}.button:hover{background:#fff;transform:translateY(-2px)}
.manifesto{height:185vh;min-height:1100px;padding:0 var(--pad)}.manifesto-sticky{position:sticky;top:0;min-height:780px;height:100vh;max-height:1100px;display:flex;align-items:center;padding:75px 0}.statement{font-size:clamp(35px,4.4vw,69px);font-weight:450;line-height:1.2;letter-spacing:-.045em;max-width:1320px}.statement .word{transition:color .18s;color:#c9c9c0}.statement .word.read{color:var(--ink)}
/* A continuous sequence: product, story, commerce. */
.process{background:var(--paper);padding:80px var(--pad) 130px}.process-grid{--process-gap:clamp(30px,4vw,64px);list-style:none;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--process-gap);margin:0;padding:0}.process-step{min-width:0;position:relative}.step-number{position:relative;z-index:1;display:flex;align-items:center;width:58px;height:28px;background:var(--paper);font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:#626b55}.process-step:not(:last-child):before{content:'';position:absolute;left:48px;right:calc(16px - var(--process-gap));top:14px;height:1px;background:#b9c0ad}.process-step:not(:last-child):after{content:'';position:absolute;right:calc(16px - var(--process-gap));top:14px;width:6px;height:6px;border-top:1px solid #b9c0ad;border-right:1px solid #b9c0ad;transform:translateY(-50%) rotate(45deg)}.process h2{font-size:clamp(32px,3.5vw,54px);font-weight:450;line-height:1.05;letter-spacing:-.06em;margin:36px 0 22px}.process p{font-size:16px;line-height:1.7;max-width:350px;color:#646b5b;text-wrap:pretty}
/* The closing wordmark is also the stage for the mango's arrival. */
.site-footer{background:#22291f;color:#eff0e4;padding:58px var(--pad) 28px;overflow:hidden;overflow:clip}.footer-email{display:inline-flex;align-items:center;gap:24px;font-size:17px;letter-spacing:-.035em;color:#e1e7d4}.footer-email>span{transition:transform .2s}.footer-email:hover>span{transform:translate(3px,-3px)}.footer-brand{display:flex;align-items:center;justify-content:center;gap:1.2vw;width:100%;margin:0 0 48px;isolation:isolate;--nudge:clamp(5px,.8vw,13px)}.footer-mango{display:block;flex:0 0 clamp(44px,15vw,246px);width:clamp(44px,15vw,246px);position:relative;z-index:1}.footer-mango img{width:100%;height:auto;transform:rotate(-10deg);transform-origin:50% 70%}.footer-name{display:flex;align-items:baseline;gap:1.1vw;font-size:clamp(48px,18vw,300px);font-weight:550;line-height:1;letter-spacing:-.075em;white-space:nowrap;transform-origin:0 90%;color:#e7eccf}.footer-labs{font-size:.48em;font-weight:400;letter-spacing:-.07em}.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid #535e49;padding-top:24px;color:#bac2ae;font-size:11px;line-height:1.5}.footer-brand.is-rolling .footer-mango img{animation:mango-roll 1.5s both}.footer-brand.is-rolling .footer-name{animation:mango-nudge 1.5s both}
@keyframes mango-roll{0%{transform:translateX(-170%) rotate(-295deg)}60%{transform:translateX(0) rotate(-10deg);animation-timing-function:ease-out}70%{transform:translateX(35%) rotate(8deg)}82%{transform:translateX(-4%) rotate(-17deg)}94%{transform:translateX(1%) rotate(-7deg)}100%{transform:translateX(0) rotate(-10deg)}}
@keyframes mango-nudge{0%,64%{transform:translateX(0) rotate(0)}74%{transform:translateX(var(--nudge)) rotate(.65deg)}87%{transform:translateX(-2px) rotate(-.2deg)}100%{transform:translateX(0) rotate(0)}}
.paused .statement .word{transition:none}.paused .site-footer *{animation-play-state:paused!important}.footer-brand:focus-visible .footer-mango img{animation:none!important}.footer-brand:focus-visible .footer-name{animation:none!important}
@media(min-width:1700px){.hero-content{bottom:170px}.footer-brand{gap:22px}.footer-name{gap:20px}}
@media(max-width:1000px){.process{padding-top:64px;padding-bottom:90px}.process h2{font-size:clamp(30px,3.5vw,36px)}.process p{font-size:14px}}
@media(max-width:900px){.hero{min-height:760px}.header{height:75px}nav{gap:23px}.hero-content{bottom:145px}.manifesto{min-height:1000px;height:170vh}.manifesto-sticky{min-height:660px}}
@media(max-width:700px){.process{padding-top:32px;padding-bottom:76px}.process-grid{--process-gap:48px;grid-template-columns:1fr;padding-left:56px}.process-step{position:relative}.step-number{position:absolute;left:-56px;top:0;width:26px;height:30px;justify-content:center;font-size:11px}.process-step:not(:last-child):before{left:-43px;right:auto;top:38px;bottom:calc(8px - var(--process-gap));width:1px;height:auto}.process-step:not(:last-child):after{display:none}.process h2{font-size:clamp(32px,8vw,42px);margin:0 0 18px}.process p{font-size:15px;max-width:420px}.site-footer{padding-top:40px;padding-bottom:24px}.footer-brand{margin:0 0 34px}.footer-bottom{align-items:flex-start;flex-direction:column;gap:20px;padding-top:22px}.footer-email{font-size:16px}.footer-bottom>span{font-size:10px}}
@media(max-width:600px){.header{height:74px}.wordmark{font-size:27px}.mango-mark{width:33px;height:33px}.labs{font-size:18px}nav>a:not(.nav-contact){display:none}.nav-contact{gap:15px;font-size:12px;min-height:44px;align-items:center}.hero{height:94svh;min-height:530px;max-height:950px}.hero-content{bottom:clamp(32px,6.5svh,68px)}h1{font-size:clamp(43px,10.7vw,63px);line-height:1.07;letter-spacing:-.047em}.button{margin-top:28px;padding:15px 19px;gap:48px}.manifesto{min-height:1000px;height:160svh}.manifesto-sticky{min-height:640px;height:100svh;padding:65px 0}.statement{font-size:35px;line-height:1.22;letter-spacing:-.045em}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.manifesto{height:auto;min-height:0}.manifesto-sticky{position:relative;height:auto;min-height:0;padding:85px 0}.statement .word{color:var(--ink)}}



@media(max-width:600px){.hero-shade{background:linear-gradient(0deg,rgba(10,13,12,.81),rgba(10,13,12,.57) 46%,rgba(10,13,12,.12) 77%,rgba(10,13,12,.28))}}

/* Keep the headline and contact link within shorter screens. */
@media (min-width:601px) and (max-height:819px){
  .hero{min-height:600px}
  .hero-content{bottom:clamp(84px,12svh,108px)}
  .hero-content h1{font-size:clamp(44px,min(5.5vw,9.6svh),76px)}
}

/* Illustrations expand inside the sentence, with each line sized for its final state. */
.statement {
  width: 100%;
  position: relative;
  line-height: 1.24;
}
.statement .word,
.illustrated-phrase {
  display: inline-block;
  white-space: nowrap;
}
.statement-line {
  display: block;
  white-space: nowrap;
}
.illustrated-phrase {
  --art-space: 1.12em;
  --art-height: 1.22em;
  --art-in-angle: -12deg;
  --art-settle-angle: 3deg;
}
.illustrated-phrase:has(img[src*="bag"]) {
  --art-space: 1.24em;
  --art-height: 1.08em;
  --art-in-angle: 11deg;
  --art-settle-angle: -3deg;
}
.inline-art {
  position: relative;
  display: inline-block;
  width: var(--art-space);
  height: 0;
  vertical-align: baseline;
}
.inline-art img {
  position: absolute;
  left: .13em;
  top: -.39em;
  width: auto;
  height: var(--art-height);
  max-width: none;
  transform: translateY(-50%);
  transform-origin: 48% 72%;
  pointer-events: none;
}
.statement.is-animated .inline-art {
  width: 0;
  transition: width 420ms cubic-bezier(.22, .8, .2, 1);
}
.statement.is-animated .inline-art img {
  opacity: 0;
  transform: translateY(-35%) rotate(var(--art-in-angle)) scale(.66);
  transition: opacity 100ms ease-out, transform 150ms ease-out;
}
.statement.is-animated .is-open .inline-art,
.statement.is-measuring.is-animated .inline-art { width: var(--art-space); }
.statement.is-animated .is-open .inline-art img {
  opacity: 1;
  transform: translateY(-50%);
  animation: studio-pop 470ms 55ms both;
}
@keyframes studio-pop {
  0% { opacity: 0; transform: translateY(-35%) rotate(var(--art-in-angle)) scale(.66); }
  58% { opacity: 1; transform: translateY(-53%) rotate(var(--art-settle-angle)) scale(1.065); }
  82% { transform: translateY(-49%) rotate(0) scale(.992); }
  100% { opacity: 1; transform: translateY(-50%); }
}
.statement.is-measuring .inline-art,
.paused .statement .inline-art,
.paused .statement .inline-art img { transition: none; }
.paused .statement .inline-art img { animation: none; }
@media (max-width: 600px) {
  .statement { font-size: clamp(29px, 8.4vw, 38px); line-height: 1.3; }
}

.hero-content h1 {
  font-size: clamp(59px, 6.1vw, 98px);
  line-height: 1.01;
  letter-spacing: -.06em;
}
.hero-description {
  max-width: 28em;
  margin-top: 23px;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.45;
  text-wrap: pretty;
  color: #fff;
}
.hero-content .button { margin-top: 27px; }
@media (max-width: 600px) {
  .hero-content h1 { font-size: clamp(42px, 10.6vw, 61px); }
  .hero-description { max-width: 22em; margin-top: 18px; }
}
@media (max-height: 520px) and (max-width: 1000px) and (orientation: landscape) {
  .header { height: 54px; }
  .hero { height: 100svh; min-height: 340px; }
  .hero-content { bottom: 22px; }
  .hero-content h1 { font-size: clamp(36px, 10svh, 48px); }
  .hero-description { margin-top: 10px; font-size: 15px; max-width: 30em; }
  .hero-content .button { margin-top: 14px; padding-block: 12px; }
}