:root{
  --bg:#fff;
  --neutral1:#f8f7f5;
  --neutral2:#e9e7e4;
  --text:#1f2937;
  --muted:#6b7280;
  --accent:#8C1D18;
  --accent-alt:#B08B2D;
  --radius:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Geologica, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
.container{max-width:1200px;margin:0 auto; padding:0 16px}
h1,h2,h3{line-height:1.2;margin:0 0 12px}
h1{font-size:clamp(28px,4vw,44px)}
h2{font-size:clamp(22px,3vw,32px)}
h3{font-size:clamp(18px,2.5vw,22px)}
.muted{color:var(--muted)}

.btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid var(--text);
  text-decoration:none;
  color:var(--text);
  transition:.2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-lg{padding:16px 24px; font-weight:600}
.btn-accent{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn-accent:hover{filter:brightness(0.95)}

.site-header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.85); backdrop-filter: blur(8px);
  border-bottom:1px solid var(--neutral2);
}
.header-inner{display:flex; align-items:center; gap:16px; padding:12px 0}
.logo a{display:flex; align-items:center; gap:8px; font-weight:700; text-decoration:none; color:var(--text)}
.primary-nav .menu{display:flex; gap:16px; list-style:none; margin:0; padding:0}
.primary-nav a{color:var(--text); text-decoration:none; padding:8px 10px; border-radius:10px}
.primary-nav a:hover{background:var(--neutral1)}
.cta{margin-left:auto}
.hamburger{display:none; background:none; border:0; font-size:22px}
.mobile-menu{position:fixed; inset:56px 0 0 0; background:#fff; padding:20px; display:flex; flex-direction:column; gap:12px; border-top:1px solid var(--neutral2)}

@media (max-width: 900px){
  .primary-nav{display:none}
  .hamburger{display:block}
}

.hero{background:var(--neutral1); padding:36px 0; border-bottom:1px solid var(--neutral2)}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; align-items:center}
.hero-media img{width:100%; height:auto; border-radius:var(--radius); box-shadow:0 10px 30px rgba(0,0,0,.06)}
@media (max-width: 900px){
  .hero-inner{grid-template-columns: 1fr}
}

.steps{padding:36px 0}
.steps-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:16px}
.step{background:#fff; border:1px solid var(--neutral2); border-radius:var(--radius); padding:16px}
.step .icon{font-size:24px}
@media (max-width: 900px){
  .steps-grid{grid-template-columns: repeat(2, 1fr)}
}

.grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:16px}
@media (max-width: 1100px){ .grid{grid-template-columns: repeat(3, 1fr)} }
@media (max-width: 760px){ .grid{grid-template-columns: repeat(2, 1fr)} }

.card{background:#fff; border:1px solid var(--neutral2); border-radius:var(--radius); overflow:hidden}
.artwork-card img{width:100%; height:auto; display:block}
.artwork-card h3{font-size:16px; padding:10px}
.artwork-card .tags{padding:0 10px 12px; color:var(--muted); font-size:14px}

.page-header{padding:24px 0}
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.filter-btn{padding:8px 12px; border-radius:999px; border:1px solid var(--neutral2); background:#fff; cursor:pointer}
.filter-btn.is-active, .filter-btn:hover{border-color:var(--accent); color:#fff; background:var(--accent)}

.testimonials{padding:36px 0; background:var(--neutral1)}
.testimonials-list{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.testimonial{background:#fff; border:1px solid var(--neutral2); border-radius:var(--radius); padding:16px}

.pricing-table{overflow:auto; margin:16px 0 24px}
.pricing-table table{width:100%; border-collapse:collapse}
.pricing-table th, .pricing-table td{border:1px solid var(--neutral2); padding:12px; text-align:center}

.center{text-align:center}
.order-form{background:#fff; border:1px solid var(--neutral2); border-radius:var(--radius); padding:16px;}

.site-footer{margin-top:48px; padding:24px 0; border-top:1px solid var(--neutral2); background:#fff}
.menu-footer{display:flex; gap:12px; list-style:none; margin:0; padding:0; font-size:14px}


/* Robust hiding for mobile menu */
.mobile-menu{display:none; position:fixed; inset:56px 0 0 0; background:#fff; padding:20px; flex-direction:column; gap:12px; border-top:1px solid var(--neutral2); z-index:9999}
.mobile-menu.open{display:flex}
.mobile-menu[hidden]{display:none !important}


/* Artwork gallery */
.artwork-media-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; margin-top:14px}
@media (max-width: 1100px){ .artwork-media-grid{grid-template-columns: repeat(3, 1fr)} }
@media (max-width: 760px){ .artwork-media-grid{grid-template-columns: repeat(2, 1fr)} }
.artwork-media-grid a{display:block; border-radius:12px; overflow:hidden; border:1px solid var(--neutral2)}
.artwork-media-grid img{width:100%; height:100%; object-fit:cover; display:block}
.owl-carousel .item a{display:block; border-radius:12px; overflow:hidden; border:1px solid var(--neutral2)}
.owl-carousel .item img{width:100%; height:320px; object-fit:cover}


/* Testimonials cards + rating */
.testimonial .rating{margin-top:8px}
.testimonial .stars{display:inline-flex; gap:4px; vertical-align:middle}
.testimonial .star{fill:#e5e7eb}
.testimonial .star.is-on{fill:var(--accent)}
.testimonial-images{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.testimonial-images img{width:76px; height:76px; object-fit:cover; border-radius:10px; border:1px solid var(--neutral2)}


/* Price box */
.price-box{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--neutral2); border-radius:var(--radius);
  padding:12px; margin:0 0 12px;
  font-size:18px;
}
.price-box .muted{opacity:.7}


/* Announcement bar */
.announce-bar{background:var(--ann-bg,#8C1D18); color:var(--ann-fg,#fff);}
.announce-inner{display:flex; align-items:center; justify-content:center; position:relative; padding:8px 0}
.announce-inner a{color:inherit; text-decoration:underline}
.announce-close{position:absolute; right:8px; top:4px; border:0; background:transparent; color:inherit; font-size:22px; cursor:pointer}
.cta .btn.alt{background:var(--accent-alt); border-color:var(--accent-alt)}


.product-gallery-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:8px; }
.product-gallery-grid a img { width:100%; height:auto; border-radius: var(--radius); border:1px solid var(--neutral2); }
@media (min-width:900px){ .product-gallery-grid { grid-template-columns: repeat(3,1fr); } }