/* ==========================================================================
   Frak Finance — components written for the Laravel build
   (hero slider, contact forms). Loaded after the exported theme stylesheet.
   ========================================================================== */

/* --- Hero slider ---------------------------------------------------------- */
.frak-hero {
    position: relative;
    min-height: 655px;
    overflow: hidden;
    background-color: #121c27;
}

.frak-hero__slides {
    position: absolute;
    inset: 0;
}

.frak-hero__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.76s ease-in-out;
}

.frak-hero__slide.is-active {
    opacity: 1;
    visibility: visible;
}

/* Layer entrance, matching the slider plugin this replaces: each line slides
   in 50px from the right while it fades up, 700ms on a power3.inOut curve,
   staggered the way the live slides are timed. */
@keyframes frak-hero-layer-in {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes frak-hero-layer-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.frak-hero__title,
.frak-hero__rule,
.frak-hero__text,

.frak-hero__slide.is-active .frak-hero__title {
    animation: frak-hero-layer-in 700ms cubic-bezier(0.77, 0, 0.175, 1) 510ms both;
}

.frak-hero__slide.is-active .frak-hero__rule {
    animation: frak-hero-layer-in 700ms cubic-bezier(0.77, 0, 0.175, 1) 690ms both;
}

.frak-hero__slide.is-active .frak-hero__text {
    animation: frak-hero-layer-in 700ms cubic-bezier(0.77, 0, 0.175, 1) 820ms both;
}


@media (prefers-reduced-motion: reduce) {
    .frak-hero__title,
    .frak-hero__rule,
    .frak-hero__text {
        opacity: 1;
    }

    .frak-hero__slide.is-active .frak-hero__title,
    .frak-hero__slide.is-active .frak-hero__rule,
    .frak-hero__slide.is-active .frak-hero__text {
        animation: none;
    }

    .frak-hero__progress-fill {
        animation: none;
        width: 100%;
    }

    .frak-hero__media {
        transition: none;
    }
}

.frak-hero__media {
    position: absolute;
    inset: 0;
    background-position: center bottom;
    background-size: cover;
    transform: scale(1.06);
    transition: transform 8s ease-out;
}

.frak-hero__slide.is-active .frak-hero__media {
    transform: scale(1);
}

.frak-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18, 28, 39, 0.92) 0%, rgba(18, 28, 39, 0.55) 55%, rgba(18, 28, 39, 0.25) 100%);
}

.frak-hero__body {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 700px;
    padding: 40px 20px 150px max(20px, calc((100vw - 1650px) / 2 + 10px));
    color: #fff;
}

.frak-hero__title {
    margin: 0;
    font-family: "GT Walsheim Pro", sans-serif;
    font-size: clamp(34px, 4vw, 58px);
    font-weight: 400;
    line-height: 1.15;
    color: #fff;
}

.frak-hero__rule {
    display: block;
    width: 100%;
    max-width: 750px;
    height: 1px;
    margin: 34px 0 26px;
    background: rgba(255, 255, 255, 0.35);
}

.frak-hero__rule::before {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: -1px;
    background: #fff;
}

.frak-hero__text {
    max-width: 620px;
    margin: 0 0 34px;
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82);
}



.frak-hero__nav {
    position: absolute;
    z-index: 3;
    bottom: 46px;
    left: max(20px, calc((100vw - 1650px) / 2 + 10px));
    display: flex;
    gap: 60px;
}

.frak-hero__dot {
    position: relative;
    padding: 0 0 16px;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.55);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.frak-hero__dot::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100px;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
}

.frak-hero__dot.is-active {
    color: #fff;
}

.frak-hero__dot.is-active::after {
    background: #fff;
}

.frak-hero__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.14);
}

.frak-hero__progress-fill {
    display: block;
    width: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    animation: frak-hero-progress linear forwards;
}

@keyframes frak-hero-progress {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .frak-hero {
        min-height: 560px;
    }

    .frak-hero__body {
        padding: 110px 24px 90px;
    }

    .frak-hero__nav {
        left: 24px;
        gap: 40px;
    }

    .frak-hero__dot::after {
        width: 60px;
    }
}

/* --- Forms ---------------------------------------------------------------- */
.frak-form__status {
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: 5px;
    background: rgba(46, 160, 96, 0.15);
    border: 1px solid rgba(46, 160, 96, 0.5);
    color: #fff;
    font-size: 14px;
}

.frak-form__errors {
    margin-bottom: 18px;
    padding: 12px 16px 12px 32px;
    border-radius: 5px;
    background: rgba(214, 69, 69, 0.15);
    border: 1px solid rgba(214, 69, 69, 0.5);
    color: #fff;
    font-size: 14px;
}

