:root {
    --ink: #182b29;
    --muted: #64716c;
    --paper: #f7f7f2;
    --line: #dce2dc;
    --green: #b9d6bd;
    --dark-green: #23483d;
    --lime: #d8f06a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'DM Sans', sans-serif; }
a { color: inherit; }

.topbar { height: 82px; padding: 0 7vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.wordmark { font: 700 1.35rem 'Manrope', sans-serif; letter-spacing: -.08em; text-decoration: none; }
.wordmark span { color: #698f70; }
.topbar__link { font-size: .9rem; text-decoration: none; }
.topbar__link span { margin-left: .4rem; color: #65886b; }

.hero { min-height: 590px; position: relative; overflow: hidden; display: flex; align-items: center; padding: 6rem 12vw; background: #eef1e9; }
.hero__content { max-width: 650px; position: relative; z-index: 1; }
.eyebrow { margin: 0 0 1rem; color: #66856b; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.hero h1 { max-width: 640px; margin: 0; font: 600 clamp(3.3rem, 7.5vw, 6.5rem)/.99 'Manrope', sans-serif; letter-spacing: -.075em; }
.hero h1 em { color: #66856b; font-style: normal; }
.hero__lead { max-width: 480px; margin: 1.7rem 0 2rem; color: var(--muted); font-size: 1.1rem; line-height: 1.75; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 1.2rem; padding: 0 1.35rem; border: 0; border-radius: 3px; color: #fff; background: var(--dark-green); font: 600 .9rem 'DM Sans', sans-serif; text-decoration: none; cursor: pointer; transition: transform .2s, background .2s; }
.button:hover { background: #35624f; transform: translateY(-2px); }
.hero__shape { position: absolute; top: 50%; right: 6vw; width: min(37vw, 470px); aspect-ratio: 1; transform: translateY(-50%) rotate(-9deg); display: grid; place-items: center; border-radius: 46% 54% 64% 36% / 39% 39% 61% 61%; background: var(--green); }
.hero__shape span { color: rgba(35,72,61,.82); font: 500 21rem/.8 'Manrope', sans-serif; letter-spacing: -.12em; transform: translate(-.15em,-.06em); }
.hero__caption { position: absolute; right: 7vw; bottom: 1.5rem; color: var(--muted); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }

.intro { padding: 7rem 1.5rem 7.5rem; text-align: center; }
.intro h2, .section-heading h2, .contact h2 { margin: 0; font: 500 clamp(2.3rem, 4.2vw, 3.8rem)/1.12 'Manrope', sans-serif; letter-spacing: -.06em; }
.intro > p:last-child { max-width: 620px; margin: 1.3rem auto 0; color: var(--muted); font-size: 1.03rem; line-height: 1.8; }

.portfolio { padding: 5.5rem 7vw 7rem; background: #fff; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2.4rem; }
.section-heading__note { margin: 0 0 .25rem; color: var(--muted); line-height: 1.7; }
.site-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.site-card { min-height: 142px; display: flex; align-items: center; gap: 1.4rem; padding: 1.6rem 1.2rem; border-bottom: 1px solid var(--line); text-decoration: none; transition: background .2s; }
.site-card:nth-child(odd) { border-right: 1px solid var(--line); }
.site-card:hover { background: #f5f7f1; }
.site-card__number { align-self: flex-start; padding-top: .25rem; color: #78917e; font-size: .76rem; }
.site-card__content { flex: 1; display: grid; gap: .45rem; }
.site-card__content strong { font: 600 1.13rem 'Manrope', sans-serif; }
.site-card__content > span { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.site-card__arrow { font-size: 1.25rem; transition: transform .2s; }
.site-card:hover .site-card__arrow { transform: translate(3px,-3px); }
.empty-state { color: var(--muted); }

.contact { padding: 7rem 1.5rem; text-align: center; color: #fff; background: var(--dark-green); }
.contact .eyebrow { color: var(--lime); }
.contact h2 { max-width: 650px; margin: 0 auto; }
.contact > p:not(.eyebrow) { margin: 1.2rem 0 1.7rem; color: #d0ddd4; }
.button--light { color: var(--ink); background: var(--lime); }
.button--light:hover { color: #fff; background: #456957; }
.footer { min-height: 100px; padding: 1.5rem 7vw; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.footer p, .footer > span { color: var(--muted); font-size: .82rem; }
.wordmark--footer { font-size: 1.15rem; }

.login-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; background: #eef1e9; }
.login-card { width: min(100%, 420px); margin: 2rem 0 1.2rem; padding: 2.5rem; display: grid; gap: .75rem; background: #fff; box-shadow: 0 20px 60px rgba(24,43,41,.08); }
.login-card h1 { margin: 0 0 1rem; font: 600 2rem 'Manrope', sans-serif; letter-spacing: -.05em; }
.login-card label { margin-top: .45rem; font-size: .9rem; font-weight: 600; }
.login-card input { min-height: 46px; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 2px; font: inherit; }
.login-card .button { margin-top: .8rem; }
.login-error { padding: .75rem; color: #7a2e24; background: #fff0eb; font-size: .9rem; }
.login-back { color: var(--muted); font-size: .9rem; text-decoration: none; }

@media (max-width: 760px) {
    .hero { min-height: 650px; align-items: flex-start; padding: 5rem 7vw 19rem; }
    .hero__shape { top: auto; right: 8vw; bottom: 2.5rem; width: min(60vw, 300px); transform: rotate(-9deg); }
    .hero__shape span { font-size: 14rem; }
    .hero__caption { right: 7vw; bottom: 1rem; }
    .section-heading { align-items: flex-start; flex-direction: column; }
    .site-grid { grid-template-columns: 1fr; }
    .site-card:nth-child(odd) { border-right: 0; }
    .footer { flex-wrap: wrap; }
}

@media (max-width: 460px) {
    .topbar { padding: 0 1.3rem; }
    .hero h1 { font-size: 3.35rem; }
    .intro, .contact { padding: 5rem 1.4rem; }
    .portfolio { padding: 4.5rem 1.3rem; }
    .login-card { padding: 1.7rem; }
}