/* ================================================================
   ohb2-pages.css — OHB2 theme, Stage D
   Pay-Over-Time | About | Contact | Warranty Claims
   Loaded per-page via @push('head') in each view.
   Builds on top of ohb2.css (already loaded globally).
   Colors: #1A567A (blue), #E9BB52 (gold), #F0F0F0 (light gray),
           #D9D9D9 (border), #14405C (dark nav).
   ================================================================ */

/* ----------------------------------------------------------------
   RTO / Pay-Over-Time page
   ---------------------------------------------------------------- */
.ohb2-rto-intro-section {
    padding: 50px 20px 40px;
    text-align: center;
}
.ohb2-rto-intro-inner {
    max-width: 820px;
    margin: 0 auto;
}
.ohb2-rto-intro-inner h1 {
    font-size: 30px;
    font-weight: 700;
    color: #1A567A;
    margin: 0 0 16px 0;
}
.ohb2-rto-intro-inner > p {
    font-size: 16px;
    line-height: 1.7;
    color: #333;
}

/* Is RTO right for you? */
.ohb2-rto-right-section {
    background: #F0F0F0;
    padding: 50px 20px;
}
.ohb2-rto-right-inner {
    max-width: var(--ohb2-col);
    margin: 0 auto;
}
.ohb2-rto-right-inner > h2 {
    font-size: 26px;
    font-weight: 700;
    color: #1A567A;
    margin: 0 0 14px 0;
    text-align: center !important;
}
.ohb2-rto-right-inner > p {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    margin: 0 0 28px 0;
    text-align: left;
}
.ohb2-rto-checklist-wrap {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}
.ohb2-rto-checklist-col {
    flex: 1 1 auto;
}
.ohb2-rto-checklist-heading {
    font-size: 13px;
    font-weight: 700;
    color: #1A567A;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}
.ohb2-rto-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ohb2-rto-checklist li {
    padding: 6px 0 6px 26px;
    position: relative;
    font-size: 15px;
    color: #333;
    line-height: 1.5;
}
.ohb2-rto-checklist li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: #1A567A;
    font-weight: 700;
    font-size: 16px;
}
.ohb2-rto-badge-col {
    flex: 0 0 130px;
    text-align: center;
}
.ohb2-rto-badge-col img {
    max-width: 120px;
    height: auto;
}
@media (max-width: 620px) {
    .ohb2-rto-checklist-wrap { flex-direction: column; }
    /* Mike, 10/2: "Can we center the 90 days badge in the mobile view only?"
       The column already carries text-align:center, which does nothing here:
       once the wrap turns into a column, the wrap's align-items:flex-start
       shrink-wraps this child to the 200px image and parks it at the left
       edge, so there is no spare width inside it for text-align to centre
       into. align-self is the axis that actually moves it, and it only
       exists inside this breakpoint, so the desktop row is untouched. */
    .ohb2-rto-badge-col { flex: 0 0 auto; align-self: center; }
}

/* RTO body paragraphs */
.ohb2-rto-body-section {
    padding: 50px 20px;
}
.ohb2-rto-body-inner {
    max-width: 820px;
    margin: 0 auto;
}
.ohb2-rto-body-inner p {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    margin: 0 0 18px 0;
}

/* RTO question form */
.ohb2-rto-form-section {
    background: #1A567A;
    padding: 50px 20px;
}
.ohb2-rto-form-inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}
.ohb2-rto-form-inner h2 {
    font-size: 24px;
    font-weight: 700;
    color: #E9BB52;
    margin: 0 0 6px 0;
}
.ohb2-rto-form-subtext {
    font-size: 15px;
    color: rgba(255,255,255,0.85);
    margin: 0 0 20px 0;
}
.ohb2-rto-form-inner .ohb2-rto-form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    text-align: left;
}
.ohb2-rto-form-inner .ohb2-rto-form-row input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #D9D9D9;
    font-size: 14px;
    box-sizing: border-box;
}
.ohb2-rto-form-placeholder {
    font-size: 14px;
    color: #666;
    text-align: left;
    margin-bottom: 8px;
}
.ohb2-rto-form-inner textarea {
    width: 100%;
    min-height: 90px;
    padding: 10px 12px;
    border: 1px solid #D9D9D9;
    font-size: 14px;
    box-sizing: border-box;
    resize: vertical;
    margin-bottom: 14px;
    text-align: left;
}
.ohb2-rto-call-note {
    font-size: 14px;
    color: #555;
    margin-top: 12px;
}
.ohb2-rto-call-note a {
    color: #1A567A;
    text-decoration: underline;
}

/* RTO get-a-quote CTA section */
.ohb2-rto-cta-section {
    padding: 50px 20px;
}
.ohb2-rto-cta-inner {
    max-width: 820px;
    margin: 0 auto;
}
.ohb2-rto-cta-inner h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1A567A;
    margin: 0 0 14px 0;
}
.ohb2-rto-cta-inner > p {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    margin: 0 0 28px 0;
}
.ohb2-rto-btn-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.ohb2-rto-btn-row .ohb2-btn-gold,
.ohb2-rto-btn-row .ohb2-btn-blue {
    flex: 1 1 180px;
    text-align: center;
    padding: 16px 24px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ----------------------------------------------------------------
   About page
   ---------------------------------------------------------------- */
.ohb2-about-intro-section {
    padding: 50px 20px 40px;
}
.ohb2-about-intro-inner {
    max-width: var(--ohb2-col);
    margin: 0 auto;
}
.ohb2-about-intro-inner h1 {
    font-size: 30px;
    font-weight: 700;
    color: #1A567A;
    margin: 0 0 20px 0;
}
.ohb2-about-intro-inner p {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    margin: 0 0 16px 0;
}

/* Shop + Builder sections (alternating light gray / white) */
.ohb2-about-section {
    padding: 50px 20px;
}
.ohb2-about-section-gray {
    background: #F0F0F0;
    padding: 50px 20px;
}
.ohb2-about-two-col {
    max-width: var(--ohb2-col);
    margin: 0 auto;
    display: flex;
    gap: 50px;
    align-items: flex-start;
}
.ohb2-about-two-col-text {
    flex: 1;
}
.ohb2-about-two-col-text h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1A567A;
    margin: 0 0 14px 0;
    text-align: center;
}
.ohb2-about-two-col-text p {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    margin: 0 0 20px 0;
}
@media (max-width: 700px) {
    .ohb2-about-two-col { flex-direction: column; gap: 20px; }
}

