*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f3f5f6;color:#182125;font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:1.65}a{color:inherit;text-decoration:none}header{padding:22px 4.5%;display:flex;align-items:center;justify-content:space-between;gap:30px;background:#f3f5f6}.brand{font-size:20px;font-weight:900;line-height:1.05;letter-spacing:-.6px}.brand small{display:block;font-size:11px;letter-spacing:3px;margin-top:7px}.nav{display:flex;gap:24px;align-items:center;font-size:14px;font-weight:700}.nav a:hover,.nav a[aria-current]{text-decoration:underline;text-underline-offset:7px}.button{display:inline-flex;padding:14px 23px;background:#7da6bf;color:#182125;font-size:14px;font-weight:800;border:1px solid transparent;cursor:pointer}.nav .button{background:#182125;color:white}.hero{position:relative;min-height:670px;background:#182125;color:white;display:flex;align-items:center}.hero>img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,19,24,.94),rgba(12,19,24,.62) 53%,rgba(12,19,24,.05))}.hero-content{position:relative;z-index:1;padding:70px 7%;max-width:1080px}.eyebrow{font-size:13px;font-weight:800;letter-spacing:2px;margin-bottom:26px}h1{font-size:clamp(46px,5.6vw,86px);line-height:1.04;letter-spacing:-4px;margin:0 0 25px}h2{font-size:clamp(36px,4.4vw,66px);line-height:1.1;letter-spacing:-2.7px;margin:0 0 35px;font-weight:800}h3{font-size:27px;line-height:1.2;letter-spacing:-.6px}.hero-services{font-size:24px;font-weight:700}.hero p{max-width:610px}.actions{display:flex;gap:13px;margin-top:32px}.outline{background:transparent;color:white;border-color:#ffffff88}.image-note{position:absolute;bottom:15px;right:25px;font-size:12px;z-index:1;opacity:.75}.strip{display:flex;justify-content:space-between;background:#7da6bf;padding:20px 7%;font-size:12px;font-weight:800;letter-spacing:1.5px}.section{padding:95px 7%;max-width:1600px;margin:auto}.split{display:grid;grid-template-columns:1fr 1fr;gap:75px}.lead{font-size:25px;line-height:1.55;margin-top:0}.narrow{max-width:820px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:38px;margin-top:55px}.cards article{border-top:1px solid #18212555;padding-top:24px}.number{font-size:14px;font-weight:700}.cards p{color:#b7c6cf}.dark{background:#182125;color:#f3f5f6;max-width:none}.dark p{color:#d6dfe4}.dark .cards article{border-color:#ffffff55}.service-links{display:flex;gap:35px;margin-top:25px;font-weight:700}.text-link,.service-links a{border-bottom:1px solid;padding-bottom:6px;display:inline-block}.scope-list>div{display:grid;grid-template-columns:1fr 2fr;border-top:1px solid #ffffff44;padding:22px 0;gap:25px}.scope-list strong{font-size:22px}.scope-list span{color:#d6dfe4}footer{background:#11191d;color:white;padding:65px 7% 28px}.footer-top{display:flex;justify-content:space-between;gap:40px;align-items:center}.footer-top h2{font-size:40px}.footer-bottom{display:flex;justify-content:space-between;gap:25px;border-top:1px solid #ffffff33;margin-top:48px;padding-top:25px;font-size:13px;color:#b7c6cf}.menu-toggle{display:none}form{display:grid;grid-template-columns:1fr 1fr;gap:25px;max-width:900px;margin-top:45px}label{font-size:14px;font-weight:700}input,select,textarea{display:block;width:100%;padding:15px;margin-top:8px;font:inherit;border:1px solid #52636d;background:white;border-radius:0;color:#182125}.wide{grid-column:1/-1}.form-note{font-size:14px;color:#b7c6cf}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid #8ebbd3;outline-offset:5px}@media(min-width:1500px){.hero-content{padding-left:calc((100vw - 1380px)/2)}}@media(max-width:1100px){.nav{gap:12px;font-size:14px;flex-wrap:wrap;justify-content:flex-end}header{padding:20px 4%}.brand{font-size:18px}}@media(max-width:850px){header{flex-wrap:wrap}.menu-toggle{display:block;background:none;border:1px solid #182125;padding:8px 15px;font-size:14px}.nav{display:none;width:100%;flex-wrap:wrap;font-size:15px;padding:15px 0}.nav.open{display:flex}.hero{min-height:610px}.hero-content{padding:65px 6%}h1{letter-spacing:-2px}.strip{gap:18px;flex-wrap:wrap}.section{padding:65px 6%}.split{grid-template-columns:1fr;gap:18px}.lead{font-size:22px}.image-note{font-size:12px;max-width:270px;right:15px}.footer-top,.footer-bottom{flex-direction:column;align-items:flex-start}.scope-list>div{grid-template-columns:1fr;gap:4px}.service-links{flex-wrap:wrap;gap:20px}}@media(max-width:500px){h1{font-size:44px}.hero-services{font-size:20px}.actions{flex-wrap:wrap}form{grid-template-columns:1fr}.wide{grid-column:1}.strip{font-size:11px}h2{letter-spacing:-1.5px}}.story-layout{display:grid;grid-template-columns:1.35fr 1fr;gap:70px;align-items:start}.narrative p{margin:0 0 25px}.family-space{position:sticky;top:30px}.family-placeholder{aspect-ratio:4/5;border:1px solid #52636d;background:#202d34;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center}.family-placeholder span{font-size:14px;font-weight:800;letter-spacing:2px}.family-caption{font-size:14px;color:#b7c6cf}.hero{min-height:610px}.section{padding-top:75px;padding-bottom:75px}@media(max-width:850px){.story-layout{grid-template-columns:1fr;gap:30px}.family-space{position:static}.family-placeholder{aspect-ratio:4/3}.hero{min-height:600px}}.contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:25px}.contact-email{background:white;border-color:#182125;color:#182125}.footer-top .contact-actions{max-width:360px}.footer-top .contact-email{background:transparent;border-color:#7da6bf;color:#7da6bf}.home-description{max-width:920px}.home-description p{margin:0 0 25px}.home-services{padding-left:22px;margin:30px 0}.home-services li{padding-left:8px;margin-bottom:18px}.nav{font-size:15px;gap:30px}@media(max-width:850px){.nav{gap:20px}}.service-area{padding:10px 7% 55px;max-width:1100px}.service-area p{font-size:15px}.service-area strong{font-size:18px}.hero-license{font-size:16px;font-weight:700;margin-top:20px}.hero-tagline{font-size:28px;font-weight:700}.services-menu{position:relative}.services-menu summary{cursor:pointer;padding:10px 0}.services-dropdown{position:absolute;top:100%;left:0;background:#f3f5f6;box-shadow:0 8px 25px #0003;min-width:285px;padding:12px;z-index:20;border:1px solid #52636d}.services-dropdown a{display:block;padding:12px;font-size:15px}.services-dropdown a:hover{background:#202d34}.hero h1{font-size:clamp(44px,5.3vw,78px)}@media(max-width:850px){.services-dropdown{position:static;box-shadow:none;margin-top:5px}.services-menu{width:100%}.hero-tagline{font-size:23px}}.contact-fallback{font-size:14px;color:#b7c6cf;margin-top:20px}.contact-fallback a{text-decoration:underline;text-underline-offset:4px}
#request-quote{background:#202d34}#contractor-bid{max-width:960px;margin-top:32px;gap:24px}#contractor-bid label{display:flex;flex-direction:column;gap:8px;font-size:16px}#contractor-bid input,#contractor-bid select,#contractor-bid textarea{width:100%;box-sizing:border-box;font:inherit;background:white;color:#182125;padding:13px;border:1px solid #6b818e;border-radius:0}#contractor-bid .form-note{font-size:14px;line-height:1.6}#contractor-bid button{cursor:pointer;justify-self:start}#bid-error:empty{display:none}#request-quote{scroll-margin-top:30px}

