.opal-lp {
    --op-primary: #1976d2;
    --op-primary-dark: #0d47a1;
    --op-accent: #ff6f3c;
    --op-navy: #0b1f33;
    /* placeholder: hero/dark-section background */
    --op-navy-soft: #12283f;
    /* placeholder: hero card background */
    --op-bg: #ffffff;
    --op-bg-soft: #f4f8fc;
    --op-text: #263238;
    --op-text-muted: #5b6b73;
    --op-border: #e1e8ef;
    --op-font-heading: 'Poppins', 'Segoe UI', Arial, sans-serif;
    --op-font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
    --op-radius: 12px;

    font-family: var(--op-font-body);
    color: var(--op-text);
    background: var(--op-bg);
    line-height: 1.7;
    font-size: 17px;
}

.opal-lp *,
.opal-lp *::before,
.opal-lp *::after {
    box-sizing: border-box;
}
.opal-lp section:nth-child(2n){
    background-color: var(--op-bg-soft);
}
.opal-lp .op-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

.opal-lp h1,
.opal-lp h2,
.opal-lp h3 {
    font-family: var(--op-font-heading);
    margin: 0;
}

.opal-lp p {
    margin: 0 0 16px;
}

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

.opal-lp section {
    padding: 34px 0;
}

.opal-lp .op-eyebrow {
    font-family: var(--op-font-heading);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--op-accent);
    margin-bottom: 12px;
}

/* ---------- HERO ---------- */
.opal-lp .op-hero {
    background: linear-gradient(160deg, var(--op-navy) 0%, var(--op-primary-dark) 130%);
    padding: 84px 0 0;
    color: #ffffff;
}

.opal-lp .op-hero h1 {
    font-size: 2.5rem;
    line-height: 1.22;
    font-weight: 700;
    margin-bottom: 22px;
}

.opal-lp .op-hero p.op-lede {
    font-size: 1.08rem;
    color: #cfe0f2;
    margin-bottom: 32px;
}

.opal-lp .op-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 56px;
}

/* ---------- STAT STRIP (signature element, drawn from the Core Web Vitals copy) ---------- */
.opal-lp .op-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--op-navy-soft);
    border-radius: var(--op-radius) var(--op-radius) 0 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
    overflow: hidden;
}

.opal-lp .op-stat {
    padding: 26px 20px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.opal-lp .op-stat:last-child {
    border-right: none;
}

.opal-lp .op-stat .op-stat-num {
    display: block;
    font-family: var(--op-font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffffff;
}

.opal-lp .op-stat .op-stat-label {
    display: block;
    font-size: 0.78rem;
    color: #9fb7cf;
    margin-top: 4px;
}

/* ---------- BUTTONS ---------- */
.opal-lp .op-btn {
    display: inline-block;
    font-family: var(--op-font-heading);
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    padding: 14px 32px;
    border-radius: 999px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.opal-lp .op-btn-primary, .opal-lp .op-btn-primary a {
    background: var(--op-accent);
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(255, 111, 60, 0.35);
    border-radius: 0px;
}

.opal-lp .op-btn-primary:hover, .opal-lp .op-btn-primary a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(255, 111, 60, 0.45);
}

.opal-lp .op-btn-ghost, .opal-lp .op-btn-ghost a {
    background: transparent;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    border-radius: 0px;
}

.opal-lp .op-btn-ghost:hover, .opal-lp .op-btn-ghost a:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0px;
}

/* ---------- SECTION HEADINGS ---------- */
.opal-lp .op-section-head {
    max-width: 680px;
    margin: 0 0 36px;
}

.opal-lp .op-section-head h2 {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--op-primary-dark);
    line-height: 1.3;
}

.opal-lp .op-section-head p {
    color: var(--op-text-muted);
    margin-top: 10px;
}

.opal-lp .op-soft {
    background: var(--op-bg-soft);
}

/* ---------- CARD GRID (used for bullet-list offerings) ---------- */
.opal-lp .op-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.opal-lp .op-grid.op-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.opal-lp .op-card {
    background: #ffffff;
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius);
    padding: 24px;
}

.opal-lp .op-soft .op-card {
    background: #ffffff;
}

