@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root { --ink:#17231e; --muted:#718079; --cream:#f7f5ef; --green:#1b4032; --accent:#e8a45a; --line:#e2e5df; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:'DM Sans',sans-serif; }
.container { width:min(1160px,calc(100% - 40px)); margin:0 auto; }
.site-header { background:var(--cream); border-bottom:1px solid var(--line); }
.nav { height:84px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:12px; color:var(--green); font-size:18px; font-weight:700; letter-spacing:-.04em; text-decoration:none; }
.brand img { display:block; width:54px; height:54px; object-fit:cover; border-radius:50%; }
.brand b { color:var(--accent); font-weight:700; }
.brand span { color:var(--accent); }
.header-action { color:var(--green); font-size:13px; font-weight:700; text-decoration:none; border-bottom:1px solid var(--green); padding-bottom:4px; }
.hero { position:relative; overflow:hidden; background:var(--green); color:#fff; min-height:520px; display:flex; align-items:center; }
.hero-content { position:relative; z-index:1; padding:80px 0; }
.eyebrow { color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; margin:0 0 18px; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:'Playfair Display',serif; letter-spacing:-.045em; }
h1 { font-size:clamp(50px,7vw,88px); line-height:.95; max-width:730px; margin-bottom:26px; }
.hero-copy { color:#d3ded8; font-size:17px; line-height:1.65; max-width:480px; margin-bottom:34px; }
.primary-button { background:var(--accent); color:var(--ink); display:inline-block; font-size:13px; font-weight:700; padding:15px 21px; text-decoration:none; transition:transform .2s,background .2s; }
.primary-button:hover { background:#f3bb76; transform:translateY(-2px); }
.hero-glow { position:absolute; width:600px; height:600px; border:1px solid rgba(232,164,90,.25); border-radius:50%; right:-120px; top:-50px; box-shadow:0 0 0 80px rgba(232,164,90,.03),0 0 0 160px rgba(232,164,90,.03); }
.hero-mark { position:absolute; z-index:1; right:13%; top:50%; width:290px; height:290px; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; }
.hero-mark img { position:relative; z-index:1; width:205px; height:205px; object-fit:cover; border-radius:50%; box-shadow:0 16px 45px rgba(0,0,0,.28); }
.hero-ring { position:absolute; inset:0; border:1px solid rgba(232,164,90,.55); border-radius:50%; transform:rotate(18deg); }
.hero-ring:after { content:""; position:absolute; inset:15px; border:1px solid rgba(232,164,90,.22); border-radius:50%; }
.hero-mark p { position:absolute; bottom:-1px; color:var(--accent); font-size:10px; font-weight:700; letter-spacing:.2em; margin:0; }
.catalogue { padding:92px 0 110px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:42px; }
h2 { color:var(--green); font-size:48px; margin:0; }
.section-note { color:var(--muted); font-size:13px; margin:0 0 5px; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:27px 22px; }
.product-card { background:#fff; border:1px solid var(--line); transition:box-shadow .2s,transform .2s; }
.product-card:hover { box-shadow:0 15px 32px rgba(23,35,30,.1); transform:translateY(-4px); }
.product-card img { display:block; width:100%; height:250px; object-fit:cover; background:#ecebe5; }
.product-card > img { cursor:zoom-in; transition:opacity .2s; }
.product-card > img:hover { opacity:.88; }
.image-modal { position:fixed; z-index:20; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:40px; background:rgba(8,18,14,.92); }
.image-modal[hidden] { display:none; }
.image-modal img { max-width:min(94vw,1200px); max-height:82vh; object-fit:contain; box-shadow:0 20px 70px rgba(0,0,0,.45); }
.image-modal p { color:#d3ded8; font-size:12px; margin:18px 0 0; }
.modal-close { position:absolute; top:20px; right:28px; border:0; background:transparent; color:#fff; cursor:pointer; font-size:42px; line-height:1; }
.modal-open { overflow:hidden; }
.product-info { padding:21px 22px 20px; }
.product-number { color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.12em; margin-bottom:10px; }
h3 { color:var(--green); font-size:20px; margin-bottom:8px; }
.description { color:var(--muted); font-size:13px; line-height:1.5; min-height:39px; margin-bottom:20px; }
.product-footer { align-items:center; border-top:1px solid var(--line); display:flex; justify-content:space-between; padding-top:17px; }
.product-footer strong { color:var(--green); font-size:12px; }
.product-footer a { color:var(--green); font-size:12px; font-weight:700; text-decoration:none; }
.product-footer a span { color:var(--accent); font-size:17px; margin-left:3px; }
.contact-banner { background:#e9eee8; padding:64px 0; }
.contact-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.contact-inner h2 { font-size:39px; max-width:560px; }
.light-button { background:var(--green); color:#fff; }
.site-footer { background:var(--green); color:#b9c8c0; font-size:12px; padding:25px 0; }
.site-footer .container { display:flex; justify-content:space-between; }
@media (max-width:760px) { .container{width:min(100% - 28px,1160px)} .hero{min-height:570px; align-items:flex-start}.hero-content{padding-top:72px}.hero-mark{width:220px;height:220px;right:50%;top:auto;bottom:30px;transform:translateX(50%)}.hero-mark img{width:150px;height:150px}.catalogue{padding:65px 0 80px}.section-heading,.contact-inner{align-items:flex-start; flex-direction:column;}.section-note{margin-top:12px}.product-grid{grid-template-columns:repeat(2,1fr);gap:14px}.product-card img{height:190px}.product-info{padding:16px}.description{font-size:12px}.product-footer{align-items:flex-start; flex-direction:column; gap:10px}.contact-inner h2{font-size:34px}.site-footer .container{gap:10px; flex-direction:column} }
@media (max-width:480px) { h1{font-size:53px}.product-grid{grid-template-columns:1fr}.product-card img{height:260px}.brand{font-size:16px}.brand img{width:48px;height:48px} }
