:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --nav:#bcc4cf;
  --border:#e5e7eb;
  --card:#ffffff;
  --alt:#f7f8fb;
  --shadow:0 10px 30px rgba(2,6,23,.08);
  --radius:18px;
  --door-color:#2f343b;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}

.container{max-width:1500px;margin:0 auto;padding:0 20px}
a{color:inherit;text-decoration:none}
.muted{color:var(--muted)}
.bg{color:var(--bg)}
.nav{color:var(--nav)}
.small{font-size:.9rem}

.site-header{
  position:sticky;top:0;z-index:50;
  background: rgba(0, 42, 85, 0.85);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
.header-row{display:flex;align-items:center;justify-content:space-between;padding:14px 14px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand-name{letter-spacing:.2px}
.nav{display:flex;align-items:center;gap:14px}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:14px}
.nav-list a{color:var(--nav);font-weight:600}
.nav-list a:hover{color:var(--muted)}

.btn,
input[type="submit"] {
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 20px;border-radius:999px;
  border:1px solid var(--border);
  font-weight:700;
  gap:8px;
}


/* .swatch.is-active:after {
  content: '\f00c';
  font-family: 'Font Awesome 5 Free';
  display: block;
  color: var(--text);
  font-weight: bold;
  font-size: 1.2rem;
} */

input[type="submit"] {
  background: #eee;
}
input[type="submit"]:hover {
  background:var(--text);
  color: #fff;
}

.btn-primary{background:var(--text);color:#fff;border-color:var(--text)}
.btn-primary:hover{filter:brightness(.95)}
.btn-ghost{background:#fff}
.btn-ghost:hover{background:var(--alt)}

.section{padding:72px 0}
.section-alt{background:var(--alt)}
.section-head{margin-bottom:22px}
.h1{font-size:2.4rem;line-height:1.1;margin:10px 0 10px}
.h2{font-size:1.7rem;margin:0 0 6px}
.h3{font-size:1.15rem;margin:0 0 10px}
.lead{font-size:1.05rem;color:var(--muted);max-width:56ch}
.pill{
  display:inline-block;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);
  background:#fff;
  font-weight:700;
  font-size:.85rem;
}

.hero{padding:42px 0 26px;background: #f5f5ff;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:start}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.trust-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.trust-item{display:flex;gap:10px;align-items:center;padding:10px 10px;border:1px solid var(--border);border-radius:10px;background:#fff}
.trust-icon{width:40px;height:40px;display:grid;place-items:center;color:var(--muted);font-size: 35px;line-height: 35px;}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.stack{display:grid;gap:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.badge{padding:6px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-weight:800;font-size:.9rem;background:#fff}

.list{margin:12px 0 0;padding-left:18px;color:var(--muted)}
.list li{margin:7px 0}

.hero-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.hero-media{background:var(--alt);padding:14px}
.hero-media img {width: 100%;}
.door-svg{width:100%;height:auto;display:block;border-radius:14px}
.hero-card-inner{padding:14px 16px 16px}
.hero-card-title{font-weight:900;color:var(--muted);font-size:.9rem;text-transform:uppercase;letter-spacing:.08em}
.price-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.price-card{border:1px solid var(--border);border-radius:14px;padding:12px;background:#fff}
.price-name{font-weight:800}
.price{color:var(--muted);margin-top:2px}

.studio{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start}
.studio-preview{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.studio-label{padding:12px 14px;border-bottom:1px solid var(--border);font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem}
.studio-media{padding:14px}
.studio-image{display:block;width:100%;height:auto;border-radius:12px}
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:12px 0}
.swatch{display:flex;align-items:center;gap:10px;width:100%;border-radius:12px;border:1px solid var(--border);background:#fff;cursor:pointer;padding:8px 10px;text-align:left}
.swatch-chip{width:35px;height:35px;border-radius:8px;background:var(--sw);border:1px solid rgba(15,23,42,.15)}
.swatch-text{font-weight:700;color:var(--text);line-height:1.1;display: flex;flex-direction: column;gap: 5px;}
.swatch-text small{font-size:.72rem;color:var(--muted);font-weight:600;}
.swatch.is-active{outline:3px solid rgba(15,23,42,.25);outline-offset:2px;background: #f7f7f7;}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{border:1px solid var(--border);background:#fff;border-radius:999px;padding:6px 10px;color:var(--muted);font-weight:700;font-size:.85rem}
.callout{margin:14px 0;border:1px dashed rgba(100,116,139,.4);border-radius:14px;padding:12px;background:#fff}

.prose p{margin:0 0 12px;color:var(--muted)}
.prose p:last-child{margin-bottom:0}

.form{display:grid;gap:12px}
label span{display:block;font-weight:800;margin-bottom:6px}
input, textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  font:inherit;
  background:#fff;
}

.site-footer{
  border-top:1px solid var(--border);
  padding:26px 0;
  background: rgba(0, 42, 85, 0.85);
}
.site-footer .footer-center{text-align:center;}
.site-footer .footer-right{text-align:right;}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}

@media (max-width: 980px){
  .hero-grid,.studio,.grid-2{grid-template-columns:1fr}
  .nav-list {
    display: block;
    text-align: center;
  }
  nav {
    font-size: 12px;
  }
  a.quote {
    padding: 5px 8px !important;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
  }
  img.custom-logo {
    max-width: 70px;
    height: auto;
  }
  .site-footer .footer-center .nav-list {
    text-align: left;
  }
  .site-footer .footer-right {
    text-align: left;
  }
}