:root{
  --bg:#fbfaf7;
  --ink:#1f1f1f;
  --brown:#5b4636;
  --tan:#a78b71;
  --accent:#2e7d32;
  --cream:#fffaf0;
  --link:var(--accent);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--ink); background:var(--bg); line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:none;position:relative}
a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:currentColor;transition:right .25s ease}
a.hovered::after, a:hover::after{right:0}
a:focus{outline:2px solid var(--accent); outline-offset:3px}

.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:1rem;
  padding:0.5rem 1rem; background:#fff; border-bottom:1px solid #e6e0d9
}
.logo-wrap img{height:76px;width:auto;filter:drop-shadow(0 1px 0 rgba(0,0,0,.15))}
.site-nav{margin-left:auto; display:flex; gap:1rem}
.site-nav a{padding:.6rem .4rem; font-weight:700; border-radius:8px; transition:transform .15s ease, background .2s}
.site-nav a:hover{background:#eaf5ed; transform:translateY(-1px)}
.nav-toggle{display:none; margin-left:auto; background:transparent; border:1px solid #d8cfc4; padding:0.4rem 0.6rem; border-radius:8px; font-size:1.2rem}

.hero{
  position:relative; min-height:60vh; display:grid; align-items:end;
  background:url('../images/shaded_shells_rustic_fence.jpg') center/cover no-repeat fixed;
}
.overlay-contrast::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.45));
}
.hero-inner{ position:relative; color:#fff; padding:clamp(1rem, 4vw, 3rem); text-shadow:0 2px 8px rgba(0,0,0,.5); max-width:1100px; margin:auto }
.hero-content{display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem)}
.hero-logo-wrap{flex-shrink:0}
.hero-logo{max-width:253px; height:auto}
@media (max-width: 700px){.hero-content{flex-direction:column; align-items:flex-start}.hero-logo{max-width:200px}}

