/* Final visual refinement. Hero concept, colours and interaction code retained. */
:root { --radius: 16px; }
.section { padding: 92px 0; }
.button { border-radius: 10px; }
.menu { border-radius: 9px; }
.eyebrow { font-size: 11px; letter-spacing: 1.6px; }
.hero .eyebrow { font-size: 10px; }
.hero-foot { font-size: 11px; }
.image-credit { font-size: 10px; }
.benefit strong { font-size: 14px; }
.benefit p { font-size: 12px; }
.section-top { margin-bottom: 38px; }
.section-top > p, .gallery-top p:not(.eyebrow) { font-size: 15px; line-height: 1.8; }
.feature-services { gap: 32px; align-items: start; }
.service-photo, .feature-service:nth-child(2) .service-photo {
  height: auto; aspect-ratio: 4 / 3; border-radius: var(--radius);
  background: #e4e6df; box-shadow: 0 8px 24px #10232a08;
}
.feature-service:nth-child(2) { padding-top: 45px; }
.feature-service:first-child .service-photo img { object-position: 50% 52%; }
.feature-service:nth-child(2) .service-photo img { object-position: 50% 47%; }
.feature-service:hover img { transform: scale(1.025); }
.photo-label { left: 16px; bottom: 16px; border-radius: 6px; font-size: 10px; padding: 6px 10px; }
.service-info { padding: 23px 5px 0; gap: 18px; }
.service-info .service-no { font-size: 11px; }
.service-info p { font-size: 15px; line-height: 1.8; }
.round-link { border-radius: 50%; width: 44px; height: 44px; margin-top: 28px; }
.more-services { gap: 46px; margin-top: 54px; padding-top: 40px; grid-template-columns: 1fr 1.16fr; }
.door-feature { grid-template-columns: 175px 1fr; gap: 26px; }
.door-feature figure { height: 252px; padding: 7px; background: #e7e5de; border-radius: var(--radius); }
.door-feature figure img { object-fit: contain; object-position: 50% 50%; border-radius: 11px; }
.door-feature .eyebrow { font-size: 10px; line-height: 1.8; }
.door-feature p { font-size: 14px; line-height: 1.8; }
.door-feature .text-link { font-size: 13px; gap: 20px; }
.service-row {
  padding: 22px 24px; border: 1px solid #daddd3;
  border-radius: var(--radius); background: #efefe8;
  transition: background .2s, border-color .2s;
}
.service-row + .service-row { padding: 22px 24px; margin-top: 14px; border: 1px solid #daddd3; }
.service-row:hover { background: #e9ebe2; border-color: #c4cbbd; }
.service-row .eyebrow { font-size: 10px; margin-bottom: 10px; }
.service-row h3 { font-size: 23px; }
.service-row p { font-size: 14px; line-height: 1.75; margin-top: 10px; }
.service-row .arrow { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #cbd2c5; border-radius: 50%; font-size: 21px; }
.renovation {
  width: min(1440px, calc(100% - 56px)); margin: 0 auto;
  border-radius: 18px; overflow: hidden; min-height: 584px;
  grid-template-columns: 1.05fr 1fr;
}
.reno-visual { min-height: 536px; margin: 24px 0 24px 24px; border-radius: 14px; overflow: hidden; }
.reno-visual img { object-position: 50% 38%; }
.reno-visual figcaption { left: 22px; bottom: 22px; right: 20px; font-size: 11px; letter-spacing: .5px; }
.reno-copy { padding: 56px 58px; }
.reno-copy h2 { font-size: clamp(38px, 3.7vw, 56px); }
.reno-copy p:not(.eyebrow) { font-size: 15px; line-height: 1.85; margin-top: 20px; }
.reno-copy .button { margin-top: 27px; padding: 17px 22px; font-size: 14px; }
.reno-tags { margin-top: 26px; font-size: 11px; }
.gallery-top { margin-bottom: 34px; }
.gallery {
  grid-template-columns: .8fr 1.1fr 1.1fr;
  grid-template-rows: 265px 265px; gap: 18px;
}
.gallery button { border-radius: var(--radius); background: #e7e6df; }
.gallery button:first-child { padding: 10px; }
.gallery button:first-child img { object-fit: contain; object-position: 50% 50%; border-radius: 9px; }
.gallery button:nth-child(2) img { object-position: 50% 65%; }
.gallery button:nth-child(3) img { object-position: 54% 55%; }
.gallery button:nth-child(4) img { object-position: 50% 68%; }
.gallery button:hover img { transform: scale(1.025); }
.gallery button:first-child:hover img { transform: scale(1.01); }
.gallery button > span { font-size: 13px; bottom: 19px; }
.gallery-caption { font-size: 12px; line-height: 1.75; }
.quote { padding-top: 24px; }
.process-strip {
  border: 1px solid #dcded4; border-radius: var(--radius);
  background: #ebece4; padding: 27px 30px; margin-bottom: 64px;
}
.process-strip > p { font-size: 13px; font-weight: 550; color: #64716c; margin-bottom: 21px; }
.process-strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.process-strip article { display: grid; grid-template-columns: 32px 1fr; gap: 15px; padding-right: 24px; border-right: 1px solid #cfd4c8; }
.process-strip article:last-child { padding-right: 0; border-right: 0; }
.process-strip article > span { font: 500 25px/1.2 var(--display); color: #967b50; }
.process-strip h3 { font-size: 17px; letter-spacing: -.3px; line-height: 1.4; }
.process-strip article p { font-size: 13px; line-height: 1.75; margin-top: 8px; color: #63706a; }
.quote-layout { gap: 64px; align-items: start; }
.quote aside > p:not(.eyebrow) { font-size: 16px; line-height: 1.85; }
.direct h3 { font-size: 17px; margin-bottom: 16px; }
.direct a { font-size: 16px; line-height: 1.75; }
.demo-note { border-radius: 0 9px 9px 0; font-size: 13px; padding: 2px 0 2px 17px; line-height: 1.75; }
.demo-note p { font-size: 13px !important; }
.quote form { padding: 36px; border: 1px solid #dde2d6; border-radius: 18px; box-shadow: 0 12px 40px #10232a06; }
.form-step { font-size: 13px; gap: 15px; margin-bottom: 27px; padding-bottom: 19px; }
.form-step span { font-size: 15px; }
.fields { gap: 22px 18px; }
.fields label { font-size: 14px; font-weight: 500; line-height: 1.55; gap: 10px; }
input, select, textarea {
  font-size: 16px; line-height: 1.6; border-radius: 10px;
  padding: 13px 15px; min-height: 54px; background: #fafbf8;
  border-color: #d1d9cb; transition: border-color .2s, box-shadow .2s;
}
input:hover, select:hover, textarea:hover { border-color: #adbba4; }
input:focus, select:focus, textarea:focus { border-color: #ad8d58; box-shadow: 0 0 0 3px #c4a36b1a; }
input::placeholder, textarea::placeholder { color: #768171; }
textarea { min-height: 138px; }
.optional { font-size: 13px; }
.error, .caption { font-size: 12px; }
.form-error { font-size: 14px; }
.upload { border-radius: 12px; padding: 19px; }
.upload label { font-size: 14px; }
.upload p { font-size: 13px; margin: 8px 0 14px; }
.upload input { min-height: 0; font-size: 13px; line-height: 1.7; border-radius: 7px; }
.upload input::file-selector-button { font-size: 13px; border-radius: 7px; padding: 10px 12px; }
#previews figure { border-radius: 8px; }
#previews img { border-radius: 8px; }
.quote form > .button { min-height: 61px; margin-top: 27px; padding: 17px 23px; font-size: 16px; border-radius: 11px; }
.quote form > .button span { font-size: 25px; }
.fields + .form-step { margin-top: 35px; }
.footer p { font-size: 14px; }
.footer-contact a, .footer-links { font-size: 14px; }
.footer h3 { font-size: 12px; }
.footer-bottom { font-size: 11px; }
dialog { border-radius: 16px; }
#summary-data { font-size: 15px; }
#lightbox > img { border-radius: 10px; }
#lightbox > p { font-size: 14px; }
@media (max-width: 1150px) {
  .more-services { gap: 30px; grid-template-columns: 1fr 1.12fr; }
  .door-feature { grid-template-columns: 140px 1fr; gap: 22px; }
  .door-feature figure { height: 245px; }
  .service-row, .service-row + .service-row { padding: 19px; }
  .service-row h3 { font-size: 21px; }
  .reno-copy { padding: 48px 36px; }
  .process-strip { padding: 25px; }
  .process-strip-grid { gap: 18px; }
  .process-strip article { gap: 11px; padding-right: 18px; }
  .quote-layout { gap: 42px; }
  .quote form { padding: 29px; }
}
@media (max-width: 850px) {
  .section { padding: 72px 0; }
  .section-top > p, .gallery-top p:not(.eyebrow) { font-size: 14px; }
  .feature-services { gap: 24px; }
  .feature-service:nth-child(2) { padding-top: 35px; }
  .service-info p { font-size: 14px; }
  .service-info h3 { font-size: 27px; }
  .more-services { grid-template-columns: 1fr 1.1fr; gap: 25px; }
  .door-feature { grid-template-columns: 1fr; gap: 23px; }
  .door-feature figure { height: 265px; padding: 10px; }
  .door-feature figure img { object-fit: contain; }
  .service-row p { font-size: 13px; }
  .renovation { width: calc(100% - 32px); min-height: 570px; }
  .reno-visual { min-height: 534px; margin: 18px 0 18px 18px; }
  .reno-copy { padding: 40px 28px; }
  .reno-copy h2 { font-size: 39px; }
  .reno-copy p:not(.eyebrow) { font-size: 14px; }
  .reno-copy .button { font-size: 13px; gap: 15px; padding: 15px 18px; }
  .reno-visual figcaption { font-size: 10px; left: 16px; }
  .reno-tags { gap: 9px; font-size: 10px; }
  .gallery { grid-template-rows: 230px 230px; gap: 14px; }
  .gallery button > span { font-size: 12px; left: 16px; right: 16px; }
  .gallery-caption { font-size: 11px; }
  .quote { padding-top: 16px; }
  .process-strip { margin-bottom: 43px; padding: 23px; }
  .process-strip-grid { gap: 16px; }
  .process-strip article { display: block; padding-right: 15px; }
  .process-strip article > span { display: block; margin-bottom: 12px; font-size: 22px; }
  .process-strip h3 { font-size: 15px; }
  .process-strip article p { font-size: 12px; }
  .quote-layout { gap: 32px; }
  .quote aside .direct { padding-left: 12px; }
  .quote form { padding: 32px; }
}
@media (max-width: 560px) {
  .section { padding: 57px 0; }
  .eyebrow { font-size: 10px; line-height: 1.7; }
  .hero .eyebrow { font-size: 9px; }
  .hero-foot { font-size: 10px; }
  .hero-location { font-size: 10px; }
  .image-credit { font-size: 9px; }
  .benefit strong { font-size: 12px; }
  .benefit p { font-size: 11px; margin-left: 6px; }
  .feature-services { gap: 36px; }
  .feature-service:nth-child(2) { padding-top: 0; }
  .service-photo, .feature-service:nth-child(2) .service-photo { aspect-ratio: 4 / 3; border-radius: 14px; }
  .service-info { padding-top: 20px; }
  .service-info h3 { font-size: 28px; }
  .service-info p { font-size: 15px; }
  .photo-label { font-size: 10px; bottom: 12px; left: 12px; }
  .more-services { grid-template-columns: 1fr; gap: 28px; margin-top: 35px; padding-top: 29px; }
  .door-feature { grid-template-columns: 132px 1fr; gap: 22px; }
  .door-feature figure { height: 220px; padding: 5px; }
  .door-feature p { font-size: 14px; }
  .door-feature .eyebrow { font-size: 9px; }
  .door-feature .text-link { font-size: 12px; gap: 12px; }
  .service-row, .service-row + .service-row { padding: 21px; }
  .service-row h3 { font-size: 22px; }
  .service-row p { font-size: 14px; }
  .renovation { width: calc(100% - 24px); grid-template-columns: 1fr; border-radius: 17px; }
  .reno-visual { height: 380px; min-height: 0; margin: 12px 12px 0; border-radius: 12px; }
  .reno-visual img { object-position: 50% 30%; }
  .reno-visual figcaption { font-size: 10px; left: 17px; bottom: 18px; line-height: 1.7; }
  .reno-copy { padding: 35px 24px 42px; }
  .reno-copy h2 { font-size: 43px; }
  .reno-copy p:not(.eyebrow) { font-size: 15px; }
  .reno-copy .button { font-size: 14px; padding: 17px 20px; }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 390px 225px 245px; gap: 12px; }
  .gallery button:first-child { padding: 9px; }
  .gallery button:first-child img { object-position: 50% 50%; }
  .gallery button:nth-child(2) img { object-position: 50% 63%; }
  .gallery button:nth-child(3) img { object-position: 65% 57%; }
  .gallery button:nth-child(4) img { object-position: 50% 67%; }
  .gallery button > span { font-size: 11px; left: 12px; right: 12px; }
  .gallery-caption { font-size: 11px; }
  .quote { padding-top: 6px; }
  .process-strip { padding: 24px 21px; margin-bottom: 42px; }
  .process-strip > p { font-size: 12px; margin-bottom: 21px; }
  .process-strip-grid { grid-template-columns: 1fr; gap: 17px; }
  .process-strip article { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 0 0 17px; border-right: 0; border-bottom: 1px solid #cfd4c8; }
  .process-strip article:last-child { border: 0; padding: 0; }
  .process-strip article > span { font-size: 22px; margin: 0; }
  .process-strip h3 { font-size: 16px; }
  .process-strip article p { font-size: 13px; line-height: 1.7; margin-top: 6px; }
  .quote aside .direct { padding-left: 0; }
  .quote aside > p:not(.eyebrow) { font-size: 16px; }
  .quote form { padding: 27px 20px; }
  .fields { grid-template-columns: 1fr; gap: 20px; }
  .fields label { font-size: 14px; }
  input, select, textarea { font-size: 16px; min-height: 54px; padding: 13px; }
  textarea { min-height: 132px; }
  .upload { padding: 16px; }
  .upload p { font-size: 12px; }
  .upload input { font-size: 12px; min-height: 0; padding: 0; }
  .upload input::file-selector-button { padding: 9px; font-size: 12px; margin-right: 8px; }
  .quote form > .button { font-size: 16px; }
  .caption { font-size: 12px; line-height: 1.8; }
  .footer p { font-size: 13px; }
  .footer-contact a { font-size: 15px; }
  .footer-bottom { font-size: 11px; line-height: 1.8; }
}
/* Give both portrait entrances the full height they need. */
@media (min-width: 561px) {
  .gallery button:nth-child(3) { grid-column: 3; grid-row: 1 / 3; }
  .gallery button:nth-child(3) img { object-position: 50% 52%; }
  .gallery button:nth-child(4) { grid-column: 2; grid-row: 2; }
  .gallery button:nth-child(4) img { object-position: 30% 45%; }
}