:root { --ink: #513521; --pink: #e889a0; --cream: #fffaf4; --peach: #f9e6dd; --line: rgba(81,53,33,.16); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "DM Sans", sans-serif; }
a { color: inherit; text-decoration: none; }
.site-header { max-width: 1180px; margin: 0 auto; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; gap: 11px; align-items: center; font-weight: 700; letter-spacing: -.02em; }
.brand-logo { display: block; width: 72px; height: 72px; object-fit: contain; object-position: center; }
.nav-links { display: flex; align-items: center; gap: 32px; font-size: 14px; font-weight: 500; }
.nav-links a:not(.nav-cta) { opacity: .75; }.nav-links a:not(.nav-cta):hover { opacity: 1; }
.nav-cta { padding: 11px 18px; border: 1px solid var(--line); border-radius: 100px; }
.hero { max-width: 1180px; min-height: 625px; margin: 0 auto; padding: 92px 32px 120px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px; }
.eyebrow { color: #a76c70; text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 700; }
h1 { max-width: 650px; margin: 20px 0 24px; font-family: "Playfair Display", serif; font-size: clamp(52px, 7vw, 92px); line-height: .98; font-weight: 500; letter-spacing: -.055em; }
.hero-text { max-width: 440px; color: rgba(81,53,33,.72); font-size: 17px; line-height: 1.65; }
.hero-actions { display: flex; gap: 12px; align-items: center; margin-top: 36px; }.button { display: inline-flex; gap: 18px; align-items: center; padding: 15px 21px; border-radius: 100px; font-size: 14px; font-weight: 700; transition: transform .2s, box-shadow .2s; }.button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(81,53,33,.12); }.button-primary { color: var(--ink); background: var(--pink); }.button-quiet { color: rgba(81,53,33,.75); }
.hero-art { position: relative; min-height: 400px; }.art-sun { position: absolute; width: 310px; height: 310px; top: 32px; left: 50%; transform: translateX(-50%); background: var(--peach); border-radius: 50%; }.art-card { position: absolute; left: 50%; border-radius: 10px; box-shadow: 0 22px 45px rgba(81,53,33,.14); }.art-card-back { width: 240px; height: 290px; top: 55px; transform: translateX(-43%) rotate(9deg); background: #dfabb0; }.art-card-front { width: 240px; height: 290px; top: 65px; transform: translateX(-58%) rotate(-7deg); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; color: #fffaf4; background: var(--pink); }.art-card-front span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }.art-card-front strong { font-family: "Playfair Display", serif; font-size: 29px; line-height: .97; font-weight: 500; }.art-flower { position: absolute; font-size: 52px; color: var(--ink); }.flower-one { right: 12%; top: 8%; }.flower-two { left: 9%; bottom: 6%; font-size: 36px; }
.intro-strip { padding: 120px 32px; text-align: center; background: #f7e7dd; }.intro-strip .eyebrow { margin-bottom: 30px; }.intro-statement { margin: 0; font-family: "Playfair Display", serif; font-size: clamp(32px, 4vw, 58px); line-height: 1.12; letter-spacing: -.04em; }.intro-statement em { color: #b66c78; font-style: normal; }
.highlights { max-width: 1180px; margin: 0 auto; padding: 110px 32px 130px; }.section-heading { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }.section-heading span { font-size: 12px; opacity: .6; }.highlight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 38px; }.highlight-card { min-height: 210px; padding: 26px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.27); }.card-number { color: #b66c78; font-size: 12px; }.highlight-card h2 { margin: 34px 0 12px; font-family: "Playfair Display", serif; font-size: 28px; font-weight: 500; }.highlight-card p { color: rgba(81,53,33,.67); line-height: 1.6; font-size: 14px; }.site-footer { max-width: 1180px; margin: 0 auto; padding: 26px 32px 35px; display: flex; justify-content: space-between; color: rgba(81,53,33,.58); border-top: 1px solid var(--line); font-size: 12px; }
@media (max-width: 720px) { .site-header { padding: 22px 20px; }.brand-logo { width: 58px; height: 58px; }.nav-links a:not(.nav-cta) { display: none; }.hero { display: block; padding: 62px 20px 80px; }.hero-art { margin-top: 54px; min-height: 340px; }.art-sun { width: 250px; height: 250px; }.art-card { width: 200px; height: 245px; }.art-card-front strong { font-size: 25px; }.intro-strip, .highlights { padding-left: 20px; padding-right: 20px; }.highlight-grid { grid-template-columns: 1fr; }.site-footer { margin: 0 20px; padding-left: 0; padding-right: 0; } }