.opal-lp .op-card h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--op-primary);
    margin-bottom: 8px;
    padding-left: 16px;
    border-left: 3px solid var(--op-accent);
}

.opal-lp .op-card p {
    color: var(--op-text-muted);
    font-size: 0.96rem;
    margin: 0;
}

/* Core Web Vitals numbered cards */
.opal-lp .op-cwv-card {
    position: relative;
    padding-top: 30px;
}

.opal-lp .op-cwv-num {
    position: absolute;
    top: -14px;
    left: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--op-primary);
    color: #fff !important;
    font-family: var(--op-font-heading);
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- BODY COPY BLOCK ---------- */


.opal-lp .op-copy p {
    color: var(--op-text);
}

/* ---------- CALLOUT / QUOTE (ready for any blockquote) ---------- */
.opal-lp blockquote {
    margin: 28px 0;
    padding: 24px 26px 24px 50px;
    background: var(--op-bg-soft);
    border-left: 5px solid var(--op-accent);
    border-radius: var(--op-radius);
    font-family: var(--op-font-heading);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--op-primary-dark);
    position: relative;
}

.opal-lp blockquote::before {
    content: "\201C";
    position: absolute;
    top: 6px;
    left: 16px;
    font-family: Georgia, serif;
    font-size: 2.6rem;
    color: var(--op-primary);
    opacity: 0.3;
}

.opal-lp blockquote cite {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-size: 0.88rem;
    color: var(--op-text-muted);
}

/* ---------- MID-PAGE CTA BAND ---------- */
.opal-lp .op-cta-band {
    background: linear-gradient(120deg, var(--op-primary) 0%, var(--op-primary-dark) 100%);
    border-radius: var(--op-radius);
    padding: 40px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    color: #ffffff;
}

.opal-lp .op-cta-band h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.opal-lp .op-cta-band p {
    color: #d8e7f7;
    margin: 0;
}

/* ---------- FAQ (accordion, no JS needed) ---------- */
.opal-lp .op-faq {
    max-width: 760px;
    margin: 0 auto;
}

.opal-lp details.op-faq-item {
    border-bottom: 1px solid var(--op-border);
    padding: 18px 0;
}

.opal-lp details.op-faq-item summary {
    font-family: var(--op-font-heading);
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--op-primary-dark);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.opal-lp details.op-faq-item summary::-webkit-details-marker {
    display: none;
}

.opal-lp details.op-faq-item summary::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 1.4rem;
    color: var(--op-accent);
    line-height: 1;
    transition: transform 0.2s ease;
}

.opal-lp details.op-faq-item[open] summary::after {
    content: "\2212";
}

.opal-lp details.op-faq-item p {
    margin-top: 12px;
    color: var(--op-text-muted);
    font-size: 0.96rem;
}

/* ---------- FINAL CTA ---------- */
.opal-lp .op-final-cta {
    background: var(--op-navy) !important;
    color: #ffffff;
    text-align: center;
    padding: 72px 24px;
}

.opal-lp .op-final-cta h2 {
    font-size: 2rem;
    margin-bottom: 14px;
}