/* Testimonials */
.ohb2-about-testimonials-section {
    background: #F0F0F0;
    padding: 50px 20px;
    /* The white gap ABOVE this band comes from the preceding
       .ohb2-about-section padding-bottom (30px); the white gap BELOW comes
       from the following .ohb2-about-ohb-section padding-top (50px). This
       band's own padding is already symmetric (50/50), so the missing 20px
       goes here as margin: both white gaps become 50px and nothing inside
       the band or in the neighbouring sections moves. */
    margin-top: 20px;
    text-align: center;
}
.ohb2-about-testimonials-inner {
    max-width: var(--ohb2-col);
    margin: 0 auto;
}
.ohb2-about-testimonials-inner h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1A567A;
    margin: 0 0 30px 0;
}
.ohb2-testimonials-row {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.ohb2-testimonial-card {
    background: #1A567A !important;
    border: 1px solid #1A567A !important;
    padding: 24px 20px;
    flex: 1 1 240px;
    max-width: 300px;
    text-align: left;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.ohb2-testimonial-quote {
    font-size: 14px;
    line-height: 1.6;
    color: #fff !important;
    font-style: italic;
    margin: 0 0 12px 0;
}
.ohb2-testimonial-author {
    font-size: 13px;
    font-weight: 700;
    color: #E9BB52 !important;
}
.ohb2-review-btn-wrap {
    text-align: center;
    margin-top: 10px;
}

/* About OHB brand copy */
.ohb2-about-ohb-section {
    padding: 50px 20px;
}
.ohb2-about-ohb-inner {
    max-width: var(--ohb2-col);
    margin: 0 auto;
}
.ohb2-about-ohb-inner h2 {
    font-size: 26px;
    font-weight: 700;
    color: #1A567A;
    margin: 0 0 16px 0;
    text-align: center;
}
.ohb2-about-ohb-inner > p {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    margin: 0 0 14px 0;
}

/* OHB subsections with badge */
.ohb2-ohb-subsection-wrap {
    padding: 50px 20px;
}
.ohb2-ohb-subsection-wrap-gray {
    background: #F0F0F0;
    padding: 50px 20px;
}
.ohb2-ohb-subsection {
    max-width: var(--ohb2-col);
    margin: 0 auto;
    display: flex;
    gap: 30px;
    align-items: flex-start;
}
.ohb2-ohb-subsection-badge {
    flex: 0 0 90px;
    text-align: center;
}
.ohb2-ohb-subsection-badge img {
    max-width: 80px;
    height: auto;
}
.ohb2-ohb-subsection-text {
    flex: 1;
}
.ohb2-ohb-subsection-text h2 {
    font-size: 22px;
    font-weight: 700;
    color: #1A567A;
    margin: 0 0 12px 0;
}
.ohb2-ohb-subsection-text p {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    margin: 0 0 12px 0;
}
.ohb2-ohb-subsection-text ul {
    margin: 0 0 14px 0;
    padding-left: 20px;
}
.ohb2-ohb-subsection-text ul li {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 5px;
}
.ohb2-warranty-btn-row {
    display: flex;
    gap: 14px;
    margin-top: 8px;
    flex-wrap: wrap;
}
@media (max-width: 620px) {
    .ohb2-ohb-subsection { flex-direction: column; gap: 12px; }
    .ohb2-ohb-subsection-badge { flex: 0 0 auto; }
    .ohb2-warranty-btn-row { flex-direction: column; }
}

/* ----------------------------------------------------------------
   Contact page
   ---------------------------------------------------------------- */
.ohb2-contact-intro-section {
    padding: 50px 20px 40px;
    text-align: center;
}
.ohb2-contact-intro-inner {
    max-width: var(--ohb2-col);
    margin: 0 auto;
}
.ohb2-contact-intro-inner h1 {
    font-size: 30px;
    font-weight: 700;
    color: #1A567A;
    margin: 0 0 16px 0;
}
.ohb2-contact-intro-inner > p {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    margin: 0 0 12px 0;
    text-align: left;
}

.ohb2-contact-body-section {
    background: #F0F0F0;
    padding: 50px 20px;
}
.ohb2-contact-body-inner {
    max-width: var(--ohb2-col);
    margin: 0 auto;
    display: flex;
    gap: 50px;
    align-items: flex-start;
}
.ohb2-contact-info-col {
    flex: 1;
}
.ohb2-contact-info-col h2 {
    font-size: 22px;
    font-weight: 700;
    color: #1A567A;
    margin: 0 0 14px 0;
}
.ohb2-contact-info-col p {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin: 0 0 4px 0;
}
.ohb2-contact-info-col a {
    color: #1A567A;
}
.ohb2-contact-hours {
    margin-top: 18px;
}
.ohb2-contact-hours h3 {
    font-size: 15px;
    font-weight: 700;
    color: #1A567A;
    margin: 0 0 10px 0;
    text-transform: none;
    letter-spacing: 0;
}
.ohb2-contact-hours-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #D9D9D9;
    padding: 5px 0;
}
.ohb2-contact-form-col {
    flex: 1;
}
.ohb2-contact-form-col h2 {
    font-size: 22px;
    font-weight: 700;
    color: #1A567A;
    margin: 0 0 10px 0;
}
.ohb2-contact-form-intro {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    margin: 0 0 16px 0;
}
.ohb2-contact-email-form .ohb2-cf-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}
.ohb2-contact-email-form .ohb2-cf-row input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #D9D9D9;
    font-size: 14px;
    box-sizing: border-box;
}
.ohb2-contact-email-form select,
.ohb2-contact-email-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #D9D9D9;
    font-size: 14px;
    box-sizing: border-box;
    margin-bottom: 12px;
    background: #fff;
}
.ohb2-contact-email-form textarea {
    min-height: 100px;
    resize: vertical;
}
.ohb2-contact-submit-wrap {
    text-align: center;
}
@media (max-width: 700px) {
    .ohb2-contact-body-inner { flex-direction: column; gap: 30px; }
    .ohb2-contact-email-form .ohb2-cf-row { flex-direction: column; }
}

/* ----------------------------------------------------------------
   Warranty Claims page
   ---------------------------------------------------------------- */
.ohb2-warranty-intro-section {
    padding: 40px 20px 30px;
    max-width: 680px;
    margin: 0 auto;
}
.ohb2-warranty-intro-section h1 {
    font-size: 30px;
    font-weight: 700;
    color: #E9BB52;
    margin: 0 0 16px 0;
    text-align: center;
}
.ohb2-warranty-intro-section > p {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    margin: 0 0 22px 0;
}
.ohb2-warranty-sub-heading {
    font-size: 16px;
    font-weight: 700;
    color: #1A567A;
    margin: 0 0 12px 0;
}
.ohb2-warranty-instructions {
    list-style: decimal;
    padding: 0 0 0 22px;
    margin: 0 0 30px 0;
}
.ohb2-warranty-instructions li {
    padding: 9px 0;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    border-bottom: none;
}
.ohb2-warranty-instructions li::before {
    display: none;
}

/* OHB logo band */
.ohb2-warranty-logo-band {
    background: #F0F0F0;
    padding: 16px 20px;
    text-align: center;
}
.ohb2-warranty-logo-band img {
    max-height: 70px;
    height: auto;
}

