/* ==========================================================================
   OCMP marketing site - production styles
   --------------------------------------------------------------------------
   Loaded after web/css/style.css. Every colour comes from the CSS custom
   properties App\Acme\Design\PaletteRegistry emits on <html>, so the whole site
   follows the visitor palette (THEME_CHANGE) with no palette specific rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Rhythm - the legacy template used 1.5em section padding, which read as
   cramped. Sections now breathe and carry a tinted background instead of white.
   -------------------------------------------------------------------------- */
#ocmp-about,
#ocmp-overview,
#ocmp-features,
#ocmp-pricing,
#ocmp-why-us,
#ocmp-explore,
#ocmp-contact,
#ocmp-footer {
    padding: clamp(56px, 7vw, 104px) 0;
}

#ocmp-about { background: var(--surface); }
#ocmp-overview { background: #fff; }
#ocmp-features { background: var(--surface-2); }
#ocmp-pricing { background: var(--surface); }
#ocmp-why-us { background: #fff; }
#ocmp-contact { background: var(--surface-2); }

/* --------------------------------------------------------------------------
   2. Type + colour
   -------------------------------------------------------------------------- */
body { color: var(--body); }

h1, h2, h3, h4, h5, h6 { color: var(--ink); }

.ocmp-heading h2 {
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: -.02em;
}

.ocmp-heading p { color: var(--body); }

.ocmp-heading .section-title::after { background: var(--accent); }

a { color: var(--accent-deep); }
a:hover, a:focus, a:active { color: var(--accent-hover); }

::selection { background: var(--accent); color: var(--on-accent); }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    color: var(--on-accent) !important;
}

/* eyebrow label above section headings */
.ocmp-eyebrow {
    display: block;
    margin-bottom: 14px;
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
}

/* style.css sets .ocmp-heading span to 12px at a higher specificity, which
   beat a lone .ocmp-eyebrow class. Match the real size in both contexts. */
.ocmp-heading .ocmp-eyebrow,
.ocmp-heading span.ocmp-eyebrow {
    margin-bottom: 14px;
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing: .22em;
}

/* --------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */
#ocmp-header.ocmp-cover {
    min-height: 640px;
    background-position: center;
}

#ocmp-header .overlay {
    background: var(--band);
    opacity: .94;
}

.ocmp-hero { padding: 120px 0 30px; }

#ocmp-header h1 {
    max-width: 18ch;
    margin-bottom: 16px;
    font-size: clamp(2.25em, 3.6vw, 3.75em);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #fff;
}

.ocmp-hero__lead {
    max-width: 52ch;
    margin-bottom: 24px;
    font-size: 1.45em;
    line-height: 1.6;
    color: rgba(255, 255, 255, .86);
}





/* Buttons under the hero video: spaced from the frame and flush with its right edge */
.ocmp-hero__cta {
    padding-top: 22px;
    text-align: right;
}

.ocmp-hero__cta .btn {
    margin: 0 8px 10px 0;
    padding: 14px 28px;
    font-size: 1.2em;
    border-radius: 999px;
}

/* Nothing after the buttons, so the last one lines up with the video frame edge */
.ocmp-hero__cta .btn:last-child { margin-right: 0; }

.ocmp-btn-ghost {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, .55) !important;
    color: #fff !important;
}

.ocmp-btn-ghost:hover { background: rgba(255, 255, 255, .14) !important; }

