/*
 * AcademiaPub overrides on top of the Stravise theme.
 *
 * Loaded last. Everything here is either a correction to the theme, an
 * accessibility fix, or a component the theme does not have. Nothing that
 * belongs in style.css is duplicated here.
 */

/* --------------------------------------------------------------------------
 * 1. Palette corrections
 *
 * Stravise runs two accents: a yellow (#FF9C00) and a blue (#4069FF). This
 * site has one, so the yellow became the brand green and the blue became the
 * ink navy. That works everywhere the blue sat on a light surface, but it
 * collapses in the few places the blue was used as a highlight *on* a dark
 * surface — the two colours are now the same value. Those cases are fixed
 * here rather than by another pass over style.css, so the mapping stays a
 * single readable rule.
 * ----------------------------------------------------------------------- */

.page-banner .breadcrumb .breadcrumb-item a:hover,
.page-banner .breadcrumb .breadcrumb-item a:focus,
.page-banner .breadcrumb .breadcrumb-item.active {
    color: #6fbfad;
}

.page-banner .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5);
}

/* --------------------------------------------------------------------------
 * 2. Navigation
 *
 * The template's bar carries five items; this site has seven, and at 1280px
 * the seventh wrapped onto a second line. The spacing is tightened between
 * 1200 and 1500px and the header's call to action steps aside there, which is
 * enough room without dropping a link.
 * ----------------------------------------------------------------------- */

/*
 * Seven links at the theme's 24px side padding fill the container on their
 * own, so the header's button wrapped onto a second row at every width. The
 * hero and the footer both carry the same call to action, and the top bar
 * carries the address, so the header keeps the links and drops the button.
 */
header .header-right .theme-btn {
    display: none !important;
}

