/* ==========================================================================
   service.css - shared styles for the inner service pages
   (wikipedia-page-editing, wikipedia-biography-writers, ...)

   Loaded LAST, after style.css / responsive.css / forms.css, so it can layer
   on top of the theme without editing the 337 KB stylesheet.

   Everything here is scoped to classes that only exist on the service pages,
   with one deliberate exception: the Services dropdown in the main nav.

   Palette is taken straight from the theme:
     brand      #4682B4
     brand tint #4682b417  (9% alpha - the .section-bg / .BRS-lazylaod fill)
     ink        #1f1f33    (the .cta_home / .cta-sec-about dark band)
   ========================================================================== */

:root {
    --svc-brand: #4682B4;
    --svc-brand-dark: #35648c;
    --svc-ink: #1f1f33;
    --svc-body: #5b6b7c;
    --svc-tint: #4682b417;
    --svc-line: #e2ecf4;
    --svc-radius: 12px;
    --svc-ease: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   1. Services dropdown in the main nav

   The theme already ships a full submenu system (.menu>ul li ul, hover reveal
   at >=992px, slide-down on mobile via functions.js). All it needs is a wider
   panel, because "Wikipedia Page Maintenance Service" does not fit the
   default 240px.
   -------------------------------------------------------------------------- */

/* Never let the submenu inherit `.lab-ul { column-count: 2 }` or any other
   stray list treatment, whatever width we are at. */
.services-dd .services-dd-menu {
    column-count: 1;
    list-style: none;
}

@media (min-width: 992px) {
    /* The theme positions submenus with `top: 100%; left: 0`, which needs a
       positioned parent — without it the panel anchors to .header-wrapper and
       lands under the logo. */
    .menu > ul > li.services-dd {
        position: relative;
    }

    .menu > ul li.services-dd .services-dd-menu {
        width: 292px !important;
        left: 0;
        right: auto;
    }

    .menu > ul li.services-dd .services-dd-menu li a {
        line-height: 1.35;
        padding: 11px 20px;
        white-space: normal;
    }
}

/* --------------------------------------------------------------------------
   1b. Services dropdown — mobile drawer (<= 992px)

   At this width the menu becomes an off-canvas panel, and the theme's rules
   there were written for the old .new-dropdown-box mega-menu: every top-level
   li is `display: flex` (which would sit the submenu beside its link), and
   `li.open` is explicitly set to `display: none` unless it also carries
   .new-dropdown-box-active. functions.js adds .open on tap, so without these
   overrides tapping Services hides the item entirely.
   -------------------------------------------------------------------------- */

@media (max-width: 992px) {
    /* Top-level items are `display: flex`, which would sit the submenu next to
       its link instead of under it. */
    .menu-area > .menu > ul.lab-ul > li.services-dd,
    .menu-area > .menu > ul.lab-ul > li.services-dd.open {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* `.menu>ul li ul { width: 240px !important }` in style.css sits outside
       any media query, so it leaks into the drawer. */
    .menu > ul li.services-dd .services-dd-menu {
        width: 100% !important;
        display: none;
    }

    /* Everything else — the blue drawer fill, white links, 20px indent and
       hairline dividers — already comes from the theme's own mobile submenu
       rules, so it is deliberately not restated here. */
}

/* --------------------------------------------------------------------------
   2. Shared section header

   Same rhythm as the theme's .section-header (small brand-blue eyebrow over a
   heavy 40px title), rebuilt locally so it does not inherit the odd margins
   that .section-header picks up inside some parent sections.
   -------------------------------------------------------------------------- */

.svc-head {
    max-width: 820px;
    margin: 0 auto 45px;
    text-align: center;
}

.svc-head .svc-eyebrow {
    display: block;
    color: var(--svc-brand);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.svc-head h2 {
    color: var(--svc-ink);
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
    margin: 0;
}

.svc-head p {
    color: var(--svc-body);
    font-size: 16px;
    line-height: 1.75;
    margin: 16px 0 0;
}

/* --------------------------------------------------------------------------
   3. Feature / service card grid

   Used for the "services for ..." block. Cards sit on a hairline border and
   lift on hover; the brand rule across the top edge is what ties them to the
   banner card and the footer box.
   -------------------------------------------------------------------------- */

.svc-grid-sec {
    padding: 70px 0;
    background: #fff;
}

.svc-grid-sec.is-tinted {
    background: var(--svc-tint);
}

.svc-card {
    position: relative;
    height: 100%;
    background: #fff;
    border: 1px solid var(--svc-line);
    border-radius: var(--svc-radius);
    padding: 34px 30px 30px;
    overflow: hidden;
    transition: transform .35s var(--svc-ease), box-shadow .35s var(--svc-ease),
                border-color .35s var(--svc-ease);
}

.svc-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: var(--svc-radius) var(--svc-radius) 0 0;
    background: linear-gradient(90deg, var(--svc-brand), #6ba3d0);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--svc-ease);
}

.svc-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(31, 31, 51, .12);
    border-color: transparent;
}

.svc-card:hover::before {
    transform: scaleX(1);
}

.svc-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: var(--svc-tint);
    color: var(--svc-brand);
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    transition: background .35s var(--svc-ease), color .35s var(--svc-ease);
}

.svc-card:hover .svc-card-icon {
    background: var(--svc-brand);
    color: #fff;
}

.svc-card h3 {
    color: var(--svc-ink);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px;
}

.svc-card p {
    color: var(--svc-body);
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

.svc-card-num {
    position: absolute;
    right: 22px;
    top: 24px;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    color: var(--svc-brand);
    opacity: .1;
}

/* Give the theme's own 4-up card row equal heights when it is reused here */
.work-sec-new .wwwuBox {
    display: flex;
}

.work-sec-new .wwwuBox .work-box-new {
    width: 100%;
}

/* --------------------------------------------------------------------------
   4. Split block - cards on one side, copy on the other
   -------------------------------------------------------------------------- */

.svc-split-sec {
    padding: 70px 0;
    background: var(--svc-ink);
}

.svc-split-copy h2 {
    color: #fff;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 18px;
}

.svc-split-copy .svc-eyebrow {
    display: block;
    color: #8fc0e4;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.svc-split-copy p {
    color: #c3cddb;
    font-size: 16px;
    line-height: 1.8;
    margin: 0 0 18px;
}

.svc-mini-card {
    height: 100%;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--svc-radius);
    padding: 24px 22px;
    transition: background .35s var(--svc-ease), border-color .35s var(--svc-ease);
}

.svc-mini-card:hover {
    background: rgba(70, 130, 180, .22);
    border-color: rgba(70, 130, 180, .55);
}

.svc-mini-card i {
    display: block;
    color: #8fc0e4;
    font-size: 26px;
    margin-bottom: 14px;
}

.svc-mini-card h4 {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
}

.svc-mini-card p {
    color: #aab7c7;
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}

/* --------------------------------------------------------------------------
   5. Stats band
   -------------------------------------------------------------------------- */

.svc-stats-sec {
    position: relative;
    padding: 62px 0;
    background: var(--svc-brand);
    overflow: hidden;
}

/* Soft highlight so the flat brand fill does not read as a solid slab */
.svc-stats-sec::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -120px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
}