.ocmp-video-frame {
    border-radius: var(--radius);
    padding: 10px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.ocmp-video-frame .embed-responsive {
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}





/* --------------------------------------------------------------------------
   4. Capability ticker under the hero
   The blade renders the list twice; translating the track by 50% loops it
   seamlessly. It pauses on hover and stops completely for reduced motion.
   -------------------------------------------------------------------------- */
.ocmp-trust {
    margin-top: 10px;
    padding: 26px 0;
    background: rgba(255, 255, 255, .07);
    border-top: 1px solid rgba(255, 255, 255, .22);
    border-bottom: 1px solid rgba(255, 255, 255, .22);
    /* Fade the strip itself (tint plus top/bottom rules) into the hero at both
       ends, mirroring the text mask below so the row never ends on a hard edge. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ocmp-ticker {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ocmp-ticker__track {
    display: flex;
    align-items: center;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: ocmp-ticker-scroll 44s linear infinite;
}

.ocmp-ticker__track li {
    display: inline-flex;
    align-items: center;
    float: none;
    width: auto;
    padding: 0 30px;
    border: 0;
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
    color: rgba(255, 255, 255, .96);
}

/* sized against the 1.5em label: 26/20 of it */
.ocmp-ticker__track li i {
    margin-right: 12px;
    font-size: 1.3em;
    color: var(--accent);
}

.ocmp-ticker__track li:not(:last-child)::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: 60px;
    border-radius: 50%;
    background: var(--accent);
    opacity: .55;
}

.ocmp-trust:hover .ocmp-ticker__track { animation-play-state: paused; }

@keyframes ocmp-ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .ocmp-ticker__track {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        animation: none;
    }

    .ocmp-ticker__track li { padding: 6px 14px; }
    .ocmp-ticker__track li:not(:last-child)::after { margin-left: 22px; }
}
/* --------------------------------------------------------------------------
   5. Cards - the refreshed building block for features and value props
   -------------------------------------------------------------------------- */
.ocmp-grid { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.ocmp-grid__item { flex: 0 0 33.333%; max-width: 33.333%; padding: 10px; }

.ocmp-card {
    height: 100%;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.ocmp-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-ring);
    box-shadow: var(--shadow-md);
}

.ocmp-card__chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--accent-tint);
    border: 1px solid var(--accent-ring);
}

.ocmp-card__chip img { width: 26px; height: auto; }
.ocmp-card__chip i { font-size: 1.95em; line-height: 1; color: var(--accent); }
.ocmp-card h3 { margin: 0 0 8px; font-size: 1.45em; font-weight: 700; }
.ocmp-card p { margin: 0; font-size: 1.15em; line-height: 1.6; color: var(--body); }

/* --------------------------------------------------------------------------
   6. Existing template blocks, re-skinned
   -------------------------------------------------------------------------- */
.list-nav li i,
.ocmp-pricing ul li i,
.ocmp-overview .list-nav i { color: var(--accent); font-weight: 700; }

/* style.css pushes .list-nav down 50px (.mt .list-nav). In the product overview the
   heading sits directly above it, so drop the extra top margin and keep the 30px below. */
.ocmp-overview .mt .list-nav { margin-top: 0; }

.ocmp-pricing ul li.text-muted i { color: #C3C8CE; }

.ocmp-pricing .panel {
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    background: #fff;
}

.ocmp-pricing .panel-price { color: var(--ink); }
.ocmp-pricing .btn { background: var(--accent); border-color: var(--accent); color: var(--on-accent) !important; }

.simple-box {
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.ocmp-services .services-text h3 a { color: var(--ink); }
.ocmp-services .services-text p { color: var(--body); font-size: 1.15em; }
.ocmp-services img { width: 72px; height: auto; margin-bottom: 12px; }

.ribbon {
    background-image: none;
    background-color: var(--highlight);
    color: #231A06;
    text-shadow: none;
}

.ocmp-explore h4,
.ocmp-overview h3 { color: var(--ink); }

/* --------------------------------------------------------------------------
   7. Sticky header gets a scrolled state so it stops floating over white
   -------------------------------------------------------------------------- */
#sticky-menu {
    position: sticky;
    top: 0;
    z-index: 1001;
    transition: background .2s ease, box-shadow .2s ease;
}

#sticky-menu.is-scrolled {
    background: var(--ink);
    box-shadow: var(--shadow-md);
}

#sticky-menu.is-scrolled .ocmp-nav { position: relative; }

