html{scroll-behavior:smooth}
section[id]{scroll-margin-top:76px}
:target{outline:none}

*{box-sizing:border-box}
:root{
  --bg:#ffffff;
  --ink:#0b1b2b;
  --muted:#5b728a;
  --brand:#0096c7;
  --brand-dark:#0077b6;
  --surface:#f4f8fb;
  --ring: rgba(0,150,199,.25);
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial}
img{max-width:100%;height:auto;display:block}
.container{width:min(1100px,92%);margin:auto}

.site-header{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #e6eef4;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.menu{display:flex;gap:1rem;align-items:center}
.menu a{color:var(--ink);text-decoration:none;font-weight:600}
.menu .btn{margin-left:.25rem}

.hero{background:url('images/hero.jpg') center/cover no-repeat;min-height:60vh;display:grid;place-items:center;border-bottom:1px solid #e6eef4}
.hero-inner{padding:4rem 0;text-align:center;color:white;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero h1{font-size:clamp(1.8rem,4vw,3rem);margin:.5rem 0}
.hero p{font-size:clamp(1rem,1.6vw,1.25rem);opacity:.95;max-width:60ch;margin:0 auto 1.25rem}

.btn{display:inline-block;padding:.7rem 1rem;border-radius:.8rem;border:1px solid #cfdbe6;background:#fff;color:var(--ink);text-decoration:none;font-weight:700;transition:.2s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--brand);border-color:var(--brand-dark);color:#fff;box-shadow:0 0 0 0 var(--ring)}
.btn.primary:hover{background:var(--brand-dark)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:2.5rem auto}
.card{background:var(--surface);padding:1rem 1.25rem;border:1px solid #e6eef4;border-radius:1rem}

h2{font-size:clamp(1.4rem,3vw,2rem);margin:2.25rem 0 1rem}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.price-card{border:1px solid #e6eef4;border-radius:1rem;padding:1rem}
.price{font-size:1.6rem;font-weight:800;color:var(--brand)}

details{border:1px solid #e6eef4;border-radius:.75rem;padding:.75rem;margin:.5rem 0;background:#fff}

.contact form{background:#fff;border:1px solid #e6eef4;border-radius:1rem;padding:1rem}
.contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.contact input,.contact textarea{width:100%;padding:.75rem;border-radius:.6rem;border:1px solid #cfdbe6}
.contact input:focus,.contact textarea:focus{outline:none;box-shadow:0 0 0 4px var(--ring);border-color:var(--brand)}

.site-footer{padding:2rem 0;color:var(--muted)}
@media (max-width:640px){.contact .grid{grid-template-columns:1fr}}


.price-table-wrapper{overflow-x:auto;margin-top:1rem}
.price-table{width:100%;border-collapse:collapse;font-size:1rem}
.price-table th,.price-table td{border:1px solid #e6eef4;padding:.75rem;text-align:left}
.price-table th{background:var(--surface);font-weight:700}
.price-table tr:nth-child(even){background:#fafcfd}


.hero.two-col{
  display:flex;
  align-items:center;
  gap:2rem;
  padding:2rem 0;
  background:linear-gradient(90deg, var(--brand-dark) 0%, var(--brand) 100%);
  color:white;
}
.hero.two-col .hero-img{
  flex:1 1 50%;
}
.hero.two-col .hero-img img{
  width:100%;
  height:auto;
  border-radius:1rem;
}
.hero.two-col .hero-text{
  flex:1 1 50%;
}
@media (max-width:768px){
  .hero.two-col{
    flex-direction:column;
    text-align:center;
  }
  .hero.two-col .hero-img, .hero.two-col .hero-text{
    flex:1 1 100%;
  }
}


.price-card h3{
  margin-bottom:.5rem;
}
.price-btn{
  background:none;
  border:none;
  color:var(--brand);
  font-size:1.2rem;
  font-weight:bold;
  cursor:pointer;
  padding:0;
  text-decoration:underline;
}
.price-btn:hover{
  color:var(--brand-dark);
}
.price-details{
  margin-top:.5rem;
  font-size:.95rem;
  color:var(--ink);
}


.price-card{border:1px solid #e6eef4;border-radius:1rem;padding:.5rem;background:#fff;transition:.2s}
.price-card[open]{box-shadow:0 6px 18px rgba(0,0,0,.06)}
.price-card summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer}
.price-card summary::-webkit-details-marker{display:none}
.price-card h3{margin:.25rem 0}
.price-card .price{margin:.25rem 0;font-size:1.6rem;font-weight:800;color:var(--brand)}
.price-card ul{margin:.75rem 0 0 1rem}
.price-card summary:focus{outline:none}
.price-card:focus-within{box-shadow:0 0 0 4px var(--ring)}


.price-card{border:1px solid #e6eef4;border-radius:1rem;padding:.25rem .75rem;background:#fff;transition:.2s}
.price-card[open]{box-shadow:0 6px 18px rgba(0,0,0,.06)}
.price-card summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;padding:.5rem 0}
.price-card summary::-webkit-details-marker{display:none}
.price-card h3{margin:.1rem 0}
.price-card .price{margin:.1rem 0;font-size:1.6rem;font-weight:800;color:var(--brand)}
.price-card ul{margin:.5rem 0 .75rem 1rem}
.price-card:focus-within{box-shadow:0 0 0 4px var(--ring)}
.price-card .chev{transition:transform .2s}
.price-card[open] .chev{transform:rotate(180deg)}

.hidden { display: none; }

/* Floating labels */
.contact-floating { position: relative; }
.contact-floating label {
  position: absolute; left: 1rem; top: 1rem;
  color: #94a3b8; font-size: 0.9rem; pointer-events: none;
  background: transparent; transition: .2s ease;
}
.contact-floating input::placeholder,
.contact-floating textarea::placeholder { color: transparent; }
.contact-floating input:focus + label,
.contact-floating input:not(:placeholder-shown) + label,
.contact-floating textarea:focus + label,
.contact-floating textarea:not(:placeholder-shown) + label {
  top: -0.6rem; left: 0.75rem;
  background: #fff; padding: 0 .25rem;
  font-size: .75rem; color: var(--brand);
}

/* Error messaging */
.field-error { color: #b91c1c; font-size: .8rem; line-height: 1; min-height: 1em; display: inline-block; }
.input-error { border-color: #b91c1c !important; box-shadow: 0 0 0 3px rgba(185,28,28,.15) !important; }

/* Success message fade-in */
#formMessage { opacity: 0; transition: opacity .25s ease; }
#formMessage.show { opacity: 1; }

/* Character counter alignment on mobile */
.charcount { margin-left: auto; }

/* Make the Call Us Now button stand out */
.call-now {
  background-color: var(--brand);
  color: #fff !important;
  font-weight: bold;
  border-radius: 999px; /* pill shape */
  padding: 0.5rem 1.2rem;
  margin-left: 1rem;
  transition: all 0.2s ease-in-out;
}

.call-now:hover {
  background-color: var(--brand-dark);
  transform: scale(1.05);
}