/* ==========================================================================
   BEAVERBUILD - SINGLE PROJECT
   Loaded only on is_singular('project').

   Every selector is prefixed with .pj-page for two reasons: it keeps these
   rules away from the Elementor HFE header and footer, and it guarantees at
   least (0,2,0) specificity. That matters because the Elementor global kit
   styles bare elements:

     .elementor-kit-6 button, ... { background-color: <yellow>;
       border-radius: 50px; padding: 12px 42px 12px 15px;
       text-transform: uppercase; }

   That selector is (0,1,1), so an unprefixed .pj-tile at (0,1,0) loses and the
   gallery tiles render as giant yellow pills. Do not remove the .pj-page
   prefixes.

   Design system:
     primary   #4E1F0D   secondary #FBC616   ink #0A1A2C
     Poppins, headings 600 / 120%, body 400 / 195%
     container 1330px, 15px gutters, radius 25px
   ========================================================================== */

.pj-page {
    --bb-primary: #4E1F0D;
    --bb-secondary: #FBC616;
    --bb-ink: #0A1A2C;
    --bb-body: #555;
    --bb-line: #E7E4DF;
    --bb-cream: #F7F5F2;
    --bb-white: #fff;
    --bb-container: 1330px;

    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 195%;
    color: var(--bb-body);
    background: var(--bb-white);
}

.pj-page *,
.pj-page *::before,
.pj-page *::after { box-sizing: border-box; }

.pj-page img { max-width: 100%; height: auto; display: block; }
.pj-page a { color: inherit; text-decoration: none; transition: all .3s ease; }

.pj-page h1,
.pj-page h2,
.pj-page h3,
.pj-page h4 {
    font-family: "Poppins", sans-serif;
    line-height: 120%;
    color: var(--bb-ink);
    margin: 0 0 15px;
    font-weight: 600;
}

.pj-page p { margin: 0 0 15px; }
.pj-page p:last-child { margin-bottom: 0; }

.pj-page .bb-container {
    width: 100%;
    max-width: var(--bb-container);
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
}

/* Shared reset for every real button in this template, so the Elementor kit
   cannot hand them a yellow pill treatment. ---------------------------------- */
.pj-page .pj-tile,
.pj-page .pj-lb__btn {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
    box-shadow: none;
}

/* Pill button, sprite-free version of the theme's .elementor-button ---------- */
.pj-page .bb-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: var(--bb-secondary);
    color: var(--bb-ink);
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1;
    padding: 12px 12px 12px 32px;
    border-radius: 50px;
    border: 0;
    cursor: pointer;
}

.pj-page .bb-btn__ico {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    background: var(--bb-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
}

.pj-page .bb-btn:hover .bb-btn__ico { transform: translateX(4px); }

/* Back variant: the icon is already first in the markup, so no flex reversing.
   Just mirror the padding so the circle sits tight on the left and the text
   gets the breathing room on the right. */
.pj-page .bb-btn--back { padding: 12px 32px 12px 12px; }
.pj-page .bb-btn--back:hover .bb-btn__ico { transform: translateX(-4px); }

/* Eyebrow / category chip --------------------------------------------------- */
.pj-page .bb-chip {
    display: inline-block;
    background: var(--bb-secondary);
    color: var(--bb-ink);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    line-height: 1;
    padding: 11px 20px;
    border-radius: 50px;
}

/* ==========================================================================
   1. HERO
   Title and location only. No lead paragraph by design.
   ========================================================================== */
.pj-page .pj-hero {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.pj-page .pj-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pj-page .pj-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 26, 44, .15) 0%, rgba(10, 26, 44, .55) 55%, rgba(10, 26, 44, .92) 100%);
}

.pj-page .pj-hero .bb-container { z-index: 2; padding-top: 120px; padding-bottom: 72px; }
.pj-page .pj-hero__inner { max-width: 860px; }

.pj-page .pj-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    line-height: 1;
    margin-bottom: 26px;
    text-transform: none;
}

