:root { --ink: #171715; --paper: #f4f1ea; --warm: #d7a846; --muted: #706d66; --line: rgba(23,23,21,.18); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
.site-header { align-items: center; display: flex; justify-content: space-between; padding: 28px 5vw; position: absolute; width: 100%; z-index: 2; }
.wordmark { font-size: 15px; font-weight: 800; letter-spacing: .17em; }.wordmark span { font-size: 8px; vertical-align: top; }
nav { align-items: center; display: flex; gap: 30px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } nav a { transition: opacity .2s; } nav a:hover, .footer-links a:hover { opacity: .55; }
.nav-buy { border-bottom: 1px solid currentColor; padding-bottom: 5px; }
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 720px; padding: 150px 5vw 70px; }
.hero-copy { align-self: center; max-width: 590px; padding-bottom: 35px; }.eyebrow { color: var(--muted); font-size: 10px; letter-spacing: .16em; margin: 0 0 25px; text-transform: uppercase; }
h1, h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.045em; line-height: .94; margin: 0; } h1 { font-size: clamp(58px, 7.5vw, 112px); } h2 { font-size: clamp(48px, 6vw, 82px); } em { color: #9b7121; font-style: italic; }
.hero-text { font-size: 16px; line-height: 1.55; margin: 35px 0 30px; max-width: 390px; }.button { display: inline-flex; gap: 34px; justify-content: space-between; min-width: 188px; padding: 17px 20px; font-size: 11px; font-weight: bold; letter-spacing: .1em; text-transform: uppercase; transition: transform .2s, background .2s; }.button:hover { transform: translateY(-3px); }.button-dark { background: var(--ink); color: var(--paper); }.button-light { background: var(--paper); color: var(--ink); }
.microcopy { color: var(--muted); font-size: 10px; letter-spacing: .03em; margin: 14px 0; }.hero-product { align-items: center; display: flex; flex-direction: column; justify-content: center; position: relative; }.product-wash { background: #ebe8e0; border-radius: 50%; height: 440px; position: absolute; width: 440px; }.hero-product img { filter: drop-shadow(0 22px 18px rgba(0,0,0,.2)); max-height: 520px; max-width: 88%; object-fit: contain; position: relative; z-index: 1; }.image-caption { font-family: Georgia, serif; font-size: 13px; font-style: italic; margin: 5px 0 0; position: relative; z-index: 1; }
.ticker { align-items: center; background: var(--ink); color: var(--paper); display: flex; gap: 32px; justify-content: center; overflow: hidden; padding: 20px; text-transform: uppercase; letter-spacing: .18em; font-size: 10px; }.ticker i { color: var(--warm); font-style: normal; }
.statement, .details { display: grid; gap: 8vw; grid-template-columns: .7fr 1.3fr; padding: 145px 12vw; }.statement h2, .details h2 { margin-bottom: 35px; }.statement > div p { color: var(--muted); font-size: 18px; line-height: 1.6; max-width: 490px; }
.features { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 5vw; }.features article { border-right: 1px solid var(--line); padding: 45px 4vw 60px 0; }.features article + article { padding-left: 4vw; }.features article:last-child { border: 0; }.features span { color: var(--warm); font-size: 11px; }.features h3 { font-family: Georgia, serif; font-size: 27px; font-weight: 400; margin: 38px 0 15px; }.features p { color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 245px; }
.details { background: #e6e1d7; grid-template-columns: 1fr 1fr; margin-top: 80px; }.detail-list { border-top: 1px solid var(--line); }.detail-list div { border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 25px; padding: 21px 0; }.detail-list span { color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }.detail-list strong { font-size: 13px; font-weight: normal; text-align: right; }
.closing { background: var(--ink); color: var(--paper); padding: 140px 10vw; text-align: center; }.closing .eyebrow { color: #aaa59b; }.closing h2 { margin-bottom: 43px; }.closing em { color: var(--warm); }.closing .microcopy { color: #aaa59b; }
.site-footer { display: grid; gap: 30px; grid-template-columns: 1fr 1fr auto; padding: 48px 5vw; }.footer-mark { display: inline-block; }.site-footer p { color: var(--muted); font-size: 11px; margin: 14px 0 0; }.footer-links { align-items: center; display: flex; gap: 24px; font-size: 11px; }.copyright { align-self: center; text-align: right; }
.legal { margin: 0 auto; max-width: 850px; padding: 160px 30px 100px; }.legal h1 { font-size: clamp(52px, 8vw, 90px); margin-bottom: 25px; }.legal .updated { color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }.legal-content { border-top: 1px solid var(--line); margin-top: 70px; padding-top: 35px; }.legal h2 { font-family: Arial, sans-serif; font-size: 18px; font-weight: bold; letter-spacing: 0; line-height: 1.2; margin: 38px 0 12px; }.legal p, .legal li { color: #4f4c46; font-size: 15px; line-height: 1.75; }.legal ul { padding-left: 20px; }
@media (max-width: 700px) { .site-header { padding: 23px 6vw; } nav a:not(.nav-buy) { display: none; } .hero { display: flex; flex-direction: column; min-height: 0; padding: 130px 7vw 70px; }.hero-copy { padding: 0; }.hero-product { min-height: 480px; }.product-wash { height: 330px; width: 330px; }.hero-product img { max-height: 410px; max-width: 100%; }.statement, .details { display: block; padding: 90px 8vw; }.statement > div { margin-top: 65px; }.features { display: block; margin: 0 8vw; }.features article, .features article + article { border-bottom: 1px solid var(--line); border-right: 0; padding: 35px 0; }.features article:last-child { border-bottom: 0; }.details { margin-top: 35px; }.detail-list { margin-top: 55px; }.detail-list div { align-items: flex-start; flex-direction: column; gap: 8px; }.detail-list strong { text-align: left; }.closing { padding: 100px 7vw; }.site-footer { display: block; padding: 40px 7vw; }.footer-links { flex-wrap: wrap; margin-top: 35px; }.copyright { margin-top: 35px !important; text-align: left; } }