:root{
  --ink:#1b1c1b; --char:#2f2f2f; --char-2:#3a3a39; --cedar:#c8814a; --cedar-2:#e0a06c;
  --forest:#35523f; --paper:#f5f2ec; --paper-2:#ebe6dd; --line:rgba(27,28,27,.12);
  --r:22px; --spring:cubic-bezier(.2,.9,.25,1);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:100%/1.55 system-ui,-apple-system,"SF Pro Text",sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}
h1,h2,h3{font-family:system-ui,-apple-system,"SF Pro Display",sans-serif;font-optical-sizing:auto;font-weight:800;text-wrap:balance}
h1{font-size:clamp(2.6rem,7.5vw,5.6rem);line-height:1;letter-spacing:-.035em}
h2{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.05;letter-spacing:-.03em}
h3{font-size:1.3rem;line-height:1.2;letter-spacing:-.01em}
p{text-wrap:pretty}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cedar)}
.lead{font-size:clamp(1.1rem,2vw,1.35rem);color:rgba(27,28,27,.72);max-width:38em}
section{padding:clamp(64px,10vw,128px) 0}
.dark{background:var(--ink);color:#f3efe8}.dark .lead{color:rgba(243,239,232,.7)}
.dark .eyebrow{color:var(--cedar-2)}

/* nav: translucent material */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;background:rgba(27,28,27,.62);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.08)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.nav img{height:58px;width:auto}
.nav ul{display:flex;gap:6px;list-style:none;padding:0}
.nav ul a{display:block;padding:8px 14px;border-radius:99px;color:#f3efe8;text-decoration:none;font-size:.92rem;font-weight:600;letter-spacing:.005em;transition:background .15s}
.nav ul a:hover,.nav ul a[aria-current]{background:rgba(255,255,255,.12)}
.nav .btn{padding:10px 18px;font-size:.92rem}
.burger{display:none;background:none;border:0;width:44px;height:44px;color:#fff}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:5px auto;border-radius:2px;transition:transform .35s var(--spring),opacity .2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:900px){
  .burger{display:block}
  .nav ul{position:fixed;inset:76px 0 auto 0;flex-direction:column;padding:12px 20px 24px;background:rgba(27,28,27,.92);backdrop-filter:blur(24px);gap:2px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform .4s var(--spring),opacity .25s}
  .nav ul.open{transform:none;opacity:1;pointer-events:auto}
  .nav ul a{font-size:1.1rem;padding:14px}
  .nav .cta-desktop{display:none}
}

/* buttons: respond on press */
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 26px;border-radius:99px;background:var(--cedar);color:#1b1c1b;font-weight:700;font-size:1rem;text-decoration:none;border:0;cursor:pointer;transition:transform .12s ease-out,background .2s,box-shadow .25s;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 8px 24px -8px rgba(200,129,74,.6)}
.btn:hover{background:var(--cedar-2)}
.btn:active{transform:scale(.96)}
.btn.ghost{background:rgba(255,255,255,.1);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px)}
.btn.ghost:hover{background:rgba(255,255,255,.18)}
.btn.line{background:transparent;color:var(--ink);box-shadow:none;border:1.5px solid var(--ink)}
.btn.line:hover{background:var(--ink);color:#fff}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--cedar-2);outline-offset:3px}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;padding:140px 0 72px;overflow:hidden;background:var(--ink)}
.hero .bg{position:absolute;inset:-4% 0 0;background:var(--ink) center/cover no-repeat;will-change:transform}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,28,27,.55) 0%,rgba(27,28,27,.2) 38%,rgba(27,28,27,.88) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero h1{max-width:12em;margin:14px 0 22px}
.hero .lead{color:rgba(255,255,255,.82);margin-bottom:34px}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px}
.page-hero{padding:150px 0 70px;background:var(--ink);color:#f3efe8;position:relative;overflow:hidden}
.page-hero.img{padding:190px 0 80px}
.page-hero .bg{position:absolute;inset:0;background:center/cover}
.page-hero.img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,28,27,.92),rgba(27,28,27,.45))}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{font-size:clamp(2.4rem,6vw,4.4rem);margin:12px 0 18px}
.page-hero .lead{color:rgba(243,239,232,.78)}
.crumbs{font-size:.85rem;opacity:.7;margin-bottom:6px}.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}