.pj-page .pj-crumbs a:hover { color: var(--bb-secondary); }

/* Title renders exactly as typed. The rest of the site uses title case, so no
   uppercase transform here. */
.pj-page .pj-hero h1 {
    color: #fff;
    font-size: 64px;
    font-weight: 600;
    text-transform: none;
    line-height: 110%;
    margin: 22px 0 18px;
}

.pj-page .pj-loc {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--bb-secondary);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1;
}

/* ==========================================================================
   2. STORY
   ========================================================================== */
.pj-page .pj-story { background: var(--bb-cream); padding: 96px 0 100px; }
.pj-page .pj-story__inner { max-width: 900px; margin: 0 auto; text-align: center; }

.pj-page .pj-section-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bb-primary);
    line-height: 1;
    margin-bottom: 16px;
    display: block;
}

.pj-page .pj-story h2 { font-size: 44px; text-transform: uppercase; line-height: 110%; margin: 0; }

.pj-page .pj-story__rule {
    width: 64px;
    height: 4px;
    background: var(--bb-secondary);
    border-radius: 4px;
    margin: 26px auto 38px;
}

.pj-page .pj-story__body { font-size: 18px; line-height: 190%; text-align: left; }

/* ==========================================================================
   3. GALLERY
   ========================================================================== */
.pj-page .pj-gallery-sec { padding: 96px 0 100px; background: #fff; }

.pj-page .pj-gallery-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 44px;
}

.pj-page .pj-gallery-head h2 { font-size: 44px; text-transform: uppercase; margin: 0; }

.pj-page .pj-gallery-count {
    font-size: 15px;
    font-weight: 500;
    color: var(--bb-body);
    white-space: nowrap;
    text-transform: none;
}

.pj-page .pj-gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 170px;
    grid-auto-flow: dense;
    gap: 18px;
}

.pj-page .pj-tile {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 25px;
    padding: 0;
    margin: 0;
    background: var(--bb-cream);
    cursor: pointer;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    line-height: 0;
    font-size: 0;
    color: inherit;
    grid-column: span 2;
    grid-row: span 2;
}

/* The kit also paints button:hover and button:focus, so restate both. */
.pj-page .pj-tile:hover,
.pj-page .pj-tile:focus,
.pj-page .pj-tile:focus-visible,
.pj-page .pj-tile:active {
    background: var(--bb-cream);
    color: inherit;
    padding: 0;
    border: 0;
    border-radius: 25px;
}

.pj-page .pj-tile:focus-visible { outline: 3px solid var(--bb-secondary); outline-offset: 3px; }

.pj-page .pj-tile img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 0;
    transition: transform .6s ease;
}

.pj-page .pj-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 26, 44, 0);
    transition: background .35s ease;
}

.pj-page .pj-tile:hover img { transform: scale(1.06); }
.pj-page .pj-tile:hover::after { background: rgba(10, 26, 44, .22); }

.pj-page .pj-tile__zoom {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bb-secondary);
    color: var(--bb-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(8px);
    transition: all .35s ease;
    z-index: 2;
}

.pj-page .pj-tile:hover .pj-tile__zoom { opacity: 1; transform: translateY(0); }

/* Size rhythm driven by position, so the PHP loop needs no per-image logic.
   The cycle is 12 tiles and every band fills all 6 columns exactly:
     1 wide(4) + 2 tall(2)   -> 6
     3,4,5 base(2+2+2)       -> 6
     6,7 half(3+3)           -> 6
     8 tall(2) + 9 wide(4)   -> 6
     10,11,12 base(2+2+2)    -> 6
   grid-auto-flow:dense backfills any partial band, so 27 photos and 96
   photos both land clean. */
.pj-page .pj-tile:nth-child(12n+1),
.pj-page .pj-tile:nth-child(12n+9) { grid-column: span 4; grid-row: span 3; }

