/* ============================================================
   ADAPTIVE PERSPECTIVE — APPROVED DESIGN VISUAL REFERENCE
   Source images are retained without reinterpretation.
   HTML/CSS production conversion remains a separate step.
============================================================ */
:root {
    --burgundy: #740720;
    --gold: #d6a029;
    --cream: #fffaf3;
    --ink: #29272a;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Arial, sans-serif; color: var(--ink); background: var(--cream); }
.review-banner { padding: 7px 15px; text-align: center; background: #fff0c8; color: #4a3112; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.site-header { min-height: 82px; padding: 10px clamp(16px,4vw,64px); display: flex; justify-content: space-between; align-items: center; gap: 20px; background: linear-gradient(110deg, #fffaf4,#fff 70%,#f1f5ff); }
.wordmark { color: var(--burgundy); text-decoration: none; line-height: 1.04; }
.wordmark strong { display: block; font-size: clamp(16px,2vw,27px); font-weight: 900; }
.wordmark .gold { color: #c78d17; font-size: 1.45em; font-style: italic; }
.wordmark small { font-size: .6em; }
.wordmark>span { display: block; font-size: clamp(8px,.7vw,12px); letter-spacing: .12em; color: var(--ink); margin-top: 7px; }
.wordmark b { color: var(--gold); }
nav { display: flex; align-items: center; gap: clamp(10px,2.2vw,40px); flex-wrap: wrap; justify-content: center; }
nav a { color: #650919; font-weight: 800; text-decoration: none; font-size: clamp(11px, .9vw,15px); }
nav a:hover, nav a:focus-visible { text-decoration: underline; }
nav .contact-link { background: var(--burgundy); color: white; padding: 13px 22px; border-right: 4px solid var(--gold); transform: skew(-10deg); }
.art-section { position: relative; margin: 0 auto; width: 100%; max-width: 1700px; }
.art-section > img { display: block; width: 100%; height: auto; }
.hotspot { position: absolute; border: 0; background: transparent; cursor: pointer; }
.hotspot:focus-visible { outline: 4px solid var(--gold); outline-offset: -3px; }
.hero-cta { left: 34%; top: 79%; width: 34%; height: 9%; }
.benefits-cta { left: 35%; top: 89%; width: 32%; height: 9%; }
.services-cta { left: 59%; top: 91%; width: 37%; height: 8%; }
.selected-cta { left: 60%; top: 89%; width: 33%; height: 8%; }
.coverage-cta { left: 27%; top: 83%; width: 46%; height: 10%; }
.open-form { left: 49%; top: 49%; width: 31%; height: 13%; }
.about { max-width: 1700px; margin: auto; padding: clamp(32px,6vw,90px) clamp(20px,6vw,100px); display: flex; background: radial-gradient(circle at 82% 35%,#f5e5d7,transparent 48%),#fffaf4; border-block: 1px solid #e4cab0; gap: 40px; }
.about-inner { max-width: 900px; }
.eyebrow { color: var(--burgundy); font-weight: 800; letter-spacing: .16em; font-size: 14px; }
.about h2 { font-family: Georgia,serif; font-size: clamp(31px,4vw,64px); line-height: 1.05; margin: 18px 0; }
.about h2 em { color: var(--burgundy); font-style: normal; }
.about p:not(.eyebrow) { font-size: clamp(16px,1.3vw,21px); line-height: 1.55; }
.about-drawing { flex: 1; min-width: 100px; background: repeating-linear-gradient(24deg,transparent 0 35px,#be8c7250 36px 37px,transparent 38px 60px),repeating-linear-gradient(113deg,transparent 0 47px,#be8c7250 48px 49px,transparent 50px 78px); opacity: .4; clip-path: polygon(25% 0,100% 15%,90% 100%,0 85%); }
dialog { width: min(94vw,850px); max-height: 90vh; border: 3px solid var(--gold); padding: clamp(18px,3vw,34px); box-shadow: 0 30px 100px #0007; background: #fffaf6; color: var(--ink); }
dialog::backdrop { background: #180108b8; }
.dialog-close-form { display: flex; justify-content: flex-end; }
.close { background: transparent; border: 0; color: var(--burgundy); font-size: 36px; cursor: pointer; }
dialog h2 { color: var(--burgundy); font-family: Georgia,serif; font-size: clamp(26px,4vw,50px); margin: 8px 0; }
.dialog-intro { font-size: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin: 20px 0; }
.form-grid label { color: var(--burgundy); font-size: 14px; font-weight: 700; display: flex; flex-direction: column; gap: 6px; }
.form-grid .full { grid-column: 1/-1; }
input,select,textarea { font: inherit; font-weight: 400; padding: 12px; width: 100%; border: 1px solid #a9a5a5; border-radius: 4px; background: white; }
.primary-btn { border: 0; background: var(--burgundy); color: white; padding: 16px 26px; font-weight: 800; cursor: pointer; }
.form-notice { font-weight: 700; color: var(--burgundy); }
@media(max-width:820px) { .site-header{flex-direction: column;align-items: flex-start;} nav{justify-content: flex-start;} .form-grid{grid-template-columns:1fr;} .about-drawing{display:none;} }
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto;} }


/* ============================================================
   DARKER PREMIUM TREATMENT — STAGING, REVIEW BEFORE PRODUCTION
   Original visual references and portfolio photographs preserved.
============================================================ */
body { background: #211015; }
.review-banner { background: #37111c; color: #f3dba4; }
.site-header { background: linear-gradient(110deg, #290a12, #540d24 62%, #2a0e17); border-bottom: 2px solid #c99a42; }
.wordmark, .wordmark>span, nav a { color: #fff4eb; }
nav .contact-link { background: #8f1030; box-shadow: 0 4px 18px #0d020777; }
.art-section { background: #f7ede3; }
.art-section > img { filter: saturate(.95) contrast(1.05) brightness(.96); }
.about { color: #f8efe6; border-color: #8b573c; background: radial-gradient(circle at 85% 20%, #73354b99, transparent 49%), #34121f; }
.about h2 em, .about .eyebrow { color: #e1b966; }
.about-drawing { opacity: .5; filter: brightness(1.5); }
.website-honeypot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(100%) !important; }
@media (max-width: 650px) { .site-header { gap: 12px; } nav a { font-size: 11px; } }


/* ============================================================
   SELECTED WORK — INDIVIDUAL FULL-RESOLUTION ORIGINAL PHOTOS
   Three cards above, two larger cards below.
   No flattened screenshot and no AI photo replacements.
============================================================ */
.selected-work {
    max-width: 1700px;
    margin: 0 auto;
    padding: clamp(36px, 5vw, 80px) clamp(20px, 4.6vw, 78px);
    color: #292323;
    background: #f5ece1;
    position: relative;
    overflow: hidden;
}
.selected-work__intro {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
    gap: 20px;
    position: relative;
}
.selected-work__eyebrow {
    color: #720a24;
    font-size: clamp(12px, 1.2vw, 17px);
    font-weight: 800;
    letter-spacing: .13em;
}
.selected-work h2 {
    font-family: Georgia, serif;
    font-size: clamp(35px, 4.6vw, 70px);
    line-height: 1.02;
    margin: 15px 0 10px;
}
.selected-work h2 span { color: #790c28; }
.selected-work__description {
    max-width: 650px;
    font-size: clamp(15px, 1.35vw, 20px);
    line-height: 1.4;
    color: #38302f;
}
.selected-work__blueprint {
    height: 160px;
    opacity: .45;
    background:
        repeating-linear-gradient(90deg, transparent 0 31px, #aa8a6b60 32px, transparent 33px 54px),
        repeating-linear-gradient(0deg, transparent 0 21px, #aa8a6b70 22px, transparent 23px 47px);
    transform: skewY(-9deg);
    mask-image: linear-gradient(90deg, transparent, black 20%, black);
}
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(12px, 1.8vw, 26px);
    margin-top: 25px;
}
.portfolio-card {
    grid-column: span 2;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d6b789;
    border-radius: 7px;
    background: #fff9f1;
    box-shadow: 0 6px 12px #3b1b1025;
}
.portfolio-card:nth-child(n+4) { grid-column: span 3; }
.portfolio-photo {
    position: relative;
    aspect-ratio: 1.62;
    overflow: hidden;
}
.portfolio-card:nth-child(n+4) .portfolio-photo { aspect-ratio: 2.08; }
.portfolio-photo > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: none;
}
.portfolio-photo h3 {
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 90%;
    margin: 0;
    padding: 9px 23px 9px 14px;
    background: linear-gradient(110deg, #59071a, #860d2d);
    color: #fffaf4;
    font: bold clamp(15px, 1.6vw, 25px) Georgia, serif;
    clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
    border-left: 5px solid #d8a532;
}
.portfolio-card > p {
    margin: 0;
    padding: 9px 14px 12px;
    color: #342a27;
    font: italic clamp(14px, 1.3vw, 19px) Georgia, serif;
}
.selected-work__end {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
}
.selected-work__end p {
    font: italic clamp(16px, 1.6vw, 23px) Georgia, serif;
}
.portfolio-cta {
    display: inline-block;
    flex-shrink: 0;
    padding: 13px 26px;
    background: #760a25;
    color: #fff;
    border-bottom: 4px solid #d9a732;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: .06em;
}
.portfolio-cta span { color: #f0c15b; margin-left: 14px; }
@media (max-width: 800px) {
    .selected-work__intro { grid-template-columns: 1fr; }
    .selected-work__blueprint { display: none; }
    .portfolio-card { grid-column: span 3; }
    .portfolio-card:nth-child(n+4) { grid-column: span 3; }
    .selected-work__end { flex-wrap: wrap; }
}
@media (max-width: 540px) {
    .portfolio-card,
    .portfolio-card:nth-child(n+4) { grid-column: span 6; }
    .portfolio-photo,
    .portfolio-card:nth-child(n+4) .portfolio-photo { aspect-ratio: 1.8; }
    .portfolio-cta { width: 100%; text-align: center; }
}


/* ============================================================
   PORTFOLIO DISPLAY CORRECTION — V3
   Five individually loaded original JPGs, original crop preserved
   as much as possible at desktop sizes; click for full image.
   More pronounced burgundy/gold angled branded ribbons.
============================================================ */

.selected-work {
    background:
        linear-gradient(140deg, rgba(255, 248, 238, .94), rgba(240, 226, 209, .94)),
        repeating-linear-gradient(135deg, transparent 0 47px, #d6b48b 48px, transparent 49px 91px);
}

.portfolio-grid {
    column-gap: clamp(15px, 1.8vw, 26px);
    row-gap: clamp(18px, 2vw, 28px);
}

.portfolio-card {
    border: 1px solid #cbae7f;
    border-radius: 7px;
    overflow: hidden;
    background: #fffaf3;
}

.portfolio-photo {
    aspect-ratio: 1.72;
    overflow: hidden;
}

.portfolio-card:nth-child(n + 4) .portfolio-photo {
    aspect-ratio: 2.12;
}

.portfolio-image-link {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.portfolio-image-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    image-rendering: auto;
}

.portfolio-image-link:focus-visible {
    outline: 4px solid #cfa136;
    outline-offset: -4px;
}

.portfolio-photo h3 {
    pointer-events: none;
    width: max-content;
    min-width: 49%;
    max-width: 94%;
    padding: 10px 32px 10px 15px;
    background: linear-gradient(100deg, #560717, #8b102f);
    border-left: 5px solid #d1a045;
    clip-path: polygon(0 0, 100% 0, 93% 100%, 0 100%);
    z-index: 2;
}

.portfolio-card > p {
    border-top: 2px solid #d3aa61;
    min-height: 43px;
}

@media (hover:hover) {
    .portfolio-image-link img {
        transition: transform .25s ease;
    }
    .portfolio-image-link:hover img {
        transform: scale(1.025);
    }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-image-link img { transition: none; }
}


/* ============================================================
   FINAL STAGING ADJUSTMENTS — approved one-page layout preserved
   The hero-side diagonal burgundy-and-gold accent is repeated
   between page sections without replacing the supplied artwork.
============================================================ */

#home, #contractor-benefits, #services, #selected-work, #coverage, #about {
    border-bottom: 5px solid #790b28;
}
#home::after, #contractor-benefits::after, #services::after,
#selected-work::after, #coverage::after, #about::after {
    content: "";
    display: block;
    height: 6px;
    background: linear-gradient(100deg, #5b0719 0%, #8c0c2c 45%, #efb942 51%, #f7dc7b 55%, #9d0a2a 60%, #550719 100%);
    box-shadow: 0 3px 7px #29050a55;
}

/* Tactile raised calls to action */
.portfolio-cta, .primary-btn, nav .contact-link {
    background: linear-gradient(180deg, #a61c43 0%, #810822 53%, #590419 100%);
    color: #fff;
    border: 1px solid #e9b94f;
    border-bottom: 4px solid #a5751d;
    box-shadow: 0 5px 0 #3f0612, 0 9px 17px #13010666, inset 0 2px 1px #ffffff30;
    transition: box-shadow .15s ease, translate .15s ease;
}
.portfolio-cta:hover, .primary-btn:hover, nav .contact-link:hover {
    translate: 0 -2px;
    box-shadow: 0 7px 0 #3f0612, 0 13px 19px #13010666;
}
.portfolio-cta:focus-visible, .primary-btn:focus-visible, nav .contact-link:focus-visible {
    outline: 3px solid #edb93f;
    outline-offset: 5px;
}

/* Legacy footer artwork has social icons baked into pixels. Hide
   their region on this staging preview rather than adding links. */
.inquiry-art::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 31.5%;
    height: 5.8%;
    background: #690016;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-cta, .primary-btn, nav .contact-link { transition: none; }
}