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

:root{
  --bone:#F7F4EF;
  --pebble:#E8E1D8;
  --stone:#CFC8BE;
  --moss:#6B715B;
  --graphite:#2A2A2A;
  --clay:#B08A63;
  --white:#FAF8F5;
  --line:rgba(42,42,42,.13);
  --serif: Georgia, "Times New Roman", serif;
  --sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --display: "Manrope", "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bone);
  color:var(--graphite);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:20;
  height:78px;padding:0 5vw;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(247,244,239,.84);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(42,42,42,.06);
}
.brand{display:flex;align-items:center;letter-spacing:.16em;font-size:13px;font-weight:600}
.main-nav{display:flex;gap:34px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.main-nav a{opacity:.72;transition:opacity .2s}
.main-nav a:hover{opacity:1}
.menu-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.menu-toggle span{display:block;width:24px;height:1px;background:var(--graphite);margin:6px 0}

.hero{
  min-height:100vh;
  padding:150px 8vw 80px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:7vw;
  overflow:hidden;
}
.eyebrow{
  margin:0 0 22px;
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:600;
  color:rgba(42,42,42,.58);
}
h1,h2,h3,p{margin-top:0}
h1,h2{
  font-family:var(--display);
  font-weight:500;
  letter-spacing:-.045em;
  line-height:1.02;
}
h1{font-size:clamp(56px,7vw,104px);margin-bottom:28px}
h1 em,h2 em{font-family:var(--serif);font-weight:400}
.hero-text{max-width:500px;font-size:17px;line-height:1.8;color:rgba(42,42,42,.68);margin-bottom:34px}
.button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 25px;
  background:var(--graphite);color:var(--white);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  transition:transform .2s, background .2s;
}
.button:hover{transform:translateY(-2px);background:#111}
.button-light{background:var(--white);color:var(--graphite)}
.button-light:hover{background:#fff}

.hero-visual{position:relative;min-height:520px}
.visual-card{
  position:absolute;inset:12% 8% 8% 12%;
  background:linear-gradient(145deg,#EDE8E0,#D9D1C6);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 30px 80px rgba(42,42,42,.13);
}
.visual-card span{
  font-family:var(--display);font-size:clamp(44px,6vw,82px);font-weight:600;letter-spacing:.13em;
}
.visual-card small{font-size:8px;letter-spacing:.27em;margin-top:8px;opacity:.55}
.visual-orb{position:absolute;border-radius:50%;filter:blur(.2px)}
.orb-one{width:180px;height:180px;right:0;top:0;background:#B9C0AC;opacity:.7}
.orb-two{width:220px;height:220px;left:0;bottom:0;background:#C6A98C;opacity:.28}

.statement{
  padding:150px 16vw;
  background:var(--white);
}
.statement h2{font-size:clamp(44px,6vw,78px);margin-bottom:32px}
.statement h2 span{font-family:var(--serif);font-weight:400}
.statement>p:last-child{max-width:600px;font-size:18px;line-height:1.9;color:rgba(42,42,42,.65)}

.philosophy{
  padding:140px 8vw;
  display:grid;grid-template-columns:.8fr 1.2fr;gap:10vw;
}
.philosophy h2{font-size:clamp(42px,5vw,70px)}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.principles article{border-top:1px solid var(--line);padding-top:18px}
.principles span{font-size:10px;letter-spacing:.15em;color:var(--moss)}
.principles h3{font-family:var(--display);font-size:19px;font-weight:500;margin:30px 0 12px}
.principles p{font-size:14px;line-height:1.8;color:rgba(42,42,42,.62)}

.coming-soon{padding:140px 8vw;background:var(--moss);color:var(--white)}
.coming-inner{max-width:780px}
.coming-soon .eyebrow{color:rgba(255,255,255,.62)}
.coming-soon h2{font-size:clamp(50px,7vw,96px);margin-bottom:28px}
.coming-soon p{max-width:580px;color:rgba(255,255,255,.75);font-size:16px;line-height:1.85;margin-bottom:34px}

.contact{
  padding:110px 8vw;
  display:flex;justify-content:space-between;align-items:end;gap:50px;
  background:var(--pebble);
}
.contact h2{font-size:clamp(40px,5vw,68px);margin:0}
.socials{display:flex;gap:14px;flex-wrap:wrap}
.socials a{
  border-bottom:1px solid var(--graphite);
  padding-bottom:5px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
}
.socials span{margin-left:10px}

.site-footer{
  min-height:100px;padding:28px 5vw;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
}
.footer-brand{font-weight:600;letter-spacing:.2em}.brand-wordmark{letter-spacing:.24em}.social-icon{display:inline-block;margin-right:7px;font-size:15px;line-height:0}
.footer-links{display:flex;gap:22px;opacity:.65}
.site-footer p{margin:0;text-align:right;opacity:.5}

@media (max-width: 900px){
  .main-nav{gap:18px}
  .hero{grid-template-columns:1fr;gap:40px;padding-top:130px}
  .hero-visual{min-height:420px}
  .statement{padding:110px 10vw}
  .philosophy{grid-template-columns:1fr;gap:60px}
}
@media (max-width: 680px){
  .site-header{height:68px;padding:0 6vw}
  .menu-toggle{display:block}
  .main-nav{
    position:absolute;top:68px;left:0;right:0;
    display:none;flex-direction:column;gap:0;
    background:rgba(247,244,239,.97);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:18px 6vw;border-top:1px solid rgba(42,42,42,.07)}
  .hero{padding:120px 7vw 70px}
  h1{font-size:58px}
  .hero-visual{min-height:340px}
  .visual-card{inset:8% 3% 6% 8%}
  .statement,.philosophy,.coming-soon{padding:90px 7vw}
  .principles{grid-template-columns:1fr;gap:34px}
  .contact{padding:80px 7vw;display:block}
  .socials{margin-top:40px}
  .site-footer{grid-template-columns:1fr;gap:14px;padding:30px 7vw}
  .site-footer p{text-align:left}
}