/* ===============================
   R&R by MHB LLC - Global Styles
   Developed by Rob Rainer • rainer1370.com
   =============================== */

/* --------- Design tokens --------- */
:root{
  --ink: #0f172a;         /* deep slate */
  --muted: #64748b;
  --line: #e6e8ee;

  --brand: #0f766e;       /* teal accent */
  --brand-600:#0d6b63;
  --brand-700:#0b5f58;
  --brand-soft:#e7f9f5;

  --bg: #ffffff;
  --bg-alt:#fafafa;

  --radius: 14px;
  --shadow-1: 0 2px 6px rgba(0,0,0,.06);
  --shadow-2: 0 12px 32px rgba(15,118,110,.12);
  --shadow-3: 0 28px 64px rgba(2,8,23,.18);
}

/* --------- Base / Reset --------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html, body{ height:100%; }

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  line-height:1.65;
  color:var(--ink);
  /* Layered background: neutral linen + subtle pattern + brand glow */
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(15,118,110,.08), transparent 60%),
    repeating-linear-gradient( 90deg, rgba(0,0,0,.012), rgba(0,0,0,.012) 1px, transparent 2px, transparent 8px),
    linear-gradient(180deg,#f7f7fb 0%, #ffffff 45%, #f7f7fb 100%);
  background-attachment: fixed;
}

.wrap{ max-width:1100px; margin:0 auto; padding:1.25rem; }

