:root {
  --surface: rgba(250, 252, 248, 0.84);
  --text: #314237;
  --text-muted: #66776c;
  --accent: #7fa08a;
  --accent-deep: #6f8f7c;
  --line: rgba(127, 160, 138, 0.16);
  --shadow: 0 24px 70px rgba(69, 92, 76, 0.1);
  --radius-lg: 32px;
  --radius-md: 22px;
  --radius-sm: 16px;
  --container: 1180px;
  --transition: 280ms ease;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.96), transparent 34%),
    radial-gradient(circle at top right, rgba(127,160,138,.14), transparent 28%),
    linear-gradient(180deg, #fcfefb 0%, #f1f7f0 45%, #e8efe8 100%);
  line-height: 1.6;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.2), transparent 65%);
  opacity: .24;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.container { width: min(calc(100% - 2rem), var(--container)); margin: 0 auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-header {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(18px);
  background: rgba(248,251,246,.78);
  border-bottom: 1px solid rgba(76,99,83,.08);
}
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; }
.brand { display:flex; align-items:center; gap:.85rem; font-size:.95rem; letter-spacing:.25em; text-transform:uppercase; }
.brand-mark {
  width:2.75rem; height:2.75rem; border-radius:50%; border:1px solid rgba(127,160,138,.45);
  background:#fff; box-shadow: inset 0 0 0 7px rgba(127,160,138,.08); object-fit:cover; object-position:center; padding:.12rem;
}
.nav-links { display:none; align-items:center; gap:1.25rem; color:var(--text-muted); font-size:.9rem; letter-spacing:.08em; text-transform:uppercase; }
.nav-links a { position:relative; padding-bottom:.2rem; }
.nav-links a::after {
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:center; transition:transform var(--transition);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform:scaleX(1); }
.button {
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem; padding:.95rem 1.5rem;
  border-radius:999px; border:1px solid transparent; cursor:pointer; font:inherit;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}
