/* Simple brochure styles - cohesive warm palette */
:root{
  --accent:#b98a42;
  --muted:#2b2623;
  --bg:#f6efe6;
  --max-width:1200px;
  --radius:10px;
  --container-padding:20px;
  --gold:#8f6b20; /* darker gold */
  --panel:#f7efe6;
  --nav-text:#ffffff; /* header/nav text should be white */
  --footer-bg:#2b160a;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; color:var(--muted); background-color:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased}
.site-header{position:fixed; top:0; left:0; right:0; height:88px; background:var(--gold); color:var(--nav-text); z-index:300; box-shadow:none; filter:none}
/* tighten header vertical padding so contents sit higher */
.site-header .container{padding-top:12px; padding-bottom:12px}
body{padding-top:88px}
.container{max-width:var(--max-width); margin:0 auto; padding:28px var(--container-padding)}
.header-inner{display:flex; align-items:center; justify-content:space-between; position:relative}
.brand{display:inline-flex;width:80px;height:80px;background:transparent;border-radius:0;padding:0;border:0;box-shadow:none;align-items:center;justify-content:center;overflow:visible;margin:0;position:relative;z-index:330}
.brand img{height:80px;width:auto;display:block;max-width:none;margin:0;position:relative;z-index:335}
.site-header{overflow:visible}



/* ensure brand sits above header and its overflow covers content */
.brand{z-index:330}
.brand img{z-index:335}
@media(max-width:600px){ .brand{width:64px;height:64px;padding:0} .brand img{height:64px;width:auto;transform:none;margin:0} .contact-logo img{height:140px} }
.site-nav{display:flex; gap:18px; align-items:center; margin-left:auto}
.site-nav a{color:var(--nav-text); text-decoration:none; padding:6px 6px; text-align:right}
.site-nav a:hover, .site-nav a.active{color:var(--nav-text)}
.menu-toggle{display:none; background:var(--gold); border:0; font-size:24px; color:var(--nav-text); z-index:310; cursor:pointer; padding:8px 10px; border-radius:6px; box-shadow:none}
.hero{position:relative; padding:56px 0; min-height:320px; overflow:hidden; background:transparent}
/* Make the container a flex row so content aligns to the container's left edge */
.hero .container{display:flex; align-items:center; min-height:320px; padding-left:var(--container-padding); padding-right:var(--container-padding)}
.hero::before{content:''; position:absolute; inset:0; background:url('images/hero-bg.jpeg') center/cover no-repeat; filter:blur(6px) brightness(0.28) contrast(0.95); transform:scale(1.03); z-index:0}
.hero::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(24,18,14,0.6), rgba(24,18,14,0.55)); z-index:1}
.hero-inner{position:relative; z-index:2; color:#fff; text-shadow:none; max-width:760px; margin:0; padding:0; text-align:left}

.display{font-family:Georgia, 'Times New Roman', serif; font-weight:600}
.lead{font-size:1.125rem; margin-bottom:18px}
.btn{display:inline-block; background:var(--gold); color:#fff; padding:12px 20px; border-radius:8px; text-decoration:none; box-shadow:none}
.services h2, .about h2, .contact h2{color:#2b2623}

.services { background: transparent; padding:64px var(--container-padding); }
.about, .contact { background: transparent; padding:48px var(--container-padding); }
.grid{display:grid; gap:20px}
.service-grid{grid-template-columns:repeat(3,1fr); margin-top:18px}
.service-card{background:var(--panel); padding:28px; border-radius:10px; box-shadow:0 8px 30px rgba(11,15,20,0.06)}
.service-card h3{margin-top:10px; color:var(--muted)}
.service-card p{color:var(--muted);}
.service-icon{font-size:28px; color:var(--gold)}
.about-grid{display:grid; grid-template-columns:1fr 420px; gap:28px; align-items:center}
.about-image img{width:100%; border-radius:10px; box-shadow:0 10px 30px rgba(11,15,20,0.08)}
.about p{background:var(--panel); padding:20px 20px 20px 0; border-radius:10px}
.contact-row{display:flex; gap:24px; align-items:center}
.contact-logo{background:transparent;padding:0;border-radius:0;display:flex;align-items:center;justify-content:center}
.contact-logo img{height:180px;width:auto;display:block}
.contact-info{background:var(--panel); padding:20px; border-radius:10px}
.contact-info h3{display:flex;align-items:center;gap:10px;font-size:1.1rem;margin:0 0 8px}
.contact-info h3 i, .contact-info p i{color:var(--gold);font-size:1.1rem;margin-right:8px}
.contact-info p{margin:8px 0}

/* Contact item layout matching site styles */
.contact-item{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}
.contact-icon{margin-top:6px}
.contact-icon{color:var(--gold);font-size:20px;min-width:28px}
.contact-text h3{margin:0;font-size:1.1rem;font-weight:700;color:#2b2623}
.contact-text p.muted{margin:6px 0 0;color:#6b6b6b}

@media(max-width:600px){.contact-item{align-items:flex-start}}
.site-footer{padding:14px 0; text-align:center; color:rgba(255,255,255,0.95); background:var(--footer-bg); font-size:0.9rem}
.site-footer p{margin:0}
@media(max-width:900px){
  .service-grid{grid-template-columns:repeat(2,1fr)}
  /* switch to single column so paragraph takes full width; image stacks below */
  .about-grid{grid-template-columns:1fr}
  .about-image img{max-width:420px; width:100%; height:auto; margin:20px auto 0; display:block}
}
@media(max-width:700px){
  .about-grid{grid-template-columns:1fr}
  .about-image img{max-width:320px;height:auto;margin:20px auto 0}
}
@media(max-width:600px){
  .site-nav{display:none; position:absolute; top:72px; right:16px; background:var(--gold); padding:12px; border-radius:0; flex-direction:column; min-width:200px; z-index:305; box-shadow:none; filter:none}
  .site-nav.open{display:flex; flex-direction:column}
  .menu-toggle{display:inline-block}
  .service-grid{grid-template-columns:1fr}
  .hero{padding:40px 0}
  .container{padding:24px 16px}
  .contact-row{flex-direction:column; align-items:center}
  .contact-logo img{height:160px; max-width:100%; width:auto}
  .about-image{display:none}
}