/* OCF_AGENT_BLOCK: watson-polish */
/*
 * Watson Construction: visual polish layer (2026-09-30).
 * File name starts with the blueprint id ("lightning-") so functions.php loads it LAST,
 * after design-theme.css. Colors come from design tokens (--ocf-*); this file only adds
 * layout, depth and the "drafting line" signature. Delete this file to fully revert.
 */

:root {
    --wp-bronze: var(--ocf-primary);
    --wp-bronze-soft: #c9a27a;           /* bronze on dark backgrounds (7.5:1 on #1a1815) */
    --wp-ink: var(--ocf-heading);
    --wp-sand: var(--ocf-bg-alt);
    --wp-radius: 14px;
    --wp-radius-sm: 10px;
    --wp-ease: cubic-bezier(.2, .7, .2, 1);
    --wp-shadow: 0 1px 2px rgba(28, 26, 23, .06), 0 12px 32px -12px rgba(28, 26, 23, .18);
    --wp-shadow-lift: 0 2px 4px rgba(28, 26, 23, .06), 0 24px 48px -16px rgba(28, 26, 23, .28);
    --wp-grid: rgba(201, 162, 122, .07);
}

/* ---------- Type: tighter, calmer headings ---------- */
.heading-1, .heading-2, h1, h2 {
    letter-spacing: -0.022em;
    text-wrap: balance;
}
.heading-2 { line-height: 1.12; }
p { text-wrap: pretty; }
.eyebrow, .ocf-about__eyebrow, .ocf-service-areas__eyebrow, .ocf-cta__eyebrow {
    letter-spacing: .14em;
    font-size: .8125rem;
    font-weight: 600;
}

/* Signature, part 1: every section heading gets a drafted dimension rule
   (a bronze line with end ticks) that draws in when the heading appears. */
.ocf-services-heading .heading-2,
.ocf-about__headline,
.ocf-commitments-content .heading-2,
.ocf-service-areas__title,
.ocf-faq-header .heading-2 {
    position: relative;
    padding-bottom: 1.1rem;
}
.ocf-services-heading .heading-2::after,
.ocf-about__headline::after,
.ocf-commitments-content .heading-2::after,
.ocf-service-areas__title::after,
.ocf-faq-header .heading-2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 4.5rem;
    height: 9px;
    background:
        linear-gradient(currentColor, currentColor) left 4px / 100% 1.5px no-repeat,
        linear-gradient(currentColor, currentColor) left top / 1.5px 100% no-repeat,
        linear-gradient(currentColor, currentColor) right top / 1.5px 100% no-repeat;
    color: var(--wp-bronze);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .9s var(--wp-ease) .15s;
}
.visible .heading-2::after,
.visible.heading-2::after,
.visible .ocf-about__headline::after,
.ocf-service-areas__content.visible .ocf-service-areas__title::after,
.wp-drawn::after {
    transform: scaleX(1);
}
.ocf-commitments-content .heading-2::after { color: var(--wp-bronze-soft); }

/* ---------- Navigation ---------- */
.nav-bar {
    background: color-mix(in srgb, var(--ocf-bg) 86%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--ocf-border) 70%, transparent);
}
.nav-link { font-weight: 500; }
.nav-cta, .mobile-cta {
    border-radius: 999px;
    box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--wp-bronze) 80%, transparent);
    transition: transform .25s var(--wp-ease), box-shadow .25s var(--wp-ease), background-color .25s;
}
.nav-cta:hover { transform: translateY(-1px); }
.nav-phone { font-weight: 600; }

/* ---------- Buttons ---------- */
.btn-primary, .form-submit-btn {
    border-radius: 999px;
    box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--wp-bronze) 90%, transparent);
    transition: transform .25s var(--wp-ease), box-shadow .25s var(--wp-ease), background-color .25s;
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary svg { transition: transform .25s var(--wp-ease); }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-secondary { border-radius: 999px; }

