/* ----------
  Complete Space Renovations - Styles
  Modern, clean, accessible, responsive.
---------- */
:root{
  --brand:#0fb5c2;        /* teal/turquoise */
  --brand-ink:#0a6e77;
  --bg:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --surface:#f8fafc;
  --radius:14px;
  --shadow:0 10px 30px rgba(2,8,23,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#fafdff 0%, #ffffff 120%);
  line-height:1.6;
}

.container{width:min(1100px, 92%); margin-inline:auto}

img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration: none}
a:hover{ text-decoration: underline }

.button{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; border:1px solid var(--border); border-radius:999px;
  padding:.8rem 1.1rem; font-weight:600; text-decoration:none;
  transition:.2s ease transform, .2s ease background, .2s ease border-color;
  cursor:pointer; background:var(--surface);
}
.button:hover{ transform:translateY(-1px) }
.button--primary{ background:var(--brand); color:#fff; border-color:transparent }
.button--primary:hover{ background:var(--brand-ink) }
.button--ghost{ background:transparent }

.small{font-size:.9rem; color:var(--muted)}

.site-header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.8);
  backdrop-filter: saturate(180%) blur(8px); border-bottom:1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:.6rem 0 }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; color:var(--ink) }
.nav__toggle{ background:transparent; border:none; display:none }
.nav__menu{ display:flex; align-items:center; gap:.6rem; list-style:none; padding:0; margin:0 }
.nav__menu a{ padding:.6rem .8rem; border-radius:999px }
.nav__menu a:hover{ background:var(--surface); text-decoration:none }

.hero{ padding: clamp(2rem, 6vw, 5rem) 0 }
.hero__inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center }
.hero__copy h1{ font-size:clamp(2rem, 5vw, 3rem); margin:.2rem 0 .6rem }
.hero__copy p{ color:var(--muted) }
.hero__cta{ display:flex; gap:.6rem; margin:1rem 0 }
.trust{ list-style:none; padding:0; margin:1.2rem 0 0; display:flex; flex-wrap:wrap; gap:.8rem; color:var(--muted) }
.trust li{ display:flex; align-items:center; gap:.5rem; border:1px dashed var(--border); padding:.4rem .7rem; border-radius:999px; background:#fff }

.services{ padding:3rem 0; background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.grid{ display:grid; gap:1rem }
.grid--3{ grid-template-columns: repeat(3, 1fr) }
.card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow); min-height:100% }
.card h3{ margin:.6rem 0 .2rem }

.work{ padding:3rem 0 }
.section-intro{ color:var(--muted); margin-top:-.6rem }
.gallery{ display:grid; grid-template-columns: repeat(3, 1fr); gap:.8rem; margin-top:1rem }
.gallery img{ width:100%; height:220px; object-fit:cover; border-radius:12px; border:1px solid var(--border) }

.about{ padding:3rem 0; background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.about__inner{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center }
.checks{ list-style:none; padding:0; margin:1rem 0 0 }
.checks li{ padding-left:1.6rem; position:relative; margin:.4rem 0 }
.checks li::before{ content:'✓'; position:absolute; left:0; color:var(--brand) }

.reviews{ padding:3rem 0 }
.review{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow) }

.cta{ padding:3rem 0 2.4rem }
.cta__inner{ background: linear-gradient(120deg, #e7fbff, #fff); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; text-align:center; box-shadow:var(--shadow) }

.contact{ padding:3rem 0 }
.contact__inner{ display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:start }
.form__row{ display:grid; gap:.3rem; margin:.7rem 0 }
input, select, textarea{ width:100%; border:1px solid var(--border); border-radius:10px; padding:.7rem .8rem; font:inherit; background:#fff }
input:focus, select:focus, textarea:focus{ outline:2px solid color-mix(in oklab, var(--brand), white 60%) }
.form__actions{ display:flex; gap:.8rem; align-items:center; margin-top:1rem }
.form__note{ color:var(--muted); font-size:.9rem }

.contact__card{ border:1px solid var(--border); background:#fff; border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow) }
.list{ list-style:none; padding:0; margin:0 }
.list li{ padding:.3rem 0 }

.site-footer{ padding:1.6rem 0; border-top:1px solid var(--border); background:#fff }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.footer__badges{ display:flex; gap:.6rem; list-style:none; padding:0; margin:0 }

/* lightbox modal */
.modal{ position:fixed; inset:0; background:rgba(9,13,31,.75); display:none; align-items:center; justify-content:center; padding:1rem; z-index:100 }
.modal.open{ display:flex }
.modal img{ max-width:min(92vw, 1200px); max-height:88vh; border-radius:12px; box-shadow:var(--shadow) }
.modal__close{ position:absolute; top:14px; right:14px; border:none; background:#fff; border-radius:999px; padding:.5rem; cursor:pointer }

/* a11y */
.skip-link{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{ left:10px; top:10px; width:auto; height:auto; padding:.4rem .6rem; background:#000; color:#fff; border-radius:6px }

/* responsive */
/* Before/After pairs — refined */
.gallery--pairs { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.pair {
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding:1rem;
}
.pair figcaption {
  font-weight: 800; margin-bottom:.75rem; letter-spacing:.2px;
}
.pair__images {
  display:grid; grid-template-columns: 1fr 1fr; gap:.9rem;
}
.pair__images a {
  position: relative; border-radius:12px; overflow:hidden; border:1px solid var(--border);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pair__images a:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(2,8,23,.10); }
.pair__images img {
  width:100%; height:260px; object-fit:cover; display:block;
  aspect-ratio: 4 / 3; /* keeps consistent crop across photos */
}
.badge {
  position:absolute; left:.6rem; top:.6rem;
  background:rgba(15, 17, 26, .70); color:#fff; font-size:.8rem; font-weight:700;
  padding:.28rem .55rem; border-radius:999px; text-transform:uppercase; letter-spacing:.4px;
}
.badge--after { background: var(--brand-ink); }

/* Stack on smaller screens */
@media (max-width: 700px){
  .pair__images { grid-template-columns: 1fr; }
  .pair__images img { height: 240px; }
/* Before/After pairs */
.gallery--pairs { grid-template-columns: 1fr; gap: 1.2rem; }
.pair { background:#fff; border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding:1rem; }
.pair figcaption { font-weight: 700; margin-bottom:.6rem; }
.pair__images { display:grid; grid-template-columns: 1fr 1fr; gap:.8rem; }
.pair__images a { position: relative; border-radius:12px; overflow: hidden; border:1px solid var(--border); }
.pair__images img { width:100%; height:260px; object-fit: cover; display:block; }
.badge { position:absolute; left:.6rem; top:.6rem; background:rgba(0,0,0,.65); color:#fff; font-size:.8rem; padding:.25rem .5rem; border-radius:999px; }
.badge--after { background: var(--brand-ink); }

/* Stack on mobile */
@media (max-width: 700px){
  .pair__images { grid-template-columns: 1fr; }
  .pair__images img { height: 240px; }
}
@media (max-width: 900px){
  .hero__inner{ grid-template-columns: 1fr }
  .about__inner{ grid-template-columns: 1fr }
  .grid--3{ grid-template-columns: 1fr }
  .gallery{ grid-template-columns: repeat(2, 1fr) }
  .contact__inner{ grid-template-columns: 1fr }
  .nav__toggle{ display:block }
  .nav__menu{ display:none; position:absolute; right:1rem; top:60px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:.6rem; box-shadow:var(--shadow); flex-direction:column; align-items:stretch; width:min(220px, 90vw) }
  .nav__menu.open{ display:flex }
  .nav__menu a{ padding:.7rem .9rem }
}