/* CTA buttons */
.ohb2-warranty-cta-section {
    padding: 40px 20px;
    text-align: center;
}
.ohb2-warranty-cta-row {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 560px;
    margin: 0 auto;
}
.ohb2-warranty-cta-row .ohb2-btn-blue,
.ohb2-warranty-cta-row .ohb2-btn-gold {
    flex: 1 1 180px;
    min-width: 180px;
    padding: 16px 24px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ohb2-about-section a.ohb2-btn-gold { background: #1A567A; color: #fff; }
.ohb2-about-section a.ohb2-btn-gold:hover { background: #14405C; }
/* 3D SHED BUILDER button: compact inline + restore gold (overrides .ohb2-about-section rule above) */
.ohb2-about-two-col-text a.ohb2-btn-gold {
    display: inline-flex !important;
    width: auto !important;
    padding: 12px 32px !important;
    background: #E9BB52 !important;
    color: #1A567A !important;
}
.ohb2-about-two-col-text a.ohb2-btn-gold:hover {
    background: #d9a42f !important;
}
.ohb2-warranty-btn-row a.ohb2-btn-gold, .ohb2-warranty-cta-row a.ohb2-btn-gold { background: #1A567A; color: #fff; }
.ohb2-warranty-btn-row a.ohb2-btn-gold:hover { background: #14405C; }
.ohb2-rto-form-inner input, .ohb2-rto-form-inner textarea { background: #fff; border-color: rgba(255,255,255,0.4); }
.ohb2-rto-form-placeholder, .ohb2-rto-call-note { color: rgba(255,255,255,0.85); }
.ohb2-rto-call-note a { color: #E9BB52; }
.ohb2-rto-form-inner .ohb2-rto-form-row input { background: #fff; }

/* ----------------------------------------------------------------
   PASS-4 ADDITIONS
   ---------------------------------------------------------------- */

/* Contact page: DOWNLOAD IT NOW -> navy */
body.ohb2-contact-page .ohb2-brochure-block .ohb2-btn-gold,
body.ohb2-contact-page .ohb2-brochure-block a.ohb2-btn-gold {
    background: #1A567A !important;
    color: #fff !important;
}
body.ohb2-contact-page .ohb2-brochure-block .ohb2-btn-gold:hover {
    background: #14405C !important;
}

/* Contact page: brochure block -> centered half-width card, image-left layout */
body.ohb2-contact-page .ohb2-brochure-block {
    background: #fff;
    padding: 40px 20px;
}
body.ohb2-contact-page .ohb2-brochure-block-inner {
    max-width: 560px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #D9D9D9;
    display: flex;
    align-items: center;
    gap: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
body.ohb2-contact-page .ohb2-brochure-device {
    flex: 0 0 160px;
    background: #E8EAEC;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.ohb2-contact-page .ohb2-brochure-device-placeholder {
    width: 120px;
    height: 90px;
    background: #C8D0D8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #666;
}
body.ohb2-contact-page .ohb2-brochure-text-wrap {
    flex: 1;
    padding: 20px 24px;
    text-align: left;
}
body.ohb2-contact-page .ohb2-brochure-text-wrap h3 {
    margin: 0 0 12px;
    font-size: 16px;
    color: #1A567A;
}

/* About trust sections: h2 full-width centered, badge inside text col */
.ohb2-ohb-subsection {
    flex-wrap: wrap !important;
}
.ohb2-ohb-subsection-badge {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    flex: 0 0 auto !important;
    order: -1 !important;
}
.ohb2-ohb-subsection-text {
    flex: 0 0 55% !important;
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}
.ohb2-ohb-subsection-text h2 {
    text-align: center !important;
    font-size: 22px !important;
    order: -1 !important;
    width: 100% !important;
    margin-bottom: 14px !important;
}
.ohb2-ohb-subsection-photo {
    flex: 0 0 40% !important;
    order: 2 !important;
}

/* ================================================================
   PASS 6 FIXES — 2026-07-27
   ================================================================ */

/* Contact SUBMIT button: full-width gold (ref confirmed) */
body.ohb2-contact-page .ohb2-contact-submit-wrap button[type=submit] {
    display: block !important;
    width: 100% !important;
    padding: 14px 20px !important;
}

/* RTO checklist section: left-aligned prose but centered heading already fixed above */

/* About page: portrait constrain on mobile */
.ohb2-about-portrait {
    max-height: 480px !important;
    overflow: hidden !important;
}
.ohb2-about-portrait img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ================================================================
   PASS FIDELITY-FIX-1 ADDITIONS
   ================================================================ */

/* P3.11 — RTO "Get a Quote" buttons: cap width ~44% each */
.ohb2-rto-btn-row .ohb2-btn-gold,
.ohb2-rto-btn-row .ohb2-btn-blue {
    flex: 0 1 44% !important;
    max-width: 44% !important;
}

/* P3.11 — RTO "Have Questions" dark form section: increase top padding */
.ohb2-rto-form-section {
    padding-top: 48px !important;
}

/* P3.12 — About page: portrait photo is rectangle, not circle */
.ohb2-about-portrait img,
.ohb2-ohb-subsection-photo img {
    border-radius: 0 !important;
}

/* P3.13 — Contact: gray 2-col band fills full section (no white sliver) */
.ohb2-contact-body-section {
    padding-bottom: 50px !important;
}
.ohb2-contact-body-inner {
    padding-bottom: 0 !important;
}

/* ================================================================
   BATCH 4 — About page now carries the doc's real section photos
   instead of background-image tiles, and the two "[input by dealer]"
   image slots the design shows beside Shop Online / 3D Builder.
   ================================================================ */
.ohb2-about-two-col-photo {
    flex: 0 0 34%;
}
.ohb2-about-two-col-photo img {
    display: block;
    width: 100%;
    height: auto;
}
.ohb2-ohb-subsection-photo img {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 700px) {
    .ohb2-about-two-col-photo { flex: none; width: 100%; }
    .ohb2-about-two-col-photo img { max-width: 360px; margin: 0 auto; }
}

/* The doc's Delivery Details is a bulleted list; the v2 trust-section markup
   uses .ohb2-ohb-sub-text-col, which never picked up the list styling. */
.ohb2-ohb-sub-text-col ul {
    list-style: disc;
    padding-left: 20px;
    margin: 0 0 14px;
}
.ohb2-ohb-sub-text-col ul li {
    list-style: disc;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 6px;
}

/* WRITTEN WARRANTY / FILE A CLAIM sit side by side, not stacked at two widths */
.ohb2-warranty-btn-row .ohb2-btn-blue,
.ohb2-warranty-btn-row .ohb2-btn-gold {
    display: inline-flex !important;
    width: auto !important;
    padding: 12px 24px !important;
}

/* The quote form's prompt line is styled white in ohb2-catalog.css, which the
   About and Contact pages do not load — it was rendering navy on navy. */
.ohb2-quote-prompt {
    color: #fff;
    font-size: 14px;
    text-align: center;
    margin: 18px 0 12px;
}

/* The Pay-Over-Time question form's four fields were an inline four-column
   grid, so no breakpoint could reach them — on a phone the placeholders read
   "First Na" / "Last Na". Two columns under 700px, one under 480px. The
   selector matches the .ohb2-rto-form-inner rule above so it can win. */
.ohb2-rto-form-inner .ohb2-rto-form-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.ohb2-rto-form-inner .ohb2-rto-form-row input {
    padding: 10px 12px;
    border: 1px solid #D9D9D9;
    font-size: 14px;
    box-sizing: border-box;
    background: #fff;
    width: 100%;
    min-width: 0;
}
@media (max-width: 700px) {
    .ohb2-rto-form-inner .ohb2-rto-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .ohb2-rto-form-inner .ohb2-rto-form-row { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================
   FINISH PASS (2026-08-26)
   ================================================================ */

/* About intro with no dealer photo: the text column takes the whole
   width instead of leaving a gap where the portrait frame used to be. */
.ohb2-about-intro-two-col.ohb2-about-intro-no-portrait {
    display: block !important;
}
.ohb2-about-intro-two-col.ohb2-about-intro-no-portrait .ohb2-about-intro-text {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ================================================================
   SITE-WIDE DESIGN SWEEP (2026-08-26)
   Design pages 10a (pay-over-time), 10c (warranty claims),
   11 (about) and 12 (contact — the PDF's title block on that page
   is mislabelled "Pay Over Time", the artwork is the contact page).

   All four run the same measure the product pages do (~940px on a
   1440 frame) on white, with the homepage's 38px navy headings.
   ================================================================ */

/* ---------------------------------------------------------------
   Pay over time — design page 10a
   --------------------------------------------------------------- */
.ohb2-rto-intro-section {
    padding: 40px 20px 10px;
}
.ohb2-rto-intro-inner,
.ohb2-rto-right-inner,
.ohb2-rto-body-inner,
.ohb2-rto-cta-inner {
    max-width: var(--ohb2-col);
}
.ohb2-rto-intro-inner h1 {
    font-size: 38px;
    color: #1A567A;
    line-height: 1.2;
    margin: 0 0 20px 0;
}
.ohb2-rto-intro-inner > p {
    font-size: 16px;
    line-height: 1.55;
}

/* The comp runs this page white end to end — no grey band. */
.ohb2-rto-right-section {
    background: #fff;
    padding: 30px 20px;
}
.ohb2-rto-right-inner > h2 {
    font-size: 38px;
    color: #1A567A;
    line-height: 1.2;
    margin: 0 0 26px 0; /* #23 section-heading standard */
}
.ohb2-rto-right-inner > p {
    font-size: 16px;
    line-height: 1.55;
}
.ohb2-rto-checklist-heading {
    font-size: 20px;
    color: #1A567A;
}
.ohb2-rto-checklist li {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    line-height: 1.5;
}
.ohb2-rto-checklist li::before {
    color: #1A567A;
}
.ohb2-rto-body-inner p {
    font-size: 16px;
    line-height: 1.55;
    color: #333;
}

/* Question band: same 900px form measure as the quote form */
.ohb2-rto-form-inner {
    max-width: var(--ohb2-col);
}
.ohb2-rto-form-inner h2 {
    font-size: 38px;
    line-height: 1.2;
}
.ohb2-rto-form-subtext {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}
.ohb2-rto-form-inner .ohb2-btn-gold {
    min-width: 300px;
    padding: 13px 34px;
    font-size: 26px;
    letter-spacing: 0.01em;
}
.ohb2-rto-call-note {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}
.ohb2-rto-call-note a {
    color: #E9BB52;
}

/* Closing CTA pair: centred heading, two big navy bars */
.ohb2-rto-cta-inner {
    text-align: center;
}
.ohb2-rto-cta-inner h2 {
    font-size: 38px;
    color: #1A567A;
    line-height: 1.2;
    margin: 0 0 26px 0; /* #23 section-heading standard */
}
.ohb2-rto-cta-inner > p {
    font-size: 16px;
    line-height: 1.55;
    text-align: left;
}
.ohb2-rto-btn-row {
    gap: 24px;
    justify-content: center;
}
.ohb2-rto-btn-row .ohb2-btn-gold,
.ohb2-rto-btn-row .ohb2-btn-blue {
    flex: 1 1 300px;
    max-width: 430px;
    padding: 16px 24px;
    font-size: 24px;
    letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------
   Contact — design page 12
   --------------------------------------------------------------- */
.ohb2-contact-intro-section {
    padding: 40px 20px 10px;
}
.ohb2-contact-intro-inner,
.ohb2-contact-body-inner {
    max-width: var(--ohb2-col);
}
.ohb2-contact-intro-inner h1 {
    font-size: 38px;
    color: #1A567A;
    line-height: 1.2;
    margin: 0 0 20px 0;
}
.ohb2-contact-intro-inner > p {
    font-size: 16px;
    line-height: 1.55;
}

/* The comp keeps this block on white; only the form itself is navy. */
.ohb2-contact-body-section {
    background: #fff;
    padding: 30px 20px 44px;
}
.ohb2-contact-info-col h2,
.ohb2-contact-form-col h2 {
    font-size: 34px;
    color: #1A567A;
    line-height: 1.2;
    /* #23 section-heading standard: 26px. These two -- "Visit or Call Us"
       and "Email Us" -- are the same 34px section heading /about uses, and
       About has read 26px since the #23 pass (see .ohb2-about-two-col-h2 and
       .ohb2-ohb-sub-h2-centered below, both commented with this same
       standard). They were the only 34px headings left at 12px, which put
       the two pages 14px apart on identical type. */
    margin: 0 0 26px 0;
}
.ohb2-contact-info-col p {
    font-size: 16px;
    line-height: 1.45;
}
.ohb2-contact-info-col a {
    color: #333;
}
.ohb2-contact-hours h3 {
    font-size: 16px;
    color: #333;
    font-weight: 700;
    margin-bottom: 4px;
}
/* Hours read as "Monday: 8AM - 4:30PM" lines, not a ruled two-column list. */
.ohb2-contact-hours-row {
    display: block;
    border-bottom: none;
    font-size: 16px;
    line-height: 1.45;
    padding: 0;
}
.ohb2-contact-hours-row > *:first-child::after {
    content: ' ';
}
.ohb2-contact-hours-row > * {
    display: inline;
}
.ohb2-contact-form-intro {
    font-size: 16px;
    line-height: 1.45;
    color: #333;
}

/* Navy panel behind the email form, as the comp draws it */
.ohb2-contact-email-form {
    background: #1A567A;
    padding: 22px;
}
.ohb2-contact-email-form input,
.ohb2-contact-email-form select,
.ohb2-contact-email-form textarea {
    border: none;
    border-radius: 4px;
}
.ohb2-contact-submit-wrap {
    text-align: center !important;
}
.ohb2-contact-submit-wrap .ohb2-btn-gold {
    display: flex;
    width: 100%;
    padding: 12px 24px;
    font-size: 20px;
    letter-spacing: 0.01em;
}

@media screen and (max-width: 700px) {
    .ohb2-rto-intro-inner h1,
    .ohb2-rto-right-inner > h2,
    .ohb2-rto-form-inner h2,
    .ohb2-rto-cta-inner h2,
    .ohb2-contact-intro-inner h1 { font-size: 26px; }
    .ohb2-contact-info-col h2,
    .ohb2-contact-form-col h2 { font-size: 24px; }
    .ohb2-rto-btn-row .ohb2-btn-blue,
    .ohb2-rto-btn-row .ohb2-btn-gold { font-size: 18px; }
    .ohb2-rto-form-inner .ohb2-btn-gold { font-size: 19px; min-width: 0; width: 100%; }
    .ohb2-rto-form-subtext,
    .ohb2-rto-call-note { font-size: 17px; }
}

/* ---------------------------------------------------------------
   About — design page 11
   --------------------------------------------------------------- */
.ohb2-about-intro-section {
    padding: 40px 20px 10px;
}
.ohb2-about-intro-inner,
.ohb2-about-two-col {
    max-width: var(--ohb2-col);
}
.ohb2-about-intro-inner h1 {
    font-size: 38px;
    color: #1A567A;
    line-height: 1.2;
    text-align: center;
    margin: 0 0 20px 0;
}
.ohb2-about-intro-inner p {
    font-size: 16px;
    line-height: 1.55;
}

/* The comp runs About on white, with the section heading full width
   and centred above its two columns. */
.ohb2-about-section,
.ohb2-about-section-gray {
    background: #fff;
    padding: 30px 20px;
}
.ohb2-about-two-col-text h2,
.ohb2-about-section > .ohb2-wrap > h2,
.ohb2-ohb-sub-h2-centered {
    font-size: 34px;
    color: #1A567A;
    line-height: 1.2;
    text-align: center;
    margin: 0 0 26px 0; /* #23 section-heading standard */
}
.ohb2-about-two-col-text p {
    font-size: 16px;
    line-height: 1.55;
}

/* ---------------------------------------------------------------
   Warranty claims — design page 10c
   --------------------------------------------------------------- */
.ohb2-warranty-intro-section {
    max-width: var(--ohb2-col-gutter);
    padding: 40px 20px 24px;
}
.ohb2-warranty-intro-section h1 {
    font-size: 38px;
    color: #1A567A;
    line-height: 1.2;
    margin: 0 0 20px 0;
}
.ohb2-warranty-intro-section > p {
    font-size: 16px;
    line-height: 1.55;
}
.ohb2-warranty-sub-heading {
    font-size: 17px;
    color: #333;
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin: 0 0 8px 0;
}
.ohb2-warranty-instructions {
    list-style: disc;
}
.ohb2-warranty-instructions li {
    font-size: 16px;
    line-height: 1.5;
    padding: 3px 0;
}

/* The logo sits on white in the comp, and the two CTAs are wide bars. */
.ohb2-warranty-logo-band {
    background: #fff;
    padding: 20px;
}
.ohb2-warranty-logo-band img {
    max-height: 110px;
}
.ohb2-warranty-cta-section {
    padding: 10px 20px 50px;
}
.ohb2-warranty-cta-row {
    max-width: var(--ohb2-col);
    gap: 26px;
}
.ohb2-warranty-cta-row .ohb2-btn-blue,
.ohb2-warranty-cta-row .ohb2-btn-gold {
    flex: 1 1 300px;
    border-radius: 7px;
    padding: 16px 20px;
    font-size: 24px;
    letter-spacing: 0.01em;
}

@media screen and (max-width: 700px) {
    .ohb2-about-intro-inner h1,
    .ohb2-warranty-intro-section h1 { font-size: 26px; }
    .ohb2-about-two-col-text h2,
    .ohb2-ohb-sub-h2-centered { font-size: 24px; }
    .ohb2-warranty-cta-row .ohb2-btn-blue,
    .ohb2-warranty-cta-row .ohb2-btn-gold { font-size: 18px; }
}

/* ----- p10-p12 round 2 ----- */

/* These three submits carried their type in a style attribute, which no
   stylesheet could reach. The attribute is gone; the sizes live here. */
.ohb2-rto-submit-btn {
    display: inline-block;
    width: auto;
    min-width: 300px;
    border: none;
    cursor: pointer;
    padding: 13px 34px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.ohb2-contact-submit-wrap .ohb2-btn-gold {
    border: none;
    cursor: pointer;
}

/* The 90-day badge is a headline element in the comp, not a thumbnail. */
.ohb2-rto-badge-col img {
    max-width: 240px;
    width: 100%;
    height: auto;
}
.ohb2-rto-checklist-wrap {
    margin-bottom: 0;
}
.ohb2-rto-body-section {
    padding-top: 6px;
}

@media screen and (max-width: 700px) {
    .ohb2-rto-submit-btn { font-size: 19px; min-width: 0; width: 100%; }
    .ohb2-rto-badge-col img { max-width: 170px; }
}

/* ----- About round 2 ----- */

/* The trust sections alternate white / #F5F5F5 bands; design page 11
   runs the whole page white, and sets their headings at the same size
   as the rest of the page's section headings. */
.ohb2-ohb-subsection-wrap-gray,
.ohb2-ohb-subsection-wrap {
    background: #fff;
    padding: 26px 20px;
}
.ohb2-ohb-subsection-v2 {
    max-width: var(--ohb2-col);
}
.ohb2-about-page .ohb2-ohb-sub-h2-centered,
.ohb2-page .ohb2-ohb-sub-h2-centered,
h2.ohb2-ohb-sub-h2-centered {
    font-size: 34px !important;
    line-height: 1.2 !important;
    margin-bottom: 26px !important; /* #23 section-heading standard */
}
.ohb2-ohb-sub-text-col p,
.ohb2-ohb-sub-text-col li {
    font-size: 16px;
    line-height: 1.55;
    color: #333;
}
.ohb2-ohb-subsection-text h2 {
    font-size: 34px;
    line-height: 1.2;
    text-align: center;
}
.ohb2-ohb-subsection-text p,
.ohb2-ohb-subsection-text ul {
    font-size: 16px;
    line-height: 1.55;
    color: #333;
}

@media screen and (max-width: 700px) {
    .ohb2-about-page .ohb2-ohb-sub-h2-centered,
    .ohb2-page .ohb2-ohb-sub-h2-centered,
    h2.ohb2-ohb-sub-h2-centered { font-size: 24px !important; }
    .ohb2-ohb-subsection-text h2 { font-size: 24px; }
}


/* ----- Contact round 2 -----

   The contact page had shrunk the brochure block to a bordered
   half-width card. Design page 12 draws the same two-up block the
   homepage and the product pages carry, so the card is undone. */
body.ohb2-contact-page .ohb2-brochure-block {
    padding: 10px 20px 44px;
}
body.ohb2-contact-page .ohb2-brochure-block-inner {
    max-width: var(--ohb2-col);
    border: none;
    box-shadow: none;
    gap: 56px;
    justify-content: center;
}
body.ohb2-contact-page .ohb2-brochure-device {
    flex: 0 0 520px;
    max-width: 520px;
    background: transparent;
    min-height: 0;
}
body.ohb2-contact-page .ohb2-brochure-text-wrap {
    flex: 0 1 auto;
    padding: 0;
}
body.ohb2-contact-page .ohb2-brochure-text-wrap h3 {
    font-size: 38px;
    line-height: 1.2;
    margin: 0 0 24px;
}
body.ohb2-contact-page .ohb2-brochure-block .ohb2-btn-gold,
body.ohb2-contact-page .ohb2-brochure-block a.ohb2-btn-gold {
    display: inline-flex;
    width: auto;
    padding: 16px 40px !important;
    font-size: 26px;
    letter-spacing: 0.01em;
}

@media screen and (max-width: 900px) {
    body.ohb2-contact-page .ohb2-brochure-device { flex: none; max-width: 100%; }
}
@media screen and (max-width: 700px) {
    body.ohb2-contact-page .ohb2-brochure-text-wrap h3 { font-size: 26px; }
    body.ohb2-contact-page .ohb2-brochure-block .ohb2-btn-gold,
    body.ohb2-contact-page .ohb2-brochure-block a.ohb2-btn-gold { font-size: 20px; padding: 14px 26px !important; }
}

/* ----- About round 3 -----

   Design page 11 draws SHOP ONLINE and 3D SHED BUILDER as the same
   wide navy bar the rest of the sweep uses; an earlier pass had put
   the builder button back to gold at button-label size. */
.ohb2-about-two-col-text a.ohb2-btn-gold,
.ohb2-about-section a.ohb2-btn-gold,
.ohb2-about-section .ohb2-btn-blue {
    display: inline-flex !important;
    width: auto !important;
    background: #1A567A !important;
    color: #fff !important;
    padding: 15px 38px !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
}
.ohb2-about-two-col-text a.ohb2-btn-gold:hover,
.ohb2-about-section a.ohb2-btn-gold:hover,
.ohb2-about-section .ohb2-btn-blue:hover {
    background: #124763 !important;
    color: #fff !important;
}

@media screen and (max-width: 700px) {
    .ohb2-about-two-col-text a.ohb2-btn-gold,
    .ohb2-about-section a.ohb2-btn-gold,
    .ohb2-about-section .ohb2-btn-blue { font-size: 18px !important; padding: 15px 24px !important; } /* #26/#28 */
}

/* The Old Hickory intro block sits on the same measure and type as the
   dealer sections above it. */
.ohb2-about-ohb-inner {
    max-width: var(--ohb2-col);
    margin: 0 auto;
}
.ohb2-about-ohb-inner h2 {
    font-size: 34px;
    font-weight: 700;
    color: #1A567A;
    line-height: 1.2;
    text-align: center;
    margin: 0 0 26px 0; /* #23 section-heading standard */
}
.ohb2-about-ohb-inner p {
    font-size: 16px;
    line-height: 1.55;
    color: #333;
}

@media screen and (max-width: 700px) {
    .ohb2-about-ohb-inner h2 { font-size: 24px; }
}

/* =====================================================================
   PASS 2026-09-01 (f) — refit to the 940px column

   About's "v2" subsection splits its row 58% text + 40% photo with a
   40px gap: 98% + 40px, which is wider than any container. At the old
   1200px column it spilled ~16px; at 940px it spills 21px, pushing the
   photo past the right edge of the measure. The text column keeps the
   58% the copy was set to; the photo takes whatever is left.
   ===================================================================== */
.ohb2-ohb-sub-body .ohb2-ohb-subsection-photo {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

@media screen and (max-width: 700px) {
    .ohb2-ohb-sub-body .ohb2-ohb-subsection-photo {
        flex: none !important;
        width: 100% !important;
    }
}

/* =====================================================================
   PASS 2026-09-01 (iv) — FULL-SITE FIDELITY SWEEP, standalone pages.
   Numbers measured off design-10 (Pay-Over-Time), design-11 (About) and
   design-12 (Contact), normalised to a 1440px page.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. THE 90-DAYS BADGE WAS RENDERING AT HALF SIZE.

   design-10: the badge measures 250 x 244 — red disc top at y 673, gold
   bar bottom at y 917, gold bar x 936..1186, i.e. its right edge sits on
   the content column's right guide. Live it was 130 x 128: 52% of the
   drawn size, and 54% of the asset's own 240 x 237 native resolution, so
   it was both undersized and needlessly soft.

   Restoring it to native forces the checklist beside it to yield; the
   design gives the checklist 663px (its longest line ends at x 905, the
   badge starts at 936), so that is what it gets.
   --------------------------------------------------------------------- */
.ohb2-rto-badge-col {
    flex: 0 0 240px;
}
.ohb2-rto-badge-col img {
    width: 240px;
    max-width: 100%;
}
.ohb2-rto-checklist {
    flex: 1 1 auto;
    min-width: 0;
}
@media screen and (max-width: 900px) {
    .ohb2-rto-badge-col { flex: 0 0 auto; }
    .ohb2-rto-badge-col img { width: 200px; }
}

/* ---------------------------------------------------------------------
   2. PAY-OVER-TIME INTRO — centred here, left-aligned in design-10.
   (The h1 above it stays centred, as drawn.)
   --------------------------------------------------------------------- */
.ohb2-rto-intro-inner > p {
    text-align: left;
}

/* ---------------------------------------------------------------------
   3. ABOUT — the two-column split.

   design-11, every sub-section (Engineer Certified, Buy or Rent-to-Own,
   Free Delivery, 5 Year Warranty, ...):
       text column   x 257..~634   =  377/577 -> 65.3% of the column
       gutter                          24px   ->  2.6%
       photo         x 888..1181   =  293px   -> 31.7%
   Shipped: 58% / 4.3% / 37.7% — the photo was too big, the gutter nearly
   twice the drawn width, and the copy squeezed into a measure the design
   never intended.
   --------------------------------------------------------------------- */
.ohb2-ohb-sub-body {
    gap: 26px;
}
.ohb2-ohb-sub-body .ohb2-ohb-subsection-photo {
    flex: 0 0 296px;
}
.ohb2-ohb-sub-text-col {
    flex: 1 1 auto;
    min-width: 0;
}
.ohb2-about-two-col {
    gap: 26px;
}
.ohb2-about-two-col-photo {
    flex: 0 0 296px;
}
.ohb2-about-two-col-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Section headings on About are drawn centred across the whole 926
   column, not centred inside whichever column happens to hold them. The
   ones in .ohb2-ohb-sub-h2-centered already are; the two
   .ohb2-about-two-col sections were not, because their h2 lived inside
   the text column. The blade now lifts them out — this styles them
   exactly as the in-column rule did. */
.ohb2-about-two-col-h2 {
    color: #1A567A;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    margin: 0 0 26px; /* #23 section-heading standard */
}

/* Sub-section CTAs: the deck's 342 x 56, not shrink-to-fit.
   Live they measured 205.2 / 211.3 / 246.7 wide — each one a different
   width because each one was sized by its own label. design-11 draws
   SHOP ONLINE, 3D SHED BUILDER, LEARN MORE and SEE IT IN ACTION all at
   342 x 56, left-aligned on the text column's edge. */
.ohb2-about-section .ohb2-btn-blue,
.ohb2-about-section .ohb2-btn-gold,
.ohb2-ohb-subsection .ohb2-btn-blue,
.ohb2-ohb-subsection .ohb2-btn-gold,
.ohb2-about-two-col-text a.ohb2-btn-gold,
.ohb2-ohb-sub-text-col a.ohb2-btn-blue,
.ohb2-ohb-sub-text-col a.ohb2-btn-gold {
    display: inline-flex;
    width: 342px;
    max-width: 100%;
    line-height: 1.2;
    padding: 14px 16px;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------
   4. CONTACT — "Visit or Call Us" was on a 30px rhythm, drawn at 20px.

   design-12: business name / street / city-state-zip / Main all sit on a
   20px baseline with no paragraph gap between them, then a 41px break
   before "Business Hours", whose seven rows run on the same 20px. Ours
   printed each of those as a full paragraph, so a four-line address block
   occupied 120px instead of 80 and the column ran ~100px long.
   --------------------------------------------------------------------- */
.ohb2-contact-info-col > p {
    margin: 0;
    line-height: 20px;
}
.ohb2-contact-info-col .ohb2-contact-hours {
    margin-top: 21px;
}
.ohb2-contact-hours-row {
    line-height: 20px;
    margin: 0;
}

/* --- (iv) follow-up: the grey About section carries its own class, so the
   CTA sizing above missed SHOP ONLINE. --- */
.ohb2-about-section-gray .ohb2-btn-blue,
.ohb2-about-section-gray .ohb2-btn-gold,
.ohb2-about-section-gray .ohb2-about-two-col-text a {
    display: inline-flex;
    width: 342px;
    max-width: 100%;
    line-height: 1.2;
    padding: 14px 16px;
    box-sizing: border-box;
}

/* --- (iv) follow-up, two corrections to the block above ---------------

   (a) The refit pass had already pinned
       `.ohb2-ohb-sub-body .ohb2-ohb-subsection-photo { flex: 1 1 0 !important }`
       to stop the photo spilling past the 940 measure. Same specificity as
       my rule but !important, so mine lost — and with the text column now
       `flex: 1 1 auto` the photo collapsed to zero. Restated at the same
       weight, on the drawn 296px (design-11: 293px on a 926 column).

   (b) The two About headings the blade now lifts out of their text column
       are direct children of a full-bleed <section>, so they need the same
       940 measure the two-column row below them carries.
   --------------------------------------------------------------------- */
.ohb2-ohb-sub-body .ohb2-ohb-subsection-photo {
    flex: 0 0 296px !important;
    min-width: 0 !important;
}
@media screen and (max-width: 700px) {
    .ohb2-ohb-sub-body .ohb2-ohb-subsection-photo {
        flex: none !important;
        width: 100% !important;
    }
}
.ohb2-about-two-col-h2 {
    max-width: var(--ohb2-col);
    margin: 0 auto 26px; /* #23 section-heading standard */
}

/* --- (iv) follow-up: the last three About CTAs that were sized by their
   own label rather than by the deck.

   `.ohb2-about-two-col-text a.ohb2-btn-gold` (3D SHED BUILDER) and the
   About promo duo both carry width/padding at !important from earlier
   passes, so they need the same weight to come onto the drawn 342 x 56.
   The warranty pair keeps its two-up row but each half now fills it.
   --------------------------------------------------------------------- */
.ohb2-about-two-col-text a.ohb2-btn-gold {
    width: 342px !important;
    max-width: 100% !important;
    padding: 14px 16px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}
.ohb2-about-promo-pane .ohb2-btn-gold,
.ohb2-about-promo-duo .ohb2-btn-gold {
    width: 342px !important;
    max-width: 100% !important;
    padding: 13px 16px !important;
    line-height: 1.15 !important;
    box-sizing: border-box !important;
}
.ohb2-warranty-btn-row {
    gap: 14px;
}
/* #26/#28: `flex: 1 1 0; min-width: 0` forced both buttons onto one line at
   whatever width was going, so between the 620px stack point and about 820px
   each got narrow enough to wrap "Written Warranty" onto two lines. A real
   flex-basis lets the row wrap to one button per line when the pair no longer
   fits, which needs no breakpoint and cannot be caught out by a longer label.
   220px is the widest of the two labels at 18px plus its padding. */
.ohb2-warranty-btn-row a {
    flex: 1 1 220px;
    min-width: 220px;
    line-height: 1.2;
    padding: 14px 12px;
    box-sizing: border-box;
    text-align: center;
}

/* Mike, 10/2 mobile review: "These buttons are overly large in the Warranty
   section of the About Us page." They were 350 x 220 on a 390 phone against
   a 51.6px button everywhere else on the site.

   Cause, and it is the flex-basis above, not a height anywhere: at 620px the
   row flips to flex-direction:column (see the breakpoint higher up this
   file), and in a column the main axis is vertical -- so `flex: 1 1 220px`
   stops meaning "at least 220px wide" and starts meaning "220px TALL, and
   grow". Two buttons then split the row's height between them. The 220 was
   written for the row direction, where it does the useful job of wrapping
   the pair to one-per-line before "Written Warranty" can break in two.

   So the basis is only neutralised where the axis has turned, and nothing
   about the desktop row changes. `flex: 0 0 auto` lets each button take its
   content height, which is the standard ohb2 button at 18px/15px-24px =
   51.6px, the same height as every other button on the page.

   Side by side was measured and rejected, not assumed: at 390 the row is
   350px, so a pair with the 14px gap gets 168px each, and "Written
   Warranty" rendered at the standard 18px/700 plus its own 48px of side
   padding needs 230.3px. It would wrap inside the button, which Sara ruled
   out, and shrinking the type to force it would miss the brief ("normal
   ohb2 button size"). Stacked at normal height it is. */
@media screen and (max-width: 620px) {
    .ohb2-warranty-btn-row a {
        flex: 0 0 auto;
        min-width: 0;
    }
}

/* --- (iv) round 2: the About promo duo runs the same brochure asset, so
   it loses the same 21% to the padding baked into the JPEG. Its tile is a
   fixed 140px-tall flex box rather than a width-driven slot, so the
   compensation goes on the height (140 x 1.264 = 177) and the artwork,
   which is 74% of the asset's height, lands back at the drawn 140 inside
   the same box. Artwork width goes 210 -> 266. --- */
.ohb2-about-promo-device {
    overflow: hidden;
}
.ohb2-about-promo-device img {
    display: block;
    width: auto;
    max-width: none;
    height: 177px;
    max-height: none;
    margin-left: 0;
}

/* --- (iv) follow-up: zeroing the margin was not enough. The address
   lines were still 40px apart because the theme's global paragraph rule
   also puts `padding: 0 0 20px` on them, and each <p> is one line in a
   20px line box. design-12 runs the four lines consecutively on a 20px
   baseline, so the padding goes too. Business Hours keeps its break via
   .ohb2-contact-hours' own 21px margin-top. --- */
.ohb2-contact-info-col > p {
    padding: 0;
}


/* Unified button corner radius — see the measured note in ohb2.css.
   Repeated here because ohb2-pages.css loads after ohb2.css. */
.ohb2-btn-gold,
.ohb2-btn-blue,
.ohb2-btn-outline,
.ohb2-body .ohb2-contact-submit-wrap button[type="submit"] {
    border-radius: 7px;
}


/* Per-family button radius — see the measured table in ohb2.css, PASS
   2026-09-01 (v). Repeated here because this file loads AFTER ohb2.css on
   its pages, so the unified 7px block above must not re-round the three
   families the deck draws square. */
.ohb2-body .ohb2-hero-cta-btn,
.ohb2-body .ohb2-inv-card .ohb2-btn-gold,
.ohb2-body .ohb2-building-card .ohb2-btn-gold,
.ohb2-body .ohb2-card-btn-row .ohb2-btn-outline,
.ohb2-body .ohb2-card-btn-row .ohb2-btn-blue,
.ohb2-body .ohb2-card-btn-row > a {
    border-radius: 0;
}
.ohb2-body .ohb2-builder-cta-band .ohb2-btn-gold,
.ohb2-body .ohb2-bldg-delivery-cta .ohb2-btn-blue,
.ohb2-body .ohb2-bldg-delivery-cta > a {
    border-radius: 6px;
}
.ohb2-body .ohb2-design-card-customize a,
.ohb2-body .ohb2-designs-customize-btn {
    border-radius: 5px;
}

/* Cards crop square (Sara 2026-09-01); the detail page keeps no-crop. */
.ohb2-inv-card-photo img,
.ohb2-building-card .ohb2-card-thumb img {
    object-fit: cover !important;
    object-position: center;
}

/* =====================================================================
   PASS 2026-09-01 (18b) — RENT-TO-OWN: the form band's rhythm, its
   SUBMIT, and the closing navy CTA pair

   Companion to block (18) at the end of ohb2.css, which carries the
   measurement notes. This file loads after ohb2.css and already sets
   `.ohb2-rto-form-section { padding-top: 48px !important }`, so the
   band's own numbers have to live here to win.

   1. THE BAND. Same drawn rhythm as the shared quote band, mapped onto
      this band's order (title, subtitle, fields, message, button, call
      line): 66 top padding, 5 under the title, 12 under the subtitle,
      13 under the field row, 19 under the message box, 10 above the
      call line, 72 bottom. Sara's shot: an oversized gap between "Tell
      us how we can help." and the fields -- that gap was the subtitle's
      20px padding-bottom plus its 20px margin-bottom plus the form
      wrapper's 15px padding, 55px of stacked air where the deck draws
      13. And the band ended 50px under the call line where the deck
      draws 73.

   2. SUBMIT. It was 300x56 at 26px, the only button in the theme at
      that size. The deck's band button is 334x52 with a 22px label, so
      SUBMIT joins the gold band-button family: 22px, 13/34 padding,
      300 min-width, the theme's one 7px radius.

   3. THE CLOSING CTA PAIR. Sara: "these buttons should match the size
      at the bottom of the page too". The deck draws this navy pair
      (design-10, same closing composition) as two 441 x 58 bars with a
      42 gap across the 924 column -- 47.7% each, single-line labels.
      Ours were 44% at a fixed 24px, which is single-line at 1440 but
      wraps to two lines and 87px tall at 768 and again below 700; that
      two-line state is what her screenshot caught. The label size now
      scales with the viewport (1.67vw, the ratio that gives the drawn
      24px at 1440) so the labels stay on one line at every width, and
      below 700 each bar simply takes the full column.
   ===================================================================== */
.ohb2-rto-form-section {
    padding-top: 66px !important;
    padding-bottom: 72px !important;
}
.ohb2-rto-form-inner h2 {
    padding-bottom: 0 !important;
    margin: 0 0 5px !important;
}
.ohb2-rto-form-subtext {
    padding-bottom: 0 !important;
    margin: 0 0 12px !important;
}
.ohb2-rto-form-inner form.simple {
    padding: 0 15px !important;
}
.ohb2-rto-form-row {
    margin-bottom: 13px !important;
}
.ohb2-rto-form-inner form.simple textarea {
    margin-bottom: 19px !important;
}
.ohb2-rto-form-inner .ohb2-rto-submit-btn {
    display: inline-block !important;
    width: auto !important;
    min-width: 300px !important;
    padding: 13px 34px !important;
    font-size: 22px !important;
    letter-spacing: 0.01em !important;
    border-radius: 7px !important;
}
.ohb2-rto-call-note {
    margin: 10px 0 0 !important;
}

.ohb2-rto-btn-row {
    gap: 42px !important;
    justify-content: center !important;
}
.ohb2-rto-btn-row .ohb2-btn-gold,
.ohb2-rto-btn-row .ohb2-btn-blue {
    flex: 0 1 47.7% !important;
    max-width: 47.7% !important;
    padding: 15px 24px !important;
    font-size: clamp(15px, 1.67vw, 24px) !important;
    line-height: 1.15 !important;
}

@media screen and (max-width: 700px) {
    .ohb2-rto-form-section {
        padding-top: 40px !important;
        padding-bottom: 44px !important;
    }
    .ohb2-rto-form-inner .ohb2-rto-submit-btn {
        font-size: 19px !important;
        min-width: 0 !important;
        width: 100% !important;
        padding: 13px 24px !important;
    }
    .ohb2-rto-btn-row {
        gap: 14px !important;
    }
    .ohb2-rto-btn-row .ohb2-btn-gold,
    .ohb2-rto-btn-row .ohb2-btn-blue {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        font-size: 18px !important;
    }
}

/* ---------------------------------------------------------------------
   ABOUT PROMO DUO — design p11.

   The About page used to carry a local copy of this row under its own
   .ohb2-about-promo-* classes, and the copy had drifted into something the
   deck never draws: a 1px box around each column, a grey wash behind the
   right one, a square grey-bordered photo, and the photo stacked above the
   heading. All of those rules are gone; the markup now uses the inventory
   promo row's classes, which already draw the deck's treatment — heading,
   rounded navy-framed photo, navy CTA, and a brochure device floating loose
   on white with no frame and no box.

   Only the geometry is About-specific. Measured off the design crop and
   rescaled so the page is 1440px wide:

     frame          476 x 241 outer
     button         334 wide, centred under its column
     column pitch   531 centre to centre

   which is 476px columns with a 55px gutter, i.e. wider than the inventory
   row's 445. That width is the point: the deck sets this heading as
   "Shop Our Ready To / Deliver Shed Inventory!", two lines, and at 445 the
   second line broke to a third, which is what left the panes looking ragged
   and boxed.
   --------------------------------------------------------------------- */
/* 2026-09-24: max-width was `var(--ohb2-col-wide)`, a hardcoded 1281px literal
   and the ONLY use of that variable anywhere in the theme. It has always been
   wider than the page column, and dc46dac scaled it with the column
   (1047 -> 1281) while the column went 940 -> 1150 — so on /about this one
   section now sits 65px PROUD of the column on each side, against a page where
   every other section (header, nav, intro, testimonials, quote, FAQ, footer)
   measures exactly 145..1295 at 1440. At a 1280 viewport it runs the full width
   of the window, which is what reads as the brochure block spilling out of the
   page.

   `--ohb2-col-gutter` is `--ohb2-col + 40px`, and this element already carries
   `padding: 0 20px` from .ohb2-promo-duo-inv under border-box sizing, so this
   lands the two panes on the column edges like every other section. */
.ohb2-promo-duo-inv.ohb2-promo-duo-about {
    max-width: var(--ohb2-col-gutter);
    gap: 55px;
}
.ohb2-promo-duo-inv.ohb2-promo-duo-about .ohb2-promo-pane-inv h3 {
    font-size: 36px;
    /* margin-bottom deliberately NOT set here any more (#23, 2026-09-21).
       The promo-duo heading's space below is owned by one rule for the whole
       family, at the end of ohb2.css -- About was the page reading 25px
       while the same component read 22/23/24 elsewhere. Font size stays
       page-specific: it is measured off this page's wider 476px column and
       the two-line wrap depends on it. */
}
.ohb2-promo-duo-inv.ohb2-promo-duo-about .ohb2-promo-pane-img {
    aspect-ratio: 476 / 241;
}

@media screen and (max-width: 900px) {
    .ohb2-promo-duo-inv.ohb2-promo-duo-about {
        gap: 30px;
    }
    .ohb2-promo-duo-inv.ohb2-promo-duo-about .ohb2-promo-pane-inv h3 {
        font-size: 26px;
        /* margin-bottom: see the note above -- the family rule owns it. */
    }
}

/* =====================================================================
   PASS 2026-09-24 — the reviews band with no reviews to show.

   Mike front-end #9: "if a dealer fails to load any reviews...can we comment
   out this entire section?" and back-end #22, the seeded sample quotes.
   Sara's call, 2026-09-24, settles the case the triage left open:

     no reviews, no review link  ->  no band at all (already the behaviour;
                                     the blade's @if has always guarded this)
     no reviews, review link set ->  the LEAVE US A REVIEW button alone,
                                     centred, with no heading and no empty
                                     panel -- this block
     real reviews               ->  unchanged

   The dealer who has collected no reviews yet is exactly the dealer who most
   needs the CTA, so it stays; what goes is the "What Our Customers Say About
   Us" heading promising quotes that are not there, and the 50/50 band padding
   that made a lone button look like an empty panel. `.ohb2-review-btn-wrap`
   also drops the 10px it carries to clear the card row, since there is no
   card row above it here.
   ===================================================================== */
.ohb2-about-testimonials-section.ohb2-about-testimonials-cta-only {
    padding: 34px 20px;
}
.ohb2-about-testimonials-section.ohb2-about-testimonials-cta-only .ohb2-review-btn-wrap {
    margin-top: 0;
}