:root {
  --ink: #1d2530;
  --paper: #f6f3eb;
  --rust: #d65d42;
  --yellow: #edc54a;
  --line: rgba(29, 37, 48, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Manrope, Arial, sans-serif; }
.page { max-width: 1300px; margin: auto; min-height: 100vh; padding: 26px 5.5% 0; overflow: hidden; }
.nav { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.brand { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--paper); font: italic 600 27px/1 "Playfair Display", serif; text-decoration: none; }
.nav-note { opacity: .56; margin-left: -80px; }
.hello-link { color: inherit; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.hello-link span { color: var(--rust); font-size: 16px; }
.hero { min-height: 620px; padding: 120px 9% 80px; position: relative; border-bottom: 1px solid var(--line); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow span { width: 30px; height: 2px; background: var(--rust); }
h1 { position: relative; z-index: 1; margin: 0; max-width: 800px; font-size: clamp(60px, 9vw, 128px); line-height: .94; letter-spacing: -.075em; font-weight: 800; }
h1 em { font-family: "Playfair Display", serif; font-weight: 600; letter-spacing: -.08em; color: var(--rust); }
.intro { position: relative; z-index: 1; max-width: 405px; margin: 42px 0 26px 4px; color: #52606b; font-size: 15px; line-height: 1.75; }
.button { position: relative; z-index: 1; display: inline-flex; gap: 26px; align-items: center; margin-left: 4px; padding: 13px 17px 13px 20px; border-radius: 999px; background: var(--ink); color: white; font-size: 12px; font-weight: 700; text-decoration: none; }
.button span { font-size: 18px; color: var(--yellow); }
.orb { position: absolute; border-radius: 50%; mix-blend-mode: multiply; }
.orb-one { width: min(35vw, 460px); height: min(35vw, 460px); right: 7%; top: 92px; background: var(--yellow); opacity: .82; }
.orb-two { width: min(18vw, 230px); height: min(18vw, 230px); right: 27%; top: 340px; background: var(--rust); opacity: .88; }
.about { display: grid; grid-template-columns: 1fr 2.25fr; gap: 40px; padding: 85px 9% 90px; }
.about-label { font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--rust); }
.statement { max-width: 710px; margin: -12px 0 64px; font: 600 clamp(30px, 4vw, 52px)/1.12 "Playfair Display", serif; letter-spacing: -.04em; }
.mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px; border-top: 1px solid var(--line); }
.mini-grid p { margin: 18px 0 0; color: #52606b; font-size: 13px; line-height: 1.6; }
.mini-grid strong { display: block; margin-bottom: 7px; color: var(--ink); font-size: 11px; }
footer { display: flex; gap: 13px; align-items: center; justify-content: center; padding: 23px; border-top: 1px solid var(--line); color: #6d7377; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.footer-mark { color: var(--rust); font-size: 14px; }
@media (max-width: 700px) { .page { padding: 18px 6% 0; } .nav-note { margin-left: 0; } .hero { min-height: 620px; padding: 100px 0 70px; } h1 { font-size: clamp(54px, 17vw, 88px); } .orb-one { width: 300px; height: 300px; right: -95px; top: 170px; } .orb-two { width: 145px; height: 145px; right: 28%; top: 350px; } .intro { margin-top: 34px; } .about { grid-template-columns: 1fr; gap: 35px; padding: 68px 0; } .statement { margin: -8px 0 42px; } .mini-grid { gap: 25px; } .hello-link { font-size: 0; border: 0; } .hello-link span { font-size: 20px; } }