/* --------------------------------------------------------------------------
   8. Mobile - undo the legacy justified text and oversized paragraphs
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
    .ocmp-grid__item { flex: 0 0 50%; max-width: 50%; }
}

@media screen and (max-width: 768px) {
    #ocmp-header.ocmp-cover { min-height: 0; }
    .ocmp-hero { padding-top: 96px; }
    #ocmp-header h1 { max-width: none; font-size: 2.25em; }

    .ocmp-hero__lead { font-size: 1.3em; }

    .ocmp-hero__cta { padding-top: 14px; }

    .ocmp-hero__cta .btn {
        display: block;
        width: 100%;
        margin: 0 0 10px;
        text-align: center;
    }
    .ocmp-grid__item { flex: 0 0 100%; max-width: 100%; }
    .ocmp-card { padding: 22px; }

    .ocmp-about-text p,
    .ocmp-feature-text p,
    .ocmp-feature-heading,
    .mt p {
        text-align: left !important;
        font-size: inherit !important;
    }
}
/* --------------------------------------------------------------------------
   9. Pricing teaser, contact block and form status
   -------------------------------------------------------------------------- */


.ocmp-teaser { position: relative; }

.ocmp-teaser__from {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 5px 12px;
    border: 1px solid var(--accent-ring);
    border-radius: 999px;
    background: var(--accent-tint);
    font-size: 1em;
    font-weight: 700;
    color: var(--accent-deep);
}

.ocmp-teaser__from i { margin-right: 7px; font-size: 1.15em; }

.ocmp-teaser__ribbon {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 5px 12px;
    border: 1px solid #DE9A12;
    border-radius: 999px;
    background: linear-gradient(135deg, #FFD166 0%, #F0A41C 100%);
    box-shadow: 0 2px 6px rgba(160, 100, 0, .25);
    color: #3A2405;
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Scoped to .ocmp-teaser so the generic .ocmp-card p rule (higher specificity:
   one class + one element) cannot flatten the headline price to 1.15em */
.ocmp-teaser .ocmp-teaser__price {
    margin: 8px 0 6px;
    font-size: 3.45em;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--ink);
}

/* sized against the 3.45em price: 15/46 of it */
.ocmp-teaser .ocmp-teaser__price span {
    display: inline-block;
    margin-left: 10px;
    font-size: 0.33em;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    color: var(--ink-2);
}

.ocmp-teaser .ocmp-teaser__lots {
    margin: 0 0 12px;
    font-size: 1.05em;
    font-weight: 600;
    color: var(--accent-deep);
}

.ocmp-pricing__cta { margin-top: 34px; }
.ocmp-pricing__cta p { margin-top: 12px; color: var(--ink-2); }

/* style.css styled #ocmp-contact as a dark band, so undo its white text and inputs */
#ocmp-contact .ocmp-heading h2 { color: var(--ink); margin-bottom: 20px !important; }
#ocmp-contact .ocmp-heading p { color: var(--body); }
#ocmp-contact h3 { margin-bottom: 18px; font-size: 1.5em; color: var(--ink); }

#ocmp-contact .form-control {
    min-height: 48px;
    height: auto;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--border) !important;
    border-radius: 8px;
    color: var(--ink);
    font-size: 1.15em !important;
}

#ocmp-contact .form-control::placeholder { color: var(--ink-2); opacity: .7; }

#ocmp-contact .form-control:focus {
    background: #fff;
    border-color: var(--accent-ring) !important;
    box-shadow: 0 0 0 3px var(--accent-tint);
}

#ocmp-contact textarea.form-control { min-height: 150px; }

#ocmp-contact label {
    display: block;
    margin-bottom: 6px;
    font-size: 1em;
    font-weight: 600;
    color: var(--ink);
}

#ocmp-contact label span { font-weight: 400; color: var(--ink-2); }

#ocmp-contact .btn.btn-primary {
    height: 54px;
    padding: 0 34px;
    border-radius: 999px;
    background: var(--accent) !important;
    color: var(--on-accent) !important;
    font-weight: 600;
    text-transform: none;
}

#ocmp-contact .btn.btn-primary:hover { background: var(--accent-hover) !important; }