.contact-intro h1{font-size:clamp(38px,5vw,64px);color:#182125;max-width:900px}.contact-details{max-width:1000px;margin-top:45px}.contact-details>div{display:grid;grid-template-columns:190px 1fr;gap:30px;border-top:1px solid #52636d;padding:28px 0;align-items:start}.contact-details>div:last-child{border-bottom:1px solid #52636d}.contact-details strong{font-size:14px;letter-spacing:2px}.contact-details a,.contact-details span{font-size:clamp(18px,2.4vw,28px);overflow-wrap:anywhere}.contact-details a{text-decoration:underline;text-underline-offset:6px}#contact-form{max-width:960px;gap:24px;margin-top:32px}#contact-form label{display:flex;flex-direction:column;gap:8px;font-size:16px}#contact-form input,#contact-form select,#contact-form textarea{width:100%;box-sizing:border-box;font:inherit;background:white;color:#182125;padding:13px;border:1px solid #6b818e}#contact-form .form-note{font-size:14px;line-height:1.6}#contact-error:empty{display:none}.nav{gap:22px}@media(max-width:600px){.contact-details>div{grid-template-columns:1fr;gap:10px}}

/* Real project photography, integrated with the service copy. */
.project-photo{display:block;width:100%;height:auto;max-width:100%;background:#202d34}
.photo-intro,.home-photo-layout,.support-photo-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,75px);align-items:center}
.photo-intro .lead{font-size:clamp(20px,2vw,25px)}
.portrait-detail{max-height:550px;width:auto;max-width:100%;justify-self:center}
.home-photo-stack{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:20px}
.home-photo-stack img:first-child{grid-column:1/-1}
.home-photo-stack img:last-child{grid-column:2;width:100%;max-height:340px;object-fit:contain;object-position:right top;background:transparent}
.hero>.home-hero-photo{object-position:center 54%}
.family-photo{width:100%;height:auto}
.family-space{position:static}
.layne-story{border-top:1px solid #52636d}
.layne-photo{max-height:620px;width:auto;justify-self:center}
@media(max-width:850px){.photo-intro,.home-photo-layout,.support-photo-layout{grid-template-columns:1fr;gap:30px}.photo-intro .portrait-detail{max-height:520px}.home-photo-stack{grid-template-columns:1fr 1fr}.home-photo-stack img:last-child{max-height:300px}.hero>.home-hero-photo{object-position:62% center}.layne-photo{width:100%;max-width:460px;height:auto}.photo-intro h2{font-size:clamp(34px,6vw,52px)}}

/* Service-led photo rows and commercial job-site context. */
.photo-service-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:42px}
.photo-service-cards article{min-width:0}.service-card-photo{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;object-position:center}
.photo-service-cards article:nth-child(2) .service-card-photo{object-position:center 48%}
.photo-service-cards article:nth-child(3) .service-card-photo{object-position:center 42%}
.photo-service-cards h3{margin:24px 0 12px}.photo-service-cards p{margin:0 0 20px}
.project-context{padding-top:0;padding-bottom:55px}.wide-context-photo{width:100%;height:auto}
.inline-photo-stack{display:grid;gap:26px;align-items:start}.portrait-inline{width:auto;max-height:560px;justify-self:center}
.support-photo-layout .split{display:block}.support-photo-layout .cards{grid-template-columns:1fr;margin-top:30px;gap:18px}.support-photo-layout .cards h3{margin-top:12px;margin-bottom:12px}
.installation-pair{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;margin-top:35px}.installation-photo{width:100%;height:auto}
.hero>img{object-position:center}
@media(max-width:850px){.photo-service-cards{grid-template-columns:1fr;gap:42px}.service-card-photo{aspect-ratio:4/3}.photo-service-cards h3{margin-top:18px}.portrait-inline{max-height:500px}.installation-pair{gap:20px}.project-context{padding-bottom:25px}.support-photo-layout .scope-list>div{grid-template-columns:1fr}.support-photo-layout .scope-list strong{font-size:20px}}
@media(max-width:500px){.installation-pair{grid-template-columns:1fr}}