@media (min-width: 1200px) and (max-width: 1399px) {
    header.header-1 .main-menu ul > li > a {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/*
 * Below xl the wordmark moves into the main bar, which on a transparent
 * header sits over the dark hero. The theme leaves it in the dark ink it uses
 * on white, at about 1.6:1. The lockup carries its own paper tone, so it is
 * excluded rather than being overridden back to plain white here.
 */
header.transparent .header-logo .logo a:not(.brand) {
    color: #fff;
}

/*
 * The theme capitalises every word, which turns "How it works" into
 * "How It Works". Sentence case is what the labels are written in.
 */
header.header-1 .main-menu ul > li > a,
.consulter-mobile-nav ul > li > a {
    text-transform: none;
}

/*
 * The current page was marked in the accent green, which sits at about 2.4:1
 * on the dark bar. This is the accent lightened to clear 4.5:1.
 */
header.header-1 .main-menu ul > li.active > a,
header.header-1 .main-menu ul > li.active:hover > a {
    color: #6fbfad;
}

/* --------------------------------------------------------------------------
 * 3. The hero slider
 *
 * style.css lays every slick track out as `display: table` with `table-cell`
 * slides and a 15px gutter. Table auto-layout treats a cell's width as a
 * suggestion and redistributes it, so it overrides the pixel width slick sets
 * on each slide. For the multi-item carousels the theme ships that is close
 * enough to go unnoticed; for a full-bleed banner showing one slide at a time
 * it is not — at 375px the slide came out 448px wide and the headline ran off
 * the right edge.
 *
 * Block layout is restored for this one slider, and the gutter with it: a
 * full-bleed hero has no columns to separate.
 * ----------------------------------------------------------------------- */

.banner-slider .slick-list {
    margin-left: 0;
    margin-right: 0;
}

.banner-slider .slick-list .slick-track {
    display: flex !important;
}

.banner-slider .slick-list .slick-track .slick-slide {
    display: block !important;
    height: auto;
    padding-left: 0;
    padding-right: 0;
}

/*
 * slick wraps each `.slider-item` in a `.slick-slide` of its own. Both that
 * wrapper and the item are laid out inline by the theme, which leaves the
 * slide's width depending on its content rather than on the viewport.
 */
.banner-slider__wrapper .banner-slider .slick-slide > div,
.banner-slider__wrapper .banner-slider .slider-item {
    display: block !important;
    width: 100% !important;
}

/*
 * `.slider-item` carries `padding: 0 115px`, which is proportionate on the
 * 1920px banner the theme was drawn against and is never reduced below it. At
 * 375px it consumed 230 of the 375 available and the headline came out one
 * word per line. The padding is scaled to the viewport instead.
 */
@media (max-width: 991px) {
    .banner-slider__wrapper .banner-slider .slider-item {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 575px) {
    .banner-slider__wrapper .banner-slider .slider-item {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* --------------------------------------------------------------------------
 * 4. The inner-page banner
 *
 * The header is fixed and transparent so it can sit over the homepage hero.
 * Nothing then reserves space for it, so on every inner page the banner's
 * label, heading and outlined watermark ran underneath the menu row. The
 * header measures 176px from 1200px up and 137px below it, where the top bar
 * wraps onto its own row, and the watermark overhangs the content by a
 * further 34px. The theme's own pt-* values clear none of that, so they are
 * replaced. The header does not shrink on small screens, so neither can this
 * padding shrink the way the theme's scale does.
 * ----------------------------------------------------------------------- */

.page-banner {
    padding-top: 245px;
}

@media (max-width: 1199px) {
    .page-banner {
        padding-top: 205px;
    }
}

@media (max-width: 767px) {
    .page-banner {
        padding-top: 195px;
    }
}

/* The top bar drops away below 576px, taking about 65px of header with it. */
@media (max-width: 575px) {
    .page-banner {
        padding-top: 155px;
    }
}

/* --------------------------------------------------------------------------
 * 5. Accessibility
 * ----------------------------------------------------------------------- */

.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 9999;
    padding: 12px 20px;
    color: #fff;
    background-color: #0e6e5c;
    border-radius: 2px;
    transition: top 0.2s ease-in-out;
}

.skip-link:focus {
    top: 16px;
    color: #fff;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid #0e6e5c;
    outline-offset: 3px;
}

/*
 * The theme's social and pagination links are 30–36px squares. WCAG 2.5.8
 * asks for 44px, and the visual size is kept by growing the hit area only.
 */
.social-profile ul li a,
.footer-bottom-list ul li a {
    position: relative;
}

.social-profile ul li a::after,
.footer-bottom-list ul li a::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/*
 * animate.css ships `.wow { visibility: hidden }` and wow.js reveals each
 * element when it scrolls into view. That puts every section of the page
 * behind one library: if wow.js fails, is blocked, or simply never fires a
 * scroll callback, the site is blank below the hero. Content is visible by
 * default here, and the entrance animation is left as an enhancement — when
 * wow.js does run it adds `animated fadeInUp`, which fades in from opacity 0
 * regardless of the visibility value.
 */
.wow {
    visibility: visible !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    /*
     * wow.js sets `visibility: hidden` and only reveals an element when its
     * animation runs. With animations suppressed the page would stay blank,
     * so the reveal is forced instead.
     */
    .wow {
        visibility: visible !important;
        animation-name: none !important;
    }
}

/* --------------------------------------------------------------------------
 * 6. The tracked-changes demonstration
 *
 * The one component that is ours rather than the theme's. It shows an
 * editor's actual markup on a real sentence, which is the thing this business
 * sells and the thing a stock consulting template has no equivalent for.
 * ----------------------------------------------------------------------- */

.manuscript {
    padding: 40px;
    font-family: "Lato", sans-serif;
    font-size: 19px;
    line-height: 34px;
    color: #16213b;
    background-color: #fff;
    border: 1px solid rgba(22, 33, 59, 0.12);
    box-shadow: 0 10px 30px rgba(4, 33, 63, 0.05);
}

@media (max-width: 767px) {
    .manuscript {
        padding: 24px;
        font-size: 17px;
        line-height: 30px;
    }
}

.manuscript del {
    color: #c2402c;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.manuscript ins {
    color: #1f6f4e;
    text-decoration: none;
    background-color: rgba(31, 111, 78, 0.08);
    box-shadow: 0 1px 0 rgba(31, 111, 78, 0.4);
}

/*
 * The three views are stacked in one grid cell so switching between them does
 * not change the block's height and jolt the page.
 */
.manuscript-stack {
    display: grid;
}

.manuscript-stack > .manuscript {
    grid-area: 1 / 1;
}

.manuscript-stack > .manuscript[hidden] {
    visibility: hidden;
}

.manuscript-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.manuscript-tabs button {
    min-height: 44px;
    padding: 10px 20px;
    font-family: "Lato", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #16213b;
    cursor: pointer;
    background-color: transparent;
    border: 1.5px solid rgba(22, 33, 59, 0.2);
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

.manuscript-tabs button[aria-selected="true"] {
    color: #fff;
    background-color: #0e6e5c;
    border-color: #0e6e5c;
}

.manuscript-note {
    margin-top: 20px;
    font-family: "Lato", sans-serif;
    font-size: 15px;
    line-height: 26px;
    color: #5c6270;
}

/* --------------------------------------------------------------------------
 * 7. Forms and the contact column
 *
 * `.contact-us__item` is capped at 254px in the theme, which suits a short
 * address block and not the prose ours carry. The cap is lifted here rather
 * than per-element so all three blocks in the column line up.
 * ----------------------------------------------------------------------- */

.contact-us__item {
    max-width: none;
}

/* The theme fixes every textarea at 120px, so `rows` has no effect and an
 * abstract is read through a four-line slot. */
.contact-form .contact-form textarea {
    min-height: 220px;
}

/* The theme styles inputs and textareas under `.contact-form .contact-form`
 * but has no select, no label and no validation state. Those are added here
 * to match. */

.contact-form .contact-form label {
    display: block;
    margin-bottom: 8px;
    font-family: "Lato", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #16213b;
}

.contact-form .contact-form label .optional {
    font-weight: 400;
    color: #5c6270;
}

.contact-form .contact-form select {
    width: 100%;
    max-width: 100%;
    min-height: 49px;
    padding: 10.5px 20px;
    font-family: "Lato", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 26px;
    color: #16213b;
    background-color: #fff;
    border: 1.5px solid rgba(14, 30, 54, 0.2);
    border-radius: 4px;
    outline: none;
}

.contact-form .contact-form input:focus,
.contact-form .contact-form select:focus,
.contact-form .contact-form textarea:focus {
    border-color: #0e6e5c;
}

.form-hint {
    display: block;
    margin-top: 8px;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: #5c6270;
}

.form-notice {
    padding: 16px 20px;
    margin-bottom: 30px;
    font-family: "Lato", sans-serif;
    font-size: 15px;
    line-height: 26px;
    border-left: 3px solid #0e6e5c;
    background-color: #e7f1ee;
}

.form-notice.is-error {
    border-left-color: #c2402c;
    background-color: #fbf0ee;
}

.form-notice ul {
    margin: 8px 0 0;
    padding-left: 20px;
    list-style: disc;
}

/* The honeypot. Positioned away rather than hidden, which some bots skip. */
.honeypot {
    position: absolute;
    left: -9999px;
}

/* --------------------------------------------------------------------------
 * 8. The services and process pages
 * ----------------------------------------------------------------------- */

/* The theme capitalises every word in these headings, which turns "Manuscript
 * editing" into "Manuscript Editing" and "Response to reviewers" into
 * "Response To Reviewers". Sentence case is what the copy is written in. */
.services-details__content h1,
.services-details__content h2,
.services-details__content h3,
.services-details__content h4,
.services-details__content h5,
.services-details__content h6 {
    text-transform: none;
}

/* The theme sets its tick in "Font Awesome 5 Pro", which is the paid tier and
 * is not shipped, so every list marker came out as a blank box. The glyph is
 * the same codepoint in the Free solid face. */
.services-details__content ul li::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/* The theme sets these lists in two columns, which assumes the full content
 * width. Ours sit two-up in a grid already. */
.services-details__content ul {
    column-count: 1;
    margin-top: 20px;
    max-width: none;
}

.services-details__content ul li {
    margin-bottom: 14px;
}

/* Anchored from the homepage and from each other, so a jump must not land the
 * heading underneath the fixed header. */
.service-entry,
.process-step {
    scroll-margin-top: 200px;
}

/* --------------------------------------------------------------------------
 * 9. Small additions
 * ----------------------------------------------------------------------- */

.subject-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.subject-list li {
    padding: 12px 22px;
    font-family: "Lato", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #16213b;
    background-color: #fff;
    border: 1px solid rgba(22, 33, 59, 0.12);
    border-radius: 2px;
}

/* The theme's accordion has no styling for the FAQ page's plus/minus marker. */
.faq-accordion .accordion-item {
    margin-bottom: 16px;
    background-color: #fff;
    border: 1px solid rgba(22, 33, 59, 0.12);
    border-radius: 2px;
}

.faq-accordion .accordion-button {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 24px 28px;
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    color: #16213b;
    text-align: left;
    cursor: pointer;
    background-color: transparent;
    border: 0;
}

@media (max-width: 767px) {
    .faq-accordion .accordion-button {
        padding: 20px;
        font-size: 17px;
        line-height: 27px;
    }
}

/* Bootstrap draws its own chevron on .accordion-button as an ::after carrying
 * margin-left:auto. Left in place it is a third flex item competing with our
 * marker for the free space, which strands the marker mid-row. */
.faq-accordion .accordion-button::after {
    display: none;
}

.faq-accordion .accordion-button .marker {
    margin-left: auto;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    color: #0e6e5c;
    text-align: center;
    background-color: #e7f1ee;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-button[aria-expanded="true"] .marker {
    color: #fff;
    background-color: #0e6e5c;
}

.faq-accordion .accordion-body {
    max-width: 68ch;
    padding: 0 28px 28px;
    font-family: "Lato", sans-serif;
    font-size: 16px;
    line-height: 28px;
    color: #5c6270;
}

@media (max-width: 767px) {
    .faq-accordion .accordion-body {
        padding: 0 20px 20px;
    }
}

/* --------------------------------------------------------------------------
 * 10. The sticky header
 *
 * The theme paints the scrolled header pure black on `header-2`, which is a
 * colour that appears nowhere else on the site and reads as a bar dropped in
 * from another design. The footer's navy is the site's own dark ground, so
 * the header borrows it and keeps the white menu text legible.
 * ----------------------------------------------------------------------- */

header.stop.header-2 .main-header-wraper,
header.transparent.stop .main-header-wraper,
header.transparent.stop.header-2 .main-header-wraper {
    background: rgba(22, 33, 59, 0.94) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(11, 18, 33, 0.28);
}

/* --------------------------------------------------------------------------
 * 11. The footer
 * ----------------------------------------------------------------------- */

/* The theme turns a hovered footer link #16213B — the navy the footer itself
 * is painted in — so the link vanished under the cursor. The accent is not
 * legible on navy either at 16px, so the hover is carried by the marker and
 * an underline instead, and the text stays white. */
.footer-1 .single-footer-wid ul li:hover a,
.footer-1 .single-footer-wid ul li:focus a,
.footer-2 .single-footer-wid ul li:hover a,
.footer-2 .single-footer-wid ul li:focus a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* The list marker is set in "Font Awesome 5 Pro", which is the paid tier and
 * is not shipped, so every bullet rendered as an empty box. The chevron is
 * the same codepoint in the Free solid face. */
.footer-1 .single-footer-wid ul li a::before,
.footer-2 .single-footer-wid ul li a::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #0e6e5c;
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-1 .single-footer-wid ul li:hover a::before,
.footer-2 .single-footer-wid ul li:hover a::before {
    color: #fff;
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
 * 12. Button pairs
 *
 * `.theme-btn__wrapper` is a bare flex row in the theme, so two buttons sat
 * edge to edge and read as one control. The row gap matters as much as the
 * column one, because the pair wraps on a narrow screen.
 * ----------------------------------------------------------------------- */

.theme-btn__wrapper {
    gap: 16px;
}

/* --------------------------------------------------------------------------
 * 13. The brand lockup
 *
 * The mark is inlined as SVG and takes `currentColor`, so one component
 * serves the dark header, the navy footer and any light ground. Archivo is
 * the face the logo was drawn in: 700 for the first word, 500 tracked out
 * for the second, which is what turns two words into a lockup.
 * ----------------------------------------------------------------------- */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #f7f5f1;
    text-decoration: none;
    line-height: 1;
}

.brand:hover,
.brand:focus {
    color: #f7f5f1;
}

/* On a light ground — the ink and muted ink from the export. */
.brand--dark,
.brand--dark:hover,
.brand--dark:focus {
    color: #14161a;
}

.brand__mark {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.brand__type {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-family: "Archivo", "Gilroy", sans-serif;
}

.brand__lead {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.brand__trail {
    /* The tracking is the lockup. Below about 10px it stops reading as a
     * word and starts reading as spaced letters, so it does not shrink. */
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #9a948c;
}

.brand--dark .brand__trail {
    color: #45413c;
}

.brand--compact .brand__mark { width: 32px; height: 32px; }
.brand--compact .brand__lead { font-size: 21px; }

@media (max-width: 400px) {
    .brand__mark { width: 28px; height: 28px; }
    .brand__lead { font-size: 18px; }
    .brand__trail { font-size: 9px; letter-spacing: 0.2em; }
}

/* The theme sets `header .logo a { display: block }`, which beats the
 * component's own `inline-flex` and stacks the mark above the type across
 * the full column width. Matched specificity puts the lockup back on one
 * line, in both header positions and in the footer. */
header .logo a.brand,
.single-footer-wid a.brand {
    display: inline-flex;
    color: #f7f5f1;
}

/* --------------------------------------------------------------------------
 * 14. The homepage enquiry section
 * ----------------------------------------------------------------------- */

/* Linked from the hero and the nav, so a jump must not put the heading
 * under the fixed header. */
#enquiry { scroll-margin-top: 200px; }

/* The two contact blocks beside the form are `theme-btn` in the theme, which
 * sets them side by side with no space between. */
.can-help__content-btn-group { gap: 20px; }

/* The theme's form panel is white on white in this section; ours sits on the
 * dark_white ground and needs an edge to read as a panel. */
.can-help .contact-form {
    background: #fff;
    border-radius: 4px;
}

/* In index-8 this section sits under an overlapping block, so the theme
 * reserves 375px above it. Nothing overlaps ours, which left a band of empty
 * grey between the process section and the heading. The top padding is
 * brought back to match the bottom of the same section. */
.can-help.can-help-home-3 { padding-top: 120px; }
@media (max-width: 991px) { .can-help.can-help-home-3 { padding-top: 100px; } }
@media (max-width: 575px) { .can-help.can-help-home-3 { padding-top: 80px; } }

/* The theme's two contact blocks size themselves to a phone number, and
 * `.theme-btn` gives them a fixed width that clipped a longer email address.
 * Each box now takes the width its content needs; when the two no longer fit
 * on one row they stack. Breaking an address across lines is worse than
 * stacking the boxes — "hello@frontierpublisher / s.com" reads as a typo —
 * so the address itself is never wrapped. */
/* Stacked at every width, one under the other and both filling the column.
 * Side by side, matching widths would squeeze the address until it clipped,
 * and letting them size to their content left a ragged right edge against
 * the form panel. Stacked, they are the same width by construction, and the
 * column is long enough to sit against the form rather than under it. */
.can-help__content-btn-group {
    flex-direction: column !important;
    align-items: stretch;
}

.can-help__content-btn-group .theme-btn {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    /* Both blocks read as a pair, so neither sets its own height. */
    min-height: 108px;
}

.can-help__content-btn-group .theme-btn .text h5 {
    font-size: 17px;
    line-height: 26px;
}

/* Only the address is held on one line. Holding the other block's wording
 * there too made the pair too wide to share a row. */
.can-help__content-btn-group a[href^="mailto"] .text h5 {
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * 15. The logo in the stuck header
 *
 * From xl up the lockup lives in the top bar, and the theme slides that row
 * out of view once the header sticks — which left the stuck bar carrying a
 * menu and no logo at all. The copy in the main bar, which below xl is the
 * only logo on the page, fades in to take its place.
 * ----------------------------------------------------------------------- */

@media (min-width: 1200px) {
    /* Taken out of the flow rather than faded, so the menu keeps the width it
     * has always had until the header actually sticks. */
    .header-logo--bar {
        display: none;
    }

    header.stop .header-logo--bar {
        display: block;
        animation: brand-fade-in 0.3s ease both;
    }
}

@keyframes brand-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    header.stop .header-logo--bar {
        animation: none;
    }
}

/* The address is held on one line, and at phone widths that line plus the
 * icon is wider than the screen. The type steps down rather than the address
 * being broken across lines. */
@media (max-width: 479px) {
    .can-help__content-btn-group a[href^="mailto"] .text h5 {
        font-size: 15px;
    }

    .can-help__content-btn-group .theme-btn .icon {
        display: none;
    }
}

/* --------------------------------------------------------------------------
 * 16. The scroll-to-top button and the footer's bottom row
 * ----------------------------------------------------------------------- */

/* The button is painted #16213B, which is the footer's own navy — the one
 * place on the page it is guaranteed to be invisible, and the only place it
 * appears, since it needs 1110px of scroll before it shows. It takes the
 * accent instead, with a ring so it reads on the light sections too. */
#scrollUp {
    background-color: #0e6e5c;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 5px 15px rgba(1, 29, 80, 0.2);
}

#scrollUp:hover,
#scrollUp:focus-visible {
    background-color: #0b5748;
}

/* active.js marks the arrow up as `fal`, which maps to the Free regular face.
 * This glyph exists only in solid there, so without this the button is an
 * empty circle. */
#scrollUp .fal {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/* Same fault as the widget links above: the theme hovers these to #16213B,
 * the navy they sit on, so both labels vanished under the cursor. */
.footer-1 .footer-bottom-list ul li:hover a,
.footer-1 .footer-bottom-list ul li:focus a,
.footer-2 .footer-bottom-list ul li:hover a,
.footer-2 .footer-bottom-list ul li:focus a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* The divider between the two was set at 10% white, which is close enough to
 * the ground to read as nothing at all. */
.footer-1 .footer-bottom-list ul li a::before {
    background: rgba(255, 255, 255, 0.28);
}


/* -------------------------------------------------------------------------
 * 17. About page
 * ---------------------------------------------------------------------- */

/* The pull quote in the story section. A left rule in the accent rather than
 * quotation marks, so it reads as an aside and not as a testimonial — nobody
 * is being quoted but the company itself. */
.about-us__pull {
    margin: 0;
    padding-left: 20px;
    border-left: 3px solid #0e6e5c;
}

.about-us__pull p {
    font-size: 20px;
    line-height: 32px;
}

.about-us__pull cite {
    font-style: normal;
    font-size: 15px;
}

/* The languages we answer in, as chips. They are a list of facts rather than
 * links, so nothing here reacts to the pointer. */
.about-us__languages {
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 12px;
}

.about-us__languages li {
    padding: 10px 20px;
    border: 1px solid rgba(22, 33, 59, 0.12);
    border-radius: 40px;
    background: #fff;
    font-size: 16px;
    line-height: 1.4;
}

/* The trust figures carry a heading and a note under the number, which the
 * theme's counter item does not allow for on its own. */
.counter-area__item .title {
    line-height: 1.4;
}


/* -------------------------------------------------------------------------
 * 18. Build credit
 * ---------------------------------------------------------------------- */

/* A signature, not a nav item: it sits at the same size as the copyright but
 * quieter, and only resolves to full white on hover. The rule to its left
 * separates it from the footer links without drawing a hard divider. */
.built-by {
    font-family: "Lato", sans-serif;
    font-size: 15px;
    line-height: 26px;
    color: rgba(255, 255, 255, 0.45);
}

.built-by a {
    position: relative;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: color 0.3s ease;
}

/* The underline grows from the left on hover rather than appearing at full
 * width, which is the difference between a link reacting and a link blinking. */
.built-by a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: #0e6e5c;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
}

.built-by a:hover,
.built-by a:focus-visible {
    color: #fff;
}

.built-by a:hover::after,
.built-by a:focus-visible::after {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .built-by a::after {
        transition: none;
    }
}

@media (min-width: 768px) {
    .built-by {
        padding-left: 24px;
        margin-left: 24px;
        border-left: 1px solid rgba(255, 255, 255, 0.15);
    }
}

@media (max-width: 767px) {
    .built-by {
        margin-top: 12px;
    }
}