.hero h1{font-size:clamp(1.9rem,3.3vw+1rem,3.2rem); margin:0 0 .25rem}
.cta-row{display:flex; gap:.75rem; margin-top:1rem}
.btn{background:var(--accent); color:#fff; padding:.7rem 1rem; border-radius:999px; display:inline-block; font-weight:800; letter-spacing:.2px}
.btn.ghost{background:transparent; border:2px solid var(--accent); color:var(--accent)}

.promo{padding:2rem 1rem; text-align:center; background:var(--cream); border-block:1px solid #efe7dc}

.feature-grid{display:grid; gap:1.25rem; padding:2rem 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width:1200px; margin:auto}
.feature-card{background:#fff; border:1px solid #ece5db; border-radius:16px; overflow:hidden; display:grid}
.feature-card > div{padding:1rem}
.text-link{font-weight:800}

.page-head{padding:2rem 1rem 1rem; max-width:900px; margin:auto; text-align:center}
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; padding:1rem; max-width:1100px; margin:auto}
.cards{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem; padding:1rem; max-width:1100px; margin:auto}
.card{background:#fff; border:1px solid #ece5db; border-radius:16px; overflow:hidden}
.card-body{padding:1rem}
.muted{opacity:.75}

.gallery{columns:3 280px; gap:10px; padding:1rem; max-width:1200px; margin:auto}
.gallery a{display:block; break-inside:avoid; border-radius:12px; overflow:hidden; border:1px solid #ece5db; transition:transform .2s ease}
.gallery a:hover{transform:scale(1.01)}

.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; padding:2rem}
.lightbox.open{display:flex}
.lb-close{position:absolute; top:14px; right:14px; background:#fff; border:0; border-radius:999px; font-size:1.6rem; width:40px; height:40px; cursor:pointer}
.lightbox img{max-width:92vw; max-height:84vh; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.6)}

.contact-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; max-width:1000px; margin:auto; padding:1rem}
.contact-form{display:grid; gap:.75rem}
.contact-form label{display:grid; gap:.35rem; font-weight:700}
.contact-form input, .contact-form textarea{padding:.7rem .8rem; border:1px solid #d8cfc4; border-radius:10px; background:#fff}

.site-footer{padding:2rem 1rem; background:#1f1a17; color:#e9e2d9}
.footer-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; max-width:1100px; margin:auto}
.site-footer a{color:#e9e2d9}
.copyright{text-align:center; opacity:.75; margin-top:1rem}

@media (max-width: 900px){
  .feature-grid{grid-template-columns:1fr}
  .split, .cards, .contact-grid{grid-template-columns:1fr}
  .hero{background-attachment:scroll}
}
@media (max-width: 760px){
  .site-nav{position:fixed; inset:60px 0 auto 0; background:#fff; border-bottom:1px solid #e6e0d9;
    display:none; flex-direction:column; padding:0.75rem 1rem}
  .site-nav.open{display:flex}
  .nav-toggle{display:inline-block}
}

@media (max-width: 760px){
  .logo-wrap img{height:60px}
}

/* Hero title and subtitles */
.hero .display{font-size:clamp(2.8rem, 4.8vw + 1rem, 4.6rem);font-weight:900;letter-spacing:.3px}
.hero .tagline{font-size:clamp(1.15rem, 1.3vw + .8rem, 1.7rem);margin-top:.25rem;opacity:.96}
.hero .location{font-size:clamp(1rem, 1vw + .6rem, 1.3rem);margin-top:.1rem;opacity:.9}


/* ===== Shaded Shells homepage layout update ===== */
.header-with-logo {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 30px 0;
}

.site-logo {
    width: 120px;
    height: auto;
}

.site-title-block h1,
.site-title-block h2,
.site-title-block h3 {
    margin: 0;
    padding: 0;
    line-height: 1.1;
}

.hero-banner img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 40px;
}

.intro-section {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 60px;
}

.intro-text {
    flex: 2;
}

.intro-images {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.intro-images img {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .intro-section {
        flex-direction: column;
    }

    .header-with-logo {
        flex-direction: column;
        align-items: flex-start;
    }
}


.home-intro{
  padding:2rem 1rem;
  max-width:1100px;
  margin:auto;
}
.home-intro h2{
  margin-top:0;
}
.home-intro h3{
  margin-top:1.5rem;
}
.home-intro ul{
  padding-left:1.2rem;
}
.intro-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin:1rem 0 1.5rem;
}
.intro-buttons .btn{
  font-size:.95rem;
}
@media (max-width:700px){
  .home-intro{
    padding-inline:1rem;
  }
}

.about-content{
  max-width:1100px;
  margin:0 auto 2rem;
  padding:0 1rem;
}
.about-text p{
  margin-top:0;
}
.about-photo-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1rem;
  margin-top:1.5rem;
}
.about-photo-grid figure{
  margin:0;
  border-radius:16px;
  overflow:hidden;
  border:1px solid #ece5db;
}
.about-photo-grid img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.about-photo-grid .wide{
  grid-column:1 / -1;
}
.about-npip, .about-care, .about-policies{
  max-width:900px;
  margin:0 auto 2rem;
  padding:0 1rem;
}
.about-npip h2,
.about-care h2,
.about-policies h2{
  margin-top:0;
}
.about-npip ul,
.about-care ul,
.about-policies ul{
  padding-left:1.2rem;
}
.about-npip li,
.about-care li,
.about-policies li{
  margin-bottom:.4rem;
}
.npip-logos{
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
  margin-top:1.5rem;
  align-items:center;
}
.npip-logos figure{
  margin:0;
  max-width:260px;
}
.npip-logos img{
  width:100%;
  height:auto;
  display:block;
}
@media (max-width:700px){
  .about-photo-grid{
    grid-template-columns:1fr;
  }
}

.link-button{
  background:none;
  border:none;
  padding:0;
  margin:0;
  color:var(--link);
  font:inherit;
  cursor:pointer;
  text-decoration:underline;
}
.policy-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9000;
}
.policy-modal.open{
  display:flex;
}
.policy-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
}
.policy-modal-dialog{
  position:relative;
  background:#fff;
  color:#1f1f1f;
  max-width:900px;
  max-height:90vh;
  margin:1rem;
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.4);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.policy-modal-header{
  padding:1rem 1.25rem;
  border-bottom:1px solid #e5ddcf;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  background:#faf6ee;
}
.policy-modal-header h2{
  margin:0;
  font-size:1.2rem;
}
.policy-modal-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.policy-btn{
  font-size:.9rem;
  padding:.45rem .9rem;
}
.policy-btn.policy-close{
  background:#b71c1c;
}
.policy-modal-body{
  padding:1rem 1.25rem 1.5rem;
  overflow:auto;
}
.policy-modal-body h3{
  margin-top:1rem;
}
.policy-modal-body h4{
  margin-top:.75rem;
}
.policy-modal-body ul{
  padding-left:1.2rem;
}
@media (max-width:700px){
  .policy-modal-dialog{
    max-width:100%;
    margin:.5rem;
  }
  .policy-modal-header{
    flex-direction:column;
    align-items:flex-start;
  }
}

