/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
:root{
  --bg: #0e0f12;
  --bg-elev: #14171c;
  --text: #eef2f6;
  --muted: #a6b0c0;
  --brand: #2dd4bf; /* teal */
  --brand-2: #6ee7b7;
  --accent: #60a5fa; /* blue */
  --danger: #ef4444;
  --card: #101317;
  --border: rgba(255,255,255,0.08);
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}
body{
  margin:0; font-family: 'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text); background:linear-gradient(180deg,#0d0f12 0%, #0b0c10 100%);
}
img, video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.container{ width:min(1100px, 92%); margin-inline:auto; }
.btn{ display:inline-flex; align-items:center; gap:.5rem; background:var(--bg-elev); color:var(--text); border:1px solid var(--border); padding:.8rem 1.1rem; border-radius:.6rem; transition:.2s ease; cursor:pointer; }
.btn:hover{ 
  background:linear-gradient(135deg, var(--brand-2), var(--accent)); 
  color:#0b0c10; 
  border-color:transparent; 
  box-shadow:0 6px 18px rgba(45,212,191,.35), 0 4px 12px rgba(96,165,250,.25);
  transform:translateY(-1px);
}
.btn-primary{ background:linear-gradient(135deg, var(--brand), var(--accent)); color:#0b0c10; border:0; font-weight:700; }
.btn-primary:hover{ 
  background:linear-gradient(135deg, #a7f3d0, #93c5fd);
  color:#0b0c10;
  box-shadow:0 8px 22px rgba(45,212,191,.45), 0 6px 16px rgba(96,165,250,.35);
  transform:translateY(-1px);
}
.btn-ghost{ background:transparent; border:1px solid var(--border); }
.btn-ghost:hover{ background:rgba(45,212,191,.12); border-color:var(--brand); color:var(--brand-2); }
.btn-small{ padding:.55rem .9rem; font-size:.95rem; }
.chip{ background:#141922; color:var(--text); border:1px solid var(--border); padding:.45rem .8rem; border-radius:999px; cursor:pointer; }
.chip.active{ background:linear-gradient(135deg, var(--brand), var(--accent)); color:#0b0c10; border:0; font-weight:700; }

/* Header */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(13,15,18,0.6); backdrop-filter: blur(8px); border-bottom:1px solid var(--border); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 0; }
.brand{ display:flex; align-items:center; gap:.7rem; font-weight:800; letter-spacing:.2px; }
.brand img{ height:44px; width:auto; background:#ffffff; padding:6px; border-radius:.6rem; box-shadow:0 2px 10px rgba(0,0,0,.3); border:1px solid rgba(0,0,0,0.08); }
.brand-name{ display:inline-block; color:var(--text); opacity:.95; }
.nav{ display:flex; gap:1rem; align-items:center; }
.nav a{ opacity:.9; }
.nav a.active{ color:var(--brand-2); }
.nav-toggle{ display:none; background:transparent; border:0; font-size:1.4rem; color:var(--text); }

/* Hero */
.hero{ position:relative; min-height:70vh; display:grid; place-items:center; overflow:hidden; }
.hero-media{ position:absolute; inset:0; }
.hero-video{ width:100%; height:100%; object-fit:cover; filter:saturate(0.9) brightness(0.6) contrast(1.05); }
.hero-overlay{ position:absolute; inset:0; background:radial-gradient(1000px 400px at 20% 10%, rgba(45,212,191,0.20), transparent), radial-gradient(700px 350px at 80% 20%, rgba(96,165,250,0.18), transparent); }
.hero-content{ position:relative; text-align:center; padding-block:5rem; }
.hero h1{ font-size:clamp(2rem, 5vw, 3.3rem); margin:0 0 1rem; }
.hero p{ margin:0 0 1.6rem; color:var(--muted); }
.hero-ctas{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }

/* Highlights */
.highlights{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:#0d1117; }
.highlights-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; padding: .9rem 0; }
.highlight{ display:flex; align-items:center; gap:.5rem; justify-content:center; color:var(--muted); }
.h-icon{ font-size:1.1rem; }

/* Sections */
.section{ padding: clamp(2rem, 6vw, 4rem) 0; }
.section.alt{ background:#0d1117; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.section-head{ display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; }
.section h2{ margin:0; font-size:clamp(1.6rem, 4vw, 2.2rem); }
.section p{ color:var(--muted); }

.cards{ display:grid; gap:1rem; }
.services-grid{ grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.plans-grid{ grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); align-items:stretch; }
.card{ background:linear-gradient(180deg, #0f1318, #0a0c0f); border:1px solid var(--border); border-radius:1rem; padding:1.1rem; box-shadow:var(--shadow); }
.card h3{ margin:.2rem 0 .4rem; }
.card .icon{ font-size:1.6rem; }
.card .price{ font-weight:800; color:var(--brand-2); }
.card .muted{ color:var(--muted); font-size:.95rem; }
.card ul{ margin:.6rem 0 0; padding-left:1.1rem; }
.card ul li{ margin:.15rem 0; }
.service-card .btn{ margin-top:.6rem; }

/* Snow plans note */
.plan-note{ margin-top:.8rem; color:var(--muted); padding-left:1rem; }

/* Snow plans alignment */
.plans-grid .plan{ display:flex; flex-direction:column; height:100%; }
.plans-grid .plan ul{ flex:1 1 auto; }
.plans-grid .plan .btn{ margin-top:.9rem; align-self:flex-start; }

/* Small grids for forms */
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.grid label{ display:grid; gap:.35rem; }
.grid input, .grid select, .grid textarea{ background:#0b0f14; color:var(--text); border:1px solid var(--border); border-radius:.6rem; padding:.65rem .75rem; font:inherit; }
.full{ grid-column:1/-1; }

/* About */
.about-split{ display:grid; grid-template-columns:1.2fr .8fr; gap:1.4rem; align-items:center; }
.about-copy p{ color:var(--muted); }
.checks{ list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.4rem; }
.checks li::before{ content:"\2713"; color:var(--brand); margin-right:.5rem; font-weight:700; }
.about-media img{ border-radius:.8rem; border:1px solid var(--border); box-shadow:var(--shadow); }

/* Contact */
.contact-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap:1.6rem; }
.contact .mini{ color:var(--muted); margin:.15rem 0; }
.contact-form{ display:grid; grid-template-columns: 1fr 1fr; gap:.9rem; background:#0c1015; padding:1.1rem; border-radius:.9rem; border:1px solid var(--border); }
.contact-form label{ display:grid; gap:.4rem; }
.contact-form label.full{ grid-column:1/-1; }
.contact-form input, .contact-form textarea{ background:#0b0f14; color:var(--text); border:1px solid var(--border); border-radius:.6rem; padding:.7rem .8rem; font:inherit; }
.form-status{ margin-top:.6rem; color:var(--brand-2); }

/* Footer */
.site-footer{ border-top:1px solid var(--border); background:#0b0e12; }
.footer-inner{ display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; justify-content:space-between; padding:1rem 0; }
.brandline{ display:flex; align-items:center; gap:.6rem; color:var(--muted); }
.brandline img{ height:30px; width:auto; border-radius:.3rem; border:1px solid var(--border); background:#0f1318; padding:3px; }
.footer-links{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.copyright{ text-align:right; color:var(--muted); margin-left:auto; }

/* Drawer / Modal */
.drawer{ position:fixed; inset:0; display:none; z-index:100; }
.drawer[aria-hidden="false"]{ display:block; }
.drawer-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5); opacity:0; transition:.2s; z-index:1; }
.drawer[aria-hidden="false"] .drawer-backdrop{ opacity:1; }
.drawer-panel{ position:absolute; right:0; top:0; bottom:0; width:min(560px, 100%); background:#0c1015; border-left:1px solid var(--border); box-shadow:var(--shadow); transform:translateX(100%); transition:.25s ease; display:flex; flex-direction:column; z-index:2; }
.drawer[aria-hidden="false"] .drawer-panel{ transform:translateX(0); }
.drawer-header{ padding:1rem; border-bottom:1px solid var(--border); }
.drawer-content{ padding:1rem; overflow:auto; flex:1; }
.drawer-footer{ display:flex; gap:.6rem; justify-content:space-between; padding:1rem; border-top:1px solid var(--border); }
.drawer-close{ position:absolute; left:.6rem; top:.6rem; background:transparent; border:0; color:var(--muted); font-size:1.6rem; cursor:pointer; }

/* Drawer form elements */
.drawer-content label{ display:grid; gap:.35rem; margin-bottom:.8rem; }
.drawer-content input,
.drawer-content select,
.drawer-content textarea{ width:100%; background:#0b0f14; color:var(--text); border:1px solid var(--border); border-radius:.6rem; padding:.65rem .75rem; font:inherit; }
.drawer-content textarea{ min-height:120px; }
.drawer-content .grid{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.drawer-content .full{ grid-column:1/-1; }

/* Work page */
.work-page .hero-slim{ padding:2.4rem 0 1rem; border-bottom:1px solid var(--border); background:#0d1117; }
.filters{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; align-items:center; }
.filters .label{ color:var(--muted); margin-right:.4rem; }
.controls{ display:grid; gap:.5rem; margin-bottom:1rem; }
.gallery{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:1rem; }
.gal-item{ background:#0c1015; border:1px solid var(--border); border-radius:.7rem; overflow:hidden; }
.gal-item{ position:relative; }
.badge{ position:absolute; top:.45rem; left:.45rem; padding:.15rem .45rem; border-radius:.35rem; font-size:.8rem; border:1px solid var(--border); background:rgba(0,0,0,.35); }
.badge.before{ background:rgba(96,165,250,.2); color:#93c5fd; border-color:rgba(147,197,253,.35); }
.badge.after{ background:rgba(45,212,191,.2); color:#34d399; border-color:rgba(52,211,153,.35); }
.gal-item figcaption{ padding:.6rem .7rem; color:var(--muted); font-size:.95rem; border-top:1px solid var(--border); }
.gal-item img, .gal-item video{ width:100%; height:220px; object-fit:cover; display:block; }
.loc-cards{ grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.loc-card{ position:relative; overflow:hidden; border-radius:1rem; border:1px solid var(--border); background:linear-gradient(180deg,#0f1318,#0a0c0f); box-shadow:var(--shadow); min-height:160px; display:flex; align-items:flex-end; padding:1rem; cursor:pointer; transition:.2s ease; }
.loc-card:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.35); }
.loc-card .meta{ position:absolute; top:.6rem; left:.8rem; background:rgba(0,0,0,.35); border:1px solid var(--border); color:var(--text); padding:.2rem .5rem; border-radius:.4rem; font-size:.85rem; }
.loc-card .title{ font-weight:800; letter-spacing:.2px; }
.loc-card .count{ color:var(--muted); font-size:.95rem; }
.gal-item .tag{ display:inline-block; background:#141922; border:1px solid var(--border); color:var(--muted); padding:.1rem .45rem; border-radius:.4rem; margin-right:.3rem; font-size:.8rem; }
.manage{ display:flex; align-items:center; justify-content:flex-end; }
.toggle input{ vertical-align:middle; margin-right:.4rem; }

/* Tag editor overlay */
.taggable{ position:relative; }
.taggable .edit-btn{ position:absolute; top:.5rem; right:.5rem; background:#0b0f14; border:1px solid var(--border); color:var(--text); border-radius:.4rem; padding:.25rem .5rem; font-size:.85rem; opacity:0; transition:.2s; cursor:pointer; }
.editing .taggable .edit-btn, .taggable:hover .edit-btn{ opacity:1; }
.tag-editor{ position:absolute; inset:auto .5rem .5rem .5rem; background:#0d1117; border:1px solid var(--border); border-radius:.6rem; padding:.6rem; box-shadow:var(--shadow); z-index:3; display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.tag-editor label{ display:grid; gap:.2rem; font-size:.9rem; color:var(--muted); }
.tag-editor input, .tag-editor select{ background:#0b0f14; color:var(--text); border:1px solid var(--border); border-radius:.4rem; padding:.45rem .5rem; font:inherit; }
.tag-editor .actions{ grid-column:1/-1; display:flex; gap:.5rem; justify-content:flex-end; }

/* Lightbox */
.lightbox{ position:fixed; inset:0; display:none; z-index:100; }
.lightbox[aria-hidden="false"]{ display:block; }
.lightbox-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.65); opacity:0; transition:.2s; z-index:1; }
.lightbox[aria-hidden="false"] .lightbox-backdrop{ opacity:1; }
.lightbox-content{ position:absolute; inset:5% 8%; background:#0b0e12; border:1px solid var(--border); border-radius:.8rem; box-shadow:var(--shadow); padding:0; display:flex; align-items:center; justify-content:center; overflow:hidden; z-index:2; }
.lightbox-content img, .lightbox-content video{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; background:#000; }
.lb-image{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.lightbox-close{ position:absolute; top:12px; right:16px; z-index:2; background:#0c1015; border:1px solid var(--border); color:var(--text); border-radius:.5rem; padding:.3rem .55rem; cursor:pointer; }

/* Before/After slider */
.ba-wrap{ position:relative; width:100%; height:100%; display:grid; place-items:center; background:#000; }
.ba-wrap img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.ba-after-clip{ position:absolute; inset:0; }
.ba-slider{ position:absolute; left:8%; right:8%; bottom:16px; appearance:none; height:6px; background:#1f2937; border-radius:999px; outline:none; }
.ba-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; background:linear-gradient(135deg, var(--brand), var(--accent)); border-radius:50%; border:0; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.ba-slider::-moz-range-thumb{ width:18px; height:18px; background:linear-gradient(135deg, var(--brand), var(--accent)); border-radius:50%; border:0; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.ba-caption{ position:absolute; left:16px; bottom:16px; color:var(--muted); background:rgba(0,0,0,.35); padding:.3rem .5rem; border-radius:.4rem; border:1px solid var(--border); }

/* Responsive */
@media (max-width: 860px){
  .nav{ display:none; position:absolute; right:1rem; top:58px; flex-direction:column; background:#0b0f14; border:1px solid var(--border); padding:.6rem; border-radius:.7rem; }
  .nav.open{ display:flex; }
  .nav-toggle{ display:block; }
  .brand-name{ display:none; }
  .highlights-grid{ grid-template-columns:repeat(2,1fr); }
  .about-split{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-inner{ justify-content:center; text-align:center; }
  .footer-links{ width:100%; justify-content:center; }
  .copyright{ text-align:center; width:100%; margin-left:0; }
}

@media (max-width: 640px){
  .lightbox-content{ inset:6% 4%; }
}

@media (min-width: 1080px){
  .plans-grid{ grid-template-columns: repeat(4, 1fr); }
}


.h-img{ height:18px; width:auto; display:inline-block; filter:grayscale(10%) brightness(1.2); }
.svc-img{ height:28px; width:auto; }