/* ---------- Hero ---------- */
.ocf-hero { isolation: isolate; }
.ocf-hero__media img {
    transform: scale(1.06);
    animation: wp-hero-settle 2.4s var(--wp-ease) forwards;
    filter: saturate(.85) contrast(1.02);
}
@keyframes wp-hero-settle { to { transform: scale(1); } }
/* A directional warm scrim where the words sit, not a flat dark sheet. */
.ocf-hero .ocf-hero__shade {
    opacity: 1;
    background:
        linear-gradient(95deg, rgba(20, 17, 14, .92) 0%, rgba(20, 17, 14, .78) 38%, rgba(20, 17, 14, .35) 70%, rgba(20, 17, 14, .55) 100%),
        linear-gradient(0deg, rgba(20, 17, 14, .55) 0%, rgba(20, 17, 14, 0) 35%);
}
/* The local label the template hid ("General Contractor in Santa Fe, NM"). */
.ocf-hero .ocf-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.25rem;
    padding: .45rem .9rem .45rem .75rem;
    border: 1px solid rgba(201, 162, 122, .45);
    border-radius: 999px;
    background: rgba(20, 17, 14, .35);
    color: #efe3d3;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ocf-hero .ocf-hero__eyebrow::before {
    content: "";
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--wp-bronze-soft);
    box-shadow: 0 0 0 4px rgba(201, 162, 122, .18);
}
.ocf-hero__headline { max-width: 15ch; }
.ocf-hero__intro { color: rgba(243, 238, 231, .86); max-width: 54ch; }
.ocf-hero__checks { gap: .6rem; }
.ocf-hero__checks li { color: #f3eee7; font-weight: 500; }
.ocf-hero__check-icon { background: var(--wp-bronze) !important; }
.ocf-hero__scroll-cue { display: none; }

/* Quote card: warm paper with a bronze drafting edge. */
.hero-form-card {
    position: relative;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: var(--wp-radius);
    background: #fbf8f3;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .65), 0 0 0 8px rgba(251, 248, 243, .06);
    overflow: hidden;
}
.hero-form-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--wp-bronze), var(--wp-bronze-soft));
}
.hero-form-title {
    font-family: var(--ocf-font-heading), sans-serif;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
}
.hero-form-card input,
.hero-form-card textarea,
.ocf-simple-form input,
.ocf-simple-form textarea {
    border-radius: var(--wp-radius-sm);
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.hero-form-card input:focus,
.hero-form-card textarea:focus,
.ocf-simple-form input:focus,
.ocf-simple-form textarea:focus {
    border-color: var(--wp-bronze);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp-bronze) 18%, transparent);
    outline: none;
}

/* ---------- Services: show all five at once ---------- */
.ocf-services { background: var(--ocf-bg); }
.ocf-services-eyebrow svg, .ocf-eyebrow-link svg { display: none; }
.ocf-services .ocf-svc-nav { display: none; }
.ocf-services .ocf-svc-viewport { overflow: visible; }
.ocf-services .ocf-svc-track {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.25rem;
    transform: none !important;
}
.ocf-services .ocf-svc-track .ocf-svc-card { grid-column: span 2; flex: none; }
.ocf-services .ocf-svc-track .ocf-svc-card:nth-child(-n+2) { grid-column: span 3; }
.ocf-services .ocf-svc-track .ocf-svc-card:nth-child(-n+2) .ocf-svc-card-img { aspect-ratio: 16 / 7.4; }
.ocf-svc-card {
    border: 1px solid var(--ocf-border-light);
    border-radius: var(--wp-radius);
    background: #fff;
    box-shadow: var(--wp-shadow);
    transition: transform .35s var(--wp-ease), box-shadow .35s var(--wp-ease), border-color .35s;
}
.ocf-svc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--wp-shadow-lift);
    border-color: color-mix(in srgb, var(--wp-bronze) 35%, var(--ocf-border-light));
}
.ocf-svc-card-img { position: relative; }
.ocf-svc-card-img img { transition: transform .8s var(--wp-ease); }
.ocf-svc-card:hover .ocf-svc-card-img img { transform: scale(1.045); }
.ocf-svc-card-body h3 { letter-spacing: -0.01em; }
.ocf-svc-card-cta {
    letter-spacing: .06em;
    font-size: .8125rem;
}
.ocf-svc-card-cta svg { transition: transform .25s var(--wp-ease); }
.ocf-svc-card:hover .ocf-svc-card-cta svg { transform: translateX(4px); }

/* ---------- About: drafted photo frame on sand ---------- */
.ocf-about { background: var(--wp-sand); }
.ocf-about .ocf-about__media { position: relative; overflow: visible; }
.ocf-about__media::before {
    content: "";
    position: absolute;
    inset: 1.25rem -1.25rem -1.25rem 1.25rem;
    border: 1.5px solid color-mix(in srgb, var(--wp-bronze) 55%, transparent);
    border-radius: var(--wp-radius);
    z-index: 0;
}
.ocf-about__media img {
    position: relative;
    z-index: 1;
    border-radius: var(--wp-radius);
    box-shadow: var(--wp-shadow-lift);
}
.ocf-about__body li::before { background: var(--wp-bronze); }

