/* Single committed brand look (River & Dusk palette), light only by design */
:root{--paper:#FAF6EF;--ink:#1B1A17;color-scheme:light}
html,body{background:var(--paper);color:var(--ink)}
body{margin:0;font-family:'Be Vietnam Pro',system-ui,sans-serif;overflow-x:hidden}

body{margin:0;background:#FFFFFF}
a{color:#0B3A40}a:hover{color:#13707A}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #F26A36;outline-offset:2px}
.ph-d{position:relative;background:repeating-linear-gradient(135deg,#0F3C43 0 14px,#13464E 14px 28px);overflow:hidden}
.cap{padding:6px 10px;background:rgba(27,26,23,.78);color:#fff;font:500 12px/1.35 'Be Vietnam Pro',system-ui,sans-serif;border-radius:4px;max-width:85%}
.lbl{font:600 12px/1 'Be Vietnam Pro',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6E675D}
.h2{margin:0;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;font-size:clamp(28px,3.2vw,40px);line-height:1.1;letter-spacing:-.02em;color:#1B1A17;text-wrap:balance}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;box-sizing:border-box;width:100%}
.pill{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#1B1A17;color:#FFFFFF;border:0;border-radius:999px;padding:0 24px;height:46px;font:700 13px 'Be Vietnam Pro',sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-decoration:none}
.more{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:10px;font:700 13px 'Be Vietnam Pro',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#1B1A17;padding:8px 0}
.arrow{width:46px;height:46px;border-radius:999px;border:0;background:#1B1A17;color:#FFFFFF;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.arrow-l{width:46px;height:46px;border-radius:999px;border:1.5px solid #1B1A17;background:transparent;color:#1B1A17;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sel{font:500 14px 'Be Vietnam Pro',sans-serif;padding:10px 12px;border:1px solid #D6D0C6;border-radius:6px;background:#FFFFFF;color:#1B1A17;min-height:44px}
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:24px}
.grid4{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:20px}
/* motion & interaction */
.hero-in>*{animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) both}.hero-in>*:nth-child(2){animation-delay:.12s}.hero-in>*:nth-child(3){animation-delay:.24s}.hero-in>*:nth-child(4){animation-delay:.36s}.hero-in>*:nth-child(5){animation-delay:.5s}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideIn{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
.screen-in{animation:fadeIn .45s ease both}.mega-in{animation:dropIn .25s ease both}.drawer-in{animation:slideIn .35s cubic-bezier(.2,.7,.2,1) both}.pop-in{animation:popIn .35s cubic-bezier(.2,.7,.2,1) both}.toast-in{animation:toastIn .3s ease both}
.navi::after{content:'';position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:#F26A36;transform:scaleX(0);transform-origin:center;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.navi:hover::after,.navi[data-on="1"]::after{transform:scaleX(1)}.navi:hover{color:#A84A32 !important}
.pill{transition:transform .2s ease,box-shadow .2s ease,filter .2s ease,background-color .2s ease !important}.pill:hover{transform:translateY(-2px) !important;box-shadow:0 8px 18px rgba(27,26,23,.18) !important;filter:brightness(1.04)}.pill:active{transform:translateY(0) !important}
.more{transition:gap .25s ease,color .2s ease !important}.more:hover{gap:16px !important;color:#A84A32 !important}
.arrow,.arrow-l{transition:transform .2s ease,background-color .2s ease}.arrow:hover,.arrow-l:hover{transform:scale(1.08)}
button[role=tab],button[aria-pressed]{transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease !important}button[role=tab]:hover,button[aria-pressed]:hover{transform:translateY(-1px) !important}
.lift,.grid3>article,.grid4>article,.grid4>button,.mte-small>button,.mte-big,.hood-c{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease !important}
.lift:hover,.grid3>article:hover,.grid4>article:hover,.grid4>button:hover,.mte-small>button:hover,.mte-big:hover,.hood-c:hover{transform:translateY(-5px) !important;box-shadow:0 16px 34px rgba(27,26,23,.14) !important}
.lift img,.grid3>article img,.grid4>article img,.grid4>button img,.mte-small>button img,.mte-big>img,.hood-c img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.lift:hover img,.grid3>article:hover img,.grid4>article:hover img,.grid4>button:hover img,.mte-small>button:hover img,.mte-big:hover>img,.hood-c:hover img{transform:scale(1.05)}
.rv{opacity:0 !important;transform:translateY(26px) !important}.rv.rv-in{opacity:1 !important;transform:none !important;transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1) !important}
.totop:hover{background:#F26A36 !important;color:#1B1A17 !important}
.sb-btn img{transition:transform .3s cubic-bezier(.2,.7,.2,1)}.sb-btn:hover img{transform:translateY(-6px) rotate(-3deg)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}
@keyframes rotw{0%,26%{transform:translateY(0)}33%,59%{transform:translateY(-1.3em)}66%,92%{transform:translateY(-2.6em)}100%{transform:translateY(-3.9em)}}
.rot-in{animation:rotw 7.5s cubic-bezier(.7,0,.3,1) infinite}
@media (prefers-reduced-motion:reduce){.rot-in{animation:none}}
@keyframes ptscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pt-track{animation:ptscroll 45s linear infinite}
.pt-viewport:hover .pt-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.pt-track{animation:none}.pt-viewport{overflow-x:auto !important}}
@media (max-width:1460px){.nav button{padding:0 8px !important;font-size:12px !important;letter-spacing:.02em !important}}
@media (max-width:1120px){.nav button{padding:0 5px !important;font-size:11px !important}.hdr-tag{display:none !important}}
@media (max-width:600px){.hdr-heart{display:none !important}.totop{right:22px !important;bottom:128px !important;width:44px !important;height:44px !important}.sb-btn{width:78px !important;height:104px !important}.sb-card{width:auto !important;max-width:210px;margin:0 -8px 70px 0 !important;padding:12px 34px 12px 14px !important;gap:8px !important}.sb-card b{font-size:15px !important}.sb-text,.sb-pow{display:none !important}.sb-card .pill{height:38px !important;font-size:12px !important}.mte-cred{top:48px !important;left:16px;right:auto !important;font-size:9px !important;max-width:80% !important}.hdr-row{gap:8px !important}.hdr-logo{height:38px !important}.hdr-ask{padding:0 12px !important;font-size:11px !important;letter-spacing:.04em !important;height:38px !important}.mte-big{min-height:340px !important}.mte-pil{display:none !important}.mte-small{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important}.mte-sub{display:none !important}}
@media (max-width:960px){.hdr-burger{display:flex !important}.nav{display:none !important}.wrap{padding:0 16px}.split{grid-template-columns:1fr !important}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
