:root {
    --navy: #1b3a5c;
    --navy-dark: #122a44;
    --charcoal: #2f3640;
    --orange: #c1592e;
    --orange-dark: #a1461f;
    --off-white: #f7f8fa;
    --white: #ffffff;
    --text: #22262b;
    --gray: #5b6570;
    --border: #e3e6ea;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--off-white);
    color: var(--text);
}

html {
    scroll-behavior: smooth;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

h1, h2, h3 {
    font-family: inherit;
    color: var(--navy-dark);
    line-height: 1.2;
}

/* ---------- Header / Nav ---------- */

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.nav-home {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.nav-logo {
    width: 180px;
    height: auto;
    display: block;
}

.nav-logo-icon {
    width: 88px;
    height: auto;
    display: block;
}

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1100;
}

.hamburger span {
    display: block;
    height: 3px;
    width: 100%;
    background: var(--navy-dark);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.hamburger.active span:nth-child(1) {
    transform: translateY(0.531rem) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
}

.nav-items {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-item a {
    display: inline-block;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--navy-dark);
    border-radius: 6px;
    white-space: nowrap;
}

.nav-item a:hover {
    background: var(--off-white);
}

.nav-item a.is-current {
    color: var(--orange);
}

.nav-item a.is-button {
    background: var(--orange);
    color: var(--white);
    padding: 10px 18px;
}

.nav-item a.is-button:hover {
    background: var(--orange-dark);
}

/* Just above the width the full nav needs on one line (~1346px); revisit when nav items change. */
@media (max-width: 1380px) {
    .hamburger {
        display: flex;
    }

    .nav-items {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: min(280px, 80vw);
        background: var(--white);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 4px;
        padding: 90px 20px 20px;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
    }

    .nav-items.active {
        transform: translateX(0);
    }

    .nav-item a {
        display: block;
        text-align: left;
    }

    .nav-item a.is-button {
        text-align: center;
        margin-top: 8px;
    }
}

/* ---------- Buttons ---------- */

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.is-button {
    display: inline-block;
    background: var(--orange);
    color: var(--white);
    font-weight: 700;
    padding: 14px 26px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.is-button:hover {
    background: var(--orange-dark);
}

.secondary-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 8px;
    border: 2px solid var(--navy);
    color: var(--navy-dark);
    font-weight: 700;
}

.secondary-button:hover {
    background: var(--navy);
    color: var(--white);
}

/* ---------- Hero ---------- */

.hero {
    background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 60%, var(--charcoal) 100%);
    color: var(--white);
    padding: 88px 24px;
    text-align: center;
}

.hero .eyebrow,
.page-hero .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--orange);
    font-size: 0.85rem;
    margin-bottom: 14px;
}

.hero h1 {
    color: var(--white);
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    margin: 0 0 18px;
}

.hero p {
    max-width: 640px;
    margin: 0 auto 32px;
    font-size: 1.15rem;
    color: #dfe6ee;
}

.hero .button-row {
    justify-content: center;
}

.hero .secondary-button {
    border-color: var(--white);
    color: var(--white);
}

.hero .secondary-button:hover {
    background: var(--white);
    color: var(--navy-dark);
}

/* Lower-key grey button for a fallback action, like calling, under the main ones. */
.hero .secondary-button.is-muted {
    background: var(--gray);
    border-color: var(--gray);
    color: var(--white);
}

.hero .secondary-button.is-muted:hover {
    background: var(--charcoal);
    border-color: var(--charcoal);
}

.page-hero {
    background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
    color: var(--white);
    padding: 64px 24px;
    text-align: center;
}

.page-hero h1 {
    color: var(--white);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin: 0 0 12px;
    text-wrap: balance;
}

.page-hero p {
    max-width: 620px;
    margin: 0 auto;
    color: #dfe6ee;
    font-size: 1.05rem;
}

/* ---------- Sections ---------- */

.section {
    padding: 72px 24px;
    scroll-margin-top: 113px;
}

.banner-section {
    padding: 52px 24px;
    scroll-margin-top: 113px;
}

.section-inner {
    max-width: 1180px;
    margin: 0 auto;
}

.section-heading {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 44px;
}

.section-heading h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin-bottom: 12px;
}

.section-heading p {
    color: var(--gray);
    font-size: 1.05rem;
}

