/* SHARED service-page design system (ct-* sections + hero/counters/guarantee/
   faq/reviews overrides) — used by /certified-translation/ and
   /document-translation/ (EN + SP). Content files link it EXPLICITLY (the
   dispatcher's {slug}-page.css auto-link doesn't cover shared files); every
   page using it must carry "page-template-single-landing-page-tpl" in its
   Body Class header — the scoping class for all rules here. Brand palette:
   menu blue #0272b2, teal #1bb5b7, pink #f66282, yellow #fac43e. */

/* Hero — no boxes: a deep-blue gradient overlay on the left of the photo
   carries the text directly; the photo stays visible on the right. */
.page-template-single-landing-page-tpl .service-page-header-img {
    position: relative;
}
.page-template-single-landing-page-tpl .service-page-header-img::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, rgba(3, 36, 71, 0.94) 0%, rgba(2, 74, 130, 0.80) 34%, rgba(2, 114, 178, 0.25) 62%, rgba(2, 114, 178, 0) 78%);
}
.page-template-single-landing-page-tpl .service-page-header-img .section_wrapper {
    position: relative;
    z-index: 1;
}
.page-template-single-landing-page-tpl .counters-row { z-index: 1; }

/* Kicker: small brand line with a pink dash above the H1. */
.ct-hero-kicker {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.ct-hero-kicker span {
    display: inline-block;
    width: 26px;
    height: 3px;
    background: #f66282;
    margin-right: 10px;
}

/* H1 — big, unboxed, straight on the gradient. */
.page-template-single-landing-page-tpl .header-service-title h1 {
    color: #ffffff;
    background: none;
    padding: 0;
    margin: 0 0 16px;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.15;
    font-family: Trebuchet, Arial, Tahoma, sans-serif;
    text-shadow: 0 2px 14px rgba(0, 20, 50, 0.35);
}
@media (max-width: 767px) {
    .page-template-single-landing-page-tpl .header-service-title h1 {
        font-size: 30px;
    }
}

/* Counters strip: frosted glass over the photo instead of a solid slab —
   readable everywhere, and the hero stays one continuous image. */
.page-template-single-landing-page-tpl .counters-row .counters-subrow {
    background-color: rgba(6, 30, 61, 0.45);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}
@media (min-width: 768px) {
    .page-template-single-landing-page-tpl .counters-row .column_counter + .column_counter {
        border-left: 1px solid rgba(255, 255, 255, 0.14);
    }
}

/* The title column carries Betheme's 1% column margin, so the H1/subline
   bands started 12px right of the counters box below them — pin the column
   to the wrapper edge so hero bands, counters and sections share one line. */
.page-template-single-landing-page-tpl .header-service-title {
    margin-left: 0 !important;
    /* Collision guard: the counters strip sits absolute at the hero bottom
       (~118px tall). Reserving that space under the title block means even a
       three-line H1 grows the section instead of sliding under the strip. */
    margin-bottom: 130px;
}

/* The 72-languages section uses Betheme's 3d parallax: an opacity:0
   .mfn-parallax img that the PARENT scripts.js animates as a moving
   background. Chrome pages dequeue that JS, so paint the same image as a
   static section background instead (the scroll-motion nicety is dropped,
   the look is identical). */
.page-template-single-landing-page-tpl .section[data-parallax="3d"] {
    background: #164176 url(/wp-content/uploads/2018/10/translation-languages-1.jpg) center center / cover no-repeat;
}
/* Without the parent parallax JS the opacity:0 img stays IN FLOW and adds
   ~1000px of invisible height to the section — hide it, the static
   background above is its replacement. */
.page-template-single-landing-page-tpl .section[data-parallax="3d"] .mfn-parallax {
    display: none;
}

/* =========================================================================
   Awards & nominations — CSS equal-height (replaces the legacy JS height
   equalizer in the footer bundle, which set stale pixel heights on load and
   broke once the parent scripts were dropped). Flexbox stretches every column
   in a row to the tallest; `height:auto !important` neutralizes any inline
   height the old JS still sets (a stylesheet !important beats inline). Only 2+
   columns per row need this; on mobile the columns stack (block) and no
   equalizing is required.
   ========================================================================= */
.awards-nominations-row1 .mcb-wrap-inner,
.awards-nominations-row2 .mcb-wrap-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

/* Neutralize the legacy JS inline heights. */
.awards-nominations-row1 .mcb-wrap-inner > .mcb-column .column_attr,
.awards-nominations-row2 .mcb-wrap-inner > .mcb-column .column_attr,
.awards-nominations-row1 .icon_box,
.awards-nominations-row2 .icon_box,
.awards-under-image .desc_wrapper,
.awards-under-image2 .desc_wrapper,
.top-right-award {
    height: auto !important;
}

/* Each column becomes a flex-column so its inner block fills the stretched
   height — backgrounds/photos reach the row's bottom edge with no gap. */
.awards-nominations-row1 .mcb-wrap-inner > .mcb-column,
.awards-nominations-row2 .mcb-wrap-inner > .mcb-column {
    display: flex;
    flex-direction: column;
}
.awards-nominations-row1 .mcb-wrap-inner > .mcb-column > .column_attr,
.awards-nominations-row2 .mcb-wrap-inner > .mcb-column > .column_attr,
.awards-nominations-row2 .mcb-wrap-inner > .mcb-column > .icon_box {
    flex: 1 1 auto;
}

/* Row-2 photo columns: photo fills the leftover height (cover), caption pinned
   at the bottom, so they match the tall middle text column. */
.awards-under-image .icon_box,
.awards-under-image2 .icon_box {
    display: flex;
    flex-direction: column;
}
.awards-under-image .icon_box .image_wrapper,
.awards-under-image2 .icon_box .image_wrapper {
    flex: 1 1 auto;
    overflow: hidden;
}
.awards-under-image .icon_box .image_wrapper img,
.awards-under-image2 .icon_box .image_wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.awards-under-image .icon_box .desc_wrapper,
.awards-under-image2 .icon_box .desc_wrapper {
    flex: 0 0 auto;
}

/* On mobile everything stacks; drop the flex so nothing is forced to stretch. */
@media (max-width: 767px) {
    .awards-nominations-row1 .mcb-wrap-inner,
    .awards-nominations-row2 .mcb-wrap-inner {
        display: block;
    }
    .awards-nominations-row1 .mcb-wrap-inner > .mcb-column,
    .awards-nominations-row2 .mcb-wrap-inner > .mcb-column {
        display: block;
    }
    /* eq-col3 is a background-image-only column (no content). As a stretched
       flex item it had height; once stacked it would collapse to 0 and the
       photo would vanish. Give it a height so the photo shows — matches
       production's ~234px at this width. */
    .awards-nominations-row1 .eq-col3 {
        min-height: 234px;
    }
}


/* =========================================================================
   Redesigned upper half (ct-*) — own sections, BRAND palette from the header:
   menu blue #0272b2, estimate teal #1bb5b7, order pink #f66282, inquiries
   yellow #fac43e. The lower half (72 languages onward) is the untouched
   builder snapshot.
   ========================================================================= */

/* Hero subline: plain white text with a pink accent bar, no box. */
.ct-hero-sub { display: inline-block; background: none; border-left: 3px solid #f66282; padding: 2px 0 2px 14px; color: rgba(255, 255, 255, 0.95); font-size: 16px; line-height: 24px; text-shadow: 0 1px 8px rgba(0, 20, 50, 0.35); }

/* Trust badges strip */
.ct-badges { background: #fff; border-bottom: 1px solid #ececec; padding: 16px 0; }
.ct-badges-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.ct-badges-list li { display: flex; align-items: center; margin: 8px 18px; font-size: 14px; font-weight: 700; color: #2f3e4e; }
.ct-badges-list li i { color: #f66282; font-size: 20px; margin-right: 9px; }

/* Intro */
.ct-intro { background: #fff; padding: 55px 0 5px; }
.ct-intro h2 { text-align: center; margin-bottom: 25px; }
.ct-intro p { max-width: 920px; margin: 0 auto 18px; text-align: center; font-size: 15px; }
.ct-cta-row { text-align: center; margin: 26px 0 40px; }
.ct-btn { display: inline-block; padding: 14px 30px; margin: 6px 10px; font-weight: 700; font-size: 15px; border-radius: 3px; text-decoration: none !important; }
.ct-btn-primary { background: #f66282; color: #fff !important; border: 2px solid #f66282; cursor: pointer; }
.ct-btn-primary:hover { background: #e04a6c; border-color: #e04a6c; }
.ct-btn-outline { background: transparent; color: #0272b2 !important; border: 2px solid #0272b2; }
.ct-btn-outline:hover { background: #0272b2; color: #fff !important; }

/* Guarantee band — redesigned: full-bleed brand gradient section (teal to
   menu blue), the four checks as translucent white pills, same design
   language as the bundle step cards. The child theme's boxed soft-teal
   band background is neutralized. */
.ct-guarantee { background: linear-gradient(90deg, #1bb5b7, #0272b2); padding: 40px 0 30px; }
.ct-guarantee .benefits-subrow { background: transparent !important; }
.ct-guarantee .benefits-heading h3 { padding-top: 0; margin-bottom: 26px; }
.ct-guarantee .column_benefit {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 40px;
    padding: 13px 10px;
    box-sizing: border-box;
}
.ct-guarantee .column_benefit i { font-size: 22px; }

/* The reviews wrap inherits the OLD layout's overlap trick from the child
   theme (.enquiry-form-row { margin-top: -200px } pulled it onto the yellow
   section's bottom padding). The redesigned page has no overlap — neutralize
   it here only (the homepage still relies on it). Its rating line was white
   for the old yellow background; on white it needs real colors. */
.page-template-single-landing-page-tpl .enquiry-form-row { margin-top: 0; margin-bottom: 30px; }
.page-template-single-landing-page-tpl .average-rating-title p { color: #616161; }
.page-template-single-landing-page-tpl .average-rating-title b { color: #2f3e4e; }

/* Bundle: translation + notarization + apostille */
.ct-bundle { background: #0272b2; padding: 60px 0 55px; }
.ct-bundle h2 { color: #fff; text-align: center; margin-bottom: 8px; }
.ct-bundle-sub { text-align: center; color: rgba(255, 255, 255, 0.75); margin: 0 auto 42px; max-width: 760px; }
.ct-bundle-steps { display: flex; justify-content: center; align-items: stretch; }
.ct-bundle-step { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 6px; padding: 30px 24px 24px; margin: 0 12px; width: 33.33%; max-width: 370px; position: relative; text-align: center; box-sizing: border-box; }
.ct-bundle-num { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: #f66282; color: #fff; width: 32px; height: 32px; line-height: 32px; border-radius: 50%; font-weight: 700; }
.ct-bundle-step i { font-size: 34px; color: #ffffff; display: block; margin: 6px 0 12px; }
.ct-bundle-step h3 { color: #fff; font-size: 20px; margin-bottom: 10px; }
.ct-bundle-step h3 a { color: #fff; text-decoration: underline; }
.ct-bundle-step h3 a:hover { color: rgba(255, 255, 255, 0.75); }
.ct-bundle-step p { color: rgba(255, 255, 255, 0.8); margin: 0; font-size: 14px; }
.ct-bundle-phone { text-align: center; margin-top: 38px; font-size: 16px; color: #fff; }
.ct-bundle-phone i { color: #ffffff; margin-right: 8px; }
.ct-bundle-phone a { color: #ffffff; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.ct-bundle-phone a:hover { color: rgba(255, 255, 255, 0.75); }

/* What's included checklist */
.ct-included { background: #f7f9fa; padding: 55px 0 50px; }
.ct-included h2 { text-align: center; margin-bottom: 8px; }
.ct-included-sub { text-align: center; margin-bottom: 30px; color: #616161; }
.ct-included-list { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; display: flex; flex-wrap: wrap; }
.ct-included-list li { width: 50%; box-sizing: border-box; padding: 9px 20px 9px 0; display: flex; align-items: flex-start; font-size: 15px; margin: 0; }
.ct-included-list li i { color: #1bb5b7; font-size: 18px; margin: 2px 10px 0 0; flex: 0 0 auto; }
.ct-included-list a { font-weight: 600; }

/* Terminology cards */
.ct-terms { background: #fff; padding: 55px 0 60px; }
.ct-terms h2 { text-align: center; margin-bottom: 8px; }
.ct-terms-sub { text-align: center; max-width: 880px; margin: 0 auto 36px; color: #616161; }
.ct-terms-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.ct-term-card { width: 258px; margin: 10px; background: #fff; border: 1px solid #e8e8e8; border-radius: 6px; overflow: hidden; text-decoration: none !important; display: flex; flex-direction: column; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); transition: box-shadow .2s ease, transform .2s ease; }
.ct-term-card:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.13); transform: translateY(-3px); }
.ct-term-img { display: block; height: 150px; overflow: hidden; }
.ct-term-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-term-name { font-size: 18px; font-weight: 700; color: #2f3e4e; padding: 14px 16px 4px; }
.ct-term-desc { font-size: 13px; line-height: 20px; color: #616161; padding: 0 16px 12px; flex: 1 1 auto; }
.ct-term-more { color: #f66282; font-weight: 700; font-size: 13px; padding: 0 16px 16px; }

/* Q&A */
.ct-faq { background: #f7f9fa; padding: 55px 0 60px; }
.ct-faq h2 { text-align: center; margin-bottom: 26px; }
.ct-faq-box { max-width: 900px; margin: 0 auto; background: #fff; padding: 12px 26px; border: 1px solid #e8e8e8; border-radius: 6px; }

@media (max-width: 991px) {
    .ct-bundle-steps { display: block; }
    .ct-bundle-step { width: auto; max-width: 520px; margin: 0 auto 34px; }
    .ct-bundle-steps .ct-bundle-step:last-child { margin-bottom: 0; }
}
@media (max-width: 767px) {
    .ct-badges-list li { width: 46%; margin: 8px 2%; }
    .ct-included-list li { width: 100%; }
    .ct-term-card { width: 100%; max-width: 340px; }
    .ct-hero-sub { font-size: 13px; padding: 6px 14px; }
}


/* =========================================================================
   Document-translation page sections (ct-docs, ct-steps) — same system.
   ========================================================================= */

/* Document types: two panels of doc chips */
.ct-docs { background: #fff; padding: 55px 0 50px; }
.ct-docs h2 { text-align: center; margin-bottom: 8px; }
.ct-docs-sub { text-align: center; color: #616161; max-width: 880px; margin: 0 auto 34px; }
.ct-docs-panels { display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; }
.ct-docs-panel { background: #f7f9fa; border: 1px solid #e8e8e8; border-radius: 6px; padding: 26px 28px; margin: 10px; width: 480px; max-width: 100%; box-sizing: border-box; }
.ct-docs-panel h3 { font-size: 19px; color: #2f3e4e; margin-bottom: 16px; display: flex; align-items: center; }
.ct-docs-panel h3 i { color: #0272b2; font-size: 22px; margin-right: 10px; }
.ct-docs-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.ct-docs-panel li { width: 50%; box-sizing: border-box; padding: 6px 12px 6px 0; display: flex; align-items: flex-start; font-size: 14px; margin: 0; }
.ct-docs-panel li i { color: #1bb5b7; font-size: 15px; margin: 3px 8px 0 0; flex: 0 0 auto; }
.ct-docs-panel li span { flex: 1 1 auto; }
/* Single-panel variant (terminology pages): one wide centered panel. */
.ct-docs-panel-wide { width: 780px; }
.ct-docs-note { text-align: center; margin: 26px 0 0; color: #616161; }
.ct-docs-note a { font-weight: 700; color: #f66282; cursor: pointer; }

/* How it works: 4 numbered steps */
.ct-steps { background: #f7f9fa; padding: 55px 0 50px; }
.ct-steps h2 { text-align: center; margin-bottom: 40px; }
.ct-steps-row { display: flex; justify-content: center; align-items: stretch; }
.ct-step { background: #fff; border: 1px solid #e8e8e8; border-radius: 6px; padding: 30px 22px 24px; margin: 0 10px; width: 25%; max-width: 280px; position: relative; text-align: center; box-sizing: border-box; }
.ct-step-num { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: #f66282; color: #fff; width: 32px; height: 32px; line-height: 32px; border-radius: 50%; font-weight: 700; }
.ct-step i { font-size: 30px; color: #0272b2; display: block; margin: 4px 0 12px; }
.ct-step h3 { font-size: 17px; color: #2f3e4e; margin-bottom: 8px; }
.ct-step p { font-size: 13px; line-height: 20px; color: #616161; margin: 0; }

@media (max-width: 991px) {
    .ct-steps-row { flex-wrap: wrap; }
    .ct-step { width: 44%; max-width: 340px; margin: 0 8px 34px; }
}
@media (max-width: 640px) {
    .ct-step { width: 100%; max-width: 340px; margin: 0 auto 34px; }
}
@media (max-width: 767px) {
    .ct-docs-panel li { width: 100%; }
}


/* =========================================================================
   Document-type pages (ct-sample) + linked doc chips.
   ========================================================================= */
.ct-sample { background: #f7f9fa; padding: 55px 0 50px; }
.ct-sample h2 { text-align: center; margin-bottom: 8px; }
.ct-sample-sub { text-align: center; color: #616161; max-width: 860px; margin: 0 auto 36px; }
.ct-sample-flex { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.ct-sample-img { width: 470px; max-width: 100%; margin: 0 22px 22px; }
.ct-sample-img img { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); }
.ct-sample-list { width: 430px; max-width: 100%; margin: 0 22px 22px; }
.ct-sample-list ul { list-style: none; margin: 0; padding: 0; }
.ct-sample-list li { display: flex; align-items: flex-start; padding: 8px 0; font-size: 15px; margin: 0; }
.ct-sample-list li i { color: #1bb5b7; font-size: 18px; margin: 2px 10px 0 0; flex: 0 0 auto; }
.ct-sample-list li span { flex: 1 1 auto; }

/* Doc chips that link to document pages */
.ct-docs-panel li a { color: #0272b2; font-weight: 600; text-decoration: none; }
.ct-docs-panel li a:hover { text-decoration: underline; }

/* ===== 72-languages section: names with dedicated pages are links =========
   Kept white like their siblings, dotted underline as the affordance,
   brand teal on hover. */
.extra-lang-col span a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.35);
}
.extra-lang-col span a:hover {
    color: #1bb5b7;
    border-bottom-color: #1bb5b7;
}