:root { --page: #faf8f0; --surface: #fffdf7; --ink: #30352b; --muted: #666b5d; --accent: #4d623c; --line: #e0dfd0; --button-ink: #fff; --gold: #95691e; }
.osmanthus h1, .osmanthus h2 { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-weight: 500; }
.osmanthus .hero h1 { font-size: clamp(52px, 7.8vw, 88px); letter-spacing: -.055em; }
.osmanthus .hero { grid-template-columns: 1.25fr 1fr; gap: 35px; }
.botanical { width: 100%; max-width: 430px; justify-self: end; }
.botanical img { display: block; width: 100%; border-radius: 28%; mix-blend-mode: multiply; }
.workflows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; margin-top: 38px; }
.workflow { padding-top: 24px; border-top: 1px solid var(--line); }
.workflow h3 { margin-bottom: 16px; }
.workflow blockquote { font-family: "Iowan Old Style", Palatino, Georgia, serif; font-size: 23px; line-height: 1.4; margin: 0 0 15px; color: var(--gold); }
.workflow p { color: var(--muted); font-size: 16px; }
.osmanthus .button { border-radius: 7px; }
@media (max-width: 850px) { .workflows { gap: 22px; } }
@media (max-width: 620px) { .osmanthus .hero { grid-template-columns: 1fr; gap: 15px; padding-bottom: 30px; } .botanical { max-width: 280px; justify-self: center; } .workflows { grid-template-columns: 1fr; gap: 27px; } }
@media (prefers-color-scheme: dark) { :root { --page: #20241e; --surface: #2b3027; --ink: #f1f0e3; --muted: #bfc3b2; --accent: #bed29e; --line: #404735; --button-ink: #223018; --gold: #e4c17e; } .botanical img { mix-blend-mode: normal; border-radius: 27%; } }