.pj-page .pj-tile:nth-child(12n+2),
.pj-page .pj-tile:nth-child(12n+8) { grid-column: span 2; grid-row: span 3; }

.pj-page .pj-tile:nth-child(12n+6),
.pj-page .pj-tile:nth-child(12n+7) { grid-column: span 3; grid-row: span 2; }

/* Back to all projects, under the grid. */
.pj-page .pj-gallery-foot {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

/* ==========================================================================
   4. CTA CARD

   Matches the site's existing CTA (the `transform-section` container on the
   home page). Values below were measured off that component at 1600 / 1200 /
   1000 / 800 / 480 so this reads as the same block, not a lookalike:

     card      radius 50px, ready_bg.jpg sunburst, 60 / 40 split
     heading   54px / 1.2, 700, sentence case (NOT uppercase like the
               other headings on this page, the reference is sentence case)
     body      18px / 1.95, solid white, not the faded white used elsewhere
     media     yellow panel, radius 50px 50px 50px 250px, 25px left padding.
               That padding is the whole trick: the image carries the same
               radius and sits on top, so the yellow shows through as the
               crescent down the left edge.

   The gallery section above already ends with 100px of padding, so this
   section only needs bottom spacing.
   ========================================================================== */
.pj-page .pj-cta { padding: 0 0 100px; }

.pj-page .pj-cta__card {
    display: flex;
    align-items: stretch;
    border-radius: 50px;
    overflow: hidden;
    color: #fff;
    /* Solid brown underneath so the card still reads correctly if the
       sunburst ever fails to load. */
    background: var(--bb-primary) url(../images/ready_bg.jpg) center / cover no-repeat;
}

.pj-page .pj-cta__body {
    flex: 1 1 60%;
    min-width: 0;
    /* 20px is deliberately tight: the 54px heading's own line box supplies most
       of the optical padding, and this is what keeps the card at the
       reference's 355px rather than ballooning to ~420px. */
    padding: 20px 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.pj-page .pj-cta h2 {
    color: #fff;
    font-size: 54px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: none;
    margin: 0 0 20px;
    max-width: none;
}

.pj-page .pj-cta p {
    color: #fff;
    font-size: 18px;
    line-height: 1.95;
    margin: 0 0 30px;
    max-width: 620px;
    /* The theme title-cases body copy site wide, which turns this into
       "Schedule Your Free Consultation Today And Get A Detailed Quote...".
       The reference runs as sentence case, so opt out here. */
    text-transform: none;
}

.pj-page .pj-cta__media {
    flex: 0 0 40%;
    background: var(--bb-secondary);
    border-radius: 50px 50px 50px 250px;
    padding-left: 25px;
}

.pj-page .pj-cta__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50px 50px 50px 250px;
}

/* No image available: let the copy use the full card. */
.pj-page .pj-cta__card--nomedia .pj-cta__body { flex-basis: 100%; }

/* ==========================================================================
   5. LIGHTBOX
   ========================================================================== */
.pj-page .pj-lb {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(10, 26, 44, .96);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
}

.pj-page .pj-lb.is-open { display: flex; }

.pj-page .pj-lb__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 14px;
    transition: opacity .2s ease;
}

