:root{
  --bg:#0d0f14; --ink:#e9edf6; --muted:#aeb7c8; --surface:#121722; --ring:#263045; --accent:#00d28e; --accent-ink:#04261b;
}
*{box-sizing:border-box} body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
a{color:#7ee8c9;text-decoration:none} a:hover{text-decoration:underline}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid var(--ring);font-weight:600}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{font-weight:800;font-size:20px;color:var(--ink)} .brand span{color:var(--accent)}
.menu{list-style:none;display:flex;gap:16px;margin:0;padding:0}
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--ring)}
.hero img{width:100%;height:54vh;object-fit:cover;display:block;filter:contrast(1.08)}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.65))}
.hero .content{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;max-width:760px;padding:0 16px}
.hero h1{font-size:40px;line-height:1.1;margin:0 0 10px}
.hero p{margin:0 0 14px;color:#d7dff0}
.section{padding:36px 0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;border:1px solid var(--ring)}
.card{background:var(--surface);border:1px solid var(--ring);border-radius:16px;padding:18px}
footer{margin-top:40px;padding:22px 0;border-top:1px solid var(--ring);background:#0b0f16;color:var(--muted);font-size:14px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)} .hero img{height:42vh}}
@media (max-width:560px){.grid{grid-template-columns:1fr} .hero h1{font-size:32px}}

/* Before/After slider */
.ba{margin:18px 0}
.ba-wrap{position:relative;max-width:1100px;margin:0 auto;border-radius:16px;overflow:hidden;border:1px solid var(--ring)}
.ba-wrap img{display:block;width:100%;height:auto}
.ba-wrap .after{position:absolute;inset:0;overflow:hidden;--pos:50%}
.ba-wrap .after img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;clip-path: inset(0 calc(100% - var(--pos)) 0 0)}
.ba-wrap .labels{position:absolute;inset:0;display:flex;justify-content:space-between;pointer-events:none}
.ba-wrap .label{background:rgba(0,0,0,.55);color:#fff;padding:6px 10px;border-radius:10px;margin:10px;font-weight:700;font-size:13px}
.ba-wrap .controls{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center}
.ba-wrap input[type=range]{width:80%;-webkit-appearance:none;background:transparent}
.ba-wrap input[type=range]::-webkit-slider-runnable-track{height:4px;background:rgba(255,255,255,.5);border-radius:999px}
.ba-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);margin-top:-7px;border:2px solid #000}
.ba-wrap input[type=range]::-moz-range-track{height:4px;background:rgba(255,255,255,.5);border-radius:999px}
.ba-wrap input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid #000}
.grid-ba{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:900px){.grid-ba{grid-template-columns:1fr 1fr}}

/* Logo + brand alignment */
.brand{display:flex;align-items:center;gap:10px}
.logo{height:28px;width:auto;display:inline-block;vertical-align:middle}

/* --- Theme override: Yellow & Black --- */
:root{
  --accent:#FFC107;            /* Amber */
  --accent-ink:#1a1300;        /* Deep brown/black for text on yellow */
}
.btn-primary:hover{filter:brightness(1.05)}
a{color:#FFE082} a:hover{color:#FFD54F}

/* --- Fix: brand link color to yellow (no browser default blue) --- */
.nav .brand,
.nav .brand:link,
.nav .brand:visited,
.nav .brand:hover,
.nav .brand:active{
  color: var(--accent);
  text-decoration: none;
}
/* Keep menu links white */
.nav .menu a,
.nav .menu a:link,
.nav .menu a:visited{
  color: var(--ink);
  text-decoration:none;
}
.nav .menu a:hover{
  color: var(--ink);
  text-decoration:none;
  border-color: var(--ring);
}

/* --- Quote form layout & mobile tweaks --- */
.hidden{display:none}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.field label{display:block;font-weight:600;margin-bottom:6px}
.field input[type=text], .field input[type=tel], .field input[type=email], .field input[type=file],
.field select, .field textarea{width:100%;padding:12px 12px;border-radius:10px;border:1px solid var(--ring);background:#0b0f16;color:var(--ink)}
.options{border:1px solid var(--ring);border-radius:12px;padding:12px;margin:10px 0;background:#0b0f16}
.options legend{padding:0 6px;font-weight:700;color:var(--ink)}
.options label{display:inline-flex;align-items:center;gap:8px;margin-right:14px;margin-bottom:8px}
.help{color:#aeb7c8;font-size:13px}
@media (max-width: 680px){
  .form-grid{grid-template-columns:1fr}
  .btn-primary{width:100%}
}