/* Mangrove Studio · generated from the design file */

:root{--paper:#F3F3F1;--ink:#000;--graphite:#5E5E5B;--fog:#D6D6D2;--white:#FFF}
body{margin:0;background:var(--paper)}
#top{font-family:'Geist','Helvetica Neue',sans-serif;color:var(--ink);background:var(--paper);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
#top a{color:inherit}
.w{max-width:1360px;margin:0 auto;padding-inline:clamp(20px,4vw,56px);box-sizing:border-box}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px)}
.btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 26px;background:var(--ink);color:var(--white)!important;text-decoration:none;font-weight:500;font-size:16px;border-radius:2px;border:0;cursor:pointer;font-family:'Geist',sans-serif;transition:background .2s,opacity .2s}
.btn:hover{opacity:.86}
.btn-inv{background:var(--white);color:var(--ink)!important}
.lnk{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .3s}
.lnk:hover{background-size:0 1px}
#top a:focus-visible,#top button:focus-visible,#top summary:focus-visible,#top input:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@keyframes mgSide{0%,6%{stroke-dashoffset:110}26%,100%{stroke-dashoffset:0}}
@keyframes mgMid{0%,24%{stroke-dashoffset:50}32%,100%{stroke-dashoffset:0}}
@keyframes mgWater{0%{stroke-dashoffset:60}12%,100%{stroke-dashoffset:0}}
@keyframes mgFocus{0%{filter:blur(8px);opacity:0}14%,100%{filter:blur(0);opacity:1}}
.mg-side{stroke-dasharray:110;animation:mgSide 3.2s cubic-bezier(.16,1,.3,1) both}
.mg-mid{stroke-dasharray:50;animation:mgMid 3.2s cubic-bezier(.16,1,.3,1) both}
.mg-line{stroke-dasharray:60;animation:mgWater 3.2s cubic-bezier(.16,1,.3,1) both}
.mg-focus{animation:mgFocus 3.2s cubic-bezier(.16,1,.3,1) both}
@keyframes fanIn{from{filter:blur(18px);opacity:0;transform:translate(var(--x0),40px) rotate(0deg) scale(.92)}to{filter:blur(0);opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(var(--s))}}
@keyframes heroIn{from{filter:blur(12px);opacity:0;transform:translateY(18px)}to{filter:blur(0);opacity:1;transform:none}}
.h-line{display:block;animation:heroIn 1.1s cubic-bezier(.16,1,.3,1) both}
.spread{position:relative;height:clamp(440px,46vw,660px);margin-top:clamp(48px,6vw,96px)}
.ph{position:absolute;left:50%;top:0;width:300px;height:628px;margin-left:-150px;border-radius:44px;background:#000;padding:9px;box-sizing:border-box;box-shadow:0 40px 80px -30px rgba(0,0,0,.45);transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(var(--s));animation:fanIn 1.4s cubic-bezier(.16,1,.3,1) both;transform-origin:50% 100%}
.ph-in{width:282px;height:610px;border-radius:36px;overflow:hidden;background:#fff}
.ph-sc{width:390px;height:844px;transform:scale(.7231);transform-origin:top left}
.sw{position:relative;overflow:hidden;transition:background-color .6s cubic-bezier(.16,1,.3,1),color .6s}
.sw-word{position:absolute;right:-2vw;bottom:-0.2em;font-size:clamp(160px,24vw,380px);line-height:1;letter-spacing:-0.04em;white-space:nowrap;pointer-events:none;user-select:none}
.sw-deco{position:absolute;inset:0;pointer-events:none}
.sw-list button{display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:100%;text-align:left;background:none;border:0;border-top:1px solid currentColor;padding:15px 0 13px;color:inherit;cursor:pointer;opacity:.42;transition:opacity .25s;font-size:20px}
.sw-list button:hover{opacity:.8}
.sw-list button[aria-pressed="true"]{opacity:1}
.sw-phone{width:320px;height:669px;border-radius:48px;background:#000;padding:10px;box-sizing:border-box;box-shadow:0 50px 90px -40px rgba(0,0,0,.55)}
.sw-phone-in{width:300px;height:649px;border-radius:39px;overflow:hidden;background:#fff}
.sw-phone-sc{width:390px;height:844px;transform:scale(.7692);transform-origin:top left}
@keyframes swap{from{filter:blur(14px);opacity:.2;transform:scale(.985)}to{filter:blur(0);opacity:1;transform:none}}
.swap{animation:swap .55s cubic-bezier(.16,1,.3,1) both}
.work-img{width:100%;background-size:cover;background-position:center;background-color:var(--fog)}
.mini{width:240px;height:501px;border-radius:36px;background:#000;padding:8px;box-sizing:border-box;box-shadow:0 40px 70px -30px rgba(0,0,0,.5);flex:none}
.mini-in{width:224px;height:485px;border-radius:29px;overflow:hidden;background:#fff}
.mini-sc{width:390px;height:844px;transform:scale(.5744);transform-origin:top left}
details{border-top:1px solid var(--ink)}
details:last-child{border-bottom:1px solid var(--ink)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:26px 0;font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-0.02em}
summary::-webkit-details-marker{display:none}
summary .pm{flex:none;width:18px;height:18px;position:relative;top:2px}
summary .pm::before,summary .pm::after{content:"";position:absolute;left:0;right:0;top:8px;height:1.5px;background:currentColor;transition:transform .3s}
summary .pm::after{transform:rotate(90deg)}
details[open] summary .pm::after{transform:rotate(0)}
details p{margin:0 0 28px;max-width:640px;color:var(--graphite)}
.field{display:flex;flex-direction:column;gap:10px;border-bottom:1px solid #5A5A5A;padding-bottom:12px}
.field label{font-size:14px;color:#9A9A96}
.field input{background:transparent;border:0;color:#fff;font:inherit;font-size:22px;min-height:36px;outline:none}
.field input::placeholder{color:#5F5F5C}
.field:focus-within{border-bottom-color:#fff}
.field textarea{background:transparent;border:0;color:#fff;font:inherit;font-size:20px;line-height:1.35;min-height:56px;resize:vertical;outline:none;padding:0}
.field textarea::placeholder{color:#5F5F5C}
.field .opt{color:#6A6A66;margin-left:6px}
.form-btn{grid-column:1/-1}
@media (max-width:1100px){
.sw-grid{grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;row-gap:36px!important}
.sw-list{grid-column:1/-1;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 2px 6px}
.sw-list::-webkit-scrollbar{display:none}
.sw-list button{width:auto;flex:none;scroll-snap-align:start;border:1px solid currentColor;border-radius:999px;padding:11px 18px;font-size:16px;white-space:nowrap;min-height:44px;align-items:center}
.sw-list button[aria-pressed="true"]{box-shadow:inset 0 0 0 1px currentColor}
.sw-list button>span+span{display:none}
.sw-phone-wrap{justify-self:start!important}
.sw-list{margin-inline:calc(-1*clamp(20px,4vw,56px));padding-inline:clamp(20px,4vw,56px)}
}
@media (max-width:700px){
.sw-grid{grid-template-columns:minmax(0,1fr)!important}
.sw-phone-wrap{justify-self:center!important}
.sw-list{margin-inline:calc(-1*clamp(20px,4vw,56px));padding-inline:clamp(20px,4vw,56px)}
}
@media (max-width:960px){
.c-hide-m{display:none!important}
.stack{grid-template-columns:minmax(0,1fr)!important}
.stack>*{grid-column:1/-1!important;grid-row:auto!important;justify-self:start!important;text-align:left!important}
.stack>.work-img{justify-self:stretch!important}
.stack>div{justify-content:flex-start!important}
.ph:nth-child(1),.ph:nth-child(5){display:none}
.form-row{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:600px){.ph:nth-child(2),.ph:nth-child(4){display:none}.navl{display:none!important}}
.mbar{display:none}
.swipe-hint{display:none}
@media (max-width:600px){
.spread{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;height:auto;padding:8px 20px 28px;margin-top:40px}
.spread::-webkit-scrollbar{display:none}
.ph,.ph:nth-child(1),.ph:nth-child(2),.ph:nth-child(4),.ph:nth-child(5){display:block;position:relative;left:auto;top:auto;margin:0;flex:none;--x:0px!important;--y:0px!important;--r:0deg!important;--s:1!important;--x0:0px!important;scroll-snap-align:center;width:240px;height:501px;border-radius:36px;padding:8px;box-shadow:0 24px 40px -24px rgba(0,0,0,.45)}
.ph-in{width:224px;height:485px;border-radius:29px}
.ph:nth-child(3){order:-1}
.ph-sc{transform:scale(.5744)}
.swipe-hint{display:block;margin:0;padding-inline:20px;font-size:14px;color:var(--graphite)}
.hdr-cta{display:none!important}
.mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(243,243,241,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--fog)}
.mbar .btn{flex:1;justify-content:center;min-height:50px}
.mbar .btn-ghost{flex:none;background:transparent;color:var(--ink)!important;border:1px solid var(--ink)}
#top{padding-bottom:76px}
}
.work-sec{background:#000;color:#fff}
.cases{display:flex;flex-direction:column;gap:clamp(20px,3vw,40px)}
.case{position:sticky;top:calc(24px + var(--i) * 18px);border-radius:28px;overflow:hidden;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:620px;box-shadow:0 -24px 60px -24px rgba(0,0,0,.7)}
.case-txt{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:space-between;gap:32px;min-width:0}
.case-media{position:relative;margin:14px;border-radius:18px;background-size:cover;background-position:center;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;min-height:520px}
.case-media .case-phone{position:relative;margin-bottom:-90px;box-shadow:0 40px 80px -20px rgba(0,0,0,.6)}
.case-tags{display:flex;flex-wrap:wrap;gap:8px}
.case-tag{border:1px solid currentColor;border-radius:999px;padding:6px 13px;font-size:13px;opacity:.8}
.case-bigtype{position:absolute;left:28px;top:24px;font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:clamp(56px,7vw,112px);line-height:.86;text-transform:uppercase;color:#1F1F1F}
@media (max-width:860px){
.case{grid-template-columns:minmax(0,1fr);min-height:0;top:calc(10px + var(--i) * 12px);border-radius:22px}
.case-txt{padding:26px 22px 8px;gap:20px}
.case-media{min-height:360px;height:360px;margin:12px}
.case-media .case-phone{margin-bottom:-170px}
}
@media (prefers-reduced-motion:reduce){.ph,.h-line,.swap,.mg-side,.mg-mid,.mg-line,.mg-focus{animation:none!important}.mg-side,.mg-mid,.mg-line{stroke-dashoffset:0}}

body{margin:0}
.settled .h-line,.settled .ph,.settled .mg-side,.settled .mg-mid,.settled .mg-line,.settled .mg-focus{animation:none!important}
.settled .mg-side,.settled .mg-mid,.settled .mg-line{stroke-dashoffset:0}

/* hero v2: fixed headline, only the last word changes font */
.hero .h-line,.hero .ph{animation:none!important}
.hero .spread{margin-top:clamp(28px,3.4vw,52px)}
.h-slot{position:relative;display:inline-block;white-space:nowrap;vertical-align:baseline}
.h-ph{visibility:hidden}
.h-ph::before{content:attr(data-w)}
.h-voice{position:absolute;left:0;top:0;white-space:nowrap;font-family:'Fraunces',serif;font-style:italic;font-weight:400;letter-spacing:-0.03em;font-size:1.02em;cursor:pointer;will-change:filter,opacity}
.h-slot .bl{display:inline-block;width:0;height:0;vertical-align:baseline}
.show-m{display:none}
@media (min-width:601px){.hero h1 .h-line{white-space:nowrap}}
@media (max-width:960px){.hero h1{font-size:clamp(40px,7.4vw,72px)!important}.hero-grid>*{grid-column:1/-1!important}.hero-side{flex-direction:row!important;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;column-gap:32px}}
@media (max-width:600px){.hide-m{display:none!important}.show-m{display:block}.hero-desc{margin:4px 0 0;padding-inline:20px;font-size:17px;line-height:1.5;max-width:30em}.hero-side{padding-bottom:0}}