.section-alt {
    background: var(--white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding-top: 4rem;
}

/* ---------- Trust bar ---------- */

.trust-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    max-width: 1180px;
    margin: -40px auto 0;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

.trust-item {
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(18, 42, 68, 0.12);
    padding: 22px 18px;
    text-align: center;
    font-weight: 700;
    color: var(--navy-dark);
    font-size: 0.95rem;
}

.trust-item span {
    display: block;
    font-size: 1.7rem;
    margin-bottom: 8px;
    color: var(--orange);
}

/* Inline Font Awesome SVGs: sized by the parent font-size, colored by currentColor */
.fa-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
    padding: 1px;
}

/* ---------- Service cards ---------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.service-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card.is-clickable {
    cursor: pointer;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(18, 42, 68, 0.1);
}

.service-icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--off-white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange);
    font-size: 1.5rem;
}

.service-card h3 {
    margin: 0;
    font-size: 1.2rem;
}

.service-card p {
    color: var(--gray);
    margin: 0;
    flex-grow: 1;
}

.service-card a {
    font-weight: 700;
    color: var(--orange);
}

/* ---------- Detailed service blocks ---------- */

.service-detail {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 20px;
    padding: 32px 0;
    border-bottom: 1px solid var(--border);
    scroll-margin-top: 113px;
}

.service-detail:last-child {
    border-bottom: none;
}

.service-detail .service-icon {
    width: 64px;
    height: auto;
    margin-top: .5rem;
    font-size: 1.8rem;
}

.service-detail h2 {
    margin: 0 0 10px;
    font-size: 1.5rem;
}

.service-detail p {
    color: var(--gray);
    margin: 0 0 10px;
    max-width: 760px;
}

.service-detail ul {
    color: var(--gray);
    margin: 10px 0 0;
    padding-left: 20px;
}

.service-detail ul li {
    margin-bottom: 6px;
}

.service-detail ul a {
    color: var(--orange);
    font-weight: 600;
}

.service-detail ul a:hover {
    color: var(--orange-dark);
}

/* Service block with a photo in a third column */
.service-detail.has-image {
    grid-template-columns: 64px 1fr 280px;
    gap: 16px;
    align-items: start;
}

.service-detail-photo {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 16px 30px rgba(18, 42, 68, 0.1);
    align-self: center;
}

@media (max-width: 860px) {
    .service-detail.has-image {
        grid-template-columns: 64px 1fr;
    }

    .service-detail.has-image .service-detail-photo {
        grid-column: 2;
        max-width: 360px;
    }
}

@media (max-width: 620px) {
    .service-detail,
    .service-detail.has-image {
        grid-template-columns: 1fr;
    }

    .service-detail.has-image .service-detail-photo {
        grid-column: auto;
    }
}

/* ---------- Service areas ---------- */

.service-area-map {
    width: 100%;
    max-width: 760px;
    height: auto;
    margin: 0 auto;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 16px 30px rgba(18, 42, 68, 0.1);
}

/* ---------- About / mission ---------- */

.about-content {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1.05rem;
    color: var(--text);
}

.about-content p {
    margin-bottom: 18px;
}

.tagline {
    text-align: center;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--navy-dark);
    margin-top: 36px;
}

.tagline .accent {
    color: var(--orange);
}

.team-list {
    display: grid;
    gap: 32px;
    max-width: 960px;
    margin: 0 auto;
}

.team-member {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 36px;
    align-items: center;
    background: var(--off-white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px;
}

.team-photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    height: auto;
    object-fit: cover;
    object-position: top;
    border-radius: 12px;
    box-shadow: 0 16px 30px rgba(18, 42, 68, 0.1);
}

.team-bio h3 {
    font-size: 1.4rem;
    margin: 0 0 14px;
}

.team-role {
    color: var(--orange);
    font-weight: 600;
}

.team-bio p {
    color: var(--gray);
    line-height: 1.6;
    margin: 0 0 14px;
}

.team-bio p:last-child {
    margin-bottom: 0;
}

@media (max-width: 720px) {
    .team-member {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px;
    }

    .team-photo {
        max-width: 280px;
        margin: 0 auto;
    }

    .team-bio h3 {
        text-align: center;
    }
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

.process-step {
    text-align: center;
}

.process-step .step-number {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin: 0 auto 14px;
}

.process-step h3 {
    font-size: 1.05rem;
    margin: 0 0 8px;
}

.process-step p {
    color: var(--gray);
    font-size: 0.95rem;
    margin: 0;
}

/* ---------- Google reviews ---------- */

.reviews-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
}

.reviews-summary a {
    color: var(--navy);
    text-decoration: underline;
}

.stars {
    color: var(--orange);
    letter-spacing: 2px;
}

.reviews-summary .stars {
    font-size: 1.3rem;
}

/* One row of cards that scrolls sideways (trackpad, touch, shift+wheel, or
   dragging, which script.js adds). Cards are sized so the next one peeks in
   from the edge, hinting that there's more to scroll to. */