.opal-lp .op-final-cta p {
    color: #b9cde3;
    max-width: 560px;
    margin: 0 auto 30px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 720px) {
    .opal-lp section {
        padding: 44px 0;
    }

    .opal-lp .op-hero {
        padding-top: 56px;
    }

    .opal-lp .op-hero h1 {
        font-size: 1.8rem;
    }

    .opal-lp .op-stat-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .opal-lp .op-stat {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .opal-lp .op-grid,
    .opal-lp .op-grid.op-grid-3 {
        grid-template-columns: 1fr;
    }

    .opal-lp .op-section-head h2 {
        font-size: 1.5rem;
    }

    .opal-lp .op-cta-band {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .opal-lp .op-final-cta h2 {
        font-size: 1.5rem;
    }
}



/* =====================================================================
   OPAL INFOTECH — WIDTH FIX PATCH v2
   -----------------------------------------------------------------
   REPLACE the previous "WIDTH FIX PATCH" block with this one
   (same append location, end of your stylesheet). This version adds
   !important to the hero heading and paragraph rules specifically,
   because your theme has its own h1/p styling that was winning the
   specificity fight and keeping the headline flush against the
   left edge with no padding, while everything else around it
   (eyebrow, paragraph, buttons, stat strip) was correctly indented.
===================================================================== */

.opal-lp .op-hero>.op-eyebrow,
.opal-lp .op-hero>h1,
.opal-lp .op-hero>.op-lede,
.opal-lp .op-hero-actions,
.opal-lp .op-stat-strip,
.opal-lp .op-section-head,
.opal-lp .op-grid,
.opal-lp .op-cta-band,
.opal-lp .op-faq,
.opal-lp section>p {
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
    margin-bottom: 20px;
    margin-top:20px;
}

/* The theme's own h1 rule is likely also fighting over width/margin —
   this line re-asserts our intended hero title width on top of it. */
.opal-lp .op-hero>h1 {
    width: auto !important;
    max-width: 760px !important;
}

.opal-lp .op-copy {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
    margin-bottom: 30px;
    margin-top: 30px;
}

.opal-lp .op-final-cta>* {
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 600px) {

    .opal-lp .op-hero>.op-eyebrow,
    .opal-lp .op-hero>h1,
    .opal-lp .op-hero>.op-lede,
    .opal-lp .op-hero-actions,
    .opal-lp .op-stat-strip,
    .opal-lp .op-section-head,
    .opal-lp .op-grid,
    .opal-lp .op-copy,
    .opal-lp .op-cta-band,
    .opal-lp .op-faq,
    .opal-lp section>p {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

.opal-lp p:not(.op-eyebrow):not(.op-lede):not(.op-stat-num):not(.op-stat-label) {
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
}

/* Cancel the safety net for paragraphs already correctly scoped
   inside a narrower parent — prevents double-padding/shrinking. */
.opal-lp .op-card p,
.opal-lp .op-faq p,
.opal-lp .op-cta-band p,
.opal-lp .op-final-cta p {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* .op-final-cta paragraph should stay centered and narrow, per the
   original design (not full width like the safety net would allow) */
.opal-lp .op-final-cta p {
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.opal-lp .op-hero-text {
    flex: 1 1 66.66% !important;
}

.opal-lp .op-hero-image {
    flex: 1 1 33.33% !important;
}
.op-hero-columns {
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px;
}
.hentry,
.page-header,
.page-content{
    padding: 0px;
}

.opal-lp ul,
.opal-lp ol {
    max-width: 1080px !important;
    width: auto !important;
    margin: 0 auto 24px auto;
    padding-left: 20px;
    box-sizing: border-box !important;
    list-style: none;
}

.opal-lp ul li,
.opal-lp ol li {
    position: relative;
    padding: 10px 0 10px 28px;
    margin-bottom: 4px;
    border-bottom: 1px dashed var(--op-border);
    color: var(--op-text);
    font-size: 1rem;
    line-height: 1.6;
}

.opal-lp ul li:last-child,
.opal-lp ol li:last-child {
    border-bottom: none;
}

.opal-lp ul li::before {
    content: "\25CF";
    position: absolute;
    left: 0;
    top: 10px;
    color: var(--op-accent);
    font-size: 0.7rem;
    line-height: 1.7;
}

/* If the bold lead-in (e.g. "Comprehensive Website Speed Audit:")
   is wrapped in <strong>, style it like the card headings so plain
   lists still read consistently with the card-grid sections */
.opal-lp ul li strong,
.opal-lp ol li strong {
    color: var(--op-primary-dark);
    font-weight: 600;
}

@media (max-width: 600px) {

    .opal-lp ul,
    .opal-lp ol {
        margin-left: 16px !important;
        margin-right: 16px !important;
    }
}
.opal-lp .op-grid:not(.op-grid-3)>.wp-block-column:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.opal-lp .op-grid:not(.op-grid-3)>.wp-block-column:last-child:nth-child(odd) .op-card {
    margin-left: auto;
    margin-right: auto;
}

.opal-lp .op-hero a {
    color: #ffffff !important;
    /* text-decoration: underline; */
}

.opal-lp a{
    color: var(--op-primary);
}
.opal-lp .wp-block-image{
    padding-top:20px;
}