.svc-stats-sec .container {
    position: relative;
    z-index: 1;
}

.svc-stats-sec h2 {
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 45px;
}

.svc-stat {
    text-align: center;
    padding: 0 10px;
}

.svc-stat strong {
    display: block;
    color: #fff;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 10px;
}

.svc-stat span {
    display: block;
    color: rgba(255, 255, 255, .88);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .svc-stats-row > [class*="col-"] .svc-stat {
        border-right: 1px solid rgba(255, 255, 255, .22);
    }

    .svc-stats-row > [class*="col-"]:last-child .svc-stat {
        border-right: 0;
    }
}

/* --------------------------------------------------------------------------
   6. Mission + FAQ

   The accordion uses Bootstrap 5 markup (data-bs-toggle) because both
   bootstrap.min.css and bootstrap.min_1.js on this site are v5 - the v3
   bundle only claims data-toggle, so the two do not collide.
   -------------------------------------------------------------------------- */

.svc-faq-sec {
    padding: 70px 0;
    background: var(--svc-tint);
}

.svc-mission h2,
.svc-faq-col h2 {
    color: var(--svc-ink);
    font-size: 34px;
    font-weight: 700;
    margin: 0 0 20px;
}

.svc-mission p {
    color: var(--svc-body);
    font-size: 16px;
    line-height: 1.8;
    margin: 0 0 16px;
}

.svc-mission .svc-mission-points {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
}

.svc-mission .svc-mission-points li {
    position: relative;
    color: var(--svc-ink);
    font-size: 15px;
    font-weight: 500;
    padding: 0 0 0 30px;
    margin-bottom: 14px;
}