.reviews-scroller {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

/* Centers the cards when they all fit; unlike justify-content: center, this
   doesn't cut off the first card when they overflow */
.reviews-scroller > :first-child {
    margin-left: auto;
}

.reviews-scroller > :last-child {
    margin-right: auto;
}

.reviews-scroller:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 4px;
    border-radius: 12px;
}

.reviews-scroller.is-draggable {
    cursor: grab;
}

.reviews-scroller.is-dragging {
    cursor: grabbing;
}

/* No text selection, so dragging the row sideways doesn't highlight text */
.review-card {
    flex: 0 0 calc((100% - 3 * 24px) / 3.3);
    -webkit-user-select: none;
    user-select: none;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.review-text {
    margin: 0;
    color: var(--text);
    line-height: 1.6;
    white-space: pre-line;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    line-clamp: 7;
    overflow: hidden;
}

.review-card.is-expanded .review-text {
    display: block;
}

.review-more {
    align-self: flex-start;
    padding: 0;
    border: none;
    background: none;
    color: var(--navy);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.review-more:hover {
    text-decoration: underline;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.review-author-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.review-author-name {
    display: block;
    font-weight: 700;
    color: var(--navy-dark);
}

.review-time {
    font-size: 0.85rem;
    color: var(--gray);
}

.review-author a:hover {
    text-decoration: underline;
}

@media (max-width: 860px) {
    .review-card {
        flex-basis: calc((100% - 2 * 24px) / 2.3);
    }
}

@media (max-width: 560px) {
    .review-card {
        flex-basis: calc((100% - 24px) / 1.15);
    }
}

.reviews-actions {
    justify-content: center;
    margin-top: 28px;
}

.reviews-attribution {
    text-align: center;
    margin: 20px 0 0;
    font-size: 0.85rem;
    color: var(--gray);
}

/* ---------- CTA banner ---------- */

.cta-section {
    background: var(--charcoal);
    color: var(--white);
    text-align: center;
    padding: 72px 24px;
}

.cta-section h2 {
    color: var(--white);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin-bottom: 14px;
}

.cta-section p {
    color: #d7dbe0;
    max-width: 560px;
    margin: 0 auto 30px;
}

.cta-section .button-row {
    justify-content: center;
}

.cta-section .secondary-button {
    border-color: var(--white);
    color: var(--white);
}

.cta-section .secondary-button:hover {
    background: var(--white);
    color: var(--charcoal);
}

/* ---------- Photo backgrounds ---------- */

/* Add .has-photo plus one .photo-* class to a section. A tinted overlay
   (--photo-tint) sits on top of the photo so it reads as texture, not content. */

.photo-attic {
    --photo: url("images/backgrounds/attic-insulation.jpg");
    --photo-position: center 60%;
}

.photo-nailing {
    --photo: url("images/backgrounds/roof-nailer.jpg");
    --photo-position: center 30%;
}

.photo-tearoff {
    --photo: url("images/backgrounds/roof-installation.jpg");
    --photo-position: center 60%;
}

.photo-inspection {
    --photo: url("images/backgrounds/roof-inspection.jpg");
    --photo-position: center 40%;
}

.photo-install {
    --photo: url("images/backgrounds/roof-nailers.jpg");
    --photo-position: center 45%;
}

.has-photo {
    --photo-tint: linear-gradient(rgba(18, 42, 68, 0.88), rgba(18, 42, 68, 0.88));
    background-color: var(--navy-dark);
    background-image: var(--photo-tint), var(--photo);
    background-size: cover;
    background-position: var(--photo-position, center);
    background-repeat: no-repeat;
}

.hero.has-photo {
    --photo-tint: linear-gradient(135deg, rgba(18, 42, 68, 0.92) 0%, rgba(27, 58, 92, 0.8) 60%, rgba(47, 54, 64, 0.88) 100%);
}

.page-hero.has-photo {
    --photo-tint: linear-gradient(135deg, rgba(18, 42, 68, 0.92) 0%, rgba(27, 58, 92, 0.82) 50%);
}

.cta-section.has-photo {
    --photo-tint: linear-gradient(rgba(47, 54, 64, 0.9), rgba(47, 54, 64, 0.9));
    background-color: var(--charcoal);
}

/* Dark photo band for a regular .section */
.section-photo {
    color: var(--white);
}

.section-photo .section-heading h2 {
    color: var(--white);
}

.section-photo .section-heading p {
    color: #dfe6ee;
}

.section-photo .secondary-button {
    border-color: var(--white);
    color: var(--white);
}

.section-photo .secondary-button:hover {
    background: var(--white);
    color: var(--navy-dark);
}

/* Light, washed-out photo for a regular .section; keeps its dark text */
.section-photo-light.has-photo {
    --photo-tint: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92));
    background-color: var(--white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* ---------- Contact page ---------- */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 860px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

.contact-info h2 {
    margin-top: 0;
}

.contact-info-list {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-info-list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.contact-info-list .icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--off-white);
    color: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
}

.contact-info-list strong {
    display: block;
    color: var(--navy-dark);
}

.contact-info-list a {
    color: var(--gray);
}

.contact-info-list a:hover {
    text-decoration: underline;
}

.estimate-form-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 4px solid var(--orange);
    border-radius: 12px;
    padding: 28px;
}

.estimate-form-body > h2 {
    margin-top: 0;
    margin-bottom: 6px;
}

.estimate-form-body > p {
    margin-top: 0;
    color: var(--gray);
}

.estimate-form {
    margin-top: 24px;
}

.form-group {
    border: none;
    margin: 0 0 24px;
    padding: 0 0 24px;
    border-bottom: 1px solid var(--border);
    min-width: 0;
}

.form-group legend {
    padding: 0;
    margin-bottom: 14px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--navy);
}