/* --------- Header --------- */
.site-header{
  position:sticky; top:0; z-index:10;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
  border-bottom:1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand{
  font-weight:800; font-size:1.12rem; letter-spacing:.2px; text-decoration:none; color:#0b0b0b;
}

.nav{ display:flex; gap:1.1rem; align-items:center; }
.nav a{
  color:#1f2937; text-decoration:none; border-radius:10px; padding:.4rem .6rem;
  transition: color .15s ease, background .2s ease, transform .08s ease, box-shadow .2s ease;
}
.nav a:hover{ color:#0b0b0b; background:#f2f4f7; box-shadow: inset 0 0 0 1px #e5e7eb; }
.nav .cta{
  padding:.55rem .95rem; border:1px solid var(--brand-700); border-radius:999px;
  color:#fff; background: linear-gradient(180deg, var(--brand) 0%, var(--brand-600) 100%);
  box-shadow: 0 8px 18px rgba(15,118,110,.22);
}
.nav .cta:hover{ transform:translateY(-1px); background:linear-gradient(180deg,var(--brand-600),var(--brand-700)); }

/* --------- Hero / Page Hero --------- */
.hero{
  background:
    radial-gradient(900px 400px at 50% -10%, rgba(15,118,110,.10), transparent 60%),
    linear-gradient(180deg, var(--brand-soft) 0%, #ffffff 60%);
  padding: 3.25rem 0; text-align:center;
  box-shadow: var(--shadow-2) inset;
}
.hero h1{ font-size:2.15rem; margin-bottom:.6rem; letter-spacing:.2px; }
.hero p{ font-size:1.12rem; color:#334155; }

.page-hero{
  background: linear-gradient(180deg, #f4f6fa 0%, #ffffff 70%);
  border-bottom:1px solid var(--line);
  padding:1.7rem 0; text-align:center;
  box-shadow: var(--shadow-1) inset;
}
.page-hero h1{ font-size:1.7rem; margin-bottom:.55rem; }

/* --------- Buttons --------- */
.button{
  display:inline-block; padding:.85rem 1.1rem; border:1px solid #111; border-radius:12px;
  text-decoration:none; color:#111; margin-top:1rem; transition: all .18s ease;
  background:#fff;
}
.button:hover{ background:#111; color:#fff; transform:translateY(-1px); }
.button.primary{
  background:linear-gradient(180deg, var(--brand) 0%, var(--brand-600) 100%);
  border-color:var(--brand-600); color:#fff; box-shadow:0 12px 28px rgba(15,118,110,.22);
}
.button.primary:hover{ background:linear-gradient(180deg, var(--brand-600), var(--brand-700)); }

/* --------- Section cards --------- */
.section-card,
.services-overview,
.gallery,
.testimonials,
.content .wrap:not(.no-card){
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2rem 1.6rem;
  margin-top:1.6rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, var(--shadow-1);
}

/* Section headings */
.content h2{
  font-size:1.25rem; margin: .25rem 0 .5rem; letter-spacing:.2px;
}
.content h2::after{
  content:""; display:block; width:56px; height:3px; margin:.4rem 0 0;
  background:linear-gradient(90deg,var(--brand), transparent);
  border-radius:3px;
}

/* CTA bar */
.cta-bar{
  background:#f6f9fb;
  border-block:1px solid var(--line);
  text-align:center;
  padding:1.6rem 1rem;
  box-shadow: 0 -6px 18px rgba(0,0,0,.04) inset;
}

/* --------- Services Grid --------- */
.services-overview .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:.85rem; margin-top:1rem; list-style:disc; padding-left:1.1rem;
}

/* --------- Contact Form --------- */
.contact-form{ display:grid; gap:.85rem; margin:1.1rem 0; }
.contact-form label{ display:grid; gap:.3rem; font-weight:700; color:#0b1220; }
.contact-form input, .contact-form textarea{
  padding:.7rem .8rem; border:1px solid #cbd5e1; border-radius:.6rem; font-family:inherit;
  background:#fff; box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:2px solid var(--brand); outline-offset:2px; border-color:var(--brand-600);
  box-shadow: 0 0 0 4px rgba(15,118,110,.12);
}
.contact-form button{
  padding:.8rem 1.05rem; border:0; border-radius:.7rem;
  background:linear-gradient(180deg, var(--brand) 0%, var(--brand-600) 100%);
  color:#fff; cursor:pointer; transition:transform .12s ease, filter .15s ease;
  box-shadow: 0 10px 22px rgba(15,118,110,.22);
}
.contact-form button:hover{ transform:translateY(-1px); filter:saturate(1.05); }

/* --------- Gallery --------- */
.gallery .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.15rem; margin-top:1.15rem;
}
.gallery figure{
  background:linear-gradient(180deg,#ffffff 0%, #fcfcff 100%);
  border:1px solid var(--line); border-radius:.8rem; padding:.55rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, var(--shadow-1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.gallery figure:hover{ transform: translateY(-4px); box-shadow: var(--shadow-3); }
.gallery img{ width:100%; border-radius:.5rem; display:block; }
.gallery figcaption{
  text-align:center; margin-top:.5rem; font-size:.92rem; color:#42546a;
  background: #f7f8fb; border-top:1px solid var(--line); padding:.4rem .3rem .55rem;
  border-radius:0 0 .6rem .6rem;
}

/* Optional rows for before/after groupings */
.row-label{ font-weight:800; color:#1f2937; margin:.9rem 0 .35rem; text-transform:uppercase; font-size:.95rem; letter-spacing:.9px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.grid-auto{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }

/* --------- Testimonials --------- */
.testimonials{ display:grid; gap:1.15rem; margin-top:1.1rem; }
blockquote{
  background:linear-gradient(180deg,#ffffff 0%, #fbfcff 100%);
  border-left:5px solid var(--brand);
  padding:1.05rem 1rem; border-radius:.6rem; border:1px solid var(--line);
  box-shadow: var(--shadow-1);
}
blockquote p{ margin-bottom:.6rem; }
blockquote cite{ display:block; color:var(--muted); font-style:normal; font-size:.95rem; }

/* --------- Footer --------- */
.site-footer{
  border-top:1px solid var(--line);
  margin-top:2rem; text-align:center; font-size:.92rem; color:#556074;
  background: linear-gradient(180deg, #f3f5f8 0%, #e9eef4 100%);
  padding:1.1rem 0; box-shadow: 0 -8px 26px rgba(0,0,0,.06) inset;
}
.site-footer a{ color:var(--brand-600); text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.developer{ font-size:.86rem; color:#6b7280; margin-top:.55rem; }

/* --------- Utilities --------- */
.small{ font-size:.92rem; color:#475569; margin-top:.55rem; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px;
}

/* --------- Responsive --------- */
@media (max-width: 720px){
  .nav{ justify-content:center; flex-wrap:wrap; padding:.55rem 0; }
  .brand{ display:block; text-align:center; margin-bottom:.25rem; }
  .hero h1{ font-size:1.7rem; }
  .grid-2{ grid-template-columns: 1fr; }
}