/* Field feedback has its own style; the boxed list above is for form summaries. */
.frak-form .frak-form__field-error {
    display: block;
    position: static;
    box-sizing: border-box;
    width: 100%;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: #ef4444;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.frak-form .frak-form__field-error[hidden] {
    display: none;
}

.frak-form__errors li {
    list-style: disc;
}

.frak-form .input-filled {
    margin-bottom: 14px;
}

/* CF7 form 22530 (contact page, "Let's Collaborate with Us!") keeps each control
   in a .wpcf7-form-control-wrap, and the theme already spaces those 20px apart.
   Adding our own gap on top of it pushes the rows 14px further apart than the
   live site and, because the column is vertically centred in the section, lifts
   the whole block by half the accumulated difference. */
.frak-form .wrap-ctf-page .input-filled {
    margin-bottom: 0;
}

/* CF7 form 20715 ("Let's Connect", the article and news sidebars) ends on the
   submit row. Our 14px gap belongs between rows, not after the last one: with
   no padding or border in between it collapses out through the form and pushes
   whatever follows the widget down by 14px, which is what moved "Latest News"
   out of place against the live page. */
.frak-form .wrap-ctf-3 .input-filled:last-child {
    margin-bottom: 0;
}

/* CF7 form 21257/21547 (the consultation cards) keeps each control in a
   .wpcf7-form-control-wrap that the theme already spaces, so our own row gap
   would stack on top of it and make the card 70px taller than the live one. */
.frak-form .wrap-ctf-step .input-filled {
    margin-bottom: 0;
}

.frak-form [hidden] {
    display: none !important;
}

/* --- Home hero placement -------------------------------------------------- */
/* The slider sits in a half-width Elementor column but, like the plugin it
   replaces, it paints the full window width behind the consultation card. */
.frak-hero-section {
    position: relative;
    min-height: 655px;
}

.frak-hero-section .elementor-container {
    position: relative;
    z-index: 2;
}

/* The slider is anchored to the section, not to its column, so it always
   covers the full band even when the consultation card makes it taller. */
.frak-hero-section > .elementor-container > .elementor-column:first-child,
.frak-hero-section .elementor-col-50:first-child > .elementor-widget-wrap,
.frak-hero-section .elementor-widget-slider_revolution,
.frak-hero-section .elementor-widget-slider_revolution > .elementor-widget-container {
    position: static;
}

.frak-hero-section .frak-hero {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 100vw;
    height: 100%;
    min-height: 0;
}

.frak-hero-section > .elementor-container {
    align-items: center;
    min-height: 655px;
}

/* --- Two step consultation form ------------------------------------------ */
/* The CF7 multi-step plugin was dropped with the rest of the WordPress
   plugins, but the exported theme CSS still styles the form through its class
   names (`.cf7mls_next` paints the white step button, `.wrap-ctf-step.step-2`
   lays out the radios). These are the plugin's own structural rules, scoped to
   our forms: the steps stack in one place and only the current one is shown,
   so the card keeps the height of the step being filled in.
   `.cf7mls_current_fs` is put on the active step by site.js. */
.frak-form .fieldset-cf7mls {
    border: none;
    background: none;
}

.frak-form .fieldset-cf7mls-wrapper {
    position: relative;
    overflow: hidden;
}

.frak-form--steps .fieldset-cf7mls-wrapper .fieldset-cf7mls {
    width: 100%;
    opacity: 0;
    visibility: hidden;
    /* Park every inactive step absolutely (whether it sits before or after the
       current one) so the card always collapses to the active step's height.
       Only parking later siblings left step 1 in flow on step 2, adding its
       full height as empty space above the second step. */
    position: absolute;
    left: 0;
    top: 15px;
    transform: translate(110%, 0);
}

.frak-form--steps .fieldset-cf7mls-wrapper .cf7mls_current_fs {
    opacity: 1;
    visibility: visible;
    position: relative;
    top: 0;
    transform: none;
}

/* The plugin's own spacing around the step button. The page CSS overrides it
   per widget where the design asks for something tighter (the hero card pins
   the row at 60px), so these are the defaults the rest inherit. */
.wpcf7-form .fieldset-cf7mls .cf7mls-btns {
    min-height: 80px;
}

.cf7mls-btns .cf7mls_next.action-button,
.cf7mls-btns .cf7mls_back.action-button {
    margin: 25px 0 26px;
}