.form-hint {
    margin: -6px 0 14px;
    font-size: 0.9rem;
    color: var(--gray);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.form-row-address {
    grid-template-columns: 2fr 1fr 1.2fr;
}

@media (max-width: 560px) {
    .form-row,
    .form-row-address {
        grid-template-columns: 1fr;
    }
}

.form-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
    min-width: 0;
}

.form-field label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 6px;
}

.required {
    color: var(--orange);
}

.optional {
    font-weight: 400;
    color: var(--gray);
    text-transform: none;
    letter-spacing: normal;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    color: var(--text);
    background: var(--off-white);
    border: .09rem solid var(--border);
    border-radius: 8px;
    padding: 11px 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    scroll-margin-top: 130px;
}

.form-field select {
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b6570' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}

.form-field textarea {
    resize: vertical;
    min-height: 110px;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #9aa3ad;
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
    border-color: #c9ced4;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    background: var(--white);
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.15);
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
    border-color: #c0392b;
    background: #fdf5f4;
}

.field-error {
    margin-top: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #c0392b;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.choice {
    position: relative;
    cursor: pointer;
}

.choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    scroll-margin-top: 130px;
}

.choice span {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 3.9rem;
    padding: 12px 14px;
    border: .09rem solid var(--border);
    border-radius: 8px;
    background: var(--off-white);
    font-weight: 600;
    color: var(--charcoal);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.choice span::before {
    content: '';
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 2px solid #b6bec7;
    border-radius: 50%;
    background: var(--white);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.choice:hover span {
    border-color: #c9ced4;
}

.choice input:checked + span {
    border-color: var(--orange);
    background: #fdf3ee;
    color: var(--navy-dark);
}

.choice input:checked + span::before {
    border-color: var(--orange);
    box-shadow: inset 0 0 0 3px var(--white);
    background: var(--orange);
}

.choice input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.15);
    border-color: var(--navy);
}

.choice-grid .field-error {
    grid-column: 1 / -1;
    margin-top: 0;
}

.choice-grid.has-error .choice span {
    border-color: #e4a79f;
}

.form-consent {
    margin-bottom: 16px;
}

.consent-choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--gray);
    cursor: pointer;
}

.consent-choice input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--orange);
    cursor: pointer;
    scroll-margin-top: 130px;
}

.consent-choice a {
    color: var(--navy);
    font-weight: 600;
    text-decoration: underline;
}

.form-consent.has-error input {
    outline: 2px solid #c0392b;
    outline-offset: 1px;
}

.form-consent .field-error {
    margin: 4px 0 0 30px;
}

.form-honeypot {
    position: absolute;
    left: -9999px;
}

.form-status {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #fdf5f4;
    color: #c0392b;
    font-weight: 600;
}

.estimate-submit {
    width: 100%;
    font-size: 1.05rem;
    padding: 16px 26px;
}

.estimate-submit:disabled {
    opacity: 0.7;
    cursor: wait;
}

.estimate-form-success {
    text-align: center;
    padding: 40px 12px;
}

.estimate-form-success:focus {
    outline: none;
}

.estimate-form-success p {
    color: var(--gray);
    max-width: 420px;
    margin: 0 auto 24px;
}

.success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: #fdf3ee;
    color: var(--orange);
    font-size: 2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Footer ---------- */

