/* Master Value Appraisal: portfolio-first version */
:root{
  --black:#0e1114; --ink:#171b20; --text:#1c2126; --muted:#69727b; --line:#e3e5e8; --bg:#f6f7f8; --white:#fff;
  --accent:#c67a3c; --accent-dark:#a9642c;
  --head:"Inter Tight","Inter",-apple-system,"Segoe UI",Arial,sans-serif;
  --body:"Inter",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --gutter:clamp(18px,4vw,44px); --r:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--white);color:var(--text);font:400 16.5px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{width:min(1240px,100% - 2*var(--gutter));margin-inline:auto}
.narrow{width:min(620px,100% - 2*var(--gutter));margin-inline:auto}
h1,h2,h3{font-family:var(--head);font-weight:600;letter-spacing:-.025em;line-height:1.05;margin:0}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.sub{color:var(--muted);margin:10px 0 0;max-width:58ch}
section{padding:clamp(56px,8vw,104px) 0}

.btn{display:inline-flex;align-items:center;gap:.5em;padding:.8em 1.4em;border-radius:999px;border:0;background:var(--accent);color:var(--white);font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap;transition:background .2s,transform .2s}
.btn:hover{background:var(--accent-dark);transform:translateY(-1px)}
.btn.ghost{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28)}
.btn.ghost:hover{background:rgba(255,255,255,.2)}
.btn.line{background:none;color:var(--text);border:1px solid var(--line)}
.btn.line:hover{border-color:var(--text);background:none}

