/* TWS: the logo is the story. Palette and typography inherit the existing site. */
.brand-hero{position:relative;isolation:isolate;overflow:hidden;min-height:780px;height:100svh;max-height:1100px;background:#fcf8f3}
.brand-scene{position:absolute;inset:0;z-index:-1;pointer-events:none}
.brand-scene picture,.brand-scene img,.brand-scene video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.brand-scene video{opacity:0;transition:opacity .2s}
.brand-scene.is-playing video{opacity:1}
.brand-scene:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#fcf8f344,transparent 55%);pointer-events:none}
.brand-composition{height:100%;position:relative;padding-top:clamp(145px,17vh,185px);padding-bottom:160px}
.brand-message{position:relative;width:50%;max-width:610px}
.brand-motto{font-size:13px;font-weight:600;margin-bottom:24px;color:#645347}
.brand-hero h1{font-size:clamp(90px,9.2vw,142px);letter-spacing:-.064em;line-height:.86;margin-left:-5px}
.brand-hero h1 span{display:block}
.brand-description{margin-top:32px;font-size:17px;line-height:1.55;letter-spacing:-.02em;max-width:330px;color:#544b43}
.brand-footer{position:absolute;left:0;right:0;bottom:28px;display:grid;grid-template-columns:1fr;align-items:end}
.brand-meaning{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:0;padding:0;max-width:890px;width:100%}
.brand-meaning li{border-top:1px solid #b4a08a75;position:relative;padding-top:17px}
.brand-meaning li:before{content:'';height:2px;background:#c65b1c;position:absolute;inset:-1px 0 auto;transform:scaleX(var(--fill,0));transform-origin:left}
.brand-meaning b{display:block;font:700 22px/1.2 Outfit;letter-spacing:-.025em;margin-bottom:7px}
.brand-meaning span{display:block;font-size:12px;line-height:1.6;color:#60554c}
@media(min-width:1600px){.brand-composition{padding-top:19vh}.brand-description{font-size:19px;max-width:370px}}
@media(min-width:761px) and (max-width:1050px){
 .brand-hero{min-height:800px}.brand-hero h1{font-size:100px}.brand-message{width:55%}
 .brand-scene img,.brand-scene video{object-position:58% center}.brand-meaning{gap:22px}
 .brand-footer{column-gap:20px}.brand-meaning span{font-size:11px}
}
@media(max-width:760px){
 .brand-hero{min-height:820px;height:100svh;max-height:1040px}
 .brand-composition{padding-top:119px;padding-bottom:140px;display:flex;flex-direction:column}
 .brand-message{position:static;width:100%;max-width:none;flex:1;display:flex;flex-direction:column;align-items:flex-start}
 .brand-motto{font-size:11px;margin-bottom:20px}
 .brand-hero h1{font-size:clamp(64px,17.8vw,104px);line-height:.87;letter-spacing:-.055em;margin-left:-3px;position:relative;z-index:1}
 .brand-description{font-size:15px;line-height:1.5;max-width:275px;margin-top:auto;padding-top:26px;color:#40372e}
 .brand-scene:after{background:linear-gradient(90deg,#fcf8f36b 0%,transparent 60%),linear-gradient(0deg,#fcf8f3 0%,#fcf8f3dd 13%,transparent 31%)}
 .brand-scene img,.brand-scene video{object-position:center}
 .brand-footer{bottom:20px;display:flex;flex-direction:column;align-items:stretch;gap:7px}
 .brand-meaning{gap:15px;max-width:none}
 .brand-meaning li{padding-top:12px}
 .brand-meaning b{font-size:19px;margin-bottom:5px}
 .brand-meaning span{font-size:10px;line-height:1.5;max-width:110px}
}
@media(max-width:370px){.brand-meaning{gap:12px}.brand-meaning b{font-size:17px}.brand-hero{min-height:800px}.brand-description{max-width:255px;font-size:14px}}

@media(prefers-reduced-motion:reduce){.brand-scene video{display:none}.brand-meaning li{--fill:1!important}}