/* Base */
:root{
  --bg:#0b0d0f;
  --panel:#12161a;
  --text:#e7ecef;
  --muted:#a3b0ba;
  --brand:#3a2a22; /* brown */
  --accent:#2dd4bf;
  --max:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);
  background: radial-gradient(1200px 600px at 50% -20%, #1a1f24 0%, var(--bg) 60%);
  line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.container{max-width:var(--max);margin-inline:auto;padding:0 20px}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:#000;color:#fff;padding:8px 12px;border-radius:8px}

/* Header */
.site-header{position:sticky;top:0;background:rgba(92,64,51,0.95);backdrop-filter:blur(8px);z-index:1000;border-bottom:1px solid #5c4033}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0;min-height:120px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.brand .logo{height:200px;width:auto;filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));}
.nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.nav a{color:var(--text);text-decoration:none;padding:6px 10px;border-radius:10px;transition:all .25s ease}
.nav a:hover{background:#5c4033;color:#fff}
.nav a.active{background:var(--brand); color:#fff; font-weight:700}
.nav-toggle{display:none;background:#1e242a;border:1px solid #5c4033;color:var(--text);padding:8px 12px;border-radius:10px}
body.nav-open{overflow:hidden}

/* Hero */
.hero{background:
    radial-gradient(800px 400px at 80% -10%, rgba(92,64,51,.25), transparent 60%),
    url('images/hero.jpg') center/cover no-repeat,
    linear-gradient(180deg, #12161a 0%, #0b0d0f 100%);
  padding: clamp(60px, 8vw, 120px) 0;text-align:center;border-bottom:1px solid #20262c}
.hero h1{font-size: clamp(32px, 6vw, 56px); margin:0 0 10px; letter-spacing:.3px}
.hero .lead{max-width:800px;margin:0 auto 20px;color:var(--muted);font-size:clamp(16px,2.4vw,20px)}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Buttons */
.btn{display:inline-block;background:var(--brand);color:#fff;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:700;transition:all .25s ease}
.btn:hover{background-color:#5c4033;color:#fff}
.btn-outline{background:transparent;border:1px solid #5c4033;color:var(--text);transition:all .25s ease}
.btn-outline:hover{background:#5c4033;color:#fff}

/* Trust & Map */
.trust-badges{display:flex;gap:16px;flex-wrap:wrap;list-style:none;padding:16px 0;margin:0;color:var(--muted)}
.trust-badges li{background:#12161a;padding:10px 12px;border:1px solid #20262c;border-radius:12px}
.service-area{padding:40px 0}
.map-wrap{border:1px solid #20262c;border-radius:14px;overflow:hidden;background:#12161a}
.map-wrap iframe{display:block;width:100%;height:360px;border:0}
.map-note{margin:0;padding:8px 12px;color:var(--muted);font-size:14px}

/* Split */
.split{display:grid;grid-template-columns:1fr;gap:20px;padding:40px 0}
.split-item{background:#12161a;border:1px solid #20262c;border-radius:14px;padding:20px}
.split h3{margin-top:0}
@media(min-width:800px){.split{grid-template-columns:1fr 1fr}}

/* Home benefits & comparison styling */
.home-benefits, .home-compare{padding:28px 0}
.home-benefits .areas-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;list-style:none;padding:0}
.home-benefits .areas-list li{background:#1a1410;border:1px solid #5c4033;border-radius:12px;padding:12px 12px 12px 40px;position:relative}
.home-benefits .areas-list li::before{content:"✔";position:absolute;left:14px;top:10px;opacity:.9}
.home-compare .compare-table{width:100%;border-collapse:separate;border-spacing:0;background:#12161a;border:1px solid #5c4033;border-radius:12px;overflow:hidden;margin:10px 0}
.home-compare .compare-table th,.home-compare .compare-table td{padding:12px 10px;border-bottom:1px solid #2a3138}
.home-compare .compare-table thead th{background:#2b201a;font-weight:700}
.home-compare .compare-table tr:last-child td{border-bottom:0}
.compare-note{margin-top:10px;color:#a3b0ba;font-size:14px;font-style:italic}

/* Cards & grids */
.cards{display:grid;grid-template-columns:1fr;gap:16px;padding:20px 0 40px}
.card{background:#12161a;border:1px solid #20262c;border-radius:14px;padding:18px}
.card h3{margin-top:0}
@media(min-width:800px){.cards{grid-template-columns:1fr 1fr 1fr}}
.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:20px 0 40px}
.gallery-grid img{display:block;width:100%;height:220px;object-fit:cover;border-radius:12px;border:1px solid #20262c;transition:transform .3s ease, filter .3s ease}
.gallery-grid img:hover{transform:scale(1.05); filter:brightness(1.1)}
.gallery-grid figcaption{text-align:center;color:var(--muted);font-size:14px;margin-top:6px}
@media(min-width:900px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}

/* Testimonials */
.testimonials{display:grid;gap:16px;padding:20px 0 40px}
blockquote{margin:0;padding:16px;background:#12161a;border:1px solid #20262c;border-radius:12px;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
blockquote:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.25);border-color:#5c4033}
cite{color:var(--muted)}

/* Page header */
.page-header{padding:32px 0 12px;border-bottom:1px solid #20262c}
.lead{color:var(--muted)}

/* Areas list reuse */
.areas-list{display:grid;grid-template-columns:1fr;gap:10px;padding:20px 0;margin:0;list-style:none}
.areas-list li{background:#12161a;border:1px solid #20262c;border-radius:12px;padding:12px}
@media(min-width:750px){.areas-list{grid-template-columns:1fr 1fr}}

/* Contact */
.contact-wrap{display:grid;grid-template-columns:1fr;gap:16px;padding:20px 0 40px}
.contact-card{background:#12161a;border:1px solid #20262c;border-radius:14px;padding:18px}
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.contact-form .grid{display:grid;grid-template-columns:1fr;gap:12px}
.contact-form label{display:grid;gap:6px}
.contact-form input,.contact-form textarea{background:#0f1317;border:1px solid #5c4033;border-radius:10px;color:var(--text);padding:10px 12px}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--brand);outline-offset:2px}
.contact-form .full{grid-column:1/-1}
.contact-form .consent{display:flex;align-items:center;gap:8px}
.bot-field{position:absolute;left:-5000px;height:0;overflow:hidden}
.form-note{color:var(--muted);font-size:14px;margin-top:8px}
@media(min-width:900px){.contact-wrap{grid-template-columns:1fr 1fr}}

/* Footer */
.site-footer{border-top:1px solid #5c4033;background:#3a2a22}
.site-footer .container{padding:20px 0}
.trust-logos{display:flex;gap:16px;list-style:none;padding:12px 0 8px;margin:0;align-items:center;flex-wrap:wrap}
.trust-logos li{background:#2b201a;border:1px solid #5c4033;border-radius:10px;padding:6px 10px}
.trust-logos img{height:28px;display:block}

/* Sticky call button */
@media(max-width:900px){
  .sticky-call{position:fixed;bottom:16px;right:16px;z-index:1001}
  .sticky-call .btn{padding:14px 18px}
}

/* Mobile nav */
@media(max-width:900px){
  .nav{display:none;flex-direction:column;align-items:flex-start;background:#12161a;padding:10px;border:1px solid #20262c;border-radius:12px;position:absolute;right:20px;top:76px;width:min(92%,420px)}
  .nav.open{display:flex}
  .nav-toggle{display:inline-block}
  .brand .logo{height:180px}
}
@media(max-width:700px){.brand .logo{height:160px}}


/* Service area quick links */
.service-links{padding:12px;border-top:1px solid #20262c}
.service-links h3{margin:6px 0 8px}
.service-links ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.service-links a{display:inline-block;padding:6px 10px;border:1px solid #5c4033;border-radius:10px;text-decoration:none;color:var(--text)}
.service-links a:hover{background:#5c4033;color:#fff;transition:all .25s ease}


/* Combined Timber section */
.home-timber{padding:40px 0}
.home-timber .lead{margin:6px 0 20px;color:var(--muted)}
.benefits-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0;margin:0 0 20px}
.benefits-list li{background:#1a1410;border:1px solid #5c4033;border-radius:12px;padding:12px;display:flex;align-items:flex-start;gap:8px}
.benefits-list .icon{font-size:18px;line-height:1}
@media(max-width:750px){.benefits-list{grid-template-columns:1fr}}


/* Scroll-in animations */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:translateY(0)}
.benefits-list li.reveal{transition-delay:.05s}
.benefits-list li.reveal:nth-child(2){transition-delay:.1s}
.benefits-list li.reveal:nth-child(3){transition-delay:.15s}
.benefits-list li.reveal:nth-child(4){transition-delay:.2s}
.benefits-list li.reveal:nth-child(5){transition-delay:.25s}


/* Gentle hover effects */
.cards .card{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.cards .card:hover{transform:translateY(-4px);box-shadow:0 6px 18px rgba(0,0,0,.25);border-color:#5c4033}

.gallery-grid img{transition:transform .3s ease, filter .3s ease, box-shadow .3s ease}
.gallery-grid img:hover{transform:scale(1.05) translateY(-2px);filter:brightness(1.08);box-shadow:0 4px 14px rgba(0,0,0,.3)}

.testimonials blockquote{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.testimonials blockquote:hover{transform:translateY(-4px);box-shadow:0 6px 18px rgba(0,0,0,.25);border-color:#5c4033}


/* Page-load fade-in */
.fade-in-onload{opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease}
body.loaded .fade-in-onload{opacity:1; transform:translateY(0)}
/* Sequence for hero elements */
.hero h1.fade-in-onload{transition-delay:.05s}
.hero .lead.fade-in-onload{transition-delay:.15s}
.site-header.fade-in-onload, .brand .logo.fade-in-onload{transition-delay:.0s}


/* Emphasis line under tagline */
.weway-line{color:#fff;font-size:1.3em;font-weight:bold;margin-top:6px}


.about-photos { padding: 40px 0; }
.about-photos h2 { margin-bottom: 20px; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.photo-grid img { width: 100%; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.photo-grid figcaption { margin-top: 8px; font-size: 14px; color: #ccc; text-align: center; }
@media (max-width: 900px) { .photo-grid { grid-template-columns: 1fr; } }


/* About two-column layout: text left, photos right */
.about-layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 20px;
}
@media (max-width: 900px){
  .about-layout{ grid-template-columns: 1fr; }
}
.about-layout .about-text p{ margin-bottom: 14px; }
.about-layout .about-photos{ padding: 0; } /* remove extra padding inside grid */


/* Trust badges under hero */
.hero-trust{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.trust-badge{border:1px solid #20262c;background:#12161a;padding:6px 10px;border-radius:999px;font-size:13px;color:#d0d6db}

/* Sticky CTA (mobile) */
@media (max-width: 900px){
  .cta-sticky{position:fixed;left:0;right:0;bottom:0;display:block;text-align:center;padding:14px 16px;background:#5c4033;color:#fff;z-index:9999;border-top:1px solid #7a5a4d}
}

/* Accessibility focus ring */
:focus{outline:2px solid #5c4033;outline-offset:3px}

/* Slightly stronger link contrast */
a{color:#d0d6db;text-decoration:underline;transition:color .25s ease}
a:hover{color:#5c4033}

/* Buttons refresh */
.btn{padding:10px 16px;border:1px solid #5c4033;border-radius:10px;background:transparent;color:#fff;cursor:pointer;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.25);border-color:#5c4033}

/* About layout already set; ensure photo grid fits the column */
.about-layout .photo-grid img{display:block;width:100%;height:auto}


/* About page full-width narrative block */
.about-full{
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 0 40px;
}
.about-full p{
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 14px;
  text-align: left;
}
.about-full h2{
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.about-full ul{ padding-left: 20px; }
.about-full li{ margin: 8px 0; }


/* Sublead under hero */
.sublead{ margin-top: 6px; opacity: 0.9; }


/* Responsive map embed */
.map-embed { margin: 24px 0 12px; }
.map-embed .map-frame { position: relative; width:100%; height:0; padding-bottom: 56.25%; border-radius:12px; overflow:hidden; }
.map-embed iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; filter: grayscale(20%); }


/* Pin icon before sublead */
.sublead{ display: inline-flex; align-items: center; gap: 6px; }
.sublead .pin{ font-size: 0.95em; line-height: 1; }

/* Map styling tweaks */
.map-embed .map-frame{ box-shadow: 0 6px 20px rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.06); border-radius:12px; overflow:hidden; }
.map-embed iframe{ filter: grayscale(25%) saturate(90%); }


/* SVG pin styling */
.sublead{ display: inline-flex; align-items: center; gap: 8px; color: #d0d6db; }
.sublead .pin-svg{ display:inline-block; width:16px; height:16px; color:#5c4033; }

/* Mobile-only call button under sublead */
.call-bewdley{
  display:none;
  margin-top:8px;
  padding:10px 14px;
  background:#5c4033;
  color:#fff;
  border-radius:999px;
  text-decoration:none;
  border:1px solid #7a5a4d;
  font-size:14px;
}
.call-bewdley:hover{ opacity:0.92; }
@media (max-width: 900px){
  .call-bewdley{ display:inline-block; }
}