:root {
  --bg: #f5f0e7; --paper: #fbf8f2; --ink: #292820; --muted: #706d62; --olive: #4a5039; --olive-dark: #333827; --sand: #c7a875; --jute: #b78c50; --leather: #3b2b21; --line: rgba(41,40,32,.16); --shadow: 0 24px 70px rgba(45,40,31,.12); --radius: 4px;
}
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin:0; color:var(--ink); background:var(--bg); font-family: Arial, Helvetica, sans-serif; line-height:1.65; } a { color:inherit; text-decoration:none; } img { max-width:100%; display:block; }
.container { width:min(1180px, calc(100% - 40px)); margin-inline:auto; } .serif, h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; font-weight:400; } h1 { font-size:clamp(2.8rem, 7vw, 6.2rem); line-height:.98; margin:0; letter-spacing:-.035em; } h2 { font-size:clamp(2rem, 4.2vw, 3.9rem); line-height:1.05; margin:0 0 18px; } h3 { font-size:1.75rem; line-height:1.15; margin:0 0 12px; } p { margin:0 0 16px; }
.eyebrow { text-transform:uppercase; letter-spacing:.18em; font-size:.76rem; color:var(--olive); font-weight:700; margin-bottom:14px; } .lead { font-size:1.14rem; color:var(--muted); max-width:760px; }
.header { position:sticky; top:0; z-index:50; background:rgba(245,240,231,.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .nav { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:28px; } .brand { display:flex; align-items:center; gap:12px; } .monogram { font-family:Georgia,serif; font-size:2rem; letter-spacing:-.18em; width:44px; } .brand-copy strong { display:block; font-family:Georgia,serif; font-size:1.2rem; letter-spacing:.14em; font-weight:400; } .brand-copy span { display:block; font-size:.62rem; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; }
.nav-links { display:flex; align-items:center; gap:24px; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; } .nav-links a { padding:30px 0 25px; border-bottom:2px solid transparent; } .nav-links a:hover, .nav-links a.active { border-color:var(--olive); } .menu-btn { display:none; border:1px solid var(--line); background:transparent; padding:9px 12px; font-size:1rem; }
.hero-image { position:relative; min-height:570px; background:url('assets/hero-estate.jpg') center/cover no-repeat; border-bottom:1px solid var(--line); } .hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,20,16,.44) 0%, rgba(20,20,16,.26) 36%, rgba(20,20,16,.10) 66%, rgba(20,20,16,.04) 100%); } .hero-caption { display:none; }
.section { padding:96px 0; border-bottom:1px solid var(--line); } .section-sm { padding:64px 0; } .center { text-align:center; } .intro { max-width:780px; margin:0 auto 50px; } .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.product-card { position:relative; background:var(--paper); border:1px solid var(--line); min-height:520px; padding:28px; overflow:hidden; transition:.25s ease; } .product-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); } .product-visual { height:270px; display:grid; place-items:center; background:linear-gradient(145deg,#eee5d5,#fbf8f2); margin-bottom:25px; overflow:hidden; }
.bottle { position:relative; width:80px; height:230px; border-radius:18px 18px 12px 12px; background:linear-gradient(90deg,#263022,#53604a 50%,#20271c); box-shadow:0 18px 30px rgba(0,0,0,.16); } .bottle:before { content:''; position:absolute; width:34px; height:74px; left:23px; top:-48px; border-radius:7px 7px 0 0; background:linear-gradient(90deg,#263022,#53604a 50%,#20271c); }
.sleeve { position:absolute; left:50%; bottom:18px; width:136px; height:136px; transform:translateX(-50%); border-radius:3px; background-color:#b9915c; background-image:repeating-linear-gradient(0deg,rgba(82,58,30,.12) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(82,58,30,.09) 0 1px,transparent 1px 4px); box-shadow:0 10px 24px rgba(60,42,22,.22); } .sleeve:after { content:'LM'; position:absolute; left:50%; bottom:12px; transform:translateX(-50%); font-family:Georgia,serif; font-size:1.15rem; } .premium .sleeve { border-top:10px solid var(--leather); border-bottom:10px solid var(--leather); }
.custom-visual { display:flex; align-items:flex-end; justify-content:center; gap:16px; } .custom-swatch { width:95px; height:200px; background:#b9915c; border-radius:4px; box-shadow:0 15px 28px rgba(60,42,22,.18); position:relative; background-image:repeating-linear-gradient(0deg,rgba(82,58,30,.12) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(82,58,30,.09) 0 1px,transparent 1px 4px); } .custom-swatch:nth-child(2){height:235px;background-color:#c4a06e}.custom-swatch:nth-child(3){height:180px;background-color:#a97b47} .custom-swatch:after { content:attr(data-logo); position:absolute; inset:0; display:grid; place-items:center; font-family:Georgia,serif; font-size:.9rem; text-align:center; padding:12px; }
.tag { display:inline-block; margin-top:14px; color:var(--olive); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:700; } .link-arrow { display:inline-block; margin-top:18px; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid var(--olive); padding-bottom:4px; }
.features { display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:#eee5d7; border:1px solid var(--line); } .feature { padding:30px; border-right:1px solid var(--line); } .feature:last-child { border-right:0; } .feature-icon { font-size:1.8rem; margin-bottom:12px; } .feature strong { display:block; text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; margin-bottom:7px; } .feature span { color:var(--muted); font-size:.92rem; }
.split { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; } .split-image { min-height:500px; background-size:cover; background-position:center; } .split-copy { padding:70px; background:var(--paper); display:flex; flex-direction:column; justify-content:center; } .split-copy.olive { background:#e4e6dc; }
.btn { display:inline-flex; align-items:center; justify-content:center; width:max-content; min-height:46px; padding:0 22px; border:1px solid var(--olive); text-transform:uppercase; letter-spacing:.09em; font-size:.75rem; transition:.2s; } .btn:hover { background:var(--olive); color:white; } .btn.primary { background:var(--olive); color:white; } .btn.primary:hover { background:var(--olive-dark); }
.cta { background:var(--olive); color:white; } .cta .container { display:flex; align-items:center; justify-content:space-between; gap:36px; } .cta p { color:rgba(255,255,255,.74); margin:0; } .cta .btn { color:white; border-color:rgba(255,255,255,.7); flex:none; }
.page-hero { padding:105px 0 75px; background:linear-gradient(135deg,#efe5d3,#faf7f0 55%,#dfe2d4); border-bottom:1px solid var(--line); } .page-hero .lead { margin-top:24px; } .detail-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:65px; align-items:center; } .specs { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:26px 0; } .spec { padding:17px; background:var(--paper); border:1px solid var(--line); } .spec strong { display:block; font-family:Georgia,serif; font-size:1.2rem; }
.steps { counter-reset:step; display:grid; gap:16px; } .step { position:relative; padding:22px 22px 22px 72px; background:var(--paper); border:1px solid var(--line); } .step:before { counter-increment:step; content:counter(step); position:absolute; left:20px; top:20px; width:34px; height:34px; border:1px solid var(--olive); border-radius:50%; display:grid; place-items:center; font-family:Georgia,serif; }
.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:50px; } .contact-box { background:var(--paper); border:1px solid var(--line); padding:34px; } form { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .field { display:grid; gap:7px; } .field.full { grid-column:1/-1; } label { font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; } input, select, textarea { width:100%; border:1px solid var(--line); background:#fffdf9; padding:13px 14px; font:inherit; color:var(--ink); } textarea { min-height:150px; resize:vertical; } .notice { font-size:.83rem; color:var(--muted); }
.footer { background:#ece5d9; padding:58px 0 24px; } .footer-grid { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; } .footer h4 { margin:0 0 13px; text-transform:uppercase; letter-spacing:.1em; font-size:.74rem; } .footer a, .footer p { color:var(--muted); font-size:.88rem; display:block; margin:0 0 6px; } .copyright { margin-top:38px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:.78rem; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
@media (max-width:900px){ .nav-links { display:none; position:absolute; top:82px; left:0; right:0; background:var(--paper); padding:14px 20px 22px; border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; gap:0; } .nav-links.open { display:flex; } .nav-links a { padding:12px 0; width:100%; } .menu-btn { display:block; } .hero-image { min-height:430px; background-position:center; } .grid-3, .features, .split, .detail-grid, .contact-grid, .footer-grid { grid-template-columns:1fr; } .feature { border-right:0; border-bottom:1px solid var(--line); } .feature:last-child { border-bottom:0; } .split-copy { padding:48px 30px; } .split-image { min-height:360px; } .cta .container { align-items:flex-start; flex-direction:column; } }
@media (max-width:600px){ .container { width:min(100% - 28px,1180px); } .brand-copy span { display:none; } .hero-image { min-height:340px; } .section { padding:70px 0; } .product-card { min-height:auto; padding:20px; } .product-visual { height:230px; } .specs, form { grid-template-columns:1fr; } .field.full { grid-column:auto; } .page-hero { padding:75px 0 55px; } }

.hero-content { position:relative; z-index:2; min-height:570px; display:flex; flex-direction:column; justify-content:flex-end; padding:80px 0 72px; color:white; max-width:860px; }
.hero-eyebrow { color:#efe3c3; }
.hero-lead { color:rgba(255,255,255,.84); max-width:720px; }
.hero-actions { display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.btn-light { border-color:rgba(255,255,255,.82); color:white; }
.btn-light:hover { background:white; color:var(--ink); border-color:white; }
.real-card .product-visual.photo { background:#f2ebdf; padding:0; }
.product-visual.photo img { width:100%; height:100%; object-fit:cover; }
.product-shot { background:var(--paper); border:1px solid var(--line); padding:18px; }
.product-shot img { width:100%; height:auto; display:block; }
.usage-section { background:#f8f4ec; }
.usage-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.usage-card { background:var(--paper); border:1px solid var(--line); overflow:hidden; }
.usage-photo { width:100%; height:420px; object-fit:cover; display:block; }
.usage-copy { padding:26px; }
.example-gallery { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.example-card { background:var(--paper); border:1px solid var(--line); overflow:hidden; }
.example-card img { width:100%; height:auto; display:block; }
.example-caption { padding:18px 20px 22px; }
.example-caption strong { display:block; font-family:Georgia,serif; font-size:1.1rem; margin-bottom:6px; }
.example-caption span { color:var(--muted); font-size:.92rem; }
@media (max-width:900px){ .hero-content { min-height:430px; padding:55px 0 46px; } .usage-grid, .example-gallery { grid-template-columns:1fr; } .usage-photo { height:360px; } }
@media (max-width:600px){ .hero-content { min-height:340px; padding:36px 0 30px; } .hero-actions { gap:10px; } .usage-photo { height:270px; } }

.section-note { margin:0 auto 24px; max-width:860px; text-align:center; }
.visual-grid { height:auto; background:var(--paper); padding:0; border:1px solid var(--line); }
.visual-grid img { width:100%; height:auto; display:block; object-fit:contain; }
.faithful-shot { background:#fff; }
.faithful-shot img { width:100%; height:auto; display:block; }

.hero-copy-panel { max-width:740px; padding:28px 34px 30px; background:linear-gradient(90deg, rgba(18,18,14,.42) 0%, rgba(18,18,14,.34) 58%, rgba(18,18,14,.10) 88%, rgba(18,18,14,0) 100%); border-radius:6px; }
.hero-content h1 { font-size:clamp(2.75rem, 5.6vw, 5rem); line-height:.92; max-width:680px; text-shadow:0 3px 14px rgba(0,0,0,.20); }
.hero-lead { color:rgba(255,255,255,.92); max-width:650px; text-shadow:0 2px 8px rgba(0,0,0,.18); }
.hero-actions { margin-top:24px; }
@media (max-width:900px){ .hero-copy-panel { max-width:680px; padding:22px 24px 24px; } .hero-content h1 { max-width:560px; } }
@media (max-width:600px){ .hero-copy-panel { padding:16px 16px 18px; } .hero-content h1 { font-size:clamp(2.3rem, 10vw, 3.4rem); line-height:.95; } .hero-lead { font-size:1rem; } }

.internals-section { background:#f8f4ec; }
.internals-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.internal-card { background:var(--paper); border:1px solid var(--line); overflow:hidden; }
.internal-visual { background:#fff; }
.internal-visual img { width:100%; height:auto; display:block; }
.internal-copy { padding:24px 24px 26px; }
.internal-list { margin:14px 0 0 18px; padding:0; color:var(--muted); }
.internal-list li { margin:0 0 6px; }
@media (max-width:900px){ .internals-grid { grid-template-columns:1fr; } }