/* ---------- How we work: dark blueprint + the drafting line (peak) ---------- */
.ocf-commitments {
    position: relative;
    background-color: var(--ocf-bg-dark);
    background-image:
        linear-gradient(var(--wp-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--wp-grid) 1px, transparent 1px),
        linear-gradient(rgba(201, 162, 122, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 162, 122, .035) 1px, transparent 1px);
    background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
    color: var(--ocf-dark-body);
}
.ocf-commitments .heading-2,
.ocf-commitments h3 { color: var(--ocf-dark-heading); }
.ocf-commitments .eyebrow { color: var(--wp-bronze-soft); }
.ocf-commitments .ocf-commitments-description,
.ocf-commitments .ocf-commitment p { color: rgba(239, 233, 225, .78); }
.ocf-commitments .ocf-commitment + .ocf-commitment { border-top-color: rgba(239, 233, 225, .1); }
.ocf-commitments .ocf-commitment:not(:last-child)::after { background: rgba(239, 233, 225, .1); }

/* The line between steps is a faint track; the bronze part draws with scroll (--wp-draw 0..1, set by JS). */
.ocf-commitments .ocf-commitment:not(:last-child)::before {
    background: linear-gradient(var(--wp-bronze-soft), var(--wp-bronze-soft)) top / 100% calc(var(--wp-draw, 1) * 100%) no-repeat,
                rgba(239, 233, 225, .14);
}
.ocf-commitment-num {
    background: transparent;
    border: 1.5px solid rgba(201, 162, 122, .55);
    color: var(--wp-bronze-soft);
    font-family: var(--ocf-font-heading), sans-serif;
    font-size: 1rem;
    letter-spacing: .02em;
    transition: background-color .5s var(--wp-ease), color .5s var(--wp-ease), border-color .5s;
}
.ocf-commitment.wp-reached .ocf-commitment-num,
html:not(.wp-js) .ocf-commitment-num {
    background: var(--wp-bronze-soft);
    border-color: var(--wp-bronze-soft);
    color: #1a1815;
}
.ocf-commitments-image, .ocf-commitments-image img {
    border-radius: var(--wp-radius);
}
.ocf-commitments-image {
    position: relative;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7);
}
/* Architect's corner marks on the photo (on the wrapper: the image box crops its children). */
.ocf-commitments-image-wrap { position: relative; }
.ocf-commitments-image-wrap::before,
.ocf-commitments-image-wrap::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: var(--wp-bronze-soft);
    border-style: solid;
    z-index: 2;
    pointer-events: none;
}
.ocf-commitments-image-wrap::before { top: -12px; left: -12px; border-width: 1.5px 0 0 1.5px; }
.ocf-commitments-image-wrap::after { bottom: -12px; right: -12px; border-width: 0 1.5px 1.5px 0; }

/* ---------- Service areas ---------- */
.ocf-service-areas { background: var(--ocf-bg); }
.ocf-service-areas__map {
    border-radius: var(--wp-radius);
    overflow: hidden;
    box-shadow: var(--wp-shadow);
    border: 1px solid var(--ocf-border-light);
}
.ocf-service-areas__map iframe { filter: grayscale(.55) sepia(.18) contrast(1.02); }
.ocf-service-areas .ocf-service-areas__links { gap: .6rem; margin-bottom: 1.5rem; }
.ocf-service-areas .ocf-service-areas__links .ocf-service-areas__link {
    padding: .7rem .95rem;
    border: 1px solid var(--ocf-border-light);
    border-radius: var(--wp-radius-sm);
    background: #fff;
    transition: border-color .25s, transform .25s var(--wp-ease), box-shadow .25s;
}
.ocf-service-areas .ocf-service-areas__links .ocf-service-areas__link:hover {
    border-color: var(--wp-bronze);
    transform: translateY(-2px);
    box-shadow: var(--wp-shadow);
}
.ocf-service-areas .ocf-service-areas__link svg { color: var(--wp-bronze); }
.ocf-service-areas .btn-secondary:hover { border-color: var(--wp-bronze); color: var(--wp-bronze); }

/* ---------- FAQ ---------- */
.ocf-faq { background: var(--wp-sand); }
.ocf-faq-columns { gap: .9rem 1.25rem; }
.ocf-faq-column { display: grid; gap: .9rem; align-content: start; }
.ocf-faq-item {
    border: 1px solid var(--ocf-border-light) !important;
    border-radius: var(--wp-radius-sm);
    background: #fff;
    padding-inline: 1.25rem;
    transition: box-shadow .25s, border-color .25s;
}
.ocf-faq-item:hover { box-shadow: var(--wp-shadow); }
.ocf-faq-trigger { font-weight: 600; }
.ocf-faq-trigger svg { color: var(--wp-bronze); transition: transform .3s var(--wp-ease); }

