@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --ink:#18231f; --muted:#65716b; --paper:#f6f4ee; --white:#fffdf8; --green:#315b45; --mint:#dbe9d7; --lime:#c9dd59; --coral:#e8775f; --line:rgba(24,35,31,.14); --serif:'Space Grotesk', sans-serif; --sans:'DM Sans', sans-serif; --radius:18px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.5; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
.container { width:min(1180px, calc(100% - 48px)); margin:auto; }
.announcement { background:var(--ink); color:var(--paper); text-align:center; padding:9px 18px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.site-header { background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.navbar { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.logo { font-family:var(--serif); font-weight:700; font-size:28px; letter-spacing:-.08em; }
.logo span { color:var(--coral); }
.nav-links { display:flex; align-items:center; gap:30px; font-size:14px; font-weight:600; }
.nav-links a { padding:9px 0; border-bottom:2px solid transparent; }
.nav-links a:hover, .nav-links a.active { border-color:var(--coral); }
.nav-actions { display:flex; gap:10px; align-items:center; }
.icon-button, .menu-button { border:1px solid var(--line); background:transparent; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--ink); }
.menu-button { display:none; border-radius:10px; font-size:20px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid var(--ink); border-radius:999px; padding:13px 22px; font-weight:700; font-size:14px; transition:.2s ease; }
.button:hover { transform:translateY(-2px); }
.button-dark { background:var(--ink); color:var(--paper); }
.button-light { background:var(--white); }
.button-coral { background:var(--coral); border-color:var(--coral); color:var(--white); }
.cart-pill { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--ink); border-radius:999px; padding:9px 13px; font-size:13px; font-weight:700; }
.cart-count { display:grid; place-items:center; min-width:21px; height:21px; border-radius:50%; background:var(--lime); font-size:11px; }
.basket-backdrop { position:fixed; inset:0; background:rgba(24,35,31,.38); z-index:19; }
.basket-panel { position:fixed; top:0; right:0; bottom:0; z-index:20; width:min(430px, 100%); padding:30px; background:var(--paper); box-shadow:-18px 0 45px rgba(24,35,31,.18); transform:translateX(105%); transition:transform .25s ease; overflow:auto; }
.basket-panel.open { transform:translateX(0); }
.basket-head { display:flex; justify-content:space-between; align-items:start; gap:20px; border-bottom:1px solid var(--line); padding-bottom:22px; }
.basket-head .eyebrow { margin-bottom:8px; }
.basket-head h2 { font-size:36px; margin:0; }
.basket-close { border:1px solid var(--line); background:transparent; width:38px; height:38px; border-radius:50%; font-size:24px; line-height:1; }
.basket-items { display:grid; gap:12px; padding:22px 0; }
.basket-empty { color:var(--muted); margin:0; padding:25px 0; }
.basket-item { display:grid; grid-template-columns:1fr auto; gap:8px 18px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.basket-item strong { font-family:var(--serif); font-size:17px; }
.basket-item small { color:var(--muted); }
.basket-item button { grid-column:2; grid-row:1 / span 2; align-self:center; border:0; background:transparent; color:var(--coral); font-weight:700; }
.basket-summary { border-top:2px solid var(--ink); padding-top:18px; }
.basket-summary > div { display:flex; justify-content:space-between; align-items:center; font-size:15px; }
.basket-summary strong { font-family:var(--serif); font-size:24px; }
.basket-summary p, .checkout-note { color:var(--muted); font-size:13px; }
.basket-checkout { width:100%; margin-top:10px; }
.checkout-form { display:grid; gap:9px; margin-top:25px; padding-top:25px; border-top:1px solid var(--line); }
.checkout-form h3 { margin-bottom:6px; }
.checkout-form label { margin-top:4px; }
.checkout-form input, .checkout-form textarea { background:var(--white); }
.checkout-status { color:var(--green); font-weight:700; margin:0; }
.hero { padding:58px 0 74px; }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:58px; align-items:center; }
.eyebrow { color:var(--coral); text-transform:uppercase; font-size:12px; letter-spacing:.16em; font-weight:700; margin-bottom:20px; }
h1,h2,h3 { font-family:var(--serif); line-height:1.02; letter-spacing:-.055em; margin:0 0 20px; }
h1 { font-size:clamp(48px, 7vw, 88px); max-width:690px; }
h2 { font-size:clamp(34px, 5vw, 58px); }
h3 { font-size:25px; }
.lede { font-size:19px; color:var(--muted); max-width:525px; }
.hero-copy .button-row { margin-top:30px; }
.button-row { display:flex; flex-wrap:wrap; gap:12px; }
.hero-art { position:relative; min-height:525px; }
.hero-art img { width:86%; height:525px; object-fit:cover; object-position:50% 34%; margin-left:auto; border-radius:48% 48% 18px 18px; }
.art-note { position:absolute; left:0; bottom:28px; background:var(--lime); max-width:215px; padding:18px; font-family:var(--serif); font-weight:700; font-size:19px; line-height:1.1; transform:rotate(-5deg); }
.section { padding:90px 0; }
.section-tint { background:var(--mint); }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:32px; }
.section-head p { max-width:360px; color:var(--muted); margin:0; }
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.collection-card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.collection-card img { width:100%; height:300px; object-fit:cover; object-position:50% 36%; }
.card-body { padding:22px; }
.card-body p { color:var(--muted); margin:0 0 20px; }
.card-link { font-weight:700; font-size:14px; display:inline-flex; gap:9px; align-items:center; }
.stat-band { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat { background:var(--paper); padding:34px 28px; }
.stat strong { display:block; font-family:var(--serif); font-size:24px; margin-bottom:8px; }
.stat p { margin:0; color:var(--muted); font-size:14px; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split img { width:100%; height:470px; object-fit:cover; object-position:50% 36%; border-radius:var(--radius); }
.pill { display:inline-block; background:var(--lime); padding:8px 13px; border-radius:999px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:20px; }
.quote { background:var(--coral); color:var(--white); padding:38px; border-radius:var(--radius); min-height:230px; display:flex; flex-direction:column; justify-content:space-between; }
.quote p { font-family:var(--serif); font-size:28px; line-height:1.08; letter-spacing:-.04em; margin:0; }
.quote small { font-weight:700; }
.page-hero { padding:74px 0 64px; border-bottom:1px solid var(--line); }
.page-hero-inner { display:flex; justify-content:space-between; gap:40px; align-items:end; }
.page-hero h1 { max-width:730px; }
.page-hero p { max-width:370px; color:var(--muted); font-size:18px; margin:0; }
.shop-hero { background:var(--mint); }
.shop-toolbar { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:32px; }
.shop-toolbar h2 { margin-bottom:0; }
.filter-list { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.filter-button { border:1px solid var(--line); background:var(--white); color:var(--ink); border-radius:999px; padding:10px 15px; font-size:13px; font-weight:700; }
.filter-button:hover, .filter-button.active { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.product-card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:12px; display:flex; flex-direction:column; gap:16px; }
.product-card.is-hidden { display:none; }
.product-image { position:relative; overflow:hidden; border-radius:12px; background:var(--mint); }
.product-image img { width:100%; height:285px; object-fit:contain; object-position:center; padding:10px; }
.product-tag { position:absolute; left:12px; bottom:12px; background:var(--lime); border-radius:999px; padding:7px 10px; font-size:11px; font-weight:700; }
.product-info { display:flex; justify-content:space-between; align-items:start; gap:16px; padding:0 8px; }
.product-info h3 { font-size:22px; margin-bottom:7px; }
.product-info p { color:var(--muted); font-size:14px; margin:0; }
.product-info strong { font-family:var(--serif); font-size:20px; white-space:nowrap; }
.product-card .add-button { margin:0 8px 8px; }
.add-button.added { background:var(--green); border-color:var(--green); }
.shop-status { min-height:24px; color:var(--green); font-weight:700; margin:22px 0 0; }
.service-card { background:var(--white); padding:30px; border:1px solid var(--line); border-radius:var(--radius); min-height:280px; display:flex; flex-direction:column; justify-content:space-between; }
.service-number { color:var(--coral); font-family:var(--serif); font-size:14px; }
.process { counter-reset:step; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.process-step { border-top:2px solid var(--ink); padding-top:18px; }
.process-step strong { display:block; font-family:var(--serif); font-size:26px; margin-bottom:12px; }
.process-step p { color:var(--muted); margin:0; }
.about-image { height:560px; object-fit:cover; object-position:50% 34%; border-radius:var(--radius); width:100%; }
.value-list { border-top:1px solid var(--line); }
.value { padding:20px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:30px; }
.value strong { font-family:var(--serif); font-size:21px; }
.value span { max-width:370px; color:var(--muted); }
.contact-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; }
.contact-details { display:grid; gap:28px; }
.detail strong { display:block; font-family:var(--serif); font-size:21px; margin-bottom:5px; }
.detail p { color:var(--muted); margin:0; }
.form { background:var(--white); padding:32px; border:1px solid var(--line); border-radius:var(--radius); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field { display:grid; gap:8px; margin-bottom:20px; }
.field-full { grid-column:1/-1; }
label { font-size:13px; font-weight:700; }
input, select, textarea { border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:10px; padding:13px 14px; outline:none; width:100%; }
textarea { min-height:140px; resize:vertical; }
input:focus, select:focus, textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(49,91,69,.15); }
.form-message { margin-top:16px; font-weight:600; }
.form-message.success { color:var(--green); }
.form-message.error { color:#a13f32; }
.newsletter { background:var(--green); color:var(--paper); padding:58px 0; }
.newsletter-inner { display:flex; align-items:center; justify-content:space-between; gap:38px; }
.newsletter h2 { max-width:490px; margin:0; }
.newsletter form { display:flex; gap:8px; min-width:420px; }
.newsletter input { background:var(--white); border:0; }
.footer { background:var(--ink); color:var(--paper); padding:55px 0 24px; }
.footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:30px; padding-bottom:55px; }
.footer .logo { color:var(--paper); }
.footer p { color:#b9c1bc; max-width:250px; }
.footer h4 { margin:0 0 14px; font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--lime); }
.footer-links { display:grid; gap:9px; color:#d3dad5; font-size:14px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.18); padding-top:20px; display:flex; justify-content:space-between; color:#aeb8b1; font-size:12px; }
@media (max-width:800px) { .container { width:min(100% - 32px, 600px); } .nav-links, .nav-actions .button { display:none; } .menu-button { display:grid; } .nav-links.open { display:flex; position:absolute; left:0; right:0; top:77px; flex-direction:column; align-items:flex-start; background:var(--paper); padding:20px 16px 24px; border-bottom:1px solid var(--line); gap:4px; } .nav-links.open a { width:100%; padding:12px 0; } .hero { padding-top:38px; } .hero-grid, .split, .contact-grid { grid-template-columns:1fr; gap:34px; } .hero-art { min-height:0; order:-1; } .hero-art img { width:100%; height:auto; aspect-ratio:4 / 5; object-position:50% 30%; } .art-note { bottom:14px; } .card-grid, .process, .stat-band, .product-grid { grid-template-columns:1fr; } .section { padding:62px 0; } .section-head, .page-hero-inner, .newsletter-inner, .shop-toolbar { display:block; } .section-head p, .page-hero p { margin-top:15px; } .page-hero { padding:52px 0 45px; } .about-image, .split img { height:auto; aspect-ratio:4 / 3; object-position:50% 34%; } .collection-card img { height:auto; aspect-ratio:4 / 3; object-position:50% 32%; } .filter-list { justify-content:flex-start; margin-top:22px; } .product-image img { height:auto; aspect-ratio:4 / 3; } .newsletter form { min-width:0; margin-top:25px; flex-direction:column; } .footer-grid { grid-template-columns:1fr 1fr; } .footer-bottom { display:block; } .footer-bottom span { display:block; margin-top:8px; } .form-grid { grid-template-columns:1fr; gap:0; } .field-full { grid-column:auto; } .basket-panel { padding:22px 18px; } }