/* strip */
.strip{background:var(--cedar);color:#1b1c1b;padding:20px 0}
.strip ul{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 36px;list-style:none;padding:0;font-weight:700;letter-spacing:.01em}
.strip li::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--forest);margin-right:10px}

/* service cards */
.head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:48px}
.head h2{max-width:14em;margin-top:10px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:440px;border-radius:var(--r);overflow:hidden;color:#fff;text-decoration:none;background:var(--char);isolation:isolate;transition:transform .5s var(--spring),box-shadow .5s}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s var(--spring)}
.card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 30%,rgba(20,20,20,.88))}
.card .in{padding:26px}.card p{opacity:.8;font-size:.95rem;margin-top:8px}
.card .more{display:inline-block;margin-top:14px;font-weight:700;color:var(--cedar-2)}
.card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -24px rgba(0,0,0,.5)}
.card:hover img{transform:scale(1.06)}
.card:active{transform:scale(.985)}
.card.plain{background:url(../images/logo-white.png) 50% 28%/62% no-repeat,linear-gradient(160deg,var(--forest),#22382b)}
.card.plain::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(34,56,43,.9)}
.cards.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.cards,.cards.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards,.cards.three{grid-template-columns:1fr}.card{min-height:340px}}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.split.flip>:first-child{order:2}
.split img{border-radius:var(--r);width:100%;aspect-ratio:4/5;object-fit:cover;box-shadow:0 40px 80px -40px rgba(0,0,0,.55)}
.split h2{margin:10px 0 18px}
.ticks{list-style:none;padding:0;margin-top:26px;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-weight:500}
.ticks li::before{content:"";flex:none;width:10px;height:10px;margin-top:.5em;border-radius:50%;background:var(--forest)}
.dark .ticks li::before{background:var(--cedar)}
@media(max-width:800px){.split{grid-template-columns:1fr}.split.flip>:first-child{order:0}.split img{aspect-ratio:4/3}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px;counter-reset:s}
.step{padding:28px;border-radius:var(--r);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);counter-increment:s}
.step::before{content:counter(s,decimal-leading-zero);font-weight:800;font-size:2.2rem;letter-spacing:-.04em;color:var(--cedar)}
.step h3{margin:10px 0 8px}.step p{opacity:.72;font-size:.95rem}
.steps.n5{grid-template-columns:repeat(5,1fr)}.steps.n6{grid-template-columns:repeat(3,1fr)}.steps.n3{grid-template-columns:repeat(3,1fr)}.steps.n2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1000px){.steps.n5{grid-template-columns:repeat(3,1fr)}}@media(max-width:900px){.steps,.steps.n3,.steps.n4,.steps.n5,.steps.n6{grid-template-columns:1fr 1fr}}@media(max-width:520px){.steps,.steps.n2,.steps.n3,.steps.n4,.steps.n5,.steps.n6{grid-template-columns:1fr}}