.products-overview{
  max-width:1100px;
  margin:0 auto 2.5rem;
  padding:0 1rem 1rem;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:2rem;
}
.products-intro ul{
  padding-left:1.2rem;
}
.products-intro li{
  margin-bottom:.4rem;
}
.products-links{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1rem;
}
.products-gallery{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1rem;
}
.products-gallery figure{
  margin:0;
  border-radius:16px;
  overflow:hidden;
  border:1px solid #ece5db;
}
.products-gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width:800px){
  .products-overview{
    grid-template-columns:1fr;
  }
  .products-gallery{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width:600px){
  .products-gallery{
    grid-template-columns:1fr;
  }
}

/* Gallery grid and lightbox */
.gallery-grid{
  max-width:1100px;
  margin:0 auto 2.5rem;
  padding:0 1rem 2rem;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1rem;
}
.gallery-item{
  border:none;
  padding:0;
  background:none;
  cursor:pointer;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.22);
  transition:transform .18s ease, box-shadow .18s ease;
}
.gallery-item img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.gallery-item:focus-visible{
  outline:3px solid var(--accent, #f4a623);
  outline-offset:2px;
}
.gallery-item:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}
.gallery-lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9500;
}
.gallery-lightbox.open{
  display:flex;
}
.gallery-lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.8);
}
.gallery-lightbox-inner{
  position:relative;
  max-width:80vw;
  max-height:70vh;
  margin:1rem;
  padding:1.25rem 2.75rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111;
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.65);
}
.gallery-lightbox-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  max-width:100%;
}
.gallery-lightbox-image{
  max-width:100%;
  max-height:55vh;
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.6);
  object-fit:contain;
}
.gallery-caption{
  margin-top:0.75rem;
  font-size:0.95rem;
  color:#f8f5ee;
  text-align:center;
}
.gallery-close{
  position:absolute;
  top:0.4rem;
  right:0.7rem;
  background:#fff;
  border:none;
  border-radius:999px;
  padding:.25rem .7rem;
  font-size:1.4rem;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.gallery-nav{
  position:relative;
  background:rgba(0,0,0,.7);
  color:#fff;
  border:none;
  width:2.4rem;
  height:2.4rem;
  border-radius:999px;
  cursor:pointer;
  font-size:1.3rem;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 .4rem;
}
.gallery-nav.prev{
  margin-right:.75rem;
}
.gallery-nav.next{
  margin-left:.75rem;
}
.gallery-nav:hover{
  background:rgba(0,0,0,.9);
}
@media (max-width:700px){
  .gallery-lightbox-inner{
    max-width:92vw;
    max-height:65vh;
    padding:.75rem 1rem;
  }
}


/* Blog layout */
.section{
  padding:0 1.5rem 3rem;
}
.section .container{
  max-width:1100px;
  margin:0 auto;
}
.blog-list{
  display:flex;
  flex-direction:column;
  gap:1.75rem;
}
.post-card{
  background:#fff;
  padding:1.5rem 1.75rem;
  border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}
.post-card h3{
  margin-top:0;
  margin-bottom:0.35rem;
}
.post-card .muted{
  font-size:.9rem;
  margin-bottom:.5rem;
}
@media (max-width:600px){
  .section{
    padding:0 1rem 2.5rem;
  }
  .post-card{
    padding:1.25rem 1.25rem;
  }
}