/* Proper family website standard v2.0 — Fence & Deck reference, 2026-09-21. */
:root{--paper:#f7f4ed;--ink:#162f39;--copper:#a34f30;--light-copper:#d9a07d;--muted:#53636a;--line:#d7d9d4;--control-radius:3px}
body{background:var(--paper);font-family:Arial,Helvetica,sans-serif}
header{padding:20px 5%;min-height:103px;background:var(--paper);gap:24px}
header nav{gap:24px;font-size:14px}
.logo{font-size:43px;font-weight:800;letter-spacing:-3px;line-height:.95}
header .logo small,footer .logo small{font-size:12px;font-weight:700;letter-spacing:.06em;line-height:1.5;margin-top:10px}
footer .logo>span{color:var(--light-copper)}
.button,button,select,textarea,input:not([type=checkbox]):not([type=radio]):not([type=range]){border-radius:var(--control-radius)}
.button{min-height:49px}.button.small{min-height:44px}
h1,h2,h3{font-weight:600}h2{font-size:clamp(36px,4.1vw,60px);letter-spacing:-.045em;line-height:1.08}
.eyebrow{font-size:14px;letter-spacing:.06em;line-height:1.45}
.section{padding:88px 7%}.section.compact{padding-top:40px;padding-bottom:40px}
.link-icon{display:inline-block;width:18px;height:18px;vertical-align:-3px;flex:none}
.text-link{font-size:14px;gap:12px}.quiet-link{font-size:14px;padding:3px 0;border-bottom:1px solid #75868b}
.home-hero{display:grid;grid-template-columns:44% 56%;min-height:615px;background:var(--ink);color:var(--paper)}
.home-hero-copy{padding:60px 10% 37px 11.4%;display:flex;align-items:flex-start;flex-direction:column}
.home-hero-copy .eyebrow{color:#dcc2a7;margin:0 0 29px}
.home-hero h1{font-size:clamp(46px,5.15vw,82px);font-weight:600;letter-spacing:-.045em;line-height:1.04;margin:0 0 25px}
.home-hero-copy>p:not(.eyebrow){font-size:17px;line-height:1.65;max-width:390px;color:#d6dfdd;margin-bottom:27px}
.home-actions{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.hero-local{font-size:14px;color:#bfcece;margin-top:auto;padding-top:35px}
.home-hero-image{margin:0;position:relative;min-width:0;overflow:hidden}
.home-hero-image img{width:100%;height:100%;position:absolute;object-fit:cover;object-position:center}
.home-hero-image figcaption{position:absolute;right:15px;bottom:15px;max-width:calc(100% - 30px);background:#142d39e8;padding:6px 10px;font-size:12px;color:#fff}
.service-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0 5%;border-bottom:1px solid var(--line);background:#eeeee6}
.service-nav a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 25px;border-left:1px solid var(--line);font-size:14px;font-weight:600}
.service-nav a:first-child{border-left:0;padding-left:0}.service-nav .link-icon{color:var(--copper)}
.heading-pair{display:grid;grid-template-columns:1.4fr 1fr;gap:8%;align-items:end;margin-bottom:38px}
.heading-pair h2{margin:0}.heading-pair>p{max-width:440px;font-size:16px;color:var(--muted);margin:0}
.heading-pair .eyebrow{color:var(--copper);margin:0 0 16px}
.project-pair{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.project-feature{border-bottom:1px solid var(--line);min-width:0}
.project-image{height:315px;display:block;overflow:hidden}
.project-image img{height:100%;width:100%;object-fit:cover;transition:transform .3s}
.project-image:hover img{transform:scale(1.025)}
.project-body{padding:25px 0 28px}.project-body .eyebrow{color:var(--copper);margin-bottom:13px}
.project-body h3{font-size:34px;line-height:1.16;margin:0 0 15px}
.project-body p:not(.eyebrow){color:var(--muted);font-size:16px;max-width:490px}
.project-body .text-link{display:flex;justify-content:space-between;border-top:0;padding:0}
.visual-credit{font-size:12px;line-height:1.5;color:var(--muted);margin:8px 0 0}
.family-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin-top:46px}
.family-service{display:flex;flex-direction:column;border-top:1px solid var(--line);padding:24px 0}
.family-service h3{font-size:25px;line-height:1.15;margin:0 0 14px}
.family-service p{font-size:16px;color:var(--muted);margin-bottom:20px}
.family-service .text-link{margin-top:auto;display:flex;justify-content:space-between}
.family-options{background:#eeeee6}
.family-options details{border-top:1px solid var(--line);padding:20px 0}
.family-options summary{cursor:pointer;font-size:21px;font-weight:600;line-height:1.4}
.family-options details p{max-width:780px;font-size:16px;color:var(--muted);margin:20px 0 0}
.family-process{background:var(--ink);color:var(--paper);display:grid;grid-template-columns:1fr 1fr;gap:10%}
.family-process .eyebrow{color:var(--light-copper)}.family-process p{color:#d6dfdd;font-size:16px}
.family-process ol{list-style:none;padding:0;margin:0}
.family-process li{padding:22px 0;border-bottom:1px solid #52666c}.family-process li:first-child{padding-top:0}
.family-process h3{font-size:25px;margin:0 0 10px}.family-process li p{margin:0 0 12px}
.family-process .text-link{color:var(--paper);border:0}
.family-business{display:grid;grid-template-columns:1fr 1fr;gap:9%;border-bottom:1px solid var(--line)}
.family-business h3{font-size:28px}.family-business p{color:var(--muted);font-size:16px}
.family-area{display:grid;grid-template-columns:1fr 1fr;gap:10%}
.family-area p{color:var(--muted);max-width:500px}.family-area .eyebrow{color:var(--copper)}
.page-intro h1{font-size:clamp(42px,5.3vw,76px);font-weight:600}.page-intro em{font-family:inherit;font-style:normal}
.page-intro .lede{font-size:18px}
.family-service-hero{display:grid;grid-template-columns:1fr 1fr;gap:5%;align-items:center}
.family-service-hero .family-page-image{margin:0;min-width:0}.family-page-image img{display:block;width:100%;height:auto;aspect-ratio:1.2;object-fit:cover}
.family-page-image figcaption{font-size:12px;line-height:1.5;color:var(--muted);margin-top:10px}
.family-service-hero .intro-aside{grid-column:1/-1;margin:0}
.family-service-hero h1{font-size:clamp(40px,4.8vw,70px)}
.quick input,.quick select{font-size:16px}.quick .form-hint,.footer-links,.footer-location{font-size:14px}
.quick-section{gap:10%}.quick{background:white;border:1px solid var(--line);padding:30px}
footer{background:var(--ink);color:var(--paper);padding:58px 7% 100px;gap:40px}
.footer-tagline{font-size:14px;line-height:1.5;margin:22px 0 12px}.footer-location{color:#bfcece}
@media(max-width:1100px){header{flex-wrap:wrap}header nav{order:3;width:100%;justify-content:space-between;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px}.home-hero{grid-template-columns:1fr 1fr;min-height:580px}.home-hero-copy{padding:42px 10%}.home-hero h1{font-size:55px}.family-service-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){header{padding:17px 5%;gap:16px;min-height:85px}header .logo{font-size:34px}header .header-actions{margin-left:auto}.header-actions .button{font-size:14px;padding:11px 13px;gap:10px}header nav{gap:12px;font-size:14px}header nav a{padding:5px 0}
.home-hero{display:flex;flex-direction:column;min-height:0}.home-hero-copy{padding:38px 6% 30px}
.home-hero h1{font-size:clamp(42px,9vw,66px)}.home-hero-copy>p:not(.eyebrow){font-size:16px;max-width:500px}.home-actions{flex-direction:row;flex-wrap:wrap;align-items:center}.hero-local{padding-top:24px}
.home-hero-image{height:340px;flex:none}.service-nav{grid-template-columns:1fr 1fr;padding:0 6%}
.service-nav a{padding:17px 10px;border-left:0;border-bottom:1px solid var(--line)}.service-nav a:first-child{padding-left:10px}
.section{padding:57px 6%}.section.compact{padding:32px 6%}.heading-pair{display:block}.heading-pair h2{font-size:37px;margin-bottom:18px}
.project-pair{grid-template-columns:1fr;gap:32px}.project-image{height:285px}.project-body h3{font-size:30px}
.family-service-grid{grid-template-columns:1fr;gap:0}.family-process,.family-business,.family-area{grid-template-columns:1fr;gap:30px}
.family-service-hero{grid-template-columns:1fr;gap:25px}.family-service-hero .family-page-image{grid-row:2}.family-service-hero .intro-aside{grid-row:3}
.quick-section{display:block}.quick{padding:22px}.quick-copy{margin-bottom:30px}.quick .field-pair{grid-template-columns:1fr}
footer{grid-template-columns:1fr 1fr;padding:45px 6% 100px}footer>div:first-child{grid-column:1/-1}}
@media(max-width:380px){.header-actions{width:100%}.header-actions .button{width:100%;justify-content:center}.home-hero-image{height:270px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.project-image img,.button{transition:none;transform:none}}
@media print{.home-hero{display:block}.home-hero-image{height:280px}header,footer,.mobile-cta{display:none}}

/* Verified service-page composition and customer navigation. */
.family-service-hero>div:first-child{grid-column:1;grid-row:1}
.family-service-hero>.family-page-image{grid-column:2;grid-row:1}
.family-service-hero>.intro-aside{grid-column:1/-1;grid-row:2;border-left:0;border-top:1px solid var(--line);padding:24px 0 0;max-width:none}
.family-service-hero>.intro-aside p{max-width:760px;font-size:16px}
.family-service-hero>.intro-aside ul{display:flex;flex-wrap:wrap;gap:12px 34px;padding-left:20px}
.family-service-hero .family-page-image img{aspect-ratio:1.15;object-position:center}
.scope-guide{background:#eeeee6;display:grid;grid-template-columns:1.1fr 1fr;gap:9%}
.scope-guide h2{font-size:clamp(32px,3.5vw,48px)}
.scope-guide .eyebrow{color:var(--copper)}
.scope-guide p{font-size:16px;color:var(--muted)}
.scope-guide article{border-top:1px solid #c5cdc9;padding:22px 0}
.scope-guide h3{font-size:24px;margin:0 0 12px}
.scope-guide article p{margin:0}
.related-services{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:30px}
.related-services a{font-size:16px;text-decoration:underline;text-underline-offset:5px}
.feature-spotlight{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}
.feature-spotlight figure{margin:0}.feature-spotlight img{width:100%;aspect-ratio:1.3;object-fit:cover;display:block}
.feature-spotlight figcaption{font-size:12px;color:var(--muted);padding-top:9px}
.feature-spotlight .eyebrow{color:var(--copper)}
.feature-spotlight h2{font-size:clamp(34px,4vw,54px)}
.feature-spotlight p{font-size:16px;color:var(--muted)}
em{font-family:inherit;font-style:normal}
.home-hero-image figcaption{background:rgba(22,47,57,.86);font-size:12px}
.family-page-image figcaption,.visual-credit{font-size:12px}
.contact-layout form{background:#fff;border:1px solid var(--line)}
.contact-layout input,.contact-layout textarea,.contact-layout select{background:#fff}
input,select,textarea{font-size:16px;min-height:46px}
:focus-visible{outline:3px solid var(--copper);outline-offset:4px}
summary{min-height:44px}
header nav a{min-height:44px;display:flex;align-items:center}
.quick-copy em{font-family:inherit;font-style:normal}
@media(max-width:760px){
 .family-service-hero>div:first-child{grid-column:1;grid-row:1}
 .family-service-hero>.family-page-image{grid-column:1;grid-row:2}
 .family-service-hero>.intro-aside{grid-column:1;grid-row:3}
 .family-service-hero .family-page-image img{aspect-ratio:1.35}
 .scope-guide,.feature-spotlight{grid-template-columns:1fr;gap:26px}
 header nav{display:grid;grid-template-columns:1fr 1fr;overflow:visible;gap:0 16px}
 header nav a{white-space:normal}
 .home-hero-image{height:310px}
 .home-hero-image img{object-position:center}
 .home-hero-copy .eyebrow{margin-bottom:22px}
 .contact-layout aside{position:static}
 .sample-document{overflow-wrap:anywhere}
 .sample-document table{display:block;overflow-x:auto}
}

.home-hero h1{text-wrap:balance;font-size:clamp(46px,4.6vw,76px)}
@media(max-width:760px){.home-hero h1{font-size:clamp(42px,9vw,66px)}}

.home-hero .button.ghost{background:transparent;color:var(--paper);border:1px solid var(--light-copper)}
.home-hero .button.ghost:hover{background:#254859;color:var(--paper)}
.estimate-entry{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;background:#eeeee6}
.estimate-entry p{margin:0;font-size:18px;font-weight:600;letter-spacing:-.02em}
.feature-spotlight .text-link{display:inline-flex;margin:10px 18px 0 0}
input[type=checkbox],.quick .consent input{width:20px;height:20px;min-height:20px;flex:0 0 20px;accent-color:var(--copper)}
.quick .consent,.contact-layout .check{min-height:44px;align-items:flex-start}