/* gallery */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.chip{padding:9px 18px;border-radius:99px;border:1.5px solid var(--line);background:#fff;font:600 .92rem system-ui;cursor:pointer;transition:transform .12s,background .2s,color .2s}
.chip:active{transform:scale(.95)}
.chip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid{columns:3 280px;column-gap:16px}
.grid figure{break-inside:avoid;margin-bottom:16px;position:relative;border-radius:18px;overflow:hidden;cursor:zoom-in;background:var(--char);transition:opacity .35s,transform .5s var(--spring)}
.grid figure[hidden]{display:none}
.grid img{width:100%;transition:transform .8s var(--spring)}
.grid figure:hover img{transform:scale(1.04)}
.grid figcaption{position:absolute;inset:auto 0 0;padding:44px 18px 16px;color:#fff;font-weight:600;font-size:.92rem;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.note{margin-top:32px;padding:20px 24px;border-radius:18px;background:var(--paper-2);font-size:.95rem;color:rgba(27,28,27,.7)}
.lb{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(10,10,10,.82);backdrop-filter:blur(18px);opacity:0;pointer-events:none;transition:opacity .3s}
.lb.on{opacity:1;pointer-events:auto}
.lb img{max-width:min(92vw,1100px);max-height:86vh;border-radius:16px;transform:scale(.94);transition:transform .45s var(--spring)}
.lb.on img{transform:none}
.lb button{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:1.4rem;cursor:pointer}

/* area */
.areas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.areas span{padding:10px 18px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-weight:600;font-size:.95rem}
.light .areas span{background:#fff;border-color:var(--line)}

/* cta band */
.band{text-align:center;background:linear-gradient(160deg,var(--forest),#1f3328);color:#fff}
.band h2{max-width:14em;margin:12px auto 18px}.band .lead{margin:0 auto 32px;color:rgba(255,255,255,.78)}

/* form */
.formcard{background:#fff;border-radius:28px;padding:clamp(24px,4vw,44px);box-shadow:0 40px 80px -40px rgba(0,0,0,.35);border:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fgrid .full{grid-column:1/-1}
label{display:block;font-weight:600;font-size:.9rem;margin-bottom:7px}
input,select,textarea{width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--paper);font:inherit;font-size:1rem;transition:border-color .2s,background .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--cedar);background:#fff;box-shadow:0 0 0 4px rgba(200,129,74,.2)}
textarea{min-height:130px;resize:vertical}
.err{display:none;color:#b3361f;font-size:.85rem;margin-top:6px}
.bad .err{display:block}.bad input,.bad select,.bad textarea{border-color:#b3361f}
.hp{position:absolute;left:-9999px}
.thanks{display:none;text-align:center;padding:40px 10px}.thanks h3{font-size:1.8rem;margin-bottom:10px}
.contact-side{display:grid;gap:14px;align-content:start}
.contact-side a.row{display:flex;gap:14px;align-items:center;padding:20px;border-radius:18px;background:#fff;border:1px solid var(--line);text-decoration:none;font-weight:600;transition:transform .15s}
.contact-side a.row:active{transform:scale(.98)}
.contact-side small{display:block;font-weight:500;opacity:.6}
@media(max-width:700px){.fgrid{grid-template-columns:1fr}}
.qgrid{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:start}
@media(max-width:900px){.qgrid{grid-template-columns:1fr}}

footer{background:var(--ink);color:rgba(243,239,232,.7);padding:64px 0 36px;font-size:.93rem}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:44px}
footer img{height:64px;margin-bottom:16px}
footer h4{color:#fff;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
footer ul{list-style:none;padding:0;display:grid;gap:9px}footer a{text-decoration:none}footer a:hover{color:#fff}
footer .legal{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.85rem}
@media(max-width:800px){footer .cols{grid-template-columns:1fr 1fr}}

/* scroll reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--spring),transform .9s var(--spring)}
.rv.in{opacity:1;transform:none}
.mobile-bar{display:none}
@media(max-width:700px){
  .mobile-bar{display:flex;position:fixed;inset:auto 12px 12px;z-index:60;gap:8px;padding:8px;border-radius:99px;background:rgba(27,28,27,.78);backdrop-filter:blur(20px) saturate(160%);border:1px solid rgba(255,255,255,.1)}
  .mobile-bar a{flex:1;text-align:center;padding:13px;border-radius:99px;font-weight:700;text-decoration:none;color:#fff;background:rgba(255,255,255,.1)}
  .mobile-bar a.p{background:var(--cedar);color:#1b1c1b}
  body{padding-bottom:84px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.rv{transition:opacity .3s;transform:none}.card,.card img,.grid img,.lb img{transition:none}.hero .bg{transform:none!important}
}
@media(prefers-reduced-transparency:reduce){.nav,.nav ul,.mobile-bar{background:var(--ink);backdrop-filter:none}}

/* confirm mode (remove with CONFIRM_MODE=False) */
.tbc{background:rgba(255,205,70,.5);color:inherit;border-radius:4px;padding:0 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.dark .tbc,.hero .tbc,.page-hero .tbc{background:rgba(255,205,70,.28)}
.tbc-box{outline:2px dashed rgba(255,205,70,.8);outline-offset:8px;border-radius:12px}
.tbc-badge{position:fixed;left:12px;bottom:12px;z-index:70;display:flex;gap:10px;align-items:center;padding:8px 8px 8px 14px;border-radius:99px;background:#ffd04a;color:#1b1c1b;font:600 .8rem system-ui}
.tbc-badge button{border:0;border-radius:99px;padding:6px 12px;background:#1b1c1b;color:#fff;font:600 .8rem system-ui;cursor:pointer}
img[data-tbc]{outline:4px solid rgba(255,208,74,.95);outline-offset:-4px}html.hide-tbc img[data-tbc]{outline:0}html.hide-tbc .tbc{background:none}html.hide-tbc .tbc-box{outline:0}
@media(max-width:700px){.tbc-badge{bottom:84px}}

/* reviews + bio */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.rev{margin:0;padding:28px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.rev blockquote{font-size:1.02rem;line-height:1.55;margin:0 0 18px}
.rev figcaption{font-weight:700;color:var(--forest)}
.rev figcaption::before{content:"";display:inline-block;width:18px;height:2px;background:var(--cedar);vertical-align:middle;margin-right:10px}
.bio p{margin-top:16px;color:rgba(243,239,232,.82)}
.bio h2{margin-bottom:6px}
.dark .split img[src*="beau"]{aspect-ratio:1/1;border-radius:var(--r)}
@media(max-width:1000px){.revs{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.revs{grid-template-columns:1fr}}

.cityline{margin-top:22px;opacity:.7}

/* fencing FAQ */
.faq-sec{background:var(--paper)}
.faq-group{margin-top:44px}
.faq-group h3{margin-bottom:8px;color:var(--forest)}
details.faq{border-top:1px solid var(--line)}
.faq-group details.faq:last-of-type{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-weight:650;font-size:1.1rem;line-height:1.3}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";flex:none;font-size:1.6rem;line-height:1;color:var(--cedar);transition:transform .3s var(--spring)}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq summary:focus-visible{outline:2px solid var(--cedar);outline-offset:4px;border-radius:6px}
.faq-a{padding:0 0 24px;max-width:42em;color:rgba(27,28,27,.76)}
@media (prefers-reduced-motion:reduce){details.faq summary::after{transition:none}}

/* timing line + recent projects */
.timing{margin-top:22px;color:rgba(27,28,27,.78);max-width:36em}
.projs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}
.proj{padding:26px 28px;border-radius:var(--r);background:var(--paper-2)}
.proj h3{margin-bottom:8px}
.proj p{color:rgba(27,28,27,.74)}
@media(max-width:700px){.projs{grid-template-columns:1fr}}

/* landscaping timeline */
.tlines{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;position:relative}
.tl img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r)}
.tl figcaption{padding-top:16px}
.tl .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--forest);color:#fff;font-weight:700;margin-bottom:10px}
.tl h3{margin-bottom:6px}
.tl p{color:rgba(27,28,27,.74)}
@media(max-width:860px){.tlines{grid-template-columns:1fr}}

/* dotted outline kept as part of the About page design */
.dashed{outline:2px dashed var(--cedar);outline-offset:8px;border-radius:12px}