:root { --ink:#18212a; --blue:#2355a6; --blue-dark:#173d7d; --orange:#f28b28; --paper:#f4f5f2; --white:#fff; --line:#d8dcd9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,Arial,sans-serif; line-height:1.65; }
a { color:inherit; }
.site-header { height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 5vw; background:var(--white); position:relative; z-index:10; }
.brand { display:flex; align-items:center; gap:13px; text-decoration:none; line-height:1.05; }
.brand-logo-frame { width:110px; height:58px; display:flex; align-items:center; overflow:hidden; background:#fff; }
.brand-logo { display:block; width:110px; height:auto; }
.brand-name { flex:0 0 auto; }
.brand strong { display:block; max-width:285px; font:700 18px/1.05 "Barlow Condensed",sans-serif; letter-spacing:.025em; text-transform:uppercase; }
.primary-nav { display:flex; align-items:center; gap:27px; font-size:14px; font-weight:600; }
.primary-nav a { text-decoration:none; }
.primary-nav a:hover { color:var(--blue); }
.nav-call { color:var(--white)!important; background:var(--blue); padding:11px 16px; }
.menu-button { display:none; border:1px solid var(--ink); background:white; padding:8px 12px; font:600 14px Inter,sans-serif; }
.hero { position:relative; min-height:690px; display:flex; align-items:center; overflow:hidden; color:var(--white); }
.hero-photo { position:absolute; inset:0; background-image:url('/assets/projects/bathroom-walk-in-shower.jpg'); background-size:cover; background-position:center 48%; transform:scale(1.01); }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,22,35,.91) 0%,rgba(12,28,45,.69) 52%,rgba(12,28,45,.23) 100%); }
.hero-content { position:relative; z-index:2; width:min(1180px,90vw); margin:0 auto; padding-bottom:70px; }
.eyebrow { margin:0 0 14px; text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:700; color:#d7e6ff; }
.eyebrow.dark { color:var(--blue); }
h1,h2,h3 { font-family:"Barlow Condensed",Impact,sans-serif; line-height:.95; margin:0; }
h1 { max-width:800px; font-size:clamp(60px,8vw,116px); letter-spacing:-.025em; text-transform:uppercase; }
.hero-copy { max-width:590px; font-size:20px; line-height:1.55; margin:26px 0 34px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { display:inline-flex; min-height:50px; align-items:center; justify-content:center; padding:13px 22px; border:0; text-decoration:none; font:700 14px Inter,sans-serif; cursor:pointer; }
.button-primary { background:var(--orange); color:#171717; }
.button-primary:hover { background:#ff9c3c; }
.button-secondary { border:1px solid rgba(255,255,255,.65); color:white; }
.service-ribbon { position:absolute; z-index:2; right:0; bottom:0; width:61%; display:grid; grid-template-columns:repeat(3,1fr); background:var(--white); color:var(--ink); }
.service-ribbon span { padding:25px 22px; border-left:1px solid var(--line); font-weight:600; font-size:14px; }
.service-ribbon b { display:block; color:var(--blue); font-size:11px; margin-bottom:4px; }
.intro { width:min(1180px,90vw); margin:0 auto; padding:110px 0 72px; display:grid; grid-template-columns:1fr 1fr; gap:9vw; }
h2 { font-size:clamp(46px,5vw,74px); text-transform:uppercase; letter-spacing:-.02em; }
.lead { margin:5px 0 23px; font-size:20px; }
.text-link { font-weight:700; color:var(--blue); text-decoration:none; border-bottom:2px solid var(--orange); padding-bottom:5px; }
.text-link span { padding-left:8px; }
.remodel-specialties { width:min(1180px,90vw); margin:0 auto 85px; }
.section-heading { max-width:760px; margin-bottom:38px; }
.specialty-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.specialty-grid article { min-height:190px; padding:28px; background:#fff; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.specialty-grid strong { display:block; font:700 27px/1.05 "Barlow Condensed",sans-serif; text-transform:uppercase; }
.specialty-grid p { margin:14px 0 0; color:#5b6570; }
.services { width:min(1180px,90vw); margin:0 auto 110px; display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:2px; background:var(--line); }
.service-card { min-height:380px; padding:34px; display:flex; flex-direction:column; justify-content:space-between; background:var(--white); }
.service-card.primary-service { background:var(--blue-dark); color:white; }
.card-number { font-size:13px; font-weight:700; color:var(--orange); }
.service-card h3 { font-size:38px; text-transform:uppercase; }
.service-card p { margin:20px 0 0; color:#5b6570; }
.primary-service p { color:#dce6f4; }
.projects { padding:105px max(5vw,calc((100vw - 1180px)/2)); background:#fff; }
.projects-heading { display:grid; grid-template-columns:1fr .7fr; align-items:end; gap:7vw; margin-bottom:42px; }
.projects-heading > p { margin:0 0 8px; font-size:18px; color:#5b6570; }
.project-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:340px; gap:14px; }
.project-grid figure { position:relative; margin:0; overflow:hidden; background:#d9dde0; }
.project-grid .project-feature { grid-column:span 2; grid-row:span 2; }
.project-grid img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.project-grid figure:hover img { transform:scale(1.025); }
.project-grid figcaption { position:absolute; left:0; right:0; bottom:0; padding:45px 22px 20px; color:#fff; background:linear-gradient(transparent,rgba(9,17,25,.9)); }
.project-grid figcaption strong,.project-grid figcaption span { display:block; }
.project-grid figcaption strong { font:700 25px/1.1 "Barlow Condensed",sans-serif; text-transform:uppercase; }
.project-grid figcaption span { margin-top:3px; font-size:13px; color:#dbe2e8; }
.generator-band { padding:95px max(5vw,calc((100vw - 1180px)/2)); display:grid; grid-template-columns:1fr 1fr .7fr; gap:6vw; align-items:start; background:var(--blue-dark); color:#fff; }
.generator-band h2 { font-size:clamp(42px,4vw,64px); }
.generator-band p { color:#dce6f4; }
.generator-band aside { padding:27px; border:1px solid rgba(255,255,255,.28); }
.generator-band aside strong { font:700 27px/1.1 "Barlow Condensed",sans-serif; text-transform:uppercase; }
.generator-band aside a { color:#fff; font-weight:700; }
.generator-guide { padding:110px max(5vw,calc((100vw - 1180px)/2)); background:var(--paper); }
.generator-intro { display:grid; grid-template-columns:1fr .8fr; gap:8vw; align-items:end; margin-bottom:58px; }
.generator-intro > p { margin:0 0 8px; font-size:18px; color:#53606b; }
.generator-steps { list-style:none; margin:0 0 90px; padding:0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #bdc4c9; border-left:1px solid #bdc4c9; }
.generator-steps li { min-height:250px; padding:26px; border-right:1px solid #bdc4c9; border-bottom:1px solid #bdc4c9; background:#fff; }
.generator-steps span { display:block; margin-bottom:52px; color:var(--blue); font-size:12px; font-weight:700; }
.generator-steps strong { display:block; font:700 27px/1.05 "Barlow Condensed",sans-serif; text-transform:uppercase; }
.generator-steps p { margin:13px 0 0; color:#5b6570; font-size:15px; }
.generator-sizing { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px 8vw; align-items:start; padding:65px 0; border-top:4px solid var(--blue); }
.generator-sizing h3,.brand-options h3,.generator-faq h3 { font-size:42px; text-transform:uppercase; }
.size-options { display:grid; gap:1px; background:#c9ced1; }
.size-options article { padding:23px 26px; background:#fff; }
.size-options strong { font:700 24px/1.05 "Barlow Condensed",sans-serif; text-transform:uppercase; }
.size-options p { margin:7px 0 0; color:#5b6570; }
.sizing-note { grid-column:1/-1; margin:0; padding:20px 24px; background:#e4e7e5; font-size:15px; }
.brand-options { margin-top:25px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.brand-options article { padding:42px; background:var(--ink); color:white; }
.brand-options article:nth-child(2) { background:var(--blue); }
.brand-options p:not(.brand-label) { color:#d7dfe5; }
.brand-options a { color:#fff; font-weight:700; }
.brand-label { margin:0 0 50px; color:#a9c7ff; font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.generator-faq { margin-top:90px; display:grid; grid-template-columns:.65fr 1.35fr; gap:8vw; }
.generator-faq details { border-top:1px solid #b9c0c4; padding:20px 0; }
.generator-faq details:last-child { border-bottom:1px solid #b9c0c4; }
.generator-faq summary { cursor:pointer; font-weight:700; list-style-position:outside; }
.generator-faq details p { margin:13px 0 0; color:#5b6570; }
.electrical-guide { padding:110px max(5vw,calc((100vw - 1180px)/2)); background:#101a24; color:#fff; }
.electrical-heading { display:grid; grid-template-columns:1.05fr .75fr; gap:9vw; align-items:end; margin-bottom:58px; }
.electrical-heading > div:last-child p { margin:0 0 25px; color:#cbd5dd; font-size:18px; }
.electrical-services { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #3c4852; border-left:1px solid #3c4852; }
.electrical-services article { min-height:285px; padding:26px; border-right:1px solid #3c4852; border-bottom:1px solid #3c4852; }
.electrical-services span { display:block; margin-bottom:48px; color:var(--orange); font-size:12px; font-weight:700; }
.electrical-services h3 { font-size:27px; line-height:1.02; text-transform:uppercase; }
.electrical-services p { margin:14px 0 0; color:#bfcbd4; font-size:15px; }
.electrical-callout { margin:55px 0 0 auto; max-width:720px; padding:42px; background:#fff; color:var(--ink); }
.electrical-callout h3 { font-size:43px; text-transform:uppercase; }
.electrical-callout p:not(.eyebrow) { color:#5b6570; }
.about { display:grid; grid-template-columns:1fr 1fr; min-height:620px; background:var(--ink); color:white; }
.about-photo { background:url('/assets/projects/finished-bathroom.jpg') center/cover no-repeat; }
.about-copy { align-self:center; padding:70px 8vw; }
.about-copy p:not(.eyebrow) { color:#ced5db; max-width:600px; }
.estimate { padding:105px max(5vw,calc((100vw - 1180px)/2)); display:grid; grid-template-columns:.8fr 1.2fr; gap:8vw; background:var(--blue); color:white; }
.estimate p { color:#dbe6f5; }
.contact-line a { color:white; font-weight:700; font-size:18px; }
form { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
label { display:grid; gap:7px; font-size:13px; font-weight:700; }
input,select,textarea { width:100%; border:1px solid rgba(255,255,255,.42); background:#fff; border-radius:0; padding:13px; color:var(--ink); font:16px Inter,sans-serif; }
textarea { resize:vertical; }
.full { grid-column:1/-1; }
.hidden-field { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.form-notice { margin:0; font-size:12px; color:#dbe6f5; }
.form-notice a { color:#fff; }
footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; padding:34px 5vw; background:#10171e; color:#bfc7cc; font-size:13px; }
footer p { margin:0; }
footer a { color:#fff; }
.back-to-top { position:fixed; top:104px; right:24px; z-index:30; width:48px; height:48px; display:grid; place-items:center; border:0; border-radius:50%; background:var(--blue); color:#fff; box-shadow:0 8px 24px rgba(10,22,35,.28); font:700 28px/1 Inter,sans-serif; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .2s ease,transform .2s ease,visibility .2s; }
.back-to-top.visible { opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover { background:#183b8f; }
.back-to-top:focus-visible { outline:3px solid #f6c453; outline-offset:3px; }
.legal-page { min-height:100vh; background:var(--paper); }
.legal-wrap { width:min(800px,90vw); margin:0 auto; padding:80px 0 110px; }
.legal-wrap h1 { color:var(--ink); font-size:clamp(48px,7vw,82px); }
.legal-wrap h2 { margin-top:42px; font-size:32px; }
.legal-wrap p,.legal-wrap li { color:#4f5a63; }
.legal-back { display:inline-block; margin-bottom:35px; color:var(--blue); font-weight:700; }
@media (max-width:1180px) {
  .site-header { height:74px; padding:0 20px; }
  .brand-logo-frame { width:82px; height:48px; }
  .brand-logo { width:82px; }
  .brand { gap:8px; }
  .brand strong { max-width:220px; font-size:15px; }
  .menu-button { display:block; }
  .primary-nav { display:none; position:absolute; top:74px; left:0; right:0; padding:24px; background:white; flex-direction:column; align-items:stretch; }
  .primary-nav.open { display:flex; }
  .hero { min-height:660px; align-items:flex-start; }
  .hero-content { padding-top:105px; }
  .hero-copy { font-size:18px; }
  .service-ribbon { width:100%; }
  .service-ribbon span { padding:18px 12px; font-size:12px; }
  .intro { padding:75px 0 55px; grid-template-columns:1fr; gap:30px; }
  .services { grid-template-columns:1fr; }
  .specialty-grid { grid-template-columns:repeat(2,1fr); }
  .service-card { min-height:280px; }
  .projects-heading { grid-template-columns:1fr; gap:20px; }
  .project-grid { grid-template-columns:1fr 1fr; grid-auto-rows:300px; }
  .project-grid .project-feature { grid-column:span 2; grid-row:span 1; }
  .generator-band { grid-template-columns:1fr; }
  .generator-intro,.generator-sizing,.generator-faq { grid-template-columns:1fr; gap:25px; }
  .generator-steps { grid-template-columns:1fr 1fr; }
  .generator-steps span { margin-bottom:30px; }
  .sizing-note { grid-column:auto; }
  .electrical-heading { grid-template-columns:1fr; gap:25px; }
  .electrical-services { grid-template-columns:1fr 1fr; }
  .about { grid-template-columns:1fr; }
  .about-photo { min-height:480px; }
  .about-copy { padding:70px 7vw; }
  .estimate { grid-template-columns:1fr; }
}
@media (max-width:540px) {
  .back-to-top { top:88px; right:16px; width:44px; height:44px; }
  .brand-logo-frame { width:62px; }
  .brand-logo { width:62px; }
  .brand strong { max-width:170px; font-size:12px; }
  .hero { min-height:710px; }
  h1 { font-size:57px; }
  .hero-actions .button { width:100%; }
  .service-ribbon { grid-template-columns:1fr; }
  .service-ribbon span { padding:10px 20px; display:flex; gap:12px; }
  .service-ribbon b { margin:0; }
  .services { width:100%; }
  .specialty-grid { grid-template-columns:1fr; }
  .service-card { padding:32px 6vw; }
  .projects { padding-left:5vw; padding-right:5vw; }
  .project-grid { grid-template-columns:1fr; grid-auto-rows:330px; }
  .project-grid .project-feature { grid-column:auto; }
  .generator-guide { padding-left:5vw; padding-right:5vw; }
  .generator-steps,.brand-options { grid-template-columns:1fr; }
  .generator-steps li { min-height:210px; }
  .brand-options article { padding:32px 26px; }
  .electrical-guide { padding-left:5vw; padding-right:5vw; }
  .electrical-services { grid-template-columns:1fr; }
  .electrical-services article { min-height:220px; }
  .electrical-services span { margin-bottom:28px; }
  .electrical-callout { padding:30px 24px; }
  .about-photo { min-height:390px; }
  form { grid-template-columns:1fr; }
  .full { grid-column:auto; }
}