@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root{
  --sand:#e9e3da; --stone:#b8a9a3; --clay:#c65a3d; --moss:#6c7867;
  --charcoal:#1c1c1a; --ocean:#a7b8c0; --paper:#f4f0ea;
  --line:rgba(28,28,26,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--charcoal);font-family:Inter,Arial,sans-serif;font-weight:300;line-height:1.55}
a{color:inherit;text-decoration:none}
.site-header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid var(--line);position:fixed;top:0;left:0;right:0;z-index:20;background:rgba(244,240,234,.88);backdrop-filter:blur(12px)}
.brand{font-size:25px;letter-spacing:.28em;font-weight:400;white-space:nowrap}.brand span{font-size:13px;color:var(--clay);letter-spacing:0;margin-left:6px}
.nav{display:flex;gap:30px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}.nav a{opacity:.72;transition:.2s}.nav a:hover{opacity:1}
.menu-btn{display:none;border:0;background:none;font-size:22px}
.hero{min-height:100vh;position:relative;display:grid;align-items:end;overflow:hidden;padding:0 5vw 8vh}
.hero-image{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,15,13,.64),rgba(15,15,13,.12) 55%,rgba(15,15,13,.03)),url("assets/kima-moodboard.jpg") center/cover no-repeat;filter:saturate(.9)}
.hero-copy{position:relative;color:#fff;max-width:720px;padding-top:110px}.eyebrow{font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;margin:0 0 22px}
.hero h1{font-size:clamp(45px,6vw,88px);line-height:.98;font-weight:300;letter-spacing:-.045em;margin:0 0 25px}.hero h1 em{font-style:normal;color:#eee6dc}
.hero-copy>p:not(.eyebrow){max-width:510px;font-size:16px;margin-bottom:32px}
.button{display:inline-block;border:1px solid rgba(255,255,255,.65);padding:13px 23px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;transition:.25s}.button:hover{background:#fff;color:var(--charcoal)}
.hero-scroll{position:absolute;right:5vw;bottom:8vh;color:#fff;font-size:9px;letter-spacing:.25em;writing-mode:vertical-rl}.hero-scroll span{font-size:16px;margin-top:8px}
.section{padding:120px 7vw}
.intro{display:grid;grid-template-columns:1fr 1fr;gap:10vw;align-items:start}
h2{font-size:clamp(34px,4.5vw,64px);line-height:1.04;font-weight:300;letter-spacing:-.04em;margin:0}
.intro-text{max-width:570px;font-size:19px}.muted{font-size:11px!important;letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin-top:45px}
.collections{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;padding:0 5px}
.collection-card{min-height:510px;position:relative;padding:30px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background-size:cover;background-position:center;isolation:isolate}
.collection-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 45%,rgba(0,0,0,.55));z-index:-1}
.collection-card:after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.06);z-index:-1;transition:.35s}.collection-card:hover:after{background:rgba(0,0,0,.25)}
.living{grid-column:span 7;background-image:url("assets/kima-moodboard.jpg");background-size:250%;background-position:56% 49%}
.outdoor{grid-column:span 5;background-image:url("assets/kima-moodboard.jpg");background-size:260%;background-position:88% 8%}
.green{grid-column:span 5;background-image:url("assets/kima-moodboard.jpg");background-size:260%;background-position:76% 53%}
.pet{grid-column:span 7;background-image:url("assets/kima-moodboard.jpg");background-size:260%;background-position:48% 78%}
.lab{grid-column:span 12;min-height:380px;background-image:url("assets/kima-moodboard.jpg");background-size:200%;background-position:86% 57%}
.card-label{font-size:9px;letter-spacing:.25em}.collection-card h3{font-size:34px;line-height:1.02;font-weight:300;margin:0 0 16px}.collection-card a{font-size:10px;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:7px}
.materials{background:var(--sand)}.section-heading{display:flex;justify-content:space-between;gap:40px;margin-bottom:70px}.section-heading h2{max-width:700px}
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.swatches article{display:flex;flex-direction:column;gap:8px;font-size:10px;letter-spacing:.14em}.swatch{display:block;aspect-ratio:1/.85;border-radius:50%}.sand{background:var(--sand);box-shadow:inset 0 0 0 1px var(--line)}.stone{background:var(--stone)}.clay{background:var(--clay)}.moss{background:var(--moss)}.charcoal{background:var(--charcoal)}.ocean{background:var(--ocean)}.swatches small{font-size:9px;opacity:.5}
.philosophy{display:grid;grid-template-columns:1fr 1fr;gap:10vw}.philosophy-copy>p:not(.eyebrow){max-width:520px;font-size:18px;margin-top:30px}.principles{border-top:1px solid var(--line)}.principles>div{display:grid;grid-template-columns:45px 1fr;column-gap:20px;border-bottom:1px solid var(--line);padding:25px 0}.principles span{font-size:10px;opacity:.45}.principles h3{font-size:16px;font-weight:400;margin:0 0 7px}.principles p{grid-column:2;margin:0;font-size:13px;opacity:.65}
.passport{display:grid;grid-template-columns:1.35fr .65fr;min-height:650px;background:#ddd5ca}.passport-image{background:url("assets/kima-moodboard.jpg") center 78%/cover no-repeat;min-height:500px}.passport-copy{padding:80px 7vw 60px 6vw;display:flex;flex-direction:column;justify-content:center}.passport-mark{font-size:38px;letter-spacing:.25em;margin:10px 0}.passport-vera{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.65}.passport dl{border-top:1px solid var(--line);margin:35px 0 0}.passport dl div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:13px 0;font-size:12px}.passport dd{margin:0;font-weight:500}.passport dt{opacity:.55}.small{font-size:11px;opacity:.6;margin-top:25px}
.statement{text-align:center;background:var(--charcoal);color:#f3eee7;padding:160px 7vw}.statement h2{font-size:clamp(42px,6vw,82px)}
.contact{padding:110px 7vw;display:grid;grid-template-columns:1fr 1fr;gap:10vw;background:var(--clay);color:#fff}.contact h2{font-size:clamp(42px,5vw,72px)}.contact-info{align-self:end}.contact-info>p{font-size:13px;max-width:390px;margin-bottom:45px}.contact-link{display:block;font-size:18px;border-bottom:1px solid rgba(255,255,255,.4);padding:15px 0}
footer{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;padding:35px 5vw;font-size:10px;letter-spacing:.12em;text-transform:uppercase;align-items:center}footer p:last-child{text-align:right;opacity:.5}
@media(max-width:800px){
 .site-header{height:68px}.nav{display:none}.menu-btn{display:block}.nav.open{position:absolute;display:flex;flex-direction:column;gap:20px;top:68px;left:0;right:0;background:var(--paper);padding:25px 5vw;border-bottom:1px solid var(--line)}
 .hero{padding:0 7vw 12vh}.hero-image{background-position:58% center}.hero-copy{padding-top:100px}.hero h1{font-size:48px}
 .section{padding:85px 7vw}.intro,.philosophy,.contact,.passport{grid-template-columns:1fr;gap:55px}
 .collections{grid-template-columns:1fr}.collection-card,.living,.outdoor,.green,.pet,.lab{grid-column:1;min-height:430px}
 .swatches{grid-template-columns:repeat(3,1fr);gap:25px}.swatch{aspect-ratio:1}
 .section-heading{display:block}.section-heading h2{margin-top:15px}.passport-image{min-height:380px}.passport-copy{padding:70px 8vw}
 footer{grid-template-columns:1fr;gap:14px}footer p:last-child{text-align:left}
}