/* Header */
header{position:sticky;top:0;z-index:30;background:rgba(14,17,20,.9);backdrop-filter:blur(12px);color:var(--white)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.logo{font:600 1.12rem var(--head);letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.logo span{color:var(--accent)}
nav{display:flex;align-items:center;gap:26px;font-size:.92rem;font-weight:500}
nav a{text-decoration:none}
nav a:not(.btn){opacity:.75}
nav a:not(.btn):hover{opacity:1}
nav .btn{padding:.6em 1.15em}
@media (max-width:760px){nav a:not(.btn){display:none}}

/* Hero */
.hero{background:var(--black);color:var(--white);padding:clamp(36px,5vw,64px) 0 clamp(44px,6vw,76px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,60px);align-items:center}
.hero h1{font-size:clamp(2.4rem,5vw,4.1rem)}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{color:#b4bcc4;font-size:1.08rem;margin:20px 0 28px;max-width:44ch}
.hero .row{display:flex;gap:10px;flex-wrap:wrap}
.facts{display:flex;gap:10px 28px;flex-wrap:wrap;margin-top:36px;padding-top:22px;border-top:1px solid #2a3036;font-size:.86rem;color:#8d97a0}
.facts b{color:var(--white);font-weight:600}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(110px,13vw,180px);gap:8px}
.mosaic a{position:relative;border-radius:var(--r);overflow:hidden;display:block;background:var(--ink)}
.mosaic a:first-child{grid-column:span 2;grid-row:span 2}
.mosaic a:nth-child(2){grid-column:span 2}
.mosaic a:nth-child(5){grid-column:span 2}
.mosaic a:nth-child(6){grid-column:span 2}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.mosaic a:hover img{transform:scale(1.05)}
.mosaic span{position:absolute;left:10px;bottom:10px;background:rgba(14,17,20,.78);backdrop-filter:blur(6px);padding:5px 11px;border-radius:999px;font-size:.78rem;font-weight:600}
@media (max-width:960px){.hero .wrap{grid-template-columns:1fr}.mosaic{grid-auto-rows:clamp(100px,24vw,200px)}}

/* Work */
.work-head{display:flex;justify-content:space-between;align-items:end;gap:20px 40px;flex-wrap:wrap;margin-bottom:26px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.chip{border:1px solid var(--line);background:var(--white);border-radius:999px;padding:.5em 1em;font-weight:500;font-size:.9rem;color:var(--text);white-space:nowrap}
.chip small{color:var(--muted);font-size:.8rem;margin-left:4px}
.chip:hover{border-color:#b9bfc6}
.chip[aria-pressed=true]{background:var(--black);border-color:var(--black);color:var(--white)}
.chip[aria-pressed=true] small{color:#9aa3ab}
@media (max-width:700px){.chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scrollbar-width:none}.chips::-webkit-scrollbar{display:none}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.card{border:0;padding:0;background:none;text-align:left;color:inherit;display:block;width:100%}
.card .ph{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--bg)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover img{transform:scale(1.04)}
.card b{display:block;font:600 .98rem var(--head);margin-top:10px}
.card span{font-size:.86rem;color:var(--muted)}
@media (max-width:620px){.grid{grid-template-columns:1fr 1fr;gap:10px}.card b{font-size:.9rem}}

/* Lightbox */
dialog{border:0;padding:0;background:none;color:var(--white);max-width:96vw;max-height:96vh;overflow:visible}
dialog::backdrop{background:rgba(8,10,12,.94)}
dialog img{max-width:min(1300px,92vw);max-height:80vh;border-radius:8px;margin:auto}
dialog p{text-align:center;margin:12px 0 0;font-weight:500}
dialog p span{color:#9aa3ab}
dialog button{position:fixed;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:var(--white);font-size:1.3rem;line-height:1}
dialog button:hover{background:rgba(255,255,255,.28)}
#lbClose{top:16px;right:16px}
#lbPrev{left:14px;top:50%;margin-top:-23px}
#lbNext{right:14px;top:50%;margin-top:-23px}

/* Services + process */
.grey{background:var(--bg)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px)}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.two h2{margin-bottom:24px}
.rows{list-style:none;margin:0;padding:0}
.rows li{border-top:1px solid var(--line)}
.rows li:last-child{border-bottom:1px solid var(--line)}
.rows a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 2px;text-decoration:none}
.rows b{font:600 1.05rem var(--head)}
.rows span{display:block;color:var(--muted);font-size:.9rem}
.rows i{font-style:normal;color:var(--accent);transition:transform .2s}
.rows a:hover i{transform:translateX(4px)}
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:22px}
.steps li{display:grid;grid-template-columns:40px 1fr;gap:16px}
.steps li:before{counter-increment:s;content:counter(s);width:40px;height:40px;border-radius:50%;background:var(--black);color:var(--white);display:grid;place-items:center;font:600 1rem var(--head)}
.steps b{font:600 1.05rem var(--head);display:block}
.steps span{color:var(--muted);font-size:.93rem}
.creds{margin-top:30px;font-size:.88rem;color:var(--muted);border-left:3px solid var(--accent);padding-left:14px}

/* Close + footer */
.close{background:var(--black);color:var(--white);padding:clamp(52px,7vw,88px) 0}
.close .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px 40px;flex-wrap:wrap}
.close h2{max-width:20ch}
.close .row{display:flex;gap:10px;flex-wrap:wrap}
footer{background:var(--black);color:#8d97a0;font-size:.85rem;border-top:1px solid #2a3036}
footer .wrap{display:flex;justify-content:space-between;gap:8px 30px;flex-wrap:wrap;padding-block:22px}
footer a{color:#d3d8dd;text-decoration:none}

/* Order page */
.order{padding:clamp(40px,7vw,80px) 0 100px;background:var(--bg);min-height:calc(100svh - 64px)}
.order h1{font-size:clamp(2rem,4.4vw,2.9rem)}
.panel{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:clamp(20px,4vw,36px);margin-top:28px}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--bg);border-radius:999px;padding:4px;margin-bottom:26px}
.tabs button{border:0;background:none;border-radius:999px;padding:.7em .5em;font-weight:600;font-size:.93rem;color:var(--muted)}
.tabs button[aria-selected=true]{background:var(--black);color:var(--white)}
.bar{display:flex;gap:6px;margin-bottom:22px}
.bar i{flex:1;height:4px;border-radius:4px;background:var(--line)}
.bar i.on{background:var(--accent)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font:600 1.35rem var(--head);letter-spacing:-.02em;padding:0;margin-bottom:18px}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.opts label{position:relative}
.opts input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.opts span{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-weight:500;font-size:.94rem;transition:border-color .15s,background .15s}
.opts input:hover + span{border-color:#b9bfc6}
.opts input:checked + span{border-color:var(--accent);background:#fdf5ee;box-shadow:inset 0 0 0 1px var(--accent)}
.opts input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fields .full{grid-column:1/-1}
@media (max-width:540px){.fields{grid-template-columns:1fr}.opts{grid-template-columns:1fr 1fr}}
.fields label{display:block;font-weight:600;font-size:.88rem;margin-bottom:5px}
.fields label small{font-weight:400;color:var(--muted);font-size:inherit}
.fields input,.fields select,.fields textarea{width:100%;padding:.75em .9em;border:1px solid #cfd4d9;border-radius:10px;background:var(--white);font:inherit;color:var(--text)}
.fields textarea{min-height:100px;resize:vertical}
.fields input:focus,.fields select:focus,.fields textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(198,122,60,.18)}
.err{color:#b23a26;font-weight:500;font-size:.9rem;min-height:1.4em;margin:12px 0 0}
.actions{display:flex;justify-content:space-between;gap:12px;margin-top:14px}
.hp{position:absolute;left:-9999px}
.done{text-align:center;padding:26px 0 10px}
.done .tick{width:60px;height:60px;border-radius:50%;background:var(--accent);color:var(--white);display:grid;place-items:center;margin:0 auto 18px;font-size:1.6rem}
.done p{color:var(--muted);margin:8px 0}
.demo{display:inline-block;margin:10px 0 18px;font-size:.84rem;color:#7a5418;background:#fdf3de;border-radius:8px;padding:7px 13px}
.direct{margin-top:22px;font-size:.92rem;color:var(--muted);text-align:center}
.direct a{color:var(--text);font-weight:600}

/* Small phones */
@media (max-width:560px){
  .mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:120px}
  .mosaic a{grid-column:auto!important;grid-row:auto!important}
  .mosaic span{white-space:nowrap;font-size:.74rem}
  header .wrap{gap:10px}
  .logo{font-size:1rem}
  nav .btn{padding:.55em .95em;font-size:.86rem}
  .tabs button{font-size:.84rem;white-space:nowrap;padding-inline:.2em}
}

/* Photo count badge and viewer thumbnails */
.card .ph{position:relative}
.card em{position:absolute;right:10px;top:10px;font-style:normal;font-size:.76rem;font-weight:600;color:var(--white);background:rgba(14,17,20,.78);backdrop-filter:blur(6px);padding:4px 10px;border-radius:999px}
#lbThumbs{display:flex;gap:8px;justify-content:center;margin-top:12px}
#lbThumbs button{position:static;width:74px;height:54px;border-radius:6px;padding:0;overflow:hidden;background:none;opacity:.5;border:2px solid transparent}
#lbThumbs button[aria-current=true]{opacity:1;border-color:var(--accent)}
#lbThumbs img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;border-radius:0}
dialog #lbImg{max-height:72vh}

/* Services cards */
.svcs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}
.svc{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:8px;text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s}
.svc:hover{border-color:transparent;transform:translateY(-3px);box-shadow:0 16px 40px -22px rgba(14,17,20,.45)}
.svc svg{width:34px;height:34px;color:var(--accent);margin-bottom:6px}
.svc h3{font-size:1.2rem}
.svc p{margin:0;color:var(--muted);font-size:.94rem}
.svc span{margin-top:auto;padding-top:8px;font-weight:600;font-size:.88rem;color:var(--accent-dark)}
@media (max-width:1040px){.svcs{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.svcs{grid-template-columns:1fr}}

/* How it works, now its own section */
#about .steps{grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,48px);margin-top:30px}
@media (max-width:760px){#about .steps{grid-template-columns:1fr}}

/* Counties we cover */
.counties{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}
.county{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--bg)}
.county h3{font-size:1.15rem;margin-bottom:8px}
.county h3:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:middle}
.county p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.7}
#areas .sub a{color:var(--accent-dark);font-weight:600}
@media (max-width:1040px){.counties{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.counties{grid-template-columns:1fr}}

/* Small line above the main headline (part of the h1 for search engines) */
.hero h1 small{display:block;font:600 .8rem/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#b4bcc4;margin-bottom:16px}

/* County pages */
.chero{background:var(--black);color:var(--white);padding:clamp(40px,6vw,76px) 0}
.chero h1{font-size:clamp(2.1rem,4.6vw,3.5rem)}
.chero p{color:#b4bcc4;font-size:1.06rem;max-width:60ch;margin:16px 0 26px}
.chero .row{display:flex;gap:10px;flex-wrap:wrap}
.chero .crumbs{font-size:.84rem;margin:0 0 18px;color:#8d97a0}
.chero .crumbs a{color:#d3d8dd;text-decoration:none}
.two p{color:var(--muted);margin:0 0 14px}
.two .creds{margin-top:22px}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.cgrid figure{margin:0}
.cgrid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.cgrid figcaption{font:600 .95rem var(--head);margin-top:10px}
a.chip{text-decoration:none;display:inline-block}
a.county{text-decoration:none;display:block;transition:border-color .2s,transform .2s,box-shadow .2s}
a.county:hover{border-color:transparent;transform:translateY(-3px);box-shadow:0 16px 40px -22px rgba(14,17,20,.45)}
.county span{display:block;margin-top:12px;font-weight:600;font-size:.86rem;color:var(--accent-dark)}
@media (max-width:760px){.cgrid{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.cgrid{grid-template-columns:1fr}}

/* Hero photo (replaces the property-type tiles) */
.hero-photo{margin:0;position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/10;background:var(--ink);box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-photo figcaption{position:absolute;left:14px;bottom:14px;background:rgba(14,17,20,.78);backdrop-filter:blur(6px);padding:6px 13px;border-radius:999px;font-size:.8rem;font-weight:600}

/* Hero: Roxborough photo as the full background */
.hero{position:relative;isolation:isolate;overflow:hidden;display:grid;align-items:center;min-height:min(80vh,740px)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,17,20,.92) 0%,rgba(14,17,20,.78) 38%,rgba(14,17,20,.3) 72%,rgba(14,17,20,.12) 100%)}
.hero .wrap{grid-template-columns:minmax(0,1fr)}
.hero .wrap>*{max-width:640px}
.hero p{color:#dfe4e8}
@media (max-width:960px){.hero{min-height:0}.hero::after{background:linear-gradient(180deg,rgba(14,17,20,.78),rgba(14,17,20,.88))}}

/* Hero: headline runs along the top of the photo, the rest sits bottom-left */
.hero{align-items:stretch;min-height:min(86vh,780px);padding-top:clamp(22px,3vw,38px)}
.hero .wrap{align-items:stretch}
.hero .wrap>div{display:flex;flex-direction:column;max-width:none}
.hero h1{font-size:clamp(2rem,4.5vw,3.6rem);color:var(--black);margin-bottom:auto;padding-bottom:40px}
.hero h1 small{color:#2b3138}
.hero h1 em{color:#a85f24}
.hero::after{background:
  linear-gradient(180deg,rgba(246,247,248,.94) 0%,rgba(246,247,248,.7) 15%,rgba(246,247,248,0) 34%),
  linear-gradient(to top right,rgba(14,17,20,.94) 0%,rgba(14,17,20,.72) 32%,rgba(14,17,20,0) 64%)}
@media (max-width:960px){
  .hero{min-height:680px}
  .hero::after{background:
    linear-gradient(180deg,rgba(246,247,248,.95) 0%,rgba(246,247,248,.8) 20%,rgba(246,247,248,0) 38%),
    linear-gradient(0deg,rgba(14,17,20,.95) 0%,rgba(14,17,20,.82) 42%,rgba(14,17,20,0) 68%)}
}

/* Dark design: black lower sections with light text (all pages) */
:root{--text:#eceff2;--muted:#aab3bc;--line:#2c333a;--bg:#181d23;--accent-dark:#dc9558}
body{background:var(--black)}
.grey{background:#13171c}
.btn:hover{background:#a9642c}
.svc,.county{background:var(--bg)}
.svc:hover,a.county:hover{border-color:var(--accent);box-shadow:none}
.chip{background:var(--bg)}
.chip:hover{border-color:#56606a}
.chip[aria-pressed=true]{background:var(--white);border-color:var(--white);color:var(--black)}
.chip[aria-pressed=true] small{color:#5b646d}
.card .ph{background:var(--bg)}
.steps li:before{background:var(--accent)}
.close{border-top:1px solid var(--line)}
:root{color-scheme:dark}
.order{background:var(--black)}
.panel{background:var(--bg)}
.tabs{background:var(--black)}
.tabs button[aria-selected=true]{background:var(--white);color:var(--black)}
.fields input,.fields select,.fields textarea{background:var(--black);border-color:#3a424b}
.opts span{background:var(--black)}
.opts input:hover + span{border-color:#56606a}
.opts input:checked + span{background:rgba(198,122,60,.16)}
.err{color:#ff9480}
.demo{color:#f3d9a4;background:#3a2c12}