.svc-mission .svc-mission-points li::before {
    content: "\eed7"; /* icofont check-circled */
    font-family: IcoFont;
    position: absolute;
    left: 0;
    top: -1px;
    color: var(--svc-brand);
    font-size: 18px;
}

.svc-accordion .accordion-item {
    background: #fff;
    border: 1px solid var(--svc-line);
    border-radius: 10px !important;
    margin-bottom: 12px;
    overflow: hidden;
}

/* style.css sets a blanket `h1..h6 { margin: 20px 0 15px }` late in the file,
   which would push the accordion header off its own item */
.svc-accordion .accordion-header {
    margin: 0;
}

.svc-accordion .accordion-button {
    background: #fff;
    color: var(--svc-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    padding: 18px 22px;
    box-shadow: none;
}

.svc-accordion .accordion-button:not(.collapsed) {
    background: var(--svc-brand);
    color: #fff;
}

.svc-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.svc-accordion .accordion-button::after {
    width: 14px;
    height: 14px;
    background-size: 14px;
    flex-shrink: 0;
}

.svc-accordion .accordion-button:not(.collapsed)::after {
    /* white chevron, so it stays legible on the brand fill */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.svc-accordion .accordion-body {
    color: var(--svc-body);
    font-size: 15px;
    line-height: 1.75;
    padding: 18px 22px 22px;
}

/* --------------------------------------------------------------------------
   7. Small corrections to reused theme components

   The theme's .cta-sec-about shape images are absolutely positioned with no
   coordinates of their own on inner pages, so pin them the same way
   .cta_home pins its pair.
   -------------------------------------------------------------------------- */

.svc-page section.cta-sec-about {
    overflow: hidden;
}

.svc-page .cta-sec-new-img-1 {
    position: absolute;
    top: 0;
    right: 0;
}

.svc-page .cta-sec-new-img-2 {
    position: absolute;
    bottom: 0;
    left: 0;
}

/* The corner shapes in both CTA bands are absolutely positioned images, so
   they paint over the static heading. Lift the copy above them instead of
   trying to keep every headline short enough to dodge them. */
.svc-page .cta_home .container,
.svc-page .cta_home .headingH2,
.svc-page .cta_home .headingH3,
.svc-page .cta_home .btn_cta a,
.svc-page section.cta-sec-about h3,
.svc-page section.cta-sec-about p,
.svc-page section.cta-sec-about .cta-btn-new {
    position: relative;
    z-index: 2;
}

/* Bulleted intro lists reuse the homepage .importance_wiki treatment, but the
   theme only floats them; keep them from colliding with the button row. */
.svc-page .importance_wiki {
    overflow: hidden;
}

/* .about-section::before is a 753px CSS triangle (border-bottom: 753px solid
   #26c976) that the homepage hides inside a very tall section. On these pages
   the blocks are shorter and the image sits on the opposite side, so it spills
   into the next section and lands behind body copy. Drop it and keep the
   brand's shape language where it still works — the two CTA bands. */
.svc-page .about-section {
    overflow: hidden;
}

.svc-page .about-section::before {
    display: none !important;
}

/* .our-nu-box is position:absolute with no positioned ancestor, so the tab
   number escapes to the top-left corner of the document. (The homepage dodges
   this by commenting the number out of its one visible tab.) */
.svc-page .our-flex-text {
    position: relative;
    padding-right: 62px;
}

/* The theme colours that number a leftover green (#0d674e) from an earlier
   palette; everything else on the page is brand blue. */
.svc-page .our-nu-box .index {
    color: var(--svc-brand);
}

/* Photo blocks in the alternating copy/image rows */
.svc-page .about-thumb.svc-photo img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 22px 50px rgba(31, 31, 51, .16);
}

/* --------------------------------------------------------------------------
   8. CTA bands — keep the corner shapes off the headline

   The shape images are 412x136 and pinned to the corners of a full-width
   band, so they reach ~420px in from each edge. The homepage gets away with
   it because its CTA headline is short. Shrink the shapes and cap the
   headline width so the two can never occupy the same space.
   -------------------------------------------------------------------------- */

.svc-page .cta_home .fst-1,
.svc-page .cta_home .fst-2,
.svc-page .cta-sec-new-img-1,
.svc-page .cta-sec-new-img-2 {
    width: 250px;
    height: auto;
}

.svc-page .cta_home .headingH2,
.svc-page .cta_home .headingH3,
.svc-page section.cta-sec-about h3,
.svc-page section.cta-sec-about p {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------------------------------------
   8b. Multi-step process band

   The step numbers and heading rules already default to var(--color-canda),
   which is the brand blue, so the pages deliberately do NOT carry the theme's
   .australia-process-sec-country class — that one repaints the numbers navy
   (#006) and every country page then has to override it back inline.

   The centre badge is the one exception: its colour is only ever set under
   .country-pages, so on these pages it would fall back to near-black.
   -------------------------------------------------------------------------- */

.svc-page .svc-process .process-country-txt .pageHeading {
    color: var(--svc-brand);
}

/* --------------------------------------------------------------------------
   9. Portfolio tabs

   Theme defaults that do not carry over to these pages:
     - background: #000, which stacked a third dark band between the two
       #1f1f33 sections either side of it
     - .nav-our is locked to height: 415px with overflow-y: scroll, leaving
       dead white space and a scrollbar under a short category list
     - the "Categories" rule and the section heading still use the old green
       (#0d674e) rather than the brand blue
   -------------------------------------------------------------------------- */

.svc-page section.our-indus-sec {
    padding: 70px 0;
    background: var(--svc-tint);
}

.svc-page section.our-indus-sec .ht-text-center {
    max-width: 820px;
    margin: 0 auto 40px;
    text-align: center;
}

.svc-page section.our-indus-sec .ht-text-center h2 {
    color: var(--svc-ink);
    font-size: 40px;
    line-height: 1.2;
    margin: 0 0 14px;
}

.svc-page section.our-indus-sec .ht-text-center p {
    color: var(--svc-body);
    font-size: 16px;
    line-height: 1.75;
    margin: 0;
}

.svc-page .row.ou-row-box {
    background-color: #fff;
    border-radius: 14px;
    padding: 30px 20px;
    box-shadow: 0 18px 45px rgba(31, 31, 51, .07);
}

.svc-page section.our-indus-sec ul.nav.nav-our {
    height: auto;
    overflow-y: visible;
    background-color: var(--svc-tint);
    padding: 10px 20px 18px;
}

.svc-page .our-ind-text .industries-title {
    border-bottom-color: var(--svc-brand);
    margin-top: 0;
}

@media (max-width: 991px) {
    .svc-page section.our-indus-sec .ht-text-center h2 {
        font-size: 29px;
    }

    .svc-page .cta_home .fst-1,
    .svc-page .cta_home .fst-2,
    .svc-page .cta-sec-new-img-1,
    .svc-page .cta-sec-new-img-2 {
        width: 150px;
    }
}

@media (max-width: 767px) {
    .svc-page section.our-indus-sec .ht-text-center h2 {
        font-size: 25px;
    }

    /* At this width the shapes have nowhere to go that is not behind copy */
    .svc-page .cta_home .fst-1,
    .svc-page .cta_home .fst-2,
    .svc-page .cta-sec-new-img-1,
    .svc-page .cta-sec-new-img-2 {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .svc-head h2 {
        font-size: 34px;
    }

    .svc-split-copy h2 {
        font-size: 32px;
    }

    .svc-stats-sec h2 {
        font-size: 30px;
    }
}

@media (max-width: 991px) {
    .svc-grid-sec,
    .svc-split-sec,
    .svc-faq-sec {
        padding: 55px 0;
    }

    .svc-head {
        margin-bottom: 34px;
    }

    .svc-head h2 {
        font-size: 29px;
    }

    .svc-split-copy {
        margin-top: 34px;
    }

    .svc-mission {
        margin-bottom: 40px;
    }

    .svc-stat {
        margin-bottom: 26px;
    }
}

@media (max-width: 767px) {
    .svc-head h2 {
        font-size: 25px;
    }

    .svc-head p,
    .svc-mission p {
        font-size: 15px;
    }

    .svc-card {
        padding: 28px 24px 24px;
    }

    .svc-stats-sec h2 {
        font-size: 25px;
        margin-bottom: 32px;
    }

    .svc-stat strong {
        font-size: 36px;
    }

    .svc-mission h2,
    .svc-faq-col h2 {
        font-size: 27px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .svc-card,
    .svc-card::before,
    .svc-card-icon,
    .svc-mini-card {
        transition: none;
    }

    .svc-card:hover {
        transform: none;
    }
}