:root { --ink:#22332d; --paper:#fbf8f1; --cream:#f1eadc; --green:#dbe9d4; --deep-green:#345442; --coral:#e77d60; --yellow:#f2c55c; --muted:#66736d; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; } .topbar,main,footer { max-width:1200px; margin:auto; }
.topbar { min-height:80px; display:flex; align-items:center; justify-content:space-between; padding:0 42px; } .brand { color:var(--ink); font-weight:700; font-size:1.35rem; letter-spacing:-.09em; text-decoration:none; }.brand span { color:var(--coral); }.menu { display:flex; align-items:center; gap:32px; }.menu a,footer a { color:var(--ink); font-size:.92rem; font-weight:700; text-decoration:none; }.menu a:hover,footer a:hover { color:var(--coral); }.menu-button { display:none; }
.hero { min-height:590px; background:var(--green); padding:76px 9%; display:grid; grid-template-columns:1fr .8fr; align-items:center; gap:50px; border-radius:0 0 52px 52px; overflow:hidden; }.eyebrow { margin:0 0 13px; color:#56755d; font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; } h1,h2,h3 { font-family:Fraunces,serif; font-weight:600; letter-spacing:-.05em; line-height:1.02; } h1 { max-width:600px; margin:0; font-size:clamp(3.45rem,6.3vw,5.9rem); } h1 em { color:var(--coral); font-style:italic; } h2 { margin:0; font-size:clamp(2.2rem,4vw,4rem); } h3 { margin:8px 0 10px; font-size:1.65rem; }.lead { max-width:540px; margin:25px 0 30px; color:#40534b; font-size:1.08rem; line-height:1.65; }.button { display:inline-flex; align-items:center; gap:17px; padding:15px 21px; border-radius:30px; background:var(--ink); color:#fff; font-weight:700; text-decoration:none; transition:transform .2s,background .2s; }.button:hover { background:var(--deep-green); transform:translateY(-2px); }.button span { color:#b9d9ae; font-size:1.2rem; }.disclosure { max-width:460px; margin:22px 0 0; color:#60776a; font-size:.73rem; line-height:1.4; }
.hero-art { position:relative; height:390px; }.sun { position:absolute; width:225px; height:225px; right:32px; top:10px; border-radius:50%; background:var(--yellow); }.arch { position:absolute; bottom:0; border-radius:220px 220px 0 0; }.arch-back { width:290px; height:340px; right:64px; background:var(--deep-green); }.arch-front { width:230px; height:280px; right:0; background:var(--coral); display:flex; align-items:center; padding:30px; color:#fff6e8; font-family:Fraunces,serif; font-size:1.95rem; line-height:.92; transform:rotate(4deg); box-shadow:12px 13px 0 rgba(34,51,45,.1); }.hero-note { position:absolute; top:255px; left:0; padding:20px 22px; transform:rotate(-7deg); background:var(--paper); box-shadow:7px 7px 0 rgba(34,51,45,.1); font-family:Fraunces,serif; font-size:1.12rem; line-height:1.1; }.hero-note b { color:var(--coral); font-size:1.45rem; }
.section { padding:110px 9%; }.section-heading { margin-bottom:36px; }.inline-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; }.offer-intro { max-width:290px; margin:0; color:var(--muted); font-size:.93rem; line-height:1.5; }.category-grid,.offer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }.category-card { min-height:205px; padding:25px; border-radius:17px; color:var(--ink); text-decoration:none; transition:transform .2s,box-shadow .2s; }.category-card:hover { transform:translateY(-5px); box-shadow:0 12px 20px rgba(34,51,45,.1); }.nature { background:#d9e7cf; }.mind { background:#f3dfba; }.wellness { background:#d7e6e9; }.balance { background:#f5d6c9; }.category-icon { display:block; margin-bottom:31px; font-size:2rem; }.category-card strong,.category-card small { display:block; }.category-card strong { font-size:1.05rem; }.category-card small { margin-top:8px; color:#52655e; font-size:.84rem; line-height:1.4; }
.offers { background:var(--cream); }.offer-grid { align-items:stretch; }.offer-card { display:flex; flex-direction:column; overflow:hidden; border-radius:18px; background:#fffdf9; transition:transform .2s,box-shadow .2s; }.offer-card:hover { transform:translateY(-5px); box-shadow:0 15px 28px rgba(34,51,45,.12); }.offer-card img { width:100%; height:225px; object-fit:cover; display:block; background:#e9e1d3; }.offer-content { height:100%; padding:21px 22px 24px; display:flex; flex-direction:column; }.offer-content > p { margin:0; color:#61766a; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.offer-content > span { color:var(--muted); font-size:.9rem; line-height:1.45; }.offer-content a { margin-top:auto; padding-top:22px; color:var(--ink); font-size:.9rem; font-weight:700; text-decoration:none; }.offer-content a:hover { color:var(--coral); }.offer-content b { margin-left:4px; color:var(--coral); }
.about { display:grid; grid-template-columns:1fr 1fr; gap:72px; padding:105px 9%; background:var(--ink); color:white; }.about .eyebrow { color:#b6d4a9; }.about h2 { max-width:480px; }.about-copy { max-width:475px; }.about-copy p { margin:0 0 20px; color:#d5ddd7; font-size:1.08rem; line-height:1.65; }.about-copy p:last-child { margin-bottom:0; color:#aebdb4; }.contact { padding:105px 9%; text-align:center; }.contact .eyebrow { margin-bottom:14px; }.contact > p:not(.eyebrow):not(.form-message) { max-width:460px; margin:18px auto 0; color:var(--muted); line-height:1.55; }.contact form { display:flex; gap:8px; max-width:520px; margin:30px auto 0; }.contact input { flex:1; min-width:0; padding:15px 18px; border:1px solid #cfc8bc; border-radius:28px; color:var(--ink); background:#fff; font:inherit; }.contact button { border:0; border-radius:28px; padding:0 20px; background:var(--coral); color:#fff; cursor:pointer; font:700 .92rem inherit; }.contact button span { margin-left:7px; }.form-message { min-height:22px; margin:11px 0 0; color:#55755b; font-size:.9rem; } footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:32px 9%; border-top:1px solid #e2ddd4; color:var(--muted); font-size:.82rem; } footer p { margin:0; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media (max-width:800px) { .topbar { padding:0 25px; position:relative; }.menu-button { display:block; padding:8px 0; border:0; background:none; color:var(--ink); font:700 .9rem inherit; cursor:pointer; }.menu-button span { margin-left:6px; }.menu { display:none; position:absolute; z-index:3; top:63px; right:20px; min-width:150px; padding:18px; flex-direction:column; align-items:flex-start; gap:17px; border-radius:13px; background:#fffdf9; box-shadow:0 12px 30px rgba(34,51,45,.15); }.menu.open { display:flex; }.hero { grid-template-columns:1fr; padding:65px 9% 45px; gap:15px; }.hero-art { height:330px; width:min(100%,420px); justify-self:center; }.sun { width:190px; height:190px; right:20px; }.arch-back { width:250px; height:290px; right:42px; }.arch-front { width:195px; height:238px; font-size:1.6rem; }.hero-note { top:210px; }.section { padding:76px 9%; }.category-grid,.offer-grid { grid-template-columns:repeat(2,1fr); }.about { grid-template-columns:1fr; gap:32px; padding:76px 9%; } }
@media (max-width:500px) { .hero { min-height:auto; border-radius:0 0 30px 30px; }.hero-art { transform:scale(.88); transform-origin:top center; margin-bottom:-34px; }.inline-heading { display:block; }.offer-intro { margin-top:15px; }.category-grid,.offer-grid { grid-template-columns:1fr; }.category-card { min-height:150px; }.category-icon { margin-bottom:20px; }.offer-card img { height:250px; }.contact form { flex-direction:column; }.contact input,.contact button { min-height:52px; } footer { flex-wrap:wrap; justify-content:center; text-align:center; }.lead { font-size:1rem; } }