/* ---------- Closing call to action ---------- */
.ocf-cta .ocf-cta__shade {
    opacity: 1;
    background: linear-gradient(100deg, rgba(20, 17, 14, .95) 0%, rgba(20, 17, 14, .85) 45%, rgba(20, 17, 14, .45) 100%);
}
.ocf-cta__eyebrow { color: var(--wp-bronze-soft) !important; }
.ocf-cta__phone-text { font-size: 1.05rem; }
.ocf-cta__phone-text strong, .ocf-cta__phone-text b { font-size: 1.35rem; letter-spacing: -0.01em; }

/* ---------- Footer ---------- */
.site-footer { background: var(--wp-sand); border-top: 1px solid var(--ocf-border-light); }
.site-footer p { font-size: 1rem; line-height: 1.65; color: color-mix(in srgb, var(--ocf-body) 85%, transparent); }
.site-footer a { transition: color .2s; }
.site-footer a:hover { color: var(--wp-bronze); }

/* ---------- Inner pages ---------- */
.ocf-page-header__headline { letter-spacing: -0.025em; }
/* The page-title rule becomes the same bronze drafted dimension line. */
.ocf-page-header__divider, .ocf-page-header .ocf-page-header__divider {
    width: 5.5rem;
    height: 9px;
    border: 0;
    background:
        linear-gradient(var(--wp-bronze-soft), var(--wp-bronze-soft)) left 4px / 100% 1.5px no-repeat,
        linear-gradient(var(--wp-bronze-soft), var(--wp-bronze-soft)) left top / 1.5px 100% no-repeat,
        linear-gradient(var(--wp-bronze-soft), var(--wp-bronze-soft)) right top / 1.5px 100% no-repeat;
    opacity: 1;
}
.ocf-page-header__breadcrumb { letter-spacing: .1em; font-size: .8125rem; }
.ocf-page-header__breadcrumb a:hover { color: var(--wp-bronze-soft); }
.ocf-detail-content .prose h2,
.ocf-detail-content .prose h3 {
    font-family: var(--ocf-font-heading), sans-serif;
    color: var(--ocf-heading);
    letter-spacing: -0.015em;
}
.ocf-detail-content .prose hr { border: 0; height: 1px; background: var(--ocf-border); }
.ocf-detail-content .prose ul li::marker,
.ocf-detail-content .prose ol li::marker { color: var(--wp-bronze); font-weight: 700; }
.detail-page aside > div,
.ocf-detail-sidebar,
.ocf-detail__sidebar {
    border-radius: var(--wp-radius);
}

/* ---------- Phones ---------- */
@media (max-width: 1023px) {
    .ocf-services .ocf-svc-track { grid-template-columns: 1fr 1fr; }
    .ocf-services .ocf-svc-track .ocf-svc-card,
    .ocf-services .ocf-svc-track .ocf-svc-card:nth-child(-n+2) { grid-column: span 1; }
    .ocf-services .ocf-svc-track .ocf-svc-card:first-child { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
    .ocf-services .ocf-svc-track { grid-template-columns: 1fr; gap: .9rem; }
    /* Compact row cards so five services do not become five screens. */
    .ocf-services .ocf-svc-track .ocf-svc-card:not(:first-child) {
        flex-direction: row;
        align-items: stretch;
    }
    .ocf-services .ocf-svc-track .ocf-svc-card:not(:first-child) .ocf-svc-card-img {
        flex: 0 0 34%;
        aspect-ratio: auto;
        min-height: 100%;
    }
    .ocf-services .ocf-svc-track .ocf-svc-card:not(:first-child) .ocf-svc-card-body { padding: 1rem 1rem 1.1rem; }
    .ocf-services .ocf-svc-track .ocf-svc-card:not(:first-child) .ocf-svc-card-body p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: .95rem;
    }
    .ocf-about__media::before { inset: .75rem -.6rem -.75rem .75rem; }
    .ocf-hero .ocf-hero__eyebrow { font-size: .72rem; }
    .ocf-commitments { background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .ocf-hero__media img { animation: none; transform: none; }
    .ocf-services-heading .heading-2::after,
    .ocf-about__headline::after,
    .ocf-commitments-content .heading-2::after,
    .ocf-service-areas__title::after,
    .ocf-faq-header .heading-2::after { transform: scaleX(1); transition: none; }
    .ocf-svc-card, .ocf-svc-card-img img, .btn-primary { transition: none; }
}

/* ---------- Logo (John's original red badge, a JPG with a white background) ---------- */
/* multiply drops the white box onto the cream header and footer; the red and white badge stays exact. */
.nav-logo .nav-logo-img,
.footer-logo-img { mix-blend-mode: multiply; }
.site-footer .footer-logo-img { width: min(100%, 10.5rem); }
/* /OCF_AGENT_BLOCK: watson-polish */