.ocmp-contact-info {
    padding: 28px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.ocmp-contact-info ul { margin: 0; padding: 0; }

.ocmp-contact-info ul li {
    position: relative;
    margin: 0 0 22px 0;
    padding: 0 0 0 40px;
    list-style: none;
    font-size: 1.15em;
    color: var(--body);
}

.ocmp-contact-info ul li:before {
    position: absolute;
    left: 0;
    top: .05em;
    font-family: 'icomoon';
    line-height: 1;
    color: var(--accent);
}

.ocmp-contact-info ul li a { color: var(--body); }
.ocmp-contact-info ul li a:hover { color: var(--accent-deep); }

.ocmp-contact-note { margin-top: 16px; font-size: 1.05em; color: var(--ink-2); }

.ocmp-status {
    display: none;
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 1.15em;
}

/* Visible confirmation for pages that opt in with data-human-badge
   (see web/js/human-check.js and specs/human-check.md) */
.oc-human-badge {
    margin: 10px 0 0;
    font-size: 1.05em;
    text-align: right;
    color: var(--body);
}

.oc-human-badge[data-human-state="checking"] { opacity: .6; }

.ocmp-status--pending,
.ocmp-status--success,
.ocmp-status--error { display: block; }

.ocmp-status--pending { background: var(--surface-2); color: var(--body); }
.ocmp-status--success { background: var(--accent-tint); border: 1px solid var(--accent-ring); color: var(--ink); }
.ocmp-status--error { background: #FDECEC; border: 1px solid #F5C2C0; color: #8A1C17; }

@media screen and (max-width: 768px) {
    .ocmp-teaser .ocmp-teaser__price { font-size: 2.55em; }
    /* keep the same 15/46 ratio against the smaller mobile price */
    .ocmp-teaser .ocmp-teaser__price span { font-size: 0.44em; }
    .ocmp-contact-info { margin-bottom: 24px; padding: 22px; }
    #ocmp-contact .btn.btn-primary { width: 100%; }
}
/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
#ocmp-footer {
    background: var(--ink);
    color: rgba(255, 255, 255, .74);
}

#ocmp-footer h4 {
    margin: 0 0 16px;
    font-size: 1.05em;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
}

#ocmp-footer p { margin: 0; font-size: 1.15em; line-height: 1.65; }
#ocmp-footer ul { margin: 0; padding: 0; list-style: none; }
#ocmp-footer ul li { margin-bottom: 10px; font-size: 1.15em; }

/* Icons sit just left of each Get in touch line in the right aligned contact column */
#ocmp-footer .ocmp-footer__contact ul li i {
    margin-right: 10px;
    color: var(--accent);
}
#ocmp-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
#ocmp-footer a:hover,
#ocmp-footer a:focus { color: #fff; text-decoration: underline; }

#ocmp-footer .ocmp-social-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

#ocmp-footer .ocmp-social-icons li { margin: 0; }
#ocmp-footer .ocmp-social-icons img { display: block; border-radius: 6px; }

.ocmp-footer__top {
    margin-bottom: 24px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

@media screen and (max-width: 768px) {
    #ocmp-footer .col-sm-12 { margin-bottom: 26px; }
    #ocmp-footer .text-right { text-align: left !important; }
}

/* ticker and eyebrow scale on phones */
@media screen and (max-width: 768px) {
    .ocmp-eyebrow,
    .ocmp-heading .ocmp-eyebrow,
    .ocmp-heading span.ocmp-eyebrow { font-size: 1.2em; }
    .ocmp-trust { margin-top: 8px; padding: 20px 0; }
    .ocmp-ticker__track li { padding: 0 18px; font-size: 1.2em; }
    .ocmp-ticker__track li i { font-size: 1.25em; }
}

/* --------------------------------------------------------------------------
   11. Footer columns
   -------------------------------------------------------------------------- */
/* Explore splits into two columns of three so the middle stays tight */
.ocmp-footer__menu {
    column-count: 2;
    column-gap: 26px;
}

/* Get in touch hugs the right hand gutter, mirroring the brand block on the left.
   The column keeps its 15px bootstrap padding, so the right edge of the text lines
   up with the left edge of the OCMP block. */
.ocmp-footer__contact { text-align: right; }

/* The social and legal list is a flex row, so text-align cannot push it over */
#ocmp-footer .copyright .ocmp-social-icons {
    justify-content: flex-start;
}

#ocmp-footer .copyright .text-right .ocmp-social-icons {
    justify-content: flex-end;
}

@media screen and (max-width: 768px) {
    .ocmp-footer__contact { text-align: left; }
    #ocmp-footer .copyright .text-right .ocmp-social-icons { justify-content: flex-start; }
    .ocmp-footer__menu { column-gap: 20px; }
}