.footer {
    background: var(--white);
    color: var(--gray);
    border-top: 1px solid var(--border);
    padding: 48px 24px 28px;
}

.footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 32px;
}

@media (max-width: 720px) {
    .footer-inner {
        grid-template-columns: 1fr;
    }
}

.footer-logo {
    width: 170px;
    margin-bottom: 14px;
}

.footer p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.footer h4 {
    color: var(--navy-dark);
    margin: 0 0 14px;
    font-size: 1rem;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links a:hover {
    color: var(--orange);
    text-decoration: underline;
}

.footer-bottom {
    max-width: 1180px;
    margin: 36px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--gray);
    text-align: center;
}

.footer-legal {
    display: block;
    margin-top: 8px;
}

.footer-legal a:hover {
    color: var(--orange);
    text-decoration: underline;
}

/* ---------- Legal pages ---------- */

.legal {
    max-width: 780px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 40px 44px;
    line-height: 1.7;
    overflow-wrap: break-word;
}

@media (max-width: 560px) {
    .legal {
        padding: 28px 22px;
    }
}

.legal h2 {
    font-size: 1.25rem;
    margin: 32px 0 10px;
}

.legal p {
    margin: 0 0 14px;
}

.legal p:last-child {
    margin-bottom: 0;
}

.legal a {
    color: var(--navy);
    font-weight: 600;
    text-decoration: underline;
}

/* ---------- Back to top ---------- */

.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--orange);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    z-index: 900;
}

.back-to-top.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* ---------- Financing (Hearth) ---------- */

.financing-banner {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 16px auto 0;
}

.financing-banner {
    cursor: pointer;
}

/* The banners are pictures of text, so Safari's Live Text shows a text cursor over
   them and lets the words be selected. Letting the link take the hover instead
   keeps the whole banner behaving like one button. */
.financing-banner img {
    width: 700px;
    height: auto;
    pointer-events: none;
}

/* The tall banner sits in the empty gutter to the right of the page content. The left
   gutter matches it so the content stays centered where it was. Below this width the
   gutter is too narrow for it, so it's hidden and the wide banner under the content
   carries the offer alone. */
.section-aside {
    display: none;
}

@media (min-width: 1400px) {
    .section.has-aside {
        display: grid;
        grid-template-columns: 1fr minmax(0, 900px) 1fr;
    }

    .section.has-aside > * {
        grid-column: 2;
    }

    .section.has-aside > .section-aside {
        display: block;
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: start;
        justify-self: center;
        position: sticky;
        top: 130px;
        width: min(210px, 100% - 48px);
    }

    .section-aside .financing-banner {
        width: auto;
        margin: 0;
    }

    .section-aside .financing-banner img {
        width: 100%;
    }
}

/* The calculator fills the empty space under the contact info, beside the taller
   estimate form. In one column it falls after the form so the form stays up top. */
.contact-grid.has-calculator {
    grid-template-rows: auto 1fr;
}

.contact-grid.has-calculator .estimate-form-card {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.contact-grid.has-calculator .financing-calculator {
    grid-column: 1;
}

/* Hearth's script sizes the iframe at 450x900, but its content is a fixed 320x771. */
.financing-calculator iframe {
    display: block;
    width: 320px;
    max-width: 100%;
    height: 771px;
    border: 0;
}

@media (max-width: 860px) {
    .contact-grid.has-calculator {
        grid-template-rows: none;
    }

    .contact-grid.has-calculator .estimate-form-card,
    .contact-grid.has-calculator .financing-calculator {
        grid-column: auto;
        grid-row: auto;
    }

    .contact-grid.has-calculator .financing-calculator {
        justify-self: center;
    }
}

/* Financing page: copy beside the calculator, stacking on narrow screens. */
.financing-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 56px;
    align-items: start;
    margin-bottom: 40px;
}

.financing-info h2 {
    margin-top: 0;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.financing-info > p {
    color: var(--gray);
    font-size: 1.05rem;
    max-width: 640px;
}

.financing-info h3 {
    margin: 32px 0 16px;
    font-size: 1.2rem;
}

.financing-steps {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    gap: 20px;
}

.financing-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.financing-step .step-number {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.financing-step h4 {
    margin: 0 0 4px;
    font-size: 1.05rem;
    color: var(--navy-dark);
}

.financing-step p {
    margin: 0;
    color: var(--gray);
}

.financing-info .financing-note {
    margin-top: 24px;
    font-size: 0.85rem;
    color: var(--gray);
}

@media (max-width: 860px) {
    .financing-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .financing-grid .financing-calculator {
        justify-self: center;
    }
}