.bonnie-blocks-page {
    --bonnie-navy: #12366D;
    --bonnie-blue: #1755A4;
    --bonnie-stone: #D8D2C7;
    --bonnie-light-stone: #F3F0EA;
    --bonnie-concrete: #979DA3;
    --bonnie-charcoal: #24282D;
    --bonnie-moss: #566652;
    --bonnie-white: #FFFFFF;
    color: var(--bonnie-charcoal);
    background: var(--bonnie-white);
}

.bonnie-blocks-page main { overflow: hidden; }
.bonnie-blocks-page .container { max-width: 1240px; }
.bonnie-blocks-page .bb-section { padding: clamp(4.5rem, 8vw, 7.5rem) 0; }
.bonnie-blocks-page .bb-kicker,
.bonnie-blocks-page .bb-eyebrow { margin: 0 0 .8rem; color: var(--bonnie-blue); font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.bonnie-blocks-page .bb-heading { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4.25rem); }
.bonnie-blocks-page .bb-heading h2,
.bonnie-blocks-page .bb-system-copy h2,
.bonnie-blocks-page .bb-engineering h2,
.bonnie-blocks-page .bb-final-cta h2 { color: var(--bonnie-navy); font-size: clamp(2rem, 4vw, 3.45rem); letter-spacing: -.035em; }
.bonnie-blocks-page a:focus-visible,
.bonnie-blocks-page button:focus-visible { outline: 3px solid #f1b84b; outline-offset: 4px; }

.bonnie-blocks-page .bb-hero { position: relative; min-height: max(620px, 75vh); margin-top: 74px; display: flex; align-items: center; color: var(--bonnie-white); isolation: isolate; }
.bonnie-blocks-page .bb-hero-image,
.bonnie-blocks-page .bb-final-cta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bonnie-blocks-page .bb-hero-image { object-position: center 47%; z-index: -2; }
.bonnie-blocks-page .bb-hero-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 28, 59, .94) 0%, rgba(12, 42, 82, .82) 42%, rgba(12, 42, 82, .25) 72%, rgba(12, 42, 82, .08) 100%); }
.bonnie-blocks-page .bb-hero-content { width: 100%; padding-top: 4rem; padding-bottom: 4rem; }
.bonnie-blocks-page .bb-hero .bb-eyebrow { color: #dce7f5; }
.bonnie-blocks-page .bb-brand-logo { display: block; width: min(300px, 55vw); height: auto; margin: 0 0 1.6rem; border-radius: 4px; }
.bonnie-blocks-page .bb-hero h1 { max-width: 800px; margin-bottom: 1.25rem; font-size: clamp(2.4rem, 5.2vw, 4.85rem); line-height: 1.03; letter-spacing: -.045em; text-wrap: balance; }
.bonnie-blocks-page .bb-lead { max-width: 700px; margin-bottom: 2rem; font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.7; }
.bonnie-blocks-page .bb-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.bonnie-blocks-page .bb-button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: .85rem 1.35rem; border: 2px solid transparent; border-radius: 6px; color: var(--bonnie-white); font-weight: 700; line-height: 1.2; text-decoration: none; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.bonnie-blocks-page .bb-button-primary { background: var(--bonnie-blue); }
.bonnie-blocks-page .bb-button-primary:hover { background: #0d4389; }
.bonnie-blocks-page .bb-button-ghost { border-color: rgba(255,255,255,.75); background: rgba(10,30,55,.16); }
.bonnie-blocks-page .bb-button-ghost:hover { background: var(--bonnie-white); color: var(--bonnie-navy); }

.bonnie-blocks-page .bb-credentials { padding: 1.5rem 0; border-bottom: 1px solid #d9dde1; background: var(--bonnie-white); }
.bonnie-blocks-page .bb-credentials-row { display: grid; grid-template-columns: 1.25fr 1.05fr .75fr; align-items: center; }
.bonnie-blocks-page .bb-credential { min-height: 86px; padding: .4rem 2rem; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #d9dde1; }
.bonnie-blocks-page .bb-credential:first-child { padding-left: 0; }
.bonnie-blocks-page .bb-credential:last-child { padding-right: 0; border-right: 0; }
.bonnie-blocks-page .bb-credential-badge img { width: 100%; max-width: 350px; height: auto; max-height: 52px; object-fit: contain; object-position: left center; }
.bonnie-blocks-page .bb-credential-badge span { margin-top: .45rem; color: #4c535b; font-size: .75rem; }
.bonnie-blocks-page .bb-backed span { color: #697078; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.bonnie-blocks-page .bb-backed img { width: 150px; height: 58px; object-fit: contain; object-position: left center; }

.bonnie-blocks-page .bb-benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--bonnie-stone); }
.bonnie-blocks-page .bb-benefit-grid article { padding: 2.1rem 2.25rem 0 0; border-right: 1px solid var(--bonnie-stone); }
.bonnie-blocks-page .bb-benefit-grid article + article { padding-left: 2.25rem; }
.bonnie-blocks-page .bb-benefit-grid article:last-child { border-right: 0; }
.bonnie-blocks-page .bb-index { display: inline-block; margin-bottom: 1.6rem; color: var(--bonnie-moss); font-size: .75rem; font-weight: 700; letter-spacing: .1em; }
.bonnie-blocks-page .bb-benefit-grid h3 { color: var(--bonnie-navy); font-size: 1.35rem; }
.bonnie-blocks-page .bb-benefit-grid p { color: #4d545b; line-height: 1.75; }

.bonnie-blocks-page .bb-system { background: var(--bonnie-light-stone); }
.bonnie-blocks-page .bb-system-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr); align-items: center; gap: clamp(2.5rem, 7vw, 6rem); }
.bonnie-blocks-page figure { margin: 0; }
.bonnie-blocks-page .bb-system-image img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; }
.bonnie-blocks-page figcaption,
.bonnie-blocks-page .bb-finish-grid small { margin-top: .6rem; color: #666e74; font-size: .75rem; }
.bonnie-blocks-page .bb-system-copy > p:not(.bb-kicker) { font-size: 1.06rem; line-height: 1.8; }
.bonnie-blocks-page .bb-endorsement { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid #c9c3b9; display: grid; grid-template-columns: 145px 1fr; align-items: center; gap: 1.5rem; }
.bonnie-blocks-page .bb-endorsement img { width: 100%; height: auto; }
.bonnie-blocks-page .bb-endorsement strong { display: block; margin-bottom: .35rem; color: var(--bonnie-navy); font-size: .9rem; }
.bonnie-blocks-page .bb-endorsement a { color: var(--bonnie-blue); font-size: .88rem; font-weight: 700; }

.bonnie-blocks-page .bb-application-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.bonnie-blocks-page .bb-application-grid figure { margin-bottom: 1.4rem; }
.bonnie-blocks-page .bb-application-grid img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; }
.bonnie-blocks-page .bb-application-grid h3 { color: var(--bonnie-navy); font-size: 1.3rem; }
.bonnie-blocks-page .bb-application-grid p { color: #4d545b; line-height: 1.7; }

.bonnie-blocks-page .bb-finishes { background: var(--bonnie-light-stone); }
.bonnie-blocks-page .bb-finish-group + .bb-finish-group { margin-top: 4.5rem; padding-top: 3.5rem; border-top: 1px solid #c9c3b9; }
.bonnie-blocks-page .bb-product-notice { max-width: 760px; padding: 1.5rem 1.75rem; border-left: 4px solid var(--bonnie-blue); background: #fff; }
.bonnie-blocks-page .bb-product-notice p { margin: .35rem 0 0; }
.bonnie-blocks-page .bb-group-heading { margin-bottom: 1.75rem; padding-left: 1rem; border-left: 3px solid var(--bonnie-blue); }
.bonnie-blocks-page .bb-group-heading h3 { color: var(--bonnie-navy); font-size: 1.5rem; }
.bonnie-blocks-page .bb-group-heading p { max-width: 820px; color: #656c72; line-height: 1.7; }
.bonnie-blocks-page .bb-finish-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.bonnie-blocks-page .bb-finish-grid-single { max-width: 610px; grid-template-columns: 1fr; }
.bonnie-blocks-page .bb-finish-grid article { display: grid; grid-template-columns: minmax(180px, .9fr) 1.1fr; overflow: hidden; border: 1px solid #d3cdc4; border-radius: 6px; background: var(--bonnie-white); }
.bonnie-blocks-page .bb-finish-grid img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.bonnie-blocks-page .bb-finish-grid article > div { padding: 2rem; align-self: center; }
.bonnie-blocks-page .bb-finish-grid span { color: var(--bonnie-moss); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.bonnie-blocks-page .bb-finish-grid h3 { margin: .55rem 0 .8rem; color: var(--bonnie-navy); font-size: 1.55rem; }
.bonnie-blocks-page .bb-finish-grid p { color: #50575d; line-height: 1.65; }

.bonnie-blocks-page .bb-timeline { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.bonnie-blocks-page .bb-timeline li { position: relative; padding: 0 2rem 0 0; }
.bonnie-blocks-page .bb-timeline li::before { content: ''; position: absolute; top: 20px; left: 42px; right: 0; height: 1px; background: var(--bonnie-stone); }
.bonnie-blocks-page .bb-timeline li:last-child::before { display: none; }
.bonnie-blocks-page .bb-timeline span { position: relative; z-index: 1; display: grid; width: 42px; height: 42px; margin-bottom: 1.35rem; place-items: center; border: 1px solid var(--bonnie-moss); border-radius: 50%; background: var(--bonnie-white); color: var(--bonnie-moss); font-weight: 700; }
.bonnie-blocks-page .bb-timeline h3 { color: var(--bonnie-navy); font-size: 1.15rem; }
.bonnie-blocks-page .bb-timeline p { color: #555c62; font-size: .94rem; line-height: 1.7; }

.bonnie-blocks-page .bb-engineering { padding: clamp(4.5rem, 7vw, 6.5rem) 0; background: var(--bonnie-navy); color: var(--bonnie-white); }
.bonnie-blocks-page .bb-engineering-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); align-items: center; gap: 5rem; }
.bonnie-blocks-page .bb-engineering .bb-kicker { color: #b7cae4; }
.bonnie-blocks-page .bb-engineering h2 { color: var(--bonnie-white); max-width: 780px; }
.bonnie-blocks-page .bb-engineering p:last-child { max-width: 780px; color: #e0e7f0; line-height: 1.75; }
.bonnie-blocks-page .bb-engineering-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.bonnie-blocks-page .bb-button-light { background: var(--bonnie-white); color: var(--bonnie-navy); }
.bonnie-blocks-page .bb-button-light:hover { background: #e6ecf3; }
.bonnie-blocks-page .bb-engineering-actions .bb-button-rosetta { background: var(--bonnie-stone); color: var(--bonnie-navy); }
.bonnie-blocks-page .bb-engineering-actions .bb-button-rosetta:hover { background: var(--bonnie-white); }

.bonnie-blocks-page .bb-final-cta { position: relative; min-height: 590px; display: flex; align-items: center; isolation: isolate; color: var(--bonnie-white); }
.bonnie-blocks-page .bb-final-cta > img { z-index: -2; object-position: center; }
.bonnie-blocks-page .bb-final-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 34, 70, .94), rgba(10, 34, 70, .64) 60%, rgba(10, 34, 70, .34)); }
.bonnie-blocks-page .bb-final-content { width: 100%; padding-top: 4rem; padding-bottom: 4rem; }
.bonnie-blocks-page .bb-final-cta .bb-kicker { color: #c7d7eb; }
.bonnie-blocks-page .bb-final-cta h2 { max-width: 700px; color: var(--bonnie-white); }
.bonnie-blocks-page .bb-final-content > p:not(.bb-kicker) { max-width: 650px; font-size: 1.08rem; line-height: 1.7; }
.bonnie-blocks-page .bb-supporting { display: block; margin-top: 2rem; font-size: .88rem; letter-spacing: .08em; text-transform: uppercase; }
.bonnie-blocks-page .footer-social > p a { color: var(--bonnie-white); font-weight: 700; }

.bonnie-blocks-page .bb-business-details { padding: clamp(3.5rem, 6vw, 5rem) 0; border-top: 1px solid #d9dde1; background: var(--bonnie-white); }
.bonnie-blocks-page .bb-business-details-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 7vw, 6rem); align-items: start; }
.bonnie-blocks-page .bb-business-details h2 { color: var(--bonnie-navy); font-size: clamp(1.8rem, 3vw, 2.5rem); }
.bonnie-blocks-page .bb-business-details p { color: #555c62; }
.bonnie-blocks-page .bb-business-details .bb-legal-name { color: var(--bonnie-charcoal); font-weight: 700; }
.bonnie-blocks-page .bb-yard-address { padding-left: 2rem; border-left: 1px solid var(--bonnie-stone); }
.bonnie-blocks-page .bb-yard-address h3 { color: var(--bonnie-navy); font-size: 1.05rem; }
.bonnie-blocks-page .bb-yard-address address { margin-bottom: 1rem; color: #4d545b; font-style: normal; line-height: 1.75; }
.bonnie-blocks-page .bb-yard-address a { color: var(--bonnie-blue); font-weight: 700; text-underline-offset: 4px; }
.bonnie-blocks-page .bb-footer-legal { margin: 0 0 2rem; padding: 1.25rem 0; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); color: #f0f2f4; font-size: .85rem; text-align: center; }

@media (max-width: 1024px) {
    .bonnie-blocks-page .navbar .container { gap: 1.5rem; }
    .bonnie-blocks-page .nav-menu li { margin-left: 1rem; }
    .bonnie-blocks-page .nav-menu a { font-size: .9rem; }
    .bonnie-blocks-page .bb-finish-grid article { grid-template-columns: 1fr; }
    .bonnie-blocks-page .bb-finish-grid img { min-height: 240px; aspect-ratio: 16/9; }
    .bonnie-blocks-page .bb-engineering-grid { gap: 3rem; }
}

@media (max-width: 768px) {
    .bonnie-blocks-page .nav-menu a { font-size: 1rem; }
    .bonnie-blocks-page .bb-hero { min-height: 650px; margin-top: 74px; align-items: flex-end; }
    .bonnie-blocks-page .bb-hero-image { object-position: 58% center; }
    .bonnie-blocks-page .bb-hero-overlay { background: linear-gradient(0deg, rgba(8, 28, 59, .97), rgba(8, 28, 59, .74) 70%, rgba(8, 28, 59, .38)); }
    .bonnie-blocks-page .bb-hero h1 { font-size: clamp(2.25rem, 10vw, 3.2rem); }
    .bonnie-blocks-page .bb-credentials-row { grid-template-columns: 1fr; }
    .bonnie-blocks-page .bb-credential { min-height: auto; padding: 1rem 0; border-right: 0; border-bottom: 1px solid #d9dde1; }
    .bonnie-blocks-page .bb-credential:last-child { border-bottom: 0; }
    .bonnie-blocks-page .bb-credential-badge img { max-width: 320px; max-height: 45px; }
    .bonnie-blocks-page .bb-benefit-grid,
    .bonnie-blocks-page .bb-system-grid,
    .bonnie-blocks-page .bb-application-grid,
    .bonnie-blocks-page .bb-finish-grid,
    .bonnie-blocks-page .bb-engineering-grid { grid-template-columns: 1fr; }
    .bonnie-blocks-page .bb-benefit-grid article,
    .bonnie-blocks-page .bb-benefit-grid article + article { padding: 1.8rem 0; border-right: 0; border-bottom: 1px solid var(--bonnie-stone); }
    .bonnie-blocks-page .bb-benefit-grid article:last-child { border-bottom: 0; }
    .bonnie-blocks-page .bb-index { margin-bottom: .8rem; }
    .bonnie-blocks-page .bb-system-grid { gap: 2.5rem; }
    .bonnie-blocks-page .bb-application-grid { gap: 2.75rem; }
    .bonnie-blocks-page .bb-group-heading { display: block; }
    .bonnie-blocks-page .bb-finish-grid { gap: 1rem; }
    .bonnie-blocks-page .bb-finish-grid article { grid-template-columns: minmax(130px, .8fr) 1.2fr; }
    .bonnie-blocks-page .bb-finish-grid img { min-height: 260px; aspect-ratio: auto; }
    .bonnie-blocks-page .bb-finish-grid article > div { padding: 1.5rem; }
    .bonnie-blocks-page .bb-timeline { grid-template-columns: 1fr; }
    .bonnie-blocks-page .bb-timeline li { display: grid; grid-template-columns: 50px 1fr; gap: 1rem; padding: 0 0 1.8rem; }
    .bonnie-blocks-page .bb-timeline li::before { top: 42px; bottom: 0; left: 21px; right: auto; width: 1px; height: auto; }
    .bonnie-blocks-page .bb-timeline span { margin-bottom: 0; }
    .bonnie-blocks-page .bb-engineering-grid { gap: 1.5rem; }
    .bonnie-blocks-page .bb-business-details-grid { grid-template-columns: 1fr; }
    .bonnie-blocks-page .bb-yard-address { padding: 1.5rem 0 0; border-top: 1px solid var(--bonnie-stone); border-left: 0; }
    .bonnie-blocks-page .bb-final-cta { min-height: 620px; }
}

@media (max-width: 520px) {
    .bonnie-blocks-page .bb-section { padding: 4rem 0; }
    .bonnie-blocks-page .bb-brand-logo { width: min(260px, 72vw); }
    .bonnie-blocks-page .bb-actions { display: grid; grid-template-columns: 1fr; }
    .bonnie-blocks-page .bb-button { width: 100%; text-align: center; }
    .bonnie-blocks-page .bb-endorsement { grid-template-columns: 1fr; }
    .bonnie-blocks-page .bb-endorsement img { max-width: 160px; }
    .bonnie-blocks-page .bb-finish-grid article { grid-template-columns: 1fr; }
    .bonnie-blocks-page .bb-finish-grid img { min-height: 210px; aspect-ratio: 16/10; }
    .bonnie-blocks-page .bb-finish-group + .bb-finish-group { margin-top: 3rem; padding-top: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .bonnie-blocks-page * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

.bonnie-blocks-page .bb-manufacturing { background:var(--bonnie-white); }
.bonnie-blocks-page .bb-heading > p:last-child { color:#555c62; line-height:1.75; }
.bonnie-blocks-page .bb-yard-gallery { display:grid; grid-template-columns:1.25fr 1fr .75fr; gap:1.25rem; }
.bonnie-blocks-page .bb-yard-gallery img { display:block; width:100%; height:360px; object-fit:cover; border-radius:6px; }
.bonnie-blocks-page .bb-yard-gallery figure:last-child img { object-position:center 48%; }
.bonnie-blocks-page .bb-beton-feature { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); align-items:stretch; gap:1.5rem; }
.bonnie-blocks-page .bb-beton-feature > img { width:100%; height:390px; object-fit:cover; border-radius:6px; }
.bonnie-blocks-page .bb-beton-feature .bb-product-notice { display:flex; flex-direction:column; justify-content:center; max-width:none; }
@media (max-width:768px) { .bonnie-blocks-page .bb-yard-gallery,.bonnie-blocks-page .bb-beton-feature { grid-template-columns:1fr; } .bonnie-blocks-page .bb-yard-gallery img,.bonnie-blocks-page .bb-beton-feature > img { height:300px; } }
.bonnie-blocks-page .bb-exclusive { padding:clamp(3rem,6vw,5rem) 0; background:var(--bonnie-navy); color:var(--bonnie-white); }
.bonnie-blocks-page .bb-exclusive-grid { display:grid; grid-template-columns:.35fr 1.65fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.bonnie-blocks-page .bb-exclusive .bb-kicker { color:#c7d7eb; }
.bonnie-blocks-page .bb-exclusive h2 { margin:0 0 1rem; color:var(--bonnie-white); font-size:clamp(2rem,4vw,3.3rem); }
.bonnie-blocks-page .bb-exclusive p:last-child { max-width:800px; margin:0; font-size:1.1rem; line-height:1.75; }
@media (max-width:768px) { .bonnie-blocks-page .bb-exclusive-grid { grid-template-columns:1fr; gap:1rem; } }

/* Interlocking concrete blocks page */
.bonnie-blocks-page .bb-text-link { color:var(--bonnie-blue); font-weight:700; text-underline-offset:4px; }
.bonnie-blocks-page .bb-faq-list { max-width:860px; }
.bonnie-blocks-page .bb-faq-list details { border-top:1px solid var(--bonnie-stone); padding:1.2rem 0; }
.bonnie-blocks-page .bb-faq-list details:last-child { border-bottom:1px solid var(--bonnie-stone); }
.bonnie-blocks-page .bb-faq-list summary { cursor:pointer; color:var(--bonnie-navy); font-weight:800; padding-right:2rem; }
.bonnie-blocks-page .bb-faq-list p { margin:.6rem 0 0; }