@media (max-width: 1024px) {
    .frak-hero-section,
    .frak-hero-section > .elementor-container {
        min-height: 620px;
    }

    .frak-hero-section .frak-hero__body {
        max-width: 62%;
        padding: 40px 24px 130px;
    }

    .frak-hero-section .frak-hero__nav {
        bottom: 34px;
    }
}

@media (max-width: 767px) {
    /* Phones stack: the slider takes its own height and the consultation card
       follows underneath it, the way the live site lays out. */
    .frak-hero-section,
    .frak-hero-section > .elementor-container {
        min-height: 0;
    }

    .frak-hero-section .frak-hero {
        position: relative;
        left: auto;
        transform: none;
        width: 100%;
        height: auto;
        min-height: 560px;
    }

    .frak-hero-section .frak-hero__body {
        position: relative;
        z-index: 2;
        max-width: 100%;
        padding: 60px 24px 110px;
    }

    .frak-hero-section .frak-hero__nav {
        left: 24px;
        bottom: 30px;
        gap: 30px;
    }

    .frak-hero-section .frak-hero__dot::after {
        width: 48px;
    }

    /* keep the card inside the viewport instead of forcing a sideways scroll */
    .frak-hero-section .elementor-column:last-child .elementor-widget {
        width: 100% !important;
        max-width: 100%;
    }
}

/* --- Article table of contents -------------------------------------------- */
/* The widget already prints an arrow per entry, so drop the list markers. */
.elementor-toc__list-wrapper,
.elementor-toc__list-item,
.elementor-toc__list-item .elementor-toc__list-wrapper {
    list-style: none;
    list-style-type: none;
}

.elementor-toc__list-item::marker {
    content: "";
}

/* breathing room between entries */
.elementor-toc__list-item + .elementor-toc__list-item {
    margin-top: 6px;
}

.elementor-toc__list-item-text-wrapper {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

/* the clicked heading clears the sticky header instead of hiding under it */
.elementor-widget-theme-post-content h1,
.elementor-widget-theme-post-content h2,
.elementor-widget-theme-post-content h3,
.elementor-widget-theme-post-content h4,
.elementor-widget-theme-post-content h5,
.elementor-widget-theme-post-content h6,
[id^="elementor-toc__heading-anchor"] {
    scroll-margin-top: 120px;
}

/* --- Page shell spacing ---------------------------------------------------- */
/* Most pages run their sections edge to edge; articles and the listings keep
   the theme's own vertical rhythm. The class is set per page view. */
body.frak-flush-main #pxl-wapper #pxl-main {
    padding-top: 0;
    padding-bottom: 0;
}

body.frak-flush-main-top #pxl-wapper #pxl-main {
    padding-top: 0;
}

/* --- Article sidebars ------------------------------------------------------ */
/* The two side columns pin while the article itself scrolls. They sit in a
   full-height flex row, so they first have to stop stretching. */
@media (min-width: 1025px) {
    /* Nothing is clipped: a sidebar shorter than the viewport pins under the
       header, a taller one scrolls until its end shows and pins there. The
       offset is worked out per column in site.js. */
    .frak-sticky-col {
        position: sticky;
        top: var(--frak-sticky-top, 114px);
        align-self: flex-start;
    }
}

/* --- "Similar Cases We Have Resolved" -------------------------------------- */
/* Heading and category filters sit centred in the container on case studies. */
.single-portfolio .elementor-element-156e4bb6,
.single-portfolio .elementor-element-156e4bb6 .elementor-heading-title {
    text-align: center;
}

.single-portfolio .elementor-element-64a52be6 .swiper-filter {
    display: flex;
    justify-content: center;
}

.single-portfolio .elementor-element-64a52be6 .pxl-grid-filter {
    text-align: center;
}

