:root {
  --ink: #171b18;
  --paper: #f4f1ea;
  --cream: #e8e2d8;
  --accent: #d3ef50;
  --rust: #bd674d;
  --sage: #889c7c;
  --blue: #7c95a6;
  --line: rgba(23,27,24,.16);
  --white: #fff;
  --max: 1180px;
  --radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
img { max-width: 100%; display: block; }
.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.skip-link { position: fixed; left: 12px; top: -60px; background: var(--accent); padding: 10px 16px; z-index: 100; font-weight: 700; }
.skip-link:focus { top: 12px; }
.topbar { background: var(--ink); color: rgba(255,255,255,.8); font-size: 12px; letter-spacing: .02em; }
.topbar__inner { min-height: 35px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar a { color: #fff; font-weight: 700; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(244,241,234,.9); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: .25s ease; }
.site-header.is-scrolled { border-color: var(--line); }
.nav-wrap { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand-name { font-size: 17px; letter-spacing: .08em; }
.brand-name b { font-weight: 800; }
.brand-mark { width: 34px; height: 29px; display: flex; align-items: end; gap: 3px; transform: skew(-12deg); }
.brand-mark i { display: block; width: 9px; border-radius: 2px 2px 0 0; }
.brand-mark i:nth-child(1) { height: 18px; background: var(--rust); }
.brand-mark i:nth-child(2) { height: 25px; background: var(--sage); }
.brand-mark i:nth-child(3) { height: 13px; background: var(--blue); }
.main-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 650; }
.main-nav > a:not(.btn) { position: relative; }
.main-nav > a:not(.btn)::after { content:""; position:absolute; left:0; right:100%; bottom:-7px; height:2px; background:var(--ink); transition:.2s; }
.main-nav > a:not(.btn):hover::after { right:0; }
.nav-toggle { display:none; border:0; background:transparent; padding:8px; cursor:pointer; }
.nav-toggle span { display:block; width:25px; height:2px; background:var(--ink); margin:5px 0; transition:.2s; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 22px; border-radius:999px; font-size:14px; font-weight:750; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; border:1px solid transparent; }
.btn:hover { transform:translateY(-2px); }
.btn--small { min-height:42px; padding:0 17px; }
.btn--dark { background:var(--ink); color:#fff; }
.btn--accent { background:var(--accent); color:var(--ink); box-shadow:0 10px 24px rgba(103,122,14,.16); }
.btn--light { background:#fff; color:var(--ink); }
.btn--outline { border-color:rgba(255,255,255,.35); color:#fff; }
.text-link { display:inline-flex; gap:10px; align-items:center; font-weight:750; font-size:14px; }
.text-link span { transition:transform .2s; }
.text-link:hover span { transform:translateX(4px); }
.eyebrow { display:block; font-size:11px; font-weight:800; letter-spacing:.16em; margin-bottom:16px; opacity:.68; }
.hero { overflow:hidden; padding-top:66px; }
.hero__grid { display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:48px; min-height:600px; }
.hero__content { padding-bottom:34px; }
.hero h1 { font-family: Georgia, "Times New Roman", serif; font-weight:400; font-size:clamp(46px, 6.1vw, 78px); line-height:.98; letter-spacing:-.045em; margin:0 0 28px; max-width:820px; }
.hero h1 em { font-weight:400; color:var(--rust); }
.hero__lead { max-width:620px; font-size:18px; color:rgba(23,27,24,.72); margin:0 0 30px; }
.hero__actions { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.hero__meta { margin-top:52px; padding-top:24px; border-top:1px solid var(--line); display:flex; gap:40px; }
.hero__meta div { display:grid; gap:2px; }
.hero__meta strong { font-family:Georgia, serif; font-size:24px; font-weight:400; }
.hero__meta span { font-size:11px; opacity:.62; text-transform:uppercase; letter-spacing:.06em; }
.hero-art { height:540px; position:relative; isolation:isolate; }
.hero-art::before { content:""; position:absolute; inset:28px 0 28px 64px; border-radius:48% 52% 45% 55% / 42% 48% 52% 58%; background:#d7d1c5; z-index:-3; transform:rotate(-4deg); }
.hero-art::after { content:""; position:absolute; width:250px; height:250px; right:-75px; top:16px; border:1px solid rgba(23,27,24,.18); border-radius:50%; z-index:-2; }
.paint-card { position:absolute; overflow:hidden; box-shadow:0 22px 50px rgba(22,26,23,.13); }
.paint-card--main { width:54%; height:68%; left:16%; top:9%; background:#7f9580; border-radius:18px; transform:rotate(-5deg); }
.paint-card--main::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 18%, rgba(255,255,255,.2), transparent 33%), linear-gradient(135deg,transparent 40%,rgba(0,0,0,.08)); }
.paint-card__label { position:absolute; left:20px; top:18px; z-index:2; color:#fff; font-size:9px; font-weight:800; letter-spacing:.15em; }
.paint-card__can { position:absolute; width:54%; aspect-ratio:.8; left:24%; bottom:12%; border-radius:4px 4px 14px 14px; background:#f3eee5; color:#222; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 20px 24px rgba(0,0,0,.18); }
.paint-card__can::before { content:""; position:absolute; top:25%; left:0; right:0; height:40%; background:#25302a; }
.paint-card__can strong,.paint-card__can small { z-index:2; color:#fff; }
.paint-card__can strong { font-size:16px; letter-spacing:.14em; }
.paint-card__can small { font-size:7px; letter-spacing:.1em; }
.can-lid { position:absolute; left:-4%; right:-4%; top:-6%; height:9%; background:#d8d3ca; border-radius:50%; border:2px solid #b8b3ab; }
.paint-card--micro { width:43%; height:42%; right:1%; bottom:5%; background:#bcb3a6; border-radius:17px; transform:rotate(6deg); }
.paint-card--micro .paint-card__label { color:var(--ink); }
.micro-texture { position:absolute; inset:0; opacity:.5; background:repeating-radial-gradient(circle at 70% 50%, rgba(255,255,255,.35) 0 2px, rgba(80,75,69,.1) 3px 5px, transparent 6px 11px), linear-gradient(115deg,#c9c0b4,#a99f92); }
.swatch { position:absolute; width:92px; height:92px; border-radius:50%; border:10px solid rgba(244,241,234,.82); box-shadow:0 12px 24px rgba(0,0,0,.1); }
.swatch--1 { background:#c36d52; left:2%; bottom:4%; }
.swatch--2 { background:#d6ef65; right:2%; top:3%; width:72px; height:72px; }
.swatch--3 { background:#8199a7; right:24%; top:34%; width:48px; height:48px; border-width:6px; }
.hero-note { position:absolute; right:5%; bottom:0; font-family:Georgia,serif; font-style:italic; font-size:15px; transform:rotate(-5deg); }
.hero-strip { margin-top:26px; min-height:64px; border-block:1px solid var(--line); display:flex; align-items:center; justify-content:center; gap:28px; overflow:hidden; white-space:nowrap; font-size:10px; font-weight:800; letter-spacing:.15em; opacity:.72; }
.hero-strip i { width:5px; height:5px; border-radius:50%; background:var(--rust); }
.section { padding:108px 0; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:48px; margin-bottom:48px; }
.section-head h2, .micro-copy h2, .why-title h2, .contact-copy h2, .cta-box h2 { font-family:Georgia,serif; font-weight:400; letter-spacing:-.035em; line-height:1.05; margin:0; font-size:clamp(38px,5vw,58px); }
.section-head > p { max-width:460px; color:rgba(23,27,24,.66); margin:0; }
.category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.category-card { min-height:390px; padding:26px; border-radius:var(--radius); position:relative; overflow:hidden; display:flex; flex-direction:column; border:1px solid rgba(23,27,24,.08); transition:transform .25s ease, box-shadow .25s ease; }
.category-card:hover { transform:translateY(-6px); box-shadow:0 18px 36px rgba(23,27,24,.09); }
.category-card::after { content:""; position:absolute; width:190px; height:190px; border-radius:42% 58% 61% 39% / 45% 42% 58% 55%; right:-55px; bottom:-55px; background:rgba(255,255,255,.22); transform:rotate(20deg); }
.category-card--interior { background:#d9d3c8; }
.category-card--exterior { background:#8ca081; }
.category-card--micro { background:#c0765f; }
.category-card--industrial { background:#8499a7; }
.card-icon { width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(23,27,24,.28); border-radius:50%; font-size:18px; }
.card-kicker { position:absolute; right:24px; top:28px; font:italic 18px Georgia,serif; opacity:.55; }
.category-card h3 { margin:auto 0 8px; font:400 31px Georgia,serif; letter-spacing:-.025em; }
.category-card p { margin:0 0 22px; max-width:240px; font-size:14px; opacity:.75; }
.card-arrow { font-size:12px; font-weight:800; letter-spacing:.04em; }
.micro-section { background:var(--ink); color:#f9f6ef; overflow:hidden; }
.micro-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.micro-visual { min-height:560px; position:relative; }
.surface { position:absolute; border-radius:22px; box-shadow:0 24px 60px rgba(0,0,0,.22); }
.surface--a { inset:0 20% 10% 0; background:linear-gradient(130deg,#bcb5aa,#8f877c); transform:rotate(-4deg); }
.surface--a::before { content:""; position:absolute; inset:0; border-radius:inherit; background:repeating-radial-gradient(circle at 20% 20%,rgba(255,255,255,.08) 0 1px,transparent 2px 9px); }
.surface--b { width:54%; height:62%; right:0; bottom:0; background:linear-gradient(145deg,#d8d2c7,#aaa196); transform:rotate(7deg); }
.surface-label { position:absolute; left:10%; bottom:4%; background:var(--accent); color:var(--ink); width:154px; height:154px; border-radius:50%; display:grid; place-content:center; text-align:center; font:italic 14px Georgia,serif; transform:rotate(-9deg); z-index:3; }
.surface-label strong { font-size:18px; }
.micro-copy p { color:rgba(255,255,255,.68); font-size:17px; max-width:560px; }
.check-list { list-style:none; padding:0; margin:28px 0 34px; display:grid; gap:13px; }
.check-list li { position:relative; padding-left:28px; }
.check-list li::before { content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:900; }
.featured { background:#ece8e0; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.product-card { background:#f8f5ef; border-radius:20px; overflow:hidden; border:1px solid rgba(23,27,24,.06); }
.product-art { height:310px; display:grid; place-items:center; position:relative; overflow:hidden; }
.product-art--clay { background:#b6aea2; }
.product-art--clay span { width:140px; height:180px; background:#e7e1d8; border-radius:4px 4px 14px 14px; display:grid; place-content:center; text-align:center; font:700 28px/1 Georgia,serif; box-shadow:0 18px 35px rgba(0,0,0,.14); }
.product-art--brush { background:#d5cebf; }
.brush-shape { width:56px; height:190px; background:linear-gradient(#d9b27b 0 58%,#222 59% 66%,#a27044 67%); border-radius:24px 24px 8px 8px; transform:rotate(25deg); box-shadow:0 20px 30px rgba(0,0,0,.12); }
.product-art--lime { background:#9ba891; }
.product-art--lime span { font:bold 42px Georgia,serif; color:#f5f2ea; letter-spacing:.12em; }
.product-info { padding:24px; }
.product-tag { font-size:9px; font-weight:850; letter-spacing:.14em; opacity:.5; }
.product-info h3 { font:400 23px/1.15 Georgia,serif; margin:10px 0 8px; min-height:52px; }
.product-info p { font-size:13px; opacity:.66; min-height:40px; }
.product-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.product-bottom strong { font-size:14px; }
.product-bottom a { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:#fff; }
.why { background:var(--paper); }
.why-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; }
.why-title { position:sticky; top:130px; align-self:start; }
.why-list { border-top:1px solid var(--line); }
.why-item { display:grid; grid-template-columns:64px 1fr; gap:20px; padding:30px 0; border-bottom:1px solid var(--line); }
.why-item > span { font:italic 17px Georgia,serif; opacity:.45; }
.why-item h3 { margin:0 0 8px; font:400 27px Georgia,serif; }
.why-item p { margin:0; max-width:500px; color:rgba(23,27,24,.65); }
.cta-section { padding:0 0 108px; }
.cta-box { background:var(--rust); color:#fff; padding:56px; border-radius:30px; display:flex; align-items:end; justify-content:space-between; gap:40px; position:relative; overflow:hidden; }
.cta-box::after { content:""; position:absolute; width:250px; height:250px; border:1px solid rgba(255,255,255,.2); border-radius:50%; right:29%; top:-150px; }
.cta-box h2 { margin-bottom:10px; }
.cta-box p { margin:0; opacity:.75; }
.cta-actions { display:flex; gap:12px; flex-wrap:wrap; position:relative; z-index:2; }
.contact-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center; }
.contact-copy p { color:rgba(23,27,24,.65); max-width:540px; font-size:16px; }
.contact-list { margin:38px 0 28px; display:grid; gap:0; }
.contact-list > div { display:grid; grid-template-columns:130px 1fr; padding:16px 0; border-top:1px solid var(--line); }
.contact-list > div:last-child { border-bottom:1px solid var(--line); }
.contact-list dt { font-size:10px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; opacity:.5; }
.contact-list dd { margin:0; font-weight:650; }
.map-card { min-height:470px; border-radius:26px; background:#d9d5cb; overflow:hidden; position:relative; border:1px solid var(--line); }
.map-grid-lines { position:absolute; inset:0; opacity:.34; background-image:linear-gradient(rgba(40,47,41,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(40,47,41,.08) 1px,transparent 1px); background-size:44px 44px; }
.road { position:absolute; height:24px; background:#f4f1e8; border:1px solid rgba(23,27,24,.08); border-radius:30px; }
.road--1 { width:120%; left:-10%; top:46%; transform:rotate(-14deg); }
.road--2 { width:80%; left:25%; top:24%; transform:rotate(63deg); }
.road--3 { width:70%; left:-20%; bottom:16%; transform:rotate(21deg); }
.map-pin { position:absolute; left:54%; top:46%; width:60px; height:60px; background:var(--rust); border-radius:50% 50% 50% 0; transform:translate(-50%,-50%) rotate(-45deg); box-shadow:0 10px 22px rgba(0,0,0,.18); }
.map-pin span { position:absolute; width:18px; height:18px; background:#fff; border-radius:50%; left:21px; top:21px; }
.map-label { position:absolute; left:50%; top:61%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:13px 18px; border-radius:10px; text-align:center; box-shadow:0 12px 26px rgba(0,0,0,.16); }
.map-label strong { display:block; font-size:11px; letter-spacing:.08em; }
.map-label small { opacity:.66; white-space:nowrap; }
.site-footer { background:var(--ink); color:#fff; padding:54px 0 24px; }
.footer-top { display:grid; grid-template-columns:1fr 1fr 1fr; gap:40px; align-items:start; padding-bottom:46px; }
.brand--footer .brand-name { color:#fff; }
.footer-top p { margin:0; opacity:.55; font-size:13px; max-width:340px; }
.footer-top nav { display:flex; gap:18px; justify-content:flex-end; font-size:13px; font-weight:700; }
.footer-bottom { padding-top:22px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:20px; font-size:11px; opacity:.5; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .reveal { opacity:1; transform:none; transition:none; } * { animation:none!important; transition:none!important; } }
@media (max-width: 960px) {
  .nav-toggle { display:block; }
  .main-nav { position:absolute; top:82px; left:20px; right:20px; background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:20px; display:none; flex-direction:column; align-items:stretch; gap:16px; box-shadow:0 18px 40px rgba(0,0,0,.12); }
  .main-nav.is-open { display:flex; }
  .main-nav .btn { width:100%; }
  .hero__grid, .micro-grid, .why-grid, .contact-grid { grid-template-columns:1fr; }
  .hero { padding-top:40px; }
  .hero__grid { gap:20px; }
  .hero-art { height:500px; max-width:650px; width:100%; margin:0 auto; }
  .category-grid { grid-template-columns:1fr 1fr; }
  .product-grid { grid-template-columns:1fr 1fr; }
  .product-card:last-child { grid-column:span 2; }
  .why-grid { gap:44px; }
  .why-title { position:static; }
  .cta-box { align-items:flex-start; flex-direction:column; }
  .footer-top { grid-template-columns:1fr 1fr; }
  .footer-top nav { grid-column:1/-1; justify-content:flex-start; }
}
@media (max-width: 640px) {
  .container { width:min(calc(100% - 28px), var(--max)); }
  .topbar__inner { min-height:42px; font-size:10px; }
  .topbar__inner span { max-width:60%; }
  .nav-wrap { min-height:70px; }
  .main-nav { top:70px; left:14px; right:14px; }
  .brand-name { font-size:14px; }
  .brand-mark { width:29px; height:26px; }
  .hero h1 { font-size:47px; }
  .hero__lead { font-size:16px; }
  .hero__meta { gap:18px; justify-content:space-between; }
  .hero__meta strong { font-size:20px; }
  .hero__meta span { font-size:9px; }
  .hero-art { height:390px; }
  .paint-card--main { width:62%; left:8%; }
  .paint-card--micro { width:48%; }
  .swatch--2 { right:0; }
  .hero-note { display:none; }
  .section { padding:78px 0; }
  .section-head { align-items:flex-start; flex-direction:column; gap:20px; margin-bottom:32px; }
  .category-grid, .product-grid { grid-template-columns:1fr; }
  .category-card { min-height:300px; }
  .product-card:last-child { grid-column:auto; }
  .product-art { height:250px; }
  .micro-grid { gap:40px; }
  .micro-visual { min-height:400px; }
  .surface-label { width:120px; height:120px; font-size:12px; }
  .why-item { grid-template-columns:42px 1fr; }
  .cta-section { padding-bottom:78px; }
  .cta-box { padding:36px 25px; border-radius:22px; }
  .cta-actions { width:100%; }
  .cta-actions .btn { width:100%; }
  .contact-grid { gap:44px; }
  .map-card { min-height:360px; }
  .contact-list > div { grid-template-columns:105px 1fr; }
  .footer-top { grid-template-columns:1fr; }
  .footer-top nav { grid-column:auto; flex-wrap:wrap; }
  .footer-bottom { flex-direction:column; }
}