*{box-sizing:border-box;margin:0;padding:0}
:root{--blue:#7D9A9E;--sage:#B9C0CC;--ivory:#FFFFF5;--lav:#E8E9ED;--ink:#1d1d1b;--muted:#676a67}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;background:var(--ivory);color:var(--ink);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 20% 20%,rgba(125,154,158,.12),transparent 32%),radial-gradient(circle at 85% 42%,rgba(185,192,204,.20),transparent 30%),radial-gradient(circle at 35% 92%,rgba(232,233,237,.55),transparent 30%);z-index:-1;pointer-events:none}
.site-header{position:fixed;top:0;left:0;width:100%;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:18px 5vw;background:rgba(255,255,245,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(29,29,27,.08)}
.logo img{width:92px;display:block}
.site-header nav{display:flex;gap:34px}
.site-header a,.link{color:var(--ink);text-decoration:none;font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;position:relative;display:inline-block}
.site-header nav a:after,.link:after{content:"";position:absolute;left:0;bottom:-7px;width:100%;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s ease}
.site-header nav a:hover:after,.link:hover:after{transform:scaleX(1);transform-origin:left}
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:105px 5vw 60px}
.hero-map-wrap{width:min(610px,86vw);position:relative;animation:mapFloat 2.8s ease-in-out infinite alternate}
.hero-map-wrap:after{content:"";position:absolute;left:22%;right:22%;bottom:4%;height:26px;background:rgba(29,29,27,.13);filter:blur(18px);border-radius:50%;z-index:-1;animation:shadowMove 2.8s ease-in-out infinite alternate}
.drc-map{width:100%;display:block;animation:mapBounce 5.2s ease-in-out infinite}
@keyframes mapFloat{from{transform:translateY(0)}to{transform:translateY(-18px)}}
@keyframes mapBounce{0%,100%{transform:scale(1) rotate(-.4deg)}50%{transform:scale(1.025) rotate(.6deg)}}
@keyframes shadowMove{to{opacity:.45;transform:scale(.84)}}
.hero-title{font-family:Arial,Helvetica,sans-serif;font-size:clamp(34px,4.5vw,68px);font-weight:500;line-height:1.03;letter-spacing:-.045em;max-width:920px;margin-top:14px}
.scroll-hint{margin-top:30px;color:var(--blue)}
.brands{padding:70px 5vw 30px}
.brand-section{position:relative;min-height:78vh;display:grid;grid-template-columns:.9fr 1.1fr;gap:5vw;align-items:center;padding:72px 0;border-top:1px solid rgba(29,29,27,.12);overflow:hidden}
.brand-section:nth-child(even){grid-template-columns:1.1fr .9fr}
.brand-section:nth-child(even) .brand-image-wrap{order:2}
.bg-logo{position:absolute;right:4vw;top:50%;width:min(360px,42vw);opacity:.055;transform:translateY(-50%);animation:bgLogoFloat 7s ease-in-out infinite alternate;pointer-events:none}
.brand-section:nth-child(even) .bg-logo{left:4vw;right:auto}
@keyframes bgLogoFloat{to{transform:translateY(calc(-50% - 22px)) rotate(-3deg)}}
.brand-image-wrap{position:relative;min-height:430px;border-radius:34px;overflow:hidden;background:transparent}
.brand-image{width:100%;height:100%;min-height:430px;object-fit:cover;display:block;opacity:.72;filter:saturate(.72) contrast(.94);border-radius:34px}
.brand-copy{position:relative;z-index:2}
.floating-logo{width:min(140px,36vw);height:auto;object-fit:contain;margin-bottom:24px;animation:logoFloat 2.6s ease-in-out infinite alternate;filter:drop-shadow(0 14px 24px rgba(29,29,27,.14))}
@keyframes logoFloat{to{transform:translateY(-14px) rotate(-2deg)}}
.brand-copy span,.section-label{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--blue);font-weight:700}
.brand-copy h2,.about h2,.contact h2{font-family:Arial,Helvetica,sans-serif;font-size:clamp(34px,4.6vw,64px);line-height:.95;letter-spacing:-.045em;margin:16px 0;font-weight:600}
.brand-copy .tagline{font-size:13px;text-transform:uppercase;letter-spacing:.10em;color:var(--muted);font-weight:700;margin-bottom:18px}
.brand-copy p{font-size:17px;line-height:1.65;color:#3b3d3a;max-width:620px;margin-bottom:28px}
.brand-link{color:var(--blue)}
.about,.contact{margin:0 5vw;padding:95px 0;border-top:1px solid rgba(29,29,27,.14);display:grid;grid-template-columns:.95fr 1.05fr;gap:6vw;align-items:start}
.about p,.contact p{font-size:19px;line-height:1.65;color:#3b3d3a}
.contact-list{display:grid;gap:20px;align-content:start}
.contact-list a{font-size:17px;text-transform:none;letter-spacing:.02em}
footer{margin:0 5vw;padding:34px 0;border-top:1px solid rgba(29,29,27,.14);display:flex;align-items:center;justify-content:space-between;color:var(--muted)}
footer img{width:76px}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .65s ease,transform .65s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
@media(max-width:820px){
.site-header{padding:14px 5vw}.logo img{width:74px}.site-header nav{gap:16px}.site-header nav a{font-size:10px;letter-spacing:.035em}
.hero{min-height:100svh;padding-top:92px}.hero-map-wrap{width:min(420px,94vw)}
.hero-title{font-size:clamp(30px,9.5vw,44px);line-height:1.05;letter-spacing:-.04em;margin-top:10px;max-width:94vw}
.brand-section,.brand-section:nth-child(even){display:flex;flex-direction:column;gap:22px;min-height:auto;padding:54px 0}.brand-section:nth-child(even) .brand-image-wrap{order:0}
.brand-image-wrap{width:100%;min-height:260px;border-radius:26px}.brand-image{min-height:260px;border-radius:26px}
.floating-logo{width:min(116px,34vw);margin-bottom:18px}.bg-logo{width:70vw;opacity:.045;right:-12vw!important;left:auto!important;top:18%}
.brand-copy h2,.about h2,.contact h2{font-size:clamp(30px,8.5vw,42px);line-height:1;letter-spacing:-.035em}
.brand-copy p{font-size:15.5px;line-height:1.6}.brand-copy .tagline{font-size:11px;line-height:1.4}
.about,.contact{display:block;padding:70px 0}.about p,.contact p{font-size:16px;margin-top:20px}.contact-list{margin-top:30px}
footer{flex-direction:column;gap:14px;text-align:center}
}
@media(max-width:480px){
.site-header nav{display:none}.hero-map-wrap{width:102vw}.hero-title{font-size:35px}.brands{padding-top:34px}
.brand-copy h2{font-size:34px}.brand-image-wrap{min-height:220px}.brand-image{min-height:220px}
}