/* ============================================================
   Murray General Contracting — shared stylesheet
   Used by all /services pages. Mirrors the homepage design
   system (index.html) so chrome + brand stay identical.
   ============================================================ */

:root{
  --bg:#f2ebde; --bg-2:#e8ddca;
  --ink:#1c1611; --ink-soft:#6b6055;
  --line:#d9ccb8;
  --accent:#c2671e; --accent-deep:#9a4a12;
  --dark:#1a1510; --dark-soft:#241e16; --bone:#efe4d3; --bone-soft:#a89a86; --accent-bright:#e08a3e;
  --maxw:1240px;
  --measure:680px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0; line-height:1.06; font-weight:900;}
p{margin:0;}
a{color:inherit;}
img{display:block; max-width:100%;}
ul{margin:0;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,64px);}
.display{font-family:'Fraunces',Georgia,serif; font-optical-sizing:auto;}
.kicker{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.22em; font-weight:600; font-size:.8rem; color:var(--accent-deep);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- HEADER / NAV ---------- */
header.nav{position:fixed; top:0; left:0; right:0; z-index:100; transition:background .4s var(--ease), border-color .4s, padding .4s;
  display:flex; align-items:center; justify-content:space-between; padding:20px clamp(20px,5vw,64px); border-bottom:1px solid transparent;}
header.nav.scrolled{background:rgba(242,235,222,.92); backdrop-filter:blur(12px); border-bottom-color:var(--line); padding:13px clamp(20px,5vw,64px);}
/* Interior pages start with a solid bar so dark text is legible over light page heroes */
header.nav.solid{background:rgba(242,235,222,.92); backdrop-filter:blur(12px); border-bottom-color:var(--line);}
.brand{font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:1.05rem; color:#fff; text-decoration:none; transition:color .4s;}
.brand .mark{color:var(--accent-bright);}
header.nav.scrolled .brand, header.nav.solid .brand{color:var(--ink);}
header.nav.scrolled .brand .mark, header.nav.solid .brand .mark{color:var(--accent);}
.nav-call{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.08em; font-weight:600; font-size:.85rem; text-decoration:none;
  color:#fff; border:1.5px solid rgba(255,255,255,.55); padding:10px 18px; border-radius:999px; transition:all .35s var(--ease); white-space:nowrap;}
.nav-call:hover{background:var(--accent); border-color:var(--accent); color:#fff;}
header.nav.scrolled .nav-call, header.nav.solid .nav-call{color:var(--ink); border-color:var(--ink);}
header.nav.scrolled .nav-call:hover, header.nav.solid .nav-call:hover{background:var(--accent); border-color:var(--accent); color:#fff;}
.nav__links{display:flex; align-items:center; gap:clamp(18px,2.2vw,34px);}
.nav__link{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.1em; font-weight:500; font-size:.84rem; text-decoration:none; color:#fff; position:relative; padding:4px 0; transition:color .35s; background:none; border:0; cursor:pointer;}
.nav__link::after{content:""; position:absolute; left:0; bottom:-3px; height:2px; width:0; background:var(--accent-bright); transition:width .35s var(--ease);}
.nav__link:hover::after, .nav__link:focus-visible::after{width:100%;}
header.nav.scrolled .nav__link, header.nav.solid .nav__link{color:var(--ink);}
header.nav.scrolled .nav__link::after, header.nav.solid .nav__link::after{background:var(--accent);}

/* Dropdown */
.nav__item{position:relative; display:flex; align-items:center;}
.nav__item > .nav__link{display:inline-flex; align-items:center; gap:6px;}
.nav__caret{width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .3s var(--ease);}
.nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret{transform:rotate(225deg) translateY(0);}
.nav__menu{position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px); min-width:248px;
  background:var(--dark); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px; box-shadow:0 26px 60px -24px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transition:opacity .28s var(--ease), transform .28s var(--ease); z-index:120;}
.nav__menu::before{content:""; position:absolute; top:-14px; left:0; right:0; height:14px;}
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.nav__menu a{display:block; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; font-weight:500;
  color:var(--bone); text-decoration:none; padding:11px 14px; border-radius:8px; transition:background .25s, color .25s;}
.nav__menu a:hover, .nav__menu a:focus-visible{background:rgba(224,138,62,.16); color:#fff;}
.nav__menu a small{display:block; font-family:'Hanken Grotesk',sans-serif; text-transform:none; letter-spacing:0; font-weight:400; font-size:.72rem; color:var(--bone-soft); margin-top:2px;}
.nav__menu-all{border-top:1px solid rgba(255,255,255,.1); margin-top:6px; padding-top:10px !important; color:var(--accent-bright) !important;}

/* Mobile menu */
.nav__toggle{display:none; position:relative; z-index:130; background:none; border:0; cursor:pointer; width:42px; height:42px; flex-direction:column; justify-content:center; gap:5px; padding:0;}
.nav__toggle span{display:block; height:2px; width:24px; margin:0 auto; background:#fff; transition:.32s var(--ease);}
header.nav.scrolled .nav__toggle span, header.nav.solid .nav__toggle span{background:var(--ink);}
.nav__toggle.open span{background:#fff;}
.nav__toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav__toggle.open span:nth-child(2){opacity:0;}
.nav__toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width:980px){
  .nav__toggle{display:flex;}
  .nav__links{position:fixed; top:0; right:0; height:100vh; height:100svh; width:min(360px,86vw); background:var(--dark); flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:6px; padding:96px 40px 40px; transform:translateX(105%); transition:transform .44s var(--ease); box-shadow:-24px 0 70px rgba(0,0,0,.45); z-index:120; overflow-y:auto;}
  .nav__links.open{transform:translateX(0);}
  .nav__link, header.nav.scrolled .nav__link, header.nav.solid .nav__link{color:var(--bone); font-size:1.05rem;}
  .nav__item{flex-direction:column; align-items:flex-start; width:100%;}
  .nav__menu{position:static; opacity:1; visibility:visible; transform:none; background:none; border:0; box-shadow:none; padding:4px 0 8px 14px; min-width:0; max-height:0; overflow:hidden; transition:max-height .35s var(--ease);}
  .nav__item.open .nav__menu{max-height:640px;}
  .nav__menu a{color:var(--bone-soft); padding:9px 0;}
  .nav__caret{transition:transform .3s var(--ease);}
  .nav__item.open .nav__caret{transform:rotate(225deg);}
  .nav-call, header.nav.scrolled .nav-call, header.nav.solid .nav-call{color:#fff; border-color:rgba(255,255,255,.55); margin-top:18px;}
}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.09em; font-weight:600; font-size:1.02rem;
  text-decoration:none; padding:17px 34px; border-radius:999px; transition:transform .3s var(--ease), background .3s, color .3s, box-shadow .3s; cursor:pointer; border:0;}
.btn--primary{background:var(--accent); color:#fff; box-shadow:0 12px 34px rgba(194,103,30,.42);}
.btn--primary:hover{transform:translateY(-2px); background:#d3741f; box-shadow:0 18px 44px rgba(194,103,30,.5);}
.btn--ghost{border:1.5px solid rgba(255,255,255,.6); color:#fff;}
.btn--ghost:hover{background:#fff; color:var(--ink);}
.btn--ink{border:1.5px solid var(--ink); color:var(--ink);}
.btn--ink:hover{background:var(--ink); color:var(--bg);}

/* ---------- PLACEHOLDER MEDIA ---------- */
.ph{position:relative; overflow:hidden; background:#cfc6b8;}
.ph img{width:100%; height:100%; object-fit:cover; filter:saturate(.92) brightness(.96);}
/* Placeholder dev-treatment (dashed border + "Photo" tag + "swap to a real photo" note)
   hidden for production. The stock photo underneath still displays normally. */
.ph__tag, .ph__note{display:none;}

/* ============================================================
   SERVICE PAGE LAYOUT
   ============================================================ */

/* Page hero */
.page-hero{position:relative; min-height:clamp(440px,66vh,620px); display:flex; align-items:flex-end; color:#fff; overflow:hidden;}
.page-hero__bg{position:absolute; inset:0; z-index:0;}
.page-hero__bg img{width:100%; height:100%; object-fit:cover; filter:saturate(.95) brightness(.62);}
.page-hero::before{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,17,13,.55) 0%, rgba(20,17,13,.25) 38%, rgba(20,17,13,.86) 100%);}
.page-hero__inner{position:relative; z-index:2; width:100%; padding-top:128px; padding-bottom:clamp(40px,7vh,76px);}
.page-hero h1{font-size:clamp(2.1rem,5.4vw,4rem); letter-spacing:-.018em; max-width:18ch; margin:14px 0 0; text-wrap:balance;}
.page-hero .lead{font-size:clamp(1.05rem,1.8vw,1.32rem); color:rgba(255,255,255,.92); max-width:54ch; margin:20px 0 0; font-weight:500;}
.page-hero .hero-cta{margin-top:30px; display:flex; flex-wrap:wrap; gap:14px;}
.page-hero .kicker{color:var(--accent-bright);}

/* Breadcrumb */
.crumbs{position:relative; z-index:2; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:500;}
.page-hero .crumbs{color:rgba(255,255,255,.78);}
.crumbs a{color:inherit; text-decoration:none; opacity:.85; transition:opacity .25s, color .25s;}
.crumbs a:hover{opacity:1; color:var(--accent-bright);}
.crumbs span{margin:0 8px; opacity:.5;}
.crumbs b{font-weight:600; color:#fff;}

/* Generic section rhythm */
.section{padding:clamp(56px,9vh,110px) 0;}
.section--tight{padding:clamp(40px,6vh,72px) 0;}
.section--bone{background:var(--bg-2);}
.section--dark{background:var(--dark); color:var(--bone);}
.section__head{max-width:var(--measure); margin-bottom:clamp(28px,4vh,48px);}
.section h2{font-size:clamp(1.9rem,4vw,3rem); letter-spacing:-.016em; margin:12px 0 0; text-wrap:balance;}
.section--dark h2{color:#fff;}
.section h3{font-size:clamp(1.45rem,2.6vw,2.05rem); letter-spacing:-.01em;}

/* Prose / overview */
.prose{max-width:var(--measure);}
.prose > * + *{margin-top:1.1em;}
.prose p{color:var(--ink-soft); font-size:1.1rem;}
.section--dark .prose p{color:var(--bone-soft);}
.prose .first{font-size:1.22rem; color:var(--ink); font-weight:500;}
.prose strong{color:var(--ink); font-weight:600;}
.section--dark .prose strong{color:var(--bone);}
.prose a{color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; font-weight:600;}
.prose a:hover{color:var(--accent);}

/* Two-column intro (text + media) */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:center;}
.split--rev .split__media{order:2;}
.split__media{aspect-ratio:4/3; border-radius:12px; overflow:hidden; box-shadow:0 30px 70px -30px rgba(28,22,17,.45);}
.split__media img, .split__media .ph{width:100%; height:100%; object-fit:cover; border-radius:12px;}

/* Numbered process steps */
.steps{display:grid; gap:clamp(18px,2.4vw,26px); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); counter-reset:step;}
.step{position:relative; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:30px 26px 28px;}
.section--bone .step{background:#fff;}
.step__num{font-family:'Fraunces',serif; font-weight:900; font-size:2.2rem; color:var(--accent); line-height:.9;}
.step h3{font-size:1.18rem; margin:12px 0 8px;}
.step p{color:var(--ink-soft); font-size:.99rem;}

/* Feature / benefit grid */
.cards{display:grid; gap:clamp(16px,2.2vw,24px); grid-template-columns:repeat(auto-fit,minmax(248px,1fr));}
.card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:28px 26px; transition:transform .3s var(--ease), box-shadow .3s;}
.section--bone .card{background:var(--bg);}
.card:hover{transform:translateY(-3px); box-shadow:0 22px 50px -28px rgba(28,22,17,.5);}
.card__ic{width:42px; height:42px; border-radius:10px; background:rgba(194,103,30,.12); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.card__ic svg{width:22px; height:22px; stroke:var(--accent-deep); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.card h3{font-size:1.16rem; margin-bottom:8px;}
.card p{color:var(--ink-soft); font-size:.99rem;}

/* Checklist of items (what's included / types) */
.tick{list-style:none; padding:0; display:grid; gap:10px 34px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.tick li{position:relative; padding:8px 0 8px 30px; color:var(--ink); font-size:1.02rem; border-bottom:1px solid var(--line);}
.tick li::before{content:""; position:absolute; left:0; top:14px; width:14px; height:9px; border-left:2.5px solid var(--accent); border-bottom:2.5px solid var(--accent); transform:rotate(-45deg);}
.section--dark .tick li{color:var(--bone); border-color:rgba(255,255,255,.12);}

/* Pill chips */
.chips{display:flex; flex-wrap:wrap; gap:10px;}
.chips span{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:.74rem; font-weight:500; color:var(--accent-deep); background:rgba(194,103,30,.09); border:1px solid rgba(194,103,30,.32); padding:8px 15px; border-radius:999px;}

/* Quote / testimonial */
.quote{max-width:760px; margin:0 auto; text-align:center;}
.quote__stars{color:var(--accent-bright); letter-spacing:.3em; font-size:1.1rem;}
.quote blockquote{font-family:'Fraunces',serif; font-weight:500; font-size:clamp(1.35rem,3vw,2rem); line-height:1.32; margin:18px 0 0; text-wrap:balance;}
.section--dark .quote blockquote{color:#fff;}
.quote cite{display:block; margin-top:20px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; font-style:normal; color:var(--accent-bright);}

/* FAQ accordion */
.faq{max-width:820px;}
.faq__item{border-top:1px solid var(--line);}
.faq__item:last-child{border-bottom:1px solid var(--line);}
.faq__q{width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:24px 44px 24px 0; position:relative;
  font-family:'Fraunces',serif; font-weight:600; font-size:clamp(1.1rem,2vw,1.3rem); color:var(--ink); line-height:1.3;}
.faq__q::after{content:""; position:absolute; right:6px; top:50%; width:13px; height:13px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:translateY(-65%) rotate(45deg); transition:transform .3s var(--ease);}
.faq__item.open .faq__q::after{transform:translateY(-35%) rotate(225deg);}
.faq__a{overflow:hidden; max-height:0; transition:max-height .4s var(--ease);}
.faq__a-inner{padding:0 0 24px; color:var(--ink-soft); font-size:1.05rem; max-width:70ch;}
.faq__a-inner > * + *{margin-top:.9em;}
.faq__item.open .faq__a{max-height:600px;}

/* Related services */
.related-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.related-card{display:block; background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px 24px 22px; text-decoration:none; color:var(--ink); transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;}
.section--bone .related-card{background:var(--bg);}
.related-card:hover{transform:translateY(-3px); box-shadow:0 22px 50px -28px rgba(28,22,17,.5); border-color:var(--accent);}
.related-card .kicker{font-size:.68rem; margin-bottom:10px;}
.related-card h3{font-size:1.18rem; margin-bottom:8px;}
.related-card p{color:var(--ink-soft); font-size:.96rem;}
.related-card .go{display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:.74rem; font-weight:600; color:var(--accent-deep);}
.related-card:hover .go{color:var(--accent);}

/* CTA band */
.cta{background:var(--dark); color:var(--bone); text-align:center; padding:clamp(72px,12vh,150px) 0;}
.cta h2{color:#fff; font-size:clamp(2rem,5vw,3.6rem); letter-spacing:-.02em; max-width:20ch; margin:0 auto; text-wrap:balance;}
.cta h2 em{color:var(--accent-bright); font-style:italic; font-weight:600;}
.cta p{color:var(--bone-soft); margin:18px auto 0; max-width:52ch;}
.cta__row{display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:38px;}
.cta__contacts{display:flex; flex-wrap:wrap; gap:14px 40px; justify-content:center; margin-top:40px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:.8rem; color:var(--bone-soft);}
.cta__contacts a{color:var(--bone); text-decoration:none; border-bottom:1px solid var(--accent); padding-bottom:2px;}
.cta__contacts a:hover{color:#fff;}

/* Footer */
footer.site{background:#120e0a; color:var(--bone-soft); padding:30px 0; font-size:.82rem;}
footer.site .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center;}
footer.site .brand{color:var(--bone); font-size:.95rem;}
footer.site a{color:var(--bone-soft); text-decoration:none;}
footer.site a:hover{color:var(--bone);}
footer.site .mark{color:var(--accent-bright);}

/* Reveal animation */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* Responsive */
@media (max-width:860px){
  .split, .split--rev{grid-template-columns:1fr;}
  .split--rev .split__media{order:0;}
  .page-hero__inner{padding-top:108px;}
  .hero-cta{width:100%;}
  .hero-cta .btn{flex:1 1 auto; justify-content:center;}
}