.residential-photo-pair{display:grid;grid-template-columns:1.35fr 1fr;gap:30px;margin-top:40px;align-items:center}.residential-photo-pair img:last-child{width:auto;max-height:500px;justify-self:center}.residential-exterior{margin-top:26px}.residential-exterior img{width:100%;height:auto}@media(max-width:650px){.residential-photo-pair{grid-template-columns:1fr}.residential-photo-pair img:last-child{max-height:460px}}

/* Supplied business logo, framed to remove excess whitespace visually. */
.logo-brand{display:block;position:relative;overflow:hidden;background:white;aspect-ratio:1.65;width:220px;flex-shrink:0}
.logo-brand img{position:absolute;display:block;width:174%;max-width:none;height:auto;left:-34%;top:-40%}
header{padding-top:12px;padding-bottom:12px}.footer-logo{width:260px;margin-bottom:28px}
@media(max-width:1100px){header .logo-brand{width:180px}}
@media(max-width:850px){header .logo-brand{width:155px}.footer-logo{width:220px}}

/* White logo artwork on the site's own surfaces. */
header{background:#182125;color:#f3f5f6}
.logo-brand{background:transparent}
.logo-brand img{filter:grayscale(1) invert(1);mix-blend-mode:screen}
header .menu-toggle{color:#f3f5f6;border-color:#f3f5f6}
header .services-dropdown{background:#182125;color:#f3f5f6;border-color:#ffffff44}
header .services-dropdown a:hover{background:#293b46}
header a:focus-visible,header button:focus-visible{outline-color:#7da6bf}

.logo-brand{aspect-ratio:1.5}.logo-brand img{width:170%;left:-32%;top:-30%}

/* Approved Craftsman logo: horizontal header and stacked footer. */
.logo-brand img{filter:grayscale(1) contrast(5);mix-blend-mode:screen}
header .logo-brand{width:340px;aspect-ratio:16/3}
header .logo-brand img{width:137.1429%;left:-21.4286%;top:-352.381%;height:auto}
.footer-logo{width:290px;aspect-ratio:965/543}
.footer-logo img{width:159.171%;left:-29.534%;top:-19.337%;height:auto}
@media(max-width:1100px){header .logo-brand{width:280px}}
@media(max-width:850px){header .logo-brand{width:250px}.footer-logo{width:260px}}
@media(max-width:380px){header .logo-brand{width:215px}}

/* Render the approved white artwork directly on mobile and desktop. */
.logo-brand img{filter:none;mix-blend-mode:normal}

/* Home navigation is part of the beach hero, with no independent bar. */
.logo-brand img{filter:none;mix-blend-mode:normal}
.home-page .hero{display:block;min-height:690px}
.home-page .hero>img{inset:0}
.home-page .hero>header{position:relative;z-index:3;background:none;border:0;color:white;padding-top:22px;padding-bottom:22px}
.home-page .hero-content{padding-top:55px;padding-bottom:80px}
.home-page .hero:after{pointer-events:none;background:linear-gradient(90deg,rgba(7,25,31,.9),rgba(7,25,31,.55) 53%,rgba(7,25,31,.12))}
.home-page header .services-dropdown{background:#18252b;color:white}
@media(max-width:850px){.home-page .hero-content{padding-top:40px}.home-page .hero{min-height:690px}.home-page .nav.open{background:#14232be8;padding:18px}}

/* Shared charcoal and coastal blue theme on every route. */
:root{--surface:#182125;--surface-deep:#11191d;--text:#f3f5f6;--muted:#b7c6cf;--blue:#48728b;--blue-light:#9cbfd3}
body{background:var(--surface);color:var(--text)}
header{background:#151d21;color:var(--text)}
footer,.dark{background:var(--surface-deep);color:var(--text)}
.button,.nav .button{background:var(--blue);color:white;border-color:#789bad}
.button:hover{background:#365b72}
.outline,.contact-email,.footer-top .contact-email{background:transparent;color:var(--text);border-color:#93afbf}
.outline:hover,.contact-email:hover{background:#2c414d}
.eyebrow,.number{color:var(--blue-light)}
.cards p,.form-note,.family-caption,.contact-fallback{color:var(--muted)}
.contact-intro h1{color:var(--text)}
.strip{background:#263b47;color:var(--text)}
input,select,textarea,#contractor-bid input,#contractor-bid select,#contractor-bid textarea,#contact-form input,#contact-form select,#contact-form textarea{background:#f3f5f6;color:#182125;border-color:#6b818e}
.services-dropdown,header .services-dropdown{background:#182125;color:var(--text);border-color:#52636d}
.services-dropdown a:hover,header .services-dropdown a:hover{background:#293b46}
header .menu-toggle{color:var(--text);border-color:#93afbf}
a:focus-visible,button:focus-visible,header a:focus-visible,header button:focus-visible{outline-color:#8ebbd3}
.logo-brand img{filter:none;mix-blend-mode:normal}
.home-page .hero>header{background:transparent;border:0}

/* Architectural imagery: immersive openings, captioned scenes and framed craft details. */
.portrait-hero{position:relative;isolation:isolate;min-height:650px;display:flex;align-items:center;overflow:hidden;background:#11191d}
.portrait-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;z-index:-2}
.portrait-hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(17,25,29,.96),rgba(17,25,29,.78) 38%,rgba(17,25,29,.06) 70%),linear-gradient(0deg,#182125 0%,transparent 24%)}
.portrait-copy{width:52%;padding:90px 0 90px 7%;max-width:800px}
.portrait-copy h1{font-size:clamp(42px,5vw,72px);letter-spacing:-.045em}
.portrait-copy .lead{font-size:22px;max-width:540px;color:#e7edf1}
.story-copy{display:block;max-width:1000px;margin:auto;column-count:2;column-gap:65px}
.story-copy .narrative p{break-inside:avoid}
.immersive-section{padding:0;max-width:none}
.immersive-intro{position:relative;isolation:isolate;display:block;min-height:620px;overflow:hidden;padding:90px 7%;background:#11191d}
.immersive-intro>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.immersive-intro:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(17,25,29,.97),rgba(17,25,29,.86) 42%,rgba(17,25,29,.22)),linear-gradient(0deg,#182125,transparent 18%)}
.immersive-intro>div{max-width:650px}
.immersive-intro h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.035em;font-size:clamp(38px,4.3vw,62px)}
.immersive-intro .lead{color:#eef2f4}
.image-story{position:relative;margin:0;overflow:hidden;background:#11191d;align-self:stretch;min-height:420px}
.image-story>img{height:100%;min-height:420px;width:100%;object-fit:cover}
.image-story:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,18,24,.92),rgba(9,18,24,.28) 45%,transparent 75%);pointer-events:none}
.image-story figcaption{position:absolute;bottom:0;left:0;right:0;padding:35px;z-index:1}
.image-story h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(30px,3vw,44px);line-height:1.15;letter-spacing:-.03em;margin:0;color:white}
.photo-intro:not(.immersive-intro){gap:clamp(40px,7vw,110px)}
.framed-detail{padding:10px;background:#202d34;border:1px solid #ffffff20;box-shadow:18px 18px 0 #11191d}
.inline-photo-stack{gap:40px}
.project-context{padding-top:28px;padding-bottom:50px}
.wide-context-photo{border-bottom:3px solid #48728b}
.residential-photo-pair{gap:45px}.residential-exterior{margin-top:42px}
@media(max-width:850px){.portrait-hero{min-height:760px;align-items:flex-end}.portrait-backdrop{object-position:70% top}.portrait-hero:after{background:linear-gradient(0deg,#182125 0%,rgba(17,25,29,.94) 18%,rgba(17,25,29,.6) 40%,transparent 72%)}.portrait-copy{width:100%;max-width:650px;padding:360px 6% 45px}.portrait-copy .lead{font-size:20px}.story-copy{column-count:1}.immersive-intro{padding:70px 6%;min-height:580px}.immersive-intro:after{background:linear-gradient(90deg,rgba(17,25,29,.92),rgba(17,25,29,.72)),linear-gradient(0deg,#182125,transparent 30%)}.image-story,.image-story>img{min-height:360px}.image-story figcaption{padding:25px}.framed-detail{box-shadow:10px 10px 0 #11191d}.portrait-detail{margin-bottom:10px}}

/* Craftsman serif typography complements the original logo. */
:root{--brand-font:Georgia,'Palatino Linotype',Palatino,'Times New Roman',serif}
body,input,select,textarea,button{font-family:var(--brand-font)}
body{font-size:18px;line-height:1.7}
h1,h2,h3,.hero h1,.immersive-intro h2,.image-story h2,.portrait-copy h1{font-family:var(--brand-font);font-weight:700;letter-spacing:-.025em;line-height:1.12}
h2{font-size:clamp(34px,4vw,58px)}h3{font-size:27px}
.nav{font-family:var(--brand-font);font-size:16px;font-weight:700;letter-spacing:.02em}
.eyebrow{font-family:var(--brand-font);font-size:14px;font-weight:700;letter-spacing:.13em}
.button{font-family:var(--brand-font);font-size:16px;letter-spacing:.02em;font-weight:700}
.lead{line-height:1.6}
.hero .contractor-headline{max-width:990px;font-size:clamp(40px,4.9vw,70px);letter-spacing:-.03em;line-height:1.12}
.hero .hero-specialty{font-size:clamp(20px,2vw,26px);line-height:1.5;max-width:740px;color:#f3f5f6;margin-top:22px;margin-bottom:28px}
.hero-license{font-size:16px;letter-spacing:.015em}
.footer-top h2{font-family:var(--brand-font);line-height:1.16}
@media(max-width:850px){.nav{font-size:16px}.hero .contractor-headline{font-size:clamp(38px,7vw,58px)}.hero .hero-specialty{font-size:21px}.home-page .hero-content{padding-top:35px}}
@media(max-width:500px){body{font-size:17px}.hero .contractor-headline{font-size:38px;line-height:1.15}.hero .hero-specialty{font-size:20px}.button{font-size:15px}h2{font-size:34px}.home-page .hero-content{padding-bottom:70px}}