.pj-page .pj-lb__btn {
    position: absolute;
    width: 56px;
    height: 56px;
    min-height: 0;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: var(--bb-secondary);
    color: var(--bb-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: all .3s ease;
}

.pj-page .pj-lb__btn:hover,
.pj-page .pj-lb__btn:focus { background: #fff; color: var(--bb-ink); padding: 0; }

.pj-page .pj-lb__close { top: 26px; right: 26px; }
.pj-page .pj-lb__prev { left: 26px; top: 50%; transform: translateY(-50%); }
.pj-page .pj-lb__next { right: 26px; top: 50%; transform: translateY(-50%); }

.pj-page .pj-lb__count {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .1em;
}

/* Dim while a larger lightbox file is fetched on click. */
.pj-page .pj-lb.is-loading .pj-lb__img { opacity: .35; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
    .pj-page .pj-hero h1 { font-size: 52px; }
    .pj-page .pj-story h2,
    .pj-page .pj-gallery-head h2 { font-size: 38px; }

    .pj-page .pj-cta h2 { font-size: 40px; }
    .pj-page .pj-cta p { font-size: 16px; line-height: 1.7; margin-bottom: 28px; }
    .pj-page .pj-cta__body { padding: 40px 48px; }
}

@media (max-width: 1024px) {
    .pj-page .pj-hero { min-height: 520px; }
    .pj-page .pj-hero h1 { font-size: 42px; }
    .pj-page .pj-story,
    .pj-page .pj-gallery-sec { padding: 72px 0; }
    .pj-page .pj-gallery { gap: 14px; }

    .pj-page .pj-cta { padding-bottom: 72px; }
    .pj-page .pj-cta__card { border-radius: 35px; }
    .pj-page .pj-cta h2 { font-size: 30px; margin-bottom: 14px; }
    .pj-page .pj-cta p { font-size: 15px; margin-bottom: 26px; }
    .pj-page .pj-cta__body { padding: 32px 28px; }
    .pj-page .pj-cta__media { border-radius: 35px 35px 35px 100px; padding-left: 15px; }
    .pj-page .pj-cta__media img { border-radius: 35px 35px 35px 100px; }
}

@media (max-width: 767px) {
    .pj-page .pj-hero { min-height: 460px; }
    .pj-page .pj-hero .bb-container { padding-top: 90px; padding-bottom: 48px; }
    .pj-page .pj-hero h1 { font-size: 32px; }
    .pj-page .pj-story h2,
    .pj-page .pj-gallery-head h2,
    .pj-page .pj-cta h2 { font-size: 28px; }

    .pj-page .pj-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 12px; }

    .pj-page .pj-tile,
    .pj-page .pj-tile:nth-child(12n+1),
    .pj-page .pj-tile:nth-child(12n+2),
    .pj-page .pj-tile:nth-child(12n+6),
    .pj-page .pj-tile:nth-child(12n+7),
    .pj-page .pj-tile:nth-child(12n+8),
    .pj-page .pj-tile:nth-child(12n+9) { grid-column: span 2; grid-row: span 2; }

    .pj-page .pj-gallery-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .pj-page .pj-gallery-count { white-space: normal; }

    /* Stack, image under the copy, crescent rotated to the top right. This is
       the design system's own mobile treatment for this component, not an
       invention: it mirrors the site's `.cta-container .transform-img` rules at
       this breakpoint (radius 20px 70px 20px 20px, left padding traded for
       top padding). Side by side at 375px would leave two ~160px columns. */
    .pj-page .pj-cta { padding-bottom: 56px; }
    .pj-page .pj-cta__card { flex-direction: column; border-radius: 20px; }
    .pj-page .pj-cta__body { padding: 28px 20px; align-items: center; text-align: center; }
    .pj-page .pj-cta p { font-size: 15px; margin-bottom: 24px; }

    .pj-page .pj-cta__media {
        flex: 0 0 auto;
        height: 240px;
        border-radius: 20px 70px 20px 20px;
        padding-left: 0;
        padding-top: 15px;
    }

    .pj-page .pj-cta__media img { border-radius: 20px 70px 20px 20px; }

    /* Scoped to the CTA so the shared .bb-btn is untouched elsewhere. At the
       default size "Schedule Consultation" wraps to two lines inside the
       narrower centred card. */
    .pj-page .pj-cta .bb-btn { font-size: 14px; gap: 10px; padding: 10px 10px 10px 22px; }
    .pj-page .pj-cta .bb-btn__ico { width: 44px; height: 44px; flex: 0 0 44px; }
    .pj-page .pj-lb { padding: 64px 12px; }
    .pj-page .pj-lb__prev { left: 10px; }
    .pj-page .pj-lb__next { right: 10px; }
}