:root {
  --ink: #1d2622;
  --paper: #f4f2ec;
  --lime: #d1f15c;
  --muted: #68716c;
  --line: #d9d9d1;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.site-header {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  padding: 0 5.5vw;
  margin: auto;
}

.logo, .footer-logo { display: inline-flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 800; letter-spacing: -1.1px; }
.logo > span:last-child span, .footer-logo span { font-weight: 400; }

.logo-mark { display: block; width: 22px; height: 22px; border-radius: 2px; object-fit: contain; }

.header-contact { font-family: "DM Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }

.hero { min-height: calc(100vh - 88px); max-width: 1440px; margin: auto; padding: 6.2vw 5.5vw 7vw; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(355px, .9fr); align-items: center; gap: 7vw; overflow: hidden; }

.eyebrow { font-family: "DM Mono", monospace; margin: 0 0 24px; color: var(--muted); font-size: 11px; letter-spacing: .035em; text-transform: uppercase; display: flex; align-items: center; gap: 9px; }
.eyebrow span { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px #e5efbd; }

h1 { margin: 0; max-width: 740px; font-size: clamp(52px, 6.2vw, 104px); line-height: .98; letter-spacing: -.075em; font-weight: 800; }
h1 em { font-weight: 400; font-style: normal; color: #7f867f; }

.intro { font-size: 17px; line-height: 1.65; max-width: 490px; margin: 31px 0 34px; color: #4e5852; letter-spacing: -.01em; }
.button { display: inline-flex; align-items: center; gap: 26px; padding: 15px 18px 15px 20px; border-radius: 2px; background: var(--ink); color: white; font-size: 13px; font-weight: 700; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-3px); background: #38433d; }
.button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; }

.hero-art { position: relative; height: min(38vw, 515px); min-height: 400px; border-radius: 1px; overflow: hidden; background: #c6d1ca; isolation: isolate; }
.grid { position: absolute; inset: 0; z-index: -1; opacity: .65; background-image: linear-gradient(rgba(29,38,34,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(29,38,34,.12) 1px, transparent 1px); background-size: 28px 28px; }
.orb { border-radius: 50%; position: absolute; filter: blur(1px); }
.orb-one { width: 340px; height: 340px; background: var(--lime); top: -140px; right: -65px; }
.orb-two { width: 260px; height: 260px; background: #859b8e; bottom: -170px; left: -90px; }

.window { position: absolute; background: #f2f3ed; border: 1px solid rgba(29,38,34,.2); box-shadow: 11px 13px 0 rgba(29,38,34,.14); }
.window-back { width: 52%; height: 47%; top: 18%; left: 15%; transform: rotate(-7deg); padding: 15px; display: flex; gap: 5px; }
.window-back span { display: block; width: 13px; height: 13px; border-radius: 50%; background: #b5beb6; }
.window-front { width: 61%; height: 56%; bottom: 13%; right: 9%; transform: rotate(5deg); }
.window-top { height: 34px; border-bottom: 1px solid rgba(29,38,34,.16); display: flex; align-items: center; padding: 0 11px; gap: 4px; }
.window-top i { height: 7px; width: 7px; display: block; background: #a1aaa3; border-radius: 50%; }
.window-content { padding: 26px 20px; }
.line { display: block; height: 9px; width: 88%; background: #d9dfd9; margin-bottom: 9px; }
.line.short { width: 39%; background: var(--ink); }
.line.medium { width: 65%; }
.blocks { display: flex; gap: 7px; margin-top: 22px; }
.blocks i { width: 34%; height: 54px; background: var(--lime); display: block; }
.blocks i:nth-child(2) { background: #bac4bd; }
.blocks i:nth-child(3) { background: #2c3831; }
.art-label { position: absolute; right: 25px; bottom: 20px; z-index: 2; color: var(--ink); font-family: "DM Mono", monospace; text-transform: uppercase; font-size: 10px; line-height: 1.5; letter-spacing: .03em; }

.statement { max-width: 1440px; margin: auto; min-height: 280px; border-top: 1px solid var(--line); padding: 53px 5.5vw 73px; display: grid; grid-template-columns: 1fr 2fr; gap: 7vw; }
.statement-index { font-family: "DM Mono", monospace; color: var(--muted); margin: 8px 0 0; font-size: 11px; text-transform: uppercase; }
.statement > p:last-child { margin: 0; font-size: clamp(23px, 2.6vw, 38px); max-width: 800px; line-height: 1.27; letter-spacing: -.047em; color: #939a93; font-weight: 500; }
.statement strong { font-weight: 600; color: var(--ink); }

footer { background: var(--ink); color: #f5f3ed; min-height: 260px; padding: 45px 5.5vw 32px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; }
.footer-logo { font-size: 20px; align-self: start; }
footer div > p { font-family: "DM Mono", monospace; color: #aab4ac; font-size: 10px; line-height: 1.6; margin: 20px 0 0 28px; }
.mail { align-self: start; font-size: clamp(18px, 2vw, 26px); font-weight: 600; border-bottom: 1px solid #f5f3ed; padding-bottom: 4px; letter-spacing: -.05em; }
.mail span { margin-left: 14px; font-weight: 400; }
.copyright { grid-column: 1 / -1; border-top: 1px solid #4b554f; padding-top: 17px; margin: 0; color: #aab4ac; font-family: "DM Mono", monospace; font-size: 10px; }

@media (max-width: 720px) {
  .site-header { height: 70px; padding: 0 24px; }
  .hero { min-height: auto; padding: 60px 24px 73px; display: flex; flex-direction: column; align-items: stretch; gap: 55px; }
  .hero-art { height: 400px; min-height: 0; }
  h1 { font-size: clamp(50px, 14.8vw, 75px); }
  .intro { font-size: 15px; margin: 27px 0 29px; }
  .statement { padding: 37px 24px 55px; display: block; min-height: 0; }
  .statement-index { margin-bottom: 29px; }
  .statement > p:last-child { font-size: 26px; }
  footer { min-height: 270px; padding: 36px 24px 25px; display: flex; flex-direction: column; }
  .mail { margin-top: 47px; align-self: flex-start; font-size: 20px; }
  .copyright { width: 100%; margin-top: auto; }
}