:root{
    --accent:#0057ff;
    --accent-dark:#003ecb;
    --ink:#111418;
    --ink-soft:#4a5160;
    --bg:#ffffff;
    --bg-alt:#f4f6fa;
    --border:#e3e7ee;
    --radius:14px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
    color:var(--ink);
    background:var(--bg);
    line-height:1.6;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1100px;margin:0 auto;padding:0 24px;}
  section{padding:80px 0;}

  /* ---------- Photo placeholder ---------- */
  /*
    PHOTO PLACEHOLDER BLOCKS
    -------------------------------------------------
    Each ".photo-placeholder" div marks a spot for a real photo.
    To swap in a real image, either:
      1) Replace the div with: <img src="your-photo.jpg" alt="description">
      2) Or keep the div and add: style="background-image:url('your-photo.jpg'); background-size:cover; background-position:center;"
    and remove the placeholder label span.
  */
  .photo-placeholder{
    background:repeating-linear-gradient(45deg, #eef1f6, #eef1f6 10px, #e6eaf2 10px, #e6eaf2 20px);
    border:2px dashed #c3cbdb;
    border-radius:var(--radius);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#8892a3;
    font-size:14px;
    font-weight:600;
    text-align:center;
    padding:12px;
  }

  /* ---------- Real photo container ---------- */
  /* Use this class (instead of .photo-placeholder) once a real image is dropped in. */
  .photo{
    border-radius:var(--radius);
    overflow:hidden;
  }
  .photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* ---------- Header ---------- */
  header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--border);
  }
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 0;
  }
  .logo{
    font-size:22px;
    font-weight:800;
    letter-spacing:0.5px;
  }
  .logo span{color:var(--accent);}
  .nav-links{
    display:flex;
    gap:32px;
    font-weight:600;
    font-size:15px;
  }
  .nav-links a:hover{color:var(--accent);}
  .nav-cta{
    display:flex;
    gap:12px;
    align-items:center;
  }
  .btn{
    display:inline-block;
    padding:12px 24px;
    border-radius:999px;
    font-weight:700;
    font-size:15px;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn-primary{
    background:var(--accent);
    color:#fff;
    box-shadow:0 8px 20px rgba(0,87,255,0.25);
  }
  .btn-primary:hover{background:var(--accent-dark);transform:translateY(-2px);}
  .btn-outline{
    border:2px solid var(--accent);
    color:var(--accent);
  }
  .btn-outline:hover{background:var(--accent);color:#fff;}
  .btn-small{padding:10px 18px;font-size:14px;}
  .nav-toggle{display:none;}

  /* ---------- Hero ---------- */
  .hero{
    padding:0;
    position:relative;
  }
  .hero-inner{
    max-width:1100px;
    margin:0 auto;
    padding:70px 24px;
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:48px;
    align-items:center;
  }
  .hero h1{
    font-size:44px;
    line-height:1.15;
    font-weight:800;
    margin-bottom:18px;
  }
  .hero h1 span{color:var(--accent);}
  .hero p{
    font-size:18px;
    color:var(--ink-soft);
    margin-bottom:28px;
    max-width:480px;
  }
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
  .hero-photo{
    height:380px;
  }
  .hero-badges{
    display:flex;
    gap:24px;
    margin-top:36px;
    flex-wrap:wrap;
  }
  .hero-badge{
    font-size:14px;
    font-weight:700;
    color:var(--ink-soft);
    display:flex;
    align-items:center;
    gap:8px;
  }
  .hero-badge::before{
    content:"✓";
    color:var(--accent);
    font-weight:900;
  }

  /* ---------- Section heading ---------- */
  .section-head{
    text-align:center;
    max-width:600px;
    margin:0 auto 48px;
  }
  .eyebrow{
    color:var(--accent);
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
    font-size:13px;
    margin-bottom:10px;
    display:block;
  }
  .section-head h2{
    font-size:32px;
    font-weight:800;
    margin-bottom:12px;
  }
  .section-head p{color:var(--ink-soft);font-size:16px;}

  /* ---------- Services ---------- */
  .services{background:var(--bg-alt);}
  .service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
  .service-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:32px 28px;
    display:flex;
    flex-direction:column;
    box-shadow:0 6px 24px rgba(20,30,60,0.05);
  }
  .service-card.featured{
    border:2px solid var(--accent);
    box-shadow:0 12px 32px rgba(0,87,255,0.15);
    transform:translateY(-8px);
  }
  .service-tag{
    align-self:flex-start;
    background:var(--accent);
    color:#fff;
    font-size:12px;
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;
    padding:4px 12px;
    border-radius:999px;
    margin-bottom:14px;
  }
  .service-card h3{font-size:21px;font-weight:800;margin-bottom:6px;}
  .service-price{
    font-size:34px;
    font-weight:800;
    color:var(--accent);
    margin:10px 0 18px;
  }
  .service-price sup{font-size:16px;font-weight:700;margin-right:2px;}
  .service-price small{font-size:14px;color:var(--ink-soft);font-weight:600;}
  .service-card ul{
    list-style:none;
    margin:0 0 26px;
    flex:1;
  }
  .service-card ul li{
    padding:8px 0;
    border-bottom:1px solid var(--border);
    font-size:15px;
    color:var(--ink-soft);
    display:flex;
    gap:8px;
  }
  .service-card ul li::before{content:"✓";color:var(--accent);font-weight:900;}
  .service-card ul li:last-child{border-bottom:none;}
  .price-note{
    text-align:center;
    color:var(--ink-soft);
    font-size:14px;
    margin-top:28px;
  }

  /* ---------- About ---------- */
  .about-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:center;
  }
  .about-photo{height:340px;}
  .about-text h2{font-size:32px;font-weight:800;margin-bottom:16px;}
  .about-text p{color:var(--ink-soft);font-size:16px;margin-bottom:16px;}
  .about-list{list-style:none;margin-top:24px;}
  .about-list li{
    display:flex;
    gap:12px;
    align-items:flex-start;
    font-weight:600;
    padding:8px 0;
  }
  .about-list li::before{content:"●";color:var(--accent);font-size:10px;margin-top:8px;}

  /* ---------- Gallery ---------- */
  .gallery{background:var(--bg-alt);}
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
  }
  .gallery-grid .photo-placeholder{height:220px;}

  /* ---------- Map (Google Business Profile Locator) ---------- */
  .map-section{background:var(--bg-alt);}
  .map-embed{
    height:480px;
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--border);
    box-shadow:0 6px 24px rgba(20,30,60,0.05);
  }
  .map-embed gmpx-store-locator{
    display:block;
    width:100%;
    height:100%;
    /* Brand the Locator Plus widget to match SD Shine's blue accent. */
    --gmpx-color-surface:#fff;
    --gmpx-color-on-surface:var(--ink);
    --gmpx-color-on-surface-variant:var(--ink-soft);
    --gmpx-color-primary:var(--accent);
    --gmpx-color-outline:var(--border);
    --gmpx-fixed-panel-width-row-layout:24em;
    --gmpx-fixed-panel-height-column-layout:65%;
    --gmpx-font-family-base:'Segoe UI', system-ui, sans-serif;
    --gmpx-font-family-headings:'Segoe UI', system-ui, sans-serif;
    --gmpx-font-size-base:0.875rem;
    --gmpx-hours-color-open:#188038;
    --gmpx-hours-color-closed:#d50000;
    --gmpx-rating-color:#ffb300;
    --gmpx-rating-color-empty:#e0e0e0;
  }
  @media (max-width:860px){
    .map-embed{height:420px;}
  }

  /* ---------- CTA band ---------- */
  .cta-band{
    background:linear-gradient(135deg, var(--accent), var(--accent-dark));
    color:#fff;
    text-align:center;
    border-radius:var(--radius);
    padding:56px 32px;
    margin:0 24px;
  }
  .cta-band h2{font-size:30px;font-weight:800;margin-bottom:10px;}
  .cta-band p{opacity:.9;margin-bottom:28px;font-size:17px;}
  .cta-band .btn-primary{background:#fff;color:var(--accent);box-shadow:none;}
  .cta-band .btn-primary:hover{background:#eef1ff;}
  .cta-band .btn-outline{border-color:#fff;color:#fff;}
  .cta-band .btn-outline:hover{background:#fff;color:var(--accent);}
  .cta-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}

  /* ---------- Contact / footer info ---------- */
  .contact{padding-top:80px;}
  .contact-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    max-width:900px;
    margin:48px auto 0;
    gap:20px;
    text-align:center;
  }
  .contact-item{
    background:var(--bg-alt);
    border-radius:var(--radius);
    padding:28px 20px;
  }
  .contact-item h3{font-size:15px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-soft);margin-bottom:8px;}
  .contact-item p, .contact-item a{font-size:18px;font-weight:700;}
  .contact-item a:hover{color:var(--accent);}

  footer{
    background:var(--ink);
    color:#c6cbd6;
    padding:40px 0 24px;
    margin-top:80px;
  }
  .footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
  }
  .footer-logo{font-weight:800;color:#fff;font-size:18px;}
  .footer-logo span{color:var(--accent);}
  .footer-address{font-size:13px;color:#8891a3;margin-top:6px;}
  .footer-address a:hover{color:#fff;}
  .footer-links{display:flex;gap:24px;font-size:14px;}
  .footer-links a:hover{color:#fff;}
  .footer-bottom{
    text-align:center;
    font-size:13px;
    color:#8891a3;
    margin-top:28px;
    padding-top:20px;
    border-top:1px solid #262c38;
  }

  /* ---------- Responsive ---------- */
  @media (max-width:860px){
    .hero-inner{grid-template-columns:1fr;padding-top:40px;}
    .hero h1{font-size:34px;}
    .hero-photo{height:260px;order:-1;}
    .service-grid{grid-template-columns:1fr;}
    .service-card.featured{transform:none;}
    .about-inner{grid-template-columns:1fr;}
    .about-photo{height:240px;order:-1;}
    .gallery-grid{grid-template-columns:repeat(2,1fr);}
    .contact-grid{grid-template-columns:1fr;}
    .nav-links{display:none;}
  }

/* ================================================================
   CONTENT PAGES (services, areas hubs + detail pages)
   ================================================================ */

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{
  font-size:13px;
  font-weight:600;
  color:var(--ink-soft);
  padding:22px 0 0;
}
.breadcrumbs a:hover{color:var(--accent);}
.breadcrumbs .sep{margin:0 6px;color:#c3cbdb;}
.breadcrumbs .current{color:var(--ink);}

/* ---------- Page header (service/area pages) ---------- */
.page-header{padding:28px 0 56px;}
.page-header .eyebrow{display:block;}
.page-header h1{
  font-size:38px;
  font-weight:800;
  line-height:1.18;
  margin:10px 0 18px;
  max-width:780px;
}
.page-header .intro{
  font-size:18px;
  color:var(--ink-soft);
  max-width:720px;
}
.page-header .hero-actions{margin-top:28px;}

/* ---------- Hub header (services/index, areas/index) ---------- */
.hub-header{padding:28px 0 20px;text-align:center;}
.hub-header h1{
  font-size:38px;
  font-weight:800;
  margin:10px 0 16px;
}
.hub-header .intro{
  font-size:18px;
  color:var(--ink-soft);
  max-width:680px;
  margin:0 auto;
}

/* ---------- Hub card grid ---------- */
.hub-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  padding-bottom:24px;
}
.hub-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px;
  box-shadow:0 6px 24px rgba(20,30,60,0.05);
  display:flex;
  flex-direction:column;
}
.hub-card h3{font-size:21px;font-weight:800;margin-bottom:10px;}
.hub-card h3 a:hover{color:var(--accent);}
.hub-card p{color:var(--ink-soft);font-size:15px;margin-bottom:18px;flex:1;}
.hub-card .card-link{font-weight:700;color:var(--accent);font-size:15px;}
.hub-card .card-link:hover{text-decoration:underline;}

/* ---------- Article content sections ---------- */
.content-section{padding:0 0 56px;}
.content-section:first-of-type{padding-top:8px;}
.content-section h2{
  font-size:26px;
  font-weight:800;
  margin-bottom:16px;
  max-width:800px;
}
.prose{max-width:800px;color:var(--ink-soft);font-size:16px;}
.prose p{margin-bottom:16px;}
.prose ul{list-style:none;margin:0 0 16px;}
.prose ul li{
  padding:6px 0 6px 26px;
  position:relative;
}
.prose ul li::before{
  content:"✓";
  color:var(--accent);
  font-weight:900;
  position:absolute;
  left:0;
}
.prose a{color:var(--accent);font-weight:700;}
.prose a:hover{text-decoration:underline;}

/* ---------- FAQ ---------- */
.faq-section{background:var(--bg-alt);padding:64px 0;}
.faq-list{max-width:800px;margin:0 auto;}
.faq-item{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px 26px;
  margin-bottom:16px;
}
.faq-item h3{font-size:17px;font-weight:800;margin-bottom:8px;}
.faq-item p{color:var(--ink-soft);font-size:15px;}

/* ---------- Related links (areas/services cross-links) ---------- */
.related-links{padding:56px 0 72px;}
.related-links h2{
  font-size:20px;
  font-weight:800;
  margin-bottom:18px;
  text-align:center;
}
.related-links-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  max-width:820px;
  margin:0 auto;
}
.related-links-list a{
  background:#fff;
  border:1px solid var(--border);
  border-radius:999px;
  padding:10px 20px;
  font-weight:700;
  font-size:14px;
}
.related-links-list a:hover{border-color:var(--accent);color:var(--accent);}

/* ---------- Homepage sitemap block (services + areas) ---------- */
.sitemap-block{background:var(--bg-alt);padding:64px 0;}
.sitemap-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  max-width:800px;
  margin:0 auto;
}
.sitemap-columns h3{font-size:15px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-soft);margin-bottom:14px;}
.sitemap-columns ul{list-style:none;}
.sitemap-columns li{margin-bottom:10px;}
.sitemap-columns a{font-weight:700;font-size:15px;}
.sitemap-columns a:hover{color:var(--accent);}

/* ---------- Responsive: content pages ---------- */
@media (max-width:860px){
  .page-header h1, .hub-header h1{font-size:28px;}
  .hub-grid{grid-template-columns:1fr;}
  .sitemap-columns{grid-template-columns:1fr;gap:24px;}
}