.button-primary { background:linear-gradient(135deg, #88a896, #6f8f7c); color:#f8fcf8; box-shadow:0 18px 35px rgba(111,143,124,.22); }
.button-secondary { background:rgba(255,255,255,.72); color:var(--text); border-color:rgba(127,160,138,.24); }
.button:hover, .button:focus-visible { transform:translateY(-2px); box-shadow:0 18px 34px rgba(69,92,76,.14); }
.hero { padding:4.75rem 0 3rem; }
.hero-grid, .about-grid, .custom-grid, .pricing-grid, .contact-grid, .styles-grid, .testimonial-grid, .footer-actions { display:grid; gap:1rem; }
.hero-grid { align-items:center; }
.eyebrow {
  display:inline-flex; align-items:center; gap:.55rem; padding:.45rem .9rem; border-radius:999px;
  background:rgba(255,255,255,.58); border:1px solid rgba(127,160,138,.18); color:var(--text-muted);
  letter-spacing:.14em; text-transform:uppercase; font-size:.76rem;
}
.eyebrow::before {
  content:""; width:.45rem; height:.45rem; border-radius:50%; background:var(--accent); box-shadow:0 0 0 6px rgba(127,160,138,.12);
}
h1,h2,h3 { margin:0; font-family:Georgia, "Times New Roman", serif; font-weight:500; line-height:1.05; letter-spacing:-.03em; }
h1 { margin-top:1.2rem; font-size:clamp(3.3rem, 9vw, 6.4rem); }
h2 { font-size:clamp(2.2rem, 5vw, 3.55rem); }
.hero-copy p { margin:1.4rem 0 0; max-width:42rem; color:var(--text-muted); font-size:clamp(1rem, 2vw, 1.15rem); }
.hero-actions, .gallery-actions, .footer-actions { display:flex; flex-wrap:wrap; gap:.9rem; }
.hero-note { margin-top:1.15rem; color:var(--text-muted); font-size:.95rem; }
.hero-card, .section-shell { border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:var(--shadow); backdrop-filter:blur(12px); }
.hero-card {
  position:relative; min-height:500px; padding:1.1rem;
  background:linear-gradient(160deg, rgba(255,255,255,.88), rgba(237,244,238,.78)), linear-gradient(135deg, rgba(127,160,138,.12), transparent 55%);
  overflow:hidden;
}
.hero-art { position:relative; height:100%; min-height:478px; border-radius:calc(var(--radius-lg) - 10px); overflow:hidden; isolation:isolate; }
.hero-photo { width:100%; height:100%; min-height:478px; object-fit:cover; object-position:center 35%; filter:saturate(.96); }
.hero-art::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.16), transparent 38%), linear-gradient(0deg, rgba(247,250,247,.22), transparent 30%);
}
.floating-card {
  position:absolute; z-index:2; display:flex; flex-direction:column; gap:.25rem; padding:1rem 1.1rem; border-radius:20px;
  background:rgba(255,252,247,.78); border:1px solid rgba(127,160,138,.18); box-shadow:0 16px 28px rgba(69,92,76,.1); backdrop-filter:blur(10px);
}
.floating-card small { color:var(--text-muted); text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; }
.floating-card strong { font-weight:600; font-size:1rem; }
.floating-top { top:1.3rem; right:1.3rem; max-width:70%; }
.floating-bottom { left:1.3rem; bottom:1.3rem; max-width:70%; }
.stats, .feature-list, .steps { display:grid; gap:1rem; }
.stats { margin-top:1.6rem; }
.stat, .panel, .style-card, .price-card {
  padding:1.25rem 1.4rem; border-radius:var(--radius-md); background:rgba(255,255,255,.62); border:1px solid rgba(127,160,138,.14);
}
.stat strong { display:block; font-size:1.35rem; margin-bottom:.35rem; font-family:Georgia, "Times New Roman", serif; font-weight:500; }
section { padding:1.65rem 0 0; }
.section-shell { padding:1.6rem; background:var(--surface); }
.section-head { display:flex; flex-direction:column; gap:.8rem; margin-bottom:1.6rem; }
.section-head p, .panel p, .panel li, .stat span, .style-card p, .testimonial-copy p, .price-note, .address-copy p, .category-copy p { color:var(--text-muted); }
.panel h3, .style-card h3, .testimonial-copy h3, .price-card h3, .category-copy h3 { margin-bottom:.85rem; font-size:1.55rem; }
.feature-list { padding:0; margin:0; list-style:none; gap:.8rem; }
.feature-list li { display:flex; gap:.75rem; align-items:flex-start; }
.feature-list li::before { content:""; width:.7rem; height:.7rem; margin-top:.45rem; border-radius:50%; background:radial-gradient(circle, var(--accent), #ccdacf); box-shadow:0 0 0 7px rgba(127,160,138,.12); flex-shrink:0; }
.gallery-grid {
  column-count: 1;
  column-gap: 20px;
}
.gallery-card {
  break-inside: avoid;
  margin: 0 0 20px;
  border: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}
.sketch-carousel {
  display: grid;
  gap: 1rem;
}
.sketch-carousel-head {
  display: flex;
  justify-content: flex-end;
  gap: .7rem;
}
.sketch-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .35rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(111,143,124,.5) transparent;
}
.sketch-track::-webkit-scrollbar {
  height: 10px;
}
.sketch-track::-webkit-scrollbar-thumb {
  background: rgba(111,143,124,.4);
  border-radius: 999px;
}
.sketch-card {
  position: relative;
  flex: 0 0 auto;
  width: min(78vw, 400px);
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  scroll-snap-align: start;
}
.category-card { background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(241,247,241,.18)), var(--card-image, linear-gradient(135deg, #edf4ee, #d9e6dc)); }
.category-card::after {
  content:""; position:absolute; inset:1rem; border-radius:18px; border:1px solid rgba(255,255,255,.28); opacity:0; transform:scale(.96); transition:opacity var(--transition), transform var(--transition);
}
.gallery-card:hover, .gallery-card:focus-within, .sketch-card:hover, .sketch-card:focus-within, .category-card:hover, .category-card:focus-visible {
  transform:translateY(-6px); box-shadow:0 24px 44px rgba(73,95,80,.16);
}
.category-card:hover::after, .category-card:focus-visible::after { opacity:1; transform:scale(1); }
.media-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.media-trigger:focus-visible {
  outline: 2px solid rgba(127,160,138,.55);
  outline-offset: -2px;
}
.gallery-card img,
.sketch-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 14px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(127,160,138,.12);
  box-shadow: 0 16px 32px rgba(73,95,80,.12);
}
.gallery-card img {
  border-radius: 16px;
}
.carousel-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6.75rem;
  padding: .8rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(127,160,138,.24);
  background: rgba(255,255,255,.72);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carousel-button:hover,
.carousel-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 24px rgba(73,95,80,.12);
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
}
.lightbox[hidden] {
  display: none;
}
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(36, 48, 40, .72);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.lightbox-dialog {
  position: relative;
  z-index: 1;
  width: min(92vw, 1120px);
  max-height: 88vh;
  padding: 1rem;
  border-radius: 28px;
  background: rgba(250,252,248,.92);
  border: 1px solid rgba(127,160,138,.22);
  box-shadow: 0 28px 72px rgba(36,48,40,.22);
}
.lightbox-image {
  width: 100%;
  max-height: calc(88vh - 2rem);
  object-fit: contain;
  border-radius: 20px;
}
.lightbox-close {
  position: absolute;
  top: .9rem;
  right: .9rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(127,160,138,.22);
  background: rgba(255,255,255,.82);
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.gallery-actions { margin-top:1.4rem; justify-content:center; }
.style-card { display:flex; flex-direction:column; gap:.9rem; min-height:100%; }
.style-link { color:var(--accent-deep); letter-spacing:.08em; text-transform:uppercase; font-size:.84rem; font-weight:600; }
.steps { counter-reset:step; gap:.85rem; }
.step {
  display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start; padding:1rem 1.05rem; border-radius:18px;
  background:rgba(255,255,255,.58); border:1px solid rgba(127,160,138,.12);
}
.step::before {
  counter-increment:step; content:counter(step, decimal-leading-zero); display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%;
  background:rgba(127,160,138,.12); color:var(--accent); font-size:.88rem; letter-spacing:.08em; font-weight:700;
}
.price-card { gap:.65rem; min-height:100%; }
.price-label { color:var(--text-muted); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; }
.price-value { font-family:Georgia, "Times New Roman", serif; font-size:clamp(2.5rem, 6vw, 3.6rem); line-height:1; }
.price-note { margin-top:1.2rem; max-width:42rem; }
.testimonial-grid { grid-template-columns:1fr; }
.testimonial-card {
  border-radius:24px; overflow:hidden; border:1px solid rgba(127,160,138,.14); background:rgba(255,255,255,.72); box-shadow:0 16px 32px rgba(73,95,80,.1);
}
.testimonial-card img { width:100%; height:auto; object-fit:cover; }
.testimonial-copy { margin-top:1rem; max-width:42rem; }
.map-frame { width:100%; min-height:340px; border:0; border-radius:24px; box-shadow:0 18px 36px rgba(73,95,80,.1); }
.address-copy { display:flex; flex-direction:column; gap:.9rem; min-height:100%; }
.address-text { font-size:1.08rem; line-height:1.7; }
.category-hero { padding:4rem 0 2.6rem; }
.category-wrap { display:grid; gap:1rem; }
.category-copy, .category-gallery { border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:var(--shadow); background:var(--surface); padding:1.6rem; }
.category-gallery-grid { display:grid; gap:.9rem; grid-template-columns:repeat(2, 1fr); }
.footer { padding:2.5rem 0 3rem; color:var(--text-muted); font-size:.95rem; }
.footer-inner { display:flex; flex-direction:column; gap:1rem; align-items:center; text-align:center; }
.reveal { opacity:0; transform:translateY(26px); transition:opacity 700ms ease, transform 700ms ease; }
.reveal.is-visible { opacity:1; transform:translateY(0); }
@media (min-width: 720px) {
  .nav-links { display:flex; }
  .hero { padding:5.5rem 0 3.5rem; }
  .about-grid, .custom-grid, .contact-grid, .category-wrap { grid-template-columns:1.05fr .95fr; }
  .pricing-grid, .styles-grid, .testimonial-grid { grid-template-columns:repeat(2, 1fr); }
  .stats { grid-template-columns:repeat(3, 1fr); }
  .gallery-grid { column-count: 2; }
  .sketch-track { gap: 20px; }
  .category-gallery-grid { grid-template-columns:repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns:minmax(0, 1.02fr) minmax(360px, .98fr); gap:3rem; }
  .section-shell, .category-copy, .category-gallery { padding:2rem; }
  .styles-grid { grid-template-columns:repeat(4, 1fr); }
  .testimonial-grid { grid-template-columns:repeat(3, 1fr); }
  .gallery-grid { column-count: 3; }
  .sketch-card { width: min(30vw, 400px); }
}
@media (max-width: 719px) {
  .sketch-card { width: min(82vw, 400px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}