.single-portfolio .elementor-element-64a52be6 .pxl--filter-inner {
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Hero consultation card ------------------------------------------------ */
/* The white step button used to be hand-written here. The form now carries the
   `.cf7mls_next` class the export styles, so site.css paints it. */

/* The card carries `max-height:700px; overflow:hidden` from a WPCode snippet in
   site.css. The form never reaches 700px at any width, so the only thing that
   clip ever cuts is the "What are you looking for?" list, which opens past the
   card's bottom edge — the last rows were sliced in half and the final service
   could not be scrolled to. The clip is lifted only while a list is open, so
   the resting card is unchanged. */
.elementor-24328 .elementor-element.elementor-element-9078ead:has(.pxl-select-higthlight.active) {
    overflow: visible;
}

/* --- Article link handling -------------------------------------------------
   App\Support\Content\LinkProcessor marks every link inside a stored article
   body as internal or external while the page renders. These two classes
   exist nowhere else — not in the chrome, the header, the footer, the buttons
   or the dashboard — so the rules below can never reach a link they were not
   meant for.

   `!important` on the external rules is deliberate: the 4MB Elementor export
   styles body links through selectors we do not control and cannot outrank
   politely (`.elementor a`, `blockquote:not(.pxl-blockquote) a`, and the
   per-article `.elementor-NNNNN …` sheets, which load after this file). It is
   confined to the two classes the link processor adds.

   Internal links carry no colour of their own by default: they inherit the
   paragraph's, exactly as they always have, and only take a colour — with the
   same force — once the dashboard sets one (SEO → Blog Link Settings, printed
   into the head by LinkSettings::styleBlock()). */
a.blog-link-external {
    color: var(--frak-link-external, #FF0000) !important;
    text-decoration: var(--frak-link-external-underline, underline) !important;
    text-underline-offset: 2px;
}
a.blog-link-external:hover,
a.blog-link-external:focus-visible {
    color: var(--frak-link-external-hover, #CC0000) !important;
}
a.blog-link-internal:focus-visible,
a.blog-link-external:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
/* The indicator is drawn here, never written into the stored content, and is
   hidden from screen readers — the "opens in a new tab" wording the processor
   adds is what they announce. */
a.blog-link-external[target="_blank"]::after {
    content: var(--frak-link-external-icon, none);
    display: inline-block;
    margin-left: 0.25em;
    font-size: 0.85em;
    line-height: 1;
    speak: never;
}
/* Visually hidden, still read aloud: the "opens in a new tab" note the link
   processor adds. Never written into stored content. */
.frak-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Article breadcrumb ----------------------------------------------------
   A WPCode snippet baked into site.css hides every middle crumb on single
   pages — `body.single .pxl-breadcrumb li:not(:first-child):not(:last-child)`
   — which is why the live site reads "Home → article title" with nothing in
   between. The owner wants the full trail on every detail page, so the middle
   crumbs are shown again on blog articles (Home › Blog › category), news
   articles (Home › News) and case studies (Home › Case Studies). Matching the
   snippet's own `:not(:first-child):not(:last-child)` selector keeps the
   specificity equal, and this file loads after it. */
body.single-post .pxl-breadcrumb li:not(:first-child):not(:last-child),
body.single-news .pxl-breadcrumb li:not(:first-child):not(:last-child),
body.single-portfolio .pxl-breadcrumb li:not(:first-child):not(:last-child) {
    display: list-item;
}

/* --- Author page -----------------------------------------------------------
   The profile card above an author's article list. Built from the site's own
   type scale and colour tokens rather than the WordPress archive markup, so it
   sits inside the existing blog grid with nothing new imported. */
.frak-author-card {
    display: flex;
    gap: 26px;
    align-items: flex-start;
    margin: 0 0 42px;
    padding: 30px;
    border: 1px solid var(--e-global-color-65b3eee, #D5DCDE);
    border-radius: 12px;
    background: #fff;
}
.frak-author-card__photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex: none; }
.frak-author-card__body { min-width: 0; }
.frak-author-card__name {
    font-family: "Gilroy", sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--e-global-color-secondary, #0A1119);
}
.frak-author-card__title { margin-top: 4px; font-size: 15px; color: var(--e-global-color-text, #4B535D); }
.frak-author-card__bio { margin: 14px 0 0; font-size: 16px; line-height: 27px; color: var(--e-global-color-text, #4B535D); }
.frak-author-card__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; padding: 0; list-style: none; }
.frak-author-card__links a { font-size: 15px; font-weight: 600; color: var(--e-global-color-secondary, #0A1119); }
.frak-author-card__links a:hover { text-decoration: underline; }
.frak-author-heading {
    font-family: "Gilroy", sans-serif;
    font-size: 30px;
    line-height: 1.3;
    margin: 0 0 30px;
    color: var(--e-global-color-secondary, #0A1119);
}
.frak-author-empty {
    margin: 0 0 60px;
    padding: 28px 30px;
    border: 1px dashed var(--e-global-color-65b3eee, #D5DCDE);
    border-radius: 12px;
    font-size: 16px;
    color: var(--e-global-color-text, #4B535D);
}
@media (max-width: 767px) {
    .frak-author-card { flex-direction: column; gap: 18px; padding: 24px; }
    .frak-author-card__photo { width: 92px; height: 92px; }
    .frak-author-heading { font-size: 24px; }
}

/* --- Archive pagination on author and category pages -----------------------
   The theme styles archive pagination through one selector list — `.blog`,
   `.search`, `.tag`, `.categorie` (its own typo for `.category`) — so the
   pagination on a body that is none of those renders as bare text and the
   arrow loses its circle. Author archives are new here and category archives
   were never covered, so both get the same treatment, declaration for
   declaration, rather than a look of their own. */
body.author .pxl-pagination-wrap,
body.category .pxl-pagination-wrap { margin-bottom: 2px; }

body.author .pxl-pagination-wrap .pxl-pagination-links,
body.category .pxl-pagination-wrap .pxl-pagination-links {
    margin-top: 30px;
    width: 100%;
    display: inline-flex;
    justify-content: center;
    column-gap: 15px;
}
body.author .pxl-pagination-wrap .page-numbers,
body.category .pxl-pagination-wrap .page-numbers {
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--secondary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 1000px;
    border: 1px solid #d3d5d6;
    font-size: 16px;
}
body.author .pxl-pagination-wrap .page-numbers svg,
body.category .pxl-pagination-wrap .page-numbers svg { width: 19px; }

body.author .pxl-pagination-wrap .page-numbers:hover,
body.category .pxl-pagination-wrap .page-numbers:hover {
    color: #fff;
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}
/* The theme ships one right-pointing arrow and uses it for both directions;
   the "previous" one is turned around so it points back to the page it
   returns to. */
body.author .pxl-pagination-wrap .page-numbers.prev svg,
body.category .pxl-pagination-wrap .page-numbers.prev svg { transform: scaleX(-1); }

/* --- Blog content blocks ---------------------------------------------------
   Styling for articles built from blocks. Scoped to the block classes, which
   exist nowhere else, so nothing here reaches the converted Elementor markup
   an older article still renders. */
.blog-prose > *:first-child { margin-top: 0; }
.blog-prose > *:last-child { margin-bottom: 0; }
.blog-prose p { margin: 0 0 22px; font-size: 17px; line-height: 30px; color: var(--e-global-color-text, #4B535D); }
.blog-prose h2, .blog-prose h3, .blog-prose h4, .blog-prose h5, .blog-prose h6, .blog-heading {
    font-family: "Gilroy", sans-serif;
    color: var(--e-global-color-secondary, #0A1119);
    margin: 38px 0 16px;
    line-height: 1.3;
}
.blog-prose h2, .blog-heading { font-size: 30px; }
.blog-prose h3 { font-size: 25px; }
.blog-prose h4 { font-size: 21px; }
.blog-prose h5 { font-size: 18px; }
.blog-prose h6 { font-size: 16px; }
.blog-prose ul, .blog-prose ol, .blog-list { margin: 0 0 22px; padding-left: 22px; font-size: 17px; line-height: 30px; color: var(--e-global-color-text, #4B535D); }
.blog-prose li, .blog-list li { margin: 6px 0; }
.blog-list--bulleted { list-style: disc; }
.blog-list--numbered { list-style: decimal; }

.blog-quote {
    margin: 30px 0;
    padding: 24px 28px;
    border-left: 3px solid var(--e-global-color-secondary, #0A1119);
    background: #f6f7f8;
    border-radius: 0 10px 10px 0;
}
.blog-quote p { margin: 0; font-size: 19px; line-height: 32px; color: var(--e-global-color-secondary, #0A1119); }
.blog-quote cite { display: block; margin-top: 10px; font-size: 14px; font-style: normal; color: var(--e-global-color-text, #4B535D); }

.blog-figure { margin: 30px 0; }
.blog-figure img { display: block; max-width: 100%; height: auto; border-radius: 10px; }
.blog-figure figcaption { margin-top: 10px; font-size: 14px; color: var(--e-global-color-text, #4B535D); }
.blog-figure--wide { max-width: 860px; }
.blog-figure--medium { max-width: 620px; }
.blog-figure--small { max-width: 380px; }
.blog-figure.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.blog-figure.is-center figcaption { text-align: center; }
.blog-figure.is-right { margin-left: auto; }

.blog-cta {
    margin: 34px 0;
    padding: 28px 30px;
    border-radius: 12px;
    background: var(--e-global-color-primary, #121C27);
    color: #fff;
}
.blog-cta__heading { font-family: "Gilroy", sans-serif; font-size: 22px; line-height: 1.3; }
.blog-cta__text { margin: 8px 0 18px; font-size: 16px; line-height: 28px; color: #D5DCDE; }
.blog-cta .blog-cta__button { display: inline-flex; }

.blog-divider { margin: 34px 0; border: 0; border-top: 1px solid var(--e-global-color-65b3eee, #D5DCDE); }
.blog-divider--space { border: 0; height: 34px; margin: 0; }
.blog-divider--dots { border: 0; height: 6px; background-image: radial-gradient(currentColor 1.5px, transparent 1.6px); background-size: 14px 6px; opacity: 0.35; }

/* Tables: a wrapper that scrolls on its own so a wide table never stretches
   the article, and four looks chosen from the dashboard. */
.blog-table-wrapper { margin: 30px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.blog-table-wrapper:focus-visible { outline: 2px solid var(--e-global-color-secondary, #0A1119); outline-offset: 3px; }
.blog-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 16px;
    line-height: 26px;
    color: var(--e-global-color-text, #4B535D);
}
.blog-table__caption {
    caption-side: top;
    text-align: left;
    padding: 0 0 12px;
    font-family: "Gilroy", sans-serif;
    font-size: 18px;
    color: var(--e-global-color-secondary, #0A1119);
}
.blog-table th, .blog-table td { padding: 12px 16px; text-align: left; vertical-align: top; }
.blog-table thead th, .blog-table tbody th {
    background: var(--e-global-color-primary, #121C27);
    color: #fff;
    font-weight: 600;
}
.blog-table tbody th { background: #f2f4f5; color: var(--e-global-color-secondary, #0A1119); }
.blog-table .is-center { text-align: center; }
.blog-table .is-right { text-align: right; }
.blog-table__note { margin: -18px 0 30px; font-size: 14px; color: var(--e-global-color-text, #4B535D); }

.blog-table--default tbody tr { border-bottom: 1px solid var(--e-global-color-65b3eee, #D5DCDE); }
.blog-table--striped tbody tr:nth-child(even) td, .blog-table--striped tbody tr:nth-child(even) th { background: #f7f8f9; }
.blog-table--striped tbody tr { border-bottom: 1px solid #eceff1; }
.blog-table--bordered th, .blog-table--bordered td { border: 1px solid var(--e-global-color-65b3eee, #D5DCDE); }
.blog-table--minimal thead th { background: none; color: var(--e-global-color-secondary, #0A1119); border-bottom: 2px solid var(--e-global-color-secondary, #0A1119); }
.blog-table--minimal tbody th { background: none; }
.blog-table--minimal tbody tr { border-bottom: 1px solid #eceff1; }

/* row options come last so they win over whichever style is chosen */
.blog-table tbody tr.is-highlighted td, .blog-table tbody tr.is-highlighted th { background: #fff8e1; }
.blog-table tbody tr.is-bold td, .blog-table tbody tr.is-bold th { font-weight: 600; color: var(--e-global-color-secondary, #0A1119); }

@media (max-width: 767px) {
    .blog-prose p, .blog-prose ul, .blog-prose ol, .blog-list { font-size: 16px; line-height: 28px; }
    .blog-prose h2, .blog-heading { font-size: 25px; }
    .blog-prose h3 { font-size: 21px; }
    .blog-cta { padding: 22px; }
}

/* --- Case studies listing cards ---------------------------------------------
   The card titles are <h2> for the page outline, but the theme styles only the
   link inside them (20px / 30px) and leaves the heading's own tag to set the line
   box. As an h2 (48px x 1.36) every wrapped line sat ~65px apart; the export used
   h5 (22px x 1.4545), so the card gets those metrics back and reads as before. */
.pxl-portfolio-grid-layout1 .pxl-grid-item .pxl-post--inner .pxl-post--holder .pxl-post--title {
    font-size: 22px;
    line-height: 1.4545;
}

/* --- Case study headings keep their look -----------------------------------
   A case study page prints one H1 (the hero title) and its Table of Contents
   sections as H2; every other heading is a <div> (CaseStudyOutline + the
   case-study template). Each element records the tag it had in
   data-frak-was, and the exported CSS styles headings partly by bare tag, so
   these rules give it back that tag's base styles. :where() keeps each rule
   at bare-tag specificity, so every class rule that styled the heading before
   still wins exactly as it did. */
div:where([data-frak-was]) {
    font-family: "GT Walsheim Pro";
    color: #0a1119;
    font-weight: normal;
    margin: 0 0 15px;
    clear: both;
    line-height: 1.36364;
}
:is(div, h1, h2, h3):where([data-frak-was="h1"]) { font-size: 52px; }
:is(div, h1, h2, h3):where([data-frak-was="h2"]) { font-size: 48px; }
:is(div, h1, h2, h3):where([data-frak-was="h3"]) { font-size: 32px; }
:is(div, h1, h2, h3):where([data-frak-was="h4"]) { font-size: 28px; }
:is(div, h1, h2, h3):where([data-frak-was="h5"]) { font-size: 22px; line-height: 1.4545; }
:is(div, h1, h2, h3):where([data-frak-was="h6"]) { font-size: 18px; }

/* The case-study tag chips were an <h6>; case-study.css styles them by that tag. */
.elementor-widget-heading div:where([data-frak-was="h6"]) {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.elementor-widget-heading div:where([data-frak-was="h6"]) a {
    background: #0f1720;
    padding: 7px 25px;
    border-radius: 30px;
    line-height: 20px !important;
    font-size: 15px !important;
    font-weight: 400;
    color: white !important;
    text-decoration: none;
    transition: all 0.2s ease;
}
@media (max-width: 767px) {
    .elementor-widget-heading div:where([data-frak-was="h6"]) {
        gap: 3px;
    }
    .elementor-widget-heading div:where([data-frak-was="h6"]) a {
        padding: 2px 7px;
        border-radius: 30px;
        line-height: 20px !important;
        font-size: 12px !important;
    }
}

/* Home "Featured News and Insights": the theme draws these arrows at 20% opacity,
   too faint to see; darker by default, full strength on hover as before. */
.elementor-element-a4db8ea .pxl-swiper-arrow-wrap.style-1 .pxl-swiper-arrow {
    opacity: 0.75;
}
.elementor-element-a4db8ea .pxl-swiper-arrow-wrap.style-1 .pxl-swiper-arrow:hover {
    opacity: 1;
}

/* Footer copyright: "Frak Finance" is plain text now (it linked to the
   homepage); keep the white the link had, not the theme's dark primary. */
#pxl-footer-elementor span.color-primary {
    color: #fff;
}

/* site.css (exported WPCode snippet) hides every `.elementor-top-section
   .pxl-text-editor` on news articles. The footer is built from top sections
   too, so its contact details, newsletter note, copyright and bottom links
   vanished on /news/*. Keep the snippet for the page itself, not the footer. */
.single-news #pxl-footer-elementor .elementor-top-section .pxl-text-editor {
    display: block !important;
}

/* Step two's Back button sits beside Submit and carries its classes, so each
   page's submit styling paints it too; only the arrow is mirrored to the left.
   Back follows Submit in the markup and the row is reversed, so Back shows on
   the left and Submit stays on top wherever the pair has to wrap. The buttons'
   top margin moves onto the row (10px row padding + the submit's own margin:
   25px, or 45px in the hero card) so a wrapped pair has no gap to inherit and
   the card keeps its height. The hero card (a5bea7a on home, c4f4b95 on
   services) also loses its 75px offset so the pair centres, and both buttons
   are tighter there because the card is too narrow for them at full size. */
.frak-form.frak-form--steps[data-frak-steps] .wrap-ctf-step.step-2 .input-filled > .wpcf7-form-control-wrap.your-submit {
    display: flex !important;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: center !important;
    align-items: center;
    align-self: stretch;
    gap: 12px 8px;
    width: 100% !important;
    margin-left: 0 !important;
    padding-top: 35px !important;
}

/* The hero step lays its children out shrink-to-fit (flex column, start
   aligned), so the row only centres once the container spans the step. */
.frak-form.frak-form--steps[data-frak-steps] .wrap-ctf-step.step-2 > .containter {
    align-self: stretch;
}

.frak-form.frak-form--steps[data-frak-steps] .wrap-ctf-step.step-2 .input-filled > .your-submit > button {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    white-space: nowrap;
}

.frak-form.frak-form--steps .step-2 .your-submit .frak-form__back {
    padding: 0 35px 0 65px;
}

.frak-form.frak-form--steps .step-2 .your-submit .frak-form__back svg {
    right: auto;
    left: 35px;
    transform: translateY(-50%) scaleX(-1);
}

.elementor-element-a5bea7a .frak-form.frak-form--steps[data-frak-steps] .wrap-ctf-step.step-2 .input-filled > .wpcf7-form-control-wrap.your-submit,
.elementor-element-c4f4b95 .frak-form.frak-form--steps[data-frak-steps] .wrap-ctf-step.step-2 .input-filled > .wpcf7-form-control-wrap.your-submit {
    padding-top: 55px !important;
}

.elementor-element-a5bea7a .frak-form.frak-form--steps .step-2 .your-submit button[type="submit"],
.elementor-element-c4f4b95 .frak-form.frak-form--steps .step-2 .your-submit button[type="submit"] {
    padding: 0 40px 0 16px !important;
}

.elementor-element-a5bea7a .frak-form.frak-form--steps .step-2 .your-submit button[type="submit"] svg,
.elementor-element-c4f4b95 .frak-form.frak-form--steps .step-2 .your-submit button[type="submit"] svg {
    right: 16px;
}

.elementor-element-a5bea7a .frak-form.frak-form--steps .step-2 .your-submit .frak-form__back,
.elementor-element-c4f4b95 .frak-form.frak-form--steps .step-2 .your-submit .frak-form__back {
    padding: 0 16px 0 40px !important;
}

.elementor-element-a5bea7a .frak-form.frak-form--steps .step-2 .your-submit .frak-form__back svg,
.elementor-element-c4f4b95 .frak-form.frak-form--steps .step-2 .your-submit .frak-form__back svg {
    left: 16px;
}

/* A radio list switched to "more than one choice" in the dashboard renders
   tick boxes in the same wpcf7-list-item markup. The theme's dot and tick are
   drawn on the label (site.css keys them on [type="radio"]); these are the
   same rules for [type="checkbox"], with the dot squared off so a visitor can
   tell several answers are allowed. */
.wrap-ctf-step .your-radio .wpcf7-list-item [type="checkbox"] {
    position: absolute;
    z-index: -1111;
    opacity: 0;
}

.wrap-ctf-step .your-radio .wpcf7-list-item [type="checkbox"] + .wpcf7-list-item-label:before {
    border-radius: 5px;
}

.wrap-ctf-step .your-radio .wpcf7-list-item [type="checkbox"]:checked + .wpcf7-list-item-label:before {
    background-color: #121c27;
}

.wrap-ctf-step .your-radio .wpcf7-list-item [type="checkbox"]:checked + .wpcf7-list-item-label:after {
    opacity: 1;
}

.wrap-ctf-step .your-radio .wpcf7-list-item [type="checkbox"]:focus-visible + .wpcf7-list-item-label:before {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* A dropdown taking several answers (site.js builds it in the theme's
   .pxl-select markup): the chosen options are listed in the box, cut short
   with an ellipsis, and ticked in the open list. */
.pxl-select.frak-multi .frak-multi__text {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    /* the hero cards size themselves to their content: without this, a long
       list of choices would widen the whole card instead of being cut short */
    contain: inline-size;
    padding-right: 36px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pxl-select.frak-multi .pxl-select-options li {
    position: relative;
    padding-right: 34px;
}

.pxl-select.frak-multi .pxl-select-options li.is-selected {
    color: #0a1320;
    font-weight: 500;
}

.pxl-select.frak-multi .pxl-select-options li.is-selected::after {
    content: "\2713";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 14px;
}

.pxl-select.frak-multi select[multiple].pxl-select-hidden {
    height: 0;
    pointer-events: none;
}

/* Service pages' hero (owner's request). From tablet up the hero is at least
   800px tall: the export's WPCode snippet fixes it at calc(100vh - 157px) with
   `min-height: unset !important` above 1024px, so this needs the extra `body`
   to outrank it (min-height wins over height when larger). Up to 1440px the
   consultation card is 450px wide instead of the column's 30%, which left it
   as narrow as 212px on a tablet. Below 960px a 450px card leaves the heading
   too little room (a word like "Management" ran under the card), so there the
   heading sits above the card, as it does on phones. Phones keep the export's
   layout. */
@media (min-width: 768px) {
    body .elementor-26852 .elementor-element.elementor-element-6896c126 {
        min-height: 800px !important;
    }
}
@media (min-width: 768px) and (max-width: 1440px) {
    body .elementor-26852 .elementor-element.elementor-element-6d581745 {
        --width: 450px;
        flex-shrink: 0;
    }
    body .elementor-26852 .elementor-element.elementor-element-7ae92a46 {
        width: 100%;
        max-width: 450px !important;
    }
}
@media (min-width: 768px) and (max-width: 959px) {
    body .elementor-26852 .elementor-element.elementor-element-6896c126 {
        --flex-direction: column;
        --justify-content: center;
        --gap: 0px 0px;
        --row-gap: 0px;
        padding-top: 60px;
        padding-bottom: 60px;
    }
    body .elementor-26852 .elementor-element.elementor-element-43eb7797 {
        --width: 100%;
    }
    body .elementor-26852 .elementor-element.elementor-element-6d581745 {
        --align-self: center